` elements.
+// 3. Prevent adjustments of font size after orientation changes in iOS.
+// 4. Change the default tap highlight to be completely transparent in iOS.
+// scss-docs-start reboot-body-rules
body {
margin: 0; // 1
- font-family: $font-family-base;
- @include font-size($font-size-base);
- font-weight: $font-weight-base;
- line-height: $line-height-base;
- color: $body-color;
- text-align: left; // 3
- background-color: $body-bg; // 2
-}
-
-// Future-proof rule: in browsers that support :focus-visible, suppress the focus outline
-// on elements that programmatically receive focus but wouldn't normally show a visible
-// focus outline. In general, this would mean that the outline is only applied if the
-// interaction that led to the element receiving programmatic focus was a keyboard interaction,
-// or the browser has somehow determined that the user is primarily a keyboard user and/or
-// wants focus outlines to always be presented.
-//
-// See https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible
-// and https://developer.paciellogroup.com/blog/2018/03/focus-visible-and-backwards-compatibility/
-[tabindex="-1"]:focus:not(:focus-visible) {
- outline: 0 !important;
+ font-family: var(--#{$prefix}body-font-family);
+ @include font-size(var(--#{$prefix}body-font-size));
+ font-weight: var(--#{$prefix}body-font-weight);
+ line-height: var(--#{$prefix}body-line-height);
+ color: var(--#{$prefix}body-color);
+ text-align: var(--#{$prefix}body-text-align);
+ background-color: var(--#{$prefix}body-bg); // 2
+ -webkit-text-size-adjust: 100%; // 3
+ -webkit-tap-highlight-color: rgba($black, 0); // 4
}
+// scss-docs-end reboot-body-rules
// Content grouping
//
-// 1. Add the correct box sizing in Firefox.
-// 2. Show the overflow in Edge and IE.
+// 1. Reset Firefox's gray color
hr {
- box-sizing: content-box; // 1
- height: 0; // 1
- overflow: visible; // 2
+ margin: $hr-margin-y 0;
+ color: $hr-color; // 1
+ border: 0;
+ border-top: $hr-border-width solid $hr-border-color;
+ opacity: $hr-opacity;
}
-//
// Typography
//
+// 1. Remove top margins from headings
+// By default, ``-`` 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, ``-`` all receive top and bottom margins. We nuke the top
-// margin for easier control within type scales as it avoids margin collapsing.
-// stylelint-disable-next-line selector-list-comma-newline-after
-h1, h2, h3, h4, h5, h6 {
- margin-top: 0;
+%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: var(--#{$prefix}heading-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 ``s get reset. However, we also reset the
// bottom margin to use `rem` units instead of `em`.
+
p {
margin-top: 0;
margin-bottom: $paragraph-margin-bottom;
}
+
// Abbreviations
//
-// 1. Duplicate behavior to the data-* attribute for our tooltip plugin
-// 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
-// 3. Add explicit cursor to indicate changed behavior.
-// 4. Remove the bottom border in Firefox 39-.
-// 5. Prevent the text-decoration to be skipped.
+// 1. Add the correct text decoration in Chrome, Edge, Opera, and Safari.
+// 2. Add explicit cursor to indicate changed behavior.
+// 3. Prevent the text-decoration to be skipped.
-abbr[title],
-abbr[data-original-title] { // 1
- text-decoration: underline; // 2
- text-decoration: underline dotted; // 2
- cursor: help; // 3
- border-bottom: 0; // 4
- text-decoration-skip-ink: none; // 5
+abbr[title] {
+ text-decoration: underline dotted; // 1
+ cursor: help; // 2
+ text-decoration-skip-ink: none; // 3
}
+
+// Address
+
address {
margin-bottom: 1rem;
font-style: normal;
line-height: inherit;
}
+
+// Lists
+
+ol,
+ul {
+ padding-left: 2rem;
+}
+
ol,
ul,
dl {
@@ -144,33 +179,58 @@ 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
+//
+// Add the correct font weight in Chrome, Edge, and Safari
+
b,
strong {
- font-weight: $font-weight-bolder; // Add the correct font weight in Chrome, Edge, and Safari
+ font-weight: $font-weight-bolder;
}
+
+// Small
+//
+// Add the correct font size in all browsers
+
small {
- @include font-size(80%); // Add the correct font size in all browsers
+ @include font-size($small-font-size);
}
+
+// Mark
+
+mark {
+ padding: $mark-padding;
+ color: var(--#{$prefix}highlight-color);
+ background-color: var(--#{$prefix}highlight-bg);
+}
+
+
+// Sub and Sup
//
// Prevent `sub` and `sup` elements from affecting the line height in
// all browsers.
-//
sub,
sup {
position: relative;
- @include font-size(75%);
+ @include font-size($sub-sup-font-size);
line-height: 0;
vertical-align: baseline;
}
@@ -179,17 +239,14 @@ sub { bottom: -.25em; }
sup { top: -.5em; }
-//
// Links
-//
a {
- color: $link-color;
+ color: rgba(var(--#{$prefix}link-color-rgb), var(--#{$prefix}link-opacity, 1));
text-decoration: $link-decoration;
- background-color: transparent; // Remove the gray background on active links in IE 10.
- @include hover() {
- color: $link-hover-color;
+ &:hover {
+ --#{$prefix}link-color-rgb: var(--#{$prefix}link-hover-color-rgb);
text-decoration: $link-hover-decoration;
}
}
@@ -200,82 +257,101 @@ a {
// See https://github.com/twbs/bootstrap/issues/19402
a:not([href]):not([class]) {
- color: inherit;
- text-decoration: none;
-
- @include hover() {
+ &,
+ &:hover {
color: inherit;
text-decoration: none;
}
}
-//
// Code
-//
pre,
code,
kbd,
samp {
- font-family: $font-family-monospace;
+ font-family: $font-family-code;
@include font-size(1em); // Correct the odd `em` font sizing in all browsers.
}
+// 1. Remove browser default top margin
+// 2. Reset browser default of `1em` to use `rem`s
+// 3. Don't allow content to break outside
+
pre {
- // Remove browser default top margin
- margin-top: 0;
- // Reset browser default of `1em` to use `rem`s
- margin-bottom: 1rem;
- // Don't allow content to break outside
- overflow: auto;
- // Disable auto-hiding scrollbar in IE & legacy Edge to avoid overlap,
- // making it impossible to interact with the content
- -ms-overflow-style: scrollbar;
+ 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: var(--#{$prefix}code-color);
+ word-wrap: break-word;
+
+ // Streamline the style when inside anchors to avoid broken underline and more
+ a > & {
+ color: inherit;
+ }
+}
+
+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;
+ }
}
-//
// Figures
//
+// Apply a consistent margin strategy (matches our type styles).
figure {
- // Apply a consistent margin strategy (matches our type styles).
margin: 0 0 1rem;
}
-//
// Images and content
-//
-
-img {
- vertical-align: middle;
- border-style: none; // Remove the border on images inside links in IE 10-.
-}
+img,
svg {
- // Workaround for the SVG overflow bug in IE10/11 is still required.
- // See https://github.com/twbs/bootstrap/issues/26878
- overflow: hidden;
vertical-align: middle;
}
-//
// Tables
//
+// Prevent double borders
table {
- border-collapse: collapse; // Prevent double borders
+ caption-side: bottom;
+ border-collapse: collapse;
}
caption {
- padding-top: $table-cell-padding;
- padding-bottom: $table-cell-padding;
+ 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
@@ -288,20 +364,29 @@ th {
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: $label-margin-bottom;
+ display: inline-block; // 1
}
// Remove the default `border-radius` that macOS Chrome adds.
-//
-// Details at https://github.com/twbs/bootstrap/issues/24093
+// See https://github.com/twbs/bootstrap/issues/24093
+
button {
// stylelint-disable-next-line property-disallowed-list
border-radius: 0;
@@ -316,27 +401,24 @@ button:focus:not(:focus-visible) {
outline: 0;
}
+// 1. Remove the margin in Firefox and Safari
+
input,
button,
select,
optgroup,
textarea {
- margin: 0; // Remove the margin in Firefox and Safari
+ margin: 0; // 1
font-family: inherit;
@include font-size(inherit);
line-height: inherit;
}
-button,
-input {
- overflow: visible; // Show the overflow in Edge
-}
-
+// Remove the inheritance of text transform in Firefox
button,
select {
- text-transform: none; // Remove the inheritance of text transform in Firefox
+ text-transform: none;
}
-
// Set the cursor for non-` |