comparison default/assets/scss/vendors/bootstrap/_reboot.scss @ 0:1d038bc9b3d2 default tip

Up:default
author Liny <dev@neowd.com>
date Sat, 31 May 2025 09:21:51 +0800
parents
children
comparison
equal deleted inserted replaced
-1:000000000000 0:1d038bc9b3d2
1 // scss-lint:disable QualifyingElement, DuplicateProperty, VendorPrefix
2
3 // Reboot
4 //
5 // Normalization of HTML elements, manually forked from Normalize.css to remove
6 // styles targeting irrelevant browsers while applying new styles.
7 //
8 // Normalize is licensed MIT. https://github.com/necolas/normalize.css
9
10
11 // Document
12 //
13 // 1. Change from `box-sizing: content-box` so that `width` is not affected by `padding` or `border`.
14 // 2. Change the default font family in all browsers.
15 // 3. Correct the line height in all browsers.
16 // 4. Prevent adjustments of font size after orientation changes in IE on Windows Phone and in iOS.
17 // 5. Setting @viewport causes scrollbars to overlap content in IE11 and Edge, so
18 // we force a non-overlapping, non-auto-hiding scrollbar to counteract.
19 // 6. Change the default tap highlight to be completely transparent in iOS.
20
21 html {
22 box-sizing: border-box; // 1
23 font-family: sans-serif; // 2
24 line-height: 1.15; // 3
25 -webkit-text-size-adjust: 100%; // 4
26 -ms-text-size-adjust: 100%; // 4
27 -ms-overflow-style: scrollbar; // 5
28 -webkit-tap-highlight-color: rgba(0,0,0,0); // 6
29 }
30
31 *,
32 *::before,
33 *::after {
34 box-sizing: inherit; // 1
35 }
36
37 // IE10+ doesn't honor `<meta name="viewport">` in some cases.
38 @at-root {
39 @-ms-viewport { width: device-width; }
40 }
41
42 // Shim for "new" HTML5 structural elements to display correctly (IE10, older browsers)
43 article, aside, dialog, figcaption, figure, footer, header, hgroup, main, nav, section {
44 display: block;
45 }
46
47 // Body
48 //
49 // 1. Remove the margin in all browsers.
50 // 2. As a best practice, apply a default `background-color`.
51
52 body {
53 margin: 0; // 1
54 font-family: $font-family-base;
55 font-size: $font-size-base;
56 font-weight: $font-weight-base;
57 line-height: $line-height-base;
58 color: $body-color;
59 background-color: $body-bg; // 2
60 }
61
62 // Suppress the focus outline on elements that cannot be accessed via keyboard.
63 // This prevents an unwanted focus outline from appearing around elements that
64 // might still respond to pointer events.
65 //
66 // Credit: https://github.com/suitcss/base
67 [tabindex="-1"]:focus {
68 outline: none !important;
69 }
70
71
72 // Content grouping
73 //
74 // 1. Add the correct box sizing in Firefox.
75 // 2. Show the overflow in Edge and IE.
76
77 hr {
78 box-sizing: content-box; // 1
79 height: 0; // 1
80 overflow: visible; // 2
81 }
82
83
84 //
85 // Typography
86 //
87
88 // Remove top margins from headings
89 //
90 // By default, `<h1>`-`<h6>` all receive top and bottom margins. We nuke the top
91 // margin for easier control within type scales as it avoids margin collapsing.
92 h1, h2, h3, h4, h5, h6 {
93 margin-top: 0;
94 margin-bottom: .5rem;
95 }
96
97 // Reset margins on paragraphs
98 //
99 // Similarly, the top margin on `<p>`s get reset. However, we also reset the
100 // bottom margin to use `rem` units instead of `em`.
101 p {
102 margin-top: 0;
103 margin-bottom: 1rem;
104 }
105
106 // Abbreviations
107 //
108 // 1. Remove the bottom border in Firefox 39-.
109 // 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
110 // 3. Add explicit cursor to indicate changed behavior.
111 // 4. Duplicate behavior to the data-* attribute for our tooltip plugin
112
113 abbr[title],
114 abbr[data-original-title] { // 4
115 text-decoration: underline; // 2
116 text-decoration: underline dotted; // 2
117 cursor: help; // 3
118 border-bottom: 0; // 1
119 }
120
121 address {
122 margin-bottom: 1rem;
123 font-style: normal;
124 line-height: inherit;
125 }
126
127 ol,
128 ul,
129 dl {
130 margin-top: 0;
131 margin-bottom: 1rem;
132 }
133
134 ol ol,
135 ul ul,
136 ol ul,
137 ul ol {
138 margin-bottom: 0;
139 }
140
141 dt {
142 font-weight: $dt-font-weight;
143 }
144
145 dd {
146 margin-bottom: .5rem;
147 margin-left: 0; // Undo browser default
148 }
149
150 blockquote {
151 margin: 0 0 1rem;
152 }
153
154 dfn {
155 font-style: italic; // Add the correct font style in Android 4.3-
156 }
157
158 b,
159 strong {
160 font-weight: bolder; // Add the correct font weight in Chrome, Edge, and Safari
161 }
162
163 small {
164 font-size: 80%; // Add the correct font size in all browsers
165 }
166
167 //
168 // Prevent `sub` and `sup` elements from affecting the line height in
169 // all browsers.
170 //
171
172 sub,
173 sup {
174 position: relative;
175 font-size: 75%;
176 line-height: 0;
177 vertical-align: baseline;
178 }
179
180 sub { bottom: -.25em; }
181 sup { top: -.5em; }
182
183
184 //
185 // Links
186 //
187
188 a {
189 color: $link-color;
190 text-decoration: $link-decoration;
191 background-color: transparent; // Remove the gray background on active links in IE 10.
192 -webkit-text-decoration-skip: objects; // Remove gaps in links underline in iOS 8+ and Safari 8+.
193
194 @include hover {
195 color: $link-hover-color;
196 text-decoration: $link-hover-decoration;
197 }
198 }
199
200 // And undo these styles for placeholder links/named anchors (without href)
201 // which have not been made explicitly keyboard-focusable (without tabindex).
202 // It would be more straightforward to just use a[href] in previous block, but that
203 // causes specificity issues in many other styles that are too complex to fix.
204 // See https://github.com/twbs/bootstrap/issues/19402
205
206 a:not([href]):not([tabindex]) {
207 color: inherit;
208 text-decoration: none;
209
210 @include hover-focus {
211 color: inherit;
212 text-decoration: none;
213 }
214
215 &:focus {
216 outline: 0;
217 }
218 }
219
220
221 //
222 // Code
223 //
224
225 pre,
226 code,
227 kbd,
228 samp {
229 font-family: monospace, monospace; // Correct the inheritance and scaling of font size in all browsers.
230 font-size: 1em; // Correct the odd `em` font sizing in all browsers.
231 }
232
233 pre {
234 // Remove browser default top margin
235 margin-top: 0;
236 // Reset browser default of `1em` to use `rem`s
237 margin-bottom: 1rem;
238 // Don't allow content to break outside
239 overflow: auto;
240 }
241
242
243 //
244 // Figures
245 //
246
247 figure {
248 // Apply a consistent margin strategy (matches our type styles).
249 margin: 0 0 1rem;
250 }
251
252
253 //
254 // Images and content
255 //
256
257 img {
258 vertical-align: middle;
259 border-style: none; // Remove the border on images inside links in IE 10-.
260 }
261
262 svg:not(:root) {
263 overflow: hidden; // Hide the overflow in IE
264 }
265
266
267 // Avoid 300ms click delay on touch devices that support the `touch-action` CSS property.
268 //
269 // In particular, unlike most other browsers, IE11+Edge on Windows 10 on touch devices and IE Mobile 10-11
270 // DON'T remove the click delay when `<meta name="viewport" content="width=device-width">` is present.
271 // However, they DO support removing the click delay via `touch-action: manipulation`.
272 // See:
273 // * https://v4-alpha.getbootstrap.com/content/reboot/#click-delay-optimization-for-touch
274 // * http://caniuse.com/#feat=css-touch-action
275 // * https://patrickhlauke.github.io/touch/tests/results/#suppressing-300ms-delay
276
277 a,
278 area,
279 button,
280 [role="button"],
281 input,
282 label,
283 select,
284 summary,
285 textarea {
286 touch-action: manipulation;
287 }
288
289
290 //
291 // Tables
292 //
293
294 table {
295 border-collapse: collapse; // Prevent double borders
296 }
297
298 caption {
299 padding-top: $table-cell-padding;
300 padding-bottom: $table-cell-padding;
301 color: $text-muted;
302 text-align: left;
303 caption-side: bottom;
304 }
305
306 th {
307 // Matches default `<td>` alignment
308 text-align: left;
309 }
310
311
312 //
313 // Forms
314 //
315
316 label {
317 // Allow labels to use `margin` for spacing.
318 display: inline-block;
319 margin-bottom: .5rem;
320 }
321
322 // Work around a Firefox/IE bug where the transparent `button` background
323 // results in a loss of the default `button` focus styles.
324 //
325 // Credit: https://github.com/suitcss/base/
326 button:focus {
327 outline: 1px dotted;
328 outline: 5px auto -webkit-focus-ring-color;
329 }
330
331 input,
332 button,
333 select,
334 optgroup,
335 textarea {
336 margin: 0; // Remove the margin in Firefox and Safari
337 font-family: inherit;
338 font-size: inherit;
339 line-height: inherit;
340 }
341
342 button,
343 input {
344 overflow: visible; // Show the overflow in Edge
345 }
346
347 button,
348 select {
349 text-transform: none; // Remove the inheritance of text transform in Firefox
350 }
351
352 // 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
353 // controls in Android 4.
354 // 2. Correct the inability to style clickable types in iOS and Safari.
355 button,
356 html [type="button"], // 1
357 [type="reset"],
358 [type="submit"] {
359 -webkit-appearance: button; // 2
360 }
361
362 // Remove inner border and padding from Firefox, but don't restore the outline like Normalize.
363 button::-moz-focus-inner,
364 [type="button"]::-moz-focus-inner,
365 [type="reset"]::-moz-focus-inner,
366 [type="submit"]::-moz-focus-inner {
367 padding: 0;
368 border-style: none;
369 }
370
371 input[type="radio"],
372 input[type="checkbox"] {
373 box-sizing: border-box; // 1. Add the correct box sizing in IE 10-
374 padding: 0; // 2. Remove the padding in IE 10-
375 }
376
377
378 input[type="date"],
379 input[type="time"],
380 input[type="datetime-local"],
381 input[type="month"] {
382 // Remove the default appearance of temporal inputs to avoid a Mobile Safari
383 // bug where setting a custom line-height prevents text from being vertically
384 // centered within the input.
385 // See https://bugs.webkit.org/show_bug.cgi?id=139848
386 // and https://github.com/twbs/bootstrap/issues/11266
387 -webkit-appearance: listbox;
388 }
389
390 textarea {
391 overflow: auto; // Remove the default vertical scrollbar in IE.
392 // Textareas should really only resize vertically so they don't break their (horizontal) containers.
393 resize: vertical;
394 }
395
396 fieldset {
397 // Browsers set a default `min-width: min-content;` on fieldsets,
398 // unlike e.g. `<div>`s, which have `min-width: 0;` by default.
399 // So we reset that to ensure fieldsets behave more like a standard block element.
400 // See https://github.com/twbs/bootstrap/issues/12359
401 // and https://html.spec.whatwg.org/multipage/#the-fieldset-and-legend-elements
402 min-width: 0;
403 // Reset the default outline behavior of fieldsets so they don't affect page layout.
404 padding: 0;
405 margin: 0;
406 border: 0;
407 }
408
409 // 1. Correct the text wrapping in Edge and IE.
410 // 2. Correct the color inheritance from `fieldset` elements in IE.
411 legend {
412 display: block;
413 width: 100%;
414 max-width: 100%; // 1
415 padding: 0;
416 margin-bottom: .5rem;
417 font-size: 1.5rem;
418 line-height: inherit;
419 color: inherit; // 2
420 white-space: normal; // 1
421 }
422
423 progress {
424 vertical-align: baseline; // Add the correct vertical alignment in Chrome, Firefox, and Opera.
425 }
426
427 // Correct the cursor style of increment and decrement buttons in Chrome.
428 [type="number"]::-webkit-inner-spin-button,
429 [type="number"]::-webkit-outer-spin-button {
430 height: auto;
431 }
432
433 [type="search"] {
434 // This overrides the extra rounded corners on search inputs in iOS so that our
435 // `.form-control` class can properly style them. Note that this cannot simply
436 // be added to `.form-control` as it's not specific enough. For details, see
437 // https://github.com/twbs/bootstrap/issues/11586.
438 outline-offset: -2px; // 2. Correct the outline style in Safari.
439 -webkit-appearance: none;
440 }
441
442 //
443 // Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
444 //
445
446 [type="search"]::-webkit-search-cancel-button,
447 [type="search"]::-webkit-search-decoration {
448 -webkit-appearance: none;
449 }
450
451 //
452 // 1. Correct the inability to style clickable types in iOS and Safari.
453 // 2. Change font properties to `inherit` in Safari.
454 //
455
456 ::-webkit-file-upload-button {
457 font: inherit; // 2
458 -webkit-appearance: button; // 1
459 }
460
461 //
462 // Correct element displays
463 //
464
465 output {
466 display: inline-block;
467 }
468
469 summary {
470 display: list-item; // Add the correct display in all browsers
471 }
472
473 template {
474 display: none; // Add the correct display in IE
475 }
476
477 // Always hide an element with the `hidden` HTML attribute (from PureCSS).
478 // Needed for proper display in IE 10-.
479 [hidden] {
480 display: none !important;
481 }