`s.
.nav {
- display: flex;
- flex-wrap: wrap;
- padding-left: 0;
- margin-bottom: 0;
- list-style: none;
+ display: flex;
+ flex-wrap: wrap;
+ padding-left: 0;
+ margin-bottom: 0;
+ list-style: none;
}
.nav-link {
- display: block;
- padding: $nav-link-padding-y $nav-link-padding-x;
- @include font-size($nav-link-font-size);
- font-weight: $nav-link-font-weight;
- color: $nav-link-color;
- text-decoration: if($link-decoration == none, null, none);
- @include transition($nav-link-transition);
-
- &:hover,
- &:focus {
- color: $nav-link-hover-color;
- text-decoration: if($link-hover-decoration == underline, none, null);
- }
-
- // Disabled state lightens text
- &.disabled {
- color: $nav-link-disabled-color;
- pointer-events: none;
- cursor: default;
- }
+ display: block;
+ padding: $nav-link-padding-y $nav-link-padding-x;
+ @include font-size($nav-link-font-size);
+ font-weight: $nav-link-font-weight;
+ color: $nav-link-color;
+ text-decoration: if($link-decoration == none, null, none);
+ @include transition($nav-link-transition);
+
+ display: flex;
+ align-items: center;
+
+ &:hover,
+ &:focus {
+ color: $nav-link-hover-color;
+ text-decoration: if($link-hover-decoration == underline, none, null);
+ }
+
+ // Disabled state lightens text
+ &.disabled {
+ color: $nav-link-disabled-color;
+ pointer-events: none;
+ cursor: default;
+ }
}
//
@@ -39,123 +42,119 @@
//
.nav-tabs {
- border-bottom: $nav-tabs-border-width solid $nav-tabs-border-color;
-
- .nav-link {
- position: relative;
- margin-bottom: -$nav-tabs-border-width;
- background-color: $nav-tabs-link-bg;
- border: $nav-tabs-border-width solid $nav-tabs-border-color;
- @include border-top-radius($nav-tabs-border-radius);
-
- &.active {
- &:before {
- background: #FFFFFF;
- }
- }
-
- &:before {
- content: "";
- position: absolute;
- width: 93%;
- height: 3px;
- border-radius: $border-radius;
- top: 1.5px;
- left: 0;
- right: 0;
- margin: auto;
- background: #C2C9D1;
- z-index: 1;
+ border-bottom: $nav-tabs-border-width solid $nav-tabs-border-color;
+
+ .nav-link {
+ position: relative;
+ margin-bottom: -$nav-tabs-border-width;
+ background-color: $nav-tabs-link-bg;
+ border: $nav-tabs-border-width solid $nav-tabs-border-color;
+ @include border-top-radius($nav-tabs-border-radius);
+
+ &.active {
+ &:before {
+ background: #ffffff;
+ }
+ }
+
+ &:before {
+ content: "";
+ position: absolute;
+ width: 93%;
+ height: 3px;
+ border-radius: $border-radius;
+ top: 1.5px;
+ left: 0;
+ right: 0;
+ margin: auto;
+ background: #c2c9d1;
+ z-index: 1;
+ }
+
+ &:hover,
+ &:focus {
+ border-color: $nav-tabs-link-hover-border-color;
+ // Prevents active .nav-link tab overlapping focus outline of previous/next .nav-link
+ isolation: isolate;
+ }
+
+ &.disabled {
+ color: $nav-link-disabled-color;
+ background-color: transparent;
+ border-color: transparent;
+ }
}
- &:hover,
- &:focus {
- border-color: $nav-tabs-link-hover-border-color;
- //background: $nav-tabs-link-hover-bg;
- // Prevents active .nav-link tab overlapping focus outline of previous/next .nav-link
- isolation: isolate;
+ .nav-link.active,
+ .nav-item.show .nav-link {
+ color: $nav-tabs-link-active-color;
+ background-color: $nav-tabs-link-active-bg;
+ border-color: $nav-tabs-link-active-border-color;
}
- &.disabled {
- color: $nav-link-disabled-color;
- background-color: transparent;
- border-color: transparent;
+ .dropdown-menu {
+ // Make dropdown border overlap tab border
+ margin-top: -$nav-tabs-border-width;
+ // Remove the top rounded corners here since there is a hard edge above the menu
+ @include border-top-radius(0);
}
- }
-
- .nav-link.active,
- .nav-item.show .nav-link {
- color: $nav-tabs-link-active-color;
- background-color: $nav-tabs-link-active-bg;
- border-color: $nav-tabs-link-active-border-color;
- }
-
- .dropdown-menu {
- // Make dropdown border overlap tab border
- margin-top: -$nav-tabs-border-width;
- // Remove the top rounded corners here since there is a hard edge above the menu
- @include border-top-radius(0);
- }
}
-
//
// Pills
//
.nav-pills {
- .nav-link {
- background: none;
- border: 0;
- @include border-radius($nav-pills-border-radius);
- }
-
- .nav-link.active,
- .show > .nav-link {
- color: $nav-pills-link-active-color;
- @include gradient-bg($nav-pills-link-active-bg);
- }
-}
+ .nav-link {
+ background: none;
+ border: 0;
+ @include border-radius($nav-pills-border-radius);
+ }
+ .nav-link.active,
+ .show > .nav-link {
+ color: $nav-pills-link-active-color;
+ @include gradient-bg($nav-pills-link-active-bg);
+ }
+}
//
// Justified variants
//
.nav-fill {
- > .nav-link,
- .nav-item {
- flex: 1 1 auto;
- text-align: center;
- }
+ > .nav-link,
+ .nav-item {
+ flex: 1 1 auto;
+ text-align: center;
+ }
}
.nav-justified {
- > .nav-link,
- .nav-item {
- flex-basis: 0;
- flex-grow: 1;
- text-align: center;
- }
+ > .nav-link,
+ .nav-item {
+ flex-basis: 0;
+ flex-grow: 1;
+ text-align: center;
+ }
}
.nav-fill,
.nav-justified {
- .nav-item .nav-link {
- width: 100%; // Make sure button will grow
- }
+ .nav-item .nav-link {
+ width: 100%; // Make sure button will grow
+ }
}
-
// Tabbable tabs
//
// Hide tabbable panes to start, show them when `.active`
.tab-content {
- > .tab-pane {
- display: none;
- }
- > .active {
- display: block;
- }
+ > .tab-pane {
+ display: none;
+ }
+ > .active {
+ display: block;
+ }
}
diff --git a/src/assets/styles/bootstrap/_navbar.scss b/src/assets/styles/bootstrap/_navbar.scss
index 2ccef11b7..001dfc988 100644
--- a/src/assets/styles/bootstrap/_navbar.scss
+++ b/src/assets/styles/bootstrap/_navbar.scss
@@ -193,13 +193,42 @@
.navbar-toggler {
display: none;
}
+
+ .offcanvas-header {
+ display: none;
+ }
+
+ .offcanvas {
+ position: inherit;
+ bottom: 0;
+ z-index: 1000;
+ flex-grow: 1;
+ visibility: visible !important; // stylelint-disable-line declaration-no-important
+ background-color: transparent;
+ border-right: 0;
+ border-left: 0;
+ @include transition(none);
+ transform: none;
+ }
+ .offcanvas-top,
+ .offcanvas-bottom {
+ height: auto;
+ border-top: 0;
+ border-bottom: 0;
+ }
+
+ .offcanvas-body {
+ display: flex;
+ flex-grow: 0;
+ padding: 0;
+ overflow-y: visible;
+ }
}
}
}
}
// scss-docs-end navbar-expand-loop
-
// Navbar themes
//
// Styles for switching between navbars with light or dark background.
diff --git a/src/assets/styles/bootstrap/_offcanvas.scss b/src/assets/styles/bootstrap/_offcanvas.scss
index 1eeb98966..a089c2a08 100644
--- a/src/assets/styles/bootstrap/_offcanvas.scss
+++ b/src/assets/styles/bootstrap/_offcanvas.scss
@@ -14,14 +14,21 @@
@include transition(transform $offcanvas-transition-duration ease-in-out);
}
+.offcanvas-backdrop {
+ @include overlay-backdrop($zindex-offcanvas-backdrop, $offcanvas-backdrop-bg, $offcanvas-backdrop-opacity);
+}
+
.offcanvas-header {
display: flex;
+ align-items: center;
justify-content: space-between;
padding: $offcanvas-padding-y $offcanvas-padding-x;
.btn-close {
- padding: ($offcanvas-padding-y / 2) ($offcanvas-padding-x / 2);
- margin: ($offcanvas-padding-y / -2) ($offcanvas-padding-x / -2) ($offcanvas-padding-y / -2) auto;
+ padding: ($offcanvas-padding-y * .5) ($offcanvas-padding-x * .5);
+ margin-top: $offcanvas-padding-y * -.5;
+ margin-right: $offcanvas-padding-x * -.5;
+ margin-bottom: $offcanvas-padding-y * -.5;
}
}
@@ -52,6 +59,16 @@
transform: translateX(100%);
}
+.offcanvas-top {
+ top: 0;
+ right: 0;
+ left: 0;
+ height: $offcanvas-vertical-height;
+ max-height: 100%;
+ border-bottom: $offcanvas-border-width solid $offcanvas-border-color;
+ transform: translateY(-100%);
+}
+
.offcanvas-bottom {
right: 0;
left: 0;
@@ -64,14 +81,3 @@
.offcanvas.show {
transform: none;
}
-
-.offcanvas-backdrop::before {
- position: fixed;
- top: 0;
- left: 0;
- z-index: $zindex-offcanvas - 1;
- width: 100vw;
- height: 100vh;
- content: "";
- background-color: $offcanvas-body-backdrop-color;
-}
diff --git a/src/assets/styles/bootstrap/_placeholders.scss b/src/assets/styles/bootstrap/_placeholders.scss
new file mode 100644
index 000000000..2f647cc9b
--- /dev/null
+++ b/src/assets/styles/bootstrap/_placeholders.scss
@@ -0,0 +1,51 @@
+.placeholder {
+ display: inline-block;
+ min-height: 1em;
+ vertical-align: middle;
+ cursor: wait;
+ background-color: currentColor;
+ opacity: $placeholder-opacity-max;
+
+ &.btn::before {
+ display: inline-block;
+ content: "";
+ }
+}
+
+// Sizing
+.placeholder-xs {
+ min-height: .6em;
+}
+
+.placeholder-sm {
+ min-height: .8em;
+}
+
+.placeholder-lg {
+ min-height: 1.2em;
+}
+
+// Animation
+.placeholder-glow {
+ .placeholder {
+ animation: placeholder-glow 2s ease-in-out infinite;
+ }
+}
+
+@keyframes placeholder-glow {
+ 50% {
+ opacity: $placeholder-opacity-min;
+ }
+}
+
+.placeholder-wave {
+ mask-image: linear-gradient(130deg, $black 55%, rgba(0, 0, 0, (1 - $placeholder-opacity-min)) 75%, $black 95%);
+ mask-size: 200% 100%;
+ animation: placeholder-wave 2s linear infinite;
+}
+
+@keyframes placeholder-wave {
+ 100% {
+ mask-position: -200% 0%;
+ }
+}
diff --git a/src/assets/styles/bootstrap/_popover.scss b/src/assets/styles/bootstrap/_popover.scss
index a55555e2e..3b8208e16 100644
--- a/src/assets/styles/bootstrap/_popover.scss
+++ b/src/assets/styles/bootstrap/_popover.scss
@@ -40,13 +40,13 @@
&::before {
bottom: 0;
- border-width: $popover-arrow-height ($popover-arrow-width / 2) 0;
+ border-width: $popover-arrow-height ($popover-arrow-width * .5) 0;
border-top-color: $popover-arrow-outer-color;
}
&::after {
bottom: $popover-border-width;
- border-width: $popover-arrow-height ($popover-arrow-width / 2) 0;
+ border-width: $popover-arrow-height ($popover-arrow-width * .5) 0;
border-top-color: $popover-arrow-color;
}
}
@@ -60,13 +60,13 @@
&::before {
left: 0;
- border-width: ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2) 0;
+ border-width: ($popover-arrow-width * .5) $popover-arrow-height ($popover-arrow-width * .5) 0;
border-right-color: $popover-arrow-outer-color;
}
&::after {
left: $popover-border-width;
- border-width: ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2) 0;
+ border-width: ($popover-arrow-width * .5) $popover-arrow-height ($popover-arrow-width * .5) 0;
border-right-color: $popover-arrow-color;
}
}
@@ -78,13 +78,13 @@
&::before {
top: 0;
- border-width: 0 ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2);
+ border-width: 0 ($popover-arrow-width * .5) $popover-arrow-height ($popover-arrow-width * .5);
border-bottom-color: $popover-arrow-outer-color;
}
&::after {
top: $popover-border-width;
- border-width: 0 ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2);
+ border-width: 0 ($popover-arrow-width * .5) $popover-arrow-height ($popover-arrow-width * .5);
border-bottom-color: $popover-arrow-color;
}
}
@@ -96,7 +96,7 @@
left: 50%;
display: block;
width: $popover-arrow-width;
- margin-left: -$popover-arrow-width / 2;
+ margin-left: -$popover-arrow-width * .5;
content: "";
border-bottom: $popover-border-width solid $popover-header-bg;
}
@@ -110,13 +110,13 @@
&::before {
right: 0;
- border-width: ($popover-arrow-width / 2) 0 ($popover-arrow-width / 2) $popover-arrow-height;
+ border-width: ($popover-arrow-width * .5) 0 ($popover-arrow-width * .5) $popover-arrow-height;
border-left-color: $popover-arrow-outer-color;
}
&::after {
right: $popover-border-width;
- border-width: ($popover-arrow-width / 2) 0 ($popover-arrow-width / 2) $popover-arrow-height;
+ border-width: ($popover-arrow-width * .5) 0 ($popover-arrow-width * .5) $popover-arrow-height;
border-left-color: $popover-arrow-color;
}
}
@@ -144,7 +144,7 @@
@include font-size($font-size-base);
color: $popover-header-color;
background-color: $popover-header-bg;
- border-bottom: $popover-border-width solid shade-color($popover-header-bg, 10%);
+ border-bottom: $popover-border-width solid $popover-border-color;
@include border-top-radius($popover-inner-border-radius);
&:empty {
diff --git a/src/assets/styles/bootstrap/_reboot.scss b/src/assets/styles/bootstrap/_reboot.scss
index 352046988..4345886d4 100644
--- a/src/assets/styles/bootstrap/_reboot.scss
+++ b/src/assets/styles/bootstrap/_reboot.scss
@@ -1,6 +1,5 @@
// stylelint-disable declaration-no-important, selector-no-qualifying-type, property-no-vendor-prefix
-
// Reboot
//
// Normalization of HTML elements, manually forked from Normalize.css to remove
@@ -8,7 +7,6 @@
//
// Normalize is licensed MIT. https://github.com/necolas/normalize.css
-
// Document
//
// Change from `box-sizing: content-box` so that `width` is not affected by `padding` or `border`.
@@ -16,26 +14,27 @@
*,
*::before,
*::after {
- box-sizing: border-box;
+ line-height: normal;
+ box-sizing: border-box;
}
-
// Root
//
// 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;
+ @if $font-size-root != null {
+ font-size: var(--#{$variable-prefix}-root-font-size);
+ }
- @if $enable-smooth-scroll {
- @media (prefers-reduced-motion: no-preference) {
- scroll-behavior: smooth;
+ @if $enable-smooth-scroll {
+ @media (prefers-reduced-motion: no-preference) {
+ scroll-behavior: smooth;
+ }
}
- }
}
-
// Body
//
// 1. Remove the margin in all browsers.
@@ -43,19 +42,20 @@
// 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: $body-text-align;
- background-color: $body-bg; // 2
- -webkit-text-size-adjust: 100%; // 3
- -webkit-tap-highlight-color: rgba($black, 0); // 4
-}
-
+ margin: 0; // 1
+ font-family: var(--#{$variable-prefix}body-font-family);
+ @include font-size(var(--#{$variable-prefix}body-font-size));
+ font-weight: var(--#{$variable-prefix}body-font-weight);
+ line-height: var(--#{$variable-prefix}body-line-height);
+ color: var(--#{$variable-prefix}body-color);
+ text-align: var(--#{$variable-prefix}body-text-align);
+ background-color: var(--#{$variable-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
//
@@ -63,18 +63,17 @@ body {
// 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;
+ margin: $hr-margin-y 0;
+ color: $hr-color; // 1
+ background-color: rgba(black,.2);
+ border: 0;
+ opacity: $hr-opacity;
}
hr:not([size]) {
- height: $hr-height; // 2
+ height: $hr-height; // 2
}
-
// Typography
//
// 1. Remove top margins from headings
@@ -82,57 +81,55 @@ hr:not([size]) {
// margin for easier control within type scales as it avoids margin collapsing.
%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;
+ 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);
+ @extend %heading;
+ @include font-size($h1-font-size);
}
h2 {
- @extend %heading;
- @include font-size($h2-font-size);
+ @extend %heading;
+ @include font-size($h2-font-size);
}
h3 {
- @extend %heading;
- @include font-size($h3-font-size);
+ @extend %heading;
+ @include font-size($h3-font-size);
}
h4 {
- @extend %heading;
- @include font-size($h4-font-size);
+ @extend %heading;
+ @include font-size($h4-font-size);
}
h5 {
- @extend %heading;
- @include font-size($h5-font-size);
+ @extend %heading;
+ @include font-size($h5-font-size);
}
h6 {
- @extend %heading;
- @include font-size($h6-font-size);
+ @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;
+ margin-top: 0;
+ margin-bottom: $paragraph-margin-bottom;
}
-
// Abbreviations
//
// 1. Duplicate behavior to the data-bs-* attribute for our tooltip plugin
@@ -141,89 +138,83 @@ p {
// 4. Prevent the text-decoration to be skipped.
abbr[title],
-abbr[data-bs-original-title] { // 1
- text-decoration: underline dotted; // 2
- cursor: help; // 3
- text-decoration-skip-ink: none; // 4
+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;
+ margin-bottom: 1rem;
+ font-style: normal;
+ line-height: inherit;
}
-
// Lists
ol,
ul {
- padding-left: 2rem;
+ padding-left: 2rem;
}
ol,
ul,
dl {
- margin-top: 0;
- margin-bottom: 1rem;
+ margin-top: 0;
+ margin-bottom: 1rem;
}
ol ol,
ul ul,
ol ul,
ul ol {
- margin-bottom: 0;
+ margin-bottom: 0;
}
dt {
- font-weight: $dt-font-weight;
+ font-weight: $dt-font-weight;
}
// 1. Undo browser default
dd {
- margin-bottom: .5rem;
- margin-left: 0; // 1
+ margin-bottom: 0.5rem;
+ margin-left: 0; // 1
}
-
// Blockquote
blockquote {
- margin: 0 0 1rem;
+ margin: 0 0 1rem;
}
-
// Strong
//
// Add the correct font weight in Chrome, Edge, and Safari
b,
strong {
- font-weight: $font-weight-bolder;
+ font-weight: $font-weight-bolder;
}
-
// Small
//
// Add the correct font size in all browsers
small {
- @include font-size($small-font-size);
+ @include font-size($small-font-size);
}
-
// Mark
mark {
- padding: $mark-padding;
- background-color: $mark-bg;
+ padding: $mark-padding;
+ background-color: $mark-bg;
}
-
// Sub and Sup
//
// Prevent `sub` and `sup` elements from affecting the line height in
@@ -231,26 +222,29 @@ mark {
sub,
sup {
- position: relative;
- @include font-size($sub-sup-font-size);
- line-height: 0;
- vertical-align: baseline;
+ position: relative;
+ @include font-size($sub-sup-font-size);
+ line-height: 0;
+ vertical-align: baseline;
}
-sub { bottom: -.25em; }
-sup { top: -.5em; }
-
+sub {
+ bottom: -0.25em;
+}
+sup {
+ top: -0.5em;
+}
// Links
a {
- color: $link-color;
- text-decoration: $link-decoration;
+ color: $link-color;
+ text-decoration: $link-decoration;
- &:hover {
- color: $link-hover-color;
- text-decoration: $link-hover-decoration;
- }
+ &:hover {
+ color: $link-hover-color;
+ text-decoration: $link-hover-decoration;
+ }
}
// And undo these styles for placeholder links/named anchors (without href).
@@ -259,24 +253,25 @@ a {
// See https://github.com/twbs/bootstrap/issues/19402
a:not([href]):not([class]) {
- &,
- &:hover {
- color: inherit;
- text-decoration: none;
- }
+ &,
+ &:hover {
+ color: inherit;
+ text-decoration: none;
+ }
}
-
// Code
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;
+ 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
@@ -284,78 +279,75 @@ samp {
// 3. Don't allow content to break outside
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;
- }
+ 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;
+ @include font-size($code-font-size);
+ color: $code-color;
+ word-wrap: break-word;
- // Streamline the style when inside anchors to avoid broken underline and more
- a > & {
- color: inherit;
- }
+ // 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;
- }
+ 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 {
- margin: 0 0 1rem;
+ margin: 0 0 1rem;
}
-
// Images and content
img,
svg {
- vertical-align: middle;
+ vertical-align: middle;
}
-
// Tables
//
// Prevent double borders
table {
- caption-side: bottom;
- border-collapse: collapse;
+ caption-side: bottom;
+ border-collapse: collapse;
}
caption {
- padding-top: $table-cell-padding-y;
- padding-bottom: $table-cell-padding-y;
- color: $table-caption-color;
- text-align: left;
+ padding-top: $table-cell-padding-y;
+ padding-bottom: $table-cell-padding-y;
+ color: $table-caption-color;
+ text-align: left;
}
// 1. Removes font-weight bold by inheriting
@@ -363,9 +355,9 @@ caption {
// 3. Fix alignment for Safari
th {
- font-weight: $table-th-font-weight; // 1
- text-align: inherit; // 2
- text-align: -webkit-match-parent; // 3
+ font-weight: $table-th-font-weight; // 1
+ text-align: inherit; // 2
+ text-align: -webkit-match-parent; // 3
}
thead,
@@ -374,26 +366,25 @@ tfoot,
tr,
td,
th {
- border-color: inherit;
- border-style: solid;
- border-width: 0;
+ border-color: inherit;
+ border-style: solid;
+ border-width: 0;
}
-
// Forms
//
// 1. Allow labels to use `margin` for spacing.
label {
- display: inline-block; // 1
+ display: inline-block; // 1
}
// 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;
+ // stylelint-disable-next-line property-disallowed-list
+ border-radius: 0;
}
// Explicitly remove focus outline in Chromium when it shouldn't be
@@ -402,7 +393,7 @@ button {
// confused and applies its very visible two-tone outline anyway.
button:focus:not(:focus-visible) {
- outline: 0;
+ outline: 0;
}
// 1. Remove the margin in Firefox and Safari
@@ -412,40 +403,40 @@ button,
select,
optgroup,
textarea {
- margin: 0; // 1
- font-family: inherit;
- @include font-size(inherit);
- line-height: inherit;
+ margin: 0; // 1
+ font-family: inherit;
+ @include font-size(inherit);
+ line-height: inherit;
}
// Remove the inheritance of text transform in Firefox
button,
select {
- text-transform: none;
+ text-transform: none;
}
// Set the cursor for non-`