source: Application/ocrent/wwwroot/lib/bootstrap/scss/_reboot.scss

Last change on this file was f5f7c24, checked in by 192011 <mk.snicker@…>, 17 months ago

Initial commit

  • Property mode set to 100644
File size: 12.0 KB
Line 
1// stylelint-disable declaration-no-important, selector-no-qualifying-type, property-no-vendor-prefix
2
3
4// Reboot
5//
6// Normalization of HTML elements, manually forked from Normalize.css to remove
7// styles targeting irrelevant browsers while applying new styles.
8//
9// Normalize is licensed MIT. https://github.com/necolas/normalize.css
10
11
12// Document
13//
14// Change from `box-sizing: content-box` so that `width` is not affected by `padding` or `border`.
15
16*,
17*::before,
18*::after {
19 box-sizing: border-box;
20}
21
22
23// Root
24//
25// Ability to the value of the root font sizes, affecting the value of `rem`.
26// null by default, thus nothing is generated.
27
28:root {
29 @if $font-size-root != null {
30 @include font-size(var(--#{$prefix}root-font-size));
31 }
32
33 @if $enable-smooth-scroll {
34 @media (prefers-reduced-motion: no-preference) {
35 scroll-behavior: smooth;
36 }
37 }
38}
39
40
41// Body
42//
43// 1. Remove the margin in all browsers.
44// 2. As a best practice, apply a default `background-color`.
45// 3. Prevent adjustments of font size after orientation changes in iOS.
46// 4. Change the default tap highlight to be completely transparent in iOS.
47
48// scss-docs-start reboot-body-rules
49body {
50 margin: 0; // 1
51 font-family: var(--#{$prefix}body-font-family);
52 @include font-size(var(--#{$prefix}body-font-size));
53 font-weight: var(--#{$prefix}body-font-weight);
54 line-height: var(--#{$prefix}body-line-height);
55 color: var(--#{$prefix}body-color);
56 text-align: var(--#{$prefix}body-text-align);
57 background-color: var(--#{$prefix}body-bg); // 2
58 -webkit-text-size-adjust: 100%; // 3
59 -webkit-tap-highlight-color: rgba($black, 0); // 4
60}
61// scss-docs-end reboot-body-rules
62
63
64// Content grouping
65//
66// 1. Reset Firefox's gray color
67
68hr {
69 margin: $hr-margin-y 0;
70 color: $hr-color; // 1
71 border: 0;
72 border-top: $hr-border-width solid $hr-border-color;
73 opacity: $hr-opacity;
74}
75
76
77// Typography
78//
79// 1. Remove top margins from headings
80// By default, `<h1>`-`<h6>` all receive top and bottom margins. We nuke the top
81// margin for easier control within type scales as it avoids margin collapsing.
82
83%heading {
84 margin-top: 0; // 1
85 margin-bottom: $headings-margin-bottom;
86 font-family: $headings-font-family;
87 font-style: $headings-font-style;
88 font-weight: $headings-font-weight;
89 line-height: $headings-line-height;
90 color: $headings-color;
91}
92
93h1 {
94 @extend %heading;
95 @include font-size($h1-font-size);
96}
97
98h2 {
99 @extend %heading;
100 @include font-size($h2-font-size);
101}
102
103h3 {
104 @extend %heading;
105 @include font-size($h3-font-size);
106}
107
108h4 {
109 @extend %heading;
110 @include font-size($h4-font-size);
111}
112
113h5 {
114 @extend %heading;
115 @include font-size($h5-font-size);
116}
117
118h6 {
119 @extend %heading;
120 @include font-size($h6-font-size);
121}
122
123
124// Reset margins on paragraphs
125//
126// Similarly, the top margin on `<p>`s get reset. However, we also reset the
127// bottom margin to use `rem` units instead of `em`.
128
129p {
130 margin-top: 0;
131 margin-bottom: $paragraph-margin-bottom;
132}
133
134
135// Abbreviations
136//
137// 1. Add the correct text decoration in Chrome, Edge, Opera, and Safari.
138// 2. Add explicit cursor to indicate changed behavior.
139// 3. Prevent the text-decoration to be skipped.
140
141abbr[title] {
142 text-decoration: underline dotted; // 1
143 cursor: help; // 2
144 text-decoration-skip-ink: none; // 3
145}
146
147
148// Address
149
150address {
151 margin-bottom: 1rem;
152 font-style: normal;
153 line-height: inherit;
154}
155
156
157// Lists
158
159ol,
160ul {
161 padding-left: 2rem;
162}
163
164ol,
165ul,
166dl {
167 margin-top: 0;
168 margin-bottom: 1rem;
169}
170
171ol ol,
172ul ul,
173ol ul,
174ul ol {
175 margin-bottom: 0;
176}
177
178dt {
179 font-weight: $dt-font-weight;
180}
181
182// 1. Undo browser default
183
184dd {
185 margin-bottom: .5rem;
186 margin-left: 0; // 1
187}
188
189
190// Blockquote
191
192blockquote {
193 margin: 0 0 1rem;
194}
195
196
197// Strong
198//
199// Add the correct font weight in Chrome, Edge, and Safari
200
201b,
202strong {
203 font-weight: $font-weight-bolder;
204}
205
206
207// Small
208//
209// Add the correct font size in all browsers
210
211small {
212 @include font-size($small-font-size);
213}
214
215
216// Mark
217
218mark {
219 padding: $mark-padding;
220 background-color: var(--#{$prefix}highlight-bg);
221}
222
223
224// Sub and Sup
225//
226// Prevent `sub` and `sup` elements from affecting the line height in
227// all browsers.
228
229sub,
230sup {
231 position: relative;
232 @include font-size($sub-sup-font-size);
233 line-height: 0;
234 vertical-align: baseline;
235}
236
237sub { bottom: -.25em; }
238sup { top: -.5em; }
239
240
241// Links
242
243a {
244 color: var(--#{$prefix}link-color);
245 text-decoration: $link-decoration;
246
247 &:hover {
248 color: var(--#{$prefix}link-hover-color);
249 text-decoration: $link-hover-decoration;
250 }
251}
252
253// And undo these styles for placeholder links/named anchors (without href).
254// It would be more straightforward to just use a[href] in previous block, but that
255// causes specificity issues in many other styles that are too complex to fix.
256// See https://github.com/twbs/bootstrap/issues/19402
257
258a:not([href]):not([class]) {
259 &,
260 &:hover {
261 color: inherit;
262 text-decoration: none;
263 }
264}
265
266
267// Code
268
269pre,
270code,
271kbd,
272samp {
273 font-family: $font-family-code;
274 @include font-size(1em); // Correct the odd `em` font sizing in all browsers.
275}
276
277// 1. Remove browser default top margin
278// 2. Reset browser default of `1em` to use `rem`s
279// 3. Don't allow content to break outside
280
281pre {
282 display: block;
283 margin-top: 0; // 1
284 margin-bottom: 1rem; // 2
285 overflow: auto; // 3
286 @include font-size($code-font-size);
287 color: $pre-color;
288
289 // Account for some code outputs that place code tags in pre tags
290 code {
291 @include font-size(inherit);
292 color: inherit;
293 word-break: normal;
294 }
295}
296
297code {
298 @include font-size($code-font-size);
299 color: var(--#{$prefix}code-color);
300 word-wrap: break-word;
301
302 // Streamline the style when inside anchors to avoid broken underline and more
303 a > & {
304 color: inherit;
305 }
306}
307
308kbd {
309 padding: $kbd-padding-y $kbd-padding-x;
310 @include font-size($kbd-font-size);
311 color: $kbd-color;
312 background-color: $kbd-bg;
313 @include border-radius($border-radius-sm);
314
315 kbd {
316 padding: 0;
317 @include font-size(1em);
318 font-weight: $nested-kbd-font-weight;
319 }
320}
321
322
323// Figures
324//
325// Apply a consistent margin strategy (matches our type styles).
326
327figure {
328 margin: 0 0 1rem;
329}
330
331
332// Images and content
333
334img,
335svg {
336 vertical-align: middle;
337}
338
339
340// Tables
341//
342// Prevent double borders
343
344table {
345 caption-side: bottom;
346 border-collapse: collapse;
347}
348
349caption {
350 padding-top: $table-cell-padding-y;
351 padding-bottom: $table-cell-padding-y;
352 color: $table-caption-color;
353 text-align: left;
354}
355
356// 1. Removes font-weight bold by inheriting
357// 2. Matches default `<td>` alignment by inheriting `text-align`.
358// 3. Fix alignment for Safari
359
360th {
361 font-weight: $table-th-font-weight; // 1
362 text-align: inherit; // 2
363 text-align: -webkit-match-parent; // 3
364}
365
366thead,
367tbody,
368tfoot,
369tr,
370td,
371th {
372 border-color: inherit;
373 border-style: solid;
374 border-width: 0;
375}
376
377
378// Forms
379//
380// 1. Allow labels to use `margin` for spacing.
381
382label {
383 display: inline-block; // 1
384}
385
386// Remove the default `border-radius` that macOS Chrome adds.
387// See https://github.com/twbs/bootstrap/issues/24093
388
389button {
390 // stylelint-disable-next-line property-disallowed-list
391 border-radius: 0;
392}
393
394// Explicitly remove focus outline in Chromium when it shouldn't be
395// visible (e.g. as result of mouse click or touch tap). It already
396// should be doing this automatically, but seems to currently be
397// confused and applies its very visible two-tone outline anyway.
398
399button:focus:not(:focus-visible) {
400 outline: 0;
401}
402
403// 1. Remove the margin in Firefox and Safari
404
405input,
406button,
407select,
408optgroup,
409textarea {
410 margin: 0; // 1
411 font-family: inherit;
412 @include font-size(inherit);
413 line-height: inherit;
414}
415
416// Remove the inheritance of text transform in Firefox
417button,
418select {
419 text-transform: none;
420}
421// Set the cursor for non-`<button>` buttons
422//
423// Details at https://github.com/twbs/bootstrap/pull/30562
424[role="button"] {
425 cursor: pointer;
426}
427
428select {
429 // Remove the inheritance of word-wrap in Safari.
430 // See https://github.com/twbs/bootstrap/issues/24990
431 word-wrap: normal;
432
433 // Undo the opacity change from Chrome
434 &:disabled {
435 opacity: 1;
436 }
437}
438
439// Remove the dropdown arrow only from text type inputs built with datalists in Chrome.
440// See https://stackoverflow.com/a/54997118
441
442[list]:not([type="date"]):not([type="datetime-local"]):not([type="month"]):not([type="week"]):not([type="time"])::-webkit-calendar-picker-indicator {
443 display: none !important;
444}
445
446// 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
447// controls in Android 4.
448// 2. Correct the inability to style clickable types in iOS and Safari.
449// 3. Opinionated: add "hand" cursor to non-disabled button elements.
450
451button,
452[type="button"], // 1
453[type="reset"],
454[type="submit"] {
455 -webkit-appearance: button; // 2
456
457 @if $enable-button-pointers {
458 &:not(:disabled) {
459 cursor: pointer; // 3
460 }
461 }
462}
463
464// Remove inner border and padding from Firefox, but don't restore the outline like Normalize.
465
466::-moz-focus-inner {
467 padding: 0;
468 border-style: none;
469}
470
471// 1. Textareas should really only resize vertically so they don't break their (horizontal) containers.
472
473textarea {
474 resize: vertical; // 1
475}
476
477// 1. Browsers set a default `min-width: min-content;` on fieldsets,
478// unlike e.g. `<div>`s, which have `min-width: 0;` by default.
479// So we reset that to ensure fieldsets behave more like a standard block element.
480// See https://github.com/twbs/bootstrap/issues/12359
481// and https://html.spec.whatwg.org/multipage/#the-fieldset-and-legend-elements
482// 2. Reset the default outline behavior of fieldsets so they don't affect page layout.
483
484fieldset {
485 min-width: 0; // 1
486 padding: 0; // 2
487 margin: 0; // 2
488 border: 0; // 2
489}
490
491// 1. By using `float: left`, the legend will behave like a block element.
492// This way the border of a fieldset wraps around the legend if present.
493// 2. Fix wrapping bug.
494// See https://github.com/twbs/bootstrap/issues/29712
495
496legend {
497 float: left; // 1
498 width: 100%;
499 padding: 0;
500 margin-bottom: $legend-margin-bottom;
501 @include font-size($legend-font-size);
502 font-weight: $legend-font-weight;
503 line-height: inherit;
504
505 + * {
506 clear: left; // 2
507 }
508}
509
510// Fix height of inputs with a type of datetime-local, date, month, week, or time
511// See https://github.com/twbs/bootstrap/issues/18842
512
513::-webkit-datetime-edit-fields-wrapper,
514::-webkit-datetime-edit-text,
515::-webkit-datetime-edit-minute,
516::-webkit-datetime-edit-hour-field,
517::-webkit-datetime-edit-day-field,
518::-webkit-datetime-edit-month-field,
519::-webkit-datetime-edit-year-field {
520 padding: 0;
521}
522
523::-webkit-inner-spin-button {
524 height: auto;
525}
526
527// 1. Correct the outline style in Safari.
528// 2. This overrides the extra rounded corners on search inputs in iOS so that our
529// `.form-control` class can properly style them. Note that this cannot simply
530// be added to `.form-control` as it's not specific enough. For details, see
531// https://github.com/twbs/bootstrap/issues/11586.
532
533[type="search"] {
534 outline-offset: -2px; // 1
535 -webkit-appearance: textfield; // 2
536}
537
538// 1. A few input types should stay LTR
539// See https://rtlstyling.com/posts/rtl-styling#form-inputs
540// 2. RTL only output
541// See https://rtlcss.com/learn/usage-guide/control-directives/#raw
542
543/* rtl:raw:
544[type="tel"],
545[type="url"],
546[type="email"],
547[type="number"] {
548 direction: ltr;
549}
550*/
551
552// Remove the inner padding in Chrome and Safari on macOS.
553
554::-webkit-search-decoration {
555 -webkit-appearance: none;
556}
557
558// Remove padding around color pickers in webkit browsers
559
560::-webkit-color-swatch-wrapper {
561 padding: 0;
562}
563
564
565// 1. Inherit font family and line height for file input buttons
566// 2. Correct the inability to style clickable types in iOS and Safari.
567
568::file-selector-button {
569 font: inherit; // 1
570 -webkit-appearance: button; // 2
571}
572
573// Correct element displays
574
575output {
576 display: inline-block;
577}
578
579// Remove border from iframe
580
581iframe {
582 border: 0;
583}
584
585// Summary
586//
587// 1. Add the correct display in all browsers
588
589summary {
590 display: list-item; // 1
591 cursor: pointer;
592}
593
594
595// Progress
596//
597// Add the correct vertical alignment in Chrome, Firefox, and Opera.
598
599progress {
600 vertical-align: baseline;
601}
602
603
604// Hidden attribute
605//
606// Always hide an element with the `hidden` HTML attribute.
607
608[hidden] {
609 display: none !important;
610}
Note: See TracBrowser for help on using the repository browser.