source: imaps-frontend/node_modules/bootstrap/scss/_reboot.scss@ d565449

main
Last change on this file since d565449 was d565449, checked in by stefan toskovski <stefantoska84@…>, 4 weeks ago

Update repo after prototype presentation

  • Property mode set to 100644
File size: 12.1 KB
RevLine 
[d565449]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: var(--#{$prefix}heading-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 color: var(--#{$prefix}highlight-color);
221 background-color: var(--#{$prefix}highlight-bg);
222}
223
224
225// Sub and Sup
226//
227// Prevent `sub` and `sup` elements from affecting the line height in
228// all browsers.
229
230sub,
231sup {
232 position: relative;
233 @include font-size($sub-sup-font-size);
234 line-height: 0;
235 vertical-align: baseline;
236}
237
238sub { bottom: -.25em; }
239sup { top: -.5em; }
240
241
242// Links
243
244a {
245 color: rgba(var(--#{$prefix}link-color-rgb), var(--#{$prefix}link-opacity, 1));
246 text-decoration: $link-decoration;
247
248 &:hover {
249 --#{$prefix}link-color-rgb: var(--#{$prefix}link-hover-color-rgb);
250 text-decoration: $link-hover-decoration;
251 }
252}
253
254// And undo these styles for placeholder links/named anchors (without href).
255// It would be more straightforward to just use a[href] in previous block, but that
256// causes specificity issues in many other styles that are too complex to fix.
257// See https://github.com/twbs/bootstrap/issues/19402
258
259a:not([href]):not([class]) {
260 &,
261 &:hover {
262 color: inherit;
263 text-decoration: none;
264 }
265}
266
267
268// Code
269
270pre,
271code,
272kbd,
273samp {
274 font-family: $font-family-code;
275 @include font-size(1em); // Correct the odd `em` font sizing in all browsers.
276}
277
278// 1. Remove browser default top margin
279// 2. Reset browser default of `1em` to use `rem`s
280// 3. Don't allow content to break outside
281
282pre {
283 display: block;
284 margin-top: 0; // 1
285 margin-bottom: 1rem; // 2
286 overflow: auto; // 3
287 @include font-size($code-font-size);
288 color: $pre-color;
289
290 // Account for some code outputs that place code tags in pre tags
291 code {
292 @include font-size(inherit);
293 color: inherit;
294 word-break: normal;
295 }
296}
297
298code {
299 @include font-size($code-font-size);
300 color: var(--#{$prefix}code-color);
301 word-wrap: break-word;
302
303 // Streamline the style when inside anchors to avoid broken underline and more
304 a > & {
305 color: inherit;
306 }
307}
308
309kbd {
310 padding: $kbd-padding-y $kbd-padding-x;
311 @include font-size($kbd-font-size);
312 color: $kbd-color;
313 background-color: $kbd-bg;
314 @include border-radius($border-radius-sm);
315
316 kbd {
317 padding: 0;
318 @include font-size(1em);
319 font-weight: $nested-kbd-font-weight;
320 }
321}
322
323
324// Figures
325//
326// Apply a consistent margin strategy (matches our type styles).
327
328figure {
329 margin: 0 0 1rem;
330}
331
332
333// Images and content
334
335img,
336svg {
337 vertical-align: middle;
338}
339
340
341// Tables
342//
343// Prevent double borders
344
345table {
346 caption-side: bottom;
347 border-collapse: collapse;
348}
349
350caption {
351 padding-top: $table-cell-padding-y;
352 padding-bottom: $table-cell-padding-y;
353 color: $table-caption-color;
354 text-align: left;
355}
356
357// 1. Removes font-weight bold by inheriting
358// 2. Matches default `<td>` alignment by inheriting `text-align`.
359// 3. Fix alignment for Safari
360
361th {
362 font-weight: $table-th-font-weight; // 1
363 text-align: inherit; // 2
364 text-align: -webkit-match-parent; // 3
365}
366
367thead,
368tbody,
369tfoot,
370tr,
371td,
372th {
373 border-color: inherit;
374 border-style: solid;
375 border-width: 0;
376}
377
378
379// Forms
380//
381// 1. Allow labels to use `margin` for spacing.
382
383label {
384 display: inline-block; // 1
385}
386
387// Remove the default `border-radius` that macOS Chrome adds.
388// See https://github.com/twbs/bootstrap/issues/24093
389
390button {
391 // stylelint-disable-next-line property-disallowed-list
392 border-radius: 0;
393}
394
395// Explicitly remove focus outline in Chromium when it shouldn't be
396// visible (e.g. as result of mouse click or touch tap). It already
397// should be doing this automatically, but seems to currently be
398// confused and applies its very visible two-tone outline anyway.
399
400button:focus:not(:focus-visible) {
401 outline: 0;
402}
403
404// 1. Remove the margin in Firefox and Safari
405
406input,
407button,
408select,
409optgroup,
410textarea {
411 margin: 0; // 1
412 font-family: inherit;
413 @include font-size(inherit);
414 line-height: inherit;
415}
416
417// Remove the inheritance of text transform in Firefox
418button,
419select {
420 text-transform: none;
421}
422// Set the cursor for non-`<button>` buttons
423//
424// Details at https://github.com/twbs/bootstrap/pull/30562
425[role="button"] {
426 cursor: pointer;
427}
428
429select {
430 // Remove the inheritance of word-wrap in Safari.
431 // See https://github.com/twbs/bootstrap/issues/24990
432 word-wrap: normal;
433
434 // Undo the opacity change from Chrome
435 &:disabled {
436 opacity: 1;
437 }
438}
439
440// Remove the dropdown arrow only from text type inputs built with datalists in Chrome.
441// See https://stackoverflow.com/a/54997118
442
443[list]:not([type="date"]):not([type="datetime-local"]):not([type="month"]):not([type="week"]):not([type="time"])::-webkit-calendar-picker-indicator {
444 display: none !important;
445}
446
447// 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
448// controls in Android 4.
449// 2. Correct the inability to style clickable types in iOS and Safari.
450// 3. Opinionated: add "hand" cursor to non-disabled button elements.
451
452button,
453[type="button"], // 1
454[type="reset"],
455[type="submit"] {
456 -webkit-appearance: button; // 2
457
458 @if $enable-button-pointers {
459 &:not(:disabled) {
460 cursor: pointer; // 3
461 }
462 }
463}
464
465// Remove inner border and padding from Firefox, but don't restore the outline like Normalize.
466
467::-moz-focus-inner {
468 padding: 0;
469 border-style: none;
470}
471
472// 1. Textareas should really only resize vertically so they don't break their (horizontal) containers.
473
474textarea {
475 resize: vertical; // 1
476}
477
478// 1. Browsers set a default `min-width: min-content;` on fieldsets,
479// unlike e.g. `<div>`s, which have `min-width: 0;` by default.
480// So we reset that to ensure fieldsets behave more like a standard block element.
481// See https://github.com/twbs/bootstrap/issues/12359
482// and https://html.spec.whatwg.org/multipage/#the-fieldset-and-legend-elements
483// 2. Reset the default outline behavior of fieldsets so they don't affect page layout.
484
485fieldset {
486 min-width: 0; // 1
487 padding: 0; // 2
488 margin: 0; // 2
489 border: 0; // 2
490}
491
492// 1. By using `float: left`, the legend will behave like a block element.
493// This way the border of a fieldset wraps around the legend if present.
494// 2. Fix wrapping bug.
495// See https://github.com/twbs/bootstrap/issues/29712
496
497legend {
498 float: left; // 1
499 width: 100%;
500 padding: 0;
501 margin-bottom: $legend-margin-bottom;
502 @include font-size($legend-font-size);
503 font-weight: $legend-font-weight;
504 line-height: inherit;
505
506 + * {
507 clear: left; // 2
508 }
509}
510
511// Fix height of inputs with a type of datetime-local, date, month, week, or time
512// See https://github.com/twbs/bootstrap/issues/18842
513
514::-webkit-datetime-edit-fields-wrapper,
515::-webkit-datetime-edit-text,
516::-webkit-datetime-edit-minute,
517::-webkit-datetime-edit-hour-field,
518::-webkit-datetime-edit-day-field,
519::-webkit-datetime-edit-month-field,
520::-webkit-datetime-edit-year-field {
521 padding: 0;
522}
523
524::-webkit-inner-spin-button {
525 height: auto;
526}
527
528// 1. 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// 2. Correct the outline style in Safari.
533
534[type="search"] {
535 -webkit-appearance: textfield; // 1
536 outline-offset: -2px; // 2
537}
538
539// 1. A few input types should stay LTR
540// See https://rtlstyling.com/posts/rtl-styling#form-inputs
541// 2. RTL only output
542// See https://rtlcss.com/learn/usage-guide/control-directives/#raw
543
544/* rtl:raw:
545[type="tel"],
546[type="url"],
547[type="email"],
548[type="number"] {
549 direction: ltr;
550}
551*/
552
553// Remove the inner padding in Chrome and Safari on macOS.
554
555::-webkit-search-decoration {
556 -webkit-appearance: none;
557}
558
559// Remove padding around color pickers in webkit browsers
560
561::-webkit-color-swatch-wrapper {
562 padding: 0;
563}
564
565
566// 1. Inherit font family and line height for file input buttons
567// 2. Correct the inability to style clickable types in iOS and Safari.
568
569::file-selector-button {
570 font: inherit; // 1
571 -webkit-appearance: button; // 2
572}
573
574// Correct element displays
575
576output {
577 display: inline-block;
578}
579
580// Remove border from iframe
581
582iframe {
583 border: 0;
584}
585
586// Summary
587//
588// 1. Add the correct display in all browsers
589
590summary {
591 display: list-item; // 1
592 cursor: pointer;
593}
594
595
596// Progress
597//
598// Add the correct vertical alignment in Chrome, Firefox, and Opera.
599
600progress {
601 vertical-align: baseline;
602}
603
604
605// Hidden attribute
606//
607// Always hide an element with the `hidden` HTML attribute.
608
609[hidden] {
610 display: none !important;
611}
Note: See TracBrowser for help on using the repository browser.