Left: | ||
Right: |
LEFT | RIGHT |
---|---|
1 /*! | 1 /*! |
2 * This file is part of universal-design-language | 2 * This file is part of website-defaults |
3 * Copyright (C) 2016 Eyeo GmbH | 3 * Copyright (C) 2016 Eyeo GmbH |
4 * | 4 * |
5 * universal-design-language is free software: you can redistribute it and/or | 5 * website-defaults is free software: you can redistribute it and/or |
6 * modify it under the terms of the GNU General Public License as published by | 6 * modify it under the terms of the GNU General Public License as published by |
7 * the Free Software Foundation, either version 3 of the License, or | 7 * the Free Software Foundation, either version 3 of the License, or |
8 * (at your option) any later version. | 8 * (at your option) any later version. |
9 * | 9 * |
10 * universal-design-language is distributed in the hope that it will be useful, | 10 * website-defaults is distributed in the hope that it will be useful, |
11 * but WITHOUT ANY WARRANTY; without even the implied warranty of | 11 * but WITHOUT ANY WARRANTY; without even the implied warranty of |
12 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the | 12 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the |
13 * GNU General Public License for more details. | 13 * GNU General Public License for more details. |
14 * | 14 * |
15 * You should have received a copy of the GNU General Public License | 15 * You should have received a copy of the GNU General Public License |
16 * along with web.starter-kit. If not, see <http://www.gnu.org/licenses/>. | 16 * along with website-defaults. If not, see <http://www.gnu.org/licenses/>. |
17 */ | 17 */ |
18 | 18 |
19 /*! | 19 /******************************************************************************* |
20 * This file contains parts of: | 20 * Content styles |
21 * - normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css | |
22 */ | |
23 | |
24 /* UDL content styles | |
25 ******************************************************************************* | 21 ******************************************************************************* |
26 * - Global | 22 * 1. Document |
27 * - Headings | 23 * 2. Headings |
28 * - Body content | 24 * 3. Body content |
29 * - Alignment | |
30 * - Media queries | |
31 ******************************************************************************/ | 25 ******************************************************************************/ |
32 | 26 |
33 /* Global | 27 /* Document |
34 ******************************************************************************/ | 28 ******************************************************************************/ |
35 | |
36 html | |
37 { | |
38 font-family: $sans-font; | |
39 font-size: $medium-font; | |
40 line-height: 1.15; | |
41 } | |
42 | |
43 /** | |
44 * Center content within a (responsive) fixed width | |
45 */ | |
46 .container | |
47 { | |
48 max-width: 100%; | |
49 margin: 0px auto; | |
50 padding: 0px $small-space; | |
51 } | |
52 | |
53 .container:after | |
saroyanm
2016/11/15 14:28:56
Why are we clearing the container ? It's not float
juliandoucette
2016/11/16 14:58:51
Acknowledged.
juliandoucette
2016/11/17 16:09:34
Done.
| |
54 { | |
55 display: block; | |
56 clear: both; | |
57 content: ""; | |
58 } | |
59 | |
60 /** | |
61 * Clear all floating elements | |
62 */ | |
63 .clearfix | |
juliandoucette
2016/11/16 14:58:48
NOTE: We will drop this class and re-add if needed
juliandoucette
2016/11/17 16:09:38
Done.
| |
64 { | |
65 display: block; | |
66 clear: both; | |
67 } | |
68 | 29 |
69 p, | 30 p, |
70 ol, | 31 ol, |
71 ul, | 32 ul, |
72 dl, | 33 dl, |
73 pre, | 34 pre, |
74 blockquote | 35 blockquote |
75 { | 36 { |
76 /* Set consistent margins (opinionated) */ | 37 /* Set consistent margins (opinionated) */ |
77 margin: $small-space 0px; | 38 margin: 1em 0em; |
78 } | 39 } |
79 | 40 |
80 /* Headings | 41 /* Headings |
81 ******************************************************************************/ | 42 ******************************************************************************/ |
82 | 43 |
83 h1, | 44 h1, |
84 h2, | 45 h2, |
85 h3, | 46 h3, |
86 h4, | 47 h4, |
87 h5, | 48 h5, |
88 h6 | 49 h6 |
89 { | 50 { |
90 margin: $medium-space 0 $small-space 0; | 51 /* Margin on top **only** (opinionated) */ |
52 margin: 2em 0em 0em 0em; | |
91 } | 53 } |
92 | 54 |
93 h1 | 55 h1 |
94 { | 56 { |
95 font-size: round($large-font * 1.6); | 57 font-size: 2em; |
96 } | 58 } |
97 | 59 |
98 h2 | 60 h2 |
99 { | 61 { |
100 font-size: round($large-font * 1.4); | 62 font-size: 1.5em; |
101 } | 63 } |
102 | 64 |
103 h3 | 65 h3 |
104 { | 66 { |
105 font-size: round($large-font * 1.2); | 67 font-size: 1.25em; |
106 } | 68 } |
107 | 69 |
108 h4 | 70 h4 |
109 { | 71 { |
110 font-size: $large-font; | 72 font-size: 1em; |
111 } | 73 } |
112 | 74 |
113 h5 | 75 h5 |
114 { | 76 { |
115 font-size: $medium-font; | 77 font-size: 0.8em; |
116 } | 78 } |
117 | 79 |
118 h6 | 80 h6 |
119 { | 81 { |
120 font-size: $small-font; | 82 font-size: 0.7em; |
121 } | 83 } |
122 | 84 |
123 /* Body content | 85 /* Body content |
124 ******************************************************************************/ | 86 ******************************************************************************/ |
125 | 87 |
126 abbr | 88 abbr |
127 { | 89 { |
128 text-decoration: underline dotted; | 90 text-decoration: underline; |
129 cursor: help; | 91 cursor: help; |
130 } | 92 } |
131 | 93 |
132 b, | 94 b, |
133 strong | 95 strong |
134 { | 96 { |
135 font-weight: $bold-weight; | 97 font-weight: $bold-weight; |
136 } | 98 } |
137 | 99 |
138 small | 100 small |
139 { | 101 { |
140 font-size: $small-font; | 102 font-size: $small-font; |
141 } | 103 } |
142 | 104 |
143 sup | 105 sup |
144 { | 106 { |
145 position: relative; | 107 position: relative; |
146 top: -0.5em; | |
saroyanm
2016/11/15 14:28:55
Why are we using EMs here ?
I assume this change i
juliandoucette
2016/11/16 14:58:50
Acknowledged.
We will remove this in favor of ver
juliandoucette
2016/11/17 16:09:38
Done.
| |
147 font-size: 75%; | 108 font-size: 75%; |
148 /* Prevent `sub` and `sup` elements from affecting the line height */ | 109 vertical-align: super; |
saroyanm
2016/11/15 14:28:57
Detail: It's only sup in this case, you can overri
juliandoucette
2016/11/16 14:58:50
Acknowledged.
We probably don't need line-height
juliandoucette
2016/11/17 16:09:35
Done.
| |
149 line-height: 0px; | |
150 vertical-align: baseline; | |
saroyanm
2016/11/15 14:28:56
Why are we aligning to the baseline ? Doesn't look
juliandoucette
2016/11/16 14:58:48
Acknowledged.
We will change this to vertical-ali
juliandoucette
2016/11/17 16:09:36
Done.
| |
151 } | 110 } |
152 | 111 |
153 a, | 112 a, |
154 a:visited | 113 a:visited |
155 { | 114 { |
156 /* Set default color and decoration (opinionated) */ | |
157 color: $accent; | 115 color: $accent; |
158 /* Remove the gray background on active links in IE 10. */ | 116 /* Remove the gray background on active links in IE 10. */ |
159 background-color: transparent; | 117 background-color: transparent; |
160 text-decoration: none; | 118 text-decoration: none; |
119 /* Set default pointer regardless of href (opinionated) */ | |
120 cursor: pointer; | |
161 } | 121 } |
162 | 122 |
163 a:hover, | 123 a:hover, |
164 a:active, | 124 a:active, |
165 a:focus | 125 a:focus |
166 { | 126 { |
167 /* Set default color and decoration (opinionated) */ | |
saroyanm
2016/11/15 14:28:55
* I can't see default color being set.
* I'm not s
juliandoucette
2016/11/16 14:58:50
Acknowledged.
I will remove and/or adjust the com
juliandoucette
2016/11/17 16:09:38
Done.
| |
168 text-decoration: underline; | 127 text-decoration: underline; |
169 } | 128 } |
170 | 129 |
171 img | 130 img |
172 { | 131 { |
173 margin: 0px $small-space / 2; | 132 /* Make fixed width images responsive */ |
133 max-width: 100%; | |
174 /* Remove the border on images inside links in IE 10-. */ | 134 /* Remove the border on images inside links in IE 10-. */ |
175 border-style: none; | 135 border-style: none; |
176 } | 136 } |
177 | 137 |
178 hr | 138 hr |
179 { | 139 { |
180 border-top: 0px; | 140 border: 1px solid $secondary-light; |
181 border-bottom: 2px solid $gray; | |
182 } | 141 } |
183 | 142 |
184 [dir="ltr"] blockquote | 143 blockquote |
185 { | 144 { |
186 padding-left: $small-space; | 145 padding-left: 1em; |
187 border-left: 5px solid $gray; | 146 border-left: 5px solid $secondary; |
188 } | 147 } |
189 | 148 |
190 [dir="rtl"] blockquote | 149 [dir="rtl"] blockquote |
191 { | 150 { |
192 padding-right: $small-space; | 151 padding-right: 1em; |
193 border-right: 5px solid $gray; | 152 padding-left: 0em; |
153 border-right: 5px solid $secondary-light; | |
154 border-left: 0px; | |
194 } | 155 } |
195 | 156 |
196 pre | 157 ol, |
158 ul | |
197 { | 159 { |
198 overflow: auto; | 160 padding-left: 1.5em; |
199 padding: 0px $small-space; | |
200 } | |
201 | |
202 code | |
203 { | |
204 padding: 0px $small-space / 4; | |
205 } | |
206 | |
207 pre, | |
208 code | |
209 { | |
210 background-color: $gray-light; | |
211 font-family: $monospace-font; | |
212 font-size: $medium-font; | |
213 } | |
214 | |
215 pre code | |
216 { | |
217 padding: 0px; | |
218 } | |
219 | |
220 [dir="ltr"] ol, | |
221 [dir="ltr"] ul | |
222 { | |
223 padding-left: $small-space * 1.5; | |
224 } | 161 } |
225 | 162 |
226 [dir="rtl"] ol, | 163 [dir="rtl"] ol, |
227 [dir="rtl"] ul | 164 [dir="rtl"] ul |
228 { | 165 { |
229 padding-right: $small-space * 1.5; | 166 padding-right: 2em; |
167 padding-left: 0em; | |
230 } | 168 } |
231 | 169 |
232 li | 170 li |
233 { | 171 { |
234 margin: $small-space / 2 0px; | 172 margin: 0.5em 0em; |
235 } | 173 } |
236 | 174 |
237 ol ol, | 175 ol ol, |
238 ul ul, | 176 ul ul, |
239 ol ul, | 177 ol ul, |
240 ul ol | 178 ul ol |
241 { | 179 { |
242 /* prevent double spacing lists */ | 180 /* prevent double spacing lists */ |
243 margin: 0px; | 181 margin: 0em; |
244 } | 182 } |
245 | 183 |
246 ol ol | 184 ol ol |
247 { | 185 { |
248 list-style-type: lower-alpha; | 186 list-style-type: lower-alpha; |
249 } | 187 } |
250 | 188 |
251 dt | 189 dt |
252 { | 190 { |
253 /* undo browser default (opinionated)*/ | 191 /* undo browser default (opinionated)*/ |
254 font-weight: $bold-weight; | 192 font-weight: $bold-weight; |
255 } | 193 } |
256 | 194 |
257 dd | 195 dd |
258 { | 196 { |
259 margin: $small-space / 2 0px $small-space 0px; | 197 margin: 0.5em 0em 1em 0em; |
260 } | 198 } |
261 | |
262 /** | |
263 * Remove list style from vertical lists | |
264 */ | |
265 .unstyled-list, | |
266 { | |
267 list-style-type: none; | |
268 } | |
269 | |
270 [dir="ltr"] .unstyled-list | |
271 { | |
272 padding-left: 0px; | |
273 } | |
274 | |
275 [dir="rtl"] .unstyled-list | |
276 { | |
277 padding-right: 0px; | |
278 } | |
279 | |
280 [dir="ltr"] .unstyled-list .unstyled-list | |
281 { | |
282 padding-left: $medium-space; | |
283 } | |
284 | |
285 [dir="rtl"] .unstyled-list .unstyled-list | |
286 { | |
287 padding-right: $small-space; | |
288 } | |
289 | |
290 audio, | |
saroyanm
2016/11/15 14:28:57
I think we only need this styles in case we will h
juliandoucette
2016/11/16 14:58:49
Acknowledged.
Agreed.
juliandoucette
2016/11/17 16:09:34
Done.
| |
291 video | |
292 { | |
293 /* undo browser default (opinionated) */ | |
294 display: block; | |
295 } | |
296 | |
297 /** | |
298 * Embed 16x9 iframe video | |
299 */ | |
300 .embed | |
301 { | |
302 display: block; | |
303 position: relative; | |
304 overflow: hidden; | |
305 padding: 0% 0% 56.25% 0%; | |
306 } | |
307 | |
308 .embed iframe | |
309 { | |
310 position: absolute; | |
311 top: 0px; | |
312 left: 0px; | |
313 width: 100%; | |
314 height: 100%; | |
315 /* undo browser default */ | |
316 border: 0px; | |
317 } | |
318 | |
319 /* Alignment | |
320 ******************************************************************************/ | |
321 | |
322 /** | |
323 * Clear and stretch element full-width | |
324 */ | |
325 .full-width | |
326 { | |
327 display: block; | |
328 clear: both; | |
saroyanm
2016/11/15 14:28:56
Why are we clearing the full width elements ?
I t
juliandoucette
2016/11/16 14:58:49
Acknowledged.
We can handle this edge case with i
juliandoucette
2016/11/17 16:09:36
Done.
| |
329 overflow: auto; | |
saroyanm
2016/11/15 14:28:55
Why do we need to set the overflow value here ?
I
juliandoucette
2016/11/16 14:58:49
Acknowledged.
This addresses an edge case where w
juliandoucette
2016/11/17 16:09:35
Done.
| |
330 width: 100%; | |
331 margin: $small-space 0px; | |
332 } | |
333 | |
334 .float-start, | |
335 .float-end | |
336 { | |
337 display: block; | |
338 margin: 0px 0px $small-space 0px; | |
339 } | |
340 | |
341 /** | |
342 * Float to start-of-line | |
343 */ | |
344 [dir="ltr"] .float-start | |
345 { | |
346 float: left; | |
347 margin-right: $small-space; | |
348 } | |
349 | |
350 [dir="rtl"] .float-start | |
351 { | |
352 float: right; | |
353 margin-left: $small-space; | |
354 } | |
355 | |
356 /** | |
357 * Float to end-of-line | |
358 */ | |
359 [dir="ltr"] .float-end | |
360 { | |
361 float: right; | |
362 margin-left: $small-space; | |
363 } | |
364 | |
365 [dir="rtl"] .float-end | |
366 { | |
367 float: left; | |
368 margin-right: $small-space; | |
369 } | |
370 | |
371 /* Media queries | |
372 ******************************************************************************/ | |
373 | |
374 @media(min-width: $mobile-breakpoint) | |
saroyanm
2016/11/15 14:28:56
Seems like we started to support 4 different scree
juliandoucette
2016/11/16 14:58:50
Acknowledged.
We will remove mobile-breakpoint an
juliandoucette
2016/11/17 16:09:35
Done.
| |
375 { | |
376 .container | |
377 { | |
378 width: $mobile-width; | |
379 } | |
380 } | |
381 | |
382 @media(min-width: $tablet-breakpoint) | |
383 { | |
384 .container | |
385 { | |
386 width: $tablet-width; | |
387 } | |
388 } | |
389 | |
390 @media(min-width: $desktop-breakpoint) | |
391 { | |
392 .container | |
393 { | |
394 width: $desktop-width; | |
395 } | |
396 } | |
LEFT | RIGHT |