rev |
line source |
bsw/jbe@1309
|
1 /**
|
bsw/jbe@1309
|
2 * Copyright 2015 Google Inc. All Rights Reserved.
|
bsw/jbe@1309
|
3 *
|
bsw/jbe@1309
|
4 * Licensed under the Apache License, Version 2.0 (the "License");
|
bsw/jbe@1309
|
5 * you may not use this file except in compliance with the License.
|
bsw/jbe@1309
|
6 * You may obtain a copy of the License at
|
bsw/jbe@1309
|
7 *
|
bsw/jbe@1309
|
8 * http://www.apache.org/licenses/LICENSE-2.0
|
bsw/jbe@1309
|
9 *
|
bsw/jbe@1309
|
10 * Unless required by applicable law or agreed to in writing, software
|
bsw/jbe@1309
|
11 * distributed under the License is distributed on an "AS IS" BASIS,
|
bsw/jbe@1309
|
12 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
bsw/jbe@1309
|
13 * See the License for the specific language governing permissions and
|
bsw/jbe@1309
|
14 * limitations under the License.
|
bsw/jbe@1309
|
15 */
|
bsw/jbe@1309
|
16
|
bsw/jbe@1309
|
17 @import "../variables";
|
bsw/jbe@1309
|
18 @import "../mixins";
|
bsw/jbe@1309
|
19
|
bsw/jbe@1309
|
20 @if $target-elements-directly == true {
|
bsw/jbe@1309
|
21 html, body {
|
bsw/jbe@1309
|
22 font-family: $performance_font;
|
bsw/jbe@1309
|
23 font-size: 14px;
|
bsw/jbe@1309
|
24 font-weight: 400;
|
bsw/jbe@1309
|
25 line-height: 20px;
|
bsw/jbe@1309
|
26 }
|
bsw/jbe@1309
|
27
|
bsw/jbe@1309
|
28 h1, h2, h3, h4, h5, h6, p {
|
bsw/jbe@1309
|
29 margin: 0;
|
bsw/jbe@1309
|
30 padding: 0;
|
bsw/jbe@1309
|
31 }
|
bsw/jbe@1309
|
32
|
bsw/jbe@1309
|
33 /**
|
bsw/jbe@1309
|
34 * Styles for HTML elements
|
bsw/jbe@1309
|
35 */
|
bsw/jbe@1309
|
36
|
bsw/jbe@1309
|
37 h1 small, h2 small, h3 small, h4 small, h5 small, h6 small {
|
bsw/jbe@1309
|
38 @include typo-display-3($colorContrast: true);
|
bsw/jbe@1309
|
39
|
bsw/jbe@1309
|
40 font-size: 0.6em;
|
bsw/jbe@1309
|
41 }
|
bsw/jbe@1309
|
42
|
bsw/jbe@1309
|
43 h1 {
|
bsw/jbe@1309
|
44 @include typo-display-3;
|
bsw/jbe@1309
|
45
|
bsw/jbe@1309
|
46 margin-top: 24px;
|
bsw/jbe@1309
|
47 margin-bottom: 24px;
|
bsw/jbe@1309
|
48 }
|
bsw/jbe@1309
|
49
|
bsw/jbe@1309
|
50 h2 {
|
bsw/jbe@1309
|
51 @include typo-display-2;
|
bsw/jbe@1309
|
52
|
bsw/jbe@1309
|
53 margin-top: 24px;
|
bsw/jbe@1309
|
54 margin-bottom: 24px;
|
bsw/jbe@1309
|
55 }
|
bsw/jbe@1309
|
56
|
bsw/jbe@1309
|
57 h3 {
|
bsw/jbe@1309
|
58 @include typo-display-1;
|
bsw/jbe@1309
|
59
|
bsw/jbe@1309
|
60 margin-top: 24px;
|
bsw/jbe@1309
|
61 margin-bottom: 24px;
|
bsw/jbe@1309
|
62 }
|
bsw/jbe@1309
|
63
|
bsw/jbe@1309
|
64 h4 {
|
bsw/jbe@1309
|
65 @include typo-headline;
|
bsw/jbe@1309
|
66
|
bsw/jbe@1309
|
67 margin-top: 24px;
|
bsw/jbe@1309
|
68 margin-bottom: 16px;
|
bsw/jbe@1309
|
69 }
|
bsw/jbe@1309
|
70
|
bsw/jbe@1309
|
71 h5 {
|
bsw/jbe@1309
|
72 @include typo-title;
|
bsw/jbe@1309
|
73
|
bsw/jbe@1309
|
74 margin-top: 24px;
|
bsw/jbe@1309
|
75 margin-bottom: 16px;
|
bsw/jbe@1309
|
76 }
|
bsw/jbe@1309
|
77
|
bsw/jbe@1309
|
78 h6 {
|
bsw/jbe@1309
|
79 @include typo-subhead;
|
bsw/jbe@1309
|
80
|
bsw/jbe@1309
|
81 margin-top: 24px;
|
bsw/jbe@1309
|
82 margin-bottom: 16px;
|
bsw/jbe@1309
|
83 }
|
bsw/jbe@1309
|
84
|
bsw/jbe@1309
|
85 p {
|
bsw/jbe@1309
|
86 @include typo-body-1;
|
bsw/jbe@1309
|
87
|
bsw/jbe@1309
|
88 margin-bottom: 16px;
|
bsw/jbe@1309
|
89 }
|
bsw/jbe@1309
|
90
|
bsw/jbe@1309
|
91 a {
|
bsw/jbe@1309
|
92 color: $text-link-color;
|
bsw/jbe@1309
|
93 font-weight: 500;
|
bsw/jbe@1309
|
94 }
|
bsw/jbe@1309
|
95
|
bsw/jbe@1309
|
96 blockquote {
|
bsw/jbe@1309
|
97 @include typo-blockquote;
|
bsw/jbe@1309
|
98 }
|
bsw/jbe@1309
|
99
|
bsw/jbe@1309
|
100 mark {
|
bsw/jbe@1309
|
101 background-color: #f4ff81;
|
bsw/jbe@1309
|
102 }
|
bsw/jbe@1309
|
103
|
bsw/jbe@1309
|
104 dt {
|
bsw/jbe@1309
|
105 font-weight: 700;
|
bsw/jbe@1309
|
106 }
|
bsw/jbe@1309
|
107
|
bsw/jbe@1309
|
108 address {
|
bsw/jbe@1309
|
109 @include typo-caption;
|
bsw/jbe@1309
|
110
|
bsw/jbe@1309
|
111 font-style: normal;
|
bsw/jbe@1309
|
112 }
|
bsw/jbe@1309
|
113
|
bsw/jbe@1309
|
114 ul, ol {
|
bsw/jbe@1309
|
115 @include typo-body-1;
|
bsw/jbe@1309
|
116 }
|
bsw/jbe@1309
|
117 }
|
bsw/jbe@1309
|
118
|
bsw/jbe@1309
|
119 /**
|
bsw/jbe@1309
|
120 * Class Name Styles
|
bsw/jbe@1309
|
121 */
|
bsw/jbe@1309
|
122
|
bsw/jbe@1309
|
123 .mdl-typography--display-4 {
|
bsw/jbe@1309
|
124 @include typo-display-4;
|
bsw/jbe@1309
|
125 }
|
bsw/jbe@1309
|
126
|
bsw/jbe@1309
|
127 .mdl-typography--display-4-color-contrast {
|
bsw/jbe@1309
|
128 @include typo-display-4($colorContrast: true);
|
bsw/jbe@1309
|
129 }
|
bsw/jbe@1309
|
130
|
bsw/jbe@1309
|
131 .mdl-typography--display-3 {
|
bsw/jbe@1309
|
132 @include typo-display-3;
|
bsw/jbe@1309
|
133 }
|
bsw/jbe@1309
|
134
|
bsw/jbe@1309
|
135 .mdl-typography--display-3-color-contrast {
|
bsw/jbe@1309
|
136 @include typo-display-3($colorContrast: true);
|
bsw/jbe@1309
|
137 }
|
bsw/jbe@1309
|
138
|
bsw/jbe@1309
|
139 .mdl-typography--display-2 {
|
bsw/jbe@1309
|
140 @include typo-display-2;
|
bsw/jbe@1309
|
141 }
|
bsw/jbe@1309
|
142
|
bsw/jbe@1309
|
143 .mdl-typography--display-2-color-contrast {
|
bsw/jbe@1309
|
144 @include typo-display-2($colorContrast: true);
|
bsw/jbe@1309
|
145 }
|
bsw/jbe@1309
|
146
|
bsw/jbe@1309
|
147 .mdl-typography--display-1 {
|
bsw/jbe@1309
|
148 @include typo-display-1;
|
bsw/jbe@1309
|
149 }
|
bsw/jbe@1309
|
150
|
bsw/jbe@1309
|
151 .mdl-typography--display-1-color-contrast {
|
bsw/jbe@1309
|
152 @include typo-display-1($colorContrast: true);
|
bsw/jbe@1309
|
153 }
|
bsw/jbe@1309
|
154
|
bsw/jbe@1309
|
155 .mdl-typography--headline {
|
bsw/jbe@1309
|
156 @include typo-headline;
|
bsw/jbe@1309
|
157 }
|
bsw/jbe@1309
|
158
|
bsw/jbe@1309
|
159 .mdl-typography--headline-color-contrast {
|
bsw/jbe@1309
|
160 @include typo-headline($colorContrast: true);
|
bsw/jbe@1309
|
161 }
|
bsw/jbe@1309
|
162
|
bsw/jbe@1309
|
163 .mdl-typography--title {
|
bsw/jbe@1309
|
164 @include typo-title;
|
bsw/jbe@1309
|
165 }
|
bsw/jbe@1309
|
166
|
bsw/jbe@1309
|
167 .mdl-typography--title-color-contrast {
|
bsw/jbe@1309
|
168 @include typo-title($colorContrast: true);
|
bsw/jbe@1309
|
169 }
|
bsw/jbe@1309
|
170
|
bsw/jbe@1309
|
171 .mdl-typography--subhead {
|
bsw/jbe@1309
|
172 @include typo-subhead;
|
bsw/jbe@1309
|
173 }
|
bsw/jbe@1309
|
174
|
bsw/jbe@1309
|
175 .mdl-typography--subhead-color-contrast {
|
bsw/jbe@1309
|
176 @include typo-subhead($colorContrast: true);
|
bsw/jbe@1309
|
177 }
|
bsw/jbe@1309
|
178
|
bsw/jbe@1309
|
179 .mdl-typography--body-2 {
|
bsw/jbe@1309
|
180 @include typo-body-2;
|
bsw/jbe@1309
|
181 }
|
bsw/jbe@1309
|
182
|
bsw/jbe@1309
|
183 .mdl-typography--body-2-color-contrast {
|
bsw/jbe@1309
|
184 @include typo-body-2($colorContrast: true);
|
bsw/jbe@1309
|
185 }
|
bsw/jbe@1309
|
186
|
bsw/jbe@1309
|
187 .mdl-typography--body-1 {
|
bsw/jbe@1309
|
188 @include typo-body-1;
|
bsw/jbe@1309
|
189 }
|
bsw/jbe@1309
|
190
|
bsw/jbe@1309
|
191 .mdl-typography--body-1-color-contrast {
|
bsw/jbe@1309
|
192 @include typo-body-1($colorContrast: true);
|
bsw/jbe@1309
|
193 }
|
bsw/jbe@1309
|
194
|
bsw/jbe@1309
|
195 .mdl-typography--body-2-force-preferred-font {
|
bsw/jbe@1309
|
196 @include typo-body-2($usePreferred: true);
|
bsw/jbe@1309
|
197 }
|
bsw/jbe@1309
|
198
|
bsw/jbe@1309
|
199 .mdl-typography--body-2-force-preferred-font-color-contrast {
|
bsw/jbe@1309
|
200 @include typo-body-2($colorContrast: true, $usePreferred: true);
|
bsw/jbe@1309
|
201 }
|
bsw/jbe@1309
|
202
|
bsw/jbe@1309
|
203 .mdl-typography--body-1-force-preferred-font {
|
bsw/jbe@1309
|
204 @include typo-body-1($usePreferred: true);
|
bsw/jbe@1309
|
205 }
|
bsw/jbe@1309
|
206
|
bsw/jbe@1309
|
207 .mdl-typography--body-1-force-preferred-font-color-contrast {
|
bsw/jbe@1309
|
208 @include typo-body-1($colorContrast: true, $usePreferred: true);
|
bsw/jbe@1309
|
209 }
|
bsw/jbe@1309
|
210
|
bsw/jbe@1309
|
211 .mdl-typography--caption {
|
bsw/jbe@1309
|
212 @include typo-caption;
|
bsw/jbe@1309
|
213 }
|
bsw/jbe@1309
|
214
|
bsw/jbe@1309
|
215 .mdl-typography--caption-force-preferred-font {
|
bsw/jbe@1309
|
216 @include typo-caption($usePreferred: true);
|
bsw/jbe@1309
|
217 }
|
bsw/jbe@1309
|
218
|
bsw/jbe@1309
|
219 .mdl-typography--caption-color-contrast {
|
bsw/jbe@1309
|
220 @include typo-caption($colorContrast: true);
|
bsw/jbe@1309
|
221 }
|
bsw/jbe@1309
|
222
|
bsw/jbe@1309
|
223 .mdl-typography--caption-force-preferred-font-color-contrast {
|
bsw/jbe@1309
|
224 @include typo-caption($colorContrast: true, $usePreferred: true);
|
bsw/jbe@1309
|
225 }
|
bsw/jbe@1309
|
226
|
bsw/jbe@1309
|
227 .mdl-typography--menu {
|
bsw/jbe@1309
|
228 @include typo-menu;
|
bsw/jbe@1309
|
229 }
|
bsw/jbe@1309
|
230
|
bsw/jbe@1309
|
231 .mdl-typography--menu-color-contrast {
|
bsw/jbe@1309
|
232 @include typo-menu($colorContrast: true);
|
bsw/jbe@1309
|
233 }
|
bsw/jbe@1309
|
234
|
bsw/jbe@1309
|
235 .mdl-typography--button {
|
bsw/jbe@1309
|
236 @include typo-button;
|
bsw/jbe@1309
|
237 }
|
bsw/jbe@1309
|
238
|
bsw/jbe@1309
|
239 .mdl-typography--button-color-contrast {
|
bsw/jbe@1309
|
240 @include typo-button($colorContrast: true);
|
bsw/jbe@1309
|
241 }
|
bsw/jbe@1309
|
242
|
bsw/jbe@1309
|
243 .mdl-typography--text-left {
|
bsw/jbe@1309
|
244 text-align: left;
|
bsw/jbe@1309
|
245 }
|
bsw/jbe@1309
|
246
|
bsw/jbe@1309
|
247 .mdl-typography--text-right {
|
bsw/jbe@1309
|
248 text-align: right;
|
bsw/jbe@1309
|
249 }
|
bsw/jbe@1309
|
250
|
bsw/jbe@1309
|
251 .mdl-typography--text-center {
|
bsw/jbe@1309
|
252 text-align: center;
|
bsw/jbe@1309
|
253 }
|
bsw/jbe@1309
|
254
|
bsw/jbe@1309
|
255 .mdl-typography--text-justify {
|
bsw/jbe@1309
|
256 text-align: justify;
|
bsw/jbe@1309
|
257 }
|
bsw/jbe@1309
|
258
|
bsw/jbe@1309
|
259 .mdl-typography--text-nowrap {
|
bsw/jbe@1309
|
260 white-space: nowrap;
|
bsw/jbe@1309
|
261 }
|
bsw/jbe@1309
|
262
|
bsw/jbe@1309
|
263 .mdl-typography--text-lowercase {
|
bsw/jbe@1309
|
264 text-transform: lowercase;
|
bsw/jbe@1309
|
265 }
|
bsw/jbe@1309
|
266
|
bsw/jbe@1309
|
267 .mdl-typography--text-uppercase {
|
bsw/jbe@1309
|
268 text-transform: uppercase;
|
bsw/jbe@1309
|
269 }
|
bsw/jbe@1309
|
270
|
bsw/jbe@1309
|
271 .mdl-typography--text-capitalize {
|
bsw/jbe@1309
|
272 text-transform: capitalize;
|
bsw/jbe@1309
|
273 }
|
bsw/jbe@1309
|
274
|
bsw/jbe@1309
|
275 .mdl-typography--font-thin {
|
bsw/jbe@1309
|
276 font-weight: 200 !important;
|
bsw/jbe@1309
|
277 }
|
bsw/jbe@1309
|
278
|
bsw/jbe@1309
|
279 .mdl-typography--font-light {
|
bsw/jbe@1309
|
280 font-weight: 300 !important;
|
bsw/jbe@1309
|
281 }
|
bsw/jbe@1309
|
282
|
bsw/jbe@1309
|
283 .mdl-typography--font-regular {
|
bsw/jbe@1309
|
284 font-weight: 400 !important;
|
bsw/jbe@1309
|
285 }
|
bsw/jbe@1309
|
286
|
bsw/jbe@1309
|
287 .mdl-typography--font-medium {
|
bsw/jbe@1309
|
288 font-weight: 500 !important;
|
bsw/jbe@1309
|
289 }
|
bsw/jbe@1309
|
290
|
bsw/jbe@1309
|
291 .mdl-typography--font-bold {
|
bsw/jbe@1309
|
292 font-weight: 700 !important;
|
bsw/jbe@1309
|
293 }
|
bsw/jbe@1309
|
294
|
bsw/jbe@1309
|
295 .mdl-typography--font-black {
|
bsw/jbe@1309
|
296 font-weight: 900 !important;
|
bsw/jbe@1309
|
297 }
|
bsw/jbe@1309
|
298
|
bsw/jbe@1309
|
299 .material-icons {
|
bsw/jbe@1309
|
300 @include typo-icon;
|
bsw/jbe@1309
|
301 }
|