aboutsummaryrefslogtreecommitdiff
path: root/_scss/imports/scss/_Base.scss
diff options
context:
space:
mode:
Diffstat (limited to '_scss/imports/scss/_Base.scss')
-rw-r--r--_scss/imports/scss/_Base.scss70
1 files changed, 45 insertions, 25 deletions
diff --git a/_scss/imports/scss/_Base.scss b/_scss/imports/scss/_Base.scss
index f9a1cfa3..8a743174 100644
--- a/_scss/imports/scss/_Base.scss
+++ b/_scss/imports/scss/_Base.scss
@@ -4,12 +4,12 @@
4// (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. 4// (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
5// </copyright> 5// </copyright>
6 6
7/* 7
8 * Base.scss 8//Base.scss
9 * Base styles for entire application. 9//Base styles for entire application.
10 * Note that colors and font definitions go in 10//Note that colors and font definitions go in
11 * _scss/themes/themename/_colors.scss and _scss/themes/themename/_fonts.scss 11//_scss/themes/themename/_colors.scss and _scss/themes/themename/_fonts.scss
12 */ 12
13 13
14.clear { 14.clear {
15 display: block; 15 display: block;
@@ -42,19 +42,18 @@
42 float: right; 42 float: right;
43} 43}
44 44
45/* Begin: Basic skinning for form fields */ 45// Begin: Basic skinning for form fields
46/* Reset all */ 46// Reset all
47input.nj-skinned, 47input.nj-skinned,
48textarea.nj-skinned, 48textarea.nj-skinned,
49button.nj-skinned, 49button.nj-skinned,
50select.nj-skinned, 50select.nj-skinned,
51select.nj-skinned option, 51select.nj-skinned option {
52button.nj-skinned {
53 -webkit-appearance: none; 52 -webkit-appearance: none;
54 outline: none; 53 outline: none;
55} 54}
56 55
57/* Base styles */ 56// Base styles
58input[type="text"].nj-skinned, 57input[type="text"].nj-skinned,
59input[type="password"].nj-skinned, 58input[type="password"].nj-skinned,
60input[type="search"].nj-skinned, 59input[type="search"].nj-skinned,
@@ -68,7 +67,7 @@ select.nj-skinned option {
68 font-family: 'Droid Sans', sans-serif; 67 font-family: 'Droid Sans', sans-serif;
69} 68}
70 69
71/* Disabled styles */ 70// Disabled styles
72input.nj-skinned:disabled, 71input.nj-skinned:disabled,
73textarea.nj-skinned:disabled, 72textarea.nj-skinned:disabled,
74select.nj-skinned:disabled, 73select.nj-skinned:disabled,
@@ -76,7 +75,7 @@ button.nj-skinned:disabled {
76 opacity: 0.4; 75 opacity: 0.4;
77} 76}
78 77
79/* Text inputs and select boxes */ 78// Text inputs and select boxes
80input[type="text"].nj-skinned, 79input[type="text"].nj-skinned,
81input[type="password"].nj-skinned, 80input[type="password"].nj-skinned,
82input[type="search"].nj-skinned, 81input[type="search"].nj-skinned,
@@ -84,7 +83,7 @@ select.nj-skinned,
84select.nj-skinned option { 83select.nj-skinned option {
85 height: 13px; 84 height: 13px;
86} 85}
87/* 86//
88input[type="text"].nj-skinned:focus, 87input[type="text"].nj-skinned:focus,
89input[type="password"].nj-skinned:focus, 88input[type="password"].nj-skinned:focus,
90input[type="search"].nj-skinned:focus, 89input[type="search"].nj-skinned:focus,
@@ -93,7 +92,7 @@ select.nj-skinned:focus,
93select.nj-skinned option:focus { 92select.nj-skinned option:focus {
94 -webkit-box-shadow: 0px 0px 3px $color-focus-outline; 93 -webkit-box-shadow: 0px 0px 3px $color-focus-outline;
95} 94}
96*/ 95
97 96
98select.nj-skinned { 97select.nj-skinned {
99 background-image: url("../images/dropdown-bg.png"); 98 background-image: url("../images/dropdown-bg.png");
@@ -118,13 +117,31 @@ input[type="search"].nj-skinned::-webkit-search-cancel-button:after {
118 content:"\2716"; 117 content:"\2716";
119} 118}
120 119
121/* Buttons */ 120// Buttons
122button.nj-skinned { 121button.nj-skinned {
123 font-size: 9px; 122 font-size: 9px;
124 cursor: pointer; 123 cursor: pointer;
124 display: block;
125 border: 0px;
126 margin: 0px;
127 padding: 4px;
128 border: 1px $color-input-border solid;
129 background-color: $color-menu-bg;
130 background-image: -webkit-linear-gradient(top, $color-formgrad-top 0%, $color-formgrad-bottom 100%);
131 border-radius: 4px;
132 color: $color-menu-text;
133 text-transform: uppercase;
134 cursor: pointer;
135 text-shadow: 1px 1px 1px $color-app-shadow
136}
137button.nj-skinned:active {
138 background-image: -webkit-linear-gradient(top, $color-formgrad-bottom 0%, $color-formgrad-top 100%);
139}
140button.nj-skinned:hover {
141 -webkit-box-shadow: 0px 0px 3px $color-focus-outline;
125} 142}
126 143
127/* Radio buttons */ 144// Radio buttons
128input[type="radio"].nj-skinned { 145input[type="radio"].nj-skinned {
129 background-color: $color-menu-bg; 146 background-color: $color-menu-bg;
130 background-image: -webkit-linear-gradient(top, $color-radio-gradient-top 0%, $color-radio-gradient-bottom 100%); 147 background-image: -webkit-linear-gradient(top, $color-radio-gradient-top 0%, $color-radio-gradient-bottom 100%);
@@ -143,15 +160,18 @@ input[type="radio"].nj-skinned {
143 box-shadow: 0px 0px 2px $color-radio-shadow; 160 box-shadow: 0px 0px 2px $color-radio-shadow;
144} 161}
145input[type="radio"].nj-skinned:checked { 162input[type="radio"].nj-skinned:checked {
146 background-image: -webkit-linear-gradient(top, $color-radio-gradient-top 0%, $color-radio-gradient-bottom 100%); 163 background: -webkit-radial-gradient(center,
164 circle cover,
165 $color-radio 0%,
166 $color-radio 15%,
167 $color-radio 30%,
168 $color-transparent 31%),
169 -webkit-linear-gradient(top, $color-radio-gradient-top 0%, $color-radio-gradient-bottom 100%);
147 border: 2px solid $color-radio-border; 170 border: 2px solid $color-radio-border;
148} 171}
149input[type="radio"].nj-skinned:hover { 172input[type="radio"].nj-skinned:hover {
150 border: 2px solid $color-radio-border; 173 border: 2px solid $color-radio-border;
151} 174}
152input[type="radio"].nj-skinned:checked:after {
153 content:"\a0 \a0 \2022";
154}
155input[type="radio"].nj-skinned:active { 175input[type="radio"].nj-skinned:active {
156 background-image: -webkit-linear-gradient(top, $color-radio-gradient-bottom 0%, $color-radio-gradient-top 100%); 176 background-image: -webkit-linear-gradient(top, $color-radio-gradient-bottom 0%, $color-radio-gradient-top 100%);
157} 177}
@@ -160,7 +180,7 @@ input[type="radio"].nj-skinned:disabled {
160 border: 2px solid $color-radio-border; 180 border: 2px solid $color-radio-border;
161 cursor: default; 181 cursor: default;
162} 182}
163/* Checkboxes */ 183// Checkboxes
164input[type="checkbox"].nj-skinned { 184input[type="checkbox"].nj-skinned {
165 background-color: $color-menu-bg; 185 background-color: $color-menu-bg;
166 background-image: -webkit-linear-gradient(top, $color-radio-gradient-top 0%, $color-radio-gradient-bottom 100%); 186 background-image: -webkit-linear-gradient(top, $color-radio-gradient-top 0%, $color-radio-gradient-bottom 100%);
@@ -190,9 +210,9 @@ input[type="checkbox"].nj-skinned:disabled {
190 background-image: -webkit-linear-gradient(top, $color-radio-gradient-top 0%, $color-radio-gradient-bottom 100%); 210 background-image: -webkit-linear-gradient(top, $color-radio-gradient-top 0%, $color-radio-gradient-bottom 100%);
191 cursor: default; 211 cursor: default;
192} 212}
193/* End: Basic skinning for form fields */ 213// End: Basic skinning for form fields
194 214
195/* Begin: Basic skinning for visual dividers */ 215// Begin: Basic skinning for visual dividers
196.nj-divider { 216.nj-divider {
197 background-color: $color-divider-second; 217 background-color: $color-divider-second;
198 border-width: 0px; 218 border-width: 0px;
@@ -208,4 +228,4 @@ input[type="checkbox"].nj-skinned:disabled {
208 border-right: 1px solid $color-divider-third; 228 border-right: 1px solid $color-divider-third;
209 width: 1px; 229 width: 1px;
210} 230}
211/* End: Basic skinning for visual dividers */ 231// End: Basic skinning for visual dividers