diff options
Diffstat (limited to 'scss/imports/scss/_Base.scss')
-rwxr-xr-x | scss/imports/scss/_Base.scss | 231 |
1 files changed, 231 insertions, 0 deletions
diff --git a/scss/imports/scss/_Base.scss b/scss/imports/scss/_Base.scss new file mode 100755 index 00000000..8a743174 --- /dev/null +++ b/scss/imports/scss/_Base.scss | |||
@@ -0,0 +1,231 @@ | |||
1 | // <copyright> | ||
2 | // This file contains proprietary software owned by Motorola Mobility, Inc.<br/> | ||
3 | // No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/> | ||
4 | // (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. | ||
5 | // </copyright> | ||
6 | |||
7 | |||
8 | //Base.scss | ||
9 | //Base styles for entire application. | ||
10 | //Note that colors and font definitions go in | ||
11 | //_scss/themes/themename/_colors.scss and _scss/themes/themename/_fonts.scss | ||
12 | |||
13 | |||
14 | .clear { | ||
15 | display: block; | ||
16 | clear: both; | ||
17 | height: 0px; | ||
18 | overflow: hidden; | ||
19 | } | ||
20 | .bold { | ||
21 | font-weight: bold; | ||
22 | } | ||
23 | :focus { | ||
24 | outline: none; | ||
25 | border: none; | ||
26 | -webkit-box-shadow: 0px 0px 1px 1px $color-focus-outline; | ||
27 | |||
28 | } | ||
29 | .layout-table { | ||
30 | display: table; | ||
31 | } | ||
32 | .layout-row { | ||
33 | display: table-row; | ||
34 | } | ||
35 | .layout-cell { | ||
36 | display: table-cell; | ||
37 | } | ||
38 | .layout-table .flexor div:first-child { | ||
39 | float: left; | ||
40 | } | ||
41 | .layout-table .flexor div:last-child { | ||
42 | float: right; | ||
43 | } | ||
44 | |||
45 | // Begin: Basic skinning for form fields | ||
46 | // Reset all | ||
47 | input.nj-skinned, | ||
48 | textarea.nj-skinned, | ||
49 | button.nj-skinned, | ||
50 | select.nj-skinned, | ||
51 | select.nj-skinned option { | ||
52 | -webkit-appearance: none; | ||
53 | outline: none; | ||
54 | } | ||
55 | |||
56 | // Base styles | ||
57 | input[type="text"].nj-skinned, | ||
58 | input[type="password"].nj-skinned, | ||
59 | input[type="search"].nj-skinned, | ||
60 | textarea.nj-skinned, | ||
61 | select.nj-skinned, | ||
62 | select.nj-skinned option { | ||
63 | border: 1px solid $color-input-border; | ||
64 | color: $color-input; | ||
65 | background-color: $color-input-bg; | ||
66 | font-size: 12px; | ||
67 | font-family: 'Droid Sans', sans-serif; | ||
68 | } | ||
69 | |||
70 | // Disabled styles | ||
71 | input.nj-skinned:disabled, | ||
72 | textarea.nj-skinned:disabled, | ||
73 | select.nj-skinned:disabled, | ||
74 | button.nj-skinned:disabled { | ||
75 | opacity: 0.4; | ||
76 | } | ||
77 | |||
78 | // Text inputs and select boxes | ||
79 | input[type="text"].nj-skinned, | ||
80 | input[type="password"].nj-skinned, | ||
81 | input[type="search"].nj-skinned, | ||
82 | select.nj-skinned, | ||
83 | select.nj-skinned option { | ||
84 | height: 13px; | ||
85 | } | ||
86 | // | ||
87 | input[type="text"].nj-skinned:focus, | ||
88 | input[type="password"].nj-skinned:focus, | ||
89 | input[type="search"].nj-skinned:focus, | ||
90 | textarea.nj-skinned:focus, | ||
91 | select.nj-skinned:focus, | ||
92 | select.nj-skinned option:focus { | ||
93 | -webkit-box-shadow: 0px 0px 3px $color-focus-outline; | ||
94 | } | ||
95 | |||
96 | |||
97 | select.nj-skinned { | ||
98 | background-image: url("../images/dropdown-bg.png"); | ||
99 | background-repeat: no-repeat; | ||
100 | background-position: right center; | ||
101 | font-size: 12px; | ||
102 | height: 16px; | ||
103 | padding-right: 20px; | ||
104 | } | ||
105 | |||
106 | input[type="search"].nj-skinned { | ||
107 | height: 17px ; | ||
108 | -webkit-box-shadow: none; | ||
109 | } | ||
110 | input[type="search"].nj-skinned::-webkit-search-cancel-button { | ||
111 | -webkit-appearance: none; | ||
112 | font-size: 10px; | ||
113 | height: 10px; | ||
114 | width: 10px; | ||
115 | } | ||
116 | input[type="search"].nj-skinned::-webkit-search-cancel-button:after { | ||
117 | content:"\2716"; | ||
118 | } | ||
119 | |||
120 | // Buttons | ||
121 | button.nj-skinned { | ||
122 | font-size: 9px; | ||
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 | } | ||
137 | button.nj-skinned:active { | ||
138 | background-image: -webkit-linear-gradient(top, $color-formgrad-bottom 0%, $color-formgrad-top 100%); | ||
139 | } | ||
140 | button.nj-skinned:hover { | ||
141 | -webkit-box-shadow: 0px 0px 3px $color-focus-outline; | ||
142 | } | ||
143 | |||
144 | // Radio buttons | ||
145 | input[type="radio"].nj-skinned { | ||
146 | background-color: $color-menu-bg; | ||
147 | background-image: -webkit-linear-gradient(top, $color-radio-gradient-top 0%, $color-radio-gradient-bottom 100%); | ||
148 | color: $color-radio; | ||
149 | border: 2px solid $color-radio-border; | ||
150 | width: 12px; | ||
151 | height: 12px; | ||
152 | overflow: hidden; | ||
153 | border-radius: 10px; | ||
154 | font-size: 16px; | ||
155 | line-height: 7px; | ||
156 | text-indent: -7px; | ||
157 | cursor: pointer; | ||
158 | -webkit-box-shadow: 0px 0px 2px $color-radio-shadow; | ||
159 | -moz-box-shadow: 0px 0px 2px $color-radio-shadow; | ||
160 | box-shadow: 0px 0px 2px $color-radio-shadow; | ||
161 | } | ||
162 | input[type="radio"].nj-skinned:checked { | ||
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%); | ||
170 | border: 2px solid $color-radio-border; | ||
171 | } | ||
172 | input[type="radio"].nj-skinned:hover { | ||
173 | border: 2px solid $color-radio-border; | ||
174 | } | ||
175 | input[type="radio"].nj-skinned:active { | ||
176 | background-image: -webkit-linear-gradient(top, $color-radio-gradient-bottom 0%, $color-radio-gradient-top 100%); | ||
177 | } | ||
178 | input[type="radio"].nj-skinned:disabled { | ||
179 | background-image: -webkit-linear-gradient(top, $color-radio-gradient-top 0%, $color-radio-gradient-bottom 100%); | ||
180 | border: 2px solid $color-radio-border; | ||
181 | cursor: default; | ||
182 | } | ||
183 | // Checkboxes | ||
184 | input[type="checkbox"].nj-skinned { | ||
185 | background-color: $color-menu-bg; | ||
186 | background-image: -webkit-linear-gradient(top, $color-radio-gradient-top 0%, $color-radio-gradient-bottom 100%); | ||
187 | color: $color-radio; | ||
188 | border: 1px solid $color-radio-border; | ||
189 | width: 10px; | ||
190 | height: 10px; | ||
191 | font-size: 12px; | ||
192 | overflow: visible; | ||
193 | cursor: pointer; | ||
194 | -webkit-box-shadow: 0px 0px 2px $color-radio-shadow; | ||
195 | -moz-box-shadow: 0px 0px 2px $color-radio-shadow; | ||
196 | box-shadow: 0px 0px 2px $color-radio-shadow; | ||
197 | line-height: 9px; | ||
198 | } | ||
199 | |||
200 | input[type="checkbox"].nj-skinned:checked { | ||
201 | |||
202 | } | ||
203 | input[type="checkbox"].nj-skinned:checked:after { | ||
204 | content:"\2714"; | ||
205 | } | ||
206 | input[type="checkbox"].nj-skinned:active { | ||
207 | background-image: -webkit-linear-gradient(top, $color-radio-gradient-bottom 0%, $color-radio-gradient-top 100%); | ||
208 | } | ||
209 | input[type="checkbox"].nj-skinned:disabled { | ||
210 | background-image: -webkit-linear-gradient(top, $color-radio-gradient-top 0%, $color-radio-gradient-bottom 100%); | ||
211 | cursor: default; | ||
212 | } | ||
213 | // End: Basic skinning for form fields | ||
214 | |||
215 | // Begin: Basic skinning for visual dividers | ||
216 | .nj-divider { | ||
217 | background-color: $color-divider-second; | ||
218 | border-width: 0px; | ||
219 | overflow: hidden; | ||
220 | } | ||
221 | .nj-divider.divider-horizontal { | ||
222 | border-top: 1px solid $color-divider-first; | ||
223 | border-bottom: 1px solid $color-divider-third; | ||
224 | height: 1px; | ||
225 | } | ||
226 | .nj-divider.divider-vertical { | ||
227 | border-left: 1px solid $color-divider-first; | ||
228 | border-right: 1px solid $color-divider-third; | ||
229 | width: 1px; | ||
230 | } | ||
231 | // End: Basic skinning for visual dividers | ||