diff options
Diffstat (limited to 'sass/vendor/bootstrap/scss/_reboot.scss')
| -rw-r--r--[-rwxr-xr-x] | sass/vendor/bootstrap/scss/_reboot.scss | 648 |
1 files changed, 440 insertions, 208 deletions
diff --git a/sass/vendor/bootstrap/scss/_reboot.scss b/sass/vendor/bootstrap/scss/_reboot.scss index 557829f..3520469 100755..100644 --- a/sass/vendor/bootstrap/scss/_reboot.scss +++ b/sass/vendor/bootstrap/scss/_reboot.scss @@ -1,133 +1,169 @@ -// scss-lint:disable QualifyingElement, DuplicateProperty +// stylelint-disable declaration-no-important, selector-no-qualifying-type, property-no-vendor-prefix + // Reboot // -// Global resets to common HTML elements and more for easier usage by Bootstrap. -// Adds additional rules on top of Normalize.css, including several overrides. +// Normalization of HTML elements, manually forked from Normalize.css to remove +// styles targeting irrelevant browsers while applying new styles. +// +// Normalize is licensed MIT. https://github.com/necolas/normalize.css -// Reset the box-sizing -// -// Change from `box-sizing: content-box` to `border-box` so that when you add -// `padding` or `border`s to an element, the overall declared `width` does not -// change. For example, `width: 100px;` will always be `100px` despite the -// `border: 10px solid red;` and `padding: 20px;`. -// -// Heads up! This reset may cause conflicts with some third-party widgets. For -// recommendations on resolving such conflicts, see -// https://getbootstrap.com/getting-started/#third-box-sizing. +// Document // -// Credit: https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ - -html { - box-sizing: border-box; -} +// Change from `box-sizing: content-box` so that `width` is not affected by `padding` or `border`. *, *::before, *::after { - box-sizing: inherit; + box-sizing: border-box; } -// Make viewport responsive -// -// @viewport is needed because IE 10+ doesn't honor <meta name="viewport"> in -// some cases. See https://timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design/. -// Eventually @viewport will replace <meta name="viewport">. -// -// However, `device-width` is broken on IE 10 on Windows (Phone) 8, -// (see https://timkadlec.com/2013/01/windows-phone-8-and-device-width/ and https://github.com/twbs/bootstrap/issues/10497) -// and the fix for that involves a snippet of JavaScript to sniff the user agent -// and apply some conditional CSS. +// Root // -// See https://getbootstrap.com/getting-started/#support-ie10-width for the relevant hack. -// -// Wrap `@viewport` with `@at-root` for when folks do a nested import (e.g., -// `.class-name { @import "bootstrap"; }`). -@at-root { - @-ms-viewport { width: device-width; } -} +// Ability to the value of the root font sizes, affecting the value of `rem`. +// null by default, thus nothing is generated. +:root { + font-size: $font-size-root; -// -// Reset HTML, body, and more -// - -html { - // We assume no initial pixel `font-size` for accessibility reasons. This - // allows web visitors to customize their browser default font-size, making - // your project more inclusive and accessible to everyone. + @if $enable-smooth-scroll { + @media (prefers-reduced-motion: no-preference) { + scroll-behavior: smooth; + } + } +} - // As a side-effect of setting the @viewport above, - // IE11 & Edge make the scrollbar overlap the content and automatically hide itself when not in use. - // Unfortunately, the auto-showing of the scrollbar is sometimes too sensitive, - // thus making it hard to click on stuff near the right edge of the page. - // So we add this style to force IE11 & Edge to use a "normal", non-overlapping, non-auto-hiding scrollbar. - // See https://github.com/twbs/bootstrap/issues/18543 - // and https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/7165383/ - -ms-overflow-style: scrollbar; - // Changes the default tap highlight to be completely transparent in iOS. - -webkit-tap-highlight-color: rgba(0,0,0,0); -} +// Body +// +// 1. Remove the margin in all browsers. +// 2. As a best practice, apply a default `background-color`. +// 3. Prevent adjustments of font size after orientation changes in iOS. +// 4. Change the default tap highlight to be completely transparent in iOS. body { + margin: 0; // 1 font-family: $font-family-base; - font-size: $font-size-base; + @include font-size($font-size-base); font-weight: $font-weight-base; line-height: $line-height-base; - // Go easy on the eyes and use something other than `#000` for text color: $body-color; - // By default, `<body>` has no `background-color` so we set one as a best practice. - background-color: $body-bg; + text-align: $body-text-align; + background-color: $body-bg; // 2 + -webkit-text-size-adjust: 100%; // 3 + -webkit-tap-highlight-color: rgba($black, 0); // 4 } -// Suppress the focus outline on elements that cannot be accessed via keyboard. -// This prevents an unwanted focus outline from appearing around elements that -// might still respond to pointer events. + +// Content grouping // -// Credit: https://github.com/suitcss/base -[tabindex="-1"]:focus { - outline: none !important; +// 1. Reset Firefox's gray color +// 2. Set correct height and prevent the `size` attribute to make the `hr` look like an input field + +hr { + margin: $hr-margin-y 0; + color: $hr-color; // 1 + background-color: currentColor; + border: 0; + opacity: $hr-opacity; +} + +hr:not([size]) { + height: $hr-height; // 2 } -// // Typography // +// 1. Remove top margins from headings +// By default, `<h1>`-`<h6>` all receive top and bottom margins. We nuke the top +// margin for easier control within type scales as it avoids margin collapsing. -// Remove top margins from headings -// -// By default, `<h1>`-`<h6>` all receive top and bottom margins. We nuke the top -// margin for easier control within type scales as it avoids margin collapsing. -h1, h2, h3, h4, h5, h6 { - margin-top: 0; - margin-bottom: .5rem; +%heading { + margin-top: 0; // 1 + margin-bottom: $headings-margin-bottom; + font-family: $headings-font-family; + font-style: $headings-font-style; + font-weight: $headings-font-weight; + line-height: $headings-line-height; + color: $headings-color; +} + +h1 { + @extend %heading; + @include font-size($h1-font-size); +} + +h2 { + @extend %heading; + @include font-size($h2-font-size); +} + +h3 { + @extend %heading; + @include font-size($h3-font-size); +} + +h4 { + @extend %heading; + @include font-size($h4-font-size); +} + +h5 { + @extend %heading; + @include font-size($h5-font-size); } +h6 { + @extend %heading; + @include font-size($h6-font-size); +} + + // Reset margins on paragraphs // // Similarly, the top margin on `<p>`s get reset. However, we also reset the // bottom margin to use `rem` units instead of `em`. + p { margin-top: 0; - margin-bottom: 1rem; + margin-bottom: $paragraph-margin-bottom; } + // Abbreviations +// +// 1. Duplicate behavior to the data-bs-* attribute for our tooltip plugin +// 2. Add the correct text decoration in Chrome, Edge, Opera, and Safari. +// 3. Add explicit cursor to indicate changed behavior. +// 4. Prevent the text-decoration to be skipped. + abbr[title], -// Add data-* attribute to help out our tooltip plugin, per https://github.com/twbs/bootstrap/issues/5257 -abbr[data-original-title] { - cursor: help; +abbr[data-bs-original-title] { // 1 + text-decoration: underline dotted; // 2 + cursor: help; // 3 + text-decoration-skip-ink: none; // 4 } + +// Address + address { margin-bottom: 1rem; font-style: normal; line-height: inherit; } + +// Lists + +ol, +ul { + padding-left: 2rem; +} + ol, ul, dl { @@ -146,244 +182,440 @@ dt { font-weight: $dt-font-weight; } +// 1. Undo browser default + dd { margin-bottom: .5rem; - margin-left: 0; // Undo browser default + margin-left: 0; // 1 } + +// Blockquote + blockquote { margin: 0 0 1rem; } +// Strong // -// Links +// Add the correct font weight in Chrome, Edge, and Safari + +b, +strong { + font-weight: $font-weight-bolder; +} + + +// Small // +// Add the correct font size in all browsers + +small { + @include font-size($small-font-size); +} + + +// Mark + +mark { + padding: $mark-padding; + background-color: $mark-bg; +} + + +// Sub and Sup +// +// Prevent `sub` and `sup` elements from affecting the line height in +// all browsers. + +sub, +sup { + position: relative; + @include font-size($sub-sup-font-size); + line-height: 0; + vertical-align: baseline; +} + +sub { bottom: -.25em; } +sup { top: -.5em; } + + +// Links a { color: $link-color; text-decoration: $link-decoration; - @include hover-focus { + &:hover { color: $link-hover-color; text-decoration: $link-hover-decoration; } } -// And undo these styles for placeholder links/named anchors (without href) -// which have not been made explicitly keyboard-focusable (without tabindex). +// And undo these styles for placeholder links/named anchors (without href). // It would be more straightforward to just use a[href] in previous block, but that // causes specificity issues in many other styles that are too complex to fix. // See https://github.com/twbs/bootstrap/issues/19402 -a:not([href]):not([tabindex]) { - color: inherit; - text-decoration: none; - - @include hover-focus { +a:not([href]):not([class]) { + &, + &:hover { color: inherit; text-decoration: none; } - - &:focus { - outline: 0; - } } -// // Code -// -pre { - // Remove browser default top margin - margin-top: 0; - // Reset browser default of `1em` to use `rem`s - margin-bottom: 1rem; - // Normalize v4 removed this property, causing `<pre>` content to break out of wrapping code snippets - overflow: auto; +pre, +code, +kbd, +samp { + font-family: $font-family-code; + @include font-size(1em); // Correct the odd `em` font sizing in all browsers. + direction: ltr #{"/* rtl:ignore */"}; + unicode-bidi: bidi-override; } +// 1. Remove browser default top margin +// 2. Reset browser default of `1em` to use `rem`s +// 3. Don't allow content to break outside -// -// Figures -// - -figure { - // Normalize adds `margin` to `figure`s as browsers apply it inconsistently. - // We reset that to create a better flow in-page. - margin: 0 0 1rem; +pre { + display: block; + margin-top: 0; // 1 + margin-bottom: 1rem; // 2 + overflow: auto; // 3 + @include font-size($code-font-size); + color: $pre-color; + + // Account for some code outputs that place code tags in pre tags + code { + @include font-size(inherit); + color: inherit; + word-break: normal; + } } +code { + @include font-size($code-font-size); + color: $code-color; + word-wrap: break-word; -// -// Images -// + // Streamline the style when inside anchors to avoid broken underline and more + a > & { + color: inherit; + } +} -img { - // By default, `<img>`s are `inline-block`. This assumes that, and vertically - // centers them. This won't apply should you reset them to `block` level. - vertical-align: middle; - // Note: `<img>`s are deliberately not made responsive by default. - // For the rationale behind this, see the comments on the `.img-fluid` class. +kbd { + padding: $kbd-padding-y $kbd-padding-x; + @include font-size($kbd-font-size); + color: $kbd-color; + background-color: $kbd-bg; + @include border-radius($border-radius-sm); + + kbd { + padding: 0; + @include font-size(1em); + font-weight: $nested-kbd-font-weight; + } } -// iOS "clickable elements" fix for role="button" +// Figures // -// Fixes "clickability" issue (and more generally, the firing of events such as focus as well) -// for traditionally non-focusable elements with role="button" -// see https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile +// Apply a consistent margin strategy (matches our type styles). -[role="button"] { - cursor: pointer; +figure { + margin: 0 0 1rem; } -// Avoid 300ms click delay on touch devices that support the `touch-action` CSS property. -// -// In particular, unlike most other browsers, IE11+Edge on Windows 10 on touch devices and IE Mobile 10-11 -// DON'T remove the click delay when `<meta name="viewport" content="width=device-width">` is present. -// However, they DO support removing the click delay via `touch-action: manipulation`. -// See: -// * https://v4-alpha.getbootstrap.com/content/reboot/#click-delay-optimization-for-touch -// * http://caniuse.com/#feat=css-touch-action -// * https://patrickhlauke.github.io/touch/tests/results/#suppressing-300ms-delay - -a, -area, -button, -[role="button"], -input, -label, -select, -summary, -textarea { - touch-action: manipulation; +// Images and content + +img, +svg { + vertical-align: middle; } -// // Tables // +// Prevent double borders table { - // No longer part of Normalize since v4 + caption-side: bottom; border-collapse: collapse; - // Reset for nesting within parents with `background-color`. - background-color: $table-bg; } caption { - padding-top: $table-cell-padding; - padding-bottom: $table-cell-padding; - color: $text-muted; + padding-top: $table-cell-padding-y; + padding-bottom: $table-cell-padding-y; + color: $table-caption-color; text-align: left; - caption-side: bottom; } +// 1. Removes font-weight bold by inheriting +// 2. Matches default `<td>` alignment by inheriting `text-align`. +// 3. Fix alignment for Safari + th { - // Centered by default, but left-align-ed to match the `td`s below. - text-align: left; + font-weight: $table-th-font-weight; // 1 + text-align: inherit; // 2 + text-align: -webkit-match-parent; // 3 +} + +thead, +tbody, +tfoot, +tr, +td, +th { + border-color: inherit; + border-style: solid; + border-width: 0; } -// // Forms // +// 1. Allow labels to use `margin` for spacing. label { - // Allow labels to use `margin` for spacing. - display: inline-block; - margin-bottom: .5rem; + display: inline-block; // 1 } -// Work around a Firefox/IE bug where the transparent `button` background -// results in a loss of the default `button` focus styles. -// -// Credit: https://github.com/suitcss/base/ -button:focus { - outline: 1px dotted; - outline: 5px auto -webkit-focus-ring-color; +// Remove the default `border-radius` that macOS Chrome adds. +// See https://github.com/twbs/bootstrap/issues/24093 + +button { + // stylelint-disable-next-line property-disallowed-list + border-radius: 0; } +// Explicitly remove focus outline in Chromium when it shouldn't be +// visible (e.g. as result of mouse click or touch tap). It already +// should be doing this automatically, but seems to currently be +// confused and applies its very visible two-tone outline anyway. + +button:focus:not(:focus-visible) { + outline: 0; +} + +// 1. Remove the margin in Firefox and Safari + input, button, select, +optgroup, textarea { - // Normalize includes `font: inherit;`, so `font-family`. `font-size`, etc are - // properly inherited. However, `line-height` isn't inherited there. + margin: 0; // 1 + font-family: inherit; + @include font-size(inherit); line-height: inherit; } -input[type="radio"], -input[type="checkbox"] { - // Apply a disabled cursor for radios and checkboxes. - // - // Note: Neither radios nor checkboxes can be readonly. +// Remove the inheritance of text transform in Firefox +button, +select { + text-transform: none; +} +// Set the cursor for non-`<button>` buttons +// +// Details at https://github.com/twbs/bootstrap/pull/30562 +[role="button"] { + cursor: pointer; +} + +select { + // Remove the inheritance of word-wrap in Safari. + // See https://github.com/twbs/bootstrap/issues/24990 + word-wrap: normal; + + // Undo the opacity change from Chrome &:disabled { - cursor: $cursor-disabled; + opacity: 1; + } +} + +// Remove the dropdown arrow in Chrome from inputs built with datalists. +// See https://stackoverflow.com/a/54997118 + +[list]::-webkit-calendar-picker-indicator { + display: none; +} + +// 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` +// controls in Android 4. +// 2. Correct the inability to style clickable types in iOS and Safari. +// 3. Opinionated: add "hand" cursor to non-disabled button elements. + +button, +[type="button"], // 1 +[type="reset"], +[type="submit"] { + -webkit-appearance: button; // 2 + + @if $enable-button-pointers { + &:not(:disabled) { + cursor: pointer; // 3 + } } } +// Remove inner border and padding from Firefox, but don't restore the outline like Normalize. -input[type="date"], -input[type="time"], -input[type="datetime-local"], -input[type="month"] { - // Remove the default appearance of temporal inputs to avoid a Mobile Safari - // bug where setting a custom line-height prevents text from being vertically - // centered within the input. - // See https://bugs.webkit.org/show_bug.cgi?id=139848 - // and https://github.com/twbs/bootstrap/issues/11266 - -webkit-appearance: listbox; +::-moz-focus-inner { + padding: 0; + border-style: none; } +// 1. Textareas should really only resize vertically so they don't break their (horizontal) containers. + textarea { - // Textareas should really only resize vertically so they don't break their (horizontal) containers. - resize: vertical; + resize: vertical; // 1 } +// 1. Browsers set a default `min-width: min-content;` on fieldsets, +// unlike e.g. `<div>`s, which have `min-width: 0;` by default. +// So we reset that to ensure fieldsets behave more like a standard block element. +// See https://github.com/twbs/bootstrap/issues/12359 +// and https://html.spec.whatwg.org/multipage/#the-fieldset-and-legend-elements +// 2. Reset the default outline behavior of fieldsets so they don't affect page layout. + fieldset { - // Browsers set a default `min-width: min-content;` on fieldsets, - // unlike e.g. `<div>`s, which have `min-width: 0;` by default. - // So we reset that to ensure fieldsets behave more like a standard block element. - // See https://github.com/twbs/bootstrap/issues/12359 - // and https://html.spec.whatwg.org/multipage/#the-fieldset-and-legend-elements - min-width: 0; - // Reset the default outline behavior of fieldsets so they don't affect page layout. - padding: 0; - margin: 0; - border: 0; + min-width: 0; // 1 + padding: 0; // 2 + margin: 0; // 2 + border: 0; // 2 } +// 1. By using `float: left`, the legend will behave like a block element. +// This way the border of a fieldset wraps around the legend if present. +// 2. Fix wrapping bug. +// See https://github.com/twbs/bootstrap/issues/29712 + legend { - // Reset the entire legend element to match the `fieldset` - display: block; + float: left; // 1 width: 100%; padding: 0; - margin-bottom: .5rem; - font-size: 1.5rem; + margin-bottom: $legend-margin-bottom; + @include font-size($legend-font-size); + font-weight: $legend-font-weight; line-height: inherit; + + + * { + clear: left; // 2 + } +} + +// Fix height of inputs with a type of datetime-local, date, month, week, or time +// See https://github.com/twbs/bootstrap/issues/18842 + +::-webkit-datetime-edit-fields-wrapper, +::-webkit-datetime-edit-text, +::-webkit-datetime-edit-minute, +::-webkit-datetime-edit-hour-field, +::-webkit-datetime-edit-day-field, +::-webkit-datetime-edit-month-field, +::-webkit-datetime-edit-year-field { + padding: 0; +} + +::-webkit-inner-spin-button { + height: auto; } -input[type="search"] { - // This overrides the extra rounded corners on search inputs in iOS so that our - // `.form-control` class can properly style them. Note that this cannot simply - // be added to `.form-control` as it's not specific enough. For details, see - // https://github.com/twbs/bootstrap/issues/11586. +// 1. Correct the outline style in Safari. +// 2. This overrides the extra rounded corners on search inputs in iOS so that our +// `.form-control` class can properly style them. Note that this cannot simply +// be added to `.form-control` as it's not specific enough. For details, see +// https://github.com/twbs/bootstrap/issues/11586. + +[type="search"] { + outline-offset: -2px; // 1 + -webkit-appearance: textfield; // 2 +} + +// 1. A few input types should stay LTR +// See https://rtlstyling.com/posts/rtl-styling#form-inputs +// 2. RTL only output +// See https://rtlcss.com/learn/usage-guide/control-directives/#raw + +/* rtl:raw: +[type="tel"], +[type="url"], +[type="email"], +[type="number"] { + direction: ltr; +} +*/ + +// Remove the inner padding in Chrome and Safari on macOS. + +::-webkit-search-decoration { -webkit-appearance: none; } -// todo: needed? +// Remove padding around color pickers in webkit browsers + +::-webkit-color-swatch-wrapper { + padding: 0; +} + + +// Inherit font family and line height for file input buttons + +::file-selector-button { + font: inherit; +} + +// 1. Change font properties to `inherit` +// 2. Correct the inability to style clickable types in iOS and Safari. + +::-webkit-file-upload-button { + font: inherit; // 1 + -webkit-appearance: button; // 2 +} + +// Correct element displays + output { display: inline-block; -// font-size: $font-size-base; -// line-height: $line-height; -// color: $input-color; } -// Always hide an element with the `hidden` HTML attribute (from PureCSS). +// Remove border from iframe + +iframe { + border: 0; +} + +// Summary +// +// 1. Add the correct display in all browsers + +summary { + display: list-item; // 1 + cursor: pointer; +} + + +// Progress +// +// Add the correct vertical alignment in Chrome, Firefox, and Opera. + +progress { + vertical-align: baseline; +} + + +// Hidden attribute +// +// Always hide an element with the `hidden` HTML attribute. + [hidden] { display: none !important; } |