1 | /* Document
|
2 | ========================================================================== */
|
3 |
|
4 | /**
|
5 | * Use a better box model (opinionated).
|
6 | */
|
7 |
|
8 | html {
|
9 | box-sizing: border-box;
|
10 | }
|
11 |
|
12 | *,
|
13 | *::before,
|
14 | *::after {
|
15 | box-sizing: inherit;
|
16 | }
|
17 |
|
18 | /**
|
19 | * Use a more readable tab size (opinionated).
|
20 | */
|
21 |
|
22 | :root {
|
23 | -moz-tab-size: 4;
|
24 | tab-size: 4;
|
25 | }
|
26 |
|
27 | /**
|
28 | * 1. Correct the line height in all browsers.
|
29 | * 2. Prevent adjustments of font size after orientation changes in iOS.
|
30 | */
|
31 |
|
32 | html {
|
33 | line-height: $line-height-base; /* 1 */
|
34 | -webkit-text-size-adjust: 100%; /* 2 */
|
35 | }
|
36 |
|
37 | /* Sections
|
38 | ========================================================================== */
|
39 |
|
40 | /**
|
41 | * Remove the margin in all browsers.
|
42 | */
|
43 |
|
44 | body {
|
45 | margin: 0;
|
46 | height: 100%;
|
47 | overflow-x: hidden;
|
48 | }
|
49 |
|
50 | /**
|
51 | * Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
|
52 | */
|
53 |
|
54 | body {
|
55 | font-family:
|
56 | $font-family-base,
|
57 | -apple-system,
|
58 | BlinkMacSystemFont,
|
59 | 'Segoe UI',
|
60 | Roboto,
|
61 | Helvetica,
|
62 | Arial,
|
63 | sans-serif,
|
64 | 'Apple Color Emoji',
|
65 | 'Segoe UI Emoji',
|
66 | 'Segoe UI Symbol';
|
67 | -moz-osx-font-smoothing: grayscale;
|
68 | -webkit-font-smoothing: antialiased;
|
69 | font-smoothing: antialiased;
|
70 | color: $body-color;
|
71 | }
|
72 |
|
73 | /* Grouping content
|
74 | ========================================================================== */
|
75 |
|
76 | /**
|
77 | * Add the correct height in Firefox.
|
78 | */
|
79 |
|
80 | hr {
|
81 | height: 0;
|
82 | }
|
83 |
|
84 | /* Text-level semantics
|
85 | ========================================================================== */
|
86 |
|
87 | /**
|
88 | * Add the correct text decoration in Chrome, Edge, and Safari.
|
89 | */
|
90 |
|
91 | abbr {
|
92 | text-decoration: underline dotted;
|
93 | }
|
94 |
|
95 | /**
|
96 | * Add the correct font weight in Chrome, Edge, and Safari.
|
97 | */
|
98 |
|
99 | b,
|
100 | strong {
|
101 | font-weight: $font-weight-bold;
|
102 | }
|
103 |
|
104 | /**
|
105 | * 1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
|
106 | * 2. Correct the odd 'em' font sizing in all browsers.
|
107 | */
|
108 |
|
109 | code,
|
110 | kbd,
|
111 | samp,
|
112 | pre {
|
113 | font-family: $font-family-monospace, SFMono-Regular, Consolas, 'Liberation Mono', Menlo, Courier, monospace; /* 1 */
|
114 | font-size: 1rem; /* 2 */
|
115 | }
|
116 |
|
117 | pre {
|
118 | margin: 0;
|
119 | border: 0;
|
120 | }
|
121 |
|
122 | /**
|
123 | * Add the correct font size in all browsers.
|
124 | */
|
125 |
|
126 | small {
|
127 | font-size: $font-size-sm;
|
128 | }
|
129 |
|
130 | /**
|
131 | * Prevent 'sub' and 'sup' elements from affecting the line height in all browsers.
|
132 | */
|
133 |
|
134 | sub,
|
135 | sup {
|
136 | font-size: 75%;
|
137 | line-height: 0;
|
138 | position: relative;
|
139 | vertical-align: baseline;
|
140 | }
|
141 |
|
142 | sub {
|
143 | bottom: -0.25em;
|
144 | }
|
145 |
|
146 | sup {
|
147 | top: -0.5em;
|
148 | }
|
149 |
|
150 | /* Forms
|
151 | ========================================================================== */
|
152 |
|
153 | /**
|
154 | * 1. Change the font styles in all browsers.
|
155 | * 2. Remove the margin in Firefox and Safari.
|
156 | */
|
157 |
|
158 | button,
|
159 | input,
|
160 | optgroup,
|
161 | select,
|
162 | textarea {
|
163 | font-family: inherit; /* 1 */
|
164 | font-size: 100%; /* 1 */
|
165 | line-height: $line-height-base; /* 1 */
|
166 | margin: 0; /* 2 */
|
167 | }
|
168 |
|
169 | /**
|
170 | * Remove the inheritance of text transform in Edge and Firefox.
|
171 | * 1. Remove the inheritance of text transform in Firefox.
|
172 | */
|
173 |
|
174 | button,
|
175 | select { /* 1 */
|
176 | text-transform: none;
|
177 | }
|
178 |
|
179 | /**
|
180 | * Correct the inability to style clickable types in iOS and Safari.
|
181 | */
|
182 |
|
183 | button,
|
184 | [type='button'],
|
185 | [type='reset'],
|
186 | [type='submit'] {
|
187 | -webkit-appearance: button;
|
188 | }
|
189 |
|
190 | /**
|
191 | * Remove the inner border and padding in Firefox.
|
192 | */
|
193 |
|
194 | button::-moz-focus-inner,
|
195 | [type='button']::-moz-focus-inner,
|
196 | [type='reset']::-moz-focus-inner,
|
197 | [type='submit']::-moz-focus-inner {
|
198 | border-style: none;
|
199 | padding: 0;
|
200 | }
|
201 |
|
202 | /**
|
203 | * Restore the focus styles unset by the previous rule.
|
204 | */
|
205 |
|
206 | button:-moz-focusring,
|
207 | [type='button']:-moz-focusring,
|
208 | [type='reset']:-moz-focusring,
|
209 | [type='submit']:-moz-focusring {
|
210 | outline: 1px dotted ButtonText;
|
211 | }
|
212 |
|
213 | /**
|
214 | * Correct the padding in Firefox.
|
215 | */
|
216 |
|
217 | fieldset {
|
218 | padding: 0.35em 0.75em 0.625em;
|
219 | }
|
220 |
|
221 | /**
|
222 | * Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers.
|
223 | */
|
224 |
|
225 | legend {
|
226 | padding: 0;
|
227 | }
|
228 |
|
229 | /**
|
230 | * Add the correct vertical alignment in Chrome and Firefox.
|
231 | */
|
232 |
|
233 | progress {
|
234 | vertical-align: baseline;
|
235 | }
|
236 |
|
237 | /**
|
238 | * Correct the cursor style of increment and decrement buttons in Safari.
|
239 | */
|
240 |
|
241 | [type='number']::-webkit-inner-spin-button,
|
242 | [type='number']::-webkit-outer-spin-button {
|
243 | height: auto;
|
244 | }
|
245 |
|
246 | /**
|
247 | * 1. Correct the odd appearance in Chrome and Safari.
|
248 | * 2. Correct the outline style in Safari.
|
249 | */
|
250 |
|
251 | [type='search'] {
|
252 | -webkit-appearance: textfield; /* 1 */
|
253 | outline-offset: -2px; /* 2 */
|
254 | }
|
255 |
|
256 | /**
|
257 | * Remove the inner padding in Chrome and Safari on macOS.
|
258 | */
|
259 |
|
260 | [type='search']::-webkit-search-decoration {
|
261 | -webkit-appearance: none;
|
262 | }
|
263 |
|
264 | /**
|
265 | * 1. Correct the inability to style clickable types in iOS and Safari.
|
266 | * 2. Change font properties to 'inherit' in Safari.
|
267 | */
|
268 |
|
269 | ::-webkit-file-upload-button {
|
270 | -webkit-appearance: button; /* 1 */
|
271 | font: inherit; /* 2 */
|
272 | }
|
273 |
|
274 | /* Interactive
|
275 | ========================================================================== */
|
276 |
|
277 | /*
|
278 | * Add the correct display in Chrome and Safari.
|
279 | */
|
280 |
|
281 | summary {
|
282 | display: list-item;
|
283 | }
|
284 |
|
285 | address {
|
286 | margin-bottom: 1rem;
|
287 | font-style: normal;
|
288 | line-height: inherit;
|
289 | }
|
290 |
|
291 | ol,
|
292 | ul {
|
293 | padding: 0;
|
294 | }
|
295 |
|
296 | ol,
|
297 | ul,
|
298 | dl {
|
299 | margin-top: 0;
|
300 | margin-bottom: 1rem;
|
301 | }
|
302 |
|
303 | blockquote {
|
304 | margin: 0 0 1rem;
|
305 | }
|
306 |
|
307 | // Links
|
308 |
|
309 | a {
|
310 | color: $link-color;
|
311 | text-decoration: $link-decoration;
|
312 |
|
313 | &:hover {
|
314 | color: $link-hover-color;
|
315 | text-decoration: $link-hover-decoration;
|
316 | }
|
317 | }
|
318 |
|
319 | // And undo these styles for placeholder links/named anchors (without href).
|
320 | // It would be more straightforward to just use a[href] in previous block, but that
|
321 | // causes specificity issues in many other styles that are too complex to fix.
|
322 | // See https://github.com/twbs/bootstrap/issues/19402
|
323 | a:not([href]) {
|
324 | &,
|
325 | &:hover {
|
326 | color: inherit;
|
327 | text-decoration: none;
|
328 | }
|
329 | }
|
330 |
|
331 | // Figures
|
332 |
|
333 | // Apply a consistent margin strategy (matches our type styles).
|
334 |
|
335 | figure {
|
336 | margin: 0 0 1rem;
|
337 | }
|
338 |
|
339 |
|
340 | // Images and content
|
341 |
|
342 | img {
|
343 | vertical-align: middle;
|
344 | }
|
345 |
|
346 | // 1. Workaround for the SVG overflow bug in IE 11 is still required.
|
347 | // See https://github.com/twbs/bootstrap/issues/26878
|
348 |
|
349 | svg {
|
350 | overflow: hidden; // 1
|
351 | vertical-align: middle;
|
352 | }
|
353 |
|
354 |
|
355 | // 1. Remove the default vertical scrollbar in IE.
|
356 | // 2. Textareas should really only resize vertically so they don't break their (horizontal) containers.
|
357 | // 3. Use the same borders as textfields
|
358 |
|
359 | textarea {
|
360 | overflow: auto; // 1
|
361 | resize: vertical; // 2
|
362 | -webkit-appearance: textfield; // 3
|
363 | }
|
364 |
|
365 | // 1. Browsers set a default `min-width: min-content;` on fieldsets,
|
366 | // unlike e.g. `<div>`s, which have `min-width: 0;` by default.
|
367 | // So we reset that to ensure fieldsets behave more like a standard block element.
|
368 | // See https://github.com/twbs/bootstrap/issues/12359
|
369 | // and https://html.spec.whatwg.org/multipage/#the-fieldset-and-legend-elements
|
370 | // 2. Reset the default outline behavior of fieldsets so they don't affect page layout.
|
371 |
|
372 | fieldset {
|
373 | min-width: 0; // 1
|
374 | padding: 0; // 2
|
375 | margin: 0; // 2
|
376 | border: 0; // 2
|
377 | }
|
378 |
|
379 | // Always hide an element with the `hidden` HTML attribute.
|
380 |
|
381 | [hidden] {
|
382 | display: none ;
|
383 | }
|
384 |
|
385 | // Add the correct vertical alignment in Chrome, Firefox, and Opera.
|
386 |
|
387 | progress {
|
388 | vertical-align: baseline;
|
389 | }
|
390 |
|
391 |
|
392 | // Fix height of inputs with a type of datetime-local, date, month, week, or time
|
393 | // See https://github.com/twbs/bootstrap/issues/18842
|
394 |
|
395 | ::-webkit-datetime-edit {
|
396 | overflow: visible;
|
397 | line-height: 0;
|
398 | }
|
399 |
|
400 |
|
401 | // 1. Correct the outline style in Safari.
|
402 | // 2. This overrides the extra rounded corners on search inputs in iOS so that our
|
403 | // `.form-control` class can properly style them. Note that this cannot simply
|
404 | // be added to `.form-control` as it's not specific enough. For details, see
|
405 | // https://github.com/twbs/bootstrap/issues/11586.
|
406 |
|
407 | [type="search"] {
|
408 | outline-offset: -2px; // 1
|
409 | -webkit-appearance: textfield; // 2
|
410 | }
|
411 |
|
412 | // Remove the inner padding in Chrome and Safari on macOS.
|
413 |
|
414 | ::-webkit-search-decoration {
|
415 | -webkit-appearance: none;
|
416 | }
|
417 |
|
418 | // Remove padding around color pickers in webkit browsers
|
419 |
|
420 | ::-webkit-color-swatch-wrapper {
|
421 | padding: 0;
|
422 | }
|
423 |
|
424 | // 1. Change font properties to `inherit` in Safari.
|
425 | // 2. Correct the inability to style clickable types in iOS and Safari.
|
426 |
|
427 | ::-webkit-file-upload-button {
|
428 | font: inherit; // 1
|
429 | -webkit-appearance: button; // 2
|
430 | }
|
431 |
|
432 | // Correct element displays
|
433 |
|
434 | output {
|
435 | display: inline-block;
|
436 | }
|
437 |
|
438 | // 1. Add the correct display in all browsers
|
439 |
|
440 | summary {
|
441 | display: list-item; // 1
|
442 | cursor: pointer;
|
443 | }
|
444 |
|
445 | // Add the correct display for template & main in IE 11
|
446 |
|
447 | template {
|
448 | display: none;
|
449 | }
|
450 |
|
451 | main {
|
452 | display: block;
|
453 | }
|