source: trip-planner-front/node_modules/bootstrap/scss/_reboot.scss@ 6a3a178

Last change on this file since 6a3a178 was 6a3a178, checked in by Ema <ema_spirova@…>, 3 years ago

initial commit

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