UNPKG

8.5 kBSCSSView Raw
1/* Document
2 ========================================================================== */
3
4/**
5 * Use a better box model (opinionated).
6 */
7
8html {
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
32html {
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
44body {
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
54body {
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
80hr {
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
91abbr {
92 text-decoration: underline dotted;
93}
94
95/**
96 * Add the correct font weight in Chrome, Edge, and Safari.
97 */
98
99b,
100strong {
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
109code,
110kbd,
111samp,
112pre {
113 font-family: $font-family-monospace, SFMono-Regular, Consolas, 'Liberation Mono', Menlo, Courier, monospace; /* 1 */
114 font-size: 1rem; /* 2 */
115}
116
117pre {
118 margin: 0;
119 border: 0;
120}
121
122/**
123 * Add the correct font size in all browsers.
124 */
125
126small {
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
134sub,
135sup {
136 font-size: 75%;
137 line-height: 0;
138 position: relative;
139 vertical-align: baseline;
140}
141
142sub {
143 bottom: -0.25em;
144}
145
146sup {
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
158button,
159input,
160optgroup,
161select,
162textarea {
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
174button,
175select { /* 1 */
176 text-transform: none;
177}
178
179/**
180 * Correct the inability to style clickable types in iOS and Safari.
181 */
182
183button,
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
194button::-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
206button:-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
217fieldset {
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
225legend {
226 padding: 0;
227}
228
229/**
230 * Add the correct vertical alignment in Chrome and Firefox.
231 */
232
233progress {
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
281summary {
282 display: list-item;
283}
284
285address {
286 margin-bottom: 1rem;
287 font-style: normal;
288 line-height: inherit;
289}
290
291ol,
292ul {
293 padding: 0;
294}
295
296ol,
297ul,
298dl {
299 margin-top: 0;
300 margin-bottom: 1rem;
301}
302
303blockquote {
304 margin: 0 0 1rem;
305}
306
307// Links
308
309a {
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
323a: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
335figure {
336 margin: 0 0 1rem;
337}
338
339
340// Images and content
341
342img {
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
349svg {
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
359textarea {
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
372fieldset {
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 !important;
383}
384
385// Add the correct vertical alignment in Chrome, Firefox, and Opera.
386
387progress {
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
434output {
435 display: inline-block;
436}
437
438// 1. Add the correct display in all browsers
439
440summary {
441 display: list-item; // 1
442 cursor: pointer;
443}
444
445// Add the correct display for template & main in IE 11
446
447template {
448 display: none;
449}
450
451main {
452 display: block;
453}