Rietveld Code Review Tool
Help | Bug tracker | Discussion group | Source code

Side by Side Diff: scss/_content.scss

Issue 29361647: Issue 4607 - Default content styles (Closed)
Patch Set: Removed accidental default in license header Created Nov. 8, 2016, 3:51 p.m.
Left:
Right:
Use n/p to move between diff chunks; N/P to move between comments.
Jump to:
View unified diff | Download patch
« no previous file with comments | « package.json ('k') | scss/_reset.scss » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 /*! 1 /*!
2 * This file is part of universal-design-language 2 * This file is part of universal-design-language
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 * universal-design-language 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 * universal-design-language 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 web.starter-kit. If not, see <http://www.gnu.org/licenses/>.
17 */ 17 */
18 18
19 /* HTML Content 19 /** UDL content styles */
20
21 /*!
22 * This file contains parts of:
23 * - normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css
24 */
25
26 /* Table of contents
20 ******************************************************************************* 27 *******************************************************************************
21 * 1. Headings 28 * - Document
22 * 2. Blockquotes 29 * - Headings
23 * 3. Links 30 * - Block elements
24 * 4. Code Blocks 31 * - Blockquotes
25 * 5. Unstyled Lists 32 * - Code blocks
26 * 6. Image Alignment 33 * - Lists
27 * 7. Tables 34 * - Unstyled lists
28 * 8. Embeds 35 * - Embeds
29 ******************************************************************************/ 36 * - Inline elements
37 * - Links
38 * - Images
39 * - Alignment
40 ******************************************************************************/
41
42 /* Document
43 ******************************************************************************/
44
45 html
46 {
47 font-family: $sans-font;
48 font-size: $medium-font;
49 line-height: 1.15;
50 }
51
52 h1,
53 h2,
54 h3,
55 h4,
56 h5,
57 h6,
58 p,
59 ol,
60 ul,
61 dl,
62 pre,
63 blockquote
64 {
65 /* Set consistent margins (opinionated) */
66 margin: 1em 0em;
67 }
30 68
31 /* Headings 69 /* Headings
32 ******************************************************************************/ 70 ******************************************************************************/
33 71
72 h1,
73 h2,
74 h3,
75 h4,
76 h5,
77 h6
78 {
79 margin-bottom: 0em;
80 }
81
82 h1,
83 h2
84 {
85 font-weight: $thin-weight;
86 }
87
34 h1 88 h1
35 { 89 {
36 font-size: 42px; 90 font-size: 48px;
37 margin-top: $large-space;
38 } 91 }
39 92
40 h2 93 h2
41 { 94 {
42 font-size: 36px; 95 font-size: 36px;
43 margin-top: $large-space;
44 } 96 }
45 97
46 h3 98 h3
47 { 99 {
48 font-size: 24px; 100 font-size: 24px;
49 margin-top: $medium-space;
50 } 101 }
51 102
52 h4 103 h4
53 { 104 {
54 font-size: 20px; 105 font-size: 20px;
55 margin-top: $medium-space;
56 } 106 }
57 107
58 h5 108 h5
59 { 109 {
60 font-size: 16px; 110 font-size: 16px;
61 margin-top: $small-space;
62 } 111 }
63 112
64 h6 113 h6
65 { 114 {
66 font-size: 14px; 115 font-size: 14px;
67 margin-top: $small-space; 116 }
68 } 117
69 118 /* Block elements
70 /* Blockquotes 119 ******************************************************************************/
71 ******************************************************************************/ 120
121 hr
122 {
123 /* Add the correct box sizing in Firefox. */
124 box-sizing: content-box;
125 /* Show the overflow in Edge and IE. */
126 overflow: visible;
127 height: 0px;
128 border: 1px solid $gray;
129 }
130
131 /* Blockquotes */
72 132
73 [dir="ltr"] blockquote 133 [dir="ltr"] blockquote
74 { 134 {
75 padding-left: $small-space; 135 padding-left: $small-space;
76 border-left: 5px solid $gray; 136 border-left: 5px solid $gray;
77 } 137 }
78 138
79 [dir="rtl"] blockquote 139 [dir="rtl"] blockquote
80 { 140 {
81 padding-right: $small-space; 141 padding-right: $small-space;
82 border-right: 5px solid $gray; 142 border-right: 5px solid $gray;
83 } 143 }
84 144
85 /* Links 145 /* Code blocks */
86 ******************************************************************************/ 146
147 pre
148 {
149 overflow: auto;
150 padding: 0em 1em;
151 }
152
153 code
154 {
155 padding: 0em 0.25em;
156 }
157
158 pre,
159 code
160 {
161 background-color: $gray-light;
162 /* Correct odd font inheritance in all browsers. */
163 font-family: $monospace-font;
164 /* Correct the odd font sizing in all browsers. */
165 font-size: $medium-font;
166 }
167
168 pre code
169 {
170 padding: 0em;
171 }
172
173 /* Lists */
174
175 [dir="ltr"] ol,
176 [dir="ltr"] ul
177 {
178 padding-left: 1.5em;
179 }
180
181 [dir="rtl"] ol,
182 [dir="rtl"] ul
183 {
184 padding-right: 1.5em;
185 }
186
187 li
188 {
189 margin: $small-space / 2 0px;
190 }
191
192 ol ol,
193 ul ul,
194 ol ul,
195 ul ol
196 {
197 /* prevent double spacing lists */
198 margin: 0px;
199 }
200
201 ol ol
202 {
203 list-style-type: lower-alpha;
204 }
205
206 dt
207 {
208 /* undo browser default (opinionated)*/
209 font-weight: $bold-weight;
210 }
211
212 dd
213 {
214 margin: 0.5em 0em 1em 0em;
215 }
216
217 /** Unstyled lists */
218
219 .unstyled-list,
220 .unstyled-list ul
221 {
222 list-style-type: none;
223 }
224
225 [dir="ltr"] .unstyled-list
226 {
227 padding-left: 0px;
228 }
229
230 [dir="rtl"] .unstyled-list
231 {
232 padding-right: 0px;
233 }
234
235 [dir="ltr"] .unstyled-list ul
236 {
237 padding-left: $medium-space;
238 }
239
240 [dir="rtl"] .unstyled-list ul
241 {
242 padding-right: $small-space;
243 }
244
245 /* Embeds */
246
247 audio,
248 video
249 {
250 /* undo browser default (opinionated) */
251 display: block;
252 }
253
254 /** Responsive 16x9 YouTube video */
255
256 .youtube-16x9
257 {
258 display: block;
259 position: relative;
260 overflow: hidden;
261 height: 0px;
262 padding: 0% 0% 56.25% 0%;
263 }
264
265 .youtube-16x9 iframe
266 {
267 position: absolute;
268 top: 0px;
269 bottom: 0px;
270 left: 0px;
271 width: 100%;
272 height: 100%;
273 border: 0px;
274 }
275
276 /* Inline elements
277 ******************************************************************************/
278
279 abbr[title]
280 {
281 /* Remove the bottom border in Firefox 39-. */
282 border-bottom: none;
283 /* Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */
284 text-decoration: underline dotted;
285 cursor: help;
286 }
287
288 b,
289 strong
290 {
291 font-weight: $bold-weight;
292 }
293
294 small
295 {
296 font-size: $small-font;
297 }
298
299 sup
300 {
301 position: relative;
302 top: -0.5em;
303 /* Prevent `sub` and `sup` elements from affecting the line height in
304 all browsers. */
305 font-size: 75%;
306 line-height: 0px;
307 vertical-align: baseline;
308 }
309
310 /* Links */
87 311
88 a, 312 a,
89 a:visited 313 a:visited
90 { 314 {
91 color: $blue-dark; 315 /* Set default color and decoration (opinionated) */
316 color: $accent;
317 /* Remove the gray background on active links in IE 10. */
318 background-color: transparent;
92 text-decoration: none; 319 text-decoration: none;
93 } 320 }
94 321
95 a:hover, 322 a:hover,
96 a:active, 323 a:active,
97 a:focus 324 a:focus
98 { 325 {
326 /* Set default color and decoration (opinionated) */
99 text-decoration: underline; 327 text-decoration: underline;
100 } 328 }
101 329
102 /* Code Blocks 330 /* Images */
103 ******************************************************************************/ 331
104 332 img
105 pre, 333 {
106 code 334 margin: 0px $small-space / 2;
107 { 335 /* Remove the border on images inside links in IE 10-. */
108 padding: $small-space / 4; 336 border-style: none;
109 background-color: $gray-light; 337 }
110 } 338
111 339 /* Alignment
112 pre 340 ******************************************************************************/
341
342 .block,
343 .float-start,
344 .float-end
113 { 345 {
114 display: block; 346 display: block;
115 padding: 0 $small-space; 347 margin: 0px 0px $small-space 0px;
116 } 348 }
117 349
118 pre > code 350 /** Display full-width */
119 { 351
120 padding: 0; 352 .block
121 background-color: transparent;
122 }
123
124 /* Unstyled Lists
125 ******************************************************************************/
126
127 .unstyled-list,
128 .unstyled-list ul
129 {
130 list-style-type: none;
131 }
132
133 [dir="ltr"] .unstyled-list
134 {
135 padding-left: 0;
136 }
137
138 [dir="rtl"] .unstyled-list
139 {
140 padding-right: 0;
141 }
142
143 [dir="ltr"] .unstyled-list ul
144 {
145 padding-left: $medium-space;
146 }
147
148 [dir="rtl"] .unstyled-list ul
149 {
150 padding-right: $small-space;
151 }
152
153 /* Image Alignment
154 ******************************************************************************/
155
156 img
157 {
158 margin: 0 $small-space / 2;
159 }
160
161 .block,
162 .sol,
163 .eol
164 { 353 {
165 display: block; 354 display: block;
166 margin: 0;
167 }
168
169 .block
170 {
171 display: block;
172 width: 100%;
173 height: auto;
174 clear: both; 355 clear: both;
175 overflow: auto; 356 overflow: auto;
176 margin: $small-space 0; 357 width: 100%;
177 } 358 margin: $small-space 0px;
178 359 }
179 [dir="ltr"] .sol 360
180 { 361 /** Float to start-of-line */
362
363 [dir="ltr"] .float-start
364 {
365 float: left;
181 margin-right: $small-space; 366 margin-right: $small-space;
367 }
368
369 [dir="rtl"] .float-start
370 {
371 float: right;
372 margin-left: $small-space;
373 }
374
375 /** Float to end-of-line */
376
377 [dir="ltr"] .float-end
378 {
379 float: right;
380 margin-left: $small-space;
381 }
382
383 [dir="rtl"] .float-end
384 {
182 float: left; 385 float: left;
183 }
184
185 [dir="rtl"] .sol
186 {
187 margin-left: $small-space;
188 float: right;
189 }
190
191 [dir="ltr"] .eol
192 {
193 margin-left: $small-space;
194 float: right;
195 }
196
197 [dir="rtl"] .eol
198 {
199 margin-right: $small-space; 386 margin-right: $small-space;
200 float: left; 387 }
201 }
202
203 /* Tables
204 ******************************************************************************/
205
206 table
207 {
208 border-collapse: collapse;
209 width: 100%;
210 }
211
212 td,
213 th
214 {
215 padding: $small-space / 4 $small-space / 2;
216 }
217
218 th
219 {
220 background-color: $white;
221 }
222
223 tr:nth-child(even)
224 {
225 background-color: $white;
226 }
227
228 tr:nth-child(odd)
229 {
230 background-color: $gray-light;
231 }
232
233 /* Embeds
234 ******************************************************************************/
235
236 .embed
237 {
238 position: relative;
239 display: block;
240 height: 0;
241 padding: 0 0 56.25% 0;
242 overflow: hidden;
243 }
244
245 .embed iframe
246 {
247 position: absolute;
248 top: 0;
249 bottom: 0;
250 left: 0;
251 width: 100%;
252 height: 100%;
253 border: 0;
254 }
OLDNEW
« no previous file with comments | « package.json ('k') | scss/_reset.scss » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld