Mercurial > nebulaweb3
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 } |