`s.
.nav {
+ // scss-docs-start nav-css-vars
+ --#{$prefix}nav-link-padding-x: #{$nav-link-padding-x};
+ --#{$prefix}nav-link-padding-y: #{$nav-link-padding-y};
+ @include rfs($nav-link-font-size, --#{$prefix}nav-link-font-size);
+ --#{$prefix}nav-link-font-weight: #{$nav-link-font-weight};
+ --#{$prefix}nav-link-color: #{$nav-link-color};
+ --#{$prefix}nav-link-hover-color: #{$nav-link-hover-color};
+ --#{$prefix}nav-link-disabled-color: #{$nav-link-disabled-color};
+ // scss-docs-end nav-css-vars
+
display: flex;
flex-wrap: wrap;
padding-left: 0;
@@ -13,15 +23,29 @@
.nav-link {
display: block;
- padding: $nav-link-padding-y $nav-link-padding-x;
+ padding: var(--#{$prefix}nav-link-padding-y) var(--#{$prefix}nav-link-padding-x);
+ @include font-size(var(--#{$prefix}nav-link-font-size));
+ font-weight: var(--#{$prefix}nav-link-font-weight);
+ color: var(--#{$prefix}nav-link-color);
+ text-decoration: if($link-decoration == none, null, none);
+ background: none;
+ border: 0;
+ @include transition($nav-link-transition);
+
+ &:hover,
+ &:focus {
+ color: var(--#{$prefix}nav-link-hover-color);
+ text-decoration: if($link-hover-decoration == underline, none, null);
+ }
- @include hover-focus() {
- text-decoration: none;
+ &:focus-visible {
+ outline: 0;
+ box-shadow: $nav-link-focus-box-shadow;
}
// Disabled state lightens text
&.disabled {
- color: $nav-link-disabled-color;
+ color: var(--#{$prefix}nav-link-disabled-color);
pointer-events: none;
cursor: default;
}
@@ -32,22 +56,33 @@
//
.nav-tabs {
- border-bottom: $nav-tabs-border-width solid $nav-tabs-border-color;
-
- .nav-item {
- margin-bottom: -$nav-tabs-border-width;
- }
+ // scss-docs-start nav-tabs-css-vars
+ --#{$prefix}nav-tabs-border-width: #{$nav-tabs-border-width};
+ --#{$prefix}nav-tabs-border-color: #{$nav-tabs-border-color};
+ --#{$prefix}nav-tabs-border-radius: #{$nav-tabs-border-radius};
+ --#{$prefix}nav-tabs-link-hover-border-color: #{$nav-tabs-link-hover-border-color};
+ --#{$prefix}nav-tabs-link-active-color: #{$nav-tabs-link-active-color};
+ --#{$prefix}nav-tabs-link-active-bg: #{$nav-tabs-link-active-bg};
+ --#{$prefix}nav-tabs-link-active-border-color: #{$nav-tabs-link-active-border-color};
+ // scss-docs-end nav-tabs-css-vars
+
+ border-bottom: var(--#{$prefix}nav-tabs-border-width) solid var(--#{$prefix}nav-tabs-border-color);
.nav-link {
- border: $nav-tabs-border-width solid transparent;
- @include border-top-radius($nav-tabs-border-radius);
-
- @include hover-focus() {
- border-color: $nav-tabs-link-hover-border-color;
+ margin-bottom: calc(-1 * var(--#{$prefix}nav-tabs-border-width)); // stylelint-disable-line function-disallowed-list
+ border: var(--#{$prefix}nav-tabs-border-width) solid transparent;
+ @include border-top-radius(var(--#{$prefix}nav-tabs-border-radius));
+
+ &:hover,
+ &:focus {
+ // Prevents active .nav-link tab overlapping focus outline of previous/next .nav-link
+ isolation: isolate;
+ border-color: var(--#{$prefix}nav-tabs-link-hover-border-color);
}
- &.disabled {
- color: $nav-link-disabled-color;
+ &.disabled,
+ &:disabled {
+ color: var(--#{$prefix}nav-link-disabled-color);
background-color: transparent;
border-color: transparent;
}
@@ -55,14 +90,14 @@
.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;
+ color: var(--#{$prefix}nav-tabs-link-active-color);
+ background-color: var(--#{$prefix}nav-tabs-link-active-bg);
+ border-color: var(--#{$prefix}nav-tabs-link-active-border-color);
}
.dropdown-menu {
// Make dropdown border overlap tab border
- margin-top: -$nav-tabs-border-width;
+ margin-top: calc(-1 * var(--#{$prefix}nav-tabs-border-width)); // stylelint-disable-line function-disallowed-list
// Remove the top rounded corners here since there is a hard edge above the menu
@include border-top-radius(0);
}
@@ -74,14 +109,59 @@
//
.nav-pills {
+ // scss-docs-start nav-pills-css-vars
+ --#{$prefix}nav-pills-border-radius: #{$nav-pills-border-radius};
+ --#{$prefix}nav-pills-link-active-color: #{$nav-pills-link-active-color};
+ --#{$prefix}nav-pills-link-active-bg: #{$nav-pills-link-active-bg};
+ // scss-docs-end nav-pills-css-vars
+
.nav-link {
- @include border-radius($nav-pills-border-radius);
+ @include border-radius(var(--#{$prefix}nav-pills-border-radius));
+
+ &:disabled {
+ color: var(--#{$prefix}nav-link-disabled-color);
+ background-color: transparent;
+ border-color: transparent;
+ }
}
.nav-link.active,
.show > .nav-link {
- color: $nav-pills-link-active-color;
- background-color: $nav-pills-link-active-bg;
+ color: var(--#{$prefix}nav-pills-link-active-color);
+ @include gradient-bg(var(--#{$prefix}nav-pills-link-active-bg));
+ }
+}
+
+
+//
+// Underline
+//
+
+.nav-underline {
+ // scss-docs-start nav-underline-css-vars
+ --#{$prefix}nav-underline-gap: #{$nav-underline-gap};
+ --#{$prefix}nav-underline-border-width: #{$nav-underline-border-width};
+ --#{$prefix}nav-underline-link-active-color: #{$nav-underline-link-active-color};
+ // scss-docs-end nav-underline-css-vars
+
+ gap: var(--#{$prefix}nav-underline-gap);
+
+ .nav-link {
+ padding-right: 0;
+ padding-left: 0;
+ border-bottom: var(--#{$prefix}nav-underline-border-width) solid transparent;
+
+ &:hover,
+ &:focus {
+ border-bottom-color: currentcolor;
+ }
+ }
+
+ .nav-link.active,
+ .show > .nav-link {
+ font-weight: $font-weight-bold;
+ color: var(--#{$prefix}nav-underline-link-active-color);
+ border-bottom-color: currentcolor;
}
}
@@ -91,6 +171,7 @@
//
.nav-fill {
+ > .nav-link,
.nav-item {
flex: 1 1 auto;
text-align: center;
@@ -98,6 +179,7 @@
}
.nav-justified {
+ > .nav-link,
.nav-item {
flex-basis: 0;
flex-grow: 1;
@@ -105,6 +187,13 @@
}
}
+.nav-fill,
+.nav-justified {
+ .nav-item .nav-link {
+ width: 100%; // Make sure button will grow
+ }
+}
+
// Tabbable tabs
//
diff --git a/assets/scss/bootstrap/_navbar.scss b/assets/scss/bootstrap/_navbar.scss
index 5f10a62f..71619382 100644
--- a/assets/scss/bootstrap/_navbar.scss
+++ b/assets/scss/bootstrap/_navbar.scss
@@ -1,39 +1,52 @@
-// Contents
-//
-// Navbar
-// Navbar brand
-// Navbar nav
-// Navbar text
-// Navbar divider
-// Responsive navbar
-// Navbar position
-// Navbar themes
-
-
// Navbar
//
// Provide a static navbar from which we expand to create full-width, fixed, and
// other navbar variations.
.navbar {
+ // scss-docs-start navbar-css-vars
+ --#{$prefix}navbar-padding-x: #{if($navbar-padding-x == null, 0, $navbar-padding-x)};
+ --#{$prefix}navbar-padding-y: #{$navbar-padding-y};
+ --#{$prefix}navbar-color: #{$navbar-light-color};
+ --#{$prefix}navbar-hover-color: #{$navbar-light-hover-color};
+ --#{$prefix}navbar-disabled-color: #{$navbar-light-disabled-color};
+ --#{$prefix}navbar-active-color: #{$navbar-light-active-color};
+ --#{$prefix}navbar-brand-padding-y: #{$navbar-brand-padding-y};
+ --#{$prefix}navbar-brand-margin-end: #{$navbar-brand-margin-end};
+ --#{$prefix}navbar-brand-font-size: #{$navbar-brand-font-size};
+ --#{$prefix}navbar-brand-color: #{$navbar-light-brand-color};
+ --#{$prefix}navbar-brand-hover-color: #{$navbar-light-brand-hover-color};
+ --#{$prefix}navbar-nav-link-padding-x: #{$navbar-nav-link-padding-x};
+ --#{$prefix}navbar-toggler-padding-y: #{$navbar-toggler-padding-y};
+ --#{$prefix}navbar-toggler-padding-x: #{$navbar-toggler-padding-x};
+ --#{$prefix}navbar-toggler-font-size: #{$navbar-toggler-font-size};
+ --#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-light-toggler-icon-bg)};
+ --#{$prefix}navbar-toggler-border-color: #{$navbar-light-toggler-border-color};
+ --#{$prefix}navbar-toggler-border-radius: #{$navbar-toggler-border-radius};
+ --#{$prefix}navbar-toggler-focus-width: #{$navbar-toggler-focus-width};
+ --#{$prefix}navbar-toggler-transition: #{$navbar-toggler-transition};
+ // scss-docs-end navbar-css-vars
+
position: relative;
display: flex;
flex-wrap: wrap; // allow us to do the line break for collapsing content
align-items: center;
justify-content: space-between; // space out brand from logo
- padding: $navbar-padding-y $navbar-padding-x;
+ padding: var(--#{$prefix}navbar-padding-y) var(--#{$prefix}navbar-padding-x);
+ @include gradient-bg();
// Because flex properties aren't inherited, we need to redeclare these first
// few properties so that content nested within behave properly.
+ // The `flex-wrap` property is inherited to simplify the expanded navbars
%container-flex-properties {
display: flex;
- flex-wrap: wrap;
+ flex-wrap: inherit;
align-items: center;
justify-content: space-between;
}
- .container,
- .container-fluid {
+ > .container,
+ > .container-fluid {
@extend %container-flex-properties;
}
@@ -50,16 +63,18 @@
// Used for brand, project, or site names.
.navbar-brand {
- display: inline-block;
- padding-top: $navbar-brand-padding-y;
- padding-bottom: $navbar-brand-padding-y;
- margin-right: $navbar-padding-x;
- @include font-size($navbar-brand-font-size);
- line-height: inherit;
+ padding-top: var(--#{$prefix}navbar-brand-padding-y);
+ padding-bottom: var(--#{$prefix}navbar-brand-padding-y);
+ margin-right: var(--#{$prefix}navbar-brand-margin-end);
+ @include font-size(var(--#{$prefix}navbar-brand-font-size));
+ color: var(--#{$prefix}navbar-brand-color);
+ text-decoration: if($link-decoration == none, null, none);
white-space: nowrap;
- @include hover-focus() {
- text-decoration: none;
+ &:hover,
+ &:focus {
+ color: var(--#{$prefix}navbar-brand-hover-color);
+ text-decoration: if($link-hover-decoration == underline, none, null);
}
}
@@ -69,6 +84,16 @@
// Custom navbar navigation (doesn't require `.nav`, but does make use of `.nav-link`).
.navbar-nav {
+ // scss-docs-start navbar-nav-css-vars
+ --#{$prefix}nav-link-padding-x: 0;
+ --#{$prefix}nav-link-padding-y: #{$nav-link-padding-y};
+ @include rfs($nav-link-font-size, --#{$prefix}nav-link-font-size);
+ --#{$prefix}nav-link-font-weight: #{$nav-link-font-weight};
+ --#{$prefix}nav-link-color: var(--#{$prefix}navbar-color);
+ --#{$prefix}nav-link-hover-color: var(--#{$prefix}navbar-hover-color);
+ --#{$prefix}nav-link-disabled-color: var(--#{$prefix}navbar-disabled-color);
+ // scss-docs-end navbar-nav-css-vars
+
display: flex;
flex-direction: column; // cannot use `inherit` to get the `.navbar`s value
padding-left: 0;
@@ -76,13 +101,14 @@
list-style: none;
.nav-link {
- padding-right: 0;
- padding-left: 0;
+ &.active,
+ &.show {
+ color: var(--#{$prefix}navbar-active-color);
+ }
}
.dropdown-menu {
position: static;
- float: none;
}
}
@@ -92,9 +118,15 @@
//
.navbar-text {
- display: inline-block;
padding-top: $nav-link-padding-y;
padding-bottom: $nav-link-padding-y;
+ color: var(--#{$prefix}navbar-color);
+
+ a,
+ a:hover,
+ a:focus {
+ color: var(--#{$prefix}navbar-active-color);
+ }
}
@@ -116,16 +148,24 @@
// Button for toggling the navbar when in its collapsed state
.navbar-toggler {
- padding: $navbar-toggler-padding-y $navbar-toggler-padding-x;
- @include font-size($navbar-toggler-font-size);
+ padding: var(--#{$prefix}navbar-toggler-padding-y) var(--#{$prefix}navbar-toggler-padding-x);
+ @include font-size(var(--#{$prefix}navbar-toggler-font-size));
line-height: 1;
+ color: var(--#{$prefix}navbar-color);
background-color: transparent; // remove default button style
- border: $border-width solid transparent; // remove default button style
- @include border-radius($navbar-toggler-border-radius);
+ border: var(--#{$prefix}border-width) solid var(--#{$prefix}navbar-toggler-border-color); // remove default button style
+ @include border-radius(var(--#{$prefix}navbar-toggler-border-radius));
+ @include transition(var(--#{$prefix}navbar-toggler-transition));
- @include hover-focus() {
+ &:hover {
text-decoration: none;
}
+
+ &:focus {
+ text-decoration: none;
+ outline: 0;
+ box-shadow: 0 0 0 var(--#{$prefix}navbar-toggler-focus-width);
+ }
}
// Keep as a separate element so folks can easily override it with another icon
@@ -135,11 +175,18 @@
width: 1.5em;
height: 1.5em;
vertical-align: middle;
- content: "";
- background: no-repeat center center;
- background-size: 100% 100%;
+ background-image: var(--#{$prefix}navbar-toggler-icon-bg);
+ background-repeat: no-repeat;
+ background-position: center;
+ background-size: 100%;
}
+.navbar-nav-scroll {
+ max-height: var(--#{$prefix}scroll-height, 75vh);
+ overflow-y: auto;
+}
+
+// scss-docs-start navbar-expand-loop
// Generate series of `.navbar-expand-*` responsive classes for configuring
// where your navbar collapses.
.navbar-expand {
@@ -147,27 +194,10 @@
$next: breakpoint-next($breakpoint, $grid-breakpoints);
$infix: breakpoint-infix($next, $grid-breakpoints);
+ // stylelint-disable-next-line scss/selector-no-union-class-name
&#{$infix} {
- @include media-breakpoint-down($breakpoint) {
- %container-navbar-expand-#{$breakpoint} {
- padding-right: 0;
- padding-left: 0;
- }
-
- > .container,
- > .container-fluid {
- @extend %container-navbar-expand-#{$breakpoint};
- }
-
- @each $size, $container-max-width in $container-max-widths {
- > .container#{breakpoint-infix($size, $container-max-widths)} {
- @extend %container-navbar-expand-#{$breakpoint};
- }
- }
- }
-
@include media-breakpoint-up($next) {
- flex-flow: row nowrap;
+ flex-wrap: nowrap;
justify-content: flex-start;
.navbar-nav {
@@ -178,147 +208,82 @@
}
.nav-link {
- padding-right: $navbar-nav-link-padding-x;
- padding-left: $navbar-nav-link-padding-x;
+ padding-right: var(--#{$prefix}navbar-nav-link-padding-x);
+ padding-left: var(--#{$prefix}navbar-nav-link-padding-x);
}
}
- // For nesting containers, have to redeclare for alignment purposes
- %container-nesting-#{$breakpoint} {
- flex-wrap: nowrap;
- }
-
- > .container,
- > .container-fluid {
- @extend %container-nesting-#{$breakpoint};
- }
-
- @each $size, $container-max-width in $container-max-widths {
- > .container#{breakpoint-infix($size, $container-max-widths)} {
- @extend %container-nesting-#{$breakpoint};
- }
+ .navbar-nav-scroll {
+ overflow: visible;
}
.navbar-collapse {
display: flex !important; // stylelint-disable-line declaration-no-important
-
- // Changes flex-bases to auto because of an IE10 bug
flex-basis: auto;
}
.navbar-toggler {
display: none;
}
+
+ .offcanvas {
+ // stylelint-disable declaration-no-important
+ position: static;
+ z-index: auto;
+ flex-grow: 1;
+ width: auto !important;
+ height: auto !important;
+ visibility: visible !important;
+ background-color: transparent !important;
+ border: 0 !important;
+ transform: none !important;
+ @include box-shadow(none);
+ @include transition(none);
+ // stylelint-enable declaration-no-important
+
+ .offcanvas-header {
+ display: none;
+ }
+
+ .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.
-// Dark links against a light background
.navbar-light {
- .navbar-brand {
- color: $navbar-light-brand-color;
-
- @include hover-focus() {
- color: $navbar-light-brand-hover-color;
- }
- }
-
- .navbar-nav {
- .nav-link {
- color: $navbar-light-color;
-
- @include hover-focus() {
- color: $navbar-light-hover-color;
- }
-
- &.disabled {
- color: $navbar-light-disabled-color;
- }
- }
-
- .show > .nav-link,
- .active > .nav-link,
- .nav-link.show,
- .nav-link.active {
- color: $navbar-light-active-color;
- }
- }
-
- .navbar-toggler {
- color: $navbar-light-color;
- border-color: $navbar-light-toggler-border-color;
- }
-
- .navbar-toggler-icon {
- background-image: escape-svg($navbar-light-toggler-icon-bg);
- }
-
- .navbar-text {
- color: $navbar-light-color;
- a {
- color: $navbar-light-active-color;
-
- @include hover-focus() {
- color: $navbar-light-active-color;
- }
- }
- }
+ @include deprecate("`.navbar-light`", "v5.2.0", "v6.0.0", true);
}
-// White links against a dark background
-.navbar-dark {
- .navbar-brand {
- color: $navbar-dark-brand-color;
-
- @include hover-focus() {
- color: $navbar-dark-brand-hover-color;
- }
- }
-
- .navbar-nav {
- .nav-link {
- color: $navbar-dark-color;
-
- @include hover-focus() {
- color: $navbar-dark-hover-color;
- }
-
- &.disabled {
- color: $navbar-dark-disabled-color;
- }
- }
-
- .show > .nav-link,
- .active > .nav-link,
- .nav-link.show,
- .nav-link.active {
- color: $navbar-dark-active-color;
- }
- }
-
- .navbar-toggler {
- color: $navbar-dark-color;
- border-color: $navbar-dark-toggler-border-color;
- }
-
- .navbar-toggler-icon {
- background-image: escape-svg($navbar-dark-toggler-icon-bg);
- }
-
- .navbar-text {
- color: $navbar-dark-color;
- a {
- color: $navbar-dark-active-color;
+.navbar-dark,
+.navbar[data-bs-theme="dark"] {
+ // scss-docs-start navbar-dark-css-vars
+ --#{$prefix}navbar-color: #{$navbar-dark-color};
+ --#{$prefix}navbar-hover-color: #{$navbar-dark-hover-color};
+ --#{$prefix}navbar-disabled-color: #{$navbar-dark-disabled-color};
+ --#{$prefix}navbar-active-color: #{$navbar-dark-active-color};
+ --#{$prefix}navbar-brand-color: #{$navbar-dark-brand-color};
+ --#{$prefix}navbar-brand-hover-color: #{$navbar-dark-brand-hover-color};
+ --#{$prefix}navbar-toggler-border-color: #{$navbar-dark-toggler-border-color};
+ --#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-dark-toggler-icon-bg)};
+ // scss-docs-end navbar-dark-css-vars
+}
- @include hover-focus() {
- color: $navbar-dark-active-color;
- }
+@if $enable-dark-mode {
+ @include color-mode(dark) {
+ .navbar-toggler-icon {
+ --#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-dark-toggler-icon-bg)};
}
}
}
diff --git a/assets/scss/bootstrap/_offcanvas.scss b/assets/scss/bootstrap/_offcanvas.scss
new file mode 100644
index 00000000..04e3ce64
--- /dev/null
+++ b/assets/scss/bootstrap/_offcanvas.scss
@@ -0,0 +1,146 @@
+// stylelint-disable function-disallowed-list
+
+%offcanvas-css-vars {
+ // scss-docs-start offcanvas-css-vars
+ --#{$prefix}offcanvas-zindex: #{$zindex-offcanvas};
+ --#{$prefix}offcanvas-width: #{$offcanvas-horizontal-width};
+ --#{$prefix}offcanvas-height: #{$offcanvas-vertical-height};
+ --#{$prefix}offcanvas-padding-x: #{$offcanvas-padding-x};
+ --#{$prefix}offcanvas-padding-y: #{$offcanvas-padding-y};
+ --#{$prefix}offcanvas-color: #{$offcanvas-color};
+ --#{$prefix}offcanvas-bg: #{$offcanvas-bg-color};
+ --#{$prefix}offcanvas-border-width: #{$offcanvas-border-width};
+ --#{$prefix}offcanvas-border-color: #{$offcanvas-border-color};
+ --#{$prefix}offcanvas-box-shadow: #{$offcanvas-box-shadow};
+ --#{$prefix}offcanvas-transition: #{transform $offcanvas-transition-duration ease-in-out};
+ --#{$prefix}offcanvas-title-line-height: #{$offcanvas-title-line-height};
+ // scss-docs-end offcanvas-css-vars
+}
+
+@each $breakpoint in map-keys($grid-breakpoints) {
+ $next: breakpoint-next($breakpoint, $grid-breakpoints);
+ $infix: breakpoint-infix($next, $grid-breakpoints);
+
+ .offcanvas#{$infix} {
+ @extend %offcanvas-css-vars;
+ }
+}
+
+@each $breakpoint in map-keys($grid-breakpoints) {
+ $next: breakpoint-next($breakpoint, $grid-breakpoints);
+ $infix: breakpoint-infix($next, $grid-breakpoints);
+
+ .offcanvas#{$infix} {
+ @include media-breakpoint-down($next) {
+ position: fixed;
+ bottom: 0;
+ z-index: var(--#{$prefix}offcanvas-zindex);
+ display: flex;
+ flex-direction: column;
+ max-width: 100%;
+ color: var(--#{$prefix}offcanvas-color);
+ visibility: hidden;
+ background-color: var(--#{$prefix}offcanvas-bg);
+ background-clip: padding-box;
+ outline: 0;
+ @include box-shadow(var(--#{$prefix}offcanvas-box-shadow));
+ @include transition(var(--#{$prefix}offcanvas-transition));
+
+ &.offcanvas-start {
+ top: 0;
+ left: 0;
+ width: var(--#{$prefix}offcanvas-width);
+ border-right: var(--#{$prefix}offcanvas-border-width) solid var(--#{$prefix}offcanvas-border-color);
+ transform: translateX(-100%);
+ }
+
+ &.offcanvas-end {
+ top: 0;
+ right: 0;
+ width: var(--#{$prefix}offcanvas-width);
+ border-left: var(--#{$prefix}offcanvas-border-width) solid var(--#{$prefix}offcanvas-border-color);
+ transform: translateX(100%);
+ }
+
+ &.offcanvas-top {
+ top: 0;
+ right: 0;
+ left: 0;
+ height: var(--#{$prefix}offcanvas-height);
+ max-height: 100%;
+ border-bottom: var(--#{$prefix}offcanvas-border-width) solid var(--#{$prefix}offcanvas-border-color);
+ transform: translateY(-100%);
+ }
+
+ &.offcanvas-bottom {
+ right: 0;
+ left: 0;
+ height: var(--#{$prefix}offcanvas-height);
+ max-height: 100%;
+ border-top: var(--#{$prefix}offcanvas-border-width) solid var(--#{$prefix}offcanvas-border-color);
+ transform: translateY(100%);
+ }
+
+ &.showing,
+ &.show:not(.hiding) {
+ transform: none;
+ }
+
+ &.showing,
+ &.hiding,
+ &.show {
+ visibility: visible;
+ }
+ }
+
+ @if not ($infix == "") {
+ @include media-breakpoint-up($next) {
+ --#{$prefix}offcanvas-height: auto;
+ --#{$prefix}offcanvas-border-width: 0;
+ background-color: transparent !important; // stylelint-disable-line declaration-no-important
+
+ .offcanvas-header {
+ display: none;
+ }
+
+ .offcanvas-body {
+ display: flex;
+ flex-grow: 0;
+ padding: 0;
+ overflow-y: visible;
+ // Reset `background-color` in case `.bg-*` classes are used in offcanvas
+ background-color: transparent !important; // stylelint-disable-line declaration-no-important
+ }
+ }
+ }
+ }
+}
+
+.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: var(--#{$prefix}offcanvas-padding-y) var(--#{$prefix}offcanvas-padding-x);
+
+ .btn-close {
+ padding: calc(var(--#{$prefix}offcanvas-padding-y) * .5) calc(var(--#{$prefix}offcanvas-padding-x) * .5);
+ margin-top: calc(-.5 * var(--#{$prefix}offcanvas-padding-y));
+ margin-right: calc(-.5 * var(--#{$prefix}offcanvas-padding-x));
+ margin-bottom: calc(-.5 * var(--#{$prefix}offcanvas-padding-y));
+ }
+}
+
+.offcanvas-title {
+ margin-bottom: 0;
+ line-height: var(--#{$prefix}offcanvas-title-line-height);
+}
+
+.offcanvas-body {
+ flex-grow: 1;
+ padding: var(--#{$prefix}offcanvas-padding-y) var(--#{$prefix}offcanvas-padding-x);
+ overflow-y: auto;
+}
diff --git a/assets/scss/bootstrap/_pagination.scss b/assets/scss/bootstrap/_pagination.scss
index 953a35a7..f275a62e 100644
--- a/assets/scss/bootstrap/_pagination.scss
+++ b/assets/scss/bootstrap/_pagination.scss
@@ -1,61 +1,97 @@
.pagination {
+ // scss-docs-start pagination-css-vars
+ --#{$prefix}pagination-padding-x: #{$pagination-padding-x};
+ --#{$prefix}pagination-padding-y: #{$pagination-padding-y};
+ @include rfs($pagination-font-size, --#{$prefix}pagination-font-size);
+ --#{$prefix}pagination-color: #{$pagination-color};
+ --#{$prefix}pagination-bg: #{$pagination-bg};
+ --#{$prefix}pagination-border-width: #{$pagination-border-width};
+ --#{$prefix}pagination-border-color: #{$pagination-border-color};
+ --#{$prefix}pagination-border-radius: #{$pagination-border-radius};
+ --#{$prefix}pagination-hover-color: #{$pagination-hover-color};
+ --#{$prefix}pagination-hover-bg: #{$pagination-hover-bg};
+ --#{$prefix}pagination-hover-border-color: #{$pagination-hover-border-color};
+ --#{$prefix}pagination-focus-color: #{$pagination-focus-color};
+ --#{$prefix}pagination-focus-bg: #{$pagination-focus-bg};
+ --#{$prefix}pagination-focus-box-shadow: #{$pagination-focus-box-shadow};
+ --#{$prefix}pagination-active-color: #{$pagination-active-color};
+ --#{$prefix}pagination-active-bg: #{$pagination-active-bg};
+ --#{$prefix}pagination-active-border-color: #{$pagination-active-border-color};
+ --#{$prefix}pagination-disabled-color: #{$pagination-disabled-color};
+ --#{$prefix}pagination-disabled-bg: #{$pagination-disabled-bg};
+ --#{$prefix}pagination-disabled-border-color: #{$pagination-disabled-border-color};
+ // scss-docs-end pagination-css-vars
+
display: flex;
@include list-unstyled();
- @include border-radius();
}
.page-link {
position: relative;
display: block;
- padding: $pagination-padding-y $pagination-padding-x;
- margin-left: -$pagination-border-width;
- line-height: $pagination-line-height;
- color: $pagination-color;
- background-color: $pagination-bg;
- border: $pagination-border-width solid $pagination-border-color;
+ padding: var(--#{$prefix}pagination-padding-y) var(--#{$prefix}pagination-padding-x);
+ @include font-size(var(--#{$prefix}pagination-font-size));
+ color: var(--#{$prefix}pagination-color);
+ text-decoration: if($link-decoration == none, null, none);
+ background-color: var(--#{$prefix}pagination-bg);
+ border: var(--#{$prefix}pagination-border-width) solid var(--#{$prefix}pagination-border-color);
+ @include transition($pagination-transition);
&:hover {
z-index: 2;
- color: $pagination-hover-color;
- text-decoration: none;
- background-color: $pagination-hover-bg;
- border-color: $pagination-hover-border-color;
+ color: var(--#{$prefix}pagination-hover-color);
+ text-decoration: if($link-hover-decoration == underline, none, null);
+ background-color: var(--#{$prefix}pagination-hover-bg);
+ border-color: var(--#{$prefix}pagination-hover-border-color);
}
&:focus {
z-index: 3;
+ color: var(--#{$prefix}pagination-focus-color);
+ background-color: var(--#{$prefix}pagination-focus-bg);
outline: $pagination-focus-outline;
- box-shadow: $pagination-focus-box-shadow;
+ box-shadow: var(--#{$prefix}pagination-focus-box-shadow);
}
-}
-.page-item {
- &:first-child {
- .page-link {
- margin-left: 0;
- @include border-left-radius($border-radius);
- }
+ &.active,
+ .active > & {
+ z-index: 3;
+ color: var(--#{$prefix}pagination-active-color);
+ @include gradient-bg(var(--#{$prefix}pagination-active-bg));
+ border-color: var(--#{$prefix}pagination-active-border-color);
}
- &:last-child {
- .page-link {
- @include border-right-radius($border-radius);
- }
+
+ &.disabled,
+ .disabled > & {
+ color: var(--#{$prefix}pagination-disabled-color);
+ pointer-events: none;
+ background-color: var(--#{$prefix}pagination-disabled-bg);
+ border-color: var(--#{$prefix}pagination-disabled-border-color);
}
+}
- &.active .page-link {
- z-index: 3;
- color: $pagination-active-color;
- background-color: $pagination-active-bg;
- border-color: $pagination-active-border-color;
+.page-item {
+ &:not(:first-child) .page-link {
+ margin-left: $pagination-margin-start;
}
- &.disabled .page-link {
- color: $pagination-disabled-color;
- pointer-events: none;
- // Opinionated: remove the "hand" cursor set previously for .page-link
- cursor: auto;
- background-color: $pagination-disabled-bg;
- border-color: $pagination-disabled-border-color;
+ @if $pagination-margin-start == calc(#{$pagination-border-width} * -1) {
+ &:first-child {
+ .page-link {
+ @include border-start-radius(var(--#{$prefix}pagination-border-radius));
+ }
+ }
+
+ &:last-child {
+ .page-link {
+ @include border-end-radius(var(--#{$prefix}pagination-border-radius));
+ }
+ }
+ } @else {
+ // Add border-radius to all pageLinks in case they have left margin
+ .page-link {
+ @include border-radius(var(--#{$prefix}pagination-border-radius));
+ }
}
}
@@ -65,9 +101,9 @@
//
.pagination-lg {
- @include pagination-size($pagination-padding-y-lg, $pagination-padding-x-lg, $font-size-lg, $line-height-lg, $border-radius-lg);
+ @include pagination-size($pagination-padding-y-lg, $pagination-padding-x-lg, $font-size-lg, $pagination-border-radius-lg);
}
.pagination-sm {
- @include pagination-size($pagination-padding-y-sm, $pagination-padding-x-sm, $font-size-sm, $line-height-sm, $border-radius-sm);
+ @include pagination-size($pagination-padding-y-sm, $pagination-padding-x-sm, $font-size-sm, $pagination-border-radius-sm);
}
diff --git a/assets/scss/bootstrap/_placeholders.scss b/assets/scss/bootstrap/_placeholders.scss
new file mode 100644
index 00000000..6e32e1cd
--- /dev/null
+++ b/assets/scss/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/assets/scss/bootstrap/_popover.scss b/assets/scss/bootstrap/_popover.scss
index 0ad76af3..7b69f623 100644
--- a/assets/scss/bootstrap/_popover.scss
+++ b/assets/scss/bootstrap/_popover.scss
@@ -1,28 +1,46 @@
.popover {
- position: absolute;
- top: 0;
- left: 0;
- z-index: $zindex-popover;
+ // scss-docs-start popover-css-vars
+ --#{$prefix}popover-zindex: #{$zindex-popover};
+ --#{$prefix}popover-max-width: #{$popover-max-width};
+ @include rfs($popover-font-size, --#{$prefix}popover-font-size);
+ --#{$prefix}popover-bg: #{$popover-bg};
+ --#{$prefix}popover-border-width: #{$popover-border-width};
+ --#{$prefix}popover-border-color: #{$popover-border-color};
+ --#{$prefix}popover-border-radius: #{$popover-border-radius};
+ --#{$prefix}popover-inner-border-radius: #{$popover-inner-border-radius};
+ --#{$prefix}popover-box-shadow: #{$popover-box-shadow};
+ --#{$prefix}popover-header-padding-x: #{$popover-header-padding-x};
+ --#{$prefix}popover-header-padding-y: #{$popover-header-padding-y};
+ @include rfs($popover-header-font-size, --#{$prefix}popover-header-font-size);
+ --#{$prefix}popover-header-color: #{$popover-header-color};
+ --#{$prefix}popover-header-bg: #{$popover-header-bg};
+ --#{$prefix}popover-body-padding-x: #{$popover-body-padding-x};
+ --#{$prefix}popover-body-padding-y: #{$popover-body-padding-y};
+ --#{$prefix}popover-body-color: #{$popover-body-color};
+ --#{$prefix}popover-arrow-width: #{$popover-arrow-width};
+ --#{$prefix}popover-arrow-height: #{$popover-arrow-height};
+ --#{$prefix}popover-arrow-border: var(--#{$prefix}popover-border-color);
+ // scss-docs-end popover-css-vars
+
+ z-index: var(--#{$prefix}popover-zindex);
display: block;
- max-width: $popover-max-width;
+ max-width: var(--#{$prefix}popover-max-width);
// Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
// So reset our font and text properties to avoid inheriting weird values.
@include reset-text();
- @include font-size($popover-font-size);
+ @include font-size(var(--#{$prefix}popover-font-size));
// Allow breaking very long words so they don't overflow the popover's bounds
word-wrap: break-word;
- background-color: $popover-bg;
+ background-color: var(--#{$prefix}popover-bg);
background-clip: padding-box;
- border: $popover-border-width solid $popover-border-color;
- @include border-radius($popover-border-radius);
- @include box-shadow($popover-box-shadow);
+ border: var(--#{$prefix}popover-border-width) solid var(--#{$prefix}popover-border-color);
+ @include border-radius(var(--#{$prefix}popover-border-radius));
+ @include box-shadow(var(--#{$prefix}popover-box-shadow));
- .arrow {
- position: absolute;
+ .popover-arrow {
display: block;
- width: $popover-arrow-width;
- height: $popover-arrow-height;
- margin: 0 $popover-border-radius;
+ width: var(--#{$prefix}popover-arrow-width);
+ height: var(--#{$prefix}popover-arrow-height);
&::before,
&::after {
@@ -31,69 +49,75 @@
content: "";
border-color: transparent;
border-style: solid;
+ border-width: 0;
}
}
}
.bs-popover-top {
- margin-bottom: $popover-arrow-height;
+ > .popover-arrow {
+ bottom: calc(-1 * (var(--#{$prefix}popover-arrow-height)) - var(--#{$prefix}popover-border-width)); // stylelint-disable-line function-disallowed-list
- > .arrow {
- bottom: subtract(-$popover-arrow-height, $popover-border-width);
+ &::before,
+ &::after {
+ border-width: var(--#{$prefix}popover-arrow-height) calc(var(--#{$prefix}popover-arrow-width) * .5) 0; // stylelint-disable-line function-disallowed-list
+ }
&::before {
bottom: 0;
- border-width: $popover-arrow-height ($popover-arrow-width / 2) 0;
- border-top-color: $popover-arrow-outer-color;
+ border-top-color: var(--#{$prefix}popover-arrow-border);
}
&::after {
- bottom: $popover-border-width;
- border-width: $popover-arrow-height ($popover-arrow-width / 2) 0;
- border-top-color: $popover-arrow-color;
+ bottom: var(--#{$prefix}popover-border-width);
+ border-top-color: var(--#{$prefix}popover-bg);
}
}
}
-.bs-popover-right {
- margin-left: $popover-arrow-height;
+/* rtl:begin:ignore */
+.bs-popover-end {
+ > .popover-arrow {
+ left: calc(-1 * (var(--#{$prefix}popover-arrow-height)) - var(--#{$prefix}popover-border-width)); // stylelint-disable-line function-disallowed-list
+ width: var(--#{$prefix}popover-arrow-height);
+ height: var(--#{$prefix}popover-arrow-width);
- > .arrow {
- left: subtract(-$popover-arrow-height, $popover-border-width);
- width: $popover-arrow-height;
- height: $popover-arrow-width;
- margin: $popover-border-radius 0; // make sure the arrow does not touch the popover's rounded corners
+ &::before,
+ &::after {
+ border-width: calc(var(--#{$prefix}popover-arrow-width) * .5) var(--#{$prefix}popover-arrow-height) calc(var(--#{$prefix}popover-arrow-width) * .5) 0; // stylelint-disable-line function-disallowed-list
+ }
&::before {
left: 0;
- border-width: ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2) 0;
- border-right-color: $popover-arrow-outer-color;
+ border-right-color: var(--#{$prefix}popover-arrow-border);
}
&::after {
- left: $popover-border-width;
- border-width: ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2) 0;
- border-right-color: $popover-arrow-color;
+ left: var(--#{$prefix}popover-border-width);
+ border-right-color: var(--#{$prefix}popover-bg);
}
}
}
+/* rtl:end:ignore */
+
.bs-popover-bottom {
- margin-top: $popover-arrow-height;
+ > .popover-arrow {
+ top: calc(-1 * (var(--#{$prefix}popover-arrow-height)) - var(--#{$prefix}popover-border-width)); // stylelint-disable-line function-disallowed-list
- > .arrow {
- top: subtract(-$popover-arrow-height, $popover-border-width);
+ &::before,
+ &::after {
+ border-width: 0 calc(var(--#{$prefix}popover-arrow-width) * .5) var(--#{$prefix}popover-arrow-height); // stylelint-disable-line function-disallowed-list
+ }
&::before {
top: 0;
- border-width: 0 ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2);
- border-bottom-color: $popover-arrow-outer-color;
+ border-bottom-color: var(--#{$prefix}popover-arrow-border);
}
&::after {
- top: $popover-border-width;
- border-width: 0 ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2);
- border-bottom-color: $popover-arrow-color;
+ top: var(--#{$prefix}popover-border-width);
+ border-bottom-color: var(--#{$prefix}popover-bg);
}
}
@@ -103,61 +127,63 @@
top: 0;
left: 50%;
display: block;
- width: $popover-arrow-width;
- margin-left: -$popover-arrow-width / 2;
+ width: var(--#{$prefix}popover-arrow-width);
+ margin-left: calc(-.5 * var(--#{$prefix}popover-arrow-width)); // stylelint-disable-line function-disallowed-list
content: "";
- border-bottom: $popover-border-width solid $popover-header-bg;
+ border-bottom: var(--#{$prefix}popover-border-width) solid var(--#{$prefix}popover-header-bg);
}
}
-.bs-popover-left {
- margin-right: $popover-arrow-height;
+/* rtl:begin:ignore */
+.bs-popover-start {
+ > .popover-arrow {
+ right: calc(-1 * (var(--#{$prefix}popover-arrow-height)) - var(--#{$prefix}popover-border-width)); // stylelint-disable-line function-disallowed-list
+ width: var(--#{$prefix}popover-arrow-height);
+ height: var(--#{$prefix}popover-arrow-width);
- > .arrow {
- right: subtract(-$popover-arrow-height, $popover-border-width);
- width: $popover-arrow-height;
- height: $popover-arrow-width;
- margin: $popover-border-radius 0; // make sure the arrow does not touch the popover's rounded corners
+ &::before,
+ &::after {
+ border-width: calc(var(--#{$prefix}popover-arrow-width) * .5) 0 calc(var(--#{$prefix}popover-arrow-width) * .5) var(--#{$prefix}popover-arrow-height); // stylelint-disable-line function-disallowed-list
+ }
&::before {
right: 0;
- border-width: ($popover-arrow-width / 2) 0 ($popover-arrow-width / 2) $popover-arrow-height;
- border-left-color: $popover-arrow-outer-color;
+ border-left-color: var(--#{$prefix}popover-arrow-border);
}
&::after {
- right: $popover-border-width;
- border-width: ($popover-arrow-width / 2) 0 ($popover-arrow-width / 2) $popover-arrow-height;
- border-left-color: $popover-arrow-color;
+ right: var(--#{$prefix}popover-border-width);
+ border-left-color: var(--#{$prefix}popover-bg);
}
}
}
+/* rtl:end:ignore */
+
.bs-popover-auto {
- &[x-placement^="top"] {
+ &[data-popper-placement^="top"] {
@extend .bs-popover-top;
}
- &[x-placement^="right"] {
- @extend .bs-popover-right;
+ &[data-popper-placement^="right"] {
+ @extend .bs-popover-end;
}
- &[x-placement^="bottom"] {
+ &[data-popper-placement^="bottom"] {
@extend .bs-popover-bottom;
}
- &[x-placement^="left"] {
- @extend .bs-popover-left;
+ &[data-popper-placement^="left"] {
+ @extend .bs-popover-start;
}
}
-
// Offset the popover to account for the popover arrow
.popover-header {
- padding: $popover-header-padding-y $popover-header-padding-x;
+ padding: var(--#{$prefix}popover-header-padding-y) var(--#{$prefix}popover-header-padding-x);
margin-bottom: 0; // Reset the default from Reboot
- @include font-size($font-size-base);
- color: $popover-header-color;
- background-color: $popover-header-bg;
- border-bottom: $popover-border-width solid darken($popover-header-bg, 5%);
- @include border-top-radius($popover-inner-border-radius);
+ @include font-size(var(--#{$prefix}popover-header-font-size));
+ color: var(--#{$prefix}popover-header-color);
+ background-color: var(--#{$prefix}popover-header-bg);
+ border-bottom: var(--#{$prefix}popover-border-width) solid var(--#{$prefix}popover-border-color);
+ @include border-top-radius(var(--#{$prefix}popover-inner-border-radius));
&:empty {
display: none;
@@ -165,6 +191,6 @@
}
.popover-body {
- padding: $popover-body-padding-y $popover-body-padding-x;
- color: $popover-body-color;
+ padding: var(--#{$prefix}popover-body-padding-y) var(--#{$prefix}popover-body-padding-x);
+ color: var(--#{$prefix}popover-body-color);
}
diff --git a/assets/scss/bootstrap/_print.scss b/assets/scss/bootstrap/_print.scss
deleted file mode 100644
index 8f73024a..00000000
--- a/assets/scss/bootstrap/_print.scss
+++ /dev/null
@@ -1,141 +0,0 @@
-// stylelint-disable declaration-no-important, selector-no-qualifying-type
-
-// Source: https://github.com/h5bp/main.css/blob/master/src/_print.css
-
-// ==========================================================================
-// Print styles.
-// Inlined to avoid the additional HTTP request:
-// https://www.phpied.com/delay-loading-your-print-css/
-// ==========================================================================
-
-@if $enable-print-styles {
- @media print {
- *,
- *::before,
- *::after {
- // Bootstrap specific; comment out `color` and `background`
- //color: $black !important; // Black prints faster
- text-shadow: none !important;
- //background: transparent !important;
- box-shadow: none !important;
- }
-
- a {
- &:not(.btn) {
- text-decoration: underline;
- }
- }
-
- // Bootstrap specific; comment the following selector out
- //a[href]::after {
- // content: " (" attr(href) ")";
- //}
-
- abbr[title]::after {
- content: " (" attr(title) ")";
- }
-
- // Bootstrap specific; comment the following selector out
- //
- // Don't show links that are fragment identifiers,
- // or use the `javascript:` pseudo protocol
- //
-
- //a[href^="#"]::after,
- //a[href^="javascript:"]::after {
- // content: "";
- //}
-
- pre {
- white-space: pre-wrap !important;
- }
- pre,
- blockquote {
- border: $border-width solid $gray-500; // Bootstrap custom code; using `$border-width` instead of 1px
- page-break-inside: avoid;
- }
-
- //
- // Printing Tables:
- // https://web.archive.org/web/20180815150934/http://css-discuss.incutio.com/wiki/Printing_Tables
- //
-
- thead {
- display: table-header-group;
- }
-
- tr,
- img {
- page-break-inside: avoid;
- }
-
- p,
- h2,
- h3 {
- orphans: 3;
- widows: 3;
- }
-
- h2,
- h3 {
- page-break-after: avoid;
- }
-
- // Bootstrap specific changes start
-
- // Specify a size and min-width to make printing closer across browsers.
- // We don't set margin here because it breaks `size` in Chrome. We also
- // don't use `!important` on `size` as it breaks in Chrome.
- @page {
- size: $print-page-size;
- }
- body {
- min-width: $print-body-min-width !important;
- }
- .container {
- min-width: $print-body-min-width !important;
- }
-
- // Bootstrap components
- .navbar {
- display: none;
- }
- .badge {
- border: $border-width solid $black;
- }
-
- .table {
- border-collapse: collapse !important;
-
- td,
- th {
- background-color: $white !important;
- }
- }
-
- .table-bordered {
- th,
- td {
- border: 1px solid $gray-300 !important;
- }
- }
-
- .table-dark {
- color: inherit;
-
- th,
- td,
- thead th,
- tbody + tbody {
- border-color: $table-border-color;
- }
- }
-
- .table .thead-dark th {
- color: inherit;
- border-color: $table-border-color;
- }
-
- // Bootstrap specific changes end
- }
-}
diff --git a/assets/scss/bootstrap/_progress.scss b/assets/scss/bootstrap/_progress.scss
index 37ef6022..148c3815 100644
--- a/assets/scss/bootstrap/_progress.scss
+++ b/assets/scss/bootstrap/_progress.scss
@@ -1,19 +1,33 @@
// Disable animation if transitions are disabled
+
+// scss-docs-start progress-keyframes
@if $enable-transitions {
@keyframes progress-bar-stripes {
- from { background-position: $progress-height 0; }
- to { background-position: 0 0; }
+ 0% { background-position-x: $progress-height; }
}
}
+// scss-docs-end progress-keyframes
+
+.progress,
+.progress-stacked {
+ // scss-docs-start progress-css-vars
+ --#{$prefix}progress-height: #{$progress-height};
+ @include rfs($progress-font-size, --#{$prefix}progress-font-size);
+ --#{$prefix}progress-bg: #{$progress-bg};
+ --#{$prefix}progress-border-radius: #{$progress-border-radius};
+ --#{$prefix}progress-box-shadow: #{$progress-box-shadow};
+ --#{$prefix}progress-bar-color: #{$progress-bar-color};
+ --#{$prefix}progress-bar-bg: #{$progress-bar-bg};
+ --#{$prefix}progress-bar-transition: #{$progress-bar-transition};
+ // scss-docs-end progress-css-vars
-.progress {
display: flex;
- height: $progress-height;
+ height: var(--#{$prefix}progress-height);
overflow: hidden; // force rounded corners by cropping it
- @include font-size($progress-font-size);
- background-color: $progress-bg;
- @include border-radius($progress-border-radius);
- @include box-shadow($progress-box-shadow);
+ @include font-size(var(--#{$prefix}progress-font-size));
+ background-color: var(--#{$prefix}progress-bg);
+ @include border-radius(var(--#{$prefix}progress-border-radius));
+ @include box-shadow(var(--#{$prefix}progress-box-shadow));
}
.progress-bar {
@@ -21,23 +35,31 @@
flex-direction: column;
justify-content: center;
overflow: hidden;
- color: $progress-bar-color;
+ color: var(--#{$prefix}progress-bar-color);
text-align: center;
white-space: nowrap;
- background-color: $progress-bar-bg;
- @include transition($progress-bar-transition);
+ background-color: var(--#{$prefix}progress-bar-bg);
+ @include transition(var(--#{$prefix}progress-bar-transition));
}
.progress-bar-striped {
@include gradient-striped();
- background-size: $progress-height $progress-height;
+ background-size: var(--#{$prefix}progress-height) var(--#{$prefix}progress-height);
+}
+
+.progress-stacked > .progress {
+ overflow: visible;
+}
+
+.progress-stacked > .progress > .progress-bar {
+ width: 100%;
}
@if $enable-transitions {
.progress-bar-animated {
- animation: progress-bar-stripes $progress-bar-animation-timing;
+ animation: $progress-bar-animation-timing progress-bar-stripes;
- @if $enable-prefers-reduced-motion-media-query {
+ @if $enable-reduced-motion {
@media (prefers-reduced-motion: reduce) {
animation: none;
}
diff --git a/assets/scss/bootstrap/_reboot.scss b/assets/scss/bootstrap/_reboot.scss
index b6c98ccd..4226ab89 100644
--- a/assets/scss/bootstrap/_reboot.scss
+++ b/assets/scss/bootstrap/_reboot.scss
@@ -1,4 +1,5 @@
-// stylelint-disable at-rule-no-vendor-prefix, declaration-no-important, selector-no-qualifying-type, property-no-vendor-prefix
+// stylelint-disable declaration-no-important, selector-no-qualifying-type, property-no-vendor-prefix
+
// Reboot
//
@@ -10,122 +11,156 @@
// Document
//
-// 1. Change from `box-sizing: content-box` so that `width` is not affected by `padding` or `border`.
-// 2. Change the default font family in all browsers.
-// 3. Correct the line height in all browsers.
-// 4. Prevent adjustments of font size after orientation changes in IE on Windows Phone and in iOS.
-// 5. Change the default tap highlight to be completely transparent in iOS.
+// Change from `box-sizing: content-box` so that `width` is not affected by `padding` or `border`.
*,
*::before,
*::after {
- box-sizing: border-box; // 1
+ box-sizing: border-box;
}
-html {
- font-family: sans-serif; // 2
- line-height: 1.15; // 3
- -webkit-text-size-adjust: 100%; // 4
- -webkit-tap-highlight-color: rgba($black, 0); // 5
-}
-// Shim for "new" HTML5 structural elements to display correctly (IE10, older browsers)
-// TODO: remove in v5
-// stylelint-disable-next-line selector-list-comma-newline-after
-article, aside, figcaption, figure, footer, header, hgroup, main, nav, section {
- display: block;
+// Root
+//
+// Ability to the value of the root font sizes, affecting the value of `rem`.
+// null by default, thus nothing is generated.
+
+:root {
+ @if $font-size-root != null {
+ @include font-size(var(--#{$prefix}root-font-size));
+ }
+
+ @if $enable-smooth-scroll {
+ @media (prefers-reduced-motion: no-preference) {
+ scroll-behavior: smooth;
+ }
+ }
}
+
// Body
//
// 1. Remove the margin in all browsers.
// 2. As a best practice, apply a default `background-color`.
-// 3. Set an explicit initial text-align value so that we can later use
-// the `inherit` value on things like `` 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,57 @@ 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;
+ 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 +238,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;
}
}
@@ -199,284 +255,356 @@ a {
// causes specificity issues in many other styles that are too complex to fix.
// See https://github.com/twbs/bootstrap/issues/19402
-a:not([href]) {
- color: inherit;
- text-decoration: none;
-
- @include hover() {
+a:not([href]):not([class]) {
+ &,
+ &: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;
+ 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
+// 2. Matches default `
` alignment by inheriting `text-align`.
+// 3. Fix alignment for Safari
+
+th {
+ font-weight: $table-th-font-weight; // 1
+ text-align: inherit; // 2
+ text-align: -webkit-match-parent; // 3
+}
+
+thead,
+tbody,
+tfoot,
+tr,
+td,
th {
- // Matches default ` ` alignment by inheriting from the ``, or the
- // closest parent with a set `text-align`.
- text-align: inherit;
+ 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-blacklist
+ // stylelint-disable-next-line property-disallowed-list
border-radius: 0;
}
-// 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;
+// 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 {
- 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;
}
-
-// Remove the inheritance of word-wrap in Safari.
+// Set the cursor for non-`` buttons
//
-// Details at https://github.com/twbs/bootstrap/issues/24990
+// 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 {
+ opacity: 1;
+ }
}
+// Remove the dropdown arrow only from text type inputs built with datalists in Chrome.
+// See https://stackoverflow.com/a/54997118
+
+[list]:not([type="date"]):not([type="datetime-local"]):not([type="month"]):not([type="week"]):not([type="time"])::-webkit-calendar-picker-indicator {
+ display: none !important;
+}
// 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
-}
-// Opinionated: add "hand" cursor to non-disabled button elements.
-@if $enable-pointer-cursor-for-buttons {
- button,
- [type="button"],
- [type="reset"],
- [type="submit"] {
+ @if $enable-button-pointers {
&:not(:disabled) {
- cursor: pointer;
+ cursor: pointer; // 3
}
}
}
// Remove inner border and padding from Firefox, but don't restore the outline like Normalize.
-button::-moz-focus-inner,
-[type="button"]::-moz-focus-inner,
-[type="reset"]::-moz-focus-inner,
-[type="submit"]::-moz-focus-inner {
+
+::-moz-focus-inner {
padding: 0;
border-style: none;
}
-input[type="radio"],
-input[type="checkbox"] {
- box-sizing: border-box; // 1. Add the correct box sizing in IE 10-
- padding: 0; // 2. Remove the padding in IE 10-
-}
-
-
-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;
-}
+// 1. Textareas should really only resize vertically so they don't break their (horizontal) containers.
textarea {
- overflow: auto; // Remove the default vertical scrollbar in IE.
- // 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. ``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. `
`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. Correct the text wrapping in Edge and IE.
-// 2. Correct the color inheritance from `fieldset` elements in IE.
+// 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 {
- display: block;
+ float: left; // 1
width: 100%;
- max-width: 100%; // 1
padding: 0;
- margin-bottom: .5rem;
- @include font-size(1.5rem);
+ margin-bottom: $legend-margin-bottom;
+ @include font-size($legend-font-size);
+ font-weight: $legend-font-weight;
line-height: inherit;
- color: inherit; // 2
- white-space: normal; // 1
+
+ + * {
+ clear: left; // 2
+ }
}
-progress {
- vertical-align: baseline; // Add the correct vertical alignment in Chrome, Firefox, and Opera.
+// 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;
}
-// Correct the cursor style of increment and decrement buttons in Chrome.
-[type="number"]::-webkit-inner-spin-button,
-[type="number"]::-webkit-outer-spin-button {
+::-webkit-inner-spin-button {
height: auto;
}
+// 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"] {
- // 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.
- outline-offset: -2px; // 2. Correct the outline style in Safari.
- -webkit-appearance: none;
+ 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.
-//
-[type="search"]::-webkit-search-decoration {
+::-webkit-search-decoration {
-webkit-appearance: none;
}
-//
-// 1. Correct the inability to style clickable types in iOS and Safari.
-// 2. Change font properties to `inherit` in Safari.
-//
+// Remove padding around color pickers in webkit browsers
-::-webkit-file-upload-button {
- font: inherit; // 2
- -webkit-appearance: button; // 1
+::-webkit-color-swatch-wrapper {
+ padding: 0;
+}
+
+
+// 1. Inherit font family and line height for file input buttons
+// 2. Correct the inability to style clickable types in iOS and Safari.
+
+::file-selector-button {
+ font: inherit; // 1
+ -webkit-appearance: button; // 2
}
-//
// Correct element displays
-//
output {
display: inline-block;
}
+// Remove border from iframe
+
+iframe {
+ border: 0;
+}
+
+// Summary
+//
+// 1. Add the correct display in all browsers
+
summary {
- display: list-item; // Add the correct display in all browsers
+ display: list-item; // 1
cursor: pointer;
}
-template {
- display: none; // Add the correct display in IE
+
+// Progress
+//
+// Add the correct vertical alignment in Chrome, Firefox, and Opera.
+
+progress {
+ vertical-align: baseline;
}
-// Always hide an element with the `hidden` HTML attribute (from PureCSS).
-// Needed for proper display in IE 10-.
+
+// Hidden attribute
+//
+// Always hide an element with the `hidden` HTML attribute.
+
[hidden] {
display: none !important;
}
diff --git a/assets/scss/bootstrap/_root.scss b/assets/scss/bootstrap/_root.scss
index 8110030c..ab720a38 100644
--- a/assets/scss/bootstrap/_root.scss
+++ b/assets/scss/bootstrap/_root.scss
@@ -1,20 +1,184 @@
-// Do not forget to update getting-started/theming.md!
-:root {
- // Custom variable values only support SassScript inside `#{}`.
+:root,
+[data-bs-theme="light"] {
+ // Note: Custom variable values only support SassScript inside `#{}`.
+
+ // Colors
+ //
+ // Generate palettes for full colors, grays, and theme colors.
+
@each $color, $value in $colors {
- --#{$color}: #{$value};
+ --#{$prefix}#{$color}: #{$value};
+ }
+
+ @each $color, $value in $grays {
+ --#{$prefix}gray-#{$color}: #{$value};
}
@each $color, $value in $theme-colors {
- --#{$color}: #{$value};
+ --#{$prefix}#{$color}: #{$value};
+ }
+
+ @each $color, $value in $theme-colors-rgb {
+ --#{$prefix}#{$color}-rgb: #{$value};
}
- @each $bp, $value in $grid-breakpoints {
- --breakpoint-#{$bp}: #{$value};
+ @each $color, $value in $theme-colors-text {
+ --#{$prefix}#{$color}-text-emphasis: #{$value};
}
- // Use `inspect` for lists so that quoted items keep the quotes.
+ @each $color, $value in $theme-colors-bg-subtle {
+ --#{$prefix}#{$color}-bg-subtle: #{$value};
+ }
+
+ @each $color, $value in $theme-colors-border-subtle {
+ --#{$prefix}#{$color}-border-subtle: #{$value};
+ }
+
+ --#{$prefix}white-rgb: #{to-rgb($white)};
+ --#{$prefix}black-rgb: #{to-rgb($black)};
+
+ // Fonts
+
+ // Note: Use `inspect` for lists so that quoted items keep the quotes.
// See https://github.com/sass/sass/issues/2383#issuecomment-336349172
- --font-family-sans-serif: #{inspect($font-family-sans-serif)};
- --font-family-monospace: #{inspect($font-family-monospace)};
+ --#{$prefix}font-sans-serif: #{inspect($font-family-sans-serif)};
+ --#{$prefix}font-monospace: #{inspect($font-family-monospace)};
+ --#{$prefix}gradient: #{$gradient};
+
+ // Root and body
+ // scss-docs-start root-body-variables
+ @if $font-size-root != null {
+ --#{$prefix}root-font-size: #{$font-size-root};
+ }
+ --#{$prefix}body-font-family: #{inspect($font-family-base)};
+ @include rfs($font-size-base, --#{$prefix}body-font-size);
+ --#{$prefix}body-font-weight: #{$font-weight-base};
+ --#{$prefix}body-line-height: #{$line-height-base};
+ @if $body-text-align != null {
+ --#{$prefix}body-text-align: #{$body-text-align};
+ }
+
+ --#{$prefix}body-color: #{$body-color};
+ --#{$prefix}body-color-rgb: #{to-rgb($body-color)};
+ --#{$prefix}body-bg: #{$body-bg};
+ --#{$prefix}body-bg-rgb: #{to-rgb($body-bg)};
+
+ --#{$prefix}emphasis-color: #{$body-emphasis-color};
+ --#{$prefix}emphasis-color-rgb: #{to-rgb($body-emphasis-color)};
+
+ --#{$prefix}secondary-color: #{$body-secondary-color};
+ --#{$prefix}secondary-color-rgb: #{to-rgb($body-secondary-color)};
+ --#{$prefix}secondary-bg: #{$body-secondary-bg};
+ --#{$prefix}secondary-bg-rgb: #{to-rgb($body-secondary-bg)};
+
+ --#{$prefix}tertiary-color: #{$body-tertiary-color};
+ --#{$prefix}tertiary-color-rgb: #{to-rgb($body-tertiary-color)};
+ --#{$prefix}tertiary-bg: #{$body-tertiary-bg};
+ --#{$prefix}tertiary-bg-rgb: #{to-rgb($body-tertiary-bg)};
+ // scss-docs-end root-body-variables
+
+ --#{$prefix}heading-color: #{$headings-color};
+
+ --#{$prefix}link-color: #{$link-color};
+ --#{$prefix}link-color-rgb: #{to-rgb($link-color)};
+ --#{$prefix}link-decoration: #{$link-decoration};
+
+ --#{$prefix}link-hover-color: #{$link-hover-color};
+ --#{$prefix}link-hover-color-rgb: #{to-rgb($link-hover-color)};
+
+ @if $link-hover-decoration != null {
+ --#{$prefix}link-hover-decoration: #{$link-hover-decoration};
+ }
+
+ --#{$prefix}code-color: #{$code-color};
+ --#{$prefix}highlight-bg: #{$mark-bg};
+
+ // scss-docs-start root-border-var
+ --#{$prefix}border-width: #{$border-width};
+ --#{$prefix}border-style: #{$border-style};
+ --#{$prefix}border-color: #{$border-color};
+ --#{$prefix}border-color-translucent: #{$border-color-translucent};
+
+ --#{$prefix}border-radius: #{$border-radius};
+ --#{$prefix}border-radius-sm: #{$border-radius-sm};
+ --#{$prefix}border-radius-lg: #{$border-radius-lg};
+ --#{$prefix}border-radius-xl: #{$border-radius-xl};
+ --#{$prefix}border-radius-xxl: #{$border-radius-xxl};
+ --#{$prefix}border-radius-2xl: var(--#{$prefix}border-radius-xxl); // Deprecated in v5.3.0 for consistency
+ --#{$prefix}border-radius-pill: #{$border-radius-pill};
+ // scss-docs-end root-border-var
+
+ --#{$prefix}box-shadow: #{$box-shadow};
+ --#{$prefix}box-shadow-sm: #{$box-shadow-sm};
+ --#{$prefix}box-shadow-lg: #{$box-shadow-lg};
+ --#{$prefix}box-shadow-inset: #{$box-shadow-inset};
+
+ // Focus styles
+ // scss-docs-start root-focus-variables
+ --#{$prefix}focus-ring-width: #{$focus-ring-width};
+ --#{$prefix}focus-ring-opacity: #{$focus-ring-opacity};
+ --#{$prefix}focus-ring-color: #{$focus-ring-color};
+ // scss-docs-end root-focus-variables
+
+ // scss-docs-start root-form-validation-variables
+ --#{$prefix}form-valid-color: #{$form-valid-color};
+ --#{$prefix}form-valid-border-color: #{$form-valid-border-color};
+ --#{$prefix}form-invalid-color: #{$form-invalid-color};
+ --#{$prefix}form-invalid-border-color: #{$form-invalid-border-color};
+ // scss-docs-end root-form-validation-variables
+}
+
+@if $enable-dark-mode {
+ @include color-mode(dark, true) {
+ color-scheme: dark;
+
+ // scss-docs-start root-dark-mode-vars
+ --#{$prefix}body-color: #{$body-color-dark};
+ --#{$prefix}body-color-rgb: #{to-rgb($body-color-dark)};
+ --#{$prefix}body-bg: #{$body-bg-dark};
+ --#{$prefix}body-bg-rgb: #{to-rgb($body-bg-dark)};
+
+ --#{$prefix}emphasis-color: #{$body-emphasis-color-dark};
+ --#{$prefix}emphasis-color-rgb: #{to-rgb($body-emphasis-color-dark)};
+
+ --#{$prefix}secondary-color: #{$body-secondary-color-dark};
+ --#{$prefix}secondary-color-rgb: #{to-rgb($body-secondary-color-dark)};
+ --#{$prefix}secondary-bg: #{$body-secondary-bg-dark};
+ --#{$prefix}secondary-bg-rgb: #{to-rgb($body-secondary-bg-dark)};
+
+ --#{$prefix}tertiary-color: #{$body-tertiary-color-dark};
+ --#{$prefix}tertiary-color-rgb: #{to-rgb($body-tertiary-color-dark)};
+ --#{$prefix}tertiary-bg: #{$body-tertiary-bg-dark};
+ --#{$prefix}tertiary-bg-rgb: #{to-rgb($body-tertiary-bg-dark)};
+
+ @each $color, $value in $theme-colors-text-dark {
+ --#{$prefix}#{$color}-text-emphasis: #{$value};
+ }
+
+ @each $color, $value in $theme-colors-bg-subtle-dark {
+ --#{$prefix}#{$color}-bg-subtle: #{$value};
+ }
+
+ @each $color, $value in $theme-colors-border-subtle-dark {
+ --#{$prefix}#{$color}-border-subtle: #{$value};
+ }
+
+ --#{$prefix}heading-color: #{$headings-color-dark};
+
+ --#{$prefix}link-color: #{$link-color-dark};
+ --#{$prefix}link-hover-color: #{$link-hover-color-dark};
+ --#{$prefix}link-color-rgb: #{to-rgb($link-color-dark)};
+ --#{$prefix}link-hover-color-rgb: #{to-rgb($link-hover-color-dark)};
+
+ --#{$prefix}code-color: #{$code-color-dark};
+
+ --#{$prefix}border-color: #{$border-color-dark};
+ --#{$prefix}border-color-translucent: #{$border-color-translucent-dark};
+
+ --#{$prefix}form-valid-color: #{$form-valid-color-dark};
+ --#{$prefix}form-valid-border-color: #{$form-valid-border-color-dark};
+ --#{$prefix}form-invalid-color: #{$form-invalid-color-dark};
+ --#{$prefix}form-invalid-border-color: #{$form-invalid-border-color-dark};
+ // scss-docs-end root-dark-mode-vars
+ }
}
diff --git a/assets/scss/bootstrap/_spinners.scss b/assets/scss/bootstrap/_spinners.scss
index 364a5c1a..ec847320 100644
--- a/assets/scss/bootstrap/_spinners.scss
+++ b/assets/scss/bootstrap/_spinners.scss
@@ -2,54 +2,84 @@
// Rotating border
//
+.spinner-grow,
+.spinner-border {
+ display: inline-block;
+ width: var(--#{$prefix}spinner-width);
+ height: var(--#{$prefix}spinner-height);
+ vertical-align: var(--#{$prefix}spinner-vertical-align);
+ // stylelint-disable-next-line property-disallowed-list
+ border-radius: 50%;
+ animation: var(--#{$prefix}spinner-animation-speed) linear infinite var(--#{$prefix}spinner-animation-name);
+}
+
+// scss-docs-start spinner-border-keyframes
@keyframes spinner-border {
- to { transform: rotate(360deg); }
+ to { transform: rotate(360deg) #{"/* rtl:ignore */"}; }
}
+// scss-docs-end spinner-border-keyframes
.spinner-border {
- display: inline-block;
- width: $spinner-width;
- height: $spinner-height;
- vertical-align: text-bottom;
- border: $spinner-border-width solid currentColor;
+ // scss-docs-start spinner-border-css-vars
+ --#{$prefix}spinner-width: #{$spinner-width};
+ --#{$prefix}spinner-height: #{$spinner-height};
+ --#{$prefix}spinner-vertical-align: #{$spinner-vertical-align};
+ --#{$prefix}spinner-border-width: #{$spinner-border-width};
+ --#{$prefix}spinner-animation-speed: #{$spinner-animation-speed};
+ --#{$prefix}spinner-animation-name: spinner-border;
+ // scss-docs-end spinner-border-css-vars
+
+ border: var(--#{$prefix}spinner-border-width) solid currentcolor;
border-right-color: transparent;
- // stylelint-disable-next-line property-blacklist
- border-radius: 50%;
- animation: spinner-border .75s linear infinite;
}
.spinner-border-sm {
- width: $spinner-width-sm;
- height: $spinner-height-sm;
- border-width: $spinner-border-width-sm;
+ // scss-docs-start spinner-border-sm-css-vars
+ --#{$prefix}spinner-width: #{$spinner-width-sm};
+ --#{$prefix}spinner-height: #{$spinner-height-sm};
+ --#{$prefix}spinner-border-width: #{$spinner-border-width-sm};
+ // scss-docs-end spinner-border-sm-css-vars
}
//
// Growing circle
//
+// scss-docs-start spinner-grow-keyframes
@keyframes spinner-grow {
0% {
transform: scale(0);
}
50% {
opacity: 1;
+ transform: none;
}
}
+// scss-docs-end spinner-grow-keyframes
.spinner-grow {
- display: inline-block;
- width: $spinner-width;
- height: $spinner-height;
- vertical-align: text-bottom;
- background-color: currentColor;
- // stylelint-disable-next-line property-blacklist
- border-radius: 50%;
+ // scss-docs-start spinner-grow-css-vars
+ --#{$prefix}spinner-width: #{$spinner-width};
+ --#{$prefix}spinner-height: #{$spinner-height};
+ --#{$prefix}spinner-vertical-align: #{$spinner-vertical-align};
+ --#{$prefix}spinner-animation-speed: #{$spinner-animation-speed};
+ --#{$prefix}spinner-animation-name: spinner-grow;
+ // scss-docs-end spinner-grow-css-vars
+
+ background-color: currentcolor;
opacity: 0;
- animation: spinner-grow .75s linear infinite;
}
.spinner-grow-sm {
- width: $spinner-width-sm;
- height: $spinner-height-sm;
+ --#{$prefix}spinner-width: #{$spinner-width-sm};
+ --#{$prefix}spinner-height: #{$spinner-height-sm};
+}
+
+@if $enable-reduced-motion {
+ @media (prefers-reduced-motion: reduce) {
+ .spinner-border,
+ .spinner-grow {
+ --#{$prefix}spinner-animation-speed: #{$spinner-animation-speed * 2};
+ }
+ }
}
diff --git a/assets/scss/bootstrap/_tables.scss b/assets/scss/bootstrap/_tables.scss
index 5fd77a4e..ebfc00a5 100644
--- a/assets/scss/bootstrap/_tables.scss
+++ b/assets/scss/bootstrap/_tables.scss
@@ -3,37 +3,72 @@
//
.table {
+ // Reset needed for nesting tables
+ --#{$prefix}table-color-type: initial;
+ --#{$prefix}table-bg-type: initial;
+ --#{$prefix}table-color-state: initial;
+ --#{$prefix}table-bg-state: initial;
+ // End of reset
+ --#{$prefix}table-color: #{$table-color};
+ --#{$prefix}table-bg: #{$table-bg};
+ --#{$prefix}table-border-color: #{$table-border-color};
+ --#{$prefix}table-accent-bg: #{$table-accent-bg};
+ --#{$prefix}table-striped-color: #{$table-striped-color};
+ --#{$prefix}table-striped-bg: #{$table-striped-bg};
+ --#{$prefix}table-active-color: #{$table-active-color};
+ --#{$prefix}table-active-bg: #{$table-active-bg};
+ --#{$prefix}table-hover-color: #{$table-hover-color};
+ --#{$prefix}table-hover-bg: #{$table-hover-bg};
+
width: 100%;
margin-bottom: $spacer;
- color: $table-color;
- background-color: $table-bg; // Reset for nesting within parents with `background-color`.
-
- th,
- td {
- padding: $table-cell-padding;
- vertical-align: top;
- border-top: $table-border-width solid $table-border-color;
+ vertical-align: $table-cell-vertical-align;
+ border-color: var(--#{$prefix}table-border-color);
+
+ // Target th & td
+ // We need the child combinator to prevent styles leaking to nested tables which doesn't have a `.table` class.
+ // We use the universal selectors here to simplify the selector (else we would need 6 different selectors).
+ // Another advantage is that this generates less code and makes the selector less specific making it easier to override.
+ // stylelint-disable-next-line selector-max-universal
+ > :not(caption) > * > * {
+ padding: $table-cell-padding-y $table-cell-padding-x;
+ // Following the precept of cascades: https://codepen.io/miriamsuzanne/full/vYNgodb
+ color: var(--#{$prefix}table-color-state, var(--#{$prefix}table-color-type, var(--#{$prefix}table-color)));
+ background-color: var(--#{$prefix}table-bg);
+ border-bottom-width: $table-border-width;
+ box-shadow: inset 0 0 0 9999px var(--#{$prefix}table-bg-state, var(--#{$prefix}table-bg-type, var(--#{$prefix}table-accent-bg)));
}
- thead th {
- vertical-align: bottom;
- border-bottom: (2 * $table-border-width) solid $table-border-color;
+ > tbody {
+ vertical-align: inherit;
}
- tbody + tbody {
- border-top: (2 * $table-border-width) solid $table-border-color;
+ > thead {
+ vertical-align: bottom;
}
}
+.table-group-divider {
+ border-top: calc(#{$table-border-width} * 2) solid $table-group-separator-color; // stylelint-disable-line function-disallowed-list
+}
+
+//
+// Change placement of captions with a class
+//
+
+.caption-top {
+ caption-side: top;
+}
+
//
// Condensed table w/ half padding
//
.table-sm {
- th,
- td {
- padding: $table-cell-padding-sm;
+ // stylelint-disable-next-line selector-max-universal
+ > :not(caption) > * > * {
+ padding: $table-cell-padding-y-sm $table-cell-padding-x-sm;
}
}
@@ -41,29 +76,31 @@
// Border versions
//
// Add or remove borders all around the table and between all the columns.
+//
+// When borders are added on all sides of the cells, the corners can render odd when
+// these borders do not have the same color or if they are semi-transparent.
+// Therefor we add top and border bottoms to the `tr`s and left and right borders
+// to the `td`s or `th`s
.table-bordered {
- border: $table-border-width solid $table-border-color;
+ > :not(caption) > * {
+ border-width: $table-border-width 0;
- th,
- td {
- border: $table-border-width solid $table-border-color;
- }
-
- thead {
- th,
- td {
- border-bottom-width: 2 * $table-border-width;
+ // stylelint-disable-next-line selector-max-universal
+ > * {
+ border-width: 0 $table-border-width;
}
}
}
.table-borderless {
- th,
- td,
- thead th,
- tbody + tbody {
- border: 0;
+ // stylelint-disable-next-line selector-max-universal
+ > :not(caption) > * > * {
+ border-bottom-width: 0;
+ }
+
+ > :not(:first-child) {
+ border-top-width: 0;
}
}
@@ -71,115 +108,64 @@
//
// Default zebra-stripe styles (alternating gray and transparent backgrounds)
+// For rows
.table-striped {
- tbody tr:nth-of-type(#{$table-striped-order}) {
- background-color: $table-accent-bg;
+ > tbody > tr:nth-of-type(#{$table-striped-order}) > * {
+ --#{$prefix}table-color-type: var(--#{$prefix}table-striped-color);
+ --#{$prefix}table-bg-type: var(--#{$prefix}table-striped-bg);
}
}
-
-// Hover effect
-//
-// Placed here since it has to come after the potential zebra striping
-
-.table-hover {
- tbody tr {
- @include hover() {
- color: $table-hover-color;
- background-color: $table-hover-bg;
- }
+// For columns
+.table-striped-columns {
+ > :not(caption) > tr > :nth-child(#{$table-striped-columns-order}) {
+ --#{$prefix}table-color-type: var(--#{$prefix}table-striped-color);
+ --#{$prefix}table-bg-type: var(--#{$prefix}table-striped-bg);
}
}
-
-// Table backgrounds
+// Active table
//
-// Exact selectors below required to override `.table-striped` and prevent
-// inheritance to nested tables.
+// The `.table-active` class can be added to highlight rows or cells
-@each $color, $value in $theme-colors {
- @include table-row-variant($color, theme-color-level($color, $table-bg-level), theme-color-level($color, $table-border-level));
+.table-active {
+ --#{$prefix}table-color-state: var(--#{$prefix}table-active-color);
+ --#{$prefix}table-bg-state: var(--#{$prefix}table-active-bg);
}
-@include table-row-variant(active, $table-active-bg);
-
-
-// Dark styles
+// Hover effect
//
-// Same table markup, but inverted color scheme: dark background and light text.
-
-// stylelint-disable-next-line no-duplicate-selectors
-.table {
- .thead-dark {
- th {
- color: $table-dark-color;
- background-color: $table-dark-bg;
- border-color: $table-dark-border-color;
- }
- }
+// Placed here since it has to come after the potential zebra striping
- .thead-light {
- th {
- color: $table-head-color;
- background-color: $table-head-bg;
- border-color: $table-border-color;
- }
+.table-hover {
+ > tbody > tr:hover > * {
+ --#{$prefix}table-color-state: var(--#{$prefix}table-hover-color);
+ --#{$prefix}table-bg-state: var(--#{$prefix}table-hover-bg);
}
}
-.table-dark {
- color: $table-dark-color;
- background-color: $table-dark-bg;
- th,
- td,
- thead th {
- border-color: $table-dark-border-color;
- }
-
- &.table-bordered {
- border: 0;
- }
-
- &.table-striped {
- tbody tr:nth-of-type(#{$table-striped-order}) {
- background-color: $table-dark-accent-bg;
- }
- }
+// Table variants
+//
+// Table variants set the table cell backgrounds, border colors
+// and the colors of the striped, hovered & active tables
- &.table-hover {
- tbody tr {
- @include hover() {
- color: $table-dark-hover-color;
- background-color: $table-dark-hover-bg;
- }
- }
- }
+@each $color, $value in $table-variants {
+ @include table-variant($color, $value);
}
-
// Responsive tables
//
// Generate series of `.table-responsive-*` classes for configuring the screen
// size of where your table will overflow.
-.table-responsive {
- @each $breakpoint in map-keys($grid-breakpoints) {
- $next: breakpoint-next($breakpoint, $grid-breakpoints);
- $infix: breakpoint-infix($next, $grid-breakpoints);
-
- &#{$infix} {
- @include media-breakpoint-down($breakpoint) {
- display: block;
- width: 100%;
- overflow-x: auto;
- -webkit-overflow-scrolling: touch;
-
- // Prevent double border on horizontal scroll due to use of `display: block;`
- > .table-bordered {
- border: 0;
- }
- }
+@each $breakpoint in map-keys($grid-breakpoints) {
+ $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+ @include media-breakpoint-down($breakpoint) {
+ .table-responsive#{$infix} {
+ overflow-x: auto;
+ -webkit-overflow-scrolling: touch;
}
}
}
diff --git a/assets/scss/bootstrap/_toasts.scss b/assets/scss/bootstrap/_toasts.scss
index 6aa5352a..2ce378d5 100644
--- a/assets/scss/bootstrap/_toasts.scss
+++ b/assets/scss/bootstrap/_toasts.scss
@@ -1,44 +1,73 @@
.toast {
- max-width: $toast-max-width;
- overflow: hidden; // cheap rounded corners on nested items
- @include font-size($toast-font-size);
- color: $toast-color;
- background-color: $toast-background-color;
+ // scss-docs-start toast-css-vars
+ --#{$prefix}toast-zindex: #{$zindex-toast};
+ --#{$prefix}toast-padding-x: #{$toast-padding-x};
+ --#{$prefix}toast-padding-y: #{$toast-padding-y};
+ --#{$prefix}toast-spacing: #{$toast-spacing};
+ --#{$prefix}toast-max-width: #{$toast-max-width};
+ @include rfs($toast-font-size, --#{$prefix}toast-font-size);
+ --#{$prefix}toast-color: #{$toast-color};
+ --#{$prefix}toast-bg: #{$toast-background-color};
+ --#{$prefix}toast-border-width: #{$toast-border-width};
+ --#{$prefix}toast-border-color: #{$toast-border-color};
+ --#{$prefix}toast-border-radius: #{$toast-border-radius};
+ --#{$prefix}toast-box-shadow: #{$toast-box-shadow};
+ --#{$prefix}toast-header-color: #{$toast-header-color};
+ --#{$prefix}toast-header-bg: #{$toast-header-background-color};
+ --#{$prefix}toast-header-border-color: #{$toast-header-border-color};
+ // scss-docs-end toast-css-vars
+
+ width: var(--#{$prefix}toast-max-width);
+ max-width: 100%;
+ @include font-size(var(--#{$prefix}toast-font-size));
+ color: var(--#{$prefix}toast-color);
+ pointer-events: auto;
+ background-color: var(--#{$prefix}toast-bg);
background-clip: padding-box;
- border: $toast-border-width solid $toast-border-color;
- box-shadow: $toast-box-shadow;
- backdrop-filter: blur(10px);
- opacity: 0;
- @include border-radius($toast-border-radius);
-
- &:not(:last-child) {
- margin-bottom: $toast-padding-x;
- }
+ border: var(--#{$prefix}toast-border-width) solid var(--#{$prefix}toast-border-color);
+ box-shadow: var(--#{$prefix}toast-box-shadow);
+ @include border-radius(var(--#{$prefix}toast-border-radius));
&.showing {
- opacity: 1;
+ opacity: 0;
}
- &.show {
- display: block;
- opacity: 1;
+ &:not(.show) {
+ display: none;
}
+}
- &.hide {
- display: none;
+.toast-container {
+ --#{$prefix}toast-zindex: #{$zindex-toast};
+
+ position: absolute;
+ z-index: var(--#{$prefix}toast-zindex);
+ width: max-content;
+ max-width: 100%;
+ pointer-events: none;
+
+ > :not(:last-child) {
+ margin-bottom: var(--#{$prefix}toast-spacing);
}
}
.toast-header {
display: flex;
align-items: center;
- padding: $toast-padding-y $toast-padding-x;
- color: $toast-header-color;
- background-color: $toast-header-background-color;
+ padding: var(--#{$prefix}toast-padding-y) var(--#{$prefix}toast-padding-x);
+ color: var(--#{$prefix}toast-header-color);
+ background-color: var(--#{$prefix}toast-header-bg);
background-clip: padding-box;
- border-bottom: $toast-border-width solid $toast-header-border-color;
+ border-bottom: var(--#{$prefix}toast-border-width) solid var(--#{$prefix}toast-header-border-color);
+ @include border-top-radius(calc(var(--#{$prefix}toast-border-radius) - var(--#{$prefix}toast-border-width)));
+
+ .btn-close {
+ margin-right: calc(-.5 * var(--#{$prefix}toast-padding-x)); // stylelint-disable-line function-disallowed-list
+ margin-left: var(--#{$prefix}toast-padding-x);
+ }
}
.toast-body {
- padding: $toast-padding-x; // apply to both vertical and horizontal
+ padding: var(--#{$prefix}toast-padding-x);
+ word-wrap: break-word;
}
diff --git a/assets/scss/bootstrap/_tooltip.scss b/assets/scss/bootstrap/_tooltip.scss
index 6b3aa62d..85de90f5 100644
--- a/assets/scss/bootstrap/_tooltip.scss
+++ b/assets/scss/bootstrap/_tooltip.scss
@@ -1,24 +1,38 @@
// Base class
.tooltip {
- position: absolute;
- z-index: $zindex-tooltip;
+ // scss-docs-start tooltip-css-vars
+ --#{$prefix}tooltip-zindex: #{$zindex-tooltip};
+ --#{$prefix}tooltip-max-width: #{$tooltip-max-width};
+ --#{$prefix}tooltip-padding-x: #{$tooltip-padding-x};
+ --#{$prefix}tooltip-padding-y: #{$tooltip-padding-y};
+ --#{$prefix}tooltip-margin: #{$tooltip-margin};
+ @include rfs($tooltip-font-size, --#{$prefix}tooltip-font-size);
+ --#{$prefix}tooltip-color: #{$tooltip-color};
+ --#{$prefix}tooltip-bg: #{$tooltip-bg};
+ --#{$prefix}tooltip-border-radius: #{$tooltip-border-radius};
+ --#{$prefix}tooltip-opacity: #{$tooltip-opacity};
+ --#{$prefix}tooltip-arrow-width: #{$tooltip-arrow-width};
+ --#{$prefix}tooltip-arrow-height: #{$tooltip-arrow-height};
+ // scss-docs-end tooltip-css-vars
+
+ z-index: var(--#{$prefix}tooltip-zindex);
display: block;
- margin: $tooltip-margin;
+ margin: var(--#{$prefix}tooltip-margin);
+ @include deprecate("`$tooltip-margin`", "v5", "v5.x", true);
// Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
// So reset our font and text properties to avoid inheriting weird values.
@include reset-text();
- @include font-size($tooltip-font-size);
+ @include font-size(var(--#{$prefix}tooltip-font-size));
// Allow breaking very long words so they don't overflow the tooltip's bounds
word-wrap: break-word;
opacity: 0;
- &.show { opacity: $tooltip-opacity; }
+ &.show { opacity: var(--#{$prefix}tooltip-opacity); }
- .arrow {
- position: absolute;
+ .tooltip-arrow {
display: block;
- width: $tooltip-arrow-width;
- height: $tooltip-arrow-height;
+ width: var(--#{$prefix}tooltip-arrow-width);
+ height: var(--#{$prefix}tooltip-arrow-height);
&::before {
position: absolute;
@@ -29,87 +43,77 @@
}
}
-.bs-tooltip-top {
- padding: $tooltip-arrow-height 0;
+.bs-tooltip-top .tooltip-arrow {
+ bottom: calc(-1 * var(--#{$prefix}tooltip-arrow-height)); // stylelint-disable-line function-disallowed-list
- .arrow {
- bottom: 0;
-
- &::before {
- top: 0;
- border-width: $tooltip-arrow-height ($tooltip-arrow-width / 2) 0;
- border-top-color: $tooltip-arrow-color;
- }
+ &::before {
+ top: -1px;
+ border-width: var(--#{$prefix}tooltip-arrow-height) calc(var(--#{$prefix}tooltip-arrow-width) * .5) 0; // stylelint-disable-line function-disallowed-list
+ border-top-color: var(--#{$prefix}tooltip-bg);
}
}
-.bs-tooltip-right {
- padding: 0 $tooltip-arrow-height;
+/* rtl:begin:ignore */
+.bs-tooltip-end .tooltip-arrow {
+ left: calc(-1 * var(--#{$prefix}tooltip-arrow-height)); // stylelint-disable-line function-disallowed-list
+ width: var(--#{$prefix}tooltip-arrow-height);
+ height: var(--#{$prefix}tooltip-arrow-width);
- .arrow {
- left: 0;
- width: $tooltip-arrow-height;
- height: $tooltip-arrow-width;
-
- &::before {
- right: 0;
- border-width: ($tooltip-arrow-width / 2) $tooltip-arrow-height ($tooltip-arrow-width / 2) 0;
- border-right-color: $tooltip-arrow-color;
- }
+ &::before {
+ right: -1px;
+ border-width: calc(var(--#{$prefix}tooltip-arrow-width) * .5) var(--#{$prefix}tooltip-arrow-height) calc(var(--#{$prefix}tooltip-arrow-width) * .5) 0; // stylelint-disable-line function-disallowed-list
+ border-right-color: var(--#{$prefix}tooltip-bg);
}
}
-.bs-tooltip-bottom {
- padding: $tooltip-arrow-height 0;
+/* rtl:end:ignore */
- .arrow {
- top: 0;
+.bs-tooltip-bottom .tooltip-arrow {
+ top: calc(-1 * var(--#{$prefix}tooltip-arrow-height)); // stylelint-disable-line function-disallowed-list
- &::before {
- bottom: 0;
- border-width: 0 ($tooltip-arrow-width / 2) $tooltip-arrow-height;
- border-bottom-color: $tooltip-arrow-color;
- }
+ &::before {
+ bottom: -1px;
+ border-width: 0 calc(var(--#{$prefix}tooltip-arrow-width) * .5) var(--#{$prefix}tooltip-arrow-height); // stylelint-disable-line function-disallowed-list
+ border-bottom-color: var(--#{$prefix}tooltip-bg);
}
}
-.bs-tooltip-left {
- padding: 0 $tooltip-arrow-height;
-
- .arrow {
- right: 0;
- width: $tooltip-arrow-height;
- height: $tooltip-arrow-width;
+/* rtl:begin:ignore */
+.bs-tooltip-start .tooltip-arrow {
+ right: calc(-1 * var(--#{$prefix}tooltip-arrow-height)); // stylelint-disable-line function-disallowed-list
+ width: var(--#{$prefix}tooltip-arrow-height);
+ height: var(--#{$prefix}tooltip-arrow-width);
- &::before {
- left: 0;
- border-width: ($tooltip-arrow-width / 2) 0 ($tooltip-arrow-width / 2) $tooltip-arrow-height;
- border-left-color: $tooltip-arrow-color;
- }
+ &::before {
+ left: -1px;
+ border-width: calc(var(--#{$prefix}tooltip-arrow-width) * .5) 0 calc(var(--#{$prefix}tooltip-arrow-width) * .5) var(--#{$prefix}tooltip-arrow-height); // stylelint-disable-line function-disallowed-list
+ border-left-color: var(--#{$prefix}tooltip-bg);
}
}
+/* rtl:end:ignore */
+
.bs-tooltip-auto {
- &[x-placement^="top"] {
+ &[data-popper-placement^="top"] {
@extend .bs-tooltip-top;
}
- &[x-placement^="right"] {
- @extend .bs-tooltip-right;
+ &[data-popper-placement^="right"] {
+ @extend .bs-tooltip-end;
}
- &[x-placement^="bottom"] {
+ &[data-popper-placement^="bottom"] {
@extend .bs-tooltip-bottom;
}
- &[x-placement^="left"] {
- @extend .bs-tooltip-left;
+ &[data-popper-placement^="left"] {
+ @extend .bs-tooltip-start;
}
}
// Wrapper for the tooltip content
.tooltip-inner {
- max-width: $tooltip-max-width;
- padding: $tooltip-padding-y $tooltip-padding-x;
- color: $tooltip-color;
+ max-width: var(--#{$prefix}tooltip-max-width);
+ padding: var(--#{$prefix}tooltip-padding-y) var(--#{$prefix}tooltip-padding-x);
+ color: var(--#{$prefix}tooltip-color);
text-align: center;
- background-color: $tooltip-bg;
- @include border-radius($tooltip-border-radius);
+ background-color: var(--#{$prefix}tooltip-bg);
+ @include border-radius(var(--#{$prefix}tooltip-border-radius));
}
diff --git a/assets/scss/bootstrap/_transitions.scss b/assets/scss/bootstrap/_transitions.scss
index 40be4d91..bfb26aa8 100644
--- a/assets/scss/bootstrap/_transitions.scss
+++ b/assets/scss/bootstrap/_transitions.scss
@@ -6,6 +6,7 @@
}
}
+// scss-docs-start collapse-classes
.collapse {
&:not(.show) {
display: none;
@@ -13,8 +14,14 @@
}
.collapsing {
- position: relative;
height: 0;
overflow: hidden;
@include transition($transition-collapse);
+
+ &.collapse-horizontal {
+ width: 0;
+ height: auto;
+ @include transition($transition-collapse-width);
+ }
}
+// scss-docs-end collapse-classes
diff --git a/assets/scss/bootstrap/_type.scss b/assets/scss/bootstrap/_type.scss
index 43dde7d0..37d64bf8 100644
--- a/assets/scss/bootstrap/_type.scss
+++ b/assets/scss/bootstrap/_type.scss
@@ -1,82 +1,58 @@
-// stylelint-disable declaration-no-important, selector-list-comma-newline-after
-
//
// Headings
//
-
-h1, h2, h3, h4, h5, h6,
-.h1, .h2, .h3, .h4, .h5, .h6 {
- margin-bottom: $headings-margin-bottom;
- font-family: $headings-font-family;
- font-weight: $headings-font-weight;
- line-height: $headings-line-height;
- color: $headings-color;
+.h1 {
+ @extend h1;
}
-h1, .h1 { @include font-size($h1-font-size); }
-h2, .h2 { @include font-size($h2-font-size); }
-h3, .h3 { @include font-size($h3-font-size); }
-h4, .h4 { @include font-size($h4-font-size); }
-h5, .h5 { @include font-size($h5-font-size); }
-h6, .h6 { @include font-size($h6-font-size); }
-
-.lead {
- @include font-size($lead-font-size);
- font-weight: $lead-font-weight;
+.h2 {
+ @extend h2;
}
-// Type display classes
-.display-1 {
- @include font-size($display1-size);
- font-weight: $display1-weight;
- line-height: $display-line-height;
+.h3 {
+ @extend h3;
}
-.display-2 {
- @include font-size($display2-size);
- font-weight: $display2-weight;
- line-height: $display-line-height;
+
+.h4 {
+ @extend h4;
}
-.display-3 {
- @include font-size($display3-size);
- font-weight: $display3-weight;
- line-height: $display-line-height;
+
+.h5 {
+ @extend h5;
}
-.display-4 {
- @include font-size($display4-size);
- font-weight: $display4-weight;
- line-height: $display-line-height;
+
+.h6 {
+ @extend h6;
}
-//
-// Horizontal rules
-//
-
-hr {
- margin-top: $hr-margin-y;
- margin-bottom: $hr-margin-y;
- border: 0;
- border-top: $hr-border-width solid $hr-border-color;
+.lead {
+ @include font-size($lead-font-size);
+ font-weight: $lead-font-weight;
}
+// Type display classes
+@each $display, $font-size in $display-font-sizes {
+ .display-#{$display} {
+ @include font-size($font-size);
+ font-family: $display-font-family;
+ font-style: $display-font-style;
+ font-weight: $display-font-weight;
+ line-height: $display-line-height;
+ }
+}
//
// Emphasis
//
-
-small,
.small {
- @include font-size($small-font-size);
- font-weight: $font-weight-normal;
+ @extend small;
}
-mark,
.mark {
- padding: $mark-padding;
- background-color: $mark-bg;
+ @extend mark;
}
-
//
// Lists
//
@@ -104,20 +80,25 @@ mark,
// Builds on `abbr`
.initialism {
- @include font-size(90%);
+ @include font-size($initialism-font-size);
text-transform: uppercase;
}
// Blockquotes
.blockquote {
- margin-bottom: $spacer;
+ margin-bottom: $blockquote-margin-y;
@include font-size($blockquote-font-size);
+
+ > :last-child {
+ margin-bottom: 0;
+ }
}
.blockquote-footer {
- display: block;
- @include font-size($blockquote-small-font-size);
- color: $blockquote-small-color;
+ margin-top: -$blockquote-margin-y;
+ margin-bottom: $blockquote-margin-y;
+ @include font-size($blockquote-footer-font-size);
+ color: $blockquote-footer-color;
&::before {
content: "\2014\00A0"; // em dash, nbsp
diff --git a/assets/scss/bootstrap/_utilities.scss b/assets/scss/bootstrap/_utilities.scss
index a5de31ba..e6069c90 100644
--- a/assets/scss/bootstrap/_utilities.scss
+++ b/assets/scss/bootstrap/_utilities.scss
@@ -1,17 +1,806 @@
-@import "utilities/align";
-@import "utilities/background";
-@import "utilities/borders";
-@import "utilities/clearfix";
-@import "utilities/display";
-@import "utilities/embed";
-@import "utilities/flex";
-@import "utilities/float";
-@import "utilities/overflow";
-@import "utilities/position";
-@import "utilities/screenreaders";
-@import "utilities/shadows";
-@import "utilities/sizing";
-@import "utilities/stretched-link";
-@import "utilities/spacing";
-@import "utilities/text";
-@import "utilities/visibility";
+// Utilities
+
+$utilities: () !default;
+// stylelint-disable-next-line scss/dollar-variable-default
+$utilities: map-merge(
+ (
+ // scss-docs-start utils-vertical-align
+ "align": (
+ property: vertical-align,
+ class: align,
+ values: baseline top middle bottom text-bottom text-top
+ ),
+ // scss-docs-end utils-vertical-align
+ // scss-docs-start utils-float
+ "float": (
+ responsive: true,
+ property: float,
+ values: (
+ start: left,
+ end: right,
+ none: none,
+ )
+ ),
+ // scss-docs-end utils-float
+ // Object Fit utilities
+ // scss-docs-start utils-object-fit
+ "object-fit": (
+ responsive: true,
+ property: object-fit,
+ values: (
+ contain: contain,
+ cover: cover,
+ fill: fill,
+ scale: scale-down,
+ none: none,
+ )
+ ),
+ // scss-docs-end utils-object-fit
+ // Opacity utilities
+ // scss-docs-start utils-opacity
+ "opacity": (
+ property: opacity,
+ values: (
+ 0: 0,
+ 25: .25,
+ 50: .5,
+ 75: .75,
+ 100: 1,
+ )
+ ),
+ // scss-docs-end utils-opacity
+ // scss-docs-start utils-overflow
+ "overflow": (
+ property: overflow,
+ values: auto hidden visible scroll,
+ ),
+ "overflow-x": (
+ property: overflow-x,
+ values: auto hidden visible scroll,
+ ),
+ "overflow-y": (
+ property: overflow-y,
+ values: auto hidden visible scroll,
+ ),
+ // scss-docs-end utils-overflow
+ // scss-docs-start utils-display
+ "display": (
+ responsive: true,
+ print: true,
+ property: display,
+ class: d,
+ values: inline inline-block block grid inline-grid table table-row table-cell flex inline-flex none
+ ),
+ // scss-docs-end utils-display
+ // scss-docs-start utils-shadow
+ "shadow": (
+ property: box-shadow,
+ class: shadow,
+ values: (
+ null: $box-shadow,
+ sm: $box-shadow-sm,
+ lg: $box-shadow-lg,
+ none: none,
+ )
+ ),
+ // scss-docs-end utils-shadow
+ // scss-docs-start utils-focus-ring
+ "focus-ring": (
+ css-var: true,
+ css-variable-name: focus-ring-color,
+ class: focus-ring,
+ values: map-loop($theme-colors-rgb, rgba-css-var, "$key", "focus-ring")
+ ),
+ // scss-docs-end utils-focus-ring
+ // scss-docs-start utils-position
+ "position": (
+ property: position,
+ values: static relative absolute fixed sticky
+ ),
+ "top": (
+ property: top,
+ values: $position-values
+ ),
+ "bottom": (
+ property: bottom,
+ values: $position-values
+ ),
+ "start": (
+ property: left,
+ class: start,
+ values: $position-values
+ ),
+ "end": (
+ property: right,
+ class: end,
+ values: $position-values
+ ),
+ "translate-middle": (
+ property: transform,
+ class: translate-middle,
+ values: (
+ null: translate(-50%, -50%),
+ x: translateX(-50%),
+ y: translateY(-50%),
+ )
+ ),
+ // scss-docs-end utils-position
+ // scss-docs-start utils-borders
+ "border": (
+ property: border,
+ values: (
+ null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
+ 0: 0,
+ )
+ ),
+ "border-top": (
+ property: border-top,
+ values: (
+ null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
+ 0: 0,
+ )
+ ),
+ "border-end": (
+ property: border-right,
+ class: border-end,
+ values: (
+ null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
+ 0: 0,
+ )
+ ),
+ "border-bottom": (
+ property: border-bottom,
+ values: (
+ null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
+ 0: 0,
+ )
+ ),
+ "border-start": (
+ property: border-left,
+ class: border-start,
+ values: (
+ null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
+ 0: 0,
+ )
+ ),
+ "border-color": (
+ property: border-color,
+ class: border,
+ local-vars: (
+ "border-opacity": 1
+ ),
+ values: $utilities-border-colors
+ ),
+ "subtle-border-color": (
+ property: border-color,
+ class: border,
+ values: $utilities-border-subtle
+ ),
+ "border-width": (
+ property: border-width,
+ class: border,
+ values: $border-widths
+ ),
+ "border-opacity": (
+ css-var: true,
+ class: border-opacity,
+ values: (
+ 10: .1,
+ 25: .25,
+ 50: .5,
+ 75: .75,
+ 100: 1
+ )
+ ),
+ // scss-docs-end utils-borders
+ // Sizing utilities
+ // scss-docs-start utils-sizing
+ "width": (
+ property: width,
+ class: w,
+ values: (
+ 25: 25%,
+ 50: 50%,
+ 75: 75%,
+ 100: 100%,
+ auto: auto
+ )
+ ),
+ "max-width": (
+ property: max-width,
+ class: mw,
+ values: (100: 100%)
+ ),
+ "viewport-width": (
+ property: width,
+ class: vw,
+ values: (100: 100vw)
+ ),
+ "min-viewport-width": (
+ property: min-width,
+ class: min-vw,
+ values: (100: 100vw)
+ ),
+ "height": (
+ property: height,
+ class: h,
+ values: (
+ 25: 25%,
+ 50: 50%,
+ 75: 75%,
+ 100: 100%,
+ auto: auto
+ )
+ ),
+ "max-height": (
+ property: max-height,
+ class: mh,
+ values: (100: 100%)
+ ),
+ "viewport-height": (
+ property: height,
+ class: vh,
+ values: (100: 100vh)
+ ),
+ "min-viewport-height": (
+ property: min-height,
+ class: min-vh,
+ values: (100: 100vh)
+ ),
+ // scss-docs-end utils-sizing
+ // Flex utilities
+ // scss-docs-start utils-flex
+ "flex": (
+ responsive: true,
+ property: flex,
+ values: (fill: 1 1 auto)
+ ),
+ "flex-direction": (
+ responsive: true,
+ property: flex-direction,
+ class: flex,
+ values: row column row-reverse column-reverse
+ ),
+ "flex-grow": (
+ responsive: true,
+ property: flex-grow,
+ class: flex,
+ values: (
+ grow-0: 0,
+ grow-1: 1,
+ )
+ ),
+ "flex-shrink": (
+ responsive: true,
+ property: flex-shrink,
+ class: flex,
+ values: (
+ shrink-0: 0,
+ shrink-1: 1,
+ )
+ ),
+ "flex-wrap": (
+ responsive: true,
+ property: flex-wrap,
+ class: flex,
+ values: wrap nowrap wrap-reverse
+ ),
+ "justify-content": (
+ responsive: true,
+ property: justify-content,
+ values: (
+ start: flex-start,
+ end: flex-end,
+ center: center,
+ between: space-between,
+ around: space-around,
+ evenly: space-evenly,
+ )
+ ),
+ "align-items": (
+ responsive: true,
+ property: align-items,
+ values: (
+ start: flex-start,
+ end: flex-end,
+ center: center,
+ baseline: baseline,
+ stretch: stretch,
+ )
+ ),
+ "align-content": (
+ responsive: true,
+ property: align-content,
+ values: (
+ start: flex-start,
+ end: flex-end,
+ center: center,
+ between: space-between,
+ around: space-around,
+ stretch: stretch,
+ )
+ ),
+ "align-self": (
+ responsive: true,
+ property: align-self,
+ values: (
+ auto: auto,
+ start: flex-start,
+ end: flex-end,
+ center: center,
+ baseline: baseline,
+ stretch: stretch,
+ )
+ ),
+ "order": (
+ responsive: true,
+ property: order,
+ values: (
+ first: -1,
+ 0: 0,
+ 1: 1,
+ 2: 2,
+ 3: 3,
+ 4: 4,
+ 5: 5,
+ last: 6,
+ ),
+ ),
+ // scss-docs-end utils-flex
+ // Margin utilities
+ // scss-docs-start utils-spacing
+ "margin": (
+ responsive: true,
+ property: margin,
+ class: m,
+ values: map-merge($spacers, (auto: auto))
+ ),
+ "margin-x": (
+ responsive: true,
+ property: margin-right margin-left,
+ class: mx,
+ values: map-merge($spacers, (auto: auto))
+ ),
+ "margin-y": (
+ responsive: true,
+ property: margin-top margin-bottom,
+ class: my,
+ values: map-merge($spacers, (auto: auto))
+ ),
+ "margin-top": (
+ responsive: true,
+ property: margin-top,
+ class: mt,
+ values: map-merge($spacers, (auto: auto))
+ ),
+ "margin-end": (
+ responsive: true,
+ property: margin-right,
+ class: me,
+ values: map-merge($spacers, (auto: auto))
+ ),
+ "margin-bottom": (
+ responsive: true,
+ property: margin-bottom,
+ class: mb,
+ values: map-merge($spacers, (auto: auto))
+ ),
+ "margin-start": (
+ responsive: true,
+ property: margin-left,
+ class: ms,
+ values: map-merge($spacers, (auto: auto))
+ ),
+ // Negative margin utilities
+ "negative-margin": (
+ responsive: true,
+ property: margin,
+ class: m,
+ values: $negative-spacers
+ ),
+ "negative-margin-x": (
+ responsive: true,
+ property: margin-right margin-left,
+ class: mx,
+ values: $negative-spacers
+ ),
+ "negative-margin-y": (
+ responsive: true,
+ property: margin-top margin-bottom,
+ class: my,
+ values: $negative-spacers
+ ),
+ "negative-margin-top": (
+ responsive: true,
+ property: margin-top,
+ class: mt,
+ values: $negative-spacers
+ ),
+ "negative-margin-end": (
+ responsive: true,
+ property: margin-right,
+ class: me,
+ values: $negative-spacers
+ ),
+ "negative-margin-bottom": (
+ responsive: true,
+ property: margin-bottom,
+ class: mb,
+ values: $negative-spacers
+ ),
+ "negative-margin-start": (
+ responsive: true,
+ property: margin-left,
+ class: ms,
+ values: $negative-spacers
+ ),
+ // Padding utilities
+ "padding": (
+ responsive: true,
+ property: padding,
+ class: p,
+ values: $spacers
+ ),
+ "padding-x": (
+ responsive: true,
+ property: padding-right padding-left,
+ class: px,
+ values: $spacers
+ ),
+ "padding-y": (
+ responsive: true,
+ property: padding-top padding-bottom,
+ class: py,
+ values: $spacers
+ ),
+ "padding-top": (
+ responsive: true,
+ property: padding-top,
+ class: pt,
+ values: $spacers
+ ),
+ "padding-end": (
+ responsive: true,
+ property: padding-right,
+ class: pe,
+ values: $spacers
+ ),
+ "padding-bottom": (
+ responsive: true,
+ property: padding-bottom,
+ class: pb,
+ values: $spacers
+ ),
+ "padding-start": (
+ responsive: true,
+ property: padding-left,
+ class: ps,
+ values: $spacers
+ ),
+ // Gap utility
+ "gap": (
+ responsive: true,
+ property: gap,
+ class: gap,
+ values: $spacers
+ ),
+ "row-gap": (
+ responsive: true,
+ property: row-gap,
+ class: row-gap,
+ values: $spacers
+ ),
+ "column-gap": (
+ responsive: true,
+ property: column-gap,
+ class: column-gap,
+ values: $spacers
+ ),
+ // scss-docs-end utils-spacing
+ // Text
+ // scss-docs-start utils-text
+ "font-family": (
+ property: font-family,
+ class: font,
+ values: (monospace: var(--#{$prefix}font-monospace))
+ ),
+ "font-size": (
+ rfs: true,
+ property: font-size,
+ class: fs,
+ values: $font-sizes
+ ),
+ "font-style": (
+ property: font-style,
+ class: fst,
+ values: italic normal
+ ),
+ "font-weight": (
+ property: font-weight,
+ class: fw,
+ values: (
+ lighter: $font-weight-lighter,
+ light: $font-weight-light,
+ normal: $font-weight-normal,
+ medium: $font-weight-medium,
+ semibold: $font-weight-semibold,
+ bold: $font-weight-bold,
+ bolder: $font-weight-bolder
+ )
+ ),
+ "line-height": (
+ property: line-height,
+ class: lh,
+ values: (
+ 1: 1,
+ sm: $line-height-sm,
+ base: $line-height-base,
+ lg: $line-height-lg,
+ )
+ ),
+ "text-align": (
+ responsive: true,
+ property: text-align,
+ class: text,
+ values: (
+ start: left,
+ end: right,
+ center: center,
+ )
+ ),
+ "text-decoration": (
+ property: text-decoration,
+ values: none underline line-through
+ ),
+ "text-transform": (
+ property: text-transform,
+ class: text,
+ values: lowercase uppercase capitalize
+ ),
+ "white-space": (
+ property: white-space,
+ class: text,
+ values: (
+ wrap: normal,
+ nowrap: nowrap,
+ )
+ ),
+ "word-wrap": (
+ property: word-wrap word-break,
+ class: text,
+ values: (break: break-word),
+ rtl: false
+ ),
+ // scss-docs-end utils-text
+ // scss-docs-start utils-color
+ "color": (
+ property: color,
+ class: text,
+ local-vars: (
+ "text-opacity": 1
+ ),
+ values: map-merge(
+ $utilities-text-colors,
+ (
+ "muted": var(--#{$prefix}secondary-color), // deprecated
+ "black-50": rgba($black, .5), // deprecated
+ "white-50": rgba($white, .5), // deprecated
+ "body-secondary": var(--#{$prefix}secondary-color),
+ "body-tertiary": var(--#{$prefix}tertiary-color),
+ "body-emphasis": var(--#{$prefix}emphasis-color),
+ "reset": inherit,
+ )
+ )
+ ),
+ "text-opacity": (
+ css-var: true,
+ class: text-opacity,
+ values: (
+ 25: .25,
+ 50: .5,
+ 75: .75,
+ 100: 1
+ )
+ ),
+ "text-color": (
+ property: color,
+ class: text,
+ values: $utilities-text-emphasis-colors
+ ),
+ // scss-docs-end utils-color
+ // scss-docs-start utils-links
+ "link-opacity": (
+ css-var: true,
+ class: link-opacity,
+ state: hover,
+ values: (
+ 10: .1,
+ 25: .25,
+ 50: .5,
+ 75: .75,
+ 100: 1
+ )
+ ),
+ "link-offset": (
+ property: text-underline-offset,
+ class: link-offset,
+ state: hover,
+ values: (
+ 1: .125em,
+ 2: .25em,
+ 3: .375em,
+ )
+ ),
+ "link-underline": (
+ property: text-decoration-color,
+ class: link-underline,
+ local-vars: (
+ "link-underline-opacity": 1
+ ),
+ values: map-merge(
+ $utilities-links-underline,
+ (
+ null: rgba(var(--#{$prefix}link-color-rgb), var(--#{$prefix}link-underline-opacity, 1)),
+ )
+ )
+ ),
+ "link-underline-opacity": (
+ css-var: true,
+ class: link-underline-opacity,
+ state: hover,
+ values: (
+ 0: 0,
+ 10: .1,
+ 25: .25,
+ 50: .5,
+ 75: .75,
+ 100: 1
+ ),
+ ),
+ // scss-docs-end utils-links
+ // scss-docs-start utils-bg-color
+ "background-color": (
+ property: background-color,
+ class: bg,
+ local-vars: (
+ "bg-opacity": 1
+ ),
+ values: map-merge(
+ $utilities-bg-colors,
+ (
+ "transparent": transparent,
+ "body-secondary": rgba(var(--#{$prefix}secondary-bg-rgb), var(--#{$prefix}bg-opacity)),
+ "body-tertiary": rgba(var(--#{$prefix}tertiary-bg-rgb), var(--#{$prefix}bg-opacity)),
+ )
+ )
+ ),
+ "bg-opacity": (
+ css-var: true,
+ class: bg-opacity,
+ values: (
+ 10: .1,
+ 25: .25,
+ 50: .5,
+ 75: .75,
+ 100: 1
+ )
+ ),
+ "subtle-background-color": (
+ property: background-color,
+ class: bg,
+ values: $utilities-bg-subtle
+ ),
+ // scss-docs-end utils-bg-color
+ "gradient": (
+ property: background-image,
+ class: bg,
+ values: (gradient: var(--#{$prefix}gradient))
+ ),
+ // scss-docs-start utils-interaction
+ "user-select": (
+ property: user-select,
+ values: all auto none
+ ),
+ "pointer-events": (
+ property: pointer-events,
+ class: pe,
+ values: none auto,
+ ),
+ // scss-docs-end utils-interaction
+ // scss-docs-start utils-border-radius
+ "rounded": (
+ property: border-radius,
+ class: rounded,
+ values: (
+ null: var(--#{$prefix}border-radius),
+ 0: 0,
+ 1: var(--#{$prefix}border-radius-sm),
+ 2: var(--#{$prefix}border-radius),
+ 3: var(--#{$prefix}border-radius-lg),
+ 4: var(--#{$prefix}border-radius-xl),
+ 5: var(--#{$prefix}border-radius-xxl),
+ circle: 50%,
+ pill: var(--#{$prefix}border-radius-pill)
+ )
+ ),
+ "rounded-top": (
+ property: border-top-left-radius border-top-right-radius,
+ class: rounded-top,
+ values: (
+ null: var(--#{$prefix}border-radius),
+ 0: 0,
+ 1: var(--#{$prefix}border-radius-sm),
+ 2: var(--#{$prefix}border-radius),
+ 3: var(--#{$prefix}border-radius-lg),
+ 4: var(--#{$prefix}border-radius-xl),
+ 5: var(--#{$prefix}border-radius-xxl),
+ circle: 50%,
+ pill: var(--#{$prefix}border-radius-pill)
+ )
+ ),
+ "rounded-end": (
+ property: border-top-right-radius border-bottom-right-radius,
+ class: rounded-end,
+ values: (
+ null: var(--#{$prefix}border-radius),
+ 0: 0,
+ 1: var(--#{$prefix}border-radius-sm),
+ 2: var(--#{$prefix}border-radius),
+ 3: var(--#{$prefix}border-radius-lg),
+ 4: var(--#{$prefix}border-radius-xl),
+ 5: var(--#{$prefix}border-radius-xxl),
+ circle: 50%,
+ pill: var(--#{$prefix}border-radius-pill)
+ )
+ ),
+ "rounded-bottom": (
+ property: border-bottom-right-radius border-bottom-left-radius,
+ class: rounded-bottom,
+ values: (
+ null: var(--#{$prefix}border-radius),
+ 0: 0,
+ 1: var(--#{$prefix}border-radius-sm),
+ 2: var(--#{$prefix}border-radius),
+ 3: var(--#{$prefix}border-radius-lg),
+ 4: var(--#{$prefix}border-radius-xl),
+ 5: var(--#{$prefix}border-radius-xxl),
+ circle: 50%,
+ pill: var(--#{$prefix}border-radius-pill)
+ )
+ ),
+ "rounded-start": (
+ property: border-bottom-left-radius border-top-left-radius,
+ class: rounded-start,
+ values: (
+ null: var(--#{$prefix}border-radius),
+ 0: 0,
+ 1: var(--#{$prefix}border-radius-sm),
+ 2: var(--#{$prefix}border-radius),
+ 3: var(--#{$prefix}border-radius-lg),
+ 4: var(--#{$prefix}border-radius-xl),
+ 5: var(--#{$prefix}border-radius-xxl),
+ circle: 50%,
+ pill: var(--#{$prefix}border-radius-pill)
+ )
+ ),
+ // scss-docs-end utils-border-radius
+ // scss-docs-start utils-visibility
+ "visibility": (
+ property: visibility,
+ class: null,
+ values: (
+ visible: visible,
+ invisible: hidden,
+ )
+ ),
+ // scss-docs-end utils-visibility
+ // scss-docs-start utils-zindex
+ "z-index": (
+ property: z-index,
+ class: z,
+ values: $zindex-levels,
+ )
+ // scss-docs-end utils-zindex
+ ),
+ $utilities
+);
diff --git a/assets/scss/bootstrap/_variables-dark.scss b/assets/scss/bootstrap/_variables-dark.scss
new file mode 100644
index 00000000..494eefac
--- /dev/null
+++ b/assets/scss/bootstrap/_variables-dark.scss
@@ -0,0 +1,85 @@
+// Dark color mode variables
+//
+// Custom variables for the `[data-bs-theme="dark"]` theme. Use this as a starting point for your own custom color modes by creating a new theme-specific file like `_variables-dark.scss` and adding the variables you need.
+
+//
+// Global colors
+//
+
+// scss-docs-start sass-dark-mode-vars
+// scss-docs-start theme-text-dark-variables
+$primary-text-emphasis-dark: tint-color($primary, 40%) !default;
+$secondary-text-emphasis-dark: tint-color($secondary, 40%) !default;
+$success-text-emphasis-dark: tint-color($success, 40%) !default;
+$info-text-emphasis-dark: tint-color($info, 40%) !default;
+$warning-text-emphasis-dark: tint-color($warning, 40%) !default;
+$danger-text-emphasis-dark: tint-color($danger, 40%) !default;
+$light-text-emphasis-dark: $gray-100 !default;
+$dark-text-emphasis-dark: $gray-300 !default;
+// scss-docs-end theme-text-dark-variables
+
+// scss-docs-start theme-bg-subtle-dark-variables
+$primary-bg-subtle-dark: shade-color($primary, 80%) !default;
+$secondary-bg-subtle-dark: shade-color($secondary, 80%) !default;
+$success-bg-subtle-dark: shade-color($success, 80%) !default;
+$info-bg-subtle-dark: shade-color($info, 80%) !default;
+$warning-bg-subtle-dark: shade-color($warning, 80%) !default;
+$danger-bg-subtle-dark: shade-color($danger, 80%) !default;
+$light-bg-subtle-dark: $gray-800 !default;
+$dark-bg-subtle-dark: mix($gray-800, $black) !default;
+// scss-docs-end theme-bg-subtle-dark-variables
+
+// scss-docs-start theme-border-subtle-dark-variables
+$primary-border-subtle-dark: shade-color($primary, 40%) !default;
+$secondary-border-subtle-dark: shade-color($secondary, 40%) !default;
+$success-border-subtle-dark: shade-color($success, 40%) !default;
+$info-border-subtle-dark: shade-color($info, 40%) !default;
+$warning-border-subtle-dark: shade-color($warning, 40%) !default;
+$danger-border-subtle-dark: shade-color($danger, 40%) !default;
+$light-border-subtle-dark: $gray-700 !default;
+$dark-border-subtle-dark: $gray-800 !default;
+// scss-docs-end theme-border-subtle-dark-variables
+
+$body-color-dark: $gray-500 !default;
+$body-bg-dark: $gray-900 !default;
+$body-secondary-color-dark: rgba($body-color-dark, .75) !default;
+$body-secondary-bg-dark: $gray-800 !default;
+$body-tertiary-color-dark: rgba($body-color-dark, .5) !default;
+$body-tertiary-bg-dark: mix($gray-800, $gray-900, 50%) !default;
+$body-emphasis-color-dark: $white !default;
+$border-color-dark: $gray-700 !default;
+$border-color-translucent-dark: rgba($white, .15) !default;
+$headings-color-dark: inherit !default;
+$link-color-dark: tint-color($primary, 40%) !default;
+$link-hover-color-dark: shift-color($link-color-dark, -$link-shade-percentage) !default;
+$code-color-dark: tint-color($code-color, 40%) !default;
+
+
+//
+// Forms
+//
+
+$form-select-indicator-color-dark: $body-color-dark !default;
+$form-select-indicator-dark: url("data:image/svg+xml,
") !default;
+
+$form-switch-color-dark: rgba($white, .25) !default;
+$form-switch-bg-image-dark: url("data:image/svg+xml,
") !default;
+
+// scss-docs-start form-validation-colors-dark
+$form-valid-color-dark: $green-300 !default;
+$form-valid-border-color-dark: $green-300 !default;
+$form-invalid-color-dark: $red-300 !default;
+$form-invalid-border-color-dark: $red-300 !default;
+// scss-docs-end form-validation-colors-dark
+
+
+//
+// Accordion
+//
+
+$accordion-icon-color-dark: $primary-text-emphasis-dark !default;
+$accordion-icon-active-color-dark: $primary-text-emphasis-dark !default;
+
+$accordion-button-icon-dark: url("data:image/svg+xml,
") !default;
+$accordion-button-active-icon-dark: url("data:image/svg+xml,
") !default;
+// scss-docs-end sass-dark-mode-vars
diff --git a/assets/scss/bootstrap/_variables.scss b/assets/scss/bootstrap/_variables.scss
index 5d3135cd..0288898d 100644
--- a/assets/scss/bootstrap/_variables.scss
+++ b/assets/scss/bootstrap/_variables.scss
@@ -5,6 +5,7 @@
// Color system
+// scss-docs-start gray-color-variables
$white: #fff !default;
$gray-100: #f8f9fa !default;
$gray-200: #e9ecef !default;
@@ -16,56 +17,287 @@ $gray-700: #495057 !default;
$gray-800: #343a40 !default;
$gray-900: #212529 !default;
$black: #000 !default;
+// scss-docs-end gray-color-variables
+
+// fusv-disable
+// scss-docs-start gray-colors-map
+$grays: (
+ "100": $gray-100,
+ "200": $gray-200,
+ "300": $gray-300,
+ "400": $gray-400,
+ "500": $gray-500,
+ "600": $gray-600,
+ "700": $gray-700,
+ "800": $gray-800,
+ "900": $gray-900
+) !default;
+// scss-docs-end gray-colors-map
+// fusv-enable
-$grays: () !default;
-// stylelint-disable-next-line scss/dollar-variable-default
-$grays: map-merge(
- (
- "100": $gray-100,
- "200": $gray-200,
- "300": $gray-300,
- "400": $gray-400,
- "500": $gray-500,
- "600": $gray-600,
- "700": $gray-700,
- "800": $gray-800,
- "900": $gray-900
- ),
- $grays
-);
-
-$blue: #007bff !default;
+// scss-docs-start color-variables
+$blue: #0d6efd !default;
$indigo: #6610f2 !default;
$purple: #6f42c1 !default;
-$pink: #e83e8c !default;
+$pink: #d63384 !default;
$red: #dc3545 !default;
$orange: #fd7e14 !default;
$yellow: #ffc107 !default;
-$green: #28a745 !default;
+$green: #198754 !default;
$teal: #20c997 !default;
-$cyan: #17a2b8 !default;
-
-$colors: () !default;
-// stylelint-disable-next-line scss/dollar-variable-default
-$colors: map-merge(
- (
- "blue": $blue,
- "indigo": $indigo,
- "purple": $purple,
- "pink": $pink,
- "red": $red,
- "orange": $orange,
- "yellow": $yellow,
- "green": $green,
- "teal": $teal,
- "cyan": $cyan,
- "white": $white,
- "gray": $gray-600,
- "gray-dark": $gray-800
- ),
- $colors
-);
+$cyan: #0dcaf0 !default;
+// scss-docs-end color-variables
+
+// scss-docs-start colors-map
+$colors: (
+ "blue": $blue,
+ "indigo": $indigo,
+ "purple": $purple,
+ "pink": $pink,
+ "red": $red,
+ "orange": $orange,
+ "yellow": $yellow,
+ "green": $green,
+ "teal": $teal,
+ "cyan": $cyan,
+ "black": $black,
+ "white": $white,
+ "gray": $gray-600,
+ "gray-dark": $gray-800
+) !default;
+// scss-docs-end colors-map
+
+// The contrast ratio to reach against white, to determine if color changes from "light" to "dark". Acceptable values for WCAG 2.0 are 3, 4.5 and 7.
+// See https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast
+$min-contrast-ratio: 4.5 !default;
+
+// Customize the light and dark text colors for use in our color contrast function.
+$color-contrast-dark: $black !default;
+$color-contrast-light: $white !default;
+
+// fusv-disable
+$blue-100: tint-color($blue, 80%) !default;
+$blue-200: tint-color($blue, 60%) !default;
+$blue-300: tint-color($blue, 40%) !default;
+$blue-400: tint-color($blue, 20%) !default;
+$blue-500: $blue !default;
+$blue-600: shade-color($blue, 20%) !default;
+$blue-700: shade-color($blue, 40%) !default;
+$blue-800: shade-color($blue, 60%) !default;
+$blue-900: shade-color($blue, 80%) !default;
+
+$indigo-100: tint-color($indigo, 80%) !default;
+$indigo-200: tint-color($indigo, 60%) !default;
+$indigo-300: tint-color($indigo, 40%) !default;
+$indigo-400: tint-color($indigo, 20%) !default;
+$indigo-500: $indigo !default;
+$indigo-600: shade-color($indigo, 20%) !default;
+$indigo-700: shade-color($indigo, 40%) !default;
+$indigo-800: shade-color($indigo, 60%) !default;
+$indigo-900: shade-color($indigo, 80%) !default;
+
+$purple-100: tint-color($purple, 80%) !default;
+$purple-200: tint-color($purple, 60%) !default;
+$purple-300: tint-color($purple, 40%) !default;
+$purple-400: tint-color($purple, 20%) !default;
+$purple-500: $purple !default;
+$purple-600: shade-color($purple, 20%) !default;
+$purple-700: shade-color($purple, 40%) !default;
+$purple-800: shade-color($purple, 60%) !default;
+$purple-900: shade-color($purple, 80%) !default;
+
+$pink-100: tint-color($pink, 80%) !default;
+$pink-200: tint-color($pink, 60%) !default;
+$pink-300: tint-color($pink, 40%) !default;
+$pink-400: tint-color($pink, 20%) !default;
+$pink-500: $pink !default;
+$pink-600: shade-color($pink, 20%) !default;
+$pink-700: shade-color($pink, 40%) !default;
+$pink-800: shade-color($pink, 60%) !default;
+$pink-900: shade-color($pink, 80%) !default;
+
+$red-100: tint-color($red, 80%) !default;
+$red-200: tint-color($red, 60%) !default;
+$red-300: tint-color($red, 40%) !default;
+$red-400: tint-color($red, 20%) !default;
+$red-500: $red !default;
+$red-600: shade-color($red, 20%) !default;
+$red-700: shade-color($red, 40%) !default;
+$red-800: shade-color($red, 60%) !default;
+$red-900: shade-color($red, 80%) !default;
+
+$orange-100: tint-color($orange, 80%) !default;
+$orange-200: tint-color($orange, 60%) !default;
+$orange-300: tint-color($orange, 40%) !default;
+$orange-400: tint-color($orange, 20%) !default;
+$orange-500: $orange !default;
+$orange-600: shade-color($orange, 20%) !default;
+$orange-700: shade-color($orange, 40%) !default;
+$orange-800: shade-color($orange, 60%) !default;
+$orange-900: shade-color($orange, 80%) !default;
+
+$yellow-100: tint-color($yellow, 80%) !default;
+$yellow-200: tint-color($yellow, 60%) !default;
+$yellow-300: tint-color($yellow, 40%) !default;
+$yellow-400: tint-color($yellow, 20%) !default;
+$yellow-500: $yellow !default;
+$yellow-600: shade-color($yellow, 20%) !default;
+$yellow-700: shade-color($yellow, 40%) !default;
+$yellow-800: shade-color($yellow, 60%) !default;
+$yellow-900: shade-color($yellow, 80%) !default;
+
+$green-100: tint-color($green, 80%) !default;
+$green-200: tint-color($green, 60%) !default;
+$green-300: tint-color($green, 40%) !default;
+$green-400: tint-color($green, 20%) !default;
+$green-500: $green !default;
+$green-600: shade-color($green, 20%) !default;
+$green-700: shade-color($green, 40%) !default;
+$green-800: shade-color($green, 60%) !default;
+$green-900: shade-color($green, 80%) !default;
+
+$teal-100: tint-color($teal, 80%) !default;
+$teal-200: tint-color($teal, 60%) !default;
+$teal-300: tint-color($teal, 40%) !default;
+$teal-400: tint-color($teal, 20%) !default;
+$teal-500: $teal !default;
+$teal-600: shade-color($teal, 20%) !default;
+$teal-700: shade-color($teal, 40%) !default;
+$teal-800: shade-color($teal, 60%) !default;
+$teal-900: shade-color($teal, 80%) !default;
+
+$cyan-100: tint-color($cyan, 80%) !default;
+$cyan-200: tint-color($cyan, 60%) !default;
+$cyan-300: tint-color($cyan, 40%) !default;
+$cyan-400: tint-color($cyan, 20%) !default;
+$cyan-500: $cyan !default;
+$cyan-600: shade-color($cyan, 20%) !default;
+$cyan-700: shade-color($cyan, 40%) !default;
+$cyan-800: shade-color($cyan, 60%) !default;
+$cyan-900: shade-color($cyan, 80%) !default;
+
+$blues: (
+ "blue-100": $blue-100,
+ "blue-200": $blue-200,
+ "blue-300": $blue-300,
+ "blue-400": $blue-400,
+ "blue-500": $blue-500,
+ "blue-600": $blue-600,
+ "blue-700": $blue-700,
+ "blue-800": $blue-800,
+ "blue-900": $blue-900
+) !default;
+
+$indigos: (
+ "indigo-100": $indigo-100,
+ "indigo-200": $indigo-200,
+ "indigo-300": $indigo-300,
+ "indigo-400": $indigo-400,
+ "indigo-500": $indigo-500,
+ "indigo-600": $indigo-600,
+ "indigo-700": $indigo-700,
+ "indigo-800": $indigo-800,
+ "indigo-900": $indigo-900
+) !default;
+
+$purples: (
+ "purple-100": $purple-100,
+ "purple-200": $purple-200,
+ "purple-300": $purple-300,
+ "purple-400": $purple-400,
+ "purple-500": $purple-500,
+ "purple-600": $purple-600,
+ "purple-700": $purple-700,
+ "purple-800": $purple-800,
+ "purple-900": $purple-900
+) !default;
+
+$pinks: (
+ "pink-100": $pink-100,
+ "pink-200": $pink-200,
+ "pink-300": $pink-300,
+ "pink-400": $pink-400,
+ "pink-500": $pink-500,
+ "pink-600": $pink-600,
+ "pink-700": $pink-700,
+ "pink-800": $pink-800,
+ "pink-900": $pink-900
+) !default;
+
+$reds: (
+ "red-100": $red-100,
+ "red-200": $red-200,
+ "red-300": $red-300,
+ "red-400": $red-400,
+ "red-500": $red-500,
+ "red-600": $red-600,
+ "red-700": $red-700,
+ "red-800": $red-800,
+ "red-900": $red-900
+) !default;
+
+$oranges: (
+ "orange-100": $orange-100,
+ "orange-200": $orange-200,
+ "orange-300": $orange-300,
+ "orange-400": $orange-400,
+ "orange-500": $orange-500,
+ "orange-600": $orange-600,
+ "orange-700": $orange-700,
+ "orange-800": $orange-800,
+ "orange-900": $orange-900
+) !default;
+
+$yellows: (
+ "yellow-100": $yellow-100,
+ "yellow-200": $yellow-200,
+ "yellow-300": $yellow-300,
+ "yellow-400": $yellow-400,
+ "yellow-500": $yellow-500,
+ "yellow-600": $yellow-600,
+ "yellow-700": $yellow-700,
+ "yellow-800": $yellow-800,
+ "yellow-900": $yellow-900
+) !default;
+$greens: (
+ "green-100": $green-100,
+ "green-200": $green-200,
+ "green-300": $green-300,
+ "green-400": $green-400,
+ "green-500": $green-500,
+ "green-600": $green-600,
+ "green-700": $green-700,
+ "green-800": $green-800,
+ "green-900": $green-900
+) !default;
+
+$teals: (
+ "teal-100": $teal-100,
+ "teal-200": $teal-200,
+ "teal-300": $teal-300,
+ "teal-400": $teal-400,
+ "teal-500": $teal-500,
+ "teal-600": $teal-600,
+ "teal-700": $teal-700,
+ "teal-800": $teal-800,
+ "teal-900": $teal-900
+) !default;
+
+$cyans: (
+ "cyan-100": $cyan-100,
+ "cyan-200": $cyan-200,
+ "cyan-300": $cyan-300,
+ "cyan-400": $cyan-400,
+ "cyan-500": $cyan-500,
+ "cyan-600": $cyan-600,
+ "cyan-700": $cyan-700,
+ "cyan-800": $cyan-800,
+ "cyan-900": $cyan-900
+) !default;
+// fusv-enable
+
+// scss-docs-start theme-color-variables
$primary: $blue !default;
$secondary: $gray-600 !default;
$success: $green !default;
@@ -73,60 +305,100 @@ $info: $cyan !default;
$warning: $yellow !default;
$danger: $red !default;
$light: $gray-100 !default;
-$dark: $gray-800 !default;
-
-$theme-colors: () !default;
-// stylelint-disable-next-line scss/dollar-variable-default
-$theme-colors: map-merge(
- (
- "primary": $primary,
- "secondary": $secondary,
- "success": $success,
- "info": $info,
- "warning": $warning,
- "danger": $danger,
- "light": $light,
- "dark": $dark
- ),
- $theme-colors
-);
-
-// Set a specific jump point for requesting color jumps
-$theme-color-interval: 8% !default;
-
-// The yiq lightness value that determines when the lightness of color changes from "dark" to "light". Acceptable values are between 0 and 255.
-$yiq-contrasted-threshold: 150 !default;
-
-// Customize the light and dark text colors for use in our YIQ color contrast function.
-$yiq-text-dark: $gray-900 !default;
-$yiq-text-light: $white !default;
+$dark: $gray-900 !default;
+// scss-docs-end theme-color-variables
+
+// scss-docs-start theme-colors-map
+$theme-colors: (
+ "primary": $primary,
+ "secondary": $secondary,
+ "success": $success,
+ "info": $info,
+ "warning": $warning,
+ "danger": $danger,
+ "light": $light,
+ "dark": $dark
+) !default;
+// scss-docs-end theme-colors-map
+
+// scss-docs-start theme-text-variables
+$primary-text-emphasis: shade-color($primary, 60%) !default;
+$secondary-text-emphasis: shade-color($secondary, 60%) !default;
+$success-text-emphasis: shade-color($success, 60%) !default;
+$info-text-emphasis: shade-color($info, 60%) !default;
+$warning-text-emphasis: shade-color($warning, 60%) !default;
+$danger-text-emphasis: shade-color($danger, 60%) !default;
+$light-text-emphasis: $gray-700 !default;
+$dark-text-emphasis: $gray-700 !default;
+// scss-docs-end theme-text-variables
+
+// scss-docs-start theme-bg-subtle-variables
+$primary-bg-subtle: tint-color($primary, 80%) !default;
+$secondary-bg-subtle: tint-color($secondary, 80%) !default;
+$success-bg-subtle: tint-color($success, 80%) !default;
+$info-bg-subtle: tint-color($info, 80%) !default;
+$warning-bg-subtle: tint-color($warning, 80%) !default;
+$danger-bg-subtle: tint-color($danger, 80%) !default;
+$light-bg-subtle: mix($gray-100, $white) !default;
+$dark-bg-subtle: $gray-400 !default;
+// scss-docs-end theme-bg-subtle-variables
+
+// scss-docs-start theme-border-subtle-variables
+$primary-border-subtle: tint-color($primary, 60%) !default;
+$secondary-border-subtle: tint-color($secondary, 60%) !default;
+$success-border-subtle: tint-color($success, 60%) !default;
+$info-border-subtle: tint-color($info, 60%) !default;
+$warning-border-subtle: tint-color($warning, 60%) !default;
+$danger-border-subtle: tint-color($danger, 60%) !default;
+$light-border-subtle: $gray-200 !default;
+$dark-border-subtle: $gray-500 !default;
+// scss-docs-end theme-border-subtle-variables
// Characters which are escaped by the escape-svg function
$escaped-characters: (
- ("<","%3c"),
- (">","%3e"),
- ("#","%23"),
+ ("<", "%3c"),
+ (">", "%3e"),
+ ("#", "%23"),
+ ("(", "%28"),
+ (")", "%29"),
) !default;
-
// Options
//
// Quickly modify global styling by enabling or disabling optional features.
-$enable-caret: true !default;
-$enable-rounded: true !default;
-$enable-shadows: false !default;
-$enable-gradients: false !default;
-$enable-transitions: true !default;
-$enable-prefers-reduced-motion-media-query: true !default;
-$enable-hover-media-query: false !default; // Deprecated, no longer affects any compiled CSS
-$enable-grid-classes: true !default;
-$enable-pointer-cursor-for-buttons: true !default;
-$enable-print-styles: true !default;
-$enable-responsive-font-sizes: false !default;
-$enable-validation-icons: true !default;
-$enable-deprecation-messages: true !default;
-
+$enable-caret: true !default;
+$enable-rounded: true !default;
+$enable-shadows: false !default;
+$enable-gradients: false !default;
+$enable-transitions: true !default;
+$enable-reduced-motion: true !default;
+$enable-smooth-scroll: true !default;
+$enable-grid-classes: true !default;
+$enable-container-classes: true !default;
+$enable-cssgrid: false !default;
+$enable-button-pointers: true !default;
+$enable-rfs: true !default;
+$enable-validation-icons: true !default;
+$enable-negative-margins: false !default;
+$enable-deprecation-messages: true !default;
+$enable-important-utilities: true !default;
+
+$enable-dark-mode: true !default;
+$color-mode-type: data !default; // `data` or `media-query`
+
+// Prefix for :root CSS variables
+
+$variable-prefix: bs- !default; // Deprecated in v5.2.0 for the shorter `$prefix`
+$prefix: $variable-prefix !default;
+
+// Gradient
+//
+// The gradient which is added to components if `$enable-gradients` is `true`
+// This gradient is also added to elements with `.bg-gradient`
+// scss-docs-start variable-gradient
+$gradient: linear-gradient(180deg, rgba($white, .15), rgba($white, 0)) !default;
+// scss-docs-end variable-gradient
// Spacing
//
@@ -134,54 +406,67 @@ $enable-deprecation-messages: true !default;
// variables. Mostly focused on spacing.
// You can add more entries to the $spacers map, should you need more variation.
+// scss-docs-start spacer-variables-maps
$spacer: 1rem !default;
-$spacers: () !default;
-// stylelint-disable-next-line scss/dollar-variable-default
-$spacers: map-merge(
- (
- 0: 0,
- 1: ($spacer * .25),
- 2: ($spacer * .5),
- 3: $spacer,
- 4: ($spacer * 1.5),
- 5: ($spacer * 3)
- ),
- $spacers
-);
-
-// This variable affects the `.h-*` and `.w-*` classes.
-$sizes: () !default;
-// stylelint-disable-next-line scss/dollar-variable-default
-$sizes: map-merge(
- (
- 25: 25%,
- 50: 50%,
- 75: 75%,
- 100: 100%,
- auto: auto
- ),
- $sizes
-);
+$spacers: (
+ 0: 0,
+ 1: $spacer * .25,
+ 2: $spacer * .5,
+ 3: $spacer,
+ 4: $spacer * 1.5,
+ 5: $spacer * 3,
+) !default;
+// scss-docs-end spacer-variables-maps
+// Position
+//
+// Define the edge positioning anchors of the position utilities.
+
+// scss-docs-start position-map
+$position-values: (
+ 0: 0,
+ 50: 50%,
+ 100: 100%
+) !default;
+// scss-docs-end position-map
// Body
//
// Settings for the `` element.
-$body-bg: $white !default;
+$body-text-align: null !default;
$body-color: $gray-900 !default;
+$body-bg: $white !default;
+$body-secondary-color: rgba($body-color, .75) !default;
+$body-secondary-bg: $gray-200 !default;
+
+$body-tertiary-color: rgba($body-color, .5) !default;
+$body-tertiary-bg: $gray-100 !default;
+
+$body-emphasis-color: $black !default;
// Links
//
// Style anchor elements.
-$link-color: theme-color("primary") !default;
-$link-decoration: none !default;
-$link-hover-color: darken($link-color, 15%) !default;
-$link-hover-decoration: underline !default;
-// Darken percentage for links with `.text-*` class (e.g. `.text-success`)
-$emphasized-link-hover-darken-percentage: 15% !default;
+$link-color: $primary !default;
+$link-decoration: underline !default;
+$link-shade-percentage: 20% !default;
+$link-hover-color: shift-color($link-color, $link-shade-percentage) !default;
+$link-hover-decoration: null !default;
+
+$stretched-link-pseudo-element: after !default;
+$stretched-link-z-index: 1 !default;
+
+// Icon links
+// scss-docs-start icon-link-variables
+$icon-link-gap: .375rem !default;
+$icon-link-underline-offset: .25em !default;
+$icon-link-icon-size: 1em !default;
+$icon-link-icon-transition: .2s ease-in-out transform !default;
+$icon-link-icon-transform: translate3d(.25em, 0, 0) !default;
+// scss-docs-end icon-link-variables
// Paragraphs
//
@@ -195,13 +480,16 @@ $paragraph-margin-bottom: 1rem !default;
// Define the minimum dimensions at which your layout will change,
// adapting to different screen sizes, for use in media queries.
+// scss-docs-start grid-breakpoints
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
- xl: 1200px
+ xl: 1200px,
+ xxl: 1400px
) !default;
+// scss-docs-end grid-breakpoints
@include _assert-ascending($grid-breakpoints, "$grid-breakpoints");
@include _assert-starts-at-zero($grid-breakpoints, "$grid-breakpoints");
@@ -211,12 +499,15 @@ $grid-breakpoints: (
//
// Define the maximum width of `.container` for different screen sizes.
+// scss-docs-start container-max-widths
$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
- xl: 1140px
+ xl: 1140px,
+ xxl: 1320px
) !default;
+// scss-docs-end container-max-widths
@include _assert-ascending($container-max-widths, "$container-max-widths");
@@ -226,75 +517,118 @@ $container-max-widths: (
// Set the number of columns and specify the width of the gutters.
$grid-columns: 12 !default;
-$grid-gutter-width: 30px !default;
+$grid-gutter-width: 1.5rem !default;
$grid-row-columns: 6 !default;
+// Container padding
+
+$container-padding-x: $grid-gutter-width !default;
+
// Components
//
// Define common padding and border radius sizes and more.
-$line-height-lg: 1.5 !default;
-$line-height-sm: 1.5 !default;
-
+// scss-docs-start border-variables
$border-width: 1px !default;
+$border-widths: (
+ 1: 1px,
+ 2: 2px,
+ 3: 3px,
+ 4: 4px,
+ 5: 5px
+) !default;
+$border-style: solid !default;
$border-color: $gray-300 !default;
-
-$border-radius: .25rem !default;
-$border-radius-lg: .3rem !default;
-$border-radius-sm: .2rem !default;
-
-$rounded-pill: 50rem !default;
-
-$box-shadow-sm: 0 .125rem .25rem rgba($black, .075) !default;
+$border-color-translucent: rgba($black, .175) !default;
+// scss-docs-end border-variables
+
+// scss-docs-start border-radius-variables
+$border-radius: .375rem !default;
+$border-radius-sm: .25rem !default;
+$border-radius-lg: .5rem !default;
+$border-radius-xl: 1rem !default;
+$border-radius-xxl: 2rem !default;
+$border-radius-pill: 50rem !default;
+// scss-docs-end border-radius-variables
+// fusv-disable
+$border-radius-2xl: $border-radius-xxl !default; // Deprecated in v5.3.0
+// fusv-enable
+
+// scss-docs-start box-shadow-variables
$box-shadow: 0 .5rem 1rem rgba($black, .15) !default;
+$box-shadow-sm: 0 .125rem .25rem rgba($black, .075) !default;
$box-shadow-lg: 0 1rem 3rem rgba($black, .175) !default;
+$box-shadow-inset: inset 0 1px 2px rgba($black, .075) !default;
+// scss-docs-end box-shadow-variables
$component-active-color: $white !default;
-$component-active-bg: theme-color("primary") !default;
+$component-active-bg: $primary !default;
+
+// scss-docs-start focus-ring-variables
+$focus-ring-width: .25rem !default;
+$focus-ring-opacity: .25 !default;
+$focus-ring-color: rgba($primary, $focus-ring-opacity) !default;
+$focus-ring-blur: 0 !default;
+$focus-ring-box-shadow: 0 0 $focus-ring-blur $focus-ring-width $focus-ring-color !default;
+// scss-docs-end focus-ring-variables
+// scss-docs-start caret-variables
$caret-width: .3em !default;
$caret-vertical-align: $caret-width * .85 !default;
$caret-spacing: $caret-width * .85 !default;
+// scss-docs-end caret-variables
$transition-base: all .2s ease-in-out !default;
$transition-fade: opacity .15s linear !default;
+// scss-docs-start collapse-transition
$transition-collapse: height .35s ease !default;
-
-$embed-responsive-aspect-ratios: () !default;
-// stylelint-disable-next-line scss/dollar-variable-default
-$embed-responsive-aspect-ratios: join(
- (
- (21 9),
- (16 9),
- (4 3),
- (1 1),
- ),
- $embed-responsive-aspect-ratios
-);
+$transition-collapse-width: width .35s ease !default;
+// scss-docs-end collapse-transition
+
+// stylelint-disable function-disallowed-list
+// scss-docs-start aspect-ratios
+$aspect-ratios: (
+ "1x1": 100%,
+ "4x3": calc(3 / 4 * 100%),
+ "16x9": calc(9 / 16 * 100%),
+ "21x9": calc(9 / 21 * 100%)
+) !default;
+// scss-docs-end aspect-ratios
+// stylelint-enable function-disallowed-list
// Typography
//
// Font, line-height, and color for body text, headings, and more.
+// scss-docs-start font-variables
// stylelint-disable value-keyword-case
-$font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
+$font-family-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
$font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
-$font-family-base: $font-family-sans-serif !default;
// stylelint-enable value-keyword-case
+$font-family-base: var(--#{$prefix}font-sans-serif) !default;
+$font-family-code: var(--#{$prefix}font-monospace) !default;
+// $font-size-root affects the value of `rem`, which is used for as well font sizes, paddings, and margins
+// $font-size-base affects the font size of the body text
+$font-size-root: null !default;
$font-size-base: 1rem !default; // Assumes the browser default, typically `16px`
-$font-size-lg: $font-size-base * 1.25 !default;
$font-size-sm: $font-size-base * .875 !default;
+$font-size-lg: $font-size-base * 1.25 !default;
$font-weight-lighter: lighter !default;
$font-weight-light: 300 !default;
$font-weight-normal: 400 !default;
+$font-weight-medium: 500 !default;
+$font-weight-semibold: 600 !default;
$font-weight-bold: 700 !default;
$font-weight-bolder: bolder !default;
$font-weight-base: $font-weight-normal !default;
+
$line-height-base: 1.5 !default;
+$line-height-sm: 1.25 !default;
+$line-height-lg: 2 !default;
$h1-font-size: $font-size-base * 2.5 !default;
$h2-font-size: $font-size-base * 2 !default;
@@ -302,118 +636,181 @@ $h3-font-size: $font-size-base * 1.75 !default;
$h4-font-size: $font-size-base * 1.5 !default;
$h5-font-size: $font-size-base * 1.25 !default;
$h6-font-size: $font-size-base !default;
+// scss-docs-end font-variables
+
+// scss-docs-start font-sizes
+$font-sizes: (
+ 1: $h1-font-size,
+ 2: $h2-font-size,
+ 3: $h3-font-size,
+ 4: $h4-font-size,
+ 5: $h5-font-size,
+ 6: $h6-font-size
+) !default;
+// scss-docs-end font-sizes
-$headings-margin-bottom: $spacer / 2 !default;
+// scss-docs-start headings-variables
+$headings-margin-bottom: $spacer * .5 !default;
$headings-font-family: null !default;
+$headings-font-style: null !default;
$headings-font-weight: 500 !default;
$headings-line-height: 1.2 !default;
-$headings-color: null !default;
-
-$display1-size: 6rem !default;
-$display2-size: 5.5rem !default;
-$display3-size: 4.5rem !default;
-$display4-size: 3.5rem !default;
+$headings-color: inherit !default;
+// scss-docs-end headings-variables
+
+// scss-docs-start display-headings
+$display-font-sizes: (
+ 1: 5rem,
+ 2: 4.5rem,
+ 3: 4rem,
+ 4: 3.5rem,
+ 5: 3rem,
+ 6: 2.5rem
+) !default;
-$display1-weight: 300 !default;
-$display2-weight: 300 !default;
-$display3-weight: 300 !default;
-$display4-weight: 300 !default;
-$display-line-height: $headings-line-height !default;
+$display-font-family: null !default;
+$display-font-style: null !default;
+$display-font-weight: 300 !default;
+$display-line-height: $headings-line-height !default;
+// scss-docs-end display-headings
+// scss-docs-start type-variables
$lead-font-size: $font-size-base * 1.25 !default;
$lead-font-weight: 300 !default;
-$small-font-size: 80% !default;
+$small-font-size: .875em !default;
+
+$sub-sup-font-size: .75em !default;
+
+// fusv-disable
+$text-muted: var(--#{$prefix}secondary-color) !default; // Deprecated in 5.3.0
+// fusv-enable
-$text-muted: $gray-600 !default;
+$initialism-font-size: $small-font-size !default;
-$blockquote-small-color: $gray-600 !default;
-$blockquote-small-font-size: $small-font-size !default;
+$blockquote-margin-y: $spacer !default;
$blockquote-font-size: $font-size-base * 1.25 !default;
+$blockquote-footer-color: $gray-600 !default;
+$blockquote-footer-font-size: $small-font-size !default;
-$hr-border-color: rgba($black, .1) !default;
-$hr-border-width: $border-width !default;
+$hr-margin-y: $spacer !default;
+$hr-color: inherit !default;
-$mark-padding: .2em !default;
+// fusv-disable
+$hr-bg-color: null !default; // Deprecated in v5.2.0
+$hr-height: null !default; // Deprecated in v5.2.0
+// fusv-enable
-$dt-font-weight: $font-weight-bold !default;
+$hr-border-color: null !default; // Allows for inherited colors
+$hr-border-width: var(--#{$prefix}border-width) !default;
+$hr-opacity: .25 !default;
-$kbd-box-shadow: inset 0 -.1rem 0 rgba($black, .25) !default;
-$nested-kbd-font-weight: $font-weight-bold !default;
+$legend-margin-bottom: .5rem !default;
+$legend-font-size: 1.5rem !default;
+$legend-font-weight: null !default;
-$list-inline-padding: .5rem !default;
+$dt-font-weight: $font-weight-bold !default;
-$mark-bg: #fcf8e3 !default;
+$list-inline-padding: .5rem !default;
-$hr-margin-y: $spacer !default;
+$mark-padding: .1875em !default;
+$mark-bg: $yellow-100 !default;
+// scss-docs-end type-variables
// Tables
//
// Customizes the `.table` component with basic values, each used across all table variations.
-$table-cell-padding: .75rem !default;
-$table-cell-padding-sm: .3rem !default;
+// scss-docs-start table-variables
+$table-cell-padding-y: .5rem !default;
+$table-cell-padding-x: .5rem !default;
+$table-cell-padding-y-sm: .25rem !default;
+$table-cell-padding-x-sm: .25rem !default;
-$table-color: $body-color !default;
-$table-bg: null !default;
-$table-accent-bg: rgba($black, .05) !default;
-$table-hover-color: $table-color !default;
-$table-hover-bg: rgba($black, .075) !default;
-$table-active-bg: $table-hover-bg !default;
+$table-cell-vertical-align: top !default;
-$table-border-width: $border-width !default;
-$table-border-color: $border-color !default;
+$table-color: var(--#{$prefix}body-color) !default;
+$table-bg: var(--#{$prefix}body-bg) !default;
+$table-accent-bg: transparent !default;
-$table-head-bg: $gray-200 !default;
-$table-head-color: $gray-700 !default;
+$table-th-font-weight: null !default;
-$table-dark-color: $white !default;
-$table-dark-bg: $gray-800 !default;
-$table-dark-accent-bg: rgba($white, .05) !default;
-$table-dark-hover-color: $table-dark-color !default;
-$table-dark-hover-bg: rgba($white, .075) !default;
-$table-dark-border-color: lighten($table-dark-bg, 7.5%) !default;
+$table-striped-color: $table-color !default;
+$table-striped-bg-factor: .05 !default;
+$table-striped-bg: rgba($black, $table-striped-bg-factor) !default;
+
+$table-active-color: $table-color !default;
+$table-active-bg-factor: .1 !default;
+$table-active-bg: rgba($black, $table-active-bg-factor) !default;
+
+$table-hover-color: $table-color !default;
+$table-hover-bg-factor: .075 !default;
+$table-hover-bg: rgba($black, $table-hover-bg-factor) !default;
+
+$table-border-factor: .1 !default;
+$table-border-width: var(--#{$prefix}border-width) !default;
+$table-border-color: var(--#{$prefix}border-color) !default;
$table-striped-order: odd !default;
+$table-striped-columns-order: even !default;
+
+$table-group-separator-color: currentcolor !default;
+
+$table-caption-color: var(--#{$prefix}secondary-color) !default;
-$table-caption-color: $text-muted !default;
+$table-bg-scale: -80% !default;
+// scss-docs-end table-variables
-$table-bg-level: -9 !default;
-$table-border-level: -6 !default;
+// scss-docs-start table-loop
+$table-variants: (
+ "primary": shift-color($primary, $table-bg-scale),
+ "secondary": shift-color($secondary, $table-bg-scale),
+ "success": shift-color($success, $table-bg-scale),
+ "info": shift-color($info, $table-bg-scale),
+ "warning": shift-color($warning, $table-bg-scale),
+ "danger": shift-color($danger, $table-bg-scale),
+ "light": $light,
+ "dark": $dark,
+) !default;
+// scss-docs-end table-loop
// Buttons + Forms
//
// Shared variables that are reassigned to `$input-` and `$btn-` specific variables.
+// scss-docs-start input-btn-variables
$input-btn-padding-y: .375rem !default;
$input-btn-padding-x: .75rem !default;
$input-btn-font-family: null !default;
$input-btn-font-size: $font-size-base !default;
$input-btn-line-height: $line-height-base !default;
-$input-btn-focus-width: .2rem !default;
-$input-btn-focus-color: rgba($component-active-bg, .25) !default;
-$input-btn-focus-box-shadow: 0 0 0 $input-btn-focus-width $input-btn-focus-color !default;
+$input-btn-focus-width: $focus-ring-width !default;
+$input-btn-focus-color-opacity: $focus-ring-opacity !default;
+$input-btn-focus-color: $focus-ring-color !default;
+$input-btn-focus-blur: $focus-ring-blur !default;
+$input-btn-focus-box-shadow: $focus-ring-box-shadow !default;
$input-btn-padding-y-sm: .25rem !default;
$input-btn-padding-x-sm: .5rem !default;
$input-btn-font-size-sm: $font-size-sm !default;
-$input-btn-line-height-sm: $line-height-sm !default;
$input-btn-padding-y-lg: .5rem !default;
$input-btn-padding-x-lg: 1rem !default;
$input-btn-font-size-lg: $font-size-lg !default;
-$input-btn-line-height-lg: $line-height-lg !default;
-$input-btn-border-width: $border-width !default;
+$input-btn-border-width: var(--#{$prefix}border-width) !default;
+// scss-docs-end input-btn-variables
// Buttons
//
// For each of Bootstrap's buttons, define text, background, and border color.
+// scss-docs-start btn-variables
+$btn-color: var(--#{$prefix}body-color) !default;
$btn-padding-y: $input-btn-padding-y !default;
$btn-padding-x: $input-btn-padding-x !default;
$btn-font-family: $input-btn-font-family !default;
@@ -424,12 +821,10 @@ $btn-white-space: null !default; // Set to `nowrap` to prevent text
$btn-padding-y-sm: $input-btn-padding-y-sm !default;
$btn-padding-x-sm: $input-btn-padding-x-sm !default;
$btn-font-size-sm: $input-btn-font-size-sm !default;
-$btn-line-height-sm: $input-btn-line-height-sm !default;
$btn-padding-y-lg: $input-btn-padding-y-lg !default;
$btn-padding-x-lg: $input-btn-padding-x-lg !default;
$btn-font-size-lg: $input-btn-font-size-lg !default;
-$btn-line-height-lg: $input-btn-line-height-lg !default;
$btn-border-width: $input-btn-border-width !default;
@@ -440,22 +835,47 @@ $btn-focus-box-shadow: $input-btn-focus-box-shadow !default;
$btn-disabled-opacity: .65 !default;
$btn-active-box-shadow: inset 0 3px 5px rgba($black, .125) !default;
+$btn-link-color: var(--#{$prefix}link-color) !default;
+$btn-link-hover-color: var(--#{$prefix}link-hover-color) !default;
$btn-link-disabled-color: $gray-600 !default;
-$btn-block-spacing-y: .5rem !default;
-
// Allows for customizing button radius independently from global border radius
-$btn-border-radius: $border-radius !default;
-$btn-border-radius-lg: $border-radius-lg !default;
-$btn-border-radius-sm: $border-radius-sm !default;
+$btn-border-radius: var(--#{$prefix}border-radius) !default;
+$btn-border-radius-sm: var(--#{$prefix}border-radius-sm) !default;
+$btn-border-radius-lg: var(--#{$prefix}border-radius-lg) !default;
$btn-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
+$btn-hover-bg-shade-amount: 15% !default;
+$btn-hover-bg-tint-amount: 15% !default;
+$btn-hover-border-shade-amount: 20% !default;
+$btn-hover-border-tint-amount: 10% !default;
+$btn-active-bg-shade-amount: 20% !default;
+$btn-active-bg-tint-amount: 20% !default;
+$btn-active-border-shade-amount: 25% !default;
+$btn-active-border-tint-amount: 10% !default;
+// scss-docs-end btn-variables
-// Forms
-$label-margin-bottom: .5rem !default;
+// Forms
+// scss-docs-start form-text-variables
+$form-text-margin-top: .25rem !default;
+$form-text-font-size: $small-font-size !default;
+$form-text-font-style: null !default;
+$form-text-font-weight: null !default;
+$form-text-color: var(--#{$prefix}secondary-color) !default;
+// scss-docs-end form-text-variables
+
+// scss-docs-start form-label-variables
+$form-label-margin-bottom: .5rem !default;
+$form-label-font-size: null !default;
+$form-label-font-style: null !default;
+$form-label-font-weight: null !default;
+$form-label-color: null !default;
+// scss-docs-end form-label-variables
+
+// scss-docs-start form-input-variables
$input-padding-y: $input-btn-padding-y !default;
$input-padding-x: $input-btn-padding-x !default;
$input-font-family: $input-btn-font-family !default;
@@ -466,261 +886,303 @@ $input-line-height: $input-btn-line-height !default;
$input-padding-y-sm: $input-btn-padding-y-sm !default;
$input-padding-x-sm: $input-btn-padding-x-sm !default;
$input-font-size-sm: $input-btn-font-size-sm !default;
-$input-line-height-sm: $input-btn-line-height-sm !default;
$input-padding-y-lg: $input-btn-padding-y-lg !default;
$input-padding-x-lg: $input-btn-padding-x-lg !default;
$input-font-size-lg: $input-btn-font-size-lg !default;
-$input-line-height-lg: $input-btn-line-height-lg !default;
-$input-bg: $white !default;
-$input-disabled-bg: $gray-200 !default;
+$input-bg: var(--#{$prefix}body-bg) !default;
+$input-disabled-color: null !default;
+$input-disabled-bg: var(--#{$prefix}secondary-bg) !default;
+$input-disabled-border-color: null !default;
-$input-color: $gray-700 !default;
-$input-border-color: $gray-400 !default;
+$input-color: var(--#{$prefix}body-color) !default;
+$input-border-color: var(--#{$prefix}border-color) !default;
$input-border-width: $input-btn-border-width !default;
-$input-box-shadow: inset 0 1px 1px rgba($black, .075) !default;
+$input-box-shadow: $box-shadow-inset !default;
-$input-border-radius: $border-radius !default;
-$input-border-radius-lg: $border-radius-lg !default;
-$input-border-radius-sm: $border-radius-sm !default;
+$input-border-radius: var(--#{$prefix}border-radius) !default;
+$input-border-radius-sm: var(--#{$prefix}border-radius-sm) !default;
+$input-border-radius-lg: var(--#{$prefix}border-radius-lg) !default;
$input-focus-bg: $input-bg !default;
-$input-focus-border-color: lighten($component-active-bg, 25%) !default;
+$input-focus-border-color: tint-color($component-active-bg, 50%) !default;
$input-focus-color: $input-color !default;
$input-focus-width: $input-btn-focus-width !default;
$input-focus-box-shadow: $input-btn-focus-box-shadow !default;
-$input-placeholder-color: $gray-600 !default;
-$input-plaintext-color: $body-color !default;
+$input-placeholder-color: var(--#{$prefix}secondary-color) !default;
+$input-plaintext-color: var(--#{$prefix}body-color) !default;
-$input-height-border: $input-border-width * 2 !default;
+$input-height-border: calc(#{$input-border-width} * 2) !default; // stylelint-disable-line function-disallowed-list
$input-height-inner: add($input-line-height * 1em, $input-padding-y * 2) !default;
$input-height-inner-half: add($input-line-height * .5em, $input-padding-y) !default;
-$input-height-inner-quarter: add($input-line-height * .25em, $input-padding-y / 2) !default;
+$input-height-inner-quarter: add($input-line-height * .25em, $input-padding-y * .5) !default;
$input-height: add($input-line-height * 1em, add($input-padding-y * 2, $input-height-border, false)) !default;
-$input-height-sm: add($input-line-height-sm * 1em, add($input-padding-y-sm * 2, $input-height-border, false)) !default;
-$input-height-lg: add($input-line-height-lg * 1em, add($input-padding-y-lg * 2, $input-height-border, false)) !default;
+$input-height-sm: add($input-line-height * 1em, add($input-padding-y-sm * 2, $input-height-border, false)) !default;
+$input-height-lg: add($input-line-height * 1em, add($input-padding-y-lg * 2, $input-height-border, false)) !default;
$input-transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
-$form-text-margin-top: .25rem !default;
-
-$form-check-input-gutter: 1.25rem !default;
-$form-check-input-margin-y: .3rem !default;
-$form-check-input-margin-x: .25rem !default;
-
-$form-check-inline-margin-x: .75rem !default;
-$form-check-inline-input-margin-x: .3125rem !default;
-
-$form-grid-gutter-width: 10px !default;
-$form-group-margin-bottom: 1rem !default;
-
+$form-color-width: 3rem !default;
+// scss-docs-end form-input-variables
+
+// scss-docs-start form-check-variables
+$form-check-input-width: 1em !default;
+$form-check-min-height: $font-size-base * $line-height-base !default;
+$form-check-padding-start: $form-check-input-width + .5em !default;
+$form-check-margin-bottom: .125rem !default;
+$form-check-label-color: null !default;
+$form-check-label-cursor: null !default;
+$form-check-transition: null !default;
+
+$form-check-input-active-filter: brightness(90%) !default;
+
+$form-check-input-bg: $input-bg !default;
+$form-check-input-border: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color) !default;
+$form-check-input-border-radius: .25em !default;
+$form-check-radio-border-radius: 50% !default;
+$form-check-input-focus-border: $input-focus-border-color !default;
+$form-check-input-focus-box-shadow: $focus-ring-box-shadow !default;
+
+$form-check-input-checked-color: $component-active-color !default;
+$form-check-input-checked-bg-color: $component-active-bg !default;
+$form-check-input-checked-border-color: $form-check-input-checked-bg-color !default;
+$form-check-input-checked-bg-image: url("data:image/svg+xml,
") !default;
+$form-check-radio-checked-bg-image: url("data:image/svg+xml,
") !default;
+
+$form-check-input-indeterminate-color: $component-active-color !default;
+$form-check-input-indeterminate-bg-color: $component-active-bg !default;
+$form-check-input-indeterminate-border-color: $form-check-input-indeterminate-bg-color !default;
+$form-check-input-indeterminate-bg-image: url("data:image/svg+xml,
") !default;
+
+$form-check-input-disabled-opacity: .5 !default;
+$form-check-label-disabled-opacity: $form-check-input-disabled-opacity !default;
+$form-check-btn-check-disabled-opacity: $btn-disabled-opacity !default;
+
+$form-check-inline-margin-end: 1rem !default;
+// scss-docs-end form-check-variables
+
+// scss-docs-start form-switch-variables
+$form-switch-color: rgba($black, .25) !default;
+$form-switch-width: 2em !default;
+$form-switch-padding-start: $form-switch-width + .5em !default;
+$form-switch-bg-image: url("data:image/svg+xml,
") !default;
+$form-switch-border-radius: $form-switch-width !default;
+$form-switch-transition: background-position .15s ease-in-out !default;
+
+$form-switch-focus-color: $input-focus-border-color !default;
+$form-switch-focus-bg-image: url("data:image/svg+xml,
") !default;
+
+$form-switch-checked-color: $component-active-color !default;
+$form-switch-checked-bg-image: url("data:image/svg+xml,
") !default;
+$form-switch-checked-bg-position: right center !default;
+// scss-docs-end form-switch-variables
+
+// scss-docs-start input-group-variables
+$input-group-addon-padding-y: $input-padding-y !default;
+$input-group-addon-padding-x: $input-padding-x !default;
+$input-group-addon-font-weight: $input-font-weight !default;
$input-group-addon-color: $input-color !default;
-$input-group-addon-bg: $gray-200 !default;
+$input-group-addon-bg: var(--#{$prefix}tertiary-bg) !default;
$input-group-addon-border-color: $input-border-color !default;
-
-$custom-forms-transition: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
-
-$custom-control-gutter: .5rem !default;
-$custom-control-spacer-x: 1rem !default;
-$custom-control-cursor: null !default;
-
-$custom-control-indicator-size: 1rem !default;
-$custom-control-indicator-bg: $input-bg !default;
-
-$custom-control-indicator-bg-size: 50% 50% !default;
-$custom-control-indicator-box-shadow: $input-box-shadow !default;
-$custom-control-indicator-border-color: $gray-500 !default;
-$custom-control-indicator-border-width: $input-border-width !default;
-
-$custom-control-label-color: null !default;
-
-$custom-control-indicator-disabled-bg: $input-disabled-bg !default;
-$custom-control-label-disabled-color: $gray-600 !default;
-
-$custom-control-indicator-checked-color: $component-active-color !default;
-$custom-control-indicator-checked-bg: $component-active-bg !default;
-$custom-control-indicator-checked-disabled-bg: rgba(theme-color("primary"), .5) !default;
-$custom-control-indicator-checked-box-shadow: none !default;
-$custom-control-indicator-checked-border-color: $custom-control-indicator-checked-bg !default;
-
-$custom-control-indicator-focus-box-shadow: $input-focus-box-shadow !default;
-$custom-control-indicator-focus-border-color: $input-focus-border-color !default;
-
-$custom-control-indicator-active-color: $component-active-color !default;
-$custom-control-indicator-active-bg: lighten($component-active-bg, 35%) !default;
-$custom-control-indicator-active-box-shadow: none !default;
-$custom-control-indicator-active-border-color: $custom-control-indicator-active-bg !default;
-
-$custom-checkbox-indicator-border-radius: $border-radius !default;
-$custom-checkbox-indicator-icon-checked: url("data:image/svg+xml,
") !default;
-
-$custom-checkbox-indicator-indeterminate-bg: $component-active-bg !default;
-$custom-checkbox-indicator-indeterminate-color: $custom-control-indicator-checked-color !default;
-$custom-checkbox-indicator-icon-indeterminate: url("data:image/svg+xml,
") !default;
-$custom-checkbox-indicator-indeterminate-box-shadow: none !default;
-$custom-checkbox-indicator-indeterminate-border-color: $custom-checkbox-indicator-indeterminate-bg !default;
-
-$custom-radio-indicator-border-radius: 50% !default;
-$custom-radio-indicator-icon-checked: url("data:image/svg+xml,
") !default;
-
-$custom-switch-width: $custom-control-indicator-size * 1.75 !default;
-$custom-switch-indicator-border-radius: $custom-control-indicator-size / 2 !default;
-$custom-switch-indicator-size: subtract($custom-control-indicator-size, $custom-control-indicator-border-width * 4) !default;
-
-$custom-select-padding-y: $input-padding-y !default;
-$custom-select-padding-x: $input-padding-x !default;
-$custom-select-font-family: $input-font-family !default;
-$custom-select-font-size: $input-font-size !default;
-$custom-select-height: $input-height !default;
-$custom-select-indicator-padding: 1rem !default; // Extra padding to account for the presence of the background-image based indicator
-$custom-select-font-weight: $input-font-weight !default;
-$custom-select-line-height: $input-line-height !default;
-$custom-select-color: $input-color !default;
-$custom-select-disabled-color: $gray-600 !default;
-$custom-select-bg: $input-bg !default;
-$custom-select-disabled-bg: $gray-200 !default;
-$custom-select-bg-size: 8px 10px !default; // In pixels because image dimensions
-$custom-select-indicator-color: $gray-800 !default;
-$custom-select-indicator: url("data:image/svg+xml,
") !default;
-$custom-select-background: escape-svg($custom-select-indicator) no-repeat right $custom-select-padding-x center / $custom-select-bg-size !default; // Used so we can have multiple background elements (e.g., arrow and feedback icon)
-
-$custom-select-feedback-icon-padding-right: add(1em * .75, (2 * $custom-select-padding-y * .75) + $custom-select-padding-x + $custom-select-indicator-padding) !default;
-$custom-select-feedback-icon-position: center right ($custom-select-padding-x + $custom-select-indicator-padding) !default;
-$custom-select-feedback-icon-size: $input-height-inner-half $input-height-inner-half !default;
-
-$custom-select-border-width: $input-border-width !default;
-$custom-select-border-color: $input-border-color !default;
-$custom-select-border-radius: $border-radius !default;
-$custom-select-box-shadow: inset 0 1px 2px rgba($black, .075) !default;
-
-$custom-select-focus-border-color: $input-focus-border-color !default;
-$custom-select-focus-width: $input-focus-width !default;
-$custom-select-focus-box-shadow: 0 0 0 $custom-select-focus-width $input-btn-focus-color !default;
-
-$custom-select-padding-y-sm: $input-padding-y-sm !default;
-$custom-select-padding-x-sm: $input-padding-x-sm !default;
-$custom-select-font-size-sm: $input-font-size-sm !default;
-$custom-select-height-sm: $input-height-sm !default;
-
-$custom-select-padding-y-lg: $input-padding-y-lg !default;
-$custom-select-padding-x-lg: $input-padding-x-lg !default;
-$custom-select-font-size-lg: $input-font-size-lg !default;
-$custom-select-height-lg: $input-height-lg !default;
-
-$custom-range-track-width: 100% !default;
-$custom-range-track-height: .5rem !default;
-$custom-range-track-cursor: pointer !default;
-$custom-range-track-bg: $gray-300 !default;
-$custom-range-track-border-radius: 1rem !default;
-$custom-range-track-box-shadow: inset 0 .25rem .25rem rgba($black, .1) !default;
-
-$custom-range-thumb-width: 1rem !default;
-$custom-range-thumb-height: $custom-range-thumb-width !default;
-$custom-range-thumb-bg: $component-active-bg !default;
-$custom-range-thumb-border: 0 !default;
-$custom-range-thumb-border-radius: 1rem !default;
-$custom-range-thumb-box-shadow: 0 .1rem .25rem rgba($black, .1) !default;
-$custom-range-thumb-focus-box-shadow: 0 0 0 1px $body-bg, $input-focus-box-shadow !default;
-$custom-range-thumb-focus-box-shadow-width: $input-focus-width !default; // For focus box shadow issue in IE/Edge
-$custom-range-thumb-active-bg: lighten($component-active-bg, 35%) !default;
-$custom-range-thumb-disabled-bg: $gray-500 !default;
-
-$custom-file-height: $input-height !default;
-$custom-file-height-inner: $input-height-inner !default;
-$custom-file-focus-border-color: $input-focus-border-color !default;
-$custom-file-focus-box-shadow: $input-focus-box-shadow !default;
-$custom-file-disabled-bg: $input-disabled-bg !default;
-
-$custom-file-padding-y: $input-padding-y !default;
-$custom-file-padding-x: $input-padding-x !default;
-$custom-file-line-height: $input-line-height !default;
-$custom-file-font-family: $input-font-family !default;
-$custom-file-font-weight: $input-font-weight !default;
-$custom-file-color: $input-color !default;
-$custom-file-bg: $input-bg !default;
-$custom-file-border-width: $input-border-width !default;
-$custom-file-border-color: $input-border-color !default;
-$custom-file-border-radius: $input-border-radius !default;
-$custom-file-box-shadow: $input-box-shadow !default;
-$custom-file-button-color: $custom-file-color !default;
-$custom-file-button-bg: $input-group-addon-bg !default;
-$custom-file-text: (
- en: "Browse"
-) !default;
-
+// scss-docs-end input-group-variables
+
+// scss-docs-start form-select-variables
+$form-select-padding-y: $input-padding-y !default;
+$form-select-padding-x: $input-padding-x !default;
+$form-select-font-family: $input-font-family !default;
+$form-select-font-size: $input-font-size !default;
+$form-select-indicator-padding: $form-select-padding-x * 3 !default; // Extra padding for background-image
+$form-select-font-weight: $input-font-weight !default;
+$form-select-line-height: $input-line-height !default;
+$form-select-color: $input-color !default;
+$form-select-bg: $input-bg !default;
+$form-select-disabled-color: null !default;
+$form-select-disabled-bg: $input-disabled-bg !default;
+$form-select-disabled-border-color: $input-disabled-border-color !default;
+$form-select-bg-position: right $form-select-padding-x center !default;
+$form-select-bg-size: 16px 12px !default; // In pixels because image dimensions
+$form-select-indicator-color: $gray-800 !default;
+$form-select-indicator: url("data:image/svg+xml,
") !default;
+
+$form-select-feedback-icon-padding-end: $form-select-padding-x * 2.5 + $form-select-indicator-padding !default;
+$form-select-feedback-icon-position: center right $form-select-indicator-padding !default;
+$form-select-feedback-icon-size: $input-height-inner-half $input-height-inner-half !default;
+
+$form-select-border-width: $input-border-width !default;
+$form-select-border-color: $input-border-color !default;
+$form-select-border-radius: $input-border-radius !default;
+$form-select-box-shadow: $box-shadow-inset !default;
+
+$form-select-focus-border-color: $input-focus-border-color !default;
+$form-select-focus-width: $input-focus-width !default;
+$form-select-focus-box-shadow: 0 0 0 $form-select-focus-width $input-btn-focus-color !default;
+
+$form-select-padding-y-sm: $input-padding-y-sm !default;
+$form-select-padding-x-sm: $input-padding-x-sm !default;
+$form-select-font-size-sm: $input-font-size-sm !default;
+$form-select-border-radius-sm: $input-border-radius-sm !default;
+
+$form-select-padding-y-lg: $input-padding-y-lg !default;
+$form-select-padding-x-lg: $input-padding-x-lg !default;
+$form-select-font-size-lg: $input-font-size-lg !default;
+$form-select-border-radius-lg: $input-border-radius-lg !default;
+
+$form-select-transition: $input-transition !default;
+// scss-docs-end form-select-variables
+
+// scss-docs-start form-range-variables
+$form-range-track-width: 100% !default;
+$form-range-track-height: .5rem !default;
+$form-range-track-cursor: pointer !default;
+$form-range-track-bg: var(--#{$prefix}tertiary-bg) !default;
+$form-range-track-border-radius: 1rem !default;
+$form-range-track-box-shadow: $box-shadow-inset !default;
+
+$form-range-thumb-width: 1rem !default;
+$form-range-thumb-height: $form-range-thumb-width !default;
+$form-range-thumb-bg: $component-active-bg !default;
+$form-range-thumb-border: 0 !default;
+$form-range-thumb-border-radius: 1rem !default;
+$form-range-thumb-box-shadow: 0 .1rem .25rem rgba($black, .1) !default;
+$form-range-thumb-focus-box-shadow: 0 0 0 1px $body-bg, $input-focus-box-shadow !default;
+$form-range-thumb-focus-box-shadow-width: $input-focus-width !default; // For focus box shadow issue in Edge
+$form-range-thumb-active-bg: tint-color($component-active-bg, 70%) !default;
+$form-range-thumb-disabled-bg: var(--#{$prefix}secondary-color) !default;
+$form-range-thumb-transition: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
+// scss-docs-end form-range-variables
+
+// scss-docs-start form-file-variables
+$form-file-button-color: $input-color !default;
+$form-file-button-bg: var(--#{$prefix}tertiary-bg) !default;
+$form-file-button-hover-bg: var(--#{$prefix}secondary-bg) !default;
+// scss-docs-end form-file-variables
+
+// scss-docs-start form-floating-variables
+$form-floating-height: add(3.5rem, $input-height-border) !default;
+$form-floating-line-height: 1.25 !default;
+$form-floating-padding-x: $input-padding-x !default;
+$form-floating-padding-y: 1rem !default;
+$form-floating-input-padding-t: 1.625rem !default;
+$form-floating-input-padding-b: .625rem !default;
+$form-floating-label-height: 1.5em !default;
+$form-floating-label-opacity: .65 !default;
+$form-floating-label-transform: scale(.85) translateY(-.5rem) translateX(.15rem) !default;
+$form-floating-label-disabled-color: $gray-600 !default;
+$form-floating-transition: opacity .1s ease-in-out, transform .1s ease-in-out !default;
+// scss-docs-end form-floating-variables
// Form validation
+// scss-docs-start form-feedback-variables
$form-feedback-margin-top: $form-text-margin-top !default;
-$form-feedback-font-size: $small-font-size !default;
-$form-feedback-valid-color: theme-color("success") !default;
-$form-feedback-invalid-color: theme-color("danger") !default;
+$form-feedback-font-size: $form-text-font-size !default;
+$form-feedback-font-style: $form-text-font-style !default;
+$form-feedback-valid-color: $success !default;
+$form-feedback-invalid-color: $danger !default;
$form-feedback-icon-valid-color: $form-feedback-valid-color !default;
-$form-feedback-icon-valid: url("data:image/svg+xml,
") !default;
+$form-feedback-icon-valid: url("data:image/svg+xml,
") !default;
$form-feedback-icon-invalid-color: $form-feedback-invalid-color !default;
-$form-feedback-icon-invalid: url("data:image/svg+xml,
") !default;
-
-$form-validation-states: () !default;
-// stylelint-disable-next-line scss/dollar-variable-default
-$form-validation-states: map-merge(
- (
- "valid": (
- "color": $form-feedback-valid-color,
- "icon": $form-feedback-icon-valid
- ),
- "invalid": (
- "color": $form-feedback-invalid-color,
- "icon": $form-feedback-icon-invalid
- ),
+$form-feedback-icon-invalid: url("data:image/svg+xml,
") !default;
+// scss-docs-end form-feedback-variables
+
+// scss-docs-start form-validation-colors
+$form-valid-color: $form-feedback-valid-color !default;
+$form-valid-border-color: $form-feedback-valid-color !default;
+$form-invalid-color: $form-feedback-invalid-color !default;
+$form-invalid-border-color: $form-feedback-invalid-color !default;
+// scss-docs-end form-validation-colors
+
+// scss-docs-start form-validation-states
+$form-validation-states: (
+ "valid": (
+ "color": var(--#{$prefix}form-valid-color),
+ "icon": $form-feedback-icon-valid,
+ "tooltip-color": #fff,
+ "tooltip-bg-color": var(--#{$prefix}success),
+ "focus-box-shadow": 0 0 $input-btn-focus-blur $input-focus-width rgba(var(--#{$prefix}success-rgb), $input-btn-focus-color-opacity),
+ "border-color": var(--#{$prefix}form-valid-border-color),
),
- $form-validation-states
-);
+ "invalid": (
+ "color": var(--#{$prefix}form-invalid-color),
+ "icon": $form-feedback-icon-invalid,
+ "tooltip-color": #fff,
+ "tooltip-bg-color": var(--#{$prefix}danger),
+ "focus-box-shadow": 0 0 $input-btn-focus-blur $input-focus-width rgba(var(--#{$prefix}danger-rgb), $input-btn-focus-color-opacity),
+ "border-color": var(--#{$prefix}form-invalid-border-color),
+ )
+) !default;
+// scss-docs-end form-validation-states
// Z-index master list
//
// Warning: Avoid customizing these values. They're used for a bird's eye view
// of components dependent on the z-axis and are designed to all work together.
+// scss-docs-start zindex-stack
$zindex-dropdown: 1000 !default;
$zindex-sticky: 1020 !default;
$zindex-fixed: 1030 !default;
-$zindex-modal-backdrop: 1040 !default;
-$zindex-modal: 1050 !default;
-$zindex-popover: 1060 !default;
-$zindex-tooltip: 1070 !default;
+$zindex-offcanvas-backdrop: 1040 !default;
+$zindex-offcanvas: 1045 !default;
+$zindex-modal-backdrop: 1050 !default;
+$zindex-modal: 1055 !default;
+$zindex-popover: 1070 !default;
+$zindex-tooltip: 1080 !default;
+$zindex-toast: 1090 !default;
+// scss-docs-end zindex-stack
+
+// scss-docs-start zindex-levels-map
+$zindex-levels: (
+ n1: -1,
+ 0: 0,
+ 1: 1,
+ 2: 2,
+ 3: 3
+) !default;
+// scss-docs-end zindex-levels-map
// Navs
+// scss-docs-start nav-variables
$nav-link-padding-y: .5rem !default;
$nav-link-padding-x: 1rem !default;
-$nav-link-disabled-color: $gray-600 !default;
-
-$nav-tabs-border-color: $gray-300 !default;
-$nav-tabs-border-width: $border-width !default;
-$nav-tabs-border-radius: $border-radius !default;
-$nav-tabs-link-hover-border-color: $gray-200 $gray-200 $nav-tabs-border-color !default;
-$nav-tabs-link-active-color: $gray-700 !default;
-$nav-tabs-link-active-bg: $body-bg !default;
-$nav-tabs-link-active-border-color: $gray-300 $gray-300 $nav-tabs-link-active-bg !default;
-
-$nav-pills-border-radius: $border-radius !default;
+$nav-link-font-size: null !default;
+$nav-link-font-weight: null !default;
+$nav-link-color: var(--#{$prefix}link-color) !default;
+$nav-link-hover-color: var(--#{$prefix}link-hover-color) !default;
+$nav-link-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out !default;
+$nav-link-disabled-color: var(--#{$prefix}secondary-color) !default;
+$nav-link-focus-box-shadow: $focus-ring-box-shadow !default;
+
+$nav-tabs-border-color: var(--#{$prefix}border-color) !default;
+$nav-tabs-border-width: var(--#{$prefix}border-width) !default;
+$nav-tabs-border-radius: var(--#{$prefix}border-radius) !default;
+$nav-tabs-link-hover-border-color: var(--#{$prefix}secondary-bg) var(--#{$prefix}secondary-bg) $nav-tabs-border-color !default;
+$nav-tabs-link-active-color: var(--#{$prefix}emphasis-color) !default;
+$nav-tabs-link-active-bg: var(--#{$prefix}body-bg) !default;
+$nav-tabs-link-active-border-color: var(--#{$prefix}border-color) var(--#{$prefix}border-color) $nav-tabs-link-active-bg !default;
+
+$nav-pills-border-radius: var(--#{$prefix}border-radius) !default;
$nav-pills-link-active-color: $component-active-color !default;
$nav-pills-link-active-bg: $component-active-bg !default;
-$nav-divider-color: $gray-200 !default;
-$nav-divider-margin-y: $spacer / 2 !default;
+$nav-underline-gap: 1rem !default;
+$nav-underline-border-width: .125rem !default;
+$nav-underline-link-active-color: var(--#{$prefix}emphasis-color) !default;
+// scss-docs-end nav-variables
// Navbar
-$navbar-padding-y: $spacer / 2 !default;
-$navbar-padding-x: $spacer !default;
+// scss-docs-start navbar-variables
+$navbar-padding-y: $spacer * .5 !default;
+$navbar-padding-x: null !default;
$navbar-nav-link-padding-x: .5rem !default;
@@ -728,221 +1190,307 @@ $navbar-brand-font-size: $font-size-lg !default;
// Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link
$nav-link-height: $font-size-base * $line-height-base + $nav-link-padding-y * 2 !default;
$navbar-brand-height: $navbar-brand-font-size * $line-height-base !default;
-$navbar-brand-padding-y: ($nav-link-height - $navbar-brand-height) / 2 !default;
+$navbar-brand-padding-y: ($nav-link-height - $navbar-brand-height) * .5 !default;
+$navbar-brand-margin-end: 1rem !default;
$navbar-toggler-padding-y: .25rem !default;
$navbar-toggler-padding-x: .75rem !default;
$navbar-toggler-font-size: $font-size-lg !default;
$navbar-toggler-border-radius: $btn-border-radius !default;
-
-$navbar-dark-color: rgba($white, .5) !default;
+$navbar-toggler-focus-width: $btn-focus-width !default;
+$navbar-toggler-transition: box-shadow .15s ease-in-out !default;
+
+$navbar-light-color: rgba(var(--#{$prefix}emphasis-color-rgb), .65) !default;
+$navbar-light-hover-color: rgba(var(--#{$prefix}emphasis-color-rgb), .8) !default;
+$navbar-light-active-color: rgba(var(--#{$prefix}emphasis-color-rgb), 1) !default;
+$navbar-light-disabled-color: rgba(var(--#{$prefix}emphasis-color-rgb), .3) !default;
+$navbar-light-icon-color: rgba($body-color, .75) !default;
+$navbar-light-toggler-icon-bg: url("data:image/svg+xml,
") !default;
+$navbar-light-toggler-border-color: rgba(var(--#{$prefix}emphasis-color-rgb), .15) !default;
+$navbar-light-brand-color: $navbar-light-active-color !default;
+$navbar-light-brand-hover-color: $navbar-light-active-color !default;
+// scss-docs-end navbar-variables
+
+// scss-docs-start navbar-dark-variables
+$navbar-dark-color: rgba($white, .55) !default;
$navbar-dark-hover-color: rgba($white, .75) !default;
$navbar-dark-active-color: $white !default;
$navbar-dark-disabled-color: rgba($white, .25) !default;
-$navbar-dark-toggler-icon-bg: url("data:image/svg+xml,
") !default;
+$navbar-dark-toggler-icon-bg: url("data:image/svg+xml,
") !default;
$navbar-dark-toggler-border-color: rgba($white, .1) !default;
-
-$navbar-light-color: rgba($black, .5) !default;
-$navbar-light-hover-color: rgba($black, .7) !default;
-$navbar-light-active-color: rgba($black, .9) !default;
-$navbar-light-disabled-color: rgba($black, .3) !default;
-$navbar-light-toggler-icon-bg: url("data:image/svg+xml,
") !default;
-$navbar-light-toggler-border-color: rgba($black, .1) !default;
-
-$navbar-light-brand-color: $navbar-light-active-color !default;
-$navbar-light-brand-hover-color: $navbar-light-active-color !default;
-$navbar-dark-brand-color: $navbar-dark-active-color !default;
-$navbar-dark-brand-hover-color: $navbar-dark-active-color !default;
+$navbar-dark-brand-color: $navbar-dark-active-color !default;
+$navbar-dark-brand-hover-color: $navbar-dark-active-color !default;
+// scss-docs-end navbar-dark-variables
// Dropdowns
//
// Dropdown menu container and contents.
+// scss-docs-start dropdown-variables
$dropdown-min-width: 10rem !default;
+$dropdown-padding-x: 0 !default;
$dropdown-padding-y: .5rem !default;
$dropdown-spacer: .125rem !default;
$dropdown-font-size: $font-size-base !default;
-$dropdown-color: $body-color !default;
-$dropdown-bg: $white !default;
-$dropdown-border-color: rgba($black, .15) !default;
-$dropdown-border-radius: $border-radius !default;
-$dropdown-border-width: $border-width !default;
-$dropdown-inner-border-radius: subtract($dropdown-border-radius, $dropdown-border-width) !default;
-$dropdown-divider-bg: $gray-200 !default;
-$dropdown-divider-margin-y: $nav-divider-margin-y !default;
-$dropdown-box-shadow: 0 .5rem 1rem rgba($black, .175) !default;
-
-$dropdown-link-color: $gray-900 !default;
-$dropdown-link-hover-color: darken($gray-900, 5%) !default;
-$dropdown-link-hover-bg: $gray-100 !default;
+$dropdown-color: var(--#{$prefix}body-color) !default;
+$dropdown-bg: var(--#{$prefix}body-bg) !default;
+$dropdown-border-color: var(--#{$prefix}border-color-translucent) !default;
+$dropdown-border-radius: var(--#{$prefix}border-radius) !default;
+$dropdown-border-width: var(--#{$prefix}border-width) !default;
+$dropdown-inner-border-radius: calc(#{$dropdown-border-radius} - #{$dropdown-border-width}) !default; // stylelint-disable-line function-disallowed-list
+$dropdown-divider-bg: $dropdown-border-color !default;
+$dropdown-divider-margin-y: $spacer * .5 !default;
+$dropdown-box-shadow: $box-shadow !default;
+
+$dropdown-link-color: var(--#{$prefix}body-color) !default;
+$dropdown-link-hover-color: $dropdown-link-color !default;
+$dropdown-link-hover-bg: var(--#{$prefix}tertiary-bg) !default;
$dropdown-link-active-color: $component-active-color !default;
$dropdown-link-active-bg: $component-active-bg !default;
-$dropdown-link-disabled-color: $gray-600 !default;
+$dropdown-link-disabled-color: var(--#{$prefix}tertiary-color) !default;
-$dropdown-item-padding-y: .25rem !default;
-$dropdown-item-padding-x: 1.5rem !default;
+$dropdown-item-padding-y: $spacer * .25 !default;
+$dropdown-item-padding-x: $spacer !default;
$dropdown-header-color: $gray-600 !default;
+$dropdown-header-padding-x: $dropdown-item-padding-x !default;
+$dropdown-header-padding-y: $dropdown-padding-y !default;
+// fusv-disable
+$dropdown-header-padding: $dropdown-header-padding-y $dropdown-header-padding-x !default; // Deprecated in v5.2.0
+// fusv-enable
+// scss-docs-end dropdown-variables
+
+// scss-docs-start dropdown-dark-variables
+$dropdown-dark-color: $gray-300 !default;
+$dropdown-dark-bg: $gray-800 !default;
+$dropdown-dark-border-color: $dropdown-border-color !default;
+$dropdown-dark-divider-bg: $dropdown-divider-bg !default;
+$dropdown-dark-box-shadow: null !default;
+$dropdown-dark-link-color: $dropdown-dark-color !default;
+$dropdown-dark-link-hover-color: $white !default;
+$dropdown-dark-link-hover-bg: rgba($white, .15) !default;
+$dropdown-dark-link-active-color: $dropdown-link-active-color !default;
+$dropdown-dark-link-active-bg: $dropdown-link-active-bg !default;
+$dropdown-dark-link-disabled-color: $gray-500 !default;
+$dropdown-dark-header-color: $gray-500 !default;
+// scss-docs-end dropdown-dark-variables
// Pagination
-$pagination-padding-y: .5rem !default;
+// scss-docs-start pagination-variables
+$pagination-padding-y: .375rem !default;
$pagination-padding-x: .75rem !default;
$pagination-padding-y-sm: .25rem !default;
$pagination-padding-x-sm: .5rem !default;
$pagination-padding-y-lg: .75rem !default;
$pagination-padding-x-lg: 1.5rem !default;
-$pagination-line-height: 1.25 !default;
-$pagination-color: $link-color !default;
-$pagination-bg: $white !default;
-$pagination-border-width: $border-width !default;
-$pagination-border-color: $gray-300 !default;
+$pagination-font-size: $font-size-base !default;
-$pagination-focus-box-shadow: $input-btn-focus-box-shadow !default;
+$pagination-color: var(--#{$prefix}link-color) !default;
+$pagination-bg: var(--#{$prefix}body-bg) !default;
+$pagination-border-radius: var(--#{$prefix}border-radius) !default;
+$pagination-border-width: var(--#{$prefix}border-width) !default;
+$pagination-margin-start: calc(#{$pagination-border-width} * -1) !default; // stylelint-disable-line function-disallowed-list
+$pagination-border-color: var(--#{$prefix}border-color) !default;
+
+$pagination-focus-color: var(--#{$prefix}link-hover-color) !default;
+$pagination-focus-bg: var(--#{$prefix}secondary-bg) !default;
+$pagination-focus-box-shadow: $focus-ring-box-shadow !default;
$pagination-focus-outline: 0 !default;
-$pagination-hover-color: $link-hover-color !default;
-$pagination-hover-bg: $gray-200 !default;
-$pagination-hover-border-color: $gray-300 !default;
+$pagination-hover-color: var(--#{$prefix}link-hover-color) !default;
+$pagination-hover-bg: var(--#{$prefix}tertiary-bg) !default;
+$pagination-hover-border-color: var(--#{$prefix}border-color) !default; // Todo in v6: remove this?
$pagination-active-color: $component-active-color !default;
$pagination-active-bg: $component-active-bg !default;
-$pagination-active-border-color: $pagination-active-bg !default;
+$pagination-active-border-color: $component-active-bg !default;
+
+$pagination-disabled-color: var(--#{$prefix}secondary-color) !default;
+$pagination-disabled-bg: var(--#{$prefix}secondary-bg) !default;
+$pagination-disabled-border-color: var(--#{$prefix}border-color) !default;
-$pagination-disabled-color: $gray-600 !default;
-$pagination-disabled-bg: $white !default;
-$pagination-disabled-border-color: $gray-300 !default;
+$pagination-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
+$pagination-border-radius-sm: var(--#{$prefix}border-radius-sm) !default;
+$pagination-border-radius-lg: var(--#{$prefix}border-radius-lg) !default;
+// scss-docs-end pagination-variables
-// Jumbotron
-$jumbotron-padding: 2rem !default;
-$jumbotron-color: null !default;
-$jumbotron-bg: $gray-200 !default;
+// Placeholders
+// scss-docs-start placeholders
+$placeholder-opacity-max: .5 !default;
+$placeholder-opacity-min: .2 !default;
+// scss-docs-end placeholders
// Cards
-$card-spacer-y: .75rem !default;
-$card-spacer-x: 1.25rem !default;
-$card-border-width: $border-width !default;
-$card-border-radius: $border-radius !default;
-$card-border-color: rgba($black, .125) !default;
+// scss-docs-start card-variables
+$card-spacer-y: $spacer !default;
+$card-spacer-x: $spacer !default;
+$card-title-spacer-y: $spacer * .5 !default;
+$card-title-color: null !default;
+$card-subtitle-color: null !default;
+$card-border-width: var(--#{$prefix}border-width) !default;
+$card-border-color: var(--#{$prefix}border-color-translucent) !default;
+$card-border-radius: var(--#{$prefix}border-radius) !default;
+$card-box-shadow: null !default;
$card-inner-border-radius: subtract($card-border-radius, $card-border-width) !default;
-$card-cap-bg: rgba($black, .03) !default;
+$card-cap-padding-y: $card-spacer-y * .5 !default;
+$card-cap-padding-x: $card-spacer-x !default;
+$card-cap-bg: rgba(var(--#{$prefix}body-color-rgb), .03) !default;
$card-cap-color: null !default;
$card-height: null !default;
$card-color: null !default;
-$card-bg: $white !default;
-
-$card-img-overlay-padding: 1.25rem !default;
-
-$card-group-margin: $grid-gutter-width / 2 !default;
-$card-deck-margin: $card-group-margin !default;
-
-$card-columns-count: 3 !default;
-$card-columns-gap: 1.25rem !default;
-$card-columns-margin: $card-spacer-y !default;
-
+$card-bg: var(--#{$prefix}body-bg) !default;
+$card-img-overlay-padding: $spacer !default;
+$card-group-margin: $grid-gutter-width * .5 !default;
+// scss-docs-end card-variables
+
+// Accordion
+
+// scss-docs-start accordion-variables
+$accordion-padding-y: 1rem !default;
+$accordion-padding-x: 1.25rem !default;
+$accordion-color: var(--#{$prefix}body-color) !default;
+$accordion-bg: var(--#{$prefix}body-bg) !default;
+$accordion-border-width: var(--#{$prefix}border-width) !default;
+$accordion-border-color: var(--#{$prefix}border-color) !default;
+$accordion-border-radius: var(--#{$prefix}border-radius) !default;
+$accordion-inner-border-radius: subtract($accordion-border-radius, $accordion-border-width) !default;
+
+$accordion-body-padding-y: $accordion-padding-y !default;
+$accordion-body-padding-x: $accordion-padding-x !default;
+
+$accordion-button-padding-y: $accordion-padding-y !default;
+$accordion-button-padding-x: $accordion-padding-x !default;
+$accordion-button-color: var(--#{$prefix}body-color) !default;
+$accordion-button-bg: var(--#{$prefix}accordion-bg) !default;
+$accordion-transition: $btn-transition, border-radius .15s ease !default;
+$accordion-button-active-bg: var(--#{$prefix}primary-bg-subtle) !default;
+$accordion-button-active-color: var(--#{$prefix}primary-text-emphasis) !default;
+
+$accordion-button-focus-border-color: $input-focus-border-color !default;
+$accordion-button-focus-box-shadow: $btn-focus-box-shadow !default;
+
+$accordion-icon-width: 1.25rem !default;
+$accordion-icon-color: $body-color !default;
+$accordion-icon-active-color: $primary-text-emphasis !default;
+$accordion-icon-transition: transform .2s ease-in-out !default;
+$accordion-icon-transform: rotate(-180deg) !default;
+
+$accordion-button-icon: url("data:image/svg+xml,
") !default;
+$accordion-button-active-icon: url("data:image/svg+xml,
") !default;
+// scss-docs-end accordion-variables
// Tooltips
+// scss-docs-start tooltip-variables
$tooltip-font-size: $font-size-sm !default;
$tooltip-max-width: 200px !default;
-$tooltip-color: $white !default;
-$tooltip-bg: $black !default;
-$tooltip-border-radius: $border-radius !default;
+$tooltip-color: var(--#{$prefix}body-bg) !default;
+$tooltip-bg: var(--#{$prefix}emphasis-color) !default;
+$tooltip-border-radius: var(--#{$prefix}border-radius) !default;
$tooltip-opacity: .9 !default;
-$tooltip-padding-y: .25rem !default;
-$tooltip-padding-x: .5rem !default;
-$tooltip-margin: 0 !default;
+$tooltip-padding-y: $spacer * .25 !default;
+$tooltip-padding-x: $spacer * .5 !default;
+$tooltip-margin: null !default; // TODO: remove this in v6
$tooltip-arrow-width: .8rem !default;
$tooltip-arrow-height: .4rem !default;
-$tooltip-arrow-color: $tooltip-bg !default;
+// fusv-disable
+$tooltip-arrow-color: null !default; // Deprecated in Bootstrap 5.2.0 for CSS variables
+// fusv-enable
+// scss-docs-end tooltip-variables
// Form tooltips must come after regular tooltips
+// scss-docs-start tooltip-feedback-variables
$form-feedback-tooltip-padding-y: $tooltip-padding-y !default;
$form-feedback-tooltip-padding-x: $tooltip-padding-x !default;
$form-feedback-tooltip-font-size: $tooltip-font-size !default;
-$form-feedback-tooltip-line-height: $line-height-base !default;
+$form-feedback-tooltip-line-height: null !default;
$form-feedback-tooltip-opacity: $tooltip-opacity !default;
$form-feedback-tooltip-border-radius: $tooltip-border-radius !default;
+// scss-docs-end tooltip-feedback-variables
// Popovers
+// scss-docs-start popover-variables
$popover-font-size: $font-size-sm !default;
-$popover-bg: $white !default;
+$popover-bg: var(--#{$prefix}body-bg) !default;
$popover-max-width: 276px !default;
-$popover-border-width: $border-width !default;
-$popover-border-color: rgba($black, .2) !default;
-$popover-border-radius: $border-radius-lg !default;
-$popover-inner-border-radius: subtract($popover-border-radius, $popover-border-width) !default;
-$popover-box-shadow: 0 .25rem .5rem rgba($black, .2) !default;
-
-$popover-header-bg: darken($popover-bg, 3%) !default;
+$popover-border-width: var(--#{$prefix}border-width) !default;
+$popover-border-color: var(--#{$prefix}border-color-translucent) !default;
+$popover-border-radius: var(--#{$prefix}border-radius-lg) !default;
+$popover-inner-border-radius: calc(#{$popover-border-radius} - #{$popover-border-width}) !default; // stylelint-disable-line function-disallowed-list
+$popover-box-shadow: $box-shadow !default;
+
+$popover-header-font-size: $font-size-base !default;
+$popover-header-bg: var(--#{$prefix}secondary-bg) !default;
$popover-header-color: $headings-color !default;
$popover-header-padding-y: .5rem !default;
-$popover-header-padding-x: .75rem !default;
+$popover-header-padding-x: $spacer !default;
-$popover-body-color: $body-color !default;
-$popover-body-padding-y: $popover-header-padding-y !default;
-$popover-body-padding-x: $popover-header-padding-x !default;
+$popover-body-color: var(--#{$prefix}body-color) !default;
+$popover-body-padding-y: $spacer !default;
+$popover-body-padding-x: $spacer !default;
$popover-arrow-width: 1rem !default;
$popover-arrow-height: .5rem !default;
-$popover-arrow-color: $popover-bg !default;
+// scss-docs-end popover-variables
-$popover-arrow-outer-color: fade-in($popover-border-color, .05) !default;
+// fusv-disable
+// Deprecated in Bootstrap 5.2.0 for CSS variables
+$popover-arrow-color: $popover-bg !default;
+$popover-arrow-outer-color: var(--#{$prefix}border-color-translucent) !default;
+// fusv-enable
// Toasts
+// scss-docs-start toast-variables
$toast-max-width: 350px !default;
$toast-padding-x: .75rem !default;
-$toast-padding-y: .25rem !default;
+$toast-padding-y: .5rem !default;
$toast-font-size: .875rem !default;
$toast-color: null !default;
-$toast-background-color: rgba($white, .85) !default;
-$toast-border-width: 1px !default;
-$toast-border-color: rgba(0, 0, 0, .1) !default;
-$toast-border-radius: .25rem !default;
-$toast-box-shadow: 0 .25rem .75rem rgba($black, .1) !default;
+$toast-background-color: rgba(var(--#{$prefix}body-bg-rgb), .85) !default;
+$toast-border-width: var(--#{$prefix}border-width) !default;
+$toast-border-color: var(--#{$prefix}border-color-translucent) !default;
+$toast-border-radius: var(--#{$prefix}border-radius) !default;
+$toast-box-shadow: var(--#{$prefix}box-shadow) !default;
+$toast-spacing: $container-padding-x !default;
-$toast-header-color: $gray-600 !default;
-$toast-header-background-color: rgba($white, .85) !default;
-$toast-header-border-color: rgba(0, 0, 0, .05) !default;
+$toast-header-color: var(--#{$prefix}secondary-color) !default;
+$toast-header-background-color: rgba(var(--#{$prefix}body-bg-rgb), .85) !default;
+$toast-header-border-color: $toast-border-color !default;
+// scss-docs-end toast-variables
// Badges
-$badge-font-size: 75% !default;
+// scss-docs-start badge-variables
+$badge-font-size: .75em !default;
$badge-font-weight: $font-weight-bold !default;
-$badge-padding-y: .25em !default;
-$badge-padding-x: .4em !default;
-$badge-border-radius: $border-radius !default;
-
-$badge-transition: $btn-transition !default;
-$badge-focus-width: $input-btn-focus-width !default;
-
-$badge-pill-padding-x: .6em !default;
-// Use a higher than normal value to ensure completely rounded edges when
-// customizing padding or font-size on labels.
-$badge-pill-border-radius: 10rem !default;
+$badge-color: $white !default;
+$badge-padding-y: .35em !default;
+$badge-padding-x: .65em !default;
+$badge-border-radius: var(--#{$prefix}border-radius) !default;
+// scss-docs-end badge-variables
// Modals
-// Padding applied to the modal body
-$modal-inner-padding: 1rem !default;
+// scss-docs-start modal-variables
+$modal-inner-padding: $spacer !default;
-// Margin between elements in footer, must be lower than or equal to 2 * $modal-inner-padding
$modal-footer-margin-between: .5rem !default;
$modal-dialog-margin: .5rem !default;
@@ -951,126 +1499,148 @@ $modal-dialog-margin-y-sm-up: 1.75rem !default;
$modal-title-line-height: $line-height-base !default;
$modal-content-color: null !default;
-$modal-content-bg: $white !default;
-$modal-content-border-color: rgba($black, .2) !default;
-$modal-content-border-width: $border-width !default;
-$modal-content-border-radius: $border-radius-lg !default;
+$modal-content-bg: var(--#{$prefix}body-bg) !default;
+$modal-content-border-color: var(--#{$prefix}border-color-translucent) !default;
+$modal-content-border-width: var(--#{$prefix}border-width) !default;
+$modal-content-border-radius: var(--#{$prefix}border-radius-lg) !default;
$modal-content-inner-border-radius: subtract($modal-content-border-radius, $modal-content-border-width) !default;
-$modal-content-box-shadow-xs: 0 .25rem .5rem rgba($black, .5) !default;
-$modal-content-box-shadow-sm-up: 0 .5rem 1rem rgba($black, .5) !default;
+$modal-content-box-shadow-xs: $box-shadow-sm !default;
+$modal-content-box-shadow-sm-up: $box-shadow !default;
$modal-backdrop-bg: $black !default;
$modal-backdrop-opacity: .5 !default;
-$modal-header-border-color: $border-color !default;
-$modal-footer-border-color: $modal-header-border-color !default;
+
+$modal-header-border-color: var(--#{$prefix}border-color) !default;
$modal-header-border-width: $modal-content-border-width !default;
-$modal-footer-border-width: $modal-header-border-width !default;
-$modal-header-padding-y: 1rem !default;
-$modal-header-padding-x: 1rem !default;
+$modal-header-padding-y: $modal-inner-padding !default;
+$modal-header-padding-x: $modal-inner-padding !default;
$modal-header-padding: $modal-header-padding-y $modal-header-padding-x !default; // Keep this for backwards compatibility
-$modal-xl: 1140px !default;
-$modal-lg: 800px !default;
-$modal-md: 500px !default;
+$modal-footer-bg: null !default;
+$modal-footer-border-color: $modal-header-border-color !default;
+$modal-footer-border-width: $modal-header-border-width !default;
+
$modal-sm: 300px !default;
+$modal-md: 500px !default;
+$modal-lg: 800px !default;
+$modal-xl: 1140px !default;
$modal-fade-transform: translate(0, -50px) !default;
$modal-show-transform: none !default;
$modal-transition: transform .3s ease-out !default;
$modal-scale-transform: scale(1.02) !default;
+// scss-docs-end modal-variables
// Alerts
//
// Define alert colors, border radius, and padding.
-$alert-padding-y: .75rem !default;
-$alert-padding-x: 1.25rem !default;
-$alert-margin-bottom: 1rem !default;
-$alert-border-radius: $border-radius !default;
-$alert-link-font-weight: $font-weight-bold !default;
-$alert-border-width: $border-width !default;
-
-$alert-bg-level: -10 !default;
-$alert-border-level: -9 !default;
-$alert-color-level: 6 !default;
-
+// scss-docs-start alert-variables
+$alert-padding-y: $spacer !default;
+$alert-padding-x: $spacer !default;
+$alert-margin-bottom: 1rem !default;
+$alert-border-radius: var(--#{$prefix}border-radius) !default;
+$alert-link-font-weight: $font-weight-bold !default;
+$alert-border-width: var(--#{$prefix}border-width) !default;
+$alert-bg-scale: -80% !default;
+$alert-border-scale: -70% !default;
+$alert-color-scale: 40% !default;
+$alert-dismissible-padding-r: $alert-padding-x * 3 !default; // 3x covers width of x plus default padding on either side
+// scss-docs-end alert-variables
+
+// fusv-disable
+$alert-bg-scale: -80% !default; // Deprecated in v5.2.0, to be removed in v6
+$alert-border-scale: -70% !default; // Deprecated in v5.2.0, to be removed in v6
+$alert-color-scale: 40% !default; // Deprecated in v5.2.0, to be removed in v6
+// fusv-enable
// Progress bars
+// scss-docs-start progress-variables
$progress-height: 1rem !default;
$progress-font-size: $font-size-base * .75 !default;
-$progress-bg: $gray-200 !default;
-$progress-border-radius: $border-radius !default;
-$progress-box-shadow: inset 0 .1rem .1rem rgba($black, .1) !default;
+$progress-bg: var(--#{$prefix}secondary-bg) !default;
+$progress-border-radius: var(--#{$prefix}border-radius) !default;
+$progress-box-shadow: var(--#{$prefix}box-shadow-inset) !default;
$progress-bar-color: $white !default;
-$progress-bar-bg: theme-color("primary") !default;
+$progress-bar-bg: $primary !default;
$progress-bar-animation-timing: 1s linear infinite !default;
$progress-bar-transition: width .6s ease !default;
+// scss-docs-end progress-variables
// List group
-$list-group-color: null !default;
-$list-group-bg: $white !default;
-$list-group-border-color: rgba($black, .125) !default;
-$list-group-border-width: $border-width !default;
-$list-group-border-radius: $border-radius !default;
-
-$list-group-item-padding-y: .75rem !default;
-$list-group-item-padding-x: 1.25rem !default;
-
-$list-group-hover-bg: $gray-100 !default;
+// scss-docs-start list-group-variables
+$list-group-color: var(--#{$prefix}body-color) !default;
+$list-group-bg: var(--#{$prefix}body-bg) !default;
+$list-group-border-color: var(--#{$prefix}border-color) !default;
+$list-group-border-width: var(--#{$prefix}border-width) !default;
+$list-group-border-radius: var(--#{$prefix}border-radius) !default;
+
+$list-group-item-padding-y: $spacer * .5 !default;
+$list-group-item-padding-x: $spacer !default;
+// fusv-disable
+$list-group-item-bg-scale: -80% !default; // Deprecated in v5.3.0
+$list-group-item-color-scale: 40% !default; // Deprecated in v5.3.0
+// fusv-enable
+
+$list-group-hover-bg: var(--#{$prefix}tertiary-bg) !default;
$list-group-active-color: $component-active-color !default;
$list-group-active-bg: $component-active-bg !default;
$list-group-active-border-color: $list-group-active-bg !default;
-$list-group-disabled-color: $gray-600 !default;
+$list-group-disabled-color: var(--#{$prefix}secondary-color) !default;
$list-group-disabled-bg: $list-group-bg !default;
-$list-group-action-color: $gray-700 !default;
-$list-group-action-hover-color: $list-group-action-color !default;
+$list-group-action-color: var(--#{$prefix}secondary-color) !default;
+$list-group-action-hover-color: var(--#{$prefix}emphasis-color) !default;
-$list-group-action-active-color: $body-color !default;
-$list-group-action-active-bg: $gray-200 !default;
+$list-group-action-active-color: var(--#{$prefix}body-color) !default;
+$list-group-action-active-bg: var(--#{$prefix}secondary-bg) !default;
+// scss-docs-end list-group-variables
// Image thumbnails
+// scss-docs-start thumbnail-variables
$thumbnail-padding: .25rem !default;
-$thumbnail-bg: $body-bg !default;
-$thumbnail-border-width: $border-width !default;
-$thumbnail-border-color: $gray-300 !default;
-$thumbnail-border-radius: $border-radius !default;
-$thumbnail-box-shadow: 0 1px 2px rgba($black, .075) !default;
+$thumbnail-bg: var(--#{$prefix}body-bg) !default;
+$thumbnail-border-width: var(--#{$prefix}border-width) !default;
+$thumbnail-border-color: var(--#{$prefix}border-color) !default;
+$thumbnail-border-radius: var(--#{$prefix}border-radius) !default;
+$thumbnail-box-shadow: var(--#{$prefix}box-shadow-sm) !default;
+// scss-docs-end thumbnail-variables
// Figures
-$figure-caption-font-size: 90% !default;
-$figure-caption-color: $gray-600 !default;
+// scss-docs-start figure-variables
+$figure-caption-font-size: $small-font-size !default;
+$figure-caption-color: var(--#{$prefix}secondary-color) !default;
+// scss-docs-end figure-variables
// Breadcrumbs
+// scss-docs-start breadcrumb-variables
$breadcrumb-font-size: null !default;
-
-$breadcrumb-padding-y: .75rem !default;
-$breadcrumb-padding-x: 1rem !default;
-$breadcrumb-item-padding: .5rem !default;
-
+$breadcrumb-padding-y: 0 !default;
+$breadcrumb-padding-x: 0 !default;
+$breadcrumb-item-padding-x: .5rem !default;
$breadcrumb-margin-bottom: 1rem !default;
-
-$breadcrumb-bg: $gray-200 !default;
-$breadcrumb-divider-color: $gray-600 !default;
-$breadcrumb-active-color: $gray-600 !default;
+$breadcrumb-bg: null !default;
+$breadcrumb-divider-color: var(--#{$prefix}secondary-color) !default;
+$breadcrumb-active-color: var(--#{$prefix}secondary-color) !default;
$breadcrumb-divider: quote("/") !default;
-
-$breadcrumb-border-radius: $border-radius !default;
-
+$breadcrumb-divider-flipped: $breadcrumb-divider !default;
+$breadcrumb-border-radius: null !default;
+// scss-docs-end breadcrumb-variables
// Carousel
+// scss-docs-start carousel-variables
$carousel-control-color: $white !default;
$carousel-control-width: 15% !default;
$carousel-control-opacity: .5 !default;
@@ -1081,63 +1651,93 @@ $carousel-indicator-width: 30px !default;
$carousel-indicator-height: 3px !default;
$carousel-indicator-hit-area-height: 10px !default;
$carousel-indicator-spacer: 3px !default;
+$carousel-indicator-opacity: .5 !default;
$carousel-indicator-active-bg: $white !default;
+$carousel-indicator-active-opacity: 1 !default;
$carousel-indicator-transition: opacity .6s ease !default;
$carousel-caption-width: 70% !default;
$carousel-caption-color: $white !default;
+$carousel-caption-padding-y: 1.25rem !default;
+$carousel-caption-spacer: 1.25rem !default;
-$carousel-control-icon-width: 20px !default;
+$carousel-control-icon-width: 2rem !default;
-$carousel-control-prev-icon-bg: url("data:image/svg+xml,
") !default;
-$carousel-control-next-icon-bg: url("data:image/svg+xml,
") !default;
+$carousel-control-prev-icon-bg: url("data:image/svg+xml,
") !default;
+$carousel-control-next-icon-bg: url("data:image/svg+xml,
") !default;
$carousel-transition-duration: .6s !default;
$carousel-transition: transform $carousel-transition-duration ease-in-out !default; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`)
+// scss-docs-end carousel-variables
+
+// scss-docs-start carousel-dark-variables
+$carousel-dark-indicator-active-bg: $black !default;
+$carousel-dark-caption-color: $black !default;
+$carousel-dark-control-icon-filter: invert(1) grayscale(100) !default;
+// scss-docs-end carousel-dark-variables
// Spinners
-$spinner-width: 2rem !default;
-$spinner-height: $spinner-width !default;
-$spinner-border-width: .25em !default;
+// scss-docs-start spinner-variables
+$spinner-width: 2rem !default;
+$spinner-height: $spinner-width !default;
+$spinner-vertical-align: -.125em !default;
+$spinner-border-width: .25em !default;
+$spinner-animation-speed: .75s !default;
$spinner-width-sm: 1rem !default;
$spinner-height-sm: $spinner-width-sm !default;
$spinner-border-width-sm: .2em !default;
+// scss-docs-end spinner-variables
// Close
-$close-font-size: $font-size-base * 1.5 !default;
-$close-font-weight: $font-weight-bold !default;
-$close-color: $black !default;
-$close-text-shadow: 0 1px 0 $white !default;
-
+// scss-docs-start close-variables
+$btn-close-width: 1em !default;
+$btn-close-height: $btn-close-width !default;
+$btn-close-padding-x: .25em !default;
+$btn-close-padding-y: $btn-close-padding-x !default;
+$btn-close-color: $black !default;
+$btn-close-bg: url("data:image/svg+xml,
") !default;
+$btn-close-focus-shadow: $focus-ring-box-shadow !default;
+$btn-close-opacity: .5 !default;
+$btn-close-hover-opacity: .75 !default;
+$btn-close-focus-opacity: 1 !default;
+$btn-close-disabled-opacity: .25 !default;
+$btn-close-white-filter: invert(1) grayscale(100%) brightness(200%) !default;
+// scss-docs-end close-variables
+
+
+// Offcanvas
+
+// scss-docs-start offcanvas-variables
+$offcanvas-padding-y: $modal-inner-padding !default;
+$offcanvas-padding-x: $modal-inner-padding !default;
+$offcanvas-horizontal-width: 400px !default;
+$offcanvas-vertical-height: 30vh !default;
+$offcanvas-transition-duration: .3s !default;
+$offcanvas-border-color: $modal-content-border-color !default;
+$offcanvas-border-width: $modal-content-border-width !default;
+$offcanvas-title-line-height: $modal-title-line-height !default;
+$offcanvas-bg-color: var(--#{$prefix}body-bg) !default;
+$offcanvas-color: var(--#{$prefix}body-color) !default;
+$offcanvas-box-shadow: $modal-content-box-shadow-xs !default;
+$offcanvas-backdrop-bg: $modal-backdrop-bg !default;
+$offcanvas-backdrop-opacity: $modal-backdrop-opacity !default;
+// scss-docs-end offcanvas-variables
// Code
-$code-font-size: 87.5% !default;
+$code-font-size: $small-font-size !default;
$code-color: $pink !default;
-$kbd-padding-y: .2rem !default;
-$kbd-padding-x: .4rem !default;
+$kbd-padding-y: .1875rem !default;
+$kbd-padding-x: .375rem !default;
$kbd-font-size: $code-font-size !default;
-$kbd-color: $white !default;
-$kbd-bg: $gray-900 !default;
-
-$pre-color: $gray-900 !default;
-$pre-scrollable-max-height: 340px !default;
-
-
-// Utilities
-
-$displays: none, inline, inline-block, block, table, table-row, table-cell, flex, inline-flex !default;
-$overflows: auto, hidden !default;
-$positions: static, relative, absolute, fixed, sticky !default;
-
-
-// Printing
+$kbd-color: var(--#{$prefix}body-bg) !default;
+$kbd-bg: var(--#{$prefix}body-color) !default;
+$nested-kbd-font-weight: null !default; // Deprecated in v5.2.0, removing in v6
-$print-page-size: a3 !default;
-$print-body-min-width: map-get($grid-breakpoints, "lg") !default;
+$pre-color: null !default;
diff --git a/assets/scss/bootstrap/bootstrap-grid.scss b/assets/scss/bootstrap/bootstrap-grid.scss
index 33e1376b..52bd577e 100644
--- a/assets/scss/bootstrap/bootstrap-grid.scss
+++ b/assets/scss/bootstrap/bootstrap-grid.scss
@@ -1,29 +1,62 @@
-/*!
- * Bootstrap Grid v4.4.1 (https://getbootstrap.com/)
- * Copyright 2011-2019 The Bootstrap Authors
- * Copyright 2011-2019 Twitter, Inc.
- * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
- */
+@import "mixins/banner";
+@include bsBanner(Grid);
-html {
- box-sizing: border-box;
- -ms-overflow-style: scrollbar;
-}
-
-*,
-*::before,
-*::after {
- box-sizing: inherit;
-}
+$include-column-box-sizing: true !default;
@import "functions";
@import "variables";
+@import "variables-dark";
+@import "maps";
@import "mixins/breakpoints";
-@import "mixins/grid-framework";
+@import "mixins/container";
@import "mixins/grid";
+@import "mixins/utilities";
+
+@import "vendor/rfs";
+@import "containers";
@import "grid";
-@import "utilities/display";
-@import "utilities/flex";
-@import "utilities/spacing";
+
+@import "utilities";
+// Only use the utilities we need
+// stylelint-disable-next-line scss/dollar-variable-default
+$utilities: map-get-multiple(
+ $utilities,
+ (
+ "display",
+ "order",
+ "flex",
+ "flex-direction",
+ "flex-grow",
+ "flex-shrink",
+ "flex-wrap",
+ "justify-content",
+ "align-items",
+ "align-content",
+ "align-self",
+ "margin",
+ "margin-x",
+ "margin-y",
+ "margin-top",
+ "margin-end",
+ "margin-bottom",
+ "margin-start",
+ "negative-margin",
+ "negative-margin-x",
+ "negative-margin-y",
+ "negative-margin-top",
+ "negative-margin-end",
+ "negative-margin-bottom",
+ "negative-margin-start",
+ "padding",
+ "padding-x",
+ "padding-y",
+ "padding-top",
+ "padding-end",
+ "padding-bottom",
+ "padding-start",
+ )
+);
+
+@import "utilities/api";
diff --git a/assets/scss/bootstrap/bootstrap-reboot.scss b/assets/scss/bootstrap/bootstrap-reboot.scss
index 5dd6f846..5b69b955 100644
--- a/assets/scss/bootstrap/bootstrap-reboot.scss
+++ b/assets/scss/bootstrap/bootstrap-reboot.scss
@@ -1,12 +1,10 @@
-/*!
- * Bootstrap Reboot v4.4.1 (https://getbootstrap.com/)
- * Copyright 2011-2019 The Bootstrap Authors
- * Copyright 2011-2019 Twitter, Inc.
- * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
- * Forked from Normalize.css, licensed MIT (https://github.com/necolas/normalize.css/blob/master/LICENSE.md)
- */
+@import "mixins/banner";
+@include bsBanner(Reboot);
@import "functions";
@import "variables";
+@import "variables-dark";
+@import "maps";
@import "mixins";
+@import "root";
@import "reboot";
diff --git a/assets/scss/bootstrap/bootstrap-utilities.scss b/assets/scss/bootstrap/bootstrap-utilities.scss
new file mode 100644
index 00000000..99c4a359
--- /dev/null
+++ b/assets/scss/bootstrap/bootstrap-utilities.scss
@@ -0,0 +1,19 @@
+@import "mixins/banner";
+@include bsBanner(Utilities);
+
+// Configuration
+@import "functions";
+@import "variables";
+@import "variables-dark";
+@import "maps";
+@import "mixins";
+@import "utilities";
+
+// Layout & components
+@import "root";
+
+// Helpers
+@import "helpers";
+
+// Utilities
+@import "utilities/api";
diff --git a/assets/scss/bootstrap/bootstrap.scss b/assets/scss/bootstrap/bootstrap.scss
index 881e4d86..449d7048 100644
--- a/assets/scss/bootstrap/bootstrap.scss
+++ b/assets/scss/bootstrap/bootstrap.scss
@@ -1,18 +1,22 @@
-/*!
- * Bootstrap v4.4.1 (https://getbootstrap.com/)
- * Copyright 2011-2019 The Bootstrap Authors
- * Copyright 2011-2019 Twitter, Inc.
- * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
- */
+@import "mixins/banner";
+@include bsBanner("");
+
+// scss-docs-start import-stack
+// Configuration
@import "functions";
@import "variables";
+@import "variables-dark";
+@import "maps";
@import "mixins";
+@import "utilities";
+
+// Layout & components
@import "root";
@import "reboot";
@import "type";
@import "images";
-@import "code";
+@import "containers";
@import "grid";
@import "tables";
@import "forms";
@@ -20,18 +24,15 @@
@import "transitions";
@import "dropdown";
@import "button-group";
-@import "input-group";
-@import "custom-forms";
@import "nav";
@import "navbar";
@import "card";
+@import "accordion";
@import "breadcrumb";
@import "pagination";
@import "badge";
-@import "jumbotron";
@import "alert";
@import "progress";
-@import "media";
@import "list-group";
@import "close";
@import "toasts";
@@ -40,5 +41,12 @@
@import "popover";
@import "carousel";
@import "spinners";
-@import "utilities";
-@import "print";
+@import "offcanvas";
+@import "placeholders";
+
+// Helpers
+@import "helpers";
+
+// Utilities
+@import "utilities/api";
+// scss-docs-end import-stack
diff --git a/assets/scss/bootstrap/forms/_floating-labels.scss b/assets/scss/bootstrap/forms/_floating-labels.scss
new file mode 100644
index 00000000..3ca4264d
--- /dev/null
+++ b/assets/scss/bootstrap/forms/_floating-labels.scss
@@ -0,0 +1,94 @@
+.form-floating {
+ position: relative;
+
+ > .form-control,
+ > .form-control-plaintext,
+ > .form-select {
+ height: $form-floating-height;
+ min-height: $form-floating-height;
+ line-height: $form-floating-line-height;
+ }
+
+ > label {
+ position: absolute;
+ top: 0;
+ left: 0;
+ z-index: 2;
+ height: 100%; // allow textareas
+ padding: $form-floating-padding-y $form-floating-padding-x;
+ overflow: hidden;
+ text-align: start;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ pointer-events: none;
+ border: $input-border-width solid transparent; // Required for aligning label's text with the input as it affects inner box model
+ transform-origin: 0 0;
+ @include transition($form-floating-transition);
+ }
+
+ > .form-control,
+ > .form-control-plaintext {
+ padding: $form-floating-padding-y $form-floating-padding-x;
+
+ &::placeholder {
+ color: transparent;
+ }
+
+ &:focus,
+ &:not(:placeholder-shown) {
+ padding-top: $form-floating-input-padding-t;
+ padding-bottom: $form-floating-input-padding-b;
+ }
+ // Duplicated because `:-webkit-autofill` invalidates other selectors when grouped
+ &:-webkit-autofill {
+ padding-top: $form-floating-input-padding-t;
+ padding-bottom: $form-floating-input-padding-b;
+ }
+ }
+
+ > .form-select {
+ padding-top: $form-floating-input-padding-t;
+ padding-bottom: $form-floating-input-padding-b;
+ }
+
+ > .form-control:focus,
+ > .form-control:not(:placeholder-shown),
+ > .form-control-plaintext,
+ > .form-select {
+ ~ label {
+ color: rgba(var(--#{$prefix}body-color-rgb), #{$form-floating-label-opacity});
+ transform: $form-floating-label-transform;
+
+ &::after {
+ position: absolute;
+ inset: $form-floating-padding-y ($form-floating-padding-x * .5);
+ z-index: -1;
+ height: $form-floating-label-height;
+ content: "";
+ background-color: $input-bg;
+ @include border-radius($input-border-radius);
+ }
+ }
+ }
+ // Duplicated because `:-webkit-autofill` invalidates other selectors when grouped
+ > .form-control:-webkit-autofill {
+ ~ label {
+ color: rgba(var(--#{$prefix}body-color-rgb), #{$form-floating-label-opacity});
+ transform: $form-floating-label-transform;
+ }
+ }
+
+ > .form-control-plaintext {
+ ~ label {
+ border-width: $input-border-width 0; // Required to properly position label text - as explained above
+ }
+ }
+
+ > :disabled ~ label {
+ color: $form-floating-label-disabled-color;
+
+ &::after {
+ background-color: $input-disabled-bg;
+ }
+ }
+}
diff --git a/assets/scss/bootstrap/forms/_form-check.scss b/assets/scss/bootstrap/forms/_form-check.scss
new file mode 100644
index 00000000..83aacba2
--- /dev/null
+++ b/assets/scss/bootstrap/forms/_form-check.scss
@@ -0,0 +1,188 @@
+//
+// Check/radio
+//
+
+.form-check {
+ display: block;
+ min-height: $form-check-min-height;
+ padding-left: $form-check-padding-start;
+ margin-bottom: $form-check-margin-bottom;
+
+ .form-check-input {
+ float: left;
+ margin-left: $form-check-padding-start * -1;
+ }
+}
+
+.form-check-reverse {
+ padding-right: $form-check-padding-start;
+ padding-left: 0;
+ text-align: right;
+
+ .form-check-input {
+ float: right;
+ margin-right: $form-check-padding-start * -1;
+ margin-left: 0;
+ }
+}
+
+.form-check-input {
+ --#{$prefix}form-check-bg: #{$form-check-input-bg};
+
+ width: $form-check-input-width;
+ height: $form-check-input-width;
+ margin-top: ($line-height-base - $form-check-input-width) * .5; // line-height minus check height
+ vertical-align: top;
+ background-color: var(--#{$prefix}form-check-bg);
+ background-image: var(--#{$prefix}form-check-bg-image);
+ background-repeat: no-repeat;
+ background-position: center;
+ background-size: contain;
+ border: $form-check-input-border;
+ appearance: none;
+ print-color-adjust: exact; // Keep themed appearance for print
+ @include transition($form-check-transition);
+
+ &[type="checkbox"] {
+ @include border-radius($form-check-input-border-radius);
+ }
+
+ &[type="radio"] {
+ // stylelint-disable-next-line property-disallowed-list
+ border-radius: $form-check-radio-border-radius;
+ }
+
+ &:active {
+ filter: $form-check-input-active-filter;
+ }
+
+ &:focus {
+ border-color: $form-check-input-focus-border;
+ outline: 0;
+ box-shadow: $form-check-input-focus-box-shadow;
+ }
+
+ &:checked {
+ background-color: $form-check-input-checked-bg-color;
+ border-color: $form-check-input-checked-border-color;
+
+ &[type="checkbox"] {
+ @if $enable-gradients {
+ --#{$prefix}form-check-bg-image: #{escape-svg($form-check-input-checked-bg-image)}, var(--#{$prefix}gradient);
+ } @else {
+ --#{$prefix}form-check-bg-image: #{escape-svg($form-check-input-checked-bg-image)};
+ }
+ }
+
+ &[type="radio"] {
+ @if $enable-gradients {
+ --#{$prefix}form-check-bg-image: #{escape-svg($form-check-radio-checked-bg-image)}, var(--#{$prefix}gradient);
+ } @else {
+ --#{$prefix}form-check-bg-image: #{escape-svg($form-check-radio-checked-bg-image)};
+ }
+ }
+ }
+
+ &[type="checkbox"]:indeterminate {
+ background-color: $form-check-input-indeterminate-bg-color;
+ border-color: $form-check-input-indeterminate-border-color;
+
+ @if $enable-gradients {
+ --#{$prefix}form-check-bg-image: #{escape-svg($form-check-input-indeterminate-bg-image)}, var(--#{$prefix}gradient);
+ } @else {
+ --#{$prefix}form-check-bg-image: #{escape-svg($form-check-input-indeterminate-bg-image)};
+ }
+ }
+
+ &:disabled {
+ pointer-events: none;
+ filter: none;
+ opacity: $form-check-input-disabled-opacity;
+ }
+
+ // Use disabled attribute in addition of :disabled pseudo-class
+ // See: https://github.com/twbs/bootstrap/issues/28247
+ &[disabled],
+ &:disabled {
+ ~ .form-check-label {
+ cursor: default;
+ opacity: $form-check-label-disabled-opacity;
+ }
+ }
+}
+
+.form-check-label {
+ color: $form-check-label-color;
+ cursor: $form-check-label-cursor;
+}
+
+//
+// Switch
+//
+
+.form-switch {
+ padding-left: $form-switch-padding-start;
+
+ .form-check-input {
+ --#{$prefix}form-switch-bg: #{escape-svg($form-switch-bg-image)};
+
+ width: $form-switch-width;
+ margin-left: $form-switch-padding-start * -1;
+ background-image: var(--#{$prefix}form-switch-bg);
+ background-position: left center;
+ @include border-radius($form-switch-border-radius);
+ @include transition($form-switch-transition);
+
+ &:focus {
+ --#{$prefix}form-switch-bg: #{escape-svg($form-switch-focus-bg-image)};
+ }
+
+ &:checked {
+ background-position: $form-switch-checked-bg-position;
+
+ @if $enable-gradients {
+ --#{$prefix}form-switch-bg: #{escape-svg($form-switch-checked-bg-image)}, var(--#{$prefix}gradient);
+ } @else {
+ --#{$prefix}form-switch-bg: #{escape-svg($form-switch-checked-bg-image)};
+ }
+ }
+ }
+
+ &.form-check-reverse {
+ padding-right: $form-switch-padding-start;
+ padding-left: 0;
+
+ .form-check-input {
+ margin-right: $form-switch-padding-start * -1;
+ margin-left: 0;
+ }
+ }
+}
+
+.form-check-inline {
+ display: inline-block;
+ margin-right: $form-check-inline-margin-end;
+}
+
+.btn-check {
+ position: absolute;
+ clip: rect(0, 0, 0, 0);
+ pointer-events: none;
+
+ &[disabled],
+ &:disabled {
+ + .btn {
+ pointer-events: none;
+ filter: none;
+ opacity: $form-check-btn-check-disabled-opacity;
+ }
+ }
+}
+
+@if $enable-dark-mode {
+ @include color-mode(dark) {
+ .form-switch .form-check-input:not(:checked):not(:focus) {
+ --#{$prefix}form-switch-bg: #{escape-svg($form-switch-bg-image-dark)};
+ }
+ }
+}
diff --git a/assets/scss/bootstrap/forms/_form-control.scss b/assets/scss/bootstrap/forms/_form-control.scss
new file mode 100644
index 00000000..ca2a7df4
--- /dev/null
+++ b/assets/scss/bootstrap/forms/_form-control.scss
@@ -0,0 +1,214 @@
+//
+// General form controls (plus a few specific high-level interventions)
+//
+
+.form-control {
+ display: block;
+ width: 100%;
+ padding: $input-padding-y $input-padding-x;
+ font-family: $input-font-family;
+ @include font-size($input-font-size);
+ font-weight: $input-font-weight;
+ line-height: $input-line-height;
+ color: $input-color;
+ background-color: $input-bg;
+ background-clip: padding-box;
+ border: $input-border-width solid $input-border-color;
+ appearance: none; // Fix appearance for date inputs in Safari
+
+ // Note: This has no effect on
s in some browsers, due to the limited stylability of ``s in CSS.
+ @include border-radius($input-border-radius, 0);
+
+ @include box-shadow($input-box-shadow);
+ @include transition($input-transition);
+
+ &[type="file"] {
+ overflow: hidden; // prevent pseudo element button overlap
+
+ &:not(:disabled):not([readonly]) {
+ cursor: pointer;
+ }
+ }
+
+ // Customize the `:focus` state to imitate native WebKit styles.
+ &:focus {
+ color: $input-focus-color;
+ background-color: $input-focus-bg;
+ border-color: $input-focus-border-color;
+ outline: 0;
+ @if $enable-shadows {
+ @include box-shadow($input-box-shadow, $input-focus-box-shadow);
+ } @else {
+ // Avoid using mixin so we can pass custom focus shadow properly
+ box-shadow: $input-focus-box-shadow;
+ }
+ }
+
+ &::-webkit-date-and-time-value {
+ // On Android Chrome, form-control's "width: 100%" makes the input width too small
+ // Tested under Android 11 / Chrome 89, Android 12 / Chrome 100, Android 13 / Chrome 109
+ //
+ // On iOS Safari, form-control's "appearance: none" + "width: 100%" makes the input width too small
+ // Tested under iOS 16.2 / Safari 16.2
+ min-width: 85px; // Seems to be a good minimum safe width
+
+ // Add some height to date inputs on iOS
+ // https://github.com/twbs/bootstrap/issues/23307
+ // TODO: we can remove this workaround once https://bugs.webkit.org/show_bug.cgi?id=198959 is resolved
+ // Multiply line-height by 1em if it has no unit
+ height: if(unit($input-line-height) == "", $input-line-height * 1em, $input-line-height);
+
+ // Android Chrome type="date" is taller than the other inputs
+ // because of "margin: 1px 24px 1px 4px" inside the shadow DOM
+ // Tested under Android 11 / Chrome 89, Android 12 / Chrome 100, Android 13 / Chrome 109
+ margin: 0;
+ }
+
+ // Prevent excessive date input height in Webkit
+ // https://github.com/twbs/bootstrap/issues/34433
+ &::-webkit-datetime-edit {
+ display: block;
+ padding: 0;
+ }
+
+ // Placeholder
+ &::placeholder {
+ color: $input-placeholder-color;
+ // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526.
+ opacity: 1;
+ }
+
+ // Disabled inputs
+ //
+ // HTML5 says that controls under a fieldset > legend:first-child won't be
+ // disabled if the fieldset is disabled. Due to implementation difficulty, we
+ // don't honor that edge case; we style them as disabled anyway.
+ &:disabled {
+ color: $input-disabled-color;
+ background-color: $input-disabled-bg;
+ border-color: $input-disabled-border-color;
+ // iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655.
+ opacity: 1;
+ }
+
+ // File input buttons theming
+ &::file-selector-button {
+ padding: $input-padding-y $input-padding-x;
+ margin: (-$input-padding-y) (-$input-padding-x);
+ margin-inline-end: $input-padding-x;
+ color: $form-file-button-color;
+ @include gradient-bg($form-file-button-bg);
+ pointer-events: none;
+ border-color: inherit;
+ border-style: solid;
+ border-width: 0;
+ border-inline-end-width: $input-border-width;
+ border-radius: 0; // stylelint-disable-line property-disallowed-list
+ @include transition($btn-transition);
+ }
+
+ &:hover:not(:disabled):not([readonly])::file-selector-button {
+ background-color: $form-file-button-hover-bg;
+ }
+}
+
+// Readonly controls as plain text
+//
+// Apply class to a readonly input to make it appear like regular plain
+// text (without any border, background color, focus indicator)
+
+.form-control-plaintext {
+ display: block;
+ width: 100%;
+ padding: $input-padding-y 0;
+ margin-bottom: 0; // match inputs if this class comes on inputs with default margins
+ line-height: $input-line-height;
+ color: $input-plaintext-color;
+ background-color: transparent;
+ border: solid transparent;
+ border-width: $input-border-width 0;
+
+ &:focus {
+ outline: 0;
+ }
+
+ &.form-control-sm,
+ &.form-control-lg {
+ padding-right: 0;
+ padding-left: 0;
+ }
+}
+
+// Form control sizing
+//
+// Build on `.form-control` with modifier classes to decrease or increase the
+// height and font-size of form controls.
+//
+// Repeated in `_input_group.scss` to avoid Sass extend issues.
+
+.form-control-sm {
+ min-height: $input-height-sm;
+ padding: $input-padding-y-sm $input-padding-x-sm;
+ @include font-size($input-font-size-sm);
+ @include border-radius($input-border-radius-sm);
+
+ &::file-selector-button {
+ padding: $input-padding-y-sm $input-padding-x-sm;
+ margin: (-$input-padding-y-sm) (-$input-padding-x-sm);
+ margin-inline-end: $input-padding-x-sm;
+ }
+}
+
+.form-control-lg {
+ min-height: $input-height-lg;
+ padding: $input-padding-y-lg $input-padding-x-lg;
+ @include font-size($input-font-size-lg);
+ @include border-radius($input-border-radius-lg);
+
+ &::file-selector-button {
+ padding: $input-padding-y-lg $input-padding-x-lg;
+ margin: (-$input-padding-y-lg) (-$input-padding-x-lg);
+ margin-inline-end: $input-padding-x-lg;
+ }
+}
+
+// Make sure textareas don't shrink too much when resized
+// https://github.com/twbs/bootstrap/pull/29124
+// stylelint-disable selector-no-qualifying-type
+textarea {
+ &.form-control {
+ min-height: $input-height;
+ }
+
+ &.form-control-sm {
+ min-height: $input-height-sm;
+ }
+
+ &.form-control-lg {
+ min-height: $input-height-lg;
+ }
+}
+// stylelint-enable selector-no-qualifying-type
+
+.form-control-color {
+ width: $form-color-width;
+ height: $input-height;
+ padding: $input-padding-y;
+
+ &:not(:disabled):not([readonly]) {
+ cursor: pointer;
+ }
+
+ &::-moz-color-swatch {
+ border: 0 !important; // stylelint-disable-line declaration-no-important
+ @include border-radius($input-border-radius);
+ }
+
+ &::-webkit-color-swatch {
+ border: 0 !important; // stylelint-disable-line declaration-no-important
+ @include border-radius($input-border-radius);
+ }
+
+ &.form-control-sm { height: $input-height-sm; }
+ &.form-control-lg { height: $input-height-lg; }
+}
diff --git a/assets/scss/bootstrap/forms/_form-range.scss b/assets/scss/bootstrap/forms/_form-range.scss
new file mode 100644
index 00000000..6de42132
--- /dev/null
+++ b/assets/scss/bootstrap/forms/_form-range.scss
@@ -0,0 +1,91 @@
+// Range
+//
+// Style range inputs the same across browsers. Vendor-specific rules for pseudo
+// elements cannot be mixed. As such, there are no shared styles for focus or
+// active states on prefixed selectors.
+
+.form-range {
+ width: 100%;
+ height: add($form-range-thumb-height, $form-range-thumb-focus-box-shadow-width * 2);
+ padding: 0; // Need to reset padding
+ background-color: transparent;
+ appearance: none;
+
+ &:focus {
+ outline: 0;
+
+ // Pseudo-elements must be split across multiple rulesets to have an effect.
+ // No box-shadow() mixin for focus accessibility.
+ &::-webkit-slider-thumb { box-shadow: $form-range-thumb-focus-box-shadow; }
+ &::-moz-range-thumb { box-shadow: $form-range-thumb-focus-box-shadow; }
+ }
+
+ &::-moz-focus-outer {
+ border: 0;
+ }
+
+ &::-webkit-slider-thumb {
+ width: $form-range-thumb-width;
+ height: $form-range-thumb-height;
+ margin-top: ($form-range-track-height - $form-range-thumb-height) * .5; // Webkit specific
+ @include gradient-bg($form-range-thumb-bg);
+ border: $form-range-thumb-border;
+ @include border-radius($form-range-thumb-border-radius);
+ @include box-shadow($form-range-thumb-box-shadow);
+ @include transition($form-range-thumb-transition);
+ appearance: none;
+
+ &:active {
+ @include gradient-bg($form-range-thumb-active-bg);
+ }
+ }
+
+ &::-webkit-slider-runnable-track {
+ width: $form-range-track-width;
+ height: $form-range-track-height;
+ color: transparent; // Why?
+ cursor: $form-range-track-cursor;
+ background-color: $form-range-track-bg;
+ border-color: transparent;
+ @include border-radius($form-range-track-border-radius);
+ @include box-shadow($form-range-track-box-shadow);
+ }
+
+ &::-moz-range-thumb {
+ width: $form-range-thumb-width;
+ height: $form-range-thumb-height;
+ @include gradient-bg($form-range-thumb-bg);
+ border: $form-range-thumb-border;
+ @include border-radius($form-range-thumb-border-radius);
+ @include box-shadow($form-range-thumb-box-shadow);
+ @include transition($form-range-thumb-transition);
+ appearance: none;
+
+ &:active {
+ @include gradient-bg($form-range-thumb-active-bg);
+ }
+ }
+
+ &::-moz-range-track {
+ width: $form-range-track-width;
+ height: $form-range-track-height;
+ color: transparent;
+ cursor: $form-range-track-cursor;
+ background-color: $form-range-track-bg;
+ border-color: transparent; // Firefox specific?
+ @include border-radius($form-range-track-border-radius);
+ @include box-shadow($form-range-track-box-shadow);
+ }
+
+ &:disabled {
+ pointer-events: none;
+
+ &::-webkit-slider-thumb {
+ background-color: $form-range-thumb-disabled-bg;
+ }
+
+ &::-moz-range-thumb {
+ background-color: $form-range-thumb-disabled-bg;
+ }
+ }
+}
diff --git a/assets/scss/bootstrap/forms/_form-select.scss b/assets/scss/bootstrap/forms/_form-select.scss
new file mode 100644
index 00000000..0b26323f
--- /dev/null
+++ b/assets/scss/bootstrap/forms/_form-select.scss
@@ -0,0 +1,80 @@
+// Select
+//
+// Replaces the browser default select with a custom one, mostly pulled from
+// https://primer.github.io/.
+
+.form-select {
+ --#{$prefix}form-select-bg-img: #{escape-svg($form-select-indicator)};
+
+ display: block;
+ width: 100%;
+ padding: $form-select-padding-y $form-select-indicator-padding $form-select-padding-y $form-select-padding-x;
+ font-family: $form-select-font-family;
+ @include font-size($form-select-font-size);
+ font-weight: $form-select-font-weight;
+ line-height: $form-select-line-height;
+ color: $form-select-color;
+ background-color: $form-select-bg;
+ background-image: var(--#{$prefix}form-select-bg-img), var(--#{$prefix}form-select-bg-icon, none);
+ background-repeat: no-repeat;
+ background-position: $form-select-bg-position;
+ background-size: $form-select-bg-size;
+ border: $form-select-border-width solid $form-select-border-color;
+ @include border-radius($form-select-border-radius, 0);
+ @include box-shadow($form-select-box-shadow);
+ @include transition($form-select-transition);
+ appearance: none;
+
+ &:focus {
+ border-color: $form-select-focus-border-color;
+ outline: 0;
+ @if $enable-shadows {
+ @include box-shadow($form-select-box-shadow, $form-select-focus-box-shadow);
+ } @else {
+ // Avoid using mixin so we can pass custom focus shadow properly
+ box-shadow: $form-select-focus-box-shadow;
+ }
+ }
+
+ &[multiple],
+ &[size]:not([size="1"]) {
+ padding-right: $form-select-padding-x;
+ background-image: none;
+ }
+
+ &:disabled {
+ color: $form-select-disabled-color;
+ background-color: $form-select-disabled-bg;
+ border-color: $form-select-disabled-border-color;
+ }
+
+ // Remove outline from select box in FF
+ &:-moz-focusring {
+ color: transparent;
+ text-shadow: 0 0 0 $form-select-color;
+ }
+}
+
+.form-select-sm {
+ padding-top: $form-select-padding-y-sm;
+ padding-bottom: $form-select-padding-y-sm;
+ padding-left: $form-select-padding-x-sm;
+ @include font-size($form-select-font-size-sm);
+ @include border-radius($form-select-border-radius-sm);
+}
+
+.form-select-lg {
+ padding-top: $form-select-padding-y-lg;
+ padding-bottom: $form-select-padding-y-lg;
+ padding-left: $form-select-padding-x-lg;
+ @include font-size($form-select-font-size-lg);
+ @include border-radius($form-select-border-radius-lg);
+}
+
+@if $enable-dark-mode {
+ @include color-mode(dark) {
+ .form-select {
+ --#{$prefix}form-select-bg-img: #{escape-svg($form-select-indicator-dark)};
+ }
+ }
+}
diff --git a/assets/scss/bootstrap/forms/_form-text.scss b/assets/scss/bootstrap/forms/_form-text.scss
new file mode 100644
index 00000000..f080d1a2
--- /dev/null
+++ b/assets/scss/bootstrap/forms/_form-text.scss
@@ -0,0 +1,11 @@
+//
+// Form text
+//
+
+.form-text {
+ margin-top: $form-text-margin-top;
+ @include font-size($form-text-font-size);
+ font-style: $form-text-font-style;
+ font-weight: $form-text-font-weight;
+ color: $form-text-color;
+}
diff --git a/assets/scss/bootstrap/forms/_input-group.scss b/assets/scss/bootstrap/forms/_input-group.scss
new file mode 100644
index 00000000..58e4d409
--- /dev/null
+++ b/assets/scss/bootstrap/forms/_input-group.scss
@@ -0,0 +1,132 @@
+//
+// Base styles
+//
+
+.input-group {
+ position: relative;
+ display: flex;
+ flex-wrap: wrap; // For form validation feedback
+ align-items: stretch;
+ width: 100%;
+
+ > .form-control,
+ > .form-select,
+ > .form-floating {
+ position: relative; // For focus state's z-index
+ flex: 1 1 auto;
+ width: 1%;
+ min-width: 0; // https://stackoverflow.com/questions/36247140/why-dont-flex-items-shrink-past-content-size
+ }
+
+ // Bring the "active" form control to the top of surrounding elements
+ > .form-control:focus,
+ > .form-select:focus,
+ > .form-floating:focus-within {
+ z-index: 5;
+ }
+
+ // Ensure buttons are always above inputs for more visually pleasing borders.
+ // This isn't needed for `.input-group-text` since it shares the same border-color
+ // as our inputs.
+ .btn {
+ position: relative;
+ z-index: 2;
+
+ &:focus {
+ z-index: 5;
+ }
+ }
+}
+
+
+// Textual addons
+//
+// Serves as a catch-all element for any text or radio/checkbox input you wish
+// to prepend or append to an input.
+
+.input-group-text {
+ display: flex;
+ align-items: center;
+ padding: $input-group-addon-padding-y $input-group-addon-padding-x;
+ @include font-size($input-font-size); // Match inputs
+ font-weight: $input-group-addon-font-weight;
+ line-height: $input-line-height;
+ color: $input-group-addon-color;
+ text-align: center;
+ white-space: nowrap;
+ background-color: $input-group-addon-bg;
+ border: $input-border-width solid $input-group-addon-border-color;
+ @include border-radius($input-border-radius);
+}
+
+
+// Sizing
+//
+// Remix the default form control sizing classes into new ones for easier
+// manipulation.
+
+.input-group-lg > .form-control,
+.input-group-lg > .form-select,
+.input-group-lg > .input-group-text,
+.input-group-lg > .btn {
+ padding: $input-padding-y-lg $input-padding-x-lg;
+ @include font-size($input-font-size-lg);
+ @include border-radius($input-border-radius-lg);
+}
+
+.input-group-sm > .form-control,
+.input-group-sm > .form-select,
+.input-group-sm > .input-group-text,
+.input-group-sm > .btn {
+ padding: $input-padding-y-sm $input-padding-x-sm;
+ @include font-size($input-font-size-sm);
+ @include border-radius($input-border-radius-sm);
+}
+
+.input-group-lg > .form-select,
+.input-group-sm > .form-select {
+ padding-right: $form-select-padding-x + $form-select-indicator-padding;
+}
+
+
+// Rounded corners
+//
+// These rulesets must come after the sizing ones to properly override sm and lg
+// border-radius values when extending. They're more specific than we'd like
+// with the `.input-group >` part, but without it, we cannot override the sizing.
+
+// stylelint-disable-next-line no-duplicate-selectors
+.input-group {
+ &:not(.has-validation) {
+ > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating),
+ > .dropdown-toggle:nth-last-child(n + 3),
+ > .form-floating:not(:last-child) > .form-control,
+ > .form-floating:not(:last-child) > .form-select {
+ @include border-end-radius(0);
+ }
+ }
+
+ &.has-validation {
+ > :nth-last-child(n + 3):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating),
+ > .dropdown-toggle:nth-last-child(n + 4),
+ > .form-floating:nth-last-child(n + 3) > .form-control,
+ > .form-floating:nth-last-child(n + 3) > .form-select {
+ @include border-end-radius(0);
+ }
+ }
+
+ $validation-messages: "";
+ @each $state in map-keys($form-validation-states) {
+ $validation-messages: $validation-messages + ":not(." + unquote($state) + "-tooltip)" + ":not(." + unquote($state) + "-feedback)";
+ }
+
+ > :not(:first-child):not(.dropdown-menu)#{$validation-messages} {
+ margin-left: calc(#{$input-border-width} * -1); // stylelint-disable-line function-disallowed-list
+ @include border-start-radius(0);
+ }
+
+ > .form-floating:not(:first-child) > .form-control,
+ > .form-floating:not(:first-child) > .form-select {
+ @include border-start-radius(0);
+ }
+}
diff --git a/assets/scss/bootstrap/forms/_labels.scss b/assets/scss/bootstrap/forms/_labels.scss
new file mode 100644
index 00000000..39ecafcd
--- /dev/null
+++ b/assets/scss/bootstrap/forms/_labels.scss
@@ -0,0 +1,36 @@
+//
+// Labels
+//
+
+.form-label {
+ margin-bottom: $form-label-margin-bottom;
+ @include font-size($form-label-font-size);
+ font-style: $form-label-font-style;
+ font-weight: $form-label-font-weight;
+ color: $form-label-color;
+}
+
+// For use with horizontal and inline forms, when you need the label (or legend)
+// text to align with the form controls.
+.col-form-label {
+ padding-top: add($input-padding-y, $input-border-width);
+ padding-bottom: add($input-padding-y, $input-border-width);
+ margin-bottom: 0; // Override the `` default
+ @include font-size(inherit); // Override the `` default
+ font-style: $form-label-font-style;
+ font-weight: $form-label-font-weight;
+ line-height: $input-line-height;
+ color: $form-label-color;
+}
+
+.col-form-label-lg {
+ padding-top: add($input-padding-y-lg, $input-border-width);
+ padding-bottom: add($input-padding-y-lg, $input-border-width);
+ @include font-size($input-font-size-lg);
+}
+
+.col-form-label-sm {
+ padding-top: add($input-padding-y-sm, $input-border-width);
+ padding-bottom: add($input-padding-y-sm, $input-border-width);
+ @include font-size($input-font-size-sm);
+}
diff --git a/assets/scss/bootstrap/forms/_validation.scss b/assets/scss/bootstrap/forms/_validation.scss
new file mode 100644
index 00000000..c48123a7
--- /dev/null
+++ b/assets/scss/bootstrap/forms/_validation.scss
@@ -0,0 +1,12 @@
+// Form validation
+//
+// Provide feedback to users when form field values are valid or invalid. Works
+// primarily for client-side validation via scoped `:invalid` and `:valid`
+// pseudo-classes but also includes `.is-invalid` and `.is-valid` classes for
+// server-side validation.
+
+// scss-docs-start form-validation-states-loop
+@each $state, $data in $form-validation-states {
+ @include form-validation-state($state, $data...);
+}
+// scss-docs-end form-validation-states-loop
diff --git a/assets/scss/bootstrap/utilities/_clearfix.scss b/assets/scss/bootstrap/helpers/_clearfix.scss
similarity index 100%
rename from assets/scss/bootstrap/utilities/_clearfix.scss
rename to assets/scss/bootstrap/helpers/_clearfix.scss
diff --git a/assets/scss/bootstrap/helpers/_color-bg.scss b/assets/scss/bootstrap/helpers/_color-bg.scss
new file mode 100644
index 00000000..c00acde5
--- /dev/null
+++ b/assets/scss/bootstrap/helpers/_color-bg.scss
@@ -0,0 +1,8 @@
+// All-caps `RGBA()` function used because of this Sass bug: https://github.com/sass/node-sass/issues/2251
+@each $color, $value in $theme-colors {
+ $color-rgb: to-rgb($value);
+ .text-bg-#{$color} {
+ color: color-contrast($value) if($enable-important-utilities, !important, null);
+ background-color: RGBA($color-rgb, var(--#{$prefix}bg-opacity, 1)) if($enable-important-utilities, !important, null);
+ }
+}
diff --git a/assets/scss/bootstrap/helpers/_colored-links.scss b/assets/scss/bootstrap/helpers/_colored-links.scss
new file mode 100644
index 00000000..5f868578
--- /dev/null
+++ b/assets/scss/bootstrap/helpers/_colored-links.scss
@@ -0,0 +1,30 @@
+// All-caps `RGBA()` function used because of this Sass bug: https://github.com/sass/node-sass/issues/2251
+@each $color, $value in $theme-colors {
+ .link-#{$color} {
+ color: RGBA(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}link-opacity, 1)) if($enable-important-utilities, !important, null);
+ text-decoration-color: RGBA(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}link-underline-opacity, 1)) if($enable-important-utilities, !important, null);
+
+ @if $link-shade-percentage != 0 {
+ &:hover,
+ &:focus {
+ $hover-color: if(color-contrast($value) == $color-contrast-light, shade-color($value, $link-shade-percentage), tint-color($value, $link-shade-percentage));
+ color: RGBA(#{to-rgb($hover-color)}, var(--#{$prefix}link-opacity, 1)) if($enable-important-utilities, !important, null);
+ text-decoration-color: RGBA(to-rgb($hover-color), var(--#{$prefix}link-underline-opacity, 1)) if($enable-important-utilities, !important, null);
+ }
+ }
+ }
+}
+
+// One-off special link helper as a bridge until v6
+.link-body-emphasis {
+ color: RGBA(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-opacity, 1)) if($enable-important-utilities, !important, null);
+ text-decoration-color: RGBA(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-underline-opacity, 1)) if($enable-important-utilities, !important, null);
+
+ @if $link-shade-percentage != 0 {
+ &:hover,
+ &:focus {
+ color: RGBA(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-opacity, .75)) if($enable-important-utilities, !important, null);
+ text-decoration-color: RGBA(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-underline-opacity, .75)) if($enable-important-utilities, !important, null);
+ }
+ }
+}
diff --git a/assets/scss/bootstrap/helpers/_focus-ring.scss b/assets/scss/bootstrap/helpers/_focus-ring.scss
new file mode 100644
index 00000000..26508a8d
--- /dev/null
+++ b/assets/scss/bootstrap/helpers/_focus-ring.scss
@@ -0,0 +1,5 @@
+.focus-ring:focus {
+ outline: 0;
+ // By default, there is no `--bs-focus-ring-x`, `--bs-focus-ring-y`, or `--bs-focus-ring-blur`, but we provide CSS variables with fallbacks to initial `0` values
+ box-shadow: var(--#{$prefix}focus-ring-x, 0) var(--#{$prefix}focus-ring-y, 0) var(--#{$prefix}focus-ring-blur, 0) var(--#{$prefix}focus-ring-width) var(--#{$prefix}focus-ring-color);
+}
diff --git a/assets/scss/bootstrap/helpers/_icon-link.scss b/assets/scss/bootstrap/helpers/_icon-link.scss
new file mode 100644
index 00000000..3f8bcb33
--- /dev/null
+++ b/assets/scss/bootstrap/helpers/_icon-link.scss
@@ -0,0 +1,25 @@
+.icon-link {
+ display: inline-flex;
+ gap: $icon-link-gap;
+ align-items: center;
+ text-decoration-color: rgba(var(--#{$prefix}link-color-rgb), var(--#{$prefix}link-opacity, .5));
+ text-underline-offset: $icon-link-underline-offset;
+ backface-visibility: hidden;
+
+ > .bi {
+ flex-shrink: 0;
+ width: $icon-link-icon-size;
+ height: $icon-link-icon-size;
+ fill: currentcolor;
+ @include transition($icon-link-icon-transition);
+ }
+}
+
+.icon-link-hover {
+ &:hover,
+ &:focus-visible {
+ > .bi {
+ transform: var(--#{$prefix}icon-link-transform, $icon-link-icon-transform);
+ }
+ }
+}
diff --git a/assets/scss/bootstrap/helpers/_position.scss b/assets/scss/bootstrap/helpers/_position.scss
new file mode 100644
index 00000000..59103d94
--- /dev/null
+++ b/assets/scss/bootstrap/helpers/_position.scss
@@ -0,0 +1,36 @@
+// Shorthand
+
+.fixed-top {
+ position: fixed;
+ top: 0;
+ right: 0;
+ left: 0;
+ z-index: $zindex-fixed;
+}
+
+.fixed-bottom {
+ position: fixed;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ z-index: $zindex-fixed;
+}
+
+// Responsive sticky top and bottom
+@each $breakpoint in map-keys($grid-breakpoints) {
+ @include media-breakpoint-up($breakpoint) {
+ $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+ .sticky#{$infix}-top {
+ position: sticky;
+ top: 0;
+ z-index: $zindex-sticky;
+ }
+
+ .sticky#{$infix}-bottom {
+ position: sticky;
+ bottom: 0;
+ z-index: $zindex-sticky;
+ }
+ }
+}
diff --git a/assets/scss/bootstrap/helpers/_ratio.scss b/assets/scss/bootstrap/helpers/_ratio.scss
new file mode 100644
index 00000000..b6a7654c
--- /dev/null
+++ b/assets/scss/bootstrap/helpers/_ratio.scss
@@ -0,0 +1,26 @@
+// Credit: Nicolas Gallagher and SUIT CSS.
+
+.ratio {
+ position: relative;
+ width: 100%;
+
+ &::before {
+ display: block;
+ padding-top: var(--#{$prefix}aspect-ratio);
+ content: "";
+ }
+
+ > * {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ }
+}
+
+@each $key, $ratio in $aspect-ratios {
+ .ratio-#{$key} {
+ --#{$prefix}aspect-ratio: #{$ratio};
+ }
+}
diff --git a/assets/scss/bootstrap/helpers/_stacks.scss b/assets/scss/bootstrap/helpers/_stacks.scss
new file mode 100644
index 00000000..6cd237ae
--- /dev/null
+++ b/assets/scss/bootstrap/helpers/_stacks.scss
@@ -0,0 +1,15 @@
+// scss-docs-start stacks
+.hstack {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ align-self: stretch;
+}
+
+.vstack {
+ display: flex;
+ flex: 1 1 auto;
+ flex-direction: column;
+ align-self: stretch;
+}
+// scss-docs-end stacks
diff --git a/assets/scss/bootstrap/helpers/_stretched-link.scss b/assets/scss/bootstrap/helpers/_stretched-link.scss
new file mode 100644
index 00000000..71a1c755
--- /dev/null
+++ b/assets/scss/bootstrap/helpers/_stretched-link.scss
@@ -0,0 +1,15 @@
+//
+// Stretched link
+//
+
+.stretched-link {
+ &::#{$stretched-link-pseudo-element} {
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ z-index: $stretched-link-z-index;
+ content: "";
+ }
+}
diff --git a/assets/scss/bootstrap/helpers/_text-truncation.scss b/assets/scss/bootstrap/helpers/_text-truncation.scss
new file mode 100644
index 00000000..6421dac9
--- /dev/null
+++ b/assets/scss/bootstrap/helpers/_text-truncation.scss
@@ -0,0 +1,7 @@
+//
+// Text truncation
+//
+
+.text-truncate {
+ @include text-truncate();
+}
diff --git a/assets/scss/bootstrap/helpers/_visually-hidden.scss b/assets/scss/bootstrap/helpers/_visually-hidden.scss
new file mode 100644
index 00000000..4760ff03
--- /dev/null
+++ b/assets/scss/bootstrap/helpers/_visually-hidden.scss
@@ -0,0 +1,8 @@
+//
+// Visually hidden
+//
+
+.visually-hidden,
+.visually-hidden-focusable:not(:focus):not(:focus-within) {
+ @include visually-hidden();
+}
diff --git a/assets/scss/bootstrap/helpers/_vr.scss b/assets/scss/bootstrap/helpers/_vr.scss
new file mode 100644
index 00000000..9bca0995
--- /dev/null
+++ b/assets/scss/bootstrap/helpers/_vr.scss
@@ -0,0 +1,8 @@
+.vr {
+ display: inline-block;
+ align-self: stretch;
+ width: 1px;
+ min-height: 1em;
+ background-color: currentcolor;
+ opacity: $hr-opacity;
+}
diff --git a/assets/scss/bootstrap/mixins/_alert.scss b/assets/scss/bootstrap/mixins/_alert.scss
index db5a7eb4..fb524af1 100644
--- a/assets/scss/bootstrap/mixins/_alert.scss
+++ b/assets/scss/bootstrap/mixins/_alert.scss
@@ -1,13 +1,18 @@
+@include deprecate("`alert-variant()`", "v5.3.0", "v6.0.0");
+
+// scss-docs-start alert-variant-mixin
@mixin alert-variant($background, $border, $color) {
- color: $color;
- @include gradient-bg($background);
- border-color: $border;
+ --#{$prefix}alert-color: #{$color};
+ --#{$prefix}alert-bg: #{$background};
+ --#{$prefix}alert-border-color: #{$border};
+ --#{$prefix}alert-link-color: #{shade-color($color, 20%)};
- hr {
- border-top-color: darken($border, 5%);
+ @if $enable-gradients {
+ background-image: var(--#{$prefix}gradient);
}
.alert-link {
- color: darken($color, 10%);
+ color: var(--#{$prefix}alert-link-color);
}
}
+// scss-docs-end alert-variant-mixin
diff --git a/assets/scss/bootstrap/mixins/_backdrop.scss b/assets/scss/bootstrap/mixins/_backdrop.scss
new file mode 100644
index 00000000..9705ae9e
--- /dev/null
+++ b/assets/scss/bootstrap/mixins/_backdrop.scss
@@ -0,0 +1,14 @@
+// Shared between modals and offcanvases
+@mixin overlay-backdrop($zindex, $backdrop-bg, $backdrop-opacity) {
+ position: fixed;
+ top: 0;
+ left: 0;
+ z-index: $zindex;
+ width: 100vw;
+ height: 100vh;
+ background-color: $backdrop-bg;
+
+ // Fade for backdrop
+ &.fade { opacity: 0; }
+ &.show { opacity: $backdrop-opacity; }
+}
diff --git a/assets/scss/bootstrap/mixins/_background-variant.scss b/assets/scss/bootstrap/mixins/_background-variant.scss
deleted file mode 100644
index 3ceb5c56..00000000
--- a/assets/scss/bootstrap/mixins/_background-variant.scss
+++ /dev/null
@@ -1,22 +0,0 @@
-// stylelint-disable declaration-no-important
-
-// Contextual backgrounds
-
-@mixin bg-variant($parent, $color, $ignore-warning: false) {
- #{$parent} {
- background-color: $color !important;
- }
- a#{$parent},
- button#{$parent} {
- @include hover-focus() {
- background-color: darken($color, 10%) !important;
- }
- }
- @include deprecate("The `bg-variant` mixin", "v4.4.0", "v5", $ignore-warning);
-}
-
-@mixin bg-gradient-variant($parent, $color) {
- #{$parent} {
- background: $color linear-gradient(180deg, mix($body-bg, $color, 15%), $color) repeat-x !important;
- }
-}
diff --git a/assets/scss/bootstrap/mixins/_badge.scss b/assets/scss/bootstrap/mixins/_badge.scss
deleted file mode 100644
index f1c49914..00000000
--- a/assets/scss/bootstrap/mixins/_badge.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-@mixin badge-variant($bg) {
- color: color-yiq($bg);
- background-color: $bg;
-
- @at-root a#{&} {
- @include hover-focus() {
- color: color-yiq($bg);
- background-color: darken($bg, 10%);
- }
-
- &:focus,
- &.focus {
- outline: 0;
- box-shadow: 0 0 0 $badge-focus-width rgba($bg, .5);
- }
- }
-}
diff --git a/assets/scss/bootstrap/mixins/_banner.scss b/assets/scss/bootstrap/mixins/_banner.scss
new file mode 100644
index 00000000..4323989f
--- /dev/null
+++ b/assets/scss/bootstrap/mixins/_banner.scss
@@ -0,0 +1,7 @@
+@mixin bsBanner($file) {
+ /*!
+ * Bootstrap #{$file} v5.3.0 (https://getbootstrap.com/)
+ * Copyright 2011-2023 The Bootstrap Authors
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
+ */
+}
diff --git a/assets/scss/bootstrap/mixins/_border-radius.scss b/assets/scss/bootstrap/mixins/_border-radius.scss
index 88aeb37d..616decbc 100644
--- a/assets/scss/bootstrap/mixins/_border-radius.scss
+++ b/assets/scss/bootstrap/mixins/_border-radius.scss
@@ -1,63 +1,78 @@
-// stylelint-disable property-blacklist
+// stylelint-disable property-disallowed-list
// Single side border-radius
+// Helper function to replace negative values with 0
+@function valid-radius($radius) {
+ $return: ();
+ @each $value in $radius {
+ @if type-of($value) == number {
+ $return: append($return, max($value, 0));
+ } @else {
+ $return: append($return, $value);
+ }
+ }
+ @return $return;
+}
+
+// scss-docs-start border-radius-mixins
@mixin border-radius($radius: $border-radius, $fallback-border-radius: false) {
@if $enable-rounded {
- border-radius: $radius;
+ border-radius: valid-radius($radius);
}
@else if $fallback-border-radius != false {
border-radius: $fallback-border-radius;
}
}
-@mixin border-top-radius($radius) {
+@mixin border-top-radius($radius: $border-radius) {
@if $enable-rounded {
- border-top-left-radius: $radius;
- border-top-right-radius: $radius;
+ border-top-left-radius: valid-radius($radius);
+ border-top-right-radius: valid-radius($radius);
}
}
-@mixin border-right-radius($radius) {
+@mixin border-end-radius($radius: $border-radius) {
@if $enable-rounded {
- border-top-right-radius: $radius;
- border-bottom-right-radius: $radius;
+ border-top-right-radius: valid-radius($radius);
+ border-bottom-right-radius: valid-radius($radius);
}
}
-@mixin border-bottom-radius($radius) {
+@mixin border-bottom-radius($radius: $border-radius) {
@if $enable-rounded {
- border-bottom-right-radius: $radius;
- border-bottom-left-radius: $radius;
+ border-bottom-right-radius: valid-radius($radius);
+ border-bottom-left-radius: valid-radius($radius);
}
}
-@mixin border-left-radius($radius) {
+@mixin border-start-radius($radius: $border-radius) {
@if $enable-rounded {
- border-top-left-radius: $radius;
- border-bottom-left-radius: $radius;
+ border-top-left-radius: valid-radius($radius);
+ border-bottom-left-radius: valid-radius($radius);
}
}
-@mixin border-top-left-radius($radius) {
+@mixin border-top-start-radius($radius: $border-radius) {
@if $enable-rounded {
- border-top-left-radius: $radius;
+ border-top-left-radius: valid-radius($radius);
}
}
-@mixin border-top-right-radius($radius) {
+@mixin border-top-end-radius($radius: $border-radius) {
@if $enable-rounded {
- border-top-right-radius: $radius;
+ border-top-right-radius: valid-radius($radius);
}
}
-@mixin border-bottom-right-radius($radius) {
+@mixin border-bottom-end-radius($radius: $border-radius) {
@if $enable-rounded {
- border-bottom-right-radius: $radius;
+ border-bottom-right-radius: valid-radius($radius);
}
}
-@mixin border-bottom-left-radius($radius) {
+@mixin border-bottom-start-radius($radius: $border-radius) {
@if $enable-rounded {
- border-bottom-left-radius: $radius;
+ border-bottom-left-radius: valid-radius($radius);
}
}
+// scss-docs-end border-radius-mixins
diff --git a/assets/scss/bootstrap/mixins/_box-shadow.scss b/assets/scss/bootstrap/mixins/_box-shadow.scss
index 0726d435..4172541f 100644
--- a/assets/scss/bootstrap/mixins/_box-shadow.scss
+++ b/assets/scss/bootstrap/mixins/_box-shadow.scss
@@ -2,17 +2,15 @@
@if $enable-shadows {
$result: ();
- @if (length($shadow) == 1) {
- // We can pass `@include box-shadow(none);`
- $result: $shadow;
- } @else {
- // Filter to avoid invalid properties for example `box-shadow: none, 1px 1px black;`
- @for $i from 1 through length($shadow) {
- @if nth($shadow, $i) != "none" {
- $result: append($result, nth($shadow, $i), "comma");
- }
+ @each $value in $shadow {
+ @if $value != null {
+ $result: append($result, $value, "comma");
+ }
+ @if $value == none and length($shadow) > 1 {
+ @warn "The keyword 'none' must be used as a single argument.";
}
}
+
@if (length($result) > 0) {
box-shadow: $result;
}
diff --git a/assets/scss/bootstrap/mixins/_breakpoints.scss b/assets/scss/bootstrap/mixins/_breakpoints.scss
index 23a5de96..286be893 100644
--- a/assets/scss/bootstrap/mixins/_breakpoints.scss
+++ b/assets/scss/bootstrap/mixins/_breakpoints.scss
@@ -2,7 +2,7 @@
//
// Breakpoints are defined as a map of (name: minimum width), order from small to large:
//
-// (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)
+// (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px)
//
// The map defined in the `$grid-breakpoints` global variable is used as the `$breakpoints` argument by default.
@@ -10,44 +10,47 @@
//
// >> breakpoint-next(sm)
// md
-// >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
+// >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))
// md
-// >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl))
+// >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl xxl))
// md
@function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) {
$n: index($breakpoint-names, $name);
- @return if($n != null and $n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);
+ @if not $n {
+ @error "breakpoint `#{$name}` not found in `#{$breakpoints}`";
+ }
+ @return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);
}
// Minimum breakpoint width. Null for the smallest (first) breakpoint.
//
-// >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
+// >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))
// 576px
@function breakpoint-min($name, $breakpoints: $grid-breakpoints) {
$min: map-get($breakpoints, $name);
@return if($min != 0, $min, null);
}
-// Maximum breakpoint width. Null for the largest (last) breakpoint.
-// The maximum value is calculated as the minimum of the next one less 0.02px
-// to work around the limitations of `min-` and `max-` prefixes and viewports with fractional widths.
+// Maximum breakpoint width.
+// The maximum value is reduced by 0.02px to work around the limitations of
+// `min-` and `max-` prefixes and viewports with fractional widths.
// See https://www.w3.org/TR/mediaqueries-4/#mq-min-max
// Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.
// See https://bugs.webkit.org/show_bug.cgi?id=178261
//
-// >> breakpoint-max(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
+// >> breakpoint-max(md, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))
// 767.98px
@function breakpoint-max($name, $breakpoints: $grid-breakpoints) {
- $next: breakpoint-next($name, $breakpoints);
- @return if($next, breakpoint-min($next, $breakpoints) - .02, null);
+ $max: map-get($breakpoints, $name);
+ @return if($max and $max > 0, $max - .02, null);
}
// Returns a blank string if smallest breakpoint, otherwise returns the name with a dash in front.
// Useful for making responsive utilities.
//
-// >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
+// >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))
// "" (Returns a blank string)
-// >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
+// >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))
// "-sm"
@function breakpoint-infix($name, $breakpoints: $grid-breakpoints) {
@return if(breakpoint-min($name, $breakpoints) == null, "", "-#{$name}");
@@ -104,8 +107,9 @@
// No minimum for the smallest breakpoint, and no maximum for the largest one.
// Makes the @content apply only to the given breakpoint, not viewports any wider or narrower.
@mixin media-breakpoint-only($name, $breakpoints: $grid-breakpoints) {
- $min: breakpoint-min($name, $breakpoints);
- $max: breakpoint-max($name, $breakpoints);
+ $min: breakpoint-min($name, $breakpoints);
+ $next: breakpoint-next($name, $breakpoints);
+ $max: breakpoint-max($next, $breakpoints);
@if $min != null and $max != null {
@media (min-width: $min) and (max-width: $max) {
@@ -116,7 +120,7 @@
@content;
}
} @else if $min == null {
- @include media-breakpoint-down($name, $breakpoints) {
+ @include media-breakpoint-down($next, $breakpoints) {
@content;
}
}
diff --git a/assets/scss/bootstrap/mixins/_buttons.scss b/assets/scss/bootstrap/mixins/_buttons.scss
index c82c4d6d..cf087fda 100644
--- a/assets/scss/bootstrap/mixins/_buttons.scss
+++ b/assets/scss/bootstrap/mixins/_buttons.scss
@@ -3,108 +3,68 @@
// Easily pump out default styles, as well as :hover, :focus, :active,
// and disabled options for all buttons
-@mixin button-variant($background, $border, $hover-background: darken($background, 7.5%), $hover-border: darken($border, 10%), $active-background: darken($background, 10%), $active-border: darken($border, 12.5%)) {
- color: color-yiq($background);
- @include gradient-bg($background);
- border-color: $border;
- @include box-shadow($btn-box-shadow);
-
- @include hover() {
- color: color-yiq($hover-background);
- @include gradient-bg($hover-background);
- border-color: $hover-border;
- }
-
- &:focus,
- &.focus {
- color: color-yiq($hover-background);
- @include gradient-bg($hover-background);
- border-color: $hover-border;
- // Avoid using mixin so we can pass custom focus shadow properly
- @if $enable-shadows {
- box-shadow: $btn-box-shadow, 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5);
- } @else {
- box-shadow: 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5);
- }
- }
-
- // Disabled comes first so active can properly restyle
- &.disabled,
- &:disabled {
- color: color-yiq($background);
- background-color: $background;
- border-color: $border;
- // Remove CSS gradients if they're enabled
- @if $enable-gradients {
- background-image: none;
- }
- }
-
- &:not(:disabled):not(.disabled):active,
- &:not(:disabled):not(.disabled).active,
- .show > &.dropdown-toggle {
- color: color-yiq($active-background);
- background-color: $active-background;
- @if $enable-gradients {
- background-image: none; // Remove the gradient for the pressed/active state
- }
- border-color: $active-border;
-
- &:focus {
- // Avoid using mixin so we can pass custom focus shadow properly
- @if $enable-shadows and $btn-active-box-shadow != none {
- box-shadow: $btn-active-box-shadow, 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5);
- } @else {
- box-shadow: 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5);
- }
- }
- }
+// scss-docs-start btn-variant-mixin
+@mixin button-variant(
+ $background,
+ $border,
+ $color: color-contrast($background),
+ $hover-background: if($color == $color-contrast-light, shade-color($background, $btn-hover-bg-shade-amount), tint-color($background, $btn-hover-bg-tint-amount)),
+ $hover-border: if($color == $color-contrast-light, shade-color($border, $btn-hover-border-shade-amount), tint-color($border, $btn-hover-border-tint-amount)),
+ $hover-color: color-contrast($hover-background),
+ $active-background: if($color == $color-contrast-light, shade-color($background, $btn-active-bg-shade-amount), tint-color($background, $btn-active-bg-tint-amount)),
+ $active-border: if($color == $color-contrast-light, shade-color($border, $btn-active-border-shade-amount), tint-color($border, $btn-active-border-tint-amount)),
+ $active-color: color-contrast($active-background),
+ $disabled-background: $background,
+ $disabled-border: $border,
+ $disabled-color: color-contrast($disabled-background)
+) {
+ --#{$prefix}btn-color: #{$color};
+ --#{$prefix}btn-bg: #{$background};
+ --#{$prefix}btn-border-color: #{$border};
+ --#{$prefix}btn-hover-color: #{$hover-color};
+ --#{$prefix}btn-hover-bg: #{$hover-background};
+ --#{$prefix}btn-hover-border-color: #{$hover-border};
+ --#{$prefix}btn-focus-shadow-rgb: #{to-rgb(mix($color, $border, 15%))};
+ --#{$prefix}btn-active-color: #{$active-color};
+ --#{$prefix}btn-active-bg: #{$active-background};
+ --#{$prefix}btn-active-border-color: #{$active-border};
+ --#{$prefix}btn-active-shadow: #{$btn-active-box-shadow};
+ --#{$prefix}btn-disabled-color: #{$disabled-color};
+ --#{$prefix}btn-disabled-bg: #{$disabled-background};
+ --#{$prefix}btn-disabled-border-color: #{$disabled-border};
}
+// scss-docs-end btn-variant-mixin
-@mixin button-outline-variant($color, $color-hover: color-yiq($color), $active-background: $color, $active-border: $color) {
- color: $color;
- border-color: $color;
-
- @include hover() {
- color: $color-hover;
- background-color: $active-background;
- border-color: $active-border;
- }
-
- &:focus,
- &.focus {
- box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
- }
-
- &.disabled,
- &:disabled {
- color: $color;
- background-color: transparent;
- }
-
- &:not(:disabled):not(.disabled):active,
- &:not(:disabled):not(.disabled).active,
- .show > &.dropdown-toggle {
- color: color-yiq($active-background);
- background-color: $active-background;
- border-color: $active-border;
-
- &:focus {
- // Avoid using mixin so we can pass custom focus shadow properly
- @if $enable-shadows and $btn-active-box-shadow != none {
- box-shadow: $btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($color, .5);
- } @else {
- box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
- }
- }
- }
+// scss-docs-start btn-outline-variant-mixin
+@mixin button-outline-variant(
+ $color,
+ $color-hover: color-contrast($color),
+ $active-background: $color,
+ $active-border: $color,
+ $active-color: color-contrast($active-background)
+) {
+ --#{$prefix}btn-color: #{$color};
+ --#{$prefix}btn-border-color: #{$color};
+ --#{$prefix}btn-hover-color: #{$color-hover};
+ --#{$prefix}btn-hover-bg: #{$active-background};
+ --#{$prefix}btn-hover-border-color: #{$active-border};
+ --#{$prefix}btn-focus-shadow-rgb: #{to-rgb($color)};
+ --#{$prefix}btn-active-color: #{$active-color};
+ --#{$prefix}btn-active-bg: #{$active-background};
+ --#{$prefix}btn-active-border-color: #{$active-border};
+ --#{$prefix}btn-active-shadow: #{$btn-active-box-shadow};
+ --#{$prefix}btn-disabled-color: #{$color};
+ --#{$prefix}btn-disabled-bg: transparent;
+ --#{$prefix}btn-disabled-border-color: #{$color};
+ --#{$prefix}gradient: none;
}
+// scss-docs-end btn-outline-variant-mixin
-// Button sizes
-@mixin button-size($padding-y, $padding-x, $font-size, $line-height, $border-radius) {
- padding: $padding-y $padding-x;
- @include font-size($font-size);
- line-height: $line-height;
- // Manually declare to provide an override to the browser default
- @include border-radius($border-radius, 0);
+// scss-docs-start btn-size-mixin
+@mixin button-size($padding-y, $padding-x, $font-size, $border-radius) {
+ --#{$prefix}btn-padding-y: #{$padding-y};
+ --#{$prefix}btn-padding-x: #{$padding-x};
+ @include rfs($font-size, --#{$prefix}btn-font-size);
+ --#{$prefix}btn-border-radius: #{$border-radius};
}
+// scss-docs-end btn-size-mixin
diff --git a/assets/scss/bootstrap/mixins/_caret.scss b/assets/scss/bootstrap/mixins/_caret.scss
index 27466495..be731165 100644
--- a/assets/scss/bootstrap/mixins/_caret.scss
+++ b/assets/scss/bootstrap/mixins/_caret.scss
@@ -1,57 +1,63 @@
-@mixin caret-down() {
- border-top: $caret-width solid;
- border-right: $caret-width solid transparent;
+// scss-docs-start caret-mixins
+@mixin caret-down($width: $caret-width) {
+ border-top: $width solid;
+ border-right: $width solid transparent;
border-bottom: 0;
- border-left: $caret-width solid transparent;
+ border-left: $width solid transparent;
}
-@mixin caret-up() {
+@mixin caret-up($width: $caret-width) {
border-top: 0;
- border-right: $caret-width solid transparent;
- border-bottom: $caret-width solid;
- border-left: $caret-width solid transparent;
+ border-right: $width solid transparent;
+ border-bottom: $width solid;
+ border-left: $width solid transparent;
}
-@mixin caret-right() {
- border-top: $caret-width solid transparent;
+@mixin caret-end($width: $caret-width) {
+ border-top: $width solid transparent;
border-right: 0;
- border-bottom: $caret-width solid transparent;
- border-left: $caret-width solid;
+ border-bottom: $width solid transparent;
+ border-left: $width solid;
}
-@mixin caret-left() {
- border-top: $caret-width solid transparent;
- border-right: $caret-width solid;
- border-bottom: $caret-width solid transparent;
+@mixin caret-start($width: $caret-width) {
+ border-top: $width solid transparent;
+ border-right: $width solid;
+ border-bottom: $width solid transparent;
}
-@mixin caret($direction: down) {
+@mixin caret(
+ $direction: down,
+ $width: $caret-width,
+ $spacing: $caret-spacing,
+ $vertical-align: $caret-vertical-align
+) {
@if $enable-caret {
&::after {
display: inline-block;
- margin-left: $caret-spacing;
- vertical-align: $caret-vertical-align;
+ margin-left: $spacing;
+ vertical-align: $vertical-align;
content: "";
@if $direction == down {
- @include caret-down();
+ @include caret-down($width);
} @else if $direction == up {
- @include caret-up();
- } @else if $direction == right {
- @include caret-right();
+ @include caret-up($width);
+ } @else if $direction == end {
+ @include caret-end($width);
}
}
- @if $direction == left {
+ @if $direction == start {
&::after {
display: none;
}
&::before {
display: inline-block;
- margin-right: $caret-spacing;
- vertical-align: $caret-vertical-align;
+ margin-right: $spacing;
+ vertical-align: $vertical-align;
content: "";
- @include caret-left();
+ @include caret-start($width);
}
}
@@ -60,3 +66,4 @@
}
}
}
+// scss-docs-end caret-mixins
diff --git a/assets/scss/bootstrap/mixins/_clearfix.scss b/assets/scss/bootstrap/mixins/_clearfix.scss
index 11a977b7..ffc62bb2 100644
--- a/assets/scss/bootstrap/mixins/_clearfix.scss
+++ b/assets/scss/bootstrap/mixins/_clearfix.scss
@@ -1,3 +1,4 @@
+// scss-docs-start clearfix
@mixin clearfix() {
&::after {
display: block;
@@ -5,3 +6,4 @@
content: "";
}
}
+// scss-docs-end clearfix
diff --git a/assets/scss/bootstrap/mixins/_color-mode.scss b/assets/scss/bootstrap/mixins/_color-mode.scss
new file mode 100644
index 00000000..03338b02
--- /dev/null
+++ b/assets/scss/bootstrap/mixins/_color-mode.scss
@@ -0,0 +1,21 @@
+// scss-docs-start color-mode-mixin
+@mixin color-mode($mode: light, $root: false) {
+ @if $color-mode-type == "media-query" {
+ @if $root == true {
+ @media (prefers-color-scheme: $mode) {
+ :root {
+ @content;
+ }
+ }
+ } @else {
+ @media (prefers-color-scheme: $mode) {
+ @content;
+ }
+ }
+ } @else {
+ [data-bs-theme="#{$mode}"] {
+ @content;
+ }
+ }
+}
+// scss-docs-end color-mode-mixin
diff --git a/assets/scss/bootstrap/mixins/_color-scheme.scss b/assets/scss/bootstrap/mixins/_color-scheme.scss
new file mode 100644
index 00000000..90497aa0
--- /dev/null
+++ b/assets/scss/bootstrap/mixins/_color-scheme.scss
@@ -0,0 +1,7 @@
+// scss-docs-start mixin-color-scheme
+@mixin color-scheme($name) {
+ @media (prefers-color-scheme: #{$name}) {
+ @content;
+ }
+}
+// scss-docs-end mixin-color-scheme
diff --git a/assets/scss/bootstrap/mixins/_container.scss b/assets/scss/bootstrap/mixins/_container.scss
new file mode 100644
index 00000000..b9f33519
--- /dev/null
+++ b/assets/scss/bootstrap/mixins/_container.scss
@@ -0,0 +1,11 @@
+// Container mixins
+
+@mixin make-container($gutter: $container-padding-x) {
+ --#{$prefix}gutter-x: #{$gutter};
+ --#{$prefix}gutter-y: 0;
+ width: 100%;
+ padding-right: calc(var(--#{$prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list
+ padding-left: calc(var(--#{$prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list
+ margin-right: auto;
+ margin-left: auto;
+}
diff --git a/assets/scss/bootstrap/mixins/_float.scss b/assets/scss/bootstrap/mixins/_float.scss
deleted file mode 100644
index 6b376a25..00000000
--- a/assets/scss/bootstrap/mixins/_float.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-// stylelint-disable declaration-no-important
-
-@mixin float-left() {
- float: left !important;
- @include deprecate("The `float-left` mixin", "v4.3.0", "v5");
-}
-@mixin float-right() {
- float: right !important;
- @include deprecate("The `float-right` mixin", "v4.3.0", "v5");
-}
-@mixin float-none() {
- float: none !important;
- @include deprecate("The `float-none` mixin", "v4.3.0", "v5");
-}
diff --git a/assets/scss/bootstrap/mixins/_forms.scss b/assets/scss/bootstrap/mixins/_forms.scss
index 418470d0..d47b1e41 100644
--- a/assets/scss/bootstrap/mixins/_forms.scss
+++ b/assets/scss/bootstrap/mixins/_forms.scss
@@ -1,33 +1,7 @@
-// Form control focus state
-//
-// Generate a customized focus state and for any input with the specified color,
-// which defaults to the `$input-focus-border-color` variable.
-//
-// We highly encourage you to not customize the default value, but instead use
-// this to tweak colors on an as-needed basis. This aesthetic change is based on
-// WebKit's default styles, but applicable to a wider range of browsers. Its
-// usability and accessibility should be taken into account with any change.
-//
-// Example usage: change the default blue border and shadow to white for better
-// contrast against a dark gray background.
-@mixin form-control-focus($ignore-warning: false) {
- &:focus {
- color: $input-focus-color;
- background-color: $input-focus-bg;
- border-color: $input-focus-border-color;
- outline: 0;
- // Avoid using mixin so we can pass custom focus shadow properly
- @if $enable-shadows {
- box-shadow: $input-box-shadow, $input-focus-box-shadow;
- } @else {
- box-shadow: $input-focus-box-shadow;
- }
- }
- @include deprecate("The `form-control-focus()` mixin", "v4.4.0", "v5", $ignore-warning);
-}
-
// This mixin uses an `if()` technique to be compatible with Dart Sass
// See https://github.com/sass/sass/issues/1873#issuecomment-152293725 for more details
+
+// scss-docs-start form-validation-mixins
@mixin form-validation-state-selector($state) {
@if ($state == "valid" or $state == "invalid") {
.was-validated #{if(&, "&", "")}:#{$state},
@@ -41,12 +15,21 @@
}
}
-@mixin form-validation-state($state, $color, $icon) {
+@mixin form-validation-state(
+ $state,
+ $color,
+ $icon,
+ $tooltip-color: color-contrast($color),
+ $tooltip-bg-color: rgba($color, $form-feedback-tooltip-opacity),
+ $focus-box-shadow: 0 0 $input-btn-focus-blur $input-focus-width rgba($color, $input-btn-focus-color-opacity),
+ $border-color: $color
+) {
.#{$state}-feedback {
display: none;
width: 100%;
margin-top: $form-feedback-margin-top;
@include font-size($form-feedback-font-size);
+ font-style: $form-feedback-font-style;
color: $color;
}
@@ -60,8 +43,8 @@
margin-top: .1rem;
@include font-size($form-feedback-tooltip-font-size);
line-height: $form-feedback-tooltip-line-height;
- color: color-yiq($color);
- background-color: rgba($color, $form-feedback-tooltip-opacity);
+ color: $tooltip-color;
+ background-color: $tooltip-bg-color;
@include border-radius($form-feedback-tooltip-border-radius);
}
@@ -74,7 +57,7 @@
.form-control {
@include form-validation-state-selector($state) {
- border-color: $color;
+ border-color: $border-color;
@if $enable-validation-icons {
padding-right: $input-height-inner;
@@ -85,8 +68,8 @@
}
&:focus {
- border-color: $color;
- box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
+ border-color: $border-color;
+ box-shadow: $focus-box-shadow;
}
}
}
@@ -101,77 +84,70 @@
}
}
- .custom-select {
+ .form-select {
@include form-validation-state-selector($state) {
- border-color: $color;
+ border-color: $border-color;
@if $enable-validation-icons {
- padding-right: $custom-select-feedback-icon-padding-right;
- background: $custom-select-background, escape-svg($icon) $custom-select-bg no-repeat $custom-select-feedback-icon-position / $custom-select-feedback-icon-size;
+ &:not([multiple]):not([size]),
+ &:not([multiple])[size="1"] {
+ --#{$prefix}form-select-bg-icon: #{escape-svg($icon)};
+ padding-right: $form-select-feedback-icon-padding-end;
+ background-position: $form-select-bg-position, $form-select-feedback-icon-position;
+ background-size: $form-select-bg-size, $form-select-feedback-icon-size;
+ }
}
&:focus {
- border-color: $color;
- box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
+ border-color: $border-color;
+ box-shadow: $focus-box-shadow;
}
}
}
- .form-check-input {
+ .form-control-color {
@include form-validation-state-selector($state) {
- ~ .form-check-label {
- color: $color;
- }
-
- ~ .#{$state}-feedback,
- ~ .#{$state}-tooltip {
- display: block;
+ @if $enable-validation-icons {
+ width: add($form-color-width, $input-height-inner);
}
}
}
- .custom-control-input {
+ .form-check-input {
@include form-validation-state-selector($state) {
- ~ .custom-control-label {
- color: $color;
-
- &::before {
- border-color: $color;
- }
- }
+ border-color: $border-color;
&:checked {
- ~ .custom-control-label::before {
- border-color: lighten($color, 10%);
- @include gradient-bg(lighten($color, 10%));
- }
+ background-color: $color;
}
&:focus {
- ~ .custom-control-label::before {
- box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
- }
+ box-shadow: $focus-box-shadow;
+ }
- &:not(:checked) ~ .custom-control-label::before {
- border-color: $color;
- }
+ ~ .form-check-label {
+ color: $color;
}
}
}
+ .form-check-inline .form-check-input {
+ ~ .#{$state}-feedback {
+ margin-left: .5em;
+ }
+ }
- // custom file
- .custom-file-input {
- @include form-validation-state-selector($state) {
- ~ .custom-file-label {
- border-color: $color;
- }
-
- &:focus {
- ~ .custom-file-label {
- border-color: $color;
- box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
+ .input-group {
+ > .form-control:not(:focus),
+ > .form-select:not(:focus),
+ > .form-floating:not(:focus-within) {
+ @include form-validation-state-selector($state) {
+ @if $state == "valid" {
+ z-index: 3;
+ } @else if $state == "invalid" {
+ z-index: 4;
}
}
}
}
}
+// scss-docs-end form-validation-mixins
diff --git a/assets/scss/bootstrap/mixins/_gradients.scss b/assets/scss/bootstrap/mixins/_gradients.scss
index 88c4d64b..608e18df 100644
--- a/assets/scss/bootstrap/mixins/_gradients.scss
+++ b/assets/scss/bootstrap/mixins/_gradients.scss
@@ -1,45 +1,47 @@
// Gradients
-@mixin gradient-bg($color) {
+// scss-docs-start gradient-bg-mixin
+@mixin gradient-bg($color: null) {
+ background-color: $color;
+
@if $enable-gradients {
- background: $color linear-gradient(180deg, mix($body-bg, $color, 15%), $color) repeat-x;
- } @else {
- background-color: $color;
+ background-image: var(--#{$prefix}gradient);
}
}
+// scss-docs-end gradient-bg-mixin
+// scss-docs-start gradient-mixins
// Horizontal gradient, from left to right
//
// Creates two color stops, start and end, by specifying a color and position for each color stop.
@mixin gradient-x($start-color: $gray-700, $end-color: $gray-800, $start-percent: 0%, $end-percent: 100%) {
background-image: linear-gradient(to right, $start-color $start-percent, $end-color $end-percent);
- background-repeat: repeat-x;
}
// Vertical gradient, from top to bottom
//
// Creates two color stops, start and end, by specifying a color and position for each color stop.
-@mixin gradient-y($start-color: $gray-700, $end-color: $gray-800, $start-percent: 0%, $end-percent: 100%) {
+@mixin gradient-y($start-color: $gray-700, $end-color: $gray-800, $start-percent: null, $end-percent: null) {
background-image: linear-gradient(to bottom, $start-color $start-percent, $end-color $end-percent);
- background-repeat: repeat-x;
}
@mixin gradient-directional($start-color: $gray-700, $end-color: $gray-800, $deg: 45deg) {
background-image: linear-gradient($deg, $start-color, $end-color);
- background-repeat: repeat-x;
}
+
@mixin gradient-x-three-colors($start-color: $blue, $mid-color: $purple, $color-stop: 50%, $end-color: $red) {
background-image: linear-gradient(to right, $start-color, $mid-color $color-stop, $end-color);
- background-repeat: no-repeat;
}
+
@mixin gradient-y-three-colors($start-color: $blue, $mid-color: $purple, $color-stop: 50%, $end-color: $red) {
background-image: linear-gradient($start-color, $mid-color $color-stop, $end-color);
- background-repeat: no-repeat;
}
+
@mixin gradient-radial($inner-color: $gray-700, $outer-color: $gray-800) {
background-image: radial-gradient(circle, $inner-color, $outer-color);
- background-repeat: no-repeat;
}
+
@mixin gradient-striped($color: rgba($white, .15), $angle: 45deg) {
background-image: linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent);
}
+// scss-docs-end gradient-mixins
diff --git a/assets/scss/bootstrap/mixins/_grid-framework.scss b/assets/scss/bootstrap/mixins/_grid-framework.scss
deleted file mode 100644
index 8e291f7a..00000000
--- a/assets/scss/bootstrap/mixins/_grid-framework.scss
+++ /dev/null
@@ -1,71 +0,0 @@
-// Framework grid generation
-//
-// Used only by Bootstrap to generate the correct number of grid classes given
-// any value of `$grid-columns`.
-
-@mixin make-grid-columns($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) {
- // Common properties for all breakpoints
- %grid-column {
- position: relative;
- width: 100%;
- padding-right: $gutter / 2;
- padding-left: $gutter / 2;
- }
-
- @each $breakpoint in map-keys($breakpoints) {
- $infix: breakpoint-infix($breakpoint, $breakpoints);
-
- // Allow columns to stretch full width below their breakpoints
- @for $i from 1 through $columns {
- .col#{$infix}-#{$i} {
- @extend %grid-column;
- }
- }
- .col#{$infix},
- .col#{$infix}-auto {
- @extend %grid-column;
- }
-
- @include media-breakpoint-up($breakpoint, $breakpoints) {
- // Provide basic `.col-{bp}` classes for equal-width flexbox columns
- .col#{$infix} {
- flex-basis: 0;
- flex-grow: 1;
- max-width: 100%;
- }
-
- @for $i from 1 through $grid-row-columns {
- .row-cols#{$infix}-#{$i} {
- @include row-cols($i);
- }
- }
-
- .col#{$infix}-auto {
- @include make-col-auto();
- }
-
- @for $i from 1 through $columns {
- .col#{$infix}-#{$i} {
- @include make-col($i, $columns);
- }
- }
-
- .order#{$infix}-first { order: -1; }
-
- .order#{$infix}-last { order: $columns + 1; }
-
- @for $i from 0 through $columns {
- .order#{$infix}-#{$i} { order: $i; }
- }
-
- // `$columns - 1` because offsetting by the width of an entire row isn't possible
- @for $i from 0 through ($columns - 1) {
- @if not ($infix == "" and $i == 0) { // Avoid emitting useless .offset-0
- .offset#{$infix}-#{$i} {
- @include make-col-offset($i, $columns);
- }
- }
- }
- }
- }
-}
diff --git a/assets/scss/bootstrap/mixins/_grid.scss b/assets/scss/bootstrap/mixins/_grid.scss
index b1240b01..38e2239f 100644
--- a/assets/scss/bootstrap/mixins/_grid.scss
+++ b/assets/scss/bootstrap/mixins/_grid.scss
@@ -1,69 +1,151 @@
-/// Grid system
+// Grid system
//
// Generate semantic grid columns with these mixins.
-@mixin make-container($gutter: $grid-gutter-width) {
- width: 100%;
- padding-right: $gutter / 2;
- padding-left: $gutter / 2;
- margin-right: auto;
- margin-left: auto;
-}
-
-
-// For each breakpoint, define the maximum width of the container in a media query
-@mixin make-container-max-widths($max-widths: $container-max-widths, $breakpoints: $grid-breakpoints) {
- @each $breakpoint, $container-max-width in $max-widths {
- @include media-breakpoint-up($breakpoint, $breakpoints) {
- max-width: $container-max-width;
- }
- }
-}
-
@mixin make-row($gutter: $grid-gutter-width) {
+ --#{$prefix}gutter-x: #{$gutter};
+ --#{$prefix}gutter-y: 0;
display: flex;
flex-wrap: wrap;
- margin-right: -$gutter / 2;
- margin-left: -$gutter / 2;
+ // TODO: Revisit calc order after https://github.com/react-bootstrap/react-bootstrap/issues/6039 is fixed
+ margin-top: calc(-1 * var(--#{$prefix}gutter-y)); // stylelint-disable-line function-disallowed-list
+ margin-right: calc(-.5 * var(--#{$prefix}gutter-x)); // stylelint-disable-line function-disallowed-list
+ margin-left: calc(-.5 * var(--#{$prefix}gutter-x)); // stylelint-disable-line function-disallowed-list
}
-@mixin make-col-ready($gutter: $grid-gutter-width) {
- position: relative;
+@mixin make-col-ready() {
+ // Add box sizing if only the grid is loaded
+ box-sizing: if(variable-exists(include-column-box-sizing) and $include-column-box-sizing, border-box, null);
// Prevent columns from becoming too narrow when at smaller grid tiers by
- // always setting `width: 100%;`. This works because we use `flex` values
+ // always setting `width: 100%;`. This works because we set the width
// later on to override this initial width.
+ flex-shrink: 0;
width: 100%;
- padding-right: $gutter / 2;
- padding-left: $gutter / 2;
+ max-width: 100%; // Prevent `.col-auto`, `.col` (& responsive variants) from breaking out the grid
+ padding-right: calc(var(--#{$prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list
+ padding-left: calc(var(--#{$prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list
+ margin-top: var(--#{$prefix}gutter-y);
}
-@mixin make-col($size, $columns: $grid-columns) {
- flex: 0 0 percentage($size / $columns);
- // Add a `max-width` to ensure content within each column does not blow out
- // the width of the column. Applies to IE10+ and Firefox. Chrome and Safari
- // do not appear to require this.
- max-width: percentage($size / $columns);
+@mixin make-col($size: false, $columns: $grid-columns) {
+ @if $size {
+ flex: 0 0 auto;
+ width: percentage(divide($size, $columns));
+
+ } @else {
+ flex: 1 1 0;
+ max-width: 100%;
+ }
}
@mixin make-col-auto() {
flex: 0 0 auto;
width: auto;
- max-width: 100%; // Reset earlier grid tiers
}
@mixin make-col-offset($size, $columns: $grid-columns) {
- $num: $size / $columns;
+ $num: divide($size, $columns);
margin-left: if($num == 0, 0, percentage($num));
}
// Row columns
//
// Specify on a parent element(e.g., .row) to force immediate children into NN
-// numberof columns. Supports wrapping to new lines, but does not do a Masonry
+// number of columns. Supports wrapping to new lines, but does not do a Masonry
// style grid.
@mixin row-cols($count) {
- & > * {
- flex: 0 0 100% / $count;
- max-width: 100% / $count;
+ > * {
+ flex: 0 0 auto;
+ width: divide(100%, $count);
+ }
+}
+
+// Framework grid generation
+//
+// Used only by Bootstrap to generate the correct number of grid classes given
+// any value of `$grid-columns`.
+
+@mixin make-grid-columns($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) {
+ @each $breakpoint in map-keys($breakpoints) {
+ $infix: breakpoint-infix($breakpoint, $breakpoints);
+
+ @include media-breakpoint-up($breakpoint, $breakpoints) {
+ // Provide basic `.col-{bp}` classes for equal-width flexbox columns
+ .col#{$infix} {
+ flex: 1 0 0%; // Flexbugs #4: https://github.com/philipwalton/flexbugs#flexbug-4
+ }
+
+ .row-cols#{$infix}-auto > * {
+ @include make-col-auto();
+ }
+
+ @if $grid-row-columns > 0 {
+ @for $i from 1 through $grid-row-columns {
+ .row-cols#{$infix}-#{$i} {
+ @include row-cols($i);
+ }
+ }
+ }
+
+ .col#{$infix}-auto {
+ @include make-col-auto();
+ }
+
+ @if $columns > 0 {
+ @for $i from 1 through $columns {
+ .col#{$infix}-#{$i} {
+ @include make-col($i, $columns);
+ }
+ }
+
+ // `$columns - 1` because offsetting by the width of an entire row isn't possible
+ @for $i from 0 through ($columns - 1) {
+ @if not ($infix == "" and $i == 0) { // Avoid emitting useless .offset-0
+ .offset#{$infix}-#{$i} {
+ @include make-col-offset($i, $columns);
+ }
+ }
+ }
+ }
+
+ // Gutters
+ //
+ // Make use of `.g-*`, `.gx-*` or `.gy-*` utilities to change spacing between the columns.
+ @each $key, $value in $gutters {
+ .g#{$infix}-#{$key},
+ .gx#{$infix}-#{$key} {
+ --#{$prefix}gutter-x: #{$value};
+ }
+
+ .g#{$infix}-#{$key},
+ .gy#{$infix}-#{$key} {
+ --#{$prefix}gutter-y: #{$value};
+ }
+ }
+ }
+ }
+}
+
+@mixin make-cssgrid($columns: $grid-columns, $breakpoints: $grid-breakpoints) {
+ @each $breakpoint in map-keys($breakpoints) {
+ $infix: breakpoint-infix($breakpoint, $breakpoints);
+
+ @include media-breakpoint-up($breakpoint, $breakpoints) {
+ @if $columns > 0 {
+ @for $i from 1 through $columns {
+ .g-col#{$infix}-#{$i} {
+ grid-column: auto / span $i;
+ }
+ }
+
+ // Start with `1` because `0` is and invalid value.
+ // Ends with `$columns - 1` because offsetting by the width of an entire row isn't possible.
+ @for $i from 1 through ($columns - 1) {
+ .g-start#{$infix}-#{$i} {
+ grid-column-start: $i;
+ }
+ }
+ }
+ }
}
}
diff --git a/assets/scss/bootstrap/mixins/_hover.scss b/assets/scss/bootstrap/mixins/_hover.scss
deleted file mode 100644
index 409f8244..00000000
--- a/assets/scss/bootstrap/mixins/_hover.scss
+++ /dev/null
@@ -1,37 +0,0 @@
-// Hover mixin and `$enable-hover-media-query` are deprecated.
-//
-// Originally added during our alphas and maintained during betas, this mixin was
-// designed to prevent `:hover` stickiness on iOS-an issue where hover styles
-// would persist after initial touch.
-//
-// For backward compatibility, we've kept these mixins and updated them to
-// always return their regular pseudo-classes instead of a shimmed media query.
-//
-// Issue: https://github.com/twbs/bootstrap/issues/25195
-
-@mixin hover() {
- &:hover { @content; }
-}
-
-@mixin hover-focus() {
- &:hover,
- &:focus {
- @content;
- }
-}
-
-@mixin plain-hover-focus() {
- &,
- &:hover,
- &:focus {
- @content;
- }
-}
-
-@mixin hover-focus-active() {
- &:hover,
- &:focus,
- &:active {
- @content;
- }
-}
diff --git a/assets/scss/bootstrap/mixins/_image.scss b/assets/scss/bootstrap/mixins/_image.scss
index c971e038..e1df779f 100644
--- a/assets/scss/bootstrap/mixins/_image.scss
+++ b/assets/scss/bootstrap/mixins/_image.scss
@@ -7,30 +7,10 @@
//
// Keep images from scaling beyond the width of their parents.
-@mixin img-fluid() {
+@mixin img-fluid {
// Part 1: Set a maximum relative to the parent
max-width: 100%;
// Part 2: Override the height to auto, otherwise images will be stretched
// when setting a width and height attribute on the img element.
height: auto;
}
-
-
-// Retina image
-//
-// Short retina mixin for setting background-image and -size.
-
-@mixin img-retina($file-1x, $file-2x, $width-1x, $height-1x) {
- background-image: url($file-1x);
-
- // Autoprefixer takes care of adding -webkit-min-device-pixel-ratio and -o-min-device-pixel-ratio,
- // but doesn't convert dppx=>dpi.
- // There's no such thing as unprefixed min-device-pixel-ratio since it's nonstandard.
- // Compatibility info: https://caniuse.com/#feat=css-media-resolution
- @media only screen and (min-resolution: 192dpi), // IE9-11 don't support dppx
- only screen and (min-resolution: 2dppx) { // Standardized
- background-image: url($file-2x);
- background-size: $width-1x $height-1x;
- }
- @include deprecate("`img-retina()`", "v4.3.0", "v5");
-}
diff --git a/assets/scss/bootstrap/mixins/_list-group.scss b/assets/scss/bootstrap/mixins/_list-group.scss
index 0da35315..6274f343 100644
--- a/assets/scss/bootstrap/mixins/_list-group.scss
+++ b/assets/scss/bootstrap/mixins/_list-group.scss
@@ -1,14 +1,18 @@
+@include deprecate("`list-group-item-variant()`", "v5.3.0", "v6.0.0");
+
// List Groups
+// scss-docs-start list-group-mixin
@mixin list-group-item-variant($state, $background, $color) {
.list-group-item-#{$state} {
color: $color;
background-color: $background;
&.list-group-item-action {
- @include hover-focus() {
+ &:hover,
+ &:focus {
color: $color;
- background-color: darken($background, 5%);
+ background-color: shade-color($background, 10%);
}
&.active {
@@ -19,3 +23,4 @@
}
}
}
+// scss-docs-end list-group-mixin
diff --git a/assets/scss/bootstrap/mixins/_lists.scss b/assets/scss/bootstrap/mixins/_lists.scss
index 251cb073..25185626 100644
--- a/assets/scss/bootstrap/mixins/_lists.scss
+++ b/assets/scss/bootstrap/mixins/_lists.scss
@@ -1,7 +1,7 @@
// Lists
// Unstyled keeps list items block level, just removes default browser padding and list-style
-@mixin list-unstyled() {
+@mixin list-unstyled {
padding-left: 0;
list-style: none;
}
diff --git a/assets/scss/bootstrap/mixins/_nav-divider.scss b/assets/scss/bootstrap/mixins/_nav-divider.scss
deleted file mode 100644
index 3e0cceaf..00000000
--- a/assets/scss/bootstrap/mixins/_nav-divider.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-// Horizontal dividers
-//
-// Dividers (basically an hr) within dropdowns and nav lists
-
-@mixin nav-divider($color: $nav-divider-color, $margin-y: $nav-divider-margin-y, $ignore-warning: false) {
- height: 0;
- margin: $margin-y 0;
- overflow: hidden;
- border-top: 1px solid $color;
- @include deprecate("The `nav-divider()` mixin", "v4.4.0", "v5", $ignore-warning);
-}
diff --git a/assets/scss/bootstrap/mixins/_pagination.scss b/assets/scss/bootstrap/mixins/_pagination.scss
index af8e16d6..0d657964 100644
--- a/assets/scss/bootstrap/mixins/_pagination.scss
+++ b/assets/scss/bootstrap/mixins/_pagination.scss
@@ -1,22 +1,10 @@
// Pagination
-@mixin pagination-size($padding-y, $padding-x, $font-size, $line-height, $border-radius) {
- .page-link {
- padding: $padding-y $padding-x;
- @include font-size($font-size);
- line-height: $line-height;
- }
-
- .page-item {
- &:first-child {
- .page-link {
- @include border-left-radius($border-radius);
- }
- }
- &:last-child {
- .page-link {
- @include border-right-radius($border-radius);
- }
- }
- }
+// scss-docs-start pagination-mixin
+@mixin pagination-size($padding-y, $padding-x, $font-size, $border-radius) {
+ --#{$prefix}pagination-padding-x: #{$padding-x};
+ --#{$prefix}pagination-padding-y: #{$padding-y};
+ @include rfs($font-size, --#{$prefix}pagination-font-size);
+ --#{$prefix}pagination-border-radius: #{$border-radius};
}
+// scss-docs-end pagination-mixin
diff --git a/assets/scss/bootstrap/mixins/_reset-text.scss b/assets/scss/bootstrap/mixins/_reset-text.scss
index 15b4407a..f5bd1afe 100644
--- a/assets/scss/bootstrap/mixins/_reset-text.scss
+++ b/assets/scss/bootstrap/mixins/_reset-text.scss
@@ -1,6 +1,6 @@
-@mixin reset-text() {
+@mixin reset-text {
font-family: $font-family-base;
- // We deliberately do NOT reset font-size or word-wrap.
+ // We deliberately do NOT reset font-size or overflow-wrap / word-wrap.
font-style: normal;
font-weight: $font-weight-normal;
line-height: $line-height-base;
@@ -11,7 +11,7 @@
text-transform: none;
letter-spacing: normal;
word-break: normal;
- word-spacing: normal;
white-space: normal;
+ word-spacing: normal;
line-break: auto;
}
diff --git a/assets/scss/bootstrap/mixins/_screen-reader.scss b/assets/scss/bootstrap/mixins/_screen-reader.scss
deleted file mode 100644
index 21230390..00000000
--- a/assets/scss/bootstrap/mixins/_screen-reader.scss
+++ /dev/null
@@ -1,34 +0,0 @@
-// Only display content to screen readers
-//
-// See: https://a11yproject.com/posts/how-to-hide-content/
-// See: https://hugogiraudel.com/2016/10/13/css-hide-and-seek/
-
-@mixin sr-only() {
- position: absolute;
- width: 1px;
- height: 1px;
- padding: 0;
- margin: -1px; // Fix for https://github.com/twbs/bootstrap/issues/25686
- overflow: hidden;
- clip: rect(0, 0, 0, 0);
- white-space: nowrap;
- border: 0;
-}
-
-// Use in conjunction with .sr-only to only display content when it's focused.
-//
-// Useful for "Skip to main content" links; see https://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1
-//
-// Credit: HTML5 Boilerplate
-
-@mixin sr-only-focusable() {
- &:active,
- &:focus {
- position: static;
- width: auto;
- height: auto;
- overflow: visible;
- clip: auto;
- white-space: normal;
- }
-}
diff --git a/assets/scss/bootstrap/mixins/_size.scss b/assets/scss/bootstrap/mixins/_size.scss
deleted file mode 100644
index 69e056d2..00000000
--- a/assets/scss/bootstrap/mixins/_size.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-// Sizing shortcuts
-
-@mixin size($width, $height: $width) {
- width: $width;
- height: $height;
- @include deprecate("`size()`", "v4.3.0", "v5");
-}
diff --git a/assets/scss/bootstrap/mixins/_table-row.scss b/assets/scss/bootstrap/mixins/_table-row.scss
deleted file mode 100644
index 1ccde6b6..00000000
--- a/assets/scss/bootstrap/mixins/_table-row.scss
+++ /dev/null
@@ -1,39 +0,0 @@
-// Tables
-
-@mixin table-row-variant($state, $background, $border: null) {
- // Exact selectors below required to override `.table-striped` and prevent
- // inheritance to nested tables.
- .table-#{$state} {
- &,
- > th,
- > td {
- background-color: $background;
- }
-
- @if $border != null {
- th,
- td,
- thead th,
- tbody + tbody {
- border-color: $border;
- }
- }
- }
-
- // Hover states for `.table-hover`
- // Note: this is not available for cells or rows within `thead` or `tfoot`.
- .table-hover {
- $hover-background: darken($background, 5%);
-
- .table-#{$state} {
- @include hover() {
- background-color: $hover-background;
-
- > td,
- > th {
- background-color: $hover-background;
- }
- }
- }
- }
-}
diff --git a/assets/scss/bootstrap/mixins/_table-variants.scss b/assets/scss/bootstrap/mixins/_table-variants.scss
new file mode 100644
index 00000000..5fe1b9b2
--- /dev/null
+++ b/assets/scss/bootstrap/mixins/_table-variants.scss
@@ -0,0 +1,24 @@
+// scss-docs-start table-variant
+@mixin table-variant($state, $background) {
+ .table-#{$state} {
+ $color: color-contrast(opaque($body-bg, $background));
+ $hover-bg: mix($color, $background, percentage($table-hover-bg-factor));
+ $striped-bg: mix($color, $background, percentage($table-striped-bg-factor));
+ $active-bg: mix($color, $background, percentage($table-active-bg-factor));
+ $table-border-color: mix($color, $background, percentage($table-border-factor));
+
+ --#{$prefix}table-color: #{$color};
+ --#{$prefix}table-bg: #{$background};
+ --#{$prefix}table-border-color: #{$table-border-color};
+ --#{$prefix}table-striped-bg: #{$striped-bg};
+ --#{$prefix}table-striped-color: #{color-contrast($striped-bg)};
+ --#{$prefix}table-active-bg: #{$active-bg};
+ --#{$prefix}table-active-color: #{color-contrast($active-bg)};
+ --#{$prefix}table-hover-bg: #{$hover-bg};
+ --#{$prefix}table-hover-color: #{color-contrast($hover-bg)};
+
+ color: var(--#{$prefix}table-color);
+ border-color: var(--#{$prefix}table-border-color);
+ }
+}
+// scss-docs-end table-variant
diff --git a/assets/scss/bootstrap/mixins/_text-emphasis.scss b/assets/scss/bootstrap/mixins/_text-emphasis.scss
deleted file mode 100644
index 5eb8a551..00000000
--- a/assets/scss/bootstrap/mixins/_text-emphasis.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-// stylelint-disable declaration-no-important
-
-// Typography
-
-@mixin text-emphasis-variant($parent, $color, $ignore-warning: false) {
- #{$parent} {
- color: $color !important;
- }
- @if $emphasized-link-hover-darken-percentage != 0 {
- a#{$parent} {
- @include hover-focus() {
- color: darken($color, $emphasized-link-hover-darken-percentage) !important;
- }
- }
- }
- @include deprecate("`text-emphasis-variant()`", "v4.4.0", "v5", $ignore-warning);
-}
diff --git a/assets/scss/bootstrap/mixins/_text-hide.scss b/assets/scss/bootstrap/mixins/_text-hide.scss
deleted file mode 100644
index 3a923011..00000000
--- a/assets/scss/bootstrap/mixins/_text-hide.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-// CSS image replacement
-@mixin text-hide($ignore-warning: false) {
- // stylelint-disable-next-line font-family-no-missing-generic-family-keyword
- font: 0/0 a;
- color: transparent;
- text-shadow: none;
- background-color: transparent;
- border: 0;
-
- @include deprecate("`text-hide()`", "v4.1.0", "v5", $ignore-warning);
-}
diff --git a/assets/scss/bootstrap/mixins/_transition.scss b/assets/scss/bootstrap/mixins/_transition.scss
index 8ce35a6b..d437f6d8 100644
--- a/assets/scss/bootstrap/mixins/_transition.scss
+++ b/assets/scss/bootstrap/mixins/_transition.scss
@@ -1,16 +1,26 @@
-// stylelint-disable property-blacklist
+// stylelint-disable property-disallowed-list
@mixin transition($transition...) {
+ @if length($transition) == 0 {
+ $transition: $transition-base;
+ }
+
+ @if length($transition) > 1 {
+ @each $value in $transition {
+ @if $value == null or $value == none {
+ @warn "The keyword 'none' or 'null' must be used as a single argument.";
+ }
+ }
+ }
+
@if $enable-transitions {
- @if length($transition) == 0 {
- transition: $transition-base;
- } @else {
+ @if nth($transition, 1) != null {
transition: $transition;
}
- }
- @if $enable-prefers-reduced-motion-media-query {
- @media (prefers-reduced-motion: reduce) {
- transition: none;
+ @if $enable-reduced-motion and nth($transition, 1) != null and nth($transition, 1) != none {
+ @media (prefers-reduced-motion: reduce) {
+ transition: none;
+ }
}
}
}
diff --git a/assets/scss/bootstrap/mixins/_utilities.scss b/assets/scss/bootstrap/mixins/_utilities.scss
new file mode 100644
index 00000000..4795e894
--- /dev/null
+++ b/assets/scss/bootstrap/mixins/_utilities.scss
@@ -0,0 +1,97 @@
+// Utility generator
+// Used to generate utilities & print utilities
+@mixin generate-utility($utility, $infix: "", $is-rfs-media-query: false) {
+ $values: map-get($utility, values);
+
+ // If the values are a list or string, convert it into a map
+ @if type-of($values) == "string" or type-of(nth($values, 1)) != "list" {
+ $values: zip($values, $values);
+ }
+
+ @each $key, $value in $values {
+ $properties: map-get($utility, property);
+
+ // Multiple properties are possible, for example with vertical or horizontal margins or paddings
+ @if type-of($properties) == "string" {
+ $properties: append((), $properties);
+ }
+
+ // Use custom class if present
+ $property-class: if(map-has-key($utility, class), map-get($utility, class), nth($properties, 1));
+ $property-class: if($property-class == null, "", $property-class);
+
+ // Use custom CSS variable name if present, otherwise default to `class`
+ $css-variable-name: if(map-has-key($utility, css-variable-name), map-get($utility, css-variable-name), map-get($utility, class));
+
+ // State params to generate pseudo-classes
+ $state: if(map-has-key($utility, state), map-get($utility, state), ());
+
+ $infix: if($property-class == "" and str-slice($infix, 1, 1) == "-", str-slice($infix, 2), $infix);
+
+ // Don't prefix if value key is null (e.g. with shadow class)
+ $property-class-modifier: if($key, if($property-class == "" and $infix == "", "", "-") + $key, "");
+
+ @if map-get($utility, rfs) {
+ // Inside the media query
+ @if $is-rfs-media-query {
+ $val: rfs-value($value);
+
+ // Do not render anything if fluid and non fluid values are the same
+ $value: if($val == rfs-fluid-value($value), null, $val);
+ }
+ @else {
+ $value: rfs-fluid-value($value);
+ }
+ }
+
+ $is-css-var: map-get($utility, css-var);
+ $is-local-vars: map-get($utility, local-vars);
+ $is-rtl: map-get($utility, rtl);
+
+ @if $value != null {
+ @if $is-rtl == false {
+ /* rtl:begin:remove */
+ }
+
+ @if $is-css-var {
+ .#{$property-class + $infix + $property-class-modifier} {
+ --#{$prefix}#{$css-variable-name}: #{$value};
+ }
+
+ @each $pseudo in $state {
+ .#{$property-class + $infix + $property-class-modifier}-#{$pseudo}:#{$pseudo} {
+ --#{$prefix}#{$css-variable-name}: #{$value};
+ }
+ }
+ } @else {
+ .#{$property-class + $infix + $property-class-modifier} {
+ @each $property in $properties {
+ @if $is-local-vars {
+ @each $local-var, $variable in $is-local-vars {
+ --#{$prefix}#{$local-var}: #{$variable};
+ }
+ }
+ #{$property}: $value if($enable-important-utilities, !important, null);
+ }
+ }
+
+ @each $pseudo in $state {
+ .#{$property-class + $infix + $property-class-modifier}-#{$pseudo}:#{$pseudo} {
+ @each $property in $properties {
+ @if $is-local-vars {
+ @each $local-var, $variable in $is-local-vars {
+ --#{$prefix}#{$local-var}: #{$variable};
+ }
+ }
+ #{$property}: $value if($enable-important-utilities, !important, null);
+ }
+ }
+ }
+ }
+
+ @if $is-rtl == false {
+ /* rtl:end:remove */
+ }
+ }
+ }
+}
diff --git a/assets/scss/bootstrap/mixins/_visibility.scss b/assets/scss/bootstrap/mixins/_visibility.scss
deleted file mode 100644
index f1746731..00000000
--- a/assets/scss/bootstrap/mixins/_visibility.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-// stylelint-disable declaration-no-important
-
-// Visibility
-
-@mixin invisible($visibility) {
- visibility: $visibility !important;
- @include deprecate("`invisible()`", "v4.3.0", "v5");
-}
diff --git a/assets/scss/bootstrap/mixins/_visually-hidden.scss b/assets/scss/bootstrap/mixins/_visually-hidden.scss
new file mode 100644
index 00000000..082aeec9
--- /dev/null
+++ b/assets/scss/bootstrap/mixins/_visually-hidden.scss
@@ -0,0 +1,33 @@
+// stylelint-disable declaration-no-important
+
+// Hide content visually while keeping it accessible to assistive technologies
+//
+// See: https://www.a11yproject.com/posts/2013-01-11-how-to-hide-content/
+// See: https://kittygiraudel.com/2016/10/13/css-hide-and-seek/
+
+@mixin visually-hidden() {
+ width: 1px !important;
+ height: 1px !important;
+ padding: 0 !important;
+ margin: -1px !important; // Fix for https://github.com/twbs/bootstrap/issues/25686
+ overflow: hidden !important;
+ clip: rect(0, 0, 0, 0) !important;
+ white-space: nowrap !important;
+ border: 0 !important;
+
+ // Fix for positioned table caption that could become anonymous cells
+ &:not(caption) {
+ position: absolute !important;
+ }
+}
+
+// Use to only display content when it's focused, or one of its child elements is focused
+// (i.e. when focus is within the element/container that the class was applied to)
+//
+// Useful for "Skip to main content" links; see https://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1
+
+@mixin visually-hidden-focusable() {
+ &:not(:focus):not(:focus-within) {
+ @include visually-hidden();
+ }
+}
diff --git a/assets/scss/bootstrap/tests/jasmine.js b/assets/scss/bootstrap/tests/jasmine.js
new file mode 100644
index 00000000..25d838c9
--- /dev/null
+++ b/assets/scss/bootstrap/tests/jasmine.js
@@ -0,0 +1,16 @@
+/* eslint-disable camelcase */
+
+'use strict'
+
+const path = require('node:path')
+
+module.exports = {
+ spec_dir: 'scss',
+ // Make Jasmine look for `.test.scss` files
+ spec_files: ['**/*.{test,spec}.scss'],
+ // Compile them into JS scripts running `sass-true`
+ requires: [path.join(__dirname, 'sass-true/register')],
+ // Ensure we use `require` so that the require.extensions works
+ // as `import` completely bypasses it
+ jsLoader: 'require'
+}
diff --git a/assets/scss/bootstrap/tests/mixins/_color-modes.test.scss b/assets/scss/bootstrap/tests/mixins/_color-modes.test.scss
new file mode 100644
index 00000000..9ecc628d
--- /dev/null
+++ b/assets/scss/bootstrap/tests/mixins/_color-modes.test.scss
@@ -0,0 +1,69 @@
+// stylelint-disable selector-attribute-quotes
+
+@import "../../functions";
+@import "../../variables";
+@import "../../variables-dark";
+@import "../../maps";
+@import "../../mixins";
+
+@include describe("global $color-mode-type: data") {
+ @include it("generates data attribute selectors for dark mode") {
+ @include assert() {
+ @include output() {
+ @include color-mode(dark) {
+ .element {
+ color: var(--bs-primary-text-emphasis);
+ background-color: var(--bs-primary-bg-subtle);
+ }
+ }
+ @include color-mode(dark, true) {
+ --custom-color: #{mix($indigo, $blue, 50%)};
+ }
+ }
+ @include expect() {
+ [data-bs-theme=dark] .element {
+ color: var(--bs-primary-text-emphasis);
+ background-color: var(--bs-primary-bg-subtle);
+ }
+ [data-bs-theme=dark] {
+ --custom-color: #3a3ff8;
+ }
+ }
+ }
+ }
+}
+
+@include describe("global $color-mode-type: media-query") {
+ @include it("generates media queries for dark mode") {
+ $color-mode-type: media-query !global;
+
+ @include assert() {
+ @include output() {
+ @include color-mode(dark) {
+ .element {
+ color: var(--bs-primary-text-emphasis);
+ background-color: var(--bs-primary-bg-subtle);
+ }
+ }
+ @include color-mode(dark, true) {
+ --custom-color: #{mix($indigo, $blue, 50%)};
+ }
+ }
+ @include expect() {
+ @media (prefers-color-scheme: dark) {
+ .element {
+ color: var(--bs-primary-text-emphasis);
+ background-color: var(--bs-primary-bg-subtle);
+ }
+ }
+ @media (prefers-color-scheme: dark) {
+ :root {
+ --custom-color: #3a3ff8;
+ }
+ }
+ }
+ }
+
+ $color-mode-type: data !global;
+ }
+}
diff --git a/assets/scss/bootstrap/tests/mixins/_media-query-color-mode-full.test.scss b/assets/scss/bootstrap/tests/mixins/_media-query-color-mode-full.test.scss
new file mode 100644
index 00000000..00ed82d6
--- /dev/null
+++ b/assets/scss/bootstrap/tests/mixins/_media-query-color-mode-full.test.scss
@@ -0,0 +1,8 @@
+$color-mode-type: media-query;
+
+@import "../../bootstrap";
+
+@include describe("global $color-mode-type: media-query") {
+ @include it("compiles entirely Bootstrap CSS with media-query color mode") { // stylelint-disable-line block-no-empty
+ }
+}
diff --git a/assets/scss/bootstrap/tests/mixins/_utilities.test.scss b/assets/scss/bootstrap/tests/mixins/_utilities.test.scss
new file mode 100644
index 00000000..63fcae3a
--- /dev/null
+++ b/assets/scss/bootstrap/tests/mixins/_utilities.test.scss
@@ -0,0 +1,393 @@
+$prefix: bs-;
+$enable-important-utilities: false;
+
+// Important: Do not import rfs to check that the mixin just calls the appropriate functions from it
+@import "../../mixins/utilities";
+
+@mixin test-generate-utility($params...) {
+ @include assert() {
+ @include output() {
+ @include generate-utility($params...);
+ }
+
+ @include expect() {
+ @content;
+ }
+ }
+}
+
+@include describe(generate-utility) {
+ @include it("generates a utility class for each value") {
+ @include test-generate-utility(
+ (
+ property: "padding",
+ values: (small: .5rem, large: 2rem)
+ )
+ ) {
+ .padding-small {
+ padding: .5rem;
+ }
+
+ .padding-large {
+ padding: 2rem;
+ }
+ }
+ }
+
+ @include describe("global $enable-important-utilities: true") {
+ @include it("sets !important") {
+ $enable-important-utilities: true !global;
+
+ @include test-generate-utility(
+ (
+ property: "padding",
+ values: (small: .5rem, large: 2rem)
+ )
+ ) {
+ .padding-small {
+ padding: .5rem !important;
+ }
+
+ .padding-large {
+ padding: 2rem !important;
+ }
+ }
+
+ $enable-important-utilities: false !global;
+ }
+ }
+
+ @include describe("$utility") {
+ @include describe("values") {
+ @include it("supports null keys") {
+ @include test-generate-utility(
+ (
+ property: "padding",
+ values: (null: 1rem, small: .5rem, large: 2rem)
+ ),
+ ) {
+ .padding {
+ padding: 1rem;
+ }
+
+ .padding-small {
+ padding: .5rem;
+ }
+
+ .padding-large {
+ padding: 2rem;
+ }
+ }
+ }
+
+ @include it("ignores null values") {
+ @include test-generate-utility(
+ (
+ property: "padding",
+ values: (small: null, large: 2rem)
+ )
+ ) {
+ .padding-large {
+ padding: 2rem;
+ }
+ }
+ }
+
+ @include it("supports lists") {
+ @include test-generate-utility(
+ (
+ property: "padding",
+ values: 1rem 2rem
+ )
+ ) {
+ .padding-1rem {
+ padding: 1rem;
+ }
+
+ .padding-2rem {
+ padding: 2rem;
+ }
+ }
+ }
+
+ @include it("supports single values") {
+ @include test-generate-utility(
+ (
+ property: padding,
+ values: 1rem
+ )
+ ) {
+ .padding-1rem {
+ padding: 1rem;
+ }
+ }
+ }
+ }
+
+ @include describe("class & property") {
+ @include it("adds each property to the declaration") {
+ @include test-generate-utility(
+ (
+ class: padding-x,
+ property: padding-inline-start padding-inline-end,
+ values: 1rem
+ )
+ ) {
+ .padding-x-1rem {
+ padding-inline-start: 1rem;
+ padding-inline-end: 1rem;
+ }
+ }
+ }
+
+ @include it("uses the first property as class name") {
+ @include test-generate-utility(
+ (
+ property: padding-inline-start padding-inline-end,
+ values: 1rem
+ )
+ ) {
+ .padding-inline-start-1rem {
+ padding-inline-start: 1rem;
+ padding-inline-end: 1rem;
+ }
+ }
+ }
+
+ @include it("supports a null class to create classes straight from the values") {
+ @include test-generate-utility(
+ (
+ property: visibility,
+ class: null,
+ values: (
+ visible: visible,
+ invisible: hidden,
+ )
+ )
+ ) {
+ .visible {
+ visibility: visible;
+ }
+
+ .invisible {
+ visibility: hidden;
+ }
+ }
+ }
+ }
+
+ @include describe("state") {
+ @include it("Generates selectors for each states") {
+ @include test-generate-utility(
+ (
+ property: padding,
+ values: 1rem,
+ state: hover focus,
+ )
+ ) {
+ .padding-1rem {
+ padding: 1rem;
+ }
+
+ .padding-1rem-hover:hover {
+ padding: 1rem;
+ }
+
+ .padding-1rem-focus:focus {
+ padding: 1rem;
+ }
+ }
+ }
+ }
+
+ @include describe("css-var"){
+ @include it("sets a CSS variable instead of the property") {
+ @include test-generate-utility(
+ (
+ property: padding,
+ css-variable-name: padding,
+ css-var: true,
+ values: 1rem 2rem
+ )
+ ) {
+ .padding-1rem {
+ --bs-padding: 1rem;
+ }
+
+ .padding-2rem {
+ --bs-padding: 2rem;
+ }
+ }
+ }
+
+ @include it("defaults to class") {
+ @include test-generate-utility(
+ (
+ property: padding,
+ class: padding,
+ css-var: true,
+ values: 1rem 2rem
+ )
+ ) {
+ .padding-1rem {
+ --bs-padding: 1rem;
+ }
+
+ .padding-2rem {
+ --bs-padding: 2rem;
+ }
+ }
+ }
+ }
+
+ @include describe("local-vars") {
+ @include it("generates the listed variables") {
+ @include test-generate-utility(
+ (
+ property: color,
+ class: desaturated-color,
+ local-vars: (
+ color-opacity: 1,
+ color-saturation: .25
+ ),
+ values: (
+ blue: hsla(192deg, var(--bs-color-saturation), 0, var(--bs-color-opacity))
+ )
+ )
+ ) {
+ .desaturated-color-blue {
+ --bs-color-opacity: 1;
+ // Sass compilation will put a leading zero so we want to keep that one
+ // stylelint-disable-next-line stylistic/number-leading-zero
+ --bs-color-saturation: 0.25;
+ color: hsla(192deg, var(--bs-color-saturation), 0, var(--bs-color-opacity));
+ }
+ }
+ }
+ }
+
+ @include describe("css-var & state") {
+ @include it("Generates a rule with for each state with a CSS variable") {
+ @include test-generate-utility(
+ (
+ property: padding,
+ css-var: true,
+ css-variable-name: padding,
+ values: 1rem,
+ state: hover focus,
+ )
+ ) {
+ .padding-1rem {
+ --bs-padding: 1rem;
+ }
+
+ .padding-1rem-hover:hover {
+ --bs-padding: 1rem;
+ }
+
+ .padding-1rem-focus:focus {
+ --bs-padding: 1rem;
+ }
+ }
+ }
+ }
+
+ @include describe("rtl") {
+ @include it("sets up RTLCSS for removal when false") {
+ @include test-generate-utility(
+ (
+ property: padding,
+ values: 1rem,
+ rtl: false
+ )
+ ) {
+ /* rtl:begin:remove */
+
+ .padding-1rem {
+ padding: 1rem;
+ }
+
+ /* rtl:end:remove */
+
+ }
+ }
+ }
+
+ @include describe("rfs") {
+ @include it("sets the fluid value when not inside media query") {
+ @include test-generate-utility(
+ (
+ property: padding,
+ values: 1rem,
+ rfs: true
+ )
+ ) {
+ .padding-1rem {
+ padding: rfs-fluid-value(1rem);
+ }
+ }
+ }
+
+ @include it("sets the value when inside the media query") {
+ @include test-generate-utility(
+ (
+ property: padding,
+ values: 1rem,
+ rfs: true
+ ),
+ $is-rfs-media-query: true
+ ) {
+ .padding-1rem {
+ padding: rfs-value(1rem);
+ }
+ }
+ }
+ }
+ }
+
+ @include describe("$infix") {
+ @include it("inserts the given infix") {
+ @include test-generate-utility(
+ (
+ property: "padding",
+ values: (null: 1rem, small: .5rem, large: 2rem)
+ ),
+ $infix: -sm
+ ) {
+ .padding-sm {
+ padding: 1rem;
+ }
+
+ .padding-sm-small {
+ padding: .5rem;
+ }
+
+ .padding-sm-large {
+ padding: 2rem;
+ }
+ }
+ }
+
+ @include it("strips leading - if class is null") {
+ @include test-generate-utility(
+ (
+ property: visibility,
+ class: null,
+ values: (
+ visible: visible,
+ invisible: hidden,
+ )
+ ),
+ -sm
+ ) {
+ .sm-visible {
+ visibility: visible;
+ }
+
+ .sm-invisible {
+ visibility: hidden;
+ }
+ }
+ }
+ }
+}
diff --git a/assets/scss/bootstrap/tests/sass-true/register.js b/assets/scss/bootstrap/tests/sass-true/register.js
new file mode 100644
index 00000000..d93e414c
--- /dev/null
+++ b/assets/scss/bootstrap/tests/sass-true/register.js
@@ -0,0 +1,14 @@
+'use strict'
+
+const path = require('node:path')
+
+const runnerPath = path.join(__dirname, 'runner').replace(/\\/g, '/')
+
+require.extensions['.scss'] = (module, filename) => {
+ const normalizedFilename = filename.replace(/\\/g, '/')
+
+ return module._compile(`
+ const runner = require('${runnerPath}')
+ runner('${normalizedFilename}', { describe, it })
+ `, filename)
+}
diff --git a/assets/scss/bootstrap/tests/sass-true/runner.js b/assets/scss/bootstrap/tests/sass-true/runner.js
new file mode 100644
index 00000000..bef870ac
--- /dev/null
+++ b/assets/scss/bootstrap/tests/sass-true/runner.js
@@ -0,0 +1,17 @@
+'use strict'
+
+const fs = require('node:fs')
+const path = require('node:path')
+const { runSass } = require('sass-true')
+
+module.exports = (filename, { describe, it }) => {
+ const data = fs.readFileSync(filename, 'utf8')
+ const TRUE_SETUP = '$true-terminal-output: false; @import "true";'
+ const sassString = TRUE_SETUP + data
+
+ runSass(
+ { describe, it, sourceType: 'string' },
+ sassString,
+ { loadPaths: [path.dirname(filename)] }
+ )
+}
diff --git a/assets/scss/bootstrap/tests/utilities/_api.test.scss b/assets/scss/bootstrap/tests/utilities/_api.test.scss
new file mode 100644
index 00000000..304d8d1c
--- /dev/null
+++ b/assets/scss/bootstrap/tests/utilities/_api.test.scss
@@ -0,0 +1,75 @@
+@import "../../functions";
+@import "../../variables";
+@import "../../variables-dark";
+@import "../../maps";
+@import "../../mixins";
+
+$utilities: ();
+
+@include describe("utilities/api") {
+ @include it("generates utilities for each breakpoints") {
+ $utilities: (
+ margin: (
+ property: margin,
+ values: auto
+ ),
+ padding: (
+ property: padding,
+ responsive: true,
+ values: 1rem
+ ),
+ font-size: (
+ property: font-size,
+ values: (large: 1.25rem),
+ print: true
+ )
+ ) !global;
+
+ $grid-breakpoints: (
+ xs: 0,
+ sm: 333px,
+ md: 666px
+ ) !global;
+
+ @include assert() {
+ @include output() {
+ @import "../../utilities/api";
+ }
+
+ @include expect() {
+ // margin is not set to responsive
+ .margin-auto {
+ margin: auto !important;
+ }
+
+ // padding is, though
+ .padding-1rem {
+ padding: 1rem !important;
+ }
+
+ .font-size-large {
+ font-size: 1.25rem !important;
+ }
+
+ @media (min-width: 333px) {
+ .padding-sm-1rem {
+ padding: 1rem !important;
+ }
+ }
+
+ @media (min-width: 666px) {
+ .padding-md-1rem {
+ padding: 1rem !important;
+ }
+ }
+
+ @media print {
+ .font-size-print-large {
+ font-size: 1.25rem !important;
+ }
+ }
+ }
+
+ }
+ }
+}
diff --git a/assets/scss/bootstrap/utilities/_align.scss b/assets/scss/bootstrap/utilities/_align.scss
deleted file mode 100644
index 8b7df9f7..00000000
--- a/assets/scss/bootstrap/utilities/_align.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-// stylelint-disable declaration-no-important
-
-.align-baseline { vertical-align: baseline !important; } // Browser default
-.align-top { vertical-align: top !important; }
-.align-middle { vertical-align: middle !important; }
-.align-bottom { vertical-align: bottom !important; }
-.align-text-bottom { vertical-align: text-bottom !important; }
-.align-text-top { vertical-align: text-top !important; }
diff --git a/assets/scss/bootstrap/utilities/_api.scss b/assets/scss/bootstrap/utilities/_api.scss
new file mode 100644
index 00000000..62e1d398
--- /dev/null
+++ b/assets/scss/bootstrap/utilities/_api.scss
@@ -0,0 +1,47 @@
+// Loop over each breakpoint
+@each $breakpoint in map-keys($grid-breakpoints) {
+
+ // Generate media query if needed
+ @include media-breakpoint-up($breakpoint) {
+ $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+ // Loop over each utility property
+ @each $key, $utility in $utilities {
+ // The utility can be disabled with `false`, thus check if the utility is a map first
+ // Only proceed if responsive media queries are enabled or if it's the base media query
+ @if type-of($utility) == "map" and (map-get($utility, responsive) or $infix == "") {
+ @include generate-utility($utility, $infix);
+ }
+ }
+ }
+}
+
+// RFS rescaling
+@media (min-width: $rfs-mq-value) {
+ @each $breakpoint in map-keys($grid-breakpoints) {
+ $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+ @if (map-get($grid-breakpoints, $breakpoint) < $rfs-breakpoint) {
+ // Loop over each utility property
+ @each $key, $utility in $utilities {
+ // The utility can be disabled with `false`, thus check if the utility is a map first
+ // Only proceed if responsive media queries are enabled or if it's the base media query
+ @if type-of($utility) == "map" and map-get($utility, rfs) and (map-get($utility, responsive) or $infix == "") {
+ @include generate-utility($utility, $infix, true);
+ }
+ }
+ }
+ }
+}
+
+
+// Print utilities
+@media print {
+ @each $key, $utility in $utilities {
+ // The utility can be disabled with `false`, thus check if the utility is a map first
+ // Then check if the utility needs print styles
+ @if type-of($utility) == "map" and map-get($utility, print) == true {
+ @include generate-utility($utility, "-print");
+ }
+ }
+}
diff --git a/assets/scss/bootstrap/utilities/_background.scss b/assets/scss/bootstrap/utilities/_background.scss
deleted file mode 100644
index a997b1bd..00000000
--- a/assets/scss/bootstrap/utilities/_background.scss
+++ /dev/null
@@ -1,19 +0,0 @@
-// stylelint-disable declaration-no-important
-
-@each $color, $value in $theme-colors {
- @include bg-variant(".bg-#{$color}", $value, true);
-}
-
-@if $enable-gradients {
- @each $color, $value in $theme-colors {
- @include bg-gradient-variant(".bg-gradient-#{$color}", $value);
- }
-}
-
-.bg-white {
- background-color: $white !important;
-}
-
-.bg-transparent {
- background-color: transparent !important;
-}
diff --git a/assets/scss/bootstrap/utilities/_borders.scss b/assets/scss/bootstrap/utilities/_borders.scss
deleted file mode 100644
index 302f6bf8..00000000
--- a/assets/scss/bootstrap/utilities/_borders.scss
+++ /dev/null
@@ -1,75 +0,0 @@
-// stylelint-disable property-blacklist, declaration-no-important
-
-//
-// Border
-//
-
-.border { border: $border-width solid $border-color !important; }
-.border-top { border-top: $border-width solid $border-color !important; }
-.border-right { border-right: $border-width solid $border-color !important; }
-.border-bottom { border-bottom: $border-width solid $border-color !important; }
-.border-left { border-left: $border-width solid $border-color !important; }
-
-.border-0 { border: 0 !important; }
-.border-top-0 { border-top: 0 !important; }
-.border-right-0 { border-right: 0 !important; }
-.border-bottom-0 { border-bottom: 0 !important; }
-.border-left-0 { border-left: 0 !important; }
-
-@each $color, $value in $theme-colors {
- .border-#{$color} {
- border-color: $value !important;
- }
-}
-
-.border-white {
- border-color: $white !important;
-}
-
-//
-// Border-radius
-//
-
-.rounded-sm {
- border-radius: $border-radius-sm !important;
-}
-
-.rounded {
- border-radius: $border-radius !important;
-}
-
-.rounded-top {
- border-top-left-radius: $border-radius !important;
- border-top-right-radius: $border-radius !important;
-}
-
-.rounded-right {
- border-top-right-radius: $border-radius !important;
- border-bottom-right-radius: $border-radius !important;
-}
-
-.rounded-bottom {
- border-bottom-right-radius: $border-radius !important;
- border-bottom-left-radius: $border-radius !important;
-}
-
-.rounded-left {
- border-top-left-radius: $border-radius !important;
- border-bottom-left-radius: $border-radius !important;
-}
-
-.rounded-lg {
- border-radius: $border-radius-lg !important;
-}
-
-.rounded-circle {
- border-radius: 50% !important;
-}
-
-.rounded-pill {
- border-radius: $rounded-pill !important;
-}
-
-.rounded-0 {
- border-radius: 0 !important;
-}
diff --git a/assets/scss/bootstrap/utilities/_display.scss b/assets/scss/bootstrap/utilities/_display.scss
deleted file mode 100644
index 13036799..00000000
--- a/assets/scss/bootstrap/utilities/_display.scss
+++ /dev/null
@@ -1,26 +0,0 @@
-// stylelint-disable declaration-no-important
-
-//
-// Utilities for common `display` values
-//
-
-@each $breakpoint in map-keys($grid-breakpoints) {
- @include media-breakpoint-up($breakpoint) {
- $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
-
- @each $value in $displays {
- .d#{$infix}-#{$value} { display: $value !important; }
- }
- }
-}
-
-
-//
-// Utilities for toggling `display` in print
-//
-
-@media print {
- @each $value in $displays {
- .d-print-#{$value} { display: $value !important; }
- }
-}
diff --git a/assets/scss/bootstrap/utilities/_embed.scss b/assets/scss/bootstrap/utilities/_embed.scss
deleted file mode 100644
index 4497ac04..00000000
--- a/assets/scss/bootstrap/utilities/_embed.scss
+++ /dev/null
@@ -1,39 +0,0 @@
-// Credit: Nicolas Gallagher and SUIT CSS.
-
-.embed-responsive {
- position: relative;
- display: block;
- width: 100%;
- padding: 0;
- overflow: hidden;
-
- &::before {
- display: block;
- content: "";
- }
-
- .embed-responsive-item,
- iframe,
- embed,
- object,
- video {
- position: absolute;
- top: 0;
- bottom: 0;
- left: 0;
- width: 100%;
- height: 100%;
- border: 0;
- }
-}
-
-@each $embed-responsive-aspect-ratio in $embed-responsive-aspect-ratios {
- $embed-responsive-aspect-ratio-x: nth($embed-responsive-aspect-ratio, 1);
- $embed-responsive-aspect-ratio-y: nth($embed-responsive-aspect-ratio, 2);
-
- .embed-responsive-#{$embed-responsive-aspect-ratio-x}by#{$embed-responsive-aspect-ratio-y} {
- &::before {
- padding-top: percentage($embed-responsive-aspect-ratio-y / $embed-responsive-aspect-ratio-x);
- }
- }
-}
diff --git a/assets/scss/bootstrap/utilities/_flex.scss b/assets/scss/bootstrap/utilities/_flex.scss
deleted file mode 100644
index 3d4266e0..00000000
--- a/assets/scss/bootstrap/utilities/_flex.scss
+++ /dev/null
@@ -1,51 +0,0 @@
-// stylelint-disable declaration-no-important
-
-// Flex variation
-//
-// Custom styles for additional flex alignment options.
-
-@each $breakpoint in map-keys($grid-breakpoints) {
- @include media-breakpoint-up($breakpoint) {
- $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
-
- .flex#{$infix}-row { flex-direction: row !important; }
- .flex#{$infix}-column { flex-direction: column !important; }
- .flex#{$infix}-row-reverse { flex-direction: row-reverse !important; }
- .flex#{$infix}-column-reverse { flex-direction: column-reverse !important; }
-
- .flex#{$infix}-wrap { flex-wrap: wrap !important; }
- .flex#{$infix}-nowrap { flex-wrap: nowrap !important; }
- .flex#{$infix}-wrap-reverse { flex-wrap: wrap-reverse !important; }
- .flex#{$infix}-fill { flex: 1 1 auto !important; }
- .flex#{$infix}-grow-0 { flex-grow: 0 !important; }
- .flex#{$infix}-grow-1 { flex-grow: 1 !important; }
- .flex#{$infix}-shrink-0 { flex-shrink: 0 !important; }
- .flex#{$infix}-shrink-1 { flex-shrink: 1 !important; }
-
- .justify-content#{$infix}-start { justify-content: flex-start !important; }
- .justify-content#{$infix}-end { justify-content: flex-end !important; }
- .justify-content#{$infix}-center { justify-content: center !important; }
- .justify-content#{$infix}-between { justify-content: space-between !important; }
- .justify-content#{$infix}-around { justify-content: space-around !important; }
-
- .align-items#{$infix}-start { align-items: flex-start !important; }
- .align-items#{$infix}-end { align-items: flex-end !important; }
- .align-items#{$infix}-center { align-items: center !important; }
- .align-items#{$infix}-baseline { align-items: baseline !important; }
- .align-items#{$infix}-stretch { align-items: stretch !important; }
-
- .align-content#{$infix}-start { align-content: flex-start !important; }
- .align-content#{$infix}-end { align-content: flex-end !important; }
- .align-content#{$infix}-center { align-content: center !important; }
- .align-content#{$infix}-between { align-content: space-between !important; }
- .align-content#{$infix}-around { align-content: space-around !important; }
- .align-content#{$infix}-stretch { align-content: stretch !important; }
-
- .align-self#{$infix}-auto { align-self: auto !important; }
- .align-self#{$infix}-start { align-self: flex-start !important; }
- .align-self#{$infix}-end { align-self: flex-end !important; }
- .align-self#{$infix}-center { align-self: center !important; }
- .align-self#{$infix}-baseline { align-self: baseline !important; }
- .align-self#{$infix}-stretch { align-self: stretch !important; }
- }
-}
diff --git a/assets/scss/bootstrap/utilities/_float.scss b/assets/scss/bootstrap/utilities/_float.scss
deleted file mode 100644
index 54250844..00000000
--- a/assets/scss/bootstrap/utilities/_float.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-// stylelint-disable declaration-no-important
-
-@each $breakpoint in map-keys($grid-breakpoints) {
- @include media-breakpoint-up($breakpoint) {
- $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
-
- .float#{$infix}-left { float: left !important; }
- .float#{$infix}-right { float: right !important; }
- .float#{$infix}-none { float: none !important; }
- }
-}
diff --git a/assets/scss/bootstrap/utilities/_overflow.scss b/assets/scss/bootstrap/utilities/_overflow.scss
deleted file mode 100644
index 8326c306..00000000
--- a/assets/scss/bootstrap/utilities/_overflow.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-// stylelint-disable declaration-no-important
-
-@each $value in $overflows {
- .overflow-#{$value} { overflow: $value !important; }
-}
diff --git a/assets/scss/bootstrap/utilities/_position.scss b/assets/scss/bootstrap/utilities/_position.scss
deleted file mode 100644
index cdf6c115..00000000
--- a/assets/scss/bootstrap/utilities/_position.scss
+++ /dev/null
@@ -1,32 +0,0 @@
-// stylelint-disable declaration-no-important
-
-// Common values
-@each $position in $positions {
- .position-#{$position} { position: $position !important; }
-}
-
-// Shorthand
-
-.fixed-top {
- position: fixed;
- top: 0;
- right: 0;
- left: 0;
- z-index: $zindex-fixed;
-}
-
-.fixed-bottom {
- position: fixed;
- right: 0;
- bottom: 0;
- left: 0;
- z-index: $zindex-fixed;
-}
-
-.sticky-top {
- @supports (position: sticky) {
- position: sticky;
- top: 0;
- z-index: $zindex-sticky;
- }
-}
diff --git a/assets/scss/bootstrap/utilities/_screenreaders.scss b/assets/scss/bootstrap/utilities/_screenreaders.scss
deleted file mode 100644
index 9f26fde0..00000000
--- a/assets/scss/bootstrap/utilities/_screenreaders.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-//
-// Screenreaders
-//
-
-.sr-only {
- @include sr-only();
-}
-
-.sr-only-focusable {
- @include sr-only-focusable();
-}
diff --git a/assets/scss/bootstrap/utilities/_shadows.scss b/assets/scss/bootstrap/utilities/_shadows.scss
deleted file mode 100644
index f5d03fcd..00000000
--- a/assets/scss/bootstrap/utilities/_shadows.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-// stylelint-disable declaration-no-important
-
-.shadow-sm { box-shadow: $box-shadow-sm !important; }
-.shadow { box-shadow: $box-shadow !important; }
-.shadow-lg { box-shadow: $box-shadow-lg !important; }
-.shadow-none { box-shadow: none !important; }
diff --git a/assets/scss/bootstrap/utilities/_sizing.scss b/assets/scss/bootstrap/utilities/_sizing.scss
deleted file mode 100644
index f3764880..00000000
--- a/assets/scss/bootstrap/utilities/_sizing.scss
+++ /dev/null
@@ -1,20 +0,0 @@
-// stylelint-disable declaration-no-important
-
-// Width and height
-
-@each $prop, $abbrev in (width: w, height: h) {
- @each $size, $length in $sizes {
- .#{$abbrev}-#{$size} { #{$prop}: $length !important; }
- }
-}
-
-.mw-100 { max-width: 100% !important; }
-.mh-100 { max-height: 100% !important; }
-
-// Viewport additional helpers
-
-.min-vw-100 { min-width: 100vw !important; }
-.min-vh-100 { min-height: 100vh !important; }
-
-.vw-100 { width: 100vw !important; }
-.vh-100 { height: 100vh !important; }
diff --git a/assets/scss/bootstrap/utilities/_spacing.scss b/assets/scss/bootstrap/utilities/_spacing.scss
deleted file mode 100644
index 35113679..00000000
--- a/assets/scss/bootstrap/utilities/_spacing.scss
+++ /dev/null
@@ -1,73 +0,0 @@
-// stylelint-disable declaration-no-important
-
-// Margin and Padding
-
-@each $breakpoint in map-keys($grid-breakpoints) {
- @include media-breakpoint-up($breakpoint) {
- $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
-
- @each $prop, $abbrev in (margin: m, padding: p) {
- @each $size, $length in $spacers {
- .#{$abbrev}#{$infix}-#{$size} { #{$prop}: $length !important; }
- .#{$abbrev}t#{$infix}-#{$size},
- .#{$abbrev}y#{$infix}-#{$size} {
- #{$prop}-top: $length !important;
- }
- .#{$abbrev}r#{$infix}-#{$size},
- .#{$abbrev}x#{$infix}-#{$size} {
- #{$prop}-right: $length !important;
- }
- .#{$abbrev}b#{$infix}-#{$size},
- .#{$abbrev}y#{$infix}-#{$size} {
- #{$prop}-bottom: $length !important;
- }
- .#{$abbrev}l#{$infix}-#{$size},
- .#{$abbrev}x#{$infix}-#{$size} {
- #{$prop}-left: $length !important;
- }
- }
- }
-
- // Negative margins (e.g., where `.mb-n1` is negative version of `.mb-1`)
- @each $size, $length in $spacers {
- @if $size != 0 {
- .m#{$infix}-n#{$size} { margin: -$length !important; }
- .mt#{$infix}-n#{$size},
- .my#{$infix}-n#{$size} {
- margin-top: -$length !important;
- }
- .mr#{$infix}-n#{$size},
- .mx#{$infix}-n#{$size} {
- margin-right: -$length !important;
- }
- .mb#{$infix}-n#{$size},
- .my#{$infix}-n#{$size} {
- margin-bottom: -$length !important;
- }
- .ml#{$infix}-n#{$size},
- .mx#{$infix}-n#{$size} {
- margin-left: -$length !important;
- }
- }
- }
-
- // Some special margin utils
- .m#{$infix}-auto { margin: auto !important; }
- .mt#{$infix}-auto,
- .my#{$infix}-auto {
- margin-top: auto !important;
- }
- .mr#{$infix}-auto,
- .mx#{$infix}-auto {
- margin-right: auto !important;
- }
- .mb#{$infix}-auto,
- .my#{$infix}-auto {
- margin-bottom: auto !important;
- }
- .ml#{$infix}-auto,
- .mx#{$infix}-auto {
- margin-left: auto !important;
- }
- }
-}
diff --git a/assets/scss/bootstrap/utilities/_stretched-link.scss b/assets/scss/bootstrap/utilities/_stretched-link.scss
deleted file mode 100644
index fb5066bf..00000000
--- a/assets/scss/bootstrap/utilities/_stretched-link.scss
+++ /dev/null
@@ -1,19 +0,0 @@
-//
-// Stretched link
-//
-
-.stretched-link {
- &::after {
- position: absolute;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- z-index: 1;
- // Just in case `pointer-events: none` is set on a parent
- pointer-events: auto;
- content: "";
- // IE10 bugfix, see https://stackoverflow.com/questions/16947967/ie10-hover-pseudo-class-doesnt-work-without-background-color
- background-color: rgba(0, 0, 0, 0);
- }
-}
diff --git a/assets/scss/bootstrap/utilities/_text.scss b/assets/scss/bootstrap/utilities/_text.scss
deleted file mode 100644
index 5d0f1c84..00000000
--- a/assets/scss/bootstrap/utilities/_text.scss
+++ /dev/null
@@ -1,72 +0,0 @@
-// stylelint-disable declaration-no-important
-
-//
-// Text
-//
-
-.text-monospace { font-family: $font-family-monospace !important; }
-
-// Alignment
-
-.text-justify { text-align: justify !important; }
-.text-wrap { white-space: normal !important; }
-.text-nowrap { white-space: nowrap !important; }
-.text-truncate { @include text-truncate(); }
-
-// Responsive alignment
-
-@each $breakpoint in map-keys($grid-breakpoints) {
- @include media-breakpoint-up($breakpoint) {
- $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
-
- .text#{$infix}-left { text-align: left !important; }
- .text#{$infix}-right { text-align: right !important; }
- .text#{$infix}-center { text-align: center !important; }
- }
-}
-
-// Transformation
-
-.text-lowercase { text-transform: lowercase !important; }
-.text-uppercase { text-transform: uppercase !important; }
-.text-capitalize { text-transform: capitalize !important; }
-
-// Weight and italics
-
-.font-weight-light { font-weight: $font-weight-light !important; }
-.font-weight-lighter { font-weight: $font-weight-lighter !important; }
-.font-weight-normal { font-weight: $font-weight-normal !important; }
-.font-weight-bold { font-weight: $font-weight-bold !important; }
-.font-weight-bolder { font-weight: $font-weight-bolder !important; }
-.font-italic { font-style: italic !important; }
-
-// Contextual colors
-
-.text-white { color: $white !important; }
-
-@each $color, $value in $theme-colors {
- @include text-emphasis-variant(".text-#{$color}", $value, true);
-}
-
-.text-body { color: $body-color !important; }
-.text-muted { color: $text-muted !important; }
-
-.text-black-50 { color: rgba($black, .5) !important; }
-.text-white-50 { color: rgba($white, .5) !important; }
-
-// Misc
-
-.text-hide {
- @include text-hide($ignore-warning: true);
-}
-
-.text-decoration-none { text-decoration: none !important; }
-
-.text-break {
- word-break: break-word !important; // IE & < Edge 18
- overflow-wrap: break-word !important;
-}
-
-// Reset
-
-.text-reset { color: inherit !important; }
diff --git a/assets/scss/bootstrap/utilities/_visibility.scss b/assets/scss/bootstrap/utilities/_visibility.scss
deleted file mode 100644
index 7756c3bf..00000000
--- a/assets/scss/bootstrap/utilities/_visibility.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-// stylelint-disable declaration-no-important
-
-//
-// Visibility utilities
-//
-
-.visible {
- visibility: visible !important;
-}
-
-.invisible {
- visibility: hidden !important;
-}
diff --git a/assets/scss/bootstrap/vendor/_rfs.scss b/assets/scss/bootstrap/vendor/_rfs.scss
index 497e07ed..aa1f82b9 100644
--- a/assets/scss/bootstrap/vendor/_rfs.scss
+++ b/assets/scss/bootstrap/vendor/_rfs.scss
@@ -1,31 +1,42 @@
-// stylelint-disable property-blacklist, scss/dollar-variable-default
+// stylelint-disable scss/dimension-no-non-numeric-values
// SCSS RFS mixin
//
-// Automated font-resizing
+// Automated responsive values for font sizes, paddings, margins and much more
//
-// See https://github.com/twbs/rfs
+// Licensed under MIT (https://github.com/twbs/rfs/blob/main/LICENSE)
// Configuration
-// Base font size
-$rfs-base-font-size: 1.25rem !default;
-$rfs-font-size-unit: rem !default;
+// Base value
+$rfs-base-value: 1.25rem !default;
+$rfs-unit: rem !default;
-// Breakpoint at where font-size starts decreasing if screen width is smaller
+@if $rfs-unit != rem and $rfs-unit != px {
+ @error "`#{$rfs-unit}` is not a valid unit for $rfs-unit. Use `px` or `rem`.";
+}
+
+// Breakpoint at where values start decreasing if screen width is smaller
$rfs-breakpoint: 1200px !default;
$rfs-breakpoint-unit: px !default;
-// Resize font-size based on screen height and width
+@if $rfs-breakpoint-unit != px and $rfs-breakpoint-unit != em and $rfs-breakpoint-unit != rem {
+ @error "`#{$rfs-breakpoint-unit}` is not a valid unit for $rfs-breakpoint-unit. Use `px`, `em` or `rem`.";
+}
+
+// Resize values based on screen height and width
$rfs-two-dimensional: false !default;
// Factor of decrease
$rfs-factor: 10 !default;
-@if type-of($rfs-factor) != "number" or $rfs-factor <= 1 {
+@if type-of($rfs-factor) != number or $rfs-factor <= 1 {
@error "`#{$rfs-factor}` is not a valid $rfs-factor, it must be greater than 1.";
}
+// Mode. Possibilities: "min-media-query", "max-media-query"
+$rfs-mode: min-media-query !default;
+
// Generate enable or disable classes. Possibilities: false, "enable" or "disable"
$rfs-class: false !default;
@@ -35,170 +46,303 @@ $rfs-rem-value: 16 !default;
// Safari iframe resize bug: https://github.com/twbs/rfs/issues/14
$rfs-safari-iframe-resize-bug-fix: false !default;
-// Disable RFS by setting $enable-responsive-font-sizes to false
-$enable-responsive-font-sizes: true !default;
+// Disable RFS by setting $enable-rfs to false
+$enable-rfs: true !default;
-// Cache $rfs-base-font-size unit
-$rfs-base-font-size-unit: unit($rfs-base-font-size);
+// Cache $rfs-base-value unit
+$rfs-base-value-unit: unit($rfs-base-value);
+
+@function divide($dividend, $divisor, $precision: 10) {
+ $sign: if($dividend > 0 and $divisor > 0 or $dividend < 0 and $divisor < 0, 1, -1);
+ $dividend: abs($dividend);
+ $divisor: abs($divisor);
+ @if $dividend == 0 {
+ @return 0;
+ }
+ @if $divisor == 0 {
+ @error "Cannot divide by 0";
+ }
+ $remainder: $dividend;
+ $result: 0;
+ $factor: 10;
+ @while ($remainder > 0 and $precision >= 0) {
+ $quotient: 0;
+ @while ($remainder >= $divisor) {
+ $remainder: $remainder - $divisor;
+ $quotient: $quotient + 1;
+ }
+ $result: $result * 10 + $quotient;
+ $factor: $factor * .1;
+ $remainder: $remainder * 10;
+ $precision: $precision - 1;
+ @if ($precision < 0 and $remainder >= $divisor * 5) {
+ $result: $result + 1;
+ }
+ }
+ $result: $result * $factor * $sign;
+ $dividend-unit: unit($dividend);
+ $divisor-unit: unit($divisor);
+ $unit-map: (
+ "px": 1px,
+ "rem": 1rem,
+ "em": 1em,
+ "%": 1%
+ );
+ @if ($dividend-unit != $divisor-unit and map-has-key($unit-map, $dividend-unit)) {
+ $result: $result * map-get($unit-map, $dividend-unit);
+ }
+ @return $result;
+}
-// Remove px-unit from $rfs-base-font-size for calculations
-@if $rfs-base-font-size-unit == "px" {
- $rfs-base-font-size: $rfs-base-font-size / ($rfs-base-font-size * 0 + 1);
+// Remove px-unit from $rfs-base-value for calculations
+@if $rfs-base-value-unit == px {
+ $rfs-base-value: divide($rfs-base-value, $rfs-base-value * 0 + 1);
}
-@else if $rfs-base-font-size-unit == "rem" {
- $rfs-base-font-size: $rfs-base-font-size / ($rfs-base-font-size * 0 + 1 / $rfs-rem-value);
+@else if $rfs-base-value-unit == rem {
+ $rfs-base-value: divide($rfs-base-value, divide($rfs-base-value * 0 + 1, $rfs-rem-value));
}
// Cache $rfs-breakpoint unit to prevent multiple calls
$rfs-breakpoint-unit-cache: unit($rfs-breakpoint);
// Remove unit from $rfs-breakpoint for calculations
-@if $rfs-breakpoint-unit-cache == "px" {
- $rfs-breakpoint: $rfs-breakpoint / ($rfs-breakpoint * 0 + 1);
+@if $rfs-breakpoint-unit-cache == px {
+ $rfs-breakpoint: divide($rfs-breakpoint, $rfs-breakpoint * 0 + 1);
}
-@else if $rfs-breakpoint-unit-cache == "rem" or $rfs-breakpoint-unit-cache == "em" {
- $rfs-breakpoint: $rfs-breakpoint / ($rfs-breakpoint * 0 + 1 / $rfs-rem-value);
+@else if $rfs-breakpoint-unit-cache == rem or $rfs-breakpoint-unit-cache == "em" {
+ $rfs-breakpoint: divide($rfs-breakpoint, divide($rfs-breakpoint * 0 + 1, $rfs-rem-value));
}
-// Responsive font-size mixin
-@mixin rfs($fs, $important: false) {
- // Cache $fs unit
- $fs-unit: if(type-of($fs) == "number", unit($fs), false);
-
- // Add !important suffix if needed
- $rfs-suffix: if($important, " !important", "");
-
- // If $fs isn't a number (like inherit) or $fs has a unit (not px or rem, like 1.5em) or $ is 0, just print the value
- @if not $fs-unit or $fs-unit != "" and $fs-unit != "px" and $fs-unit != "rem" or $fs == 0 {
- font-size: #{$fs}#{$rfs-suffix};
+// Calculate the media query value
+$rfs-mq-value: if($rfs-breakpoint-unit == px, #{$rfs-breakpoint}px, #{divide($rfs-breakpoint, $rfs-rem-value)}#{$rfs-breakpoint-unit});
+$rfs-mq-property-width: if($rfs-mode == max-media-query, max-width, min-width);
+$rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height);
+
+// Internal mixin used to determine which media query needs to be used
+@mixin _rfs-media-query {
+ @if $rfs-two-dimensional {
+ @if $rfs-mode == max-media-query {
+ @media (#{$rfs-mq-property-width}: #{$rfs-mq-value}), (#{$rfs-mq-property-height}: #{$rfs-mq-value}) {
+ @content;
+ }
+ }
+ @else {
+ @media (#{$rfs-mq-property-width}: #{$rfs-mq-value}) and (#{$rfs-mq-property-height}: #{$rfs-mq-value}) {
+ @content;
+ }
+ }
}
@else {
- // Variables for storing static and fluid rescaling
- $rfs-static: null;
- $rfs-fluid: null;
+ @media (#{$rfs-mq-property-width}: #{$rfs-mq-value}) {
+ @content;
+ }
+ }
+}
- // Remove px-unit from $fs for calculations
- @if $fs-unit == "px" {
- $fs: $fs / ($fs * 0 + 1);
+// Internal mixin that adds disable classes to the selector if needed.
+@mixin _rfs-rule {
+ @if $rfs-class == disable and $rfs-mode == max-media-query {
+ // Adding an extra class increases specificity, which prevents the media query to override the property
+ &,
+ .disable-rfs &,
+ &.disable-rfs {
+ @content;
+ }
+ }
+ @else if $rfs-class == enable and $rfs-mode == min-media-query {
+ .enable-rfs &,
+ &.enable-rfs {
+ @content;
}
- @else if $fs-unit == "rem" {
- $fs: $fs / ($fs * 0 + 1 / $rfs-rem-value);
+ } @else {
+ @content;
+ }
+}
+
+// Internal mixin that adds enable classes to the selector if needed.
+@mixin _rfs-media-query-rule {
+
+ @if $rfs-class == enable {
+ @if $rfs-mode == min-media-query {
+ @content;
}
- // Set default font-size
- @if $rfs-font-size-unit == rem {
- $rfs-static: #{$fs / $rfs-rem-value}rem#{$rfs-suffix};
+ @include _rfs-media-query () {
+ .enable-rfs &,
+ &.enable-rfs {
+ @content;
+ }
}
- @else if $rfs-font-size-unit == px {
- $rfs-static: #{$fs}px#{$rfs-suffix};
+ }
+ @else {
+ @if $rfs-class == disable and $rfs-mode == min-media-query {
+ .disable-rfs &,
+ &.disable-rfs {
+ @content;
+ }
+ }
+ @include _rfs-media-query () {
+ @content;
+ }
+ }
+}
+
+// Helper function to get the formatted non-responsive value
+@function rfs-value($values) {
+ // Convert to list
+ $values: if(type-of($values) != list, ($values,), $values);
+
+ $val: "";
+
+ // Loop over each value and calculate value
+ @each $value in $values {
+ @if $value == 0 {
+ $val: $val + " 0";
}
@else {
- @error "`#{$rfs-font-size-unit}` is not a valid unit for $rfs-font-size-unit. Use `px` or `rem`.";
+ // Cache $value unit
+ $unit: if(type-of($value) == "number", unit($value), false);
+
+ @if $unit == px {
+ // Convert to rem if needed
+ $val: $val + " " + if($rfs-unit == rem, #{divide($value, $value * 0 + $rfs-rem-value)}rem, $value);
+ }
+ @else if $unit == rem {
+ // Convert to px if needed
+ $val: $val + " " + if($rfs-unit == px, #{divide($value, $value * 0 + 1) * $rfs-rem-value}px, $value);
+ } @else {
+ // If $value isn't a number (like inherit) or $value has a unit (not px or rem, like 1.5em) or $ is 0, just print the value
+ $val: $val + " " + $value;
+ }
}
+ }
+
+ // Remove first space
+ @return unquote(str-slice($val, 2));
+}
- // Only add media query if font-size is bigger as the minimum font-size
- // If $rfs-factor == 1, no rescaling will take place
- @if $fs > $rfs-base-font-size and $enable-responsive-font-sizes {
- $min-width: null;
- $variable-unit: null;
+// Helper function to get the responsive value calculated by RFS
+@function rfs-fluid-value($values) {
+ // Convert to list
+ $values: if(type-of($values) != list, ($values,), $values);
+
+ $val: "";
+
+ // Loop over each value and calculate value
+ @each $value in $values {
+ @if $value == 0 {
+ $val: $val + " 0";
+ } @else {
+ // Cache $value unit
+ $unit: if(type-of($value) == "number", unit($value), false);
+
+ // If $value isn't a number (like inherit) or $value has a unit (not px or rem, like 1.5em) or $ is 0, just print the value
+ @if not $unit or $unit != px and $unit != rem {
+ $val: $val + " " + $value;
+ } @else {
+ // Remove unit from $value for calculations
+ $value: divide($value, $value * 0 + if($unit == px, 1, divide(1, $rfs-rem-value)));
+
+ // Only add the media query if the value is greater than the minimum value
+ @if abs($value) <= $rfs-base-value or not $enable-rfs {
+ $val: $val + " " + if($rfs-unit == rem, #{divide($value, $rfs-rem-value)}rem, #{$value}px);
+ }
+ @else {
+ // Calculate the minimum value
+ $value-min: $rfs-base-value + divide(abs($value) - $rfs-base-value, $rfs-factor);
- // Calculate minimum font-size for given font-size
- $fs-min: $rfs-base-font-size + ($fs - $rfs-base-font-size) / $rfs-factor;
+ // Calculate difference between $value and the minimum value
+ $value-diff: abs($value) - $value-min;
- // Calculate difference between given font-size and minimum font-size for given font-size
- $fs-diff: $fs - $fs-min;
+ // Base value formatting
+ $min-width: if($rfs-unit == rem, #{divide($value-min, $rfs-rem-value)}rem, #{$value-min}px);
- // Base font-size formatting
- // No need to check if the unit is valid, because we did that before
- $min-width: if($rfs-font-size-unit == rem, #{$fs-min / $rfs-rem-value}rem, #{$fs-min}px);
+ // Use negative value if needed
+ $min-width: if($value < 0, -$min-width, $min-width);
- // If two-dimensional, use smallest of screen width and height
- $variable-unit: if($rfs-two-dimensional, vmin, vw);
+ // Use `vmin` if two-dimensional is enabled
+ $variable-unit: if($rfs-two-dimensional, vmin, vw);
- // Calculate the variable width between 0 and $rfs-breakpoint
- $variable-width: #{$fs-diff * 100 / $rfs-breakpoint}#{$variable-unit};
+ // Calculate the variable width between 0 and $rfs-breakpoint
+ $variable-width: #{divide($value-diff * 100, $rfs-breakpoint)}#{$variable-unit};
- // Set the calculated font-size.
- $rfs-fluid: calc(#{$min-width} + #{$variable-width}) #{$rfs-suffix};
+ // Return the calculated value
+ $val: $val + " calc(" + $min-width + if($value < 0, " - ", " + ") + $variable-width + ")";
+ }
+ }
}
+ }
- // Rendering
- @if $rfs-fluid == null {
- // Only render static font-size if no fluid font-size is available
- font-size: $rfs-static;
+ // Remove first space
+ @return unquote(str-slice($val, 2));
+}
+
+// RFS mixin
+@mixin rfs($values, $property: font-size) {
+ @if $values != null {
+ $val: rfs-value($values);
+ $fluid-val: rfs-fluid-value($values);
+
+ // Do not print the media query if responsive & non-responsive values are the same
+ @if $val == $fluid-val {
+ #{$property}: $val;
}
@else {
- $mq-value: null;
-
- // RFS breakpoint formatting
- @if $rfs-breakpoint-unit == em or $rfs-breakpoint-unit == rem {
- $mq-value: #{$rfs-breakpoint / $rfs-rem-value}#{$rfs-breakpoint-unit};
- }
- @else if $rfs-breakpoint-unit == px {
- $mq-value: #{$rfs-breakpoint}px;
- }
- @else {
- @error "`#{$rfs-breakpoint-unit}` is not a valid unit for $rfs-breakpoint-unit. Use `px`, `em` or `rem`.";
- }
+ @include _rfs-rule () {
+ #{$property}: if($rfs-mode == max-media-query, $val, $fluid-val);
- @if $rfs-class == "disable" {
- // Adding an extra class increases specificity,
- // which prevents the media query to override the font size
- &,
- .disable-responsive-font-size &,
- &.disable-responsive-font-size {
- font-size: $rfs-static;
- }
- }
- @else {
- font-size: $rfs-static;
+ // Include safari iframe resize fix if needed
+ min-width: if($rfs-safari-iframe-resize-bug-fix, (0 * 1vw), null);
}
- @if $rfs-two-dimensional {
- @media (max-width: #{$mq-value}), (max-height: #{$mq-value}) {
- @if $rfs-class == "enable" {
- .enable-responsive-font-size &,
- &.enable-responsive-font-size {
- font-size: $rfs-fluid;
- }
- }
- @else {
- font-size: $rfs-fluid;
- }
-
- @if $rfs-safari-iframe-resize-bug-fix {
- // stylelint-disable-next-line length-zero-no-unit
- min-width: 0vw;
- }
- }
- }
- @else {
- @media (max-width: #{$mq-value}) {
- @if $rfs-class == "enable" {
- .enable-responsive-font-size &,
- &.enable-responsive-font-size {
- font-size: $rfs-fluid;
- }
- }
- @else {
- font-size: $rfs-fluid;
- }
-
- @if $rfs-safari-iframe-resize-bug-fix {
- // stylelint-disable-next-line length-zero-no-unit
- min-width: 0vw;
- }
- }
+ @include _rfs-media-query-rule () {
+ #{$property}: if($rfs-mode == max-media-query, $fluid-val, $val);
}
}
}
}
-// The font-size & responsive-font-size mixin uses RFS to rescale font sizes
-@mixin font-size($fs, $important: false) {
- @include rfs($fs, $important);
+// Shorthand helper mixins
+@mixin font-size($value) {
+ @include rfs($value);
+}
+
+@mixin padding($value) {
+ @include rfs($value, padding);
+}
+
+@mixin padding-top($value) {
+ @include rfs($value, padding-top);
+}
+
+@mixin padding-right($value) {
+ @include rfs($value, padding-right);
+}
+
+@mixin padding-bottom($value) {
+ @include rfs($value, padding-bottom);
+}
+
+@mixin padding-left($value) {
+ @include rfs($value, padding-left);
+}
+
+@mixin margin($value) {
+ @include rfs($value, margin);
+}
+
+@mixin margin-top($value) {
+ @include rfs($value, margin-top);
+}
+
+@mixin margin-right($value) {
+ @include rfs($value, margin-right);
+}
+
+@mixin margin-bottom($value) {
+ @include rfs($value, margin-bottom);
}
-@mixin responsive-font-size($fs, $important: false) {
- @include rfs($fs, $important);
+@mixin margin-left($value) {
+ @include rfs($value, margin-left);
}
diff --git a/assets/scss/components/_call.scss b/assets/scss/components/_call.scss
index 11b967ea..9944d81f 100644
--- a/assets/scss/components/_call.scss
+++ b/assets/scss/components/_call.scss
@@ -24,7 +24,6 @@
.call-box-bottom {
flex: auto;
padding: 20px;
- border-top: 1px solid darken($white-offset, 5%);
@include media-breakpoint-up(sm) {
flex: 0 0 auto;
border: none;
diff --git a/assets/scss/style.scss b/assets/scss/style.scss
index 7f3a0687..23fdd46e 100755
--- a/assets/scss/style.scss
+++ b/assets/scss/style.scss
@@ -1,3 +1,4 @@
+// Any variables that need to use Hugo configuration need to be declared here
// Colors
$primary: {{ .Site.Params.colors.primary | default "#f24088" }};
$black: {{ .Site.Params.colors.black | default "#2f2f41" }};
@@ -9,24 +10,16 @@ $grey: {{ .Site.Params.colors.grey | default "#5C5A5A" }};
$font-family-base: {{ .Site.Params.fonts.base }}, Helvetica, Arial, sans-serif, -apple-system;
$font-family-heading: {{ .Site.Params.fonts.heading }}, serif, -apple-system;
-// Links
-$link-color: $primary;
-$link-decoration: none;
-$link-hover-decoration: underline;
-// Footer
-$footer-background-color: $primary;
-$footer-text-color: $white;
-$sub-footer-background-color: darken($primary, 10%);
-$sub-footer-text-color: $white;
+// Variables - Override Bootstrap variables and set your own here
+@import 'variables';
// Bootstrap
-@import 'bootstrap-variables';
@import 'bootstrap/bootstrap-reboot';
@import 'bootstrap/bootstrap-grid';
+@import 'bootstrap/bootstrap-utilities';
// @import 'bootstrap/bootstrap'; // Uncomment this line to import the entire Bootstrap library
-
// Libraries
@import 'libraries/hamburgers/hamburgers';
diff --git a/exampleSite/content/about.md b/exampleSite/content/about.md
index dc9df323..e0dd3f9f 100644
--- a/exampleSite/content/about.md
+++ b/exampleSite/content/about.md
@@ -7,6 +7,8 @@ Lorem markdownum aequalis strigis. _Saetigeri iubeas_, vultu huic alvum nondum
de obside ut laniavit arbor palmis, cum quin. Rupes vetat videndo, armigerae
crimen habet Priamum nec.
+
+
## Ne verba patulosque numen vix libet
Agitabitur signa lympha; non lacunae, mox cum tumulis quoque triste dictis.
diff --git a/exampleSite/content/services/accounting.md b/exampleSite/content/services/accounting.md
index e8aae80b..f6a5248d 100644
--- a/exampleSite/content/services/accounting.md
+++ b/exampleSite/content/services/accounting.md
@@ -7,6 +7,7 @@ weight: 1
---
Financial accounting (or financial accountancy) is the field of accounting concerned with the **summary, analysis and reporting** of financial transactions related to a business.
+
diff --git a/exampleSite/content/services/business-advisory.md b/exampleSite/content/services/business-advisory.md
index 5337f667..99d5e8ae 100644
--- a/exampleSite/content/services/business-advisory.md
+++ b/exampleSite/content/services/business-advisory.md
@@ -4,58 +4,80 @@ date: 2018-11-28T15:14:39+10:00
featured: true
draft: false
weight: 2
+summary: "Business Advisory is a specialized account service that offers expert guidance and strategic support to businesses."
---
-Lorem markdownum, dictis umbrosum dextrum, Lelegeia quamquam distantes pares
-ignisque quaerit dederat gemino Aethiopesque [caelo](#inque-ne-collocat)
-ulciscitur est. Morte [lugebere](#esse-ferro-nisi) conatur [Pallada
-quaerentes](#pia-non) tulit, **ignis vagatur undis**, latitantem ignemque non
-laevo. Terras seu favoni tectas movit hunc motuque damno tutoque quattuor. Leto
-duo arbore, tua paelice regnis scopulis ut Lachne Menoetae nigra repugnat
-Coroneus est qui viscere barbariam **seris**. Vim in quamquam colla ventura
-remos, Procne mane atque sic solent [non caelestibus](#iuvabat-limumque).
-
-## Inter pectore totidem
-
-Presserat [transitque inde](#diversa-iam-inter). Vel montes tum cohors Tityos
-lassavit nihil oracula exiguo ligatis.
-
-## Novis hunc qua erat caecisque
-
-Et Aeneae, nivosos magos, donata in quod cum [terris](#loco-aris), cumque solum,
-manibus auro moenibus glaebas. Manus incaluere. Nunc audiat teneat dextra,
-finivit cui male venit moves! Senior et niger tepido parenti fuit, in ponit
-spectemur et opto speret. Ferum Neptunus tergore.
-
-Nunc erant super: sacra cingebant tandem: rogabam terras, ripa. Cum est scire
-est increpat, leaena ipsa venae me minus casusve tauri. Poscis sacrorum
-_congerit currus_ Hippotades poenas. Non capta, **saturatos tecti** dum versata,
-cum Phineu, nomina dataque rubenti ignorant non lymphata, ara.
-
-## Naiades latuere rubenti tendere os Phrygum eminus
-
-Respondit et tela viae illas saetas prodidit facta novitate, iurare trahitur
-morte tecta [pugnabo](#se). Est age, paelicis vestigia tremor capillis carere
-formae ne ait modo. Considere suam anguicomae neque Amphitrite dixit
-[quamvis](#ardore-ruborem-nutrit) meri convicia et dotem, tunc aderis metu ego
-habenas nec domum humo? Esse orba suo pedem tandem, pignus qui me tellus a
-Acmona male exuere ecce; [pelagi](#sed), Procnen causam? Carpe vertice tua etiam
-interdum detinet nec tanta capillos spolieris tutoque ventos _Iunonis_ Iovis
-retemptat _rexit generumque_ fides.
-
-## Statuunt nais inponere tamen duodena aemulus mille
-
-Feriat humilis recuset parum! Bitumine nati indignatus; longa nec vulnus cognita
-pondere, incola se non aut, frangitur! Cavis resoluta: ilia ardeat terraeque
-nova, adhuc! Ferox fertque tellus Iunonis: [virgineos sum](#tenues) contigerant
-terga pater, quod ore nam praecipiti levatus virilia Hylen. Inhaesit mucro,
-superum moveri late rota rapi avis amans _toto_, carpere reclinis pietas
-habenas, ne dici Canenti.
-
-1. Induruit huc grave simili
-2. Praecincti natos
-3. Ad dedit parentem
-4. Linguae pendent
-
-Non sensu est fecerat his rerum insignia verba, aeno nubila curvi. Tutus sibi
-isset; nec non ille vero abstulit, ite est. Digitoque ora ego aethera, comas?
+Business Advisory is a specialized account service that offers expert guidance and strategic support to businesses. Through financial management, risk assessment, and performance improvement, this service provides businesses with the necessary tools and insights to optimize their operations and drive success.
+
+
+
+# Objectives
+
+Financial accounting and financial reporting are often used as synonyms.
+
+1. According to International Financial Reporting Standards: the objective of financial reporting is:
+2. To provide financial information that is useful to existing and potential investors, lenders and other creditors in making decisions about providing resources to the reporting entity.
+3. According to the European Accounting Association:
+
+## Relevance
+
+Relevance is the capacity of the financial information to influence the decision of its users. The ingredients of relevance are the predictive value and confirmatory value. Materiality is a sub-quality of relevance.
+
+> The ingredients of relevance are the predictive value and confirmatory value.
+
+Information is considered material if its omission or misstatement could influence the economic decisions of users taken on the basis of the financial statements.
+
+## Faithful Representation
+
+Faithful representation means that the actual effects of the transactions shall be properly accounted for and reported in the financial statements. The words and numbers must match what really happened in the transaction. The ingredients of faithful representation are completeness, neutrality and free from error.
+
+## Enhancing Qualitative Characteristics
+
+### Verifiability
+Verifiability implies consensus between the different knowledgeable and independent users of financial information. Such information must be supported by sufficient evidence to follow the principle of objectivity.
+
+### Comparability
+Comparability is the uniform application of accounting methods across entities in the same industry. The principle of consistency is under comparability. Consistency is the uniform application of accounting across points in time within an entity.
+
+### Understandability
+Understandability means that accounting reports should be expressed as clearly as possible and should be understood by those to whom the information is relevant.
+Timeliness: Timeliness implies that financial information must be presented to the users before a decision is to be made.
+
+---
+
+## Statement of cash flows
+The statement of cash flows considers the inputs and outputs in concrete cash within a stated period. The general template of a cash flow statement is as follows: Cash Inflow - Cash Outflow + Opening Balance = Closing Balance
+
+Cash Inflow | Outflow | Opening Balance
+--- | --- | ---
+*Monday* | `Tuesday` | **Wednesday**
+1 | 2 | 3
+
+
+**Example 1:** in the beginning of September, Ellen started out with $5 in her bank account. During that same month, Ellen borrowed $20 from Tom. At the end of the month, Ellen bought a pair of shoes for $7. Ellen's cash flow statement for the month of September looks like this:
+
+* Cash inflow: $20
+* Cash outflow:$7
+* Opening balance: $5
+* Closing balance: $20 – $7 + $5 = $18
+
+**Example 2:** in the beginning of June, WikiTables, a company that buys and resells tables, sold 2 tables. They'd originally bought the tables for $25 each, and sold them at a price of $50 per table. The first table was paid out in cash however the second one was bought in credit terms. WikiTables' cash flow statement for the month of June looks like this:
+
+> **Important:** the cash flow statement only considers the exchange of actual cash, and ignores what the person in question owes or is owed.
+
+## Statement of financial position (balance sheet)
+The balance sheet is the financial statement showing a firm's assets, liabilities and equity (capital) at a set point in time, usually the end of the fiscal year reported on the accompanying income statement.
+
+- **fixed assets**
+ - property
+ - building
+ - equipment (such as factory machinery)
+- **intangible assets**
+ - copyrights
+ - trademarks
+ - patents
+ - pending
+ - international
+- goodwill
+
+Owner's equity, sometimes referred to as net assets, is represented differently depending on the type of business ownership. Business ownership can be in the form of a sole proprietorship, partnership, or a corporation. For a corporation, the owner's equity portion usually shows common stock, and retained earnings (earnings kept in the company). Retained earnings come from the retained earnings statement, prepared prior to the balance sheet.
\ No newline at end of file
diff --git a/exampleSite/content/services/business-sales.md b/exampleSite/content/services/business-sales.md
index 50bc996d..44b4f867 100644
--- a/exampleSite/content/services/business-sales.md
+++ b/exampleSite/content/services/business-sales.md
@@ -6,45 +6,80 @@ draft: false
weight: 3
---
-Cyanee nec pedicis positi. Esse et diem forte quoque et ieiunia
-vixque dixit negari _ullis stamina_: trahit. Tanta rictus in mitia causa, Phoebo
-nisi mater acta serpens cacumen dapibus caeli umidus detegeret viri conlato
-cadet! [Ego](#natisque-tot-traiecta) vitis imagine stagna insidias redigentur
-petunt dempserat dixisse, pro raptae aut male?
-
-- Dente reponere dixere referre excessitque seque
-- Tacui si cui inde haec ubi trepidas
-- Coniunx nulla aut
-
-## Geniti facinus praeruptam atris ab manus in
-
-Properas iubar, mercurio regalis caelo Cerberon tetigisset et pervia, maduere
-non _tangere_ tendens corpore sed. Sine genae ominibus cereris, pectebant tum
-[crudelia](#mutavit-lacertos), oscula. Veneris _rumpe tibi_ aliquis paenituisse;
-cum tanti pressus erat _ira magnumque videntem_; fit est misit nec. Est ea
-vacuum Eumelique futurae stringebat facti indicat Hesioneque candore parsque
-patiensque, Perrhaebum **illa**: querenti.
-
-1. Deum sibi poma lacuque fateor
-2. Nisi vultibus adspicio totosque gladios a novatrix
-3. Regna ducebat
-
-_Fuit_ eurus promissaque. Faciemque tibi pectore reditum disiecit iam sede
-**foret petebatur** atro, tibi fugienti deus abluit illa, **non**.
-
-## Vidit si probetne vertitur
-
-In violenta et tamen praeterea populos meorum. Nos carissime Fortuna tellus aevo
-vestigia summae? Ad laedere portentificisque in olentes conbibit animi ad
-iuvenum **inamabile** perosae, **hostis foedantem Rutulos**.
-
-1. Augusta exstinctus dempto repperit ut quati enim
-2. Quae illo sine fatorum
-3. Sub ut Hyadasque specus terraeque coniunx vix
-4. Voce addita est haec
-5. Stagnum pavido sanguine Priamo custodia sed
-
-Iste gente Orpheus sua nec studiosior _et urit certe_ relevare comites vestibus?
-Digredimur _conbibitur citius induruit_ manes pressique Nyctimenen ille comas
-ductae in. Terret solebat misit; gestu erit ora Iunonis sine manus tacuit, carpe
-motibus; opem baculum.
+Business Sales refers to the process of selling a company or its assets to interested buyers, often involving the transfer of ownership and control.
+
+It entails various activities such as valuing the business, identifying potential buyers, negotiating the terms of the sale, conducting due diligence, and finalizing the transaction.
+
+
+
+
+# Objectives
+
+Financial accounting and financial reporting are often used as synonyms.
+
+1. According to International Financial Reporting Standards: the objective of financial reporting is:
+2. To provide financial information that is useful to existing and potential investors, lenders and other creditors in making decisions about providing resources to the reporting entity.
+3. According to the European Accounting Association:
+
+## Relevance
+
+Relevance is the capacity of the financial information to influence the decision of its users. The ingredients of relevance are the predictive value and confirmatory value. Materiality is a sub-quality of relevance.
+
+> The ingredients of relevance are the predictive value and confirmatory value.
+
+Information is considered material if its omission or misstatement could influence the economic decisions of users taken on the basis of the financial statements.
+
+## Faithful Representation
+
+Faithful representation means that the actual effects of the transactions shall be properly accounted for and reported in the financial statements. The words and numbers must match what really happened in the transaction. The ingredients of faithful representation are completeness, neutrality and free from error.
+
+## Enhancing Qualitative Characteristics
+
+### Verifiability
+Verifiability implies consensus between the different knowledgeable and independent users of financial information. Such information must be supported by sufficient evidence to follow the principle of objectivity.
+
+### Comparability
+Comparability is the uniform application of accounting methods across entities in the same industry. The principle of consistency is under comparability. Consistency is the uniform application of accounting across points in time within an entity.
+
+### Understandability
+Understandability means that accounting reports should be expressed as clearly as possible and should be understood by those to whom the information is relevant.
+Timeliness: Timeliness implies that financial information must be presented to the users before a decision is to be made.
+
+---
+
+## Statement of cash flows
+The statement of cash flows considers the inputs and outputs in concrete cash within a stated period. The general template of a cash flow statement is as follows: Cash Inflow - Cash Outflow + Opening Balance = Closing Balance
+
+Cash Inflow | Outflow | Opening Balance
+--- | --- | ---
+*Monday* | `Tuesday` | **Wednesday**
+1 | 2 | 3
+
+
+**Example 1:** in the beginning of September, Ellen started out with $5 in her bank account. During that same month, Ellen borrowed $20 from Tom. At the end of the month, Ellen bought a pair of shoes for $7. Ellen's cash flow statement for the month of September looks like this:
+
+* Cash inflow: $20
+* Cash outflow:$7
+* Opening balance: $5
+* Closing balance: $20 – $7 + $5 = $18
+
+**Example 2:** in the beginning of June, WikiTables, a company that buys and resells tables, sold 2 tables. They'd originally bought the tables for $25 each, and sold them at a price of $50 per table. The first table was paid out in cash however the second one was bought in credit terms. WikiTables' cash flow statement for the month of June looks like this:
+
+> **Important:** the cash flow statement only considers the exchange of actual cash, and ignores what the person in question owes or is owed.
+
+## Statement of financial position (balance sheet)
+The balance sheet is the financial statement showing a firm's assets, liabilities and equity (capital) at a set point in time, usually the end of the fiscal year reported on the accompanying income statement.
+
+- **fixed assets**
+ - property
+ - building
+ - equipment (such as factory machinery)
+- **intangible assets**
+ - copyrights
+ - trademarks
+ - patents
+ - pending
+ - international
+- goodwill
+
+Owner's equity, sometimes referred to as net assets, is represented differently depending on the type of business ownership. Business ownership can be in the form of a sole proprietorship, partnership, or a corporation. For a corporation, the owner's equity portion usually shows common stock, and retained earnings (earnings kept in the company). Retained earnings come from the retained earnings statement, prepared prior to the balance sheet.
\ No newline at end of file
diff --git a/exampleSite/content/services/mergers.md b/exampleSite/content/services/mergers.md
index ea9ac2bb..4600f0af 100644
--- a/exampleSite/content/services/mergers.md
+++ b/exampleSite/content/services/mergers.md
@@ -6,48 +6,78 @@ draft: false
weight: 4
---
-Lorem markdownum aequalis strigis. Saetigeri iubeas, vultu huic alvum nondum
-de obside ut laniavit arbor palmis, cum quin. Rupes vetat videndo, armigerae
-crimen habet Priamum nec.
-
-## Ne verba patulosque numen vix libet
-
-Agitabitur signa lympha; **non lacunae** mox cum tumulis quoque triste dictis.
-Ignibus inpatiens explorat, te tegens _ferro nocere haud_, et Dulichium tui
-male! Quo sed [fuit flexit et](#vexant-achivi) hic die solido, gloria?
-
-1. Cum det dixit Parcarum qui spemque est
-2. Exit ex huic
-3. Quod consiste agitataque claustraque vicina videt lacertis
-4. Loquor videt
-5. Ardua non igne caelesti coniugis cognovi diversorum
-6. Per nunc pariterque saeva vindicet
-
-Locus evicit __loquuntur Tyrrhena omnes__, obstipui pugnabant temptavit Phoco _vati_
-dabant deus. Memorata haberet sepulcrales gentisque dum sic, in flumina templa!
-Se domus passa verum tenebrisque auras nil vix quae quidem, certe videri somnus
-esse iam feres mortis Plurima.
-
-## Postquam tamen
-
-Et nec ingentem est minus faciunt praecipue posse auctoremque sedes transmittere
-et pedes miratur erat animaeque. Tellus admonuit humanam funes, sagittis et
-licet! Inserui quamvis Clymeni.
-
-- Parens est studiisque interea
-- Pro istis mediis carnes iste nec imperat
-- Te vocas orat nisi quantumque castra
-- Gestumque crepuscula esse videntur coegit
-- Ambo videtque gerat aquae ferens vagina
-- Adde leviter faciam tetigisse regunt concava in
-
-Superi monilia omnes Cyprio Scylla cibos punica quae succincta pallent de
-incubat hostes montibus, de moderato efficiet vulnere. Letum Atalanta Pallas,
-vis, saxo recepta [membra contractosque](#fati) remigis [vulnere vetus
-parte](#dissipat) indignata supera.
-
-Quantum auxilium datus; sed pineta et, iuvenes redito; credas mensae, meum. Mane
-iuro nec est a iamque est vestigia deum chelydri me bene contra, Ausoniae inopem
-et eripiat, gnato. Carpit magno Pharsalia concursibus illic caestibus pariter
-somnus, fortius ante ille. Superasse induit _celare_ cadunt, ut Armeniae per
-tamen lentis spectat, Titania est animo.
+Mergers involve the combination of two or more companies into a single entity, typically aimed at achieving synergies, expanding market presence, or enhancing competitive advantages.
+
+
+
+
+# Objectives
+
+Financial accounting and financial reporting are often used as synonyms.
+
+1. According to International Financial Reporting Standards: the objective of financial reporting is:
+2. To provide financial information that is useful to existing and potential investors, lenders and other creditors in making decisions about providing resources to the reporting entity.
+3. According to the European Accounting Association:
+
+## Relevance
+
+Relevance is the capacity of the financial information to influence the decision of its users. The ingredients of relevance are the predictive value and confirmatory value. Materiality is a sub-quality of relevance.
+
+> The ingredients of relevance are the predictive value and confirmatory value.
+
+Information is considered material if its omission or misstatement could influence the economic decisions of users taken on the basis of the financial statements.
+
+## Faithful Representation
+
+Faithful representation means that the actual effects of the transactions shall be properly accounted for and reported in the financial statements. The words and numbers must match what really happened in the transaction. The ingredients of faithful representation are completeness, neutrality and free from error.
+
+## Enhancing Qualitative Characteristics
+
+### Verifiability
+Verifiability implies consensus between the different knowledgeable and independent users of financial information. Such information must be supported by sufficient evidence to follow the principle of objectivity.
+
+### Comparability
+Comparability is the uniform application of accounting methods across entities in the same industry. The principle of consistency is under comparability. Consistency is the uniform application of accounting across points in time within an entity.
+
+### Understandability
+Understandability means that accounting reports should be expressed as clearly as possible and should be understood by those to whom the information is relevant.
+Timeliness: Timeliness implies that financial information must be presented to the users before a decision is to be made.
+
+---
+
+## Statement of cash flows
+The statement of cash flows considers the inputs and outputs in concrete cash within a stated period. The general template of a cash flow statement is as follows: Cash Inflow - Cash Outflow + Opening Balance = Closing Balance
+
+Cash Inflow | Outflow | Opening Balance
+--- | --- | ---
+*Monday* | `Tuesday` | **Wednesday**
+1 | 2 | 3
+
+
+**Example 1:** in the beginning of September, Ellen started out with $5 in her bank account. During that same month, Ellen borrowed $20 from Tom. At the end of the month, Ellen bought a pair of shoes for $7. Ellen's cash flow statement for the month of September looks like this:
+
+* Cash inflow: $20
+* Cash outflow:$7
+* Opening balance: $5
+* Closing balance: $20 – $7 + $5 = $18
+
+**Example 2:** in the beginning of June, WikiTables, a company that buys and resells tables, sold 2 tables. They'd originally bought the tables for $25 each, and sold them at a price of $50 per table. The first table was paid out in cash however the second one was bought in credit terms. WikiTables' cash flow statement for the month of June looks like this:
+
+> **Important:** the cash flow statement only considers the exchange of actual cash, and ignores what the person in question owes or is owed.
+
+## Statement of financial position (balance sheet)
+The balance sheet is the financial statement showing a firm's assets, liabilities and equity (capital) at a set point in time, usually the end of the fiscal year reported on the accompanying income statement.
+
+- **fixed assets**
+ - property
+ - building
+ - equipment (such as factory machinery)
+- **intangible assets**
+ - copyrights
+ - trademarks
+ - patents
+ - pending
+ - international
+- goodwill
+
+Owner's equity, sometimes referred to as net assets, is represented differently depending on the type of business ownership. Business ownership can be in the form of a sole proprietorship, partnership, or a corporation. For a corporation, the owner's equity portion usually shows common stock, and retained earnings (earnings kept in the company). Retained earnings come from the retained earnings statement, prepared prior to the balance sheet.
\ No newline at end of file
diff --git a/exampleSite/content/services/superannuation.md b/exampleSite/content/services/superannuation.md
index 6a435f63..61015b68 100644
--- a/exampleSite/content/services/superannuation.md
+++ b/exampleSite/content/services/superannuation.md
@@ -6,48 +6,78 @@ draft: false
weight: 5
---
-Lorem markdownum aequalis strigis. Saetigeri iubeas, vultu huic alvum nondum
-de obside ut laniavit arbor palmis, cum quin. Rupes vetat videndo, armigerae
-crimen habet Priamum nec.
-
-## Ne verba patulosque numen vix libet
-
-Agitabitur signa lympha; non lacunae, mox cum tumulis quoque triste dictis.
-Ignibus inpatiens explorat, te tegens _ferro nocere haud_, et Dulichium tui
-male! Quo sed [fuit flexit et](#vexant-achivi) hic die solido, gloria?
-
-1. Cum det dixit Parcarum qui spemque est
-2. Exit ex huic
-3. Quod consiste agitataque claustraque vicina videt lacertis
-4. Loquor videt
-5. Ardua non igne caelesti coniugis cognovi diversorum
-6. Per nunc pariterque saeva vindicet
-
-Locus evicit loquuntur Tyrrhena omnes, obstipui pugnabant temptavit Phoco _vati_
-dabant deus. Memorata haberet sepulcrales gentisque dum sic, in flumina templa!
-Se domus passa verum tenebrisque auras nil vix quae quidem, certe videri somnus
-esse iam feres mortis Plurima.
-
-## Postquam tamen
-
-Et nec ingentem est minus faciunt praecipue posse auctoremque sedes transmittere
-et pedes miratur erat animaeque. Tellus admonuit humanam funes, sagittis et
-licet! Inserui quamvis Clymeni.
-
-- Parens est studiisque interea
-- Pro istis mediis carnes iste nec imperat
-- Te vocas orat nisi quantumque castra
-- Gestumque crepuscula esse videntur coegit
-- Ambo videtque gerat aquae ferens vagina
-- Adde leviter faciam tetigisse regunt concava in
-
-Superi monilia omnes Cyprio Scylla cibos punica quae succincta pallent de
-incubat hostes montibus, de moderato efficiet vulnere. Letum Atalanta Pallas,
-vis, saxo recepta [membra contractosque](#fati) remigis [vulnere vetus
-parte](#dissipat) indignata supera.
-
-Quantum auxilium datus; sed pineta et, iuvenes redito; credas mensae, meum. Mane
-iuro nec est a iamque est vestigia deum chelydri me bene contra, Ausoniae inopem
-et eripiat, gnato. Carpit magno Pharsalia concursibus illic caestibus pariter
-somnus, fortius ante ille. Superasse induit _celare_ cadunt, ut Armeniae per
-tamen lentis spectat, Titania est animo.
+We provide expert guidance on setting up and structuring superannuation funds, ensuring compliance with regulatory requirements, and implementing tax-efficient strategies.
+
+
+
+
+# Objectives
+
+Financial accounting and financial reporting are often used as synonyms.
+
+1. According to International Financial Reporting Standards: the objective of financial reporting is:
+2. To provide financial information that is useful to existing and potential investors, lenders and other creditors in making decisions about providing resources to the reporting entity.
+3. According to the European Accounting Association:
+
+## Relevance
+
+Relevance is the capacity of the financial information to influence the decision of its users. The ingredients of relevance are the predictive value and confirmatory value. Materiality is a sub-quality of relevance.
+
+> The ingredients of relevance are the predictive value and confirmatory value.
+
+Information is considered material if its omission or misstatement could influence the economic decisions of users taken on the basis of the financial statements.
+
+## Faithful Representation
+
+Faithful representation means that the actual effects of the transactions shall be properly accounted for and reported in the financial statements. The words and numbers must match what really happened in the transaction. The ingredients of faithful representation are completeness, neutrality and free from error.
+
+## Enhancing Qualitative Characteristics
+
+### Verifiability
+Verifiability implies consensus between the different knowledgeable and independent users of financial information. Such information must be supported by sufficient evidence to follow the principle of objectivity.
+
+### Comparability
+Comparability is the uniform application of accounting methods across entities in the same industry. The principle of consistency is under comparability. Consistency is the uniform application of accounting across points in time within an entity.
+
+### Understandability
+Understandability means that accounting reports should be expressed as clearly as possible and should be understood by those to whom the information is relevant.
+Timeliness: Timeliness implies that financial information must be presented to the users before a decision is to be made.
+
+---
+
+## Statement of cash flows
+The statement of cash flows considers the inputs and outputs in concrete cash within a stated period. The general template of a cash flow statement is as follows: Cash Inflow - Cash Outflow + Opening Balance = Closing Balance
+
+Cash Inflow | Outflow | Opening Balance
+--- | --- | ---
+*Monday* | `Tuesday` | **Wednesday**
+1 | 2 | 3
+
+
+**Example 1:** in the beginning of September, Ellen started out with $5 in her bank account. During that same month, Ellen borrowed $20 from Tom. At the end of the month, Ellen bought a pair of shoes for $7. Ellen's cash flow statement for the month of September looks like this:
+
+* Cash inflow: $20
+* Cash outflow:$7
+* Opening balance: $5
+* Closing balance: $20 – $7 + $5 = $18
+
+**Example 2:** in the beginning of June, WikiTables, a company that buys and resells tables, sold 2 tables. They'd originally bought the tables for $25 each, and sold them at a price of $50 per table. The first table was paid out in cash however the second one was bought in credit terms. WikiTables' cash flow statement for the month of June looks like this:
+
+> **Important:** the cash flow statement only considers the exchange of actual cash, and ignores what the person in question owes or is owed.
+
+## Statement of financial position (balance sheet)
+The balance sheet is the financial statement showing a firm's assets, liabilities and equity (capital) at a set point in time, usually the end of the fiscal year reported on the accompanying income statement.
+
+- **fixed assets**
+ - property
+ - building
+ - equipment (such as factory machinery)
+- **intangible assets**
+ - copyrights
+ - trademarks
+ - patents
+ - pending
+ - international
+- goodwill
+
+Owner's equity, sometimes referred to as net assets, is represented differently depending on the type of business ownership. Business ownership can be in the form of a sole proprietorship, partnership, or a corporation. For a corporation, the owner's equity portion usually shows common stock, and retained earnings (earnings kept in the company). Retained earnings come from the retained earnings statement, prepared prior to the balance sheet.
\ No newline at end of file
diff --git a/exampleSite/content/services/tax-preperation.md b/exampleSite/content/services/tax-preperation.md
index c07aef05..5877b772 100644
--- a/exampleSite/content/services/tax-preperation.md
+++ b/exampleSite/content/services/tax-preperation.md
@@ -1,46 +1,83 @@
---
-title: "Tax Preperation"
+title: "Tax Preparation"
date: 2018-11-18T12:33:46+10:00
draft: false
featured: true
weight: 6
+summary: "Our tax preparation accounting service offers a reliable and efficient solution for individuals and businesses seeking expert assistance in managing their tax obligations."
---
-Lorem markdownum **Achaica revolutaque amore**, penitus puppes nec furit,
-clipeus fatetur, mira inter accedere. Dedit dum raptoresque Oete dolorem
-Cretaeas enim [ipse pectora excusat](#in-poscat) candentibus fertur? Furtiva
-Orontes Erysicthona dona, est per Achille viridi draconis cultis mota milia.
+Our tax preparation accounting service offers a reliable and efficient solution for individuals and businesses seeking expert assistance in managing their tax obligations. With our team of experienced accountants, we meticulously review financial records, analyze expenses, and navigate the complexities of tax laws to ensure accurate and compliant tax preparation.
-- Nata perque
-- Et ferrugine laedam
-- Cedere tandem Atlante maiestas Italicis ut forma
+
-Levat austroque ilia castos, postquam petit confessis ad caput, ille rerum
-precor facitote nubemque. Potuit Celadon Martem?
+# Objectives
-1. Imagine Assaracus victori petet femina mea haustos
-2. Sicaniam quibus agro magni
-3. In utque Troica pedum caelestia hunc tempto
-4. Gregibus certare tamen turbatque qui
+Financial accounting and financial reporting are often used as synonyms.
-## Patulis Veneris est expulit adversaque magnum mediaque
+1. According to International Financial Reporting Standards: the objective of financial reporting is:
+2. To provide financial information that is useful to existing and potential investors, lenders and other creditors in making decisions about providing resources to the reporting entity.
+3. According to the European Accounting Association:
-Omnis est signa cum nec inplevit vivit et insania Orpheu, an abit. Nimbi
-subversaque et micant suumque, tibi ipse; sed. **Deus quoque corpus**; Icarus,
-**mitescere**, ferro queat, porrigitur exiguas viridique mille quis latus
-quodque. Non una genuisse ullis efficiet ad corpore nunc mentesque praestant?
+## Relevance
-_Diduxit manibus_ anguis contraxit, suas et lacus nec soceri fores alis nec,
-nec! Data pater Perseu minanti animam operitur illa dolorem.
+Relevance is the capacity of the financial information to influence the decision of its users. The ingredients of relevance are the predictive value and confirmatory value. Materiality is a sub-quality of relevance.
-Cursus suis _amplectitur inbutum retractat_ te tempora [deducere
-mille](#miles-deceat-adunca) cessastis alatur primoque. Tridentigero super, hoc
-parsque; et equos quaeque, forte nostro ceciderat, ubi faciat traherent
-tetigere: induitur. Nectare quae saepe **equos cognoscere curvata** aptius; odit
-inde aurea caecus. Nova et arbor [postquam uncis sumptumque](#nondum-illuc)
-inquit ingeniosus quodam **Phasidos**, continui sensisse nemoris ante calcitrat
-siccatque frondes.
+> The ingredients of relevance are the predictive value and confirmatory value.
-Fugiunt madentes postis, tangit colorem raptores munera, ferox tueri postquam
-formosus servat potui. Luce ebur, pulcherrimus plus tradere! _Quam perque
-semper_?
+Information is considered material if its omission or misstatement could influence the economic decisions of users taken on the basis of the financial statements.
+
+## Faithful Representation
+
+Faithful representation means that the actual effects of the transactions shall be properly accounted for and reported in the financial statements. The words and numbers must match what really happened in the transaction. The ingredients of faithful representation are completeness, neutrality and free from error.
+
+## Enhancing Qualitative Characteristics
+
+### Verifiability
+Verifiability implies consensus between the different knowledgeable and independent users of financial information. Such information must be supported by sufficient evidence to follow the principle of objectivity.
+
+### Comparability
+Comparability is the uniform application of accounting methods across entities in the same industry. The principle of consistency is under comparability. Consistency is the uniform application of accounting across points in time within an entity.
+
+### Understandability
+Understandability means that accounting reports should be expressed as clearly as possible and should be understood by those to whom the information is relevant.
+Timeliness: Timeliness implies that financial information must be presented to the users before a decision is to be made.
+
+---
+
+## Statement of cash flows
+The statement of cash flows considers the inputs and outputs in concrete cash within a stated period. The general template of a cash flow statement is as follows: Cash Inflow - Cash Outflow + Opening Balance = Closing Balance
+
+Cash Inflow | Outflow | Opening Balance
+--- | --- | ---
+*Monday* | `Tuesday` | **Wednesday**
+1 | 2 | 3
+
+
+**Example 1:** in the beginning of September, Ellen started out with $5 in her bank account. During that same month, Ellen borrowed $20 from Tom. At the end of the month, Ellen bought a pair of shoes for $7. Ellen's cash flow statement for the month of September looks like this:
+
+* Cash inflow: $20
+* Cash outflow:$7
+* Opening balance: $5
+* Closing balance: $20 – $7 + $5 = $18
+
+**Example 2:** in the beginning of June, WikiTables, a company that buys and resells tables, sold 2 tables. They'd originally bought the tables for $25 each, and sold them at a price of $50 per table. The first table was paid out in cash however the second one was bought in credit terms. WikiTables' cash flow statement for the month of June looks like this:
+
+> **Important:** the cash flow statement only considers the exchange of actual cash, and ignores what the person in question owes or is owed.
+
+## Statement of financial position (balance sheet)
+The balance sheet is the financial statement showing a firm's assets, liabilities and equity (capital) at a set point in time, usually the end of the fiscal year reported on the accompanying income statement.
+
+- **fixed assets**
+ - property
+ - building
+ - equipment (such as factory machinery)
+- **intangible assets**
+ - copyrights
+ - trademarks
+ - patents
+ - pending
+ - international
+- goodwill
+
+Owner's equity, sometimes referred to as net assets, is represented differently depending on the type of business ownership. Business ownership can be in the form of a sole proprietorship, partnership, or a corporation. For a corporation, the owner's equity portion usually shows common stock, and retained earnings (earnings kept in the company). Retained earnings come from the retained earnings statement, prepared prior to the balance sheet.
\ No newline at end of file
diff --git a/exampleSite/content/team/_index.md b/exampleSite/content/team/_index.md
index 2e5c735f..8337db39 100644
--- a/exampleSite/content/team/_index.md
+++ b/exampleSite/content/team/_index.md
@@ -1,10 +1,10 @@
---
title: 'Team'
-intro_image: "images/team/smartworks-coworking-cW4lLTavU80-unsplash.jpg"
-intro_image_absolute: false
-intro_image_hide_on_mobile: false
+# intro_image: "images/smartworks-coworking-cW4lLTavU80-unsplash.jpg"
+# intro_image_absolute: false
+# intro_image_hide_on_mobile: false
---
# Meet The Team
-Our team of qualified accountants and financial consultants can help your business at any stage of it's growth.
+Our team of qualified accountants can help your business at any stage.
diff --git a/exampleSite/content/team/susan-shelton.md b/exampleSite/content/team/susan-shelton.md
deleted file mode 100644
index 8df0f5cb..00000000
--- a/exampleSite/content/team/susan-shelton.md
+++ /dev/null
@@ -1,10 +0,0 @@
----
-title: 'Susan Shelton'
-date: 2018-12-20T13:45:06+10:00
-draft: false
-image: 'images/team/cristian-newman-94319-unsplash.jpg'
-jobtitle: 'Developer'
-weight: 5
----
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Bibendum arcu vitae elementum curabitur vitae nunc sed. Tortor at risus viverra adipiscing at in.
diff --git a/exampleSite/static/images/team/smartworks-coworking-cW4lLTavU80-unsplash.jpg b/exampleSite/static/images/smartworks-coworking-cW4lLTavU80-unsplash.jpg
similarity index 100%
rename from exampleSite/static/images/team/smartworks-coworking-cW4lLTavU80-unsplash.jpg
rename to exampleSite/static/images/smartworks-coworking-cW4lLTavU80-unsplash.jpg
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index 86e93a25..80ea5486 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -1,10 +1,11 @@
{{ define "body_classes" }}page-default-single{{ end }}
{{ define "main" }}
-
+
{{.Title}}
+
{{.Content}}
diff --git a/layouts/page/contact.html b/layouts/page/contact.html
index 9fcc776a..2d1685d2 100644
--- a/layouts/page/contact.html
+++ b/layouts/page/contact.html
@@ -1,7 +1,7 @@
{{ define "body_classes" }}page-contact{{ end }}
{{ define "main" }}
-
+
diff --git a/layouts/services/single.html b/layouts/services/single.html
index 3b62ec1c..1135dcb5 100644
--- a/layouts/services/single.html
+++ b/layouts/services/single.html
@@ -1,7 +1,7 @@
{{ define "body_classes" }}page-services-single{{ end }}
{{ define "main" }}
-
+
diff --git a/layouts/services/summary.html b/layouts/services/summary.html
index 4e64cc7e..fb5ed52f 100644
--- a/layouts/services/summary.html
+++ b/layouts/services/summary.html
@@ -3,6 +3,6 @@
-
{{ .Content | plainify | htmlUnescape | truncate (.Site.Params.services.summary_truncate | default 120 ) "…" }}
+
{{ .Summary | plainify | htmlUnescape }}
