rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-07 04:54:24 +01:00
Code Issues Actions Packages Releases Activity

lol

Browse Source
This commit is contained in:
Mark Otto 2024-07-29 22:04:11 -07:00
parent 5ae877b526
commit 7915584fa4
96 changed files with 4665 additions and 27594 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
dist/css/bootstrap-grid.css vendored
View File

@ -4081,5 +4081,4 @@
display: none !important;
}
}
/*# sourceMappingURL=bootstrap-grid.css.map */

2
dist/css/bootstrap-grid.min.css.map vendored
View File

File diff suppressed because one or more lines are too long

1
dist/css/bootstrap-reboot.css vendored
View File

@ -593,5 +593,4 @@ progress {
[hidden] {
display: none !important;
}
/*# sourceMappingURL=bootstrap-reboot.css.map */

2
dist/css/bootstrap-reboot.min.css.map vendored
View File

File diff suppressed because one or more lines are too long

1
dist/css/bootstrap-utilities.css vendored
View File

@ -5398,5 +5398,4 @@
display: none !important;
}
}
/*# sourceMappingURL=bootstrap-utilities.css.map */

2
dist/css/bootstrap-utilities.min.css.map vendored
View File

File diff suppressed because one or more lines are too long

12030
dist/css/bootstrap.css
View File

File diff suppressed because it is too large Load Diff

2
dist/css/bootstrap.css.map vendored
View File

File diff suppressed because one or more lines are too long

10
dist/css/bootstrap.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
dist/css/bootstrap.min.css.map vendored
View File

File diff suppressed because one or more lines are too long

12004
dist/css/bootstrap.rtl.css vendored
View File

File diff suppressed because it is too large Load Diff

2
dist/css/bootstrap.rtl.css.map vendored
View File

File diff suppressed because one or more lines are too long

10
dist/css/bootstrap.rtl.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
dist/css/bootstrap.rtl.min.css.map vendored
View File

File diff suppressed because one or more lines are too long

113
scss/_accordion.scss
View File

@ -1,30 +1,37 @@
@use "functions";
@use "mixins/border-radius";
@use "mixins/color-mode";
@use "mixins/transition";
@use "variables";
@use "vendor/rfs";
//
// Base styles
//
.accordion {
// scss-docs-start accordion-css-vars
--#{$prefix}accordion-color: #{$accordion-color};
--#{$prefix}accordion-bg: #{$accordion-bg};
--#{$prefix}accordion-transition: #{$accordion-transition};
--#{$prefix}accordion-border-color: #{$accordion-border-color};
--#{$prefix}accordion-border-width: #{$accordion-border-width};
--#{$prefix}accordion-border-radius: #{$accordion-border-radius};
--#{$prefix}accordion-inner-border-radius: #{$accordion-inner-border-radius};
--#{$prefix}accordion-btn-padding-x: #{$accordion-button-padding-x};
--#{$prefix}accordion-btn-padding-y: #{$accordion-button-padding-y};
--#{$prefix}accordion-btn-color: #{$accordion-button-color};
--#{$prefix}accordion-btn-bg: #{$accordion-button-bg};
--#{$prefix}accordion-btn-icon: #{escape-svg($accordion-button-icon)};
--#{$prefix}accordion-btn-icon-width: #{$accordion-icon-width};
--#{$prefix}accordion-btn-icon-transform: #{$accordion-icon-transform};
--#{$prefix}accordion-btn-icon-transition: #{$accordion-icon-transition};
--#{$prefix}accordion-btn-active-icon: #{escape-svg($accordion-button-active-icon)};
--#{$prefix}accordion-btn-focus-box-shadow: #{$accordion-button-focus-box-shadow};
--#{$prefix}accordion-body-padding-x: #{$accordion-body-padding-x};
--#{$prefix}accordion-body-padding-y: #{$accordion-body-padding-y};
--#{$prefix}accordion-active-color: #{$accordion-button-active-color};
--#{$prefix}accordion-active-bg: #{$accordion-button-active-bg};
--#{variables.$prefix}accordion-color: #{variables.$accordion-color};
--#{variables.$prefix}accordion-bg: #{variables.$accordion-bg};
--#{variables.$prefix}accordion-transition: #{variables.$accordion-transition};
--#{variables.$prefix}accordion-border-color: #{variables.$accordion-border-color};
--#{variables.$prefix}accordion-border-width: #{variables.$accordion-border-width};
--#{variables.$prefix}accordion-border-radius: #{variables.$accordion-border-radius};
--#{variables.$prefix}accordion-inner-border-radius: #{variables.$accordion-inner-border-radius};
--#{variables.$prefix}accordion-btn-padding-x: #{variables.$accordion-button-padding-x};
--#{variables.$prefix}accordion-btn-padding-y: #{variables.$accordion-button-padding-y};
--#{variables.$prefix}accordion-btn-color: #{variables.$accordion-button-color};
--#{variables.$prefix}accordion-btn-bg: #{variables.$accordion-button-bg};
--#{variables.$prefix}accordion-btn-icon: #{functions.escape-svg(variables.$accordion-button-icon)};
--#{variables.$prefix}accordion-btn-icon-width: #{variables.$accordion-icon-width};
--#{variables.$prefix}accordion-btn-icon-transform: #{variables.$accordion-icon-transform};
--#{variables.$prefix}accordion-btn-icon-transition: #{variables.$accordion-icon-transition};
--#{variables.$prefix}accordion-btn-active-icon: #{functions.escape-svg(variables.$accordion-button-active-icon)};
--#{variables.$prefix}accordion-btn-focus-box-shadow: #{variables.$accordion-button-focus-box-shadow};
--#{variables.$prefix}accordion-body-padding-x: #{variables.$accordion-body-padding-x};
--#{variables.$prefix}accordion-body-padding-y: #{variables.$accordion-body-padding-y};
--#{variables.$prefix}accordion-active-color: #{variables.$accordion-button-active-color};
--#{variables.$prefix}accordion-active-bg: #{variables.$accordion-button-active-bg};
// scss-docs-end accordion-css-vars
}
@ -33,38 +40,38 @@
display: flex;
align-items: center;
width: 100%;
padding: var(--#{$prefix}accordion-btn-padding-y) var(--#{$prefix}accordion-btn-padding-x);
@include font-size($font-size-base);
color: var(--#{$prefix}accordion-btn-color);
padding: var(--#{variables.$prefix}accordion-btn-padding-y) var(--#{variables.$prefix}accordion-btn-padding-x);
@include rfs.font-size(variables.$font-size-base);
color: var(--#{variables.$prefix}accordion-btn-color);
text-align: left; // Reset button style
background-color: var(--#{$prefix}accordion-btn-bg);
background-color: var(--#{variables.$prefix}accordion-btn-bg);
border: 0;
@include border-radius(0);
@include border-radius.border-radius(0);
overflow-anchor: none;
@include transition(var(--#{$prefix}accordion-transition));
@include transition.transition(var(--#{variables.$prefix}accordion-transition));
&:not(.collapsed) {
color: var(--#{$prefix}accordion-active-color);
background-color: var(--#{$prefix}accordion-active-bg);
box-shadow: inset 0 calc(-1 * var(--#{$prefix}accordion-border-width)) 0 var(--#{$prefix}accordion-border-color); // stylelint-disable-line function-disallowed-list
color: var(--#{variables.$prefix}accordion-active-color);
background-color: var(--#{variables.$prefix}accordion-active-bg);
box-shadow: inset 0 calc(-1 * var(--#{variables.$prefix}accordion-border-width)) 0 var(--#{variables.$prefix}accordion-border-color); // stylelint-disable-line function-disallowed-list
&::after {
background-image: var(--#{$prefix}accordion-btn-active-icon);
transform: var(--#{$prefix}accordion-btn-icon-transform);
background-image: var(--#{variables.$prefix}accordion-btn-active-icon);
transform: var(--#{variables.$prefix}accordion-btn-icon-transform);
}
}
// Accordion icon
&::after {
flex-shrink: 0;
width: var(--#{$prefix}accordion-btn-icon-width);
height: var(--#{$prefix}accordion-btn-icon-width);
width: var(--#{variables.$prefix}accordion-btn-icon-width);
height: var(--#{variables.$prefix}accordion-btn-icon-width);
margin-left: auto;
content: "";
background-image: var(--#{$prefix}accordion-btn-icon);
background-image: var(--#{variables.$prefix}accordion-btn-icon);
background-repeat: no-repeat;
background-size: var(--#{$prefix}accordion-btn-icon-width);
@include transition(var(--#{$prefix}accordion-btn-icon-transition));
background-size: var(--#{variables.$prefix}accordion-btn-icon-width);
@include transition.transition(var(--#{variables.$prefix}accordion-btn-icon-transition));
}
&:hover {
@ -74,7 +81,7 @@
&:focus {
z-index: 3;
outline: 0;
box-shadow: var(--#{$prefix}accordion-btn-focus-box-shadow);
box-shadow: var(--#{variables.$prefix}accordion-btn-focus-box-shadow);
}
}
@ -83,15 +90,15 @@
}
.accordion-item {
color: var(--#{$prefix}accordion-color);
background-color: var(--#{$prefix}accordion-bg);
border: var(--#{$prefix}accordion-border-width) solid var(--#{$prefix}accordion-border-color);
color: var(--#{variables.$prefix}accordion-color);
background-color: var(--#{variables.$prefix}accordion-bg);
border: var(--#{variables.$prefix}accordion-border-width) solid var(--#{variables.$prefix}accordion-border-color);
&:first-of-type {
@include border-top-radius(var(--#{$prefix}accordion-border-radius));
@include border-radius.border-top-radius(var(--#{variables.$prefix}accordion-border-radius));
> .accordion-header .accordion-button {
@include border-top-radius(var(--#{$prefix}accordion-inner-border-radius));
@include border-radius.border-top-radius(var(--#{variables.$prefix}accordion-inner-border-radius));
}
}
@ -101,22 +108,22 @@
// Only set a border-radius on the last item if the accordion is collapsed
&:last-of-type {
@include border-bottom-radius(var(--#{$prefix}accordion-border-radius));
@include border-radius.border-bottom-radius(var(--#{variables.$prefix}accordion-border-radius));
> .accordion-header .accordion-button {
&.collapsed {
@include border-bottom-radius(var(--#{$prefix}accordion-inner-border-radius));
@include border-radius.border-bottom-radius(var(--#{variables.$prefix}accordion-inner-border-radius));
}
}
> .accordion-collapse {
@include border-bottom-radius(var(--#{$prefix}accordion-border-radius));
@include border-radius.border-bottom-radius(var(--#{variables.$prefix}accordion-border-radius));
}
}
}
.accordion-body {
padding: var(--#{$prefix}accordion-body-padding-y) var(--#{$prefix}accordion-body-padding-x);
padding: var(--#{variables.$prefix}accordion-body-padding-y) var(--#{variables.$prefix}accordion-body-padding-x);
}
@ -128,7 +135,7 @@
> .accordion-item {
border-right: 0;
border-left: 0;
@include border-radius(0);
@include border-radius.border-radius(0);
&:first-child { border-top: 0; }
&:last-child { border-bottom: 0; }
@ -137,17 +144,17 @@
> .accordion-collapse,
> .accordion-header .accordion-button,
> .accordion-header .accordion-button.collapsed {
@include border-radius(0);
@include border-radius.border-radius(0);
}
// stylelint-enable selector-max-class
}
}
@if $enable-dark-mode {
@include color-mode(dark) {
@if variables.$enable-dark-mode {
@include color-mode.color-mode(dark) {
.accordion-button::after {
--#{$prefix}accordion-btn-icon: #{escape-svg($accordion-button-icon-dark)};
--#{$prefix}accordion-btn-active-icon: #{escape-svg($accordion-button-active-icon-dark)};
--#{variables.$prefix}accordion-btn-icon: #{functions.escape-svg($accordion-button-icon-dark)};
--#{variables.$prefix}accordion-btn-active-icon: #{functions.escape-svg($accordion-button-active-icon-dark)};
}
}
}

54
scss/_alert.scss
View File

@ -1,27 +1,31 @@
@use "sass:map";
@use "mixins/border-radius";
@use "variables";
//
// Base styles
//
.alert {
// scss-docs-start alert-css-vars
--#{$prefix}alert-bg: transparent;
--#{$prefix}alert-padding-x: #{$alert-padding-x};
--#{$prefix}alert-padding-y: #{$alert-padding-y};
--#{$prefix}alert-margin-bottom: #{$alert-margin-bottom};
--#{$prefix}alert-color: inherit;
--#{$prefix}alert-border-color: transparent;
--#{$prefix}alert-border: #{$alert-border-width} solid var(--#{$prefix}alert-border-color);
--#{$prefix}alert-border-radius: #{$alert-border-radius};
--#{$prefix}alert-link-color: inherit;
--#{variables.$prefix}alert-bg: transparent;
--#{variables.$prefix}alert-padding-x: #{variables.$alert-padding-x};
--#{variables.$prefix}alert-padding-y: #{variables.$alert-padding-y};
--#{variables.$prefix}alert-margin-bottom: #{variables.$alert-margin-bottom};
--#{variables.$prefix}alert-color: inherit;
--#{variables.$prefix}alert-border-color: transparent;
--#{variables.$prefix}alert-border: #{variables.$alert-border-width} solid var(--#{variables.$prefix}alert-border-color);
--#{variables.$prefix}alert-border-radius: #{variables.$alert-border-radius};
--#{variables.$prefix}alert-link-color: inherit;
// scss-docs-end alert-css-vars
position: relative;
padding: var(--#{$prefix}alert-padding-y) var(--#{$prefix}alert-padding-x);
margin-bottom: var(--#{$prefix}alert-margin-bottom);
color: var(--#{$prefix}alert-color);
background-color: var(--#{$prefix}alert-bg);
border: var(--#{$prefix}alert-border);
@include border-radius(var(--#{$prefix}alert-border-radius));
padding: var(--#{variables.$prefix}alert-padding-y) var(--#{variables.$prefix}alert-padding-x);
margin-bottom: var(--#{variables.$prefix}alert-margin-bottom);
color: var(--#{variables.$prefix}alert-color);
background-color: var(--#{variables.$prefix}alert-bg);
border: var(--#{variables.$prefix}alert-border);
@include border-radius.border-radius(var(--#{variables.$prefix}alert-border-radius));
}
// Headings for larger alerts
@ -32,8 +36,8 @@
// Provide class for links that match alerts
.alert-link {
font-weight: $alert-link-font-weight;
color: var(--#{$prefix}alert-link-color);
font-weight: variables.$alert-link-font-weight;
color: var(--#{variables.$prefix}alert-link-color);
}
@ -42,27 +46,27 @@
// Expand the right padding and account for the close button's positioning.
.alert-dismissible {
padding-right: $alert-dismissible-padding-r;
padding-right: variables.$alert-dismissible-padding-r;
// Adjust close link position
.btn-close {
position: absolute;
top: 0;
right: 0;
z-index: $stretched-link-z-index + 1;
padding: $alert-padding-y * 1.25 $alert-padding-x;
z-index: variables.$stretched-link-z-index + 1;
padding: variables.$alert-padding-y * 1.25 variables.$alert-padding-x;
}
}
// scss-docs-start alert-modifiers
// Generate contextual modifier classes for colorizing the alert
@each $state in map-keys($theme-colors) {
@each $state in map.keys(variables.$theme-colors) {
.alert-#{$state} {
--#{$prefix}alert-color: var(--#{$prefix}#{$state}-text-emphasis);
--#{$prefix}alert-bg: var(--#{$prefix}#{$state}-bg-subtle);
--#{$prefix}alert-border-color: var(--#{$prefix}#{$state}-border-subtle);
--#{$prefix}alert-link-color: var(--#{$prefix}#{$state}-text-emphasis);
--#{variables.$prefix}alert-color: var(--#{variables.$prefix}#{$state}-text-emphasis);
--#{variables.$prefix}alert-bg: var(--#{variables.$prefix}#{$state}-bg-subtle);
--#{variables.$prefix}alert-border-color: var(--#{variables.$prefix}#{$state}-border-subtle);
--#{variables.$prefix}alert-link-color: var(--#{variables.$prefix}#{$state}-text-emphasis);
}
}
// scss-docs-end alert-modifiers

29
scss/_badge.scss
View File

@ -1,3 +1,8 @@
@use "mixins/border-radius";
@use "mixins/gradients";
@use "variables";
@use "vendor/rfs";
// Base class
//
// Requires one of the contextual, color modifier classes for `color` and
@ -5,25 +10,25 @@
.badge {
// scss-docs-start badge-css-vars
--#{$prefix}badge-padding-x: #{$badge-padding-x};
--#{$prefix}badge-padding-y: #{$badge-padding-y};
@include rfs($badge-font-size, --#{$prefix}badge-font-size);
--#{$prefix}badge-font-weight: #{$badge-font-weight};
--#{$prefix}badge-color: #{$badge-color};
--#{$prefix}badge-border-radius: #{$badge-border-radius};
--#{variables.$prefix}badge-padding-x: #{variables.$badge-padding-x};
--#{variables.$prefix}badge-padding-y: #{variables.$badge-padding-y};
@include rfs.rfs(variables.$badge-font-size, --#{variables.$prefix}badge-font-size);
--#{variables.$prefix}badge-font-weight: #{variables.$badge-font-weight};
--#{variables.$prefix}badge-color: #{variables.$badge-color};
--#{variables.$prefix}badge-border-radius: #{variables.$badge-border-radius};
// scss-docs-end badge-css-vars
display: inline-block;
padding: var(--#{$prefix}badge-padding-y) var(--#{$prefix}badge-padding-x);
@include font-size(var(--#{$prefix}badge-font-size));
font-weight: var(--#{$prefix}badge-font-weight);
padding: var(--#{variables.$prefix}badge-padding-y) var(--#{variables.$prefix}badge-padding-x);
@include rfs.font-size(var(--#{variables.$prefix}badge-font-size));
font-weight: var(--#{variables.$prefix}badge-font-weight);
line-height: 1;
color: var(--#{$prefix}badge-color);
color: var(--#{variables.$prefix}badge-color);
text-align: center;
white-space: nowrap;
vertical-align: baseline;
@include border-radius(var(--#{$prefix}badge-border-radius));
@include gradient-bg();
@include border-radius.border-radius(var(--#{variables.$prefix}badge-border-radius));
@include gradients.gradient-bg();
// Empty badges collapse automatically
&:empty {

43
scss/_breadcrumb.scss
View File

@ -1,40 +1,45 @@
@use "functions";
@use "mixins/border-radius";
@use "variables";
@use "vendor/rfs";
.breadcrumb {
// scss-docs-start breadcrumb-css-vars
--#{$prefix}breadcrumb-padding-x: #{$breadcrumb-padding-x};
--#{$prefix}breadcrumb-padding-y: #{$breadcrumb-padding-y};
--#{$prefix}breadcrumb-margin-bottom: #{$breadcrumb-margin-bottom};
@include rfs($breadcrumb-font-size, --#{$prefix}breadcrumb-font-size);
--#{$prefix}breadcrumb-bg: #{$breadcrumb-bg};
--#{$prefix}breadcrumb-border-radius: #{$breadcrumb-border-radius};
--#{$prefix}breadcrumb-divider-color: #{$breadcrumb-divider-color};
--#{$prefix}breadcrumb-item-padding-x: #{$breadcrumb-item-padding-x};
--#{$prefix}breadcrumb-item-active-color: #{$breadcrumb-active-color};
--#{variables.$prefix}breadcrumb-padding-x: #{variables.$breadcrumb-padding-x};
--#{variables.$prefix}breadcrumb-padding-y: #{variables.$breadcrumb-padding-y};
--#{variables.$prefix}breadcrumb-margin-bottom: #{variables.$breadcrumb-margin-bottom};
@include rfs.rfs(variables.$breadcrumb-font-size, --#{variables.$prefix}breadcrumb-font-size);
--#{variables.$prefix}breadcrumb-bg: #{variables.$breadcrumb-bg};
--#{variables.$prefix}breadcrumb-border-radius: #{variables.$breadcrumb-border-radius};
--#{variables.$prefix}breadcrumb-divider-color: #{variables.$breadcrumb-divider-color};
--#{variables.$prefix}breadcrumb-item-padding-x: #{variables.$breadcrumb-item-padding-x};
--#{variables.$prefix}breadcrumb-item-active-color: #{variables.$breadcrumb-active-color};
// scss-docs-end breadcrumb-css-vars
display: flex;
flex-wrap: wrap;
padding: var(--#{$prefix}breadcrumb-padding-y) var(--#{$prefix}breadcrumb-padding-x);
margin-bottom: var(--#{$prefix}breadcrumb-margin-bottom);
@include font-size(var(--#{$prefix}breadcrumb-font-size));
padding: var(--#{variables.$prefix}breadcrumb-padding-y) var(--#{variables.$prefix}breadcrumb-padding-x);
margin-bottom: var(--#{variables.$prefix}breadcrumb-margin-bottom);
@include rfs.font-size(var(--#{variables.$prefix}breadcrumb-font-size));
list-style: none;
background-color: var(--#{$prefix}breadcrumb-bg);
@include border-radius(var(--#{$prefix}breadcrumb-border-radius));
background-color: var(--#{variables.$prefix}breadcrumb-bg);
@include border-radius.border-radius(var(--#{variables.$prefix}breadcrumb-border-radius));
}
.breadcrumb-item {
// The separator between breadcrumbs (by default, a forward-slash: "/")
+ .breadcrumb-item {
padding-left: var(--#{$prefix}breadcrumb-item-padding-x);
padding-left: var(--#{variables.$prefix}breadcrumb-item-padding-x);
&::before {
float: left; // Suppress inline spacings and underlining of the separator
padding-right: var(--#{$prefix}breadcrumb-item-padding-x);
color: var(--#{$prefix}breadcrumb-divider-color);
content: var(--#{$prefix}breadcrumb-divider, escape-svg($breadcrumb-divider)) #{"/* rtl:"} var(--#{$prefix}breadcrumb-divider, escape-svg($breadcrumb-divider-flipped)) #{"*/"};
padding-right: var(--#{variables.$prefix}breadcrumb-item-padding-x);
color: var(--#{variables.$prefix}breadcrumb-divider-color);
content: var(--#{variables.$prefix}breadcrumb-divider, functions.escape-svg(variables.$breadcrumb-divider)) #{"/* rtl:"} var(--#{variables.$prefix}breadcrumb-divider, functions.escape-svg(variables.$breadcrumb-divider-flipped)) #{"*/"};
}
}
&.active {
color: var(--#{$prefix}breadcrumb-item-active-color);
color: var(--#{variables.$prefix}breadcrumb-item-active-color);
}
}

34
scss/_button-group.scss
View File

@ -1,3 +1,7 @@
@use "mixins/border-radius";
@use "mixins/box-shadow";
@use "variables";
// Make the div behave like a button
.btn-group,
.btn-group-vertical {
@ -34,19 +38,19 @@
}
.btn-group {
@include border-radius($btn-border-radius);
@include border-radius.border-radius(variables.$btn-border-radius);
// Prevent double borders when buttons are next to each other
> :not(.btn-check:first-child) + .btn,
> .btn-group:not(:first-child) {
margin-left: calc(#{$btn-border-width} * -1); // stylelint-disable-line function-disallowed-list
margin-left: calc(#{variables.$btn-border-width} * -1); // stylelint-disable-line function-disallowed-list
}
// Reset rounded corners
> .btn:not(:last-child):not(.dropdown-toggle),
> .btn.dropdown-toggle-split:first-child,
> .btn-group:not(:last-child) > .btn {
@include border-end-radius(0);
@include border-radius.border-end-radius(0);
}
// The left radius should be 0 if the button is:
@ -56,7 +60,7 @@
> .btn:nth-child(n + 3),
> :not(.btn-check) + .btn,
> .btn-group:not(:first-child) > .btn {
@include border-start-radius(0);
@include border-radius.border-start-radius(0);
}
}
@ -73,8 +77,8 @@
//
.dropdown-toggle-split {
padding-right: $btn-padding-x * .75;
padding-left: $btn-padding-x * .75;
padding-right: variables.$btn-padding-x * .75;
padding-left: variables.$btn-padding-x * .75;
&::after,
.dropup &::after,
@ -88,24 +92,24 @@
}
.btn-sm + .dropdown-toggle-split {
padding-right: $btn-padding-x-sm * .75;
padding-left: $btn-padding-x-sm * .75;
padding-right: variables.$btn-padding-x-sm * .75;
padding-left: variables.$btn-padding-x-sm * .75;
}
.btn-lg + .dropdown-toggle-split {
padding-right: $btn-padding-x-lg * .75;
padding-left: $btn-padding-x-lg * .75;
padding-right: variables.$btn-padding-x-lg * .75;
padding-left: variables.$btn-padding-x-lg * .75;
}
// The clickable button for toggling the menu
// Set the same inset shadow as the :active state
.btn-group.show .dropdown-toggle {
@include box-shadow($btn-active-box-shadow);
@include box-shadow.box-shadow(variables.$btn-active-box-shadow);
// Show no shadow for `.btn-link` since it has no other button styles.
&.btn-link {
@include box-shadow(none);
@include box-shadow.box-shadow(none);
}
}
@ -126,13 +130,13 @@
> .btn:not(:first-child),
> .btn-group:not(:first-child) {
margin-top: calc(#{$btn-border-width} * -1); // stylelint-disable-line function-disallowed-list
margin-top: calc(#{variables.$btn-border-width} * -1); // stylelint-disable-line function-disallowed-list
}
// Reset rounded corners
> .btn:not(:last-child):not(.dropdown-toggle),
> .btn-group:not(:last-child) > .btn {
@include border-bottom-radius(0);
@include border-radius.border-bottom-radius(0);
}
// The top radius should be 0 if the button is:
@ -142,6 +146,6 @@
> .btn:nth-child(n + 3),
> :not(.btn-check) + .btn,
> .btn-group:not(:first-child) > .btn {
@include border-top-radius(0);
@include border-radius.border-top-radius(0);
}
}

201
scss/_buttons.scss
View File

@ -1,80 +1,89 @@
@use "functions";
@use "mixins/border-radius";
@use "mixins/box-shadow";
@use "mixins/buttons";
@use "mixins/gradients";
@use "mixins/transition";
@use "variables";
@use "vendor/rfs";
//
// Base styles
//
.btn {
// scss-docs-start btn-css-vars
--#{$prefix}btn-padding-x: #{$btn-padding-x};
--#{$prefix}btn-padding-y: #{$btn-padding-y};
--#{$prefix}btn-font-family: #{$btn-font-family};
@include rfs($btn-font-size, --#{$prefix}btn-font-size);
--#{$prefix}btn-font-weight: #{$btn-font-weight};
--#{$prefix}btn-line-height: #{$btn-line-height};
--#{$prefix}btn-color: #{$btn-color};
--#{$prefix}btn-bg: transparent;
--#{$prefix}btn-border-width: #{$btn-border-width};
--#{$prefix}btn-border-color: transparent;
--#{$prefix}btn-border-radius: #{$btn-border-radius};
--#{$prefix}btn-hover-border-color: transparent;
--#{$prefix}btn-box-shadow: #{$btn-box-shadow};
--#{$prefix}btn-disabled-opacity: #{$btn-disabled-opacity};
--#{$prefix}btn-focus-box-shadow: 0 0 0 #{$btn-focus-width} rgba(var(--#{$prefix}btn-focus-shadow-rgb), .5);
--#{variables.$prefix}btn-padding-x: #{variables.$btn-padding-x};
--#{variables.$prefix}btn-padding-y: #{variables.$btn-padding-y};
--#{variables.$prefix}btn-font-family: #{variables.$btn-font-family};
@include rfs.rfs(variables.$btn-font-size, --#{variables.$prefix}btn-font-size);
--#{variables.$prefix}btn-font-weight: #{variables.$btn-font-weight};
--#{variables.$prefix}btn-line-height: #{variables.$btn-line-height};
--#{variables.$prefix}btn-color: #{variables.$btn-color};
--#{variables.$prefix}btn-bg: transparent;
--#{variables.$prefix}btn-border-width: #{variables.$btn-border-width};
--#{variables.$prefix}btn-border-color: transparent;
--#{variables.$prefix}btn-border-radius: #{variables.$btn-border-radius};
--#{variables.$prefix}btn-hover-border-color: transparent;
--#{variables.$prefix}btn-box-shadow: #{variables.$btn-box-shadow};
--#{variables.$prefix}btn-disabled-opacity: #{variables.$btn-disabled-opacity};
--#{variables.$prefix}btn-focus-box-shadow: 0 0 0 #{variables.$btn-focus-width} rgba(var(--#{variables.$prefix}btn-focus-shadow-rgb), .5);
// scss-docs-end btn-css-vars
display: inline-block;
padding: var(--#{$prefix}btn-padding-y) var(--#{$prefix}btn-padding-x);
font-family: var(--#{$prefix}btn-font-family);
@include font-size(var(--#{$prefix}btn-font-size));
font-weight: var(--#{$prefix}btn-font-weight);
line-height: var(--#{$prefix}btn-line-height);
color: var(--#{$prefix}btn-color);
padding: var(--#{variables.$prefix}btn-padding-y) var(--#{variables.$prefix}btn-padding-x);
font-family: var(--#{variables.$prefix}btn-font-family);
@include rfs.font-size(var(--#{variables.$prefix}btn-font-size));
font-weight: var(--#{variables.$prefix}btn-font-weight);
line-height: var(--#{variables.$prefix}btn-line-height);
color: var(--#{variables.$prefix}btn-color);
text-align: center;
text-decoration: if($link-decoration == none, null, none);
white-space: $btn-white-space;
text-decoration: if(variables.$link-decoration == none, null, none);
white-space: variables.$btn-white-space;
vertical-align: middle;
cursor: if($enable-button-pointers, pointer, null);
cursor: if(variables.$enable-button-pointers, pointer, null);
user-select: none;
border: var(--#{$prefix}btn-border-width) solid var(--#{$prefix}btn-border-color);
@include border-radius(var(--#{$prefix}btn-border-radius));
@include gradient-bg(var(--#{$prefix}btn-bg));
@include box-shadow(var(--#{$prefix}btn-box-shadow));
@include transition($btn-transition);
border: var(--#{variables.$prefix}btn-border-width) solid var(--#{variables.$prefix}btn-border-color);
@include border-radius.border-radius(var(--#{variables.$prefix}btn-border-radius));
@include gradients.gradient-bg(var(--#{variables.$prefix}btn-bg));
@include box-shadow.box-shadow(var(--#{variables.$prefix}btn-box-shadow));
@include transition.transition(variables.$btn-transition);
&:hover {
color: var(--#{$prefix}btn-hover-color);
text-decoration: if($link-hover-decoration == underline, none, null);
background-color: var(--#{$prefix}btn-hover-bg);
border-color: var(--#{$prefix}btn-hover-border-color);
color: var(--#{variables.$prefix}btn-hover-color);
text-decoration: if(variables.$link-hover-decoration == underline, none, null);
background-color: var(--#{variables.$prefix}btn-hover-bg);
border-color: var(--#{variables.$prefix}btn-hover-border-color);
}
.btn-check + &:hover {
// override for the checkbox/radio buttons
color: var(--#{$prefix}btn-color);
background-color: var(--#{$prefix}btn-bg);
border-color: var(--#{$prefix}btn-border-color);
color: var(--#{variables.$prefix}btn-color);
background-color: var(--#{variables.$prefix}btn-bg);
border-color: var(--#{variables.$prefix}btn-border-color);
}
&:focus-visible {
color: var(--#{$prefix}btn-hover-color);
@include gradient-bg(var(--#{$prefix}btn-hover-bg));
border-color: var(--#{$prefix}btn-hover-border-color);
color: var(--#{variables.$prefix}btn-hover-color);
@include gradients.gradient-bg(var(--#{variables.$prefix}btn-hover-bg));
border-color: var(--#{variables.$prefix}btn-hover-border-color);
outline: 0;
// Avoid using mixin so we can pass custom focus shadow properly
@if $enable-shadows {
box-shadow: var(--#{$prefix}btn-box-shadow), var(--#{$prefix}btn-focus-box-shadow);
@if variables.$enable-shadows {
box-shadow: var(--#{variables.$prefix}btn-box-shadow), var(--#{variables.$prefix}btn-focus-box-shadow);
} @else {
box-shadow: var(--#{$prefix}btn-focus-box-shadow);
box-shadow: var(--#{variables.$prefix}btn-focus-box-shadow);
}
}
.btn-check:focus-visible + & {
border-color: var(--#{$prefix}btn-hover-border-color);
border-color: var(--#{variables.$prefix}btn-hover-border-color);
outline: 0;
// Avoid using mixin so we can pass custom focus shadow properly
@if $enable-shadows {
box-shadow: var(--#{$prefix}btn-box-shadow), var(--#{$prefix}btn-focus-box-shadow);
@if variables.$enable-shadows {
box-shadow: var(--#{variables.$prefix}btn-box-shadow), var(--#{variables.$prefix}btn-focus-box-shadow);
} @else {
box-shadow: var(--#{$prefix}btn-focus-box-shadow);
box-shadow: var(--#{variables.$prefix}btn-focus-box-shadow);
}
}
@ -83,42 +92,42 @@
&:first-child:active,
&.active,
&.show {
color: var(--#{$prefix}btn-active-color);
background-color: var(--#{$prefix}btn-active-bg);
color: var(--#{variables.$prefix}btn-active-color);
background-color: var(--#{variables.$prefix}btn-active-bg);
// Remove CSS gradients if they're enabled
background-image: if($enable-gradients, none, null);
border-color: var(--#{$prefix}btn-active-border-color);
@include box-shadow(var(--#{$prefix}btn-active-shadow));
background-image: if(variables.$enable-gradients, none, null);
border-color: var(--#{variables.$prefix}btn-active-border-color);
@include box-shadow.box-shadow(var(--#{variables.$prefix}btn-active-shadow));
&:focus-visible {
// Avoid using mixin so we can pass custom focus shadow properly
@if $enable-shadows {
box-shadow: var(--#{$prefix}btn-active-shadow), var(--#{$prefix}btn-focus-box-shadow);
@if variables.$enable-shadows {
box-shadow: var(--#{variables.$prefix}btn-active-shadow), var(--#{variables.$prefix}btn-focus-box-shadow);
} @else {
box-shadow: var(--#{$prefix}btn-focus-box-shadow);
box-shadow: var(--#{variables.$prefix}btn-focus-box-shadow);
}
}
}
.btn-check:checked:focus-visible + & {
// Avoid using mixin so we can pass custom focus shadow properly
@if $enable-shadows {
box-shadow: var(--#{$prefix}btn-active-shadow), var(--#{$prefix}btn-focus-box-shadow);
@if variables.$enable-shadows {
box-shadow: var(--#{variables.$prefix}btn-active-shadow), var(--#{variables.$prefix}btn-focus-box-shadow);
} @else {
box-shadow: var(--#{$prefix}btn-focus-box-shadow);
box-shadow: var(--#{variables.$prefix}btn-focus-box-shadow);
}
}
&:disabled,
&.disabled,
fieldset:disabled & {
color: var(--#{$prefix}btn-disabled-color);
color: var(--#{variables.$prefix}btn-disabled-color);
pointer-events: none;
background-color: var(--#{$prefix}btn-disabled-bg);
background-image: if($enable-gradients, none, null);
border-color: var(--#{$prefix}btn-disabled-border-color);
opacity: var(--#{$prefix}btn-disabled-opacity);
@include box-shadow(none);
background-color: var(--#{variables.$prefix}btn-disabled-bg);
background-image: if(variables.$enable-gradients, none, null);
border-color: var(--#{variables.$prefix}btn-disabled-border-color);
opacity: var(--#{variables.$prefix}btn-disabled-opacity);
@include box-shadow.box-shadow(none);
}
}
@ -128,35 +137,35 @@
//
// scss-docs-start btn-variant-loops
@each $color, $value in $theme-colors {
@each $color, $value in variables.$theme-colors {
.btn-#{$color} {
@if $color == "light" {
@include button-variant(
@include buttons.button-variant(
$value,
$value,
$hover-background: shade-color($value, $btn-hover-bg-shade-amount),
$hover-border: shade-color($value, $btn-hover-border-shade-amount),
$active-background: shade-color($value, $btn-active-bg-shade-amount),
$active-border: shade-color($value, $btn-active-border-shade-amount)
$hover-background: functions.shade-color($value, variables.$btn-hover-bg-shade-amount),
$hover-border: functions.shade-color($value, variables.$btn-hover-border-shade-amount),
$active-background: functions.shade-color($value, variables.$btn-active-bg-shade-amount),
$active-border: functions.shade-color($value, variables.$btn-active-border-shade-amount)
);
} @else if $color == "dark" {
@include button-variant(
@include buttons.button-variant(
$value,
$value,
$hover-background: tint-color($value, $btn-hover-bg-tint-amount),
$hover-border: tint-color($value, $btn-hover-border-tint-amount),
$active-background: tint-color($value, $btn-active-bg-tint-amount),
$active-border: tint-color($value, $btn-active-border-tint-amount)
$hover-background: functions.tint-color($value, variables.$btn-hover-bg-tint-amount),
$hover-border: functions.tint-color($value, variables.$btn-hover-border-tint-amount),
$active-background: functions.tint-color($value, variables.$btn-active-bg-tint-amount),
$active-border: functions.tint-color($value, variables.$btn-active-border-tint-amount)
);
} @else {
@include button-variant($value, $value);
@include buttons.button-variant($value, $value);
}
}
}
@each $color, $value in $theme-colors {
@each $color, $value in variables.$theme-colors {
.btn-outline-#{$color} {
@include button-outline-variant($value);
@include buttons.button-outline-variant($value);
}
}
// scss-docs-end btn-variant-loops
@ -168,35 +177,35 @@
// Make a button look and behave like a link
.btn-link {
--#{$prefix}btn-font-weight: #{$font-weight-normal};
--#{$prefix}btn-color: #{$btn-link-color};
--#{$prefix}btn-bg: transparent;
--#{$prefix}btn-border-color: transparent;
--#{$prefix}btn-hover-color: #{$btn-link-hover-color};
--#{$prefix}btn-hover-border-color: transparent;
--#{$prefix}btn-active-color: #{$btn-link-hover-color};
--#{$prefix}btn-active-border-color: transparent;
--#{$prefix}btn-disabled-color: #{$btn-link-disabled-color};
--#{$prefix}btn-disabled-border-color: transparent;
--#{$prefix}btn-box-shadow: 0 0 0 #000; // Can't use `none` as keyword negates all values when used with multiple shadows
--#{$prefix}btn-focus-shadow-rgb: #{$btn-link-focus-shadow-rgb};
--#{variables.$prefix}btn-font-weight: #{variables.$font-weight-normal};
--#{variables.$prefix}btn-color: #{variables.$btn-link-color};
--#{variables.$prefix}btn-bg: transparent;
--#{variables.$prefix}btn-border-color: transparent;
--#{variables.$prefix}btn-hover-color: #{variables.$btn-link-hover-color};
--#{variables.$prefix}btn-hover-border-color: transparent;
--#{variables.$prefix}btn-active-color: #{variables.$btn-link-hover-color};
--#{variables.$prefix}btn-active-border-color: transparent;
--#{variables.$prefix}btn-disabled-color: #{variables.$btn-link-disabled-color};
--#{variables.$prefix}btn-disabled-border-color: transparent;
--#{variables.$prefix}btn-box-shadow: 0 0 0 #000; // Can't use `none` as keyword negates all values when used with multiple shadows
--#{variables.$prefix}btn-focus-shadow-rgb: #{variables.$btn-link-focus-shadow-rgb};
text-decoration: $link-decoration;
@if $enable-gradients {
text-decoration: variables.$link-decoration;
@if variables.$enable-gradients {
background-image: none;
}
&:hover,
&:focus-visible {
text-decoration: $link-hover-decoration;
text-decoration: variables.$link-hover-decoration;
}
&:focus-visible {
color: var(--#{$prefix}btn-color);
color: var(--#{variables.$prefix}btn-color);
}
&:hover {
color: var(--#{$prefix}btn-hover-color);
color: var(--#{variables.$prefix}btn-hover-color);
}
// No need for an active state here
@ -208,9 +217,9 @@
//
.btn-lg {
@include button-size($btn-padding-y-lg, $btn-padding-x-lg, $btn-font-size-lg, $btn-border-radius-lg);
@include buttons.button-size(variables.$btn-padding-y-lg, variables.$btn-padding-x-lg, variables.$btn-font-size-lg, variables.$btn-border-radius-lg);
}
.btn-sm {
@include button-size($btn-padding-y-sm, $btn-padding-x-sm, $btn-font-size-sm, $btn-border-radius-sm);
@include buttons.button-size(variables.$btn-padding-y-sm, variables.$btn-padding-x-sm, variables.$btn-font-size-sm, variables.$btn-border-radius-sm);
}

127
scss/_card.scss
View File

@ -1,42 +1,47 @@
@use "mixins/border-radius";
@use "mixins/box-shadow";
@use "mixins/breakpoints";
@use "variables";
//
// Base styles
//
.card {
// scss-docs-start card-css-vars
--#{$prefix}card-spacer-y: #{$card-spacer-y};
--#{$prefix}card-spacer-x: #{$card-spacer-x};
--#{$prefix}card-title-spacer-y: #{$card-title-spacer-y};
--#{$prefix}card-title-color: #{$card-title-color};
--#{$prefix}card-subtitle-color: #{$card-subtitle-color};
--#{$prefix}card-border-width: #{$card-border-width};
--#{$prefix}card-border-color: #{$card-border-color};
--#{$prefix}card-border-radius: #{$card-border-radius};
--#{$prefix}card-box-shadow: #{$card-box-shadow};
--#{$prefix}card-inner-border-radius: #{$card-inner-border-radius};
--#{$prefix}card-cap-padding-y: #{$card-cap-padding-y};
--#{$prefix}card-cap-padding-x: #{$card-cap-padding-x};
--#{$prefix}card-cap-bg: #{$card-cap-bg};
--#{$prefix}card-cap-color: #{$card-cap-color};
--#{$prefix}card-height: #{$card-height};
--#{$prefix}card-color: #{$card-color};
--#{$prefix}card-bg: #{$card-bg};
--#{$prefix}card-img-overlay-padding: #{$card-img-overlay-padding};
--#{$prefix}card-group-margin: #{$card-group-margin};
--#{variables.$prefix}card-spacer-y: #{variables.$card-spacer-y};
--#{variables.$prefix}card-spacer-x: #{variables.$card-spacer-x};
--#{variables.$prefix}card-title-spacer-y: #{variables.$card-title-spacer-y};
--#{variables.$prefix}card-title-color: #{variables.$card-title-color};
--#{variables.$prefix}card-subtitle-color: #{variables.$card-subtitle-color};
--#{variables.$prefix}card-border-width: #{variables.$card-border-width};
--#{variables.$prefix}card-border-color: #{variables.$card-border-color};
--#{variables.$prefix}card-border-radius: #{variables.$card-border-radius};
--#{variables.$prefix}card-box-shadow: #{variables.$card-box-shadow};
--#{variables.$prefix}card-inner-border-radius: #{variables.$card-inner-border-radius};
--#{variables.$prefix}card-cap-padding-y: #{variables.$card-cap-padding-y};
--#{variables.$prefix}card-cap-padding-x: #{variables.$card-cap-padding-x};
--#{variables.$prefix}card-cap-bg: #{variables.$card-cap-bg};
--#{variables.$prefix}card-cap-color: #{variables.$card-cap-color};
--#{variables.$prefix}card-height: #{variables.$card-height};
--#{variables.$prefix}card-color: #{variables.$card-color};
--#{variables.$prefix}card-bg: #{variables.$card-bg};
--#{variables.$prefix}card-img-overlay-padding: #{variables.$card-img-overlay-padding};
--#{variables.$prefix}card-group-margin: #{variables.$card-group-margin};
// scss-docs-end card-css-vars
position: relative;
display: flex;
flex-direction: column;
min-width: 0; // See https://github.com/twbs/bootstrap/pull/22740#issuecomment-305868106
height: var(--#{$prefix}card-height);
color: var(--#{$prefix}body-color);
height: var(--#{variables.$prefix}card-height);
color: var(--#{variables.$prefix}body-color);
word-wrap: break-word;
background-color: var(--#{$prefix}card-bg);
background-color: var(--#{variables.$prefix}card-bg);
background-clip: border-box;
border: var(--#{$prefix}card-border-width) solid var(--#{$prefix}card-border-color);
@include border-radius(var(--#{$prefix}card-border-radius));
@include box-shadow(var(--#{$prefix}card-box-shadow));
border: var(--#{variables.$prefix}card-border-width) solid var(--#{variables.$prefix}card-border-color);
@include border-radius.border-radius(var(--#{variables.$prefix}card-border-radius));
@include box-shadow.box-shadow(var(--#{variables.$prefix}card-box-shadow));
> hr {
margin-right: 0;
@ -49,12 +54,12 @@
&:first-child {
border-top-width: 0;
@include border-top-radius(var(--#{$prefix}card-inner-border-radius));
@include border-radius.border-top-radius(var(--#{variables.$prefix}card-inner-border-radius));
}
&:last-child {
border-bottom-width: 0;
@include border-bottom-radius(var(--#{$prefix}card-inner-border-radius));
@include border-radius.border-bottom-radius(var(--#{variables.$prefix}card-inner-border-radius));
}
}
@ -70,19 +75,19 @@
// Enable `flex-grow: 1` for decks and groups so that card blocks take up
// as much space as possible, ensuring footers are aligned to the bottom.
flex: 1 1 auto;
padding: var(--#{$prefix}card-spacer-y) var(--#{$prefix}card-spacer-x);
color: var(--#{$prefix}card-color);
padding: var(--#{variables.$prefix}card-spacer-y) var(--#{variables.$prefix}card-spacer-x);
color: var(--#{variables.$prefix}card-color);
}
.card-title {
margin-bottom: var(--#{$prefix}card-title-spacer-y);
color: var(--#{$prefix}card-title-color);
margin-bottom: var(--#{variables.$prefix}card-title-spacer-y);
color: var(--#{variables.$prefix}card-title-color);
}
.card-subtitle {
margin-top: calc(-.5 * var(--#{$prefix}card-title-spacer-y)); // stylelint-disable-line function-disallowed-list
margin-top: calc(-.5 * var(--#{variables.$prefix}card-title-spacer-y)); // stylelint-disable-line function-disallowed-list
margin-bottom: 0;
color: var(--#{$prefix}card-subtitle-color);
color: var(--#{variables.$prefix}card-subtitle-color);
}
.card-text:last-child {
@ -91,11 +96,11 @@
.card-link {
&:hover {
text-decoration: if($link-hover-decoration == underline, none, null);
text-decoration: if(variables.$link-hover-decoration == underline, none, null);
}
+ .card-link {
margin-left: var(--#{$prefix}card-spacer-x);
margin-left: var(--#{variables.$prefix}card-spacer-x);
}
}
@ -104,25 +109,25 @@
//
.card-header {
padding: var(--#{$prefix}card-cap-padding-y) var(--#{$prefix}card-cap-padding-x);
padding: var(--#{variables.$prefix}card-cap-padding-y) var(--#{variables.$prefix}card-cap-padding-x);
margin-bottom: 0; // Removes the default margin-bottom of <hN>
color: var(--#{$prefix}card-cap-color);
background-color: var(--#{$prefix}card-cap-bg);
border-bottom: var(--#{$prefix}card-border-width) solid var(--#{$prefix}card-border-color);
color: var(--#{variables.$prefix}card-cap-color);
background-color: var(--#{variables.$prefix}card-cap-bg);
border-bottom: var(--#{variables.$prefix}card-border-width) solid var(--#{variables.$prefix}card-border-color);
&:first-child {
@include border-radius(var(--#{$prefix}card-inner-border-radius) var(--#{$prefix}card-inner-border-radius) 0 0);
@include border-radius.border-radius(var(--#{variables.$prefix}card-inner-border-radius) var(--#{variables.$prefix}card-inner-border-radius) 0 0);
}
}
.card-footer {
padding: var(--#{$prefix}card-cap-padding-y) var(--#{$prefix}card-cap-padding-x);
color: var(--#{$prefix}card-cap-color);
background-color: var(--#{$prefix}card-cap-bg);
border-top: var(--#{$prefix}card-border-width) solid var(--#{$prefix}card-border-color);
padding: var(--#{variables.$prefix}card-cap-padding-y) var(--#{variables.$prefix}card-cap-padding-x);
color: var(--#{variables.$prefix}card-cap-color);
background-color: var(--#{variables.$prefix}card-cap-bg);
border-top: var(--#{variables.$prefix}card-border-width) solid var(--#{variables.$prefix}card-border-color);
&:last-child {
@include border-radius(0 0 var(--#{$prefix}card-inner-border-radius) var(--#{$prefix}card-inner-border-radius));
@include border-radius.border-radius(0 0 var(--#{variables.$prefix}card-inner-border-radius) var(--#{variables.$prefix}card-inner-border-radius));
}
}
@ -132,20 +137,20 @@
//
.card-header-tabs {
margin-right: calc(-.5 * var(--#{$prefix}card-cap-padding-x)); // stylelint-disable-line function-disallowed-list
margin-bottom: calc(-1 * var(--#{$prefix}card-cap-padding-y)); // stylelint-disable-line function-disallowed-list
margin-left: calc(-.5 * var(--#{$prefix}card-cap-padding-x)); // stylelint-disable-line function-disallowed-list
margin-right: calc(-.5 * var(--#{variables.$prefix}card-cap-padding-x)); // stylelint-disable-line function-disallowed-list
margin-bottom: calc(-1 * var(--#{variables.$prefix}card-cap-padding-y)); // stylelint-disable-line function-disallowed-list
margin-left: calc(-.5 * var(--#{variables.$prefix}card-cap-padding-x)); // stylelint-disable-line function-disallowed-list
border-bottom: 0;
.nav-link.active {
background-color: var(--#{$prefix}card-bg);
border-bottom-color: var(--#{$prefix}card-bg);
background-color: var(--#{variables.$prefix}card-bg);
border-bottom-color: var(--#{variables.$prefix}card-bg);
}
}
.card-header-pills {
margin-right: calc(-.5 * var(--#{$prefix}card-cap-padding-x)); // stylelint-disable-line function-disallowed-list
margin-left: calc(-.5 * var(--#{$prefix}card-cap-padding-x)); // stylelint-disable-line function-disallowed-list
margin-right: calc(-.5 * var(--#{variables.$prefix}card-cap-padding-x)); // stylelint-disable-line function-disallowed-list
margin-left: calc(-.5 * var(--#{variables.$prefix}card-cap-padding-x)); // stylelint-disable-line function-disallowed-list
}
// Card image
@ -155,8 +160,8 @@
right: 0;
bottom: 0;
left: 0;
padding: var(--#{$prefix}card-img-overlay-padding);
@include border-radius(var(--#{$prefix}card-inner-border-radius));
padding: var(--#{variables.$prefix}card-img-overlay-padding);
@include border-radius.border-radius(var(--#{variables.$prefix}card-inner-border-radius));
}
.card-img,
@ -167,12 +172,12 @@
.card-img,
.card-img-top {
@include border-top-radius(var(--#{$prefix}card-inner-border-radius));
@include border-radius.border-top-radius(var(--#{variables.$prefix}card-inner-border-radius));
}
.card-img,
.card-img-bottom {
@include border-bottom-radius(var(--#{$prefix}card-inner-border-radius));
@include border-radius.border-bottom-radius(var(--#{variables.$prefix}card-inner-border-radius));
}
@ -184,10 +189,10 @@
// The child selector allows nested `.card` within `.card-group`
// to display properly.
> .card {
margin-bottom: var(--#{$prefix}card-group-margin);
margin-bottom: var(--#{variables.$prefix}card-group-margin);
}
@include media-breakpoint-up(sm) {
@include breakpoints.media-breakpoint-up(sm) {
display: flex;
flex-flow: row wrap;
// The child selector allows nested `.card` within `.card-group`
@ -203,9 +208,9 @@
}
// Handle rounded corners
@if $enable-rounded {
@if variables.$enable-rounded {
&:not(:last-child) {
@include border-end-radius(0);
@include border-radius.border-end-radius(0);
.card-img-top,
.card-header {
@ -220,7 +225,7 @@
}
&:not(:first-child) {
@include border-start-radius(0);
@include border-radius.border-start-radius(0);
.card-img-top,
.card-header {

84
scss/_carousel.scss
View File

@ -1,3 +1,9 @@
@use "functions";
@use "mixins/clearfix";
@use "mixins/color-mode";
@use "mixins/transition";
@use "variables";
// Notes on the classes:
//
// 1. .carousel.pointer-event should ideally be pan-y (to allow for users to scroll vertically)
@ -23,7 +29,7 @@
position: relative;
width: 100%;
overflow: hidden;
@include clearfix();
@include clearfix.clearfix();
}
.carousel-item {
@ -33,7 +39,7 @@
width: 100%;
margin-right: -100%;
backface-visibility: hidden;
@include transition($carousel-transition);
@include transition.transition(variables.$carousel-transition);
}
.carousel-item.active,
@ -75,7 +81,7 @@
.active.carousel-item-end {
z-index: 0;
opacity: 0;
@include transition(opacity 0s $carousel-transition-duration);
@include transition.transition(opacity 0s variables.$carousel-transition-duration);
}
}
@ -94,49 +100,49 @@
display: flex; // 1. allow flex styles
align-items: center; // 2. vertically center contents
justify-content: center; // 3. horizontally center contents
width: $carousel-control-width;
width: variables.$carousel-control-width;
padding: 0;
color: $carousel-control-color;
color: variables.$carousel-control-color;
text-align: center;
background: none;
border: 0;
opacity: $carousel-control-opacity;
@include transition($carousel-control-transition);
opacity: variables.$carousel-control-opacity;
@include transition.transition(variables.$carousel-control-transition);
// Hover/focus state
&:hover,
&:focus {
color: $carousel-control-color;
color: variables.$carousel-control-color;
text-decoration: none;
outline: 0;
opacity: $carousel-control-hover-opacity;
opacity: variables.$carousel-control-hover-opacity;
}
}
.carousel-control-prev {
left: 0;
background-image: if($enable-gradients, linear-gradient(90deg, rgba($black, .25), rgba($black, .001)), null);
background-image: if(variables.$enable-gradients, linear-gradient(90deg, rgba(variables.$black, .25), rgba(variables.$black, .001)), null);
}
.carousel-control-next {
right: 0;
background-image: if($enable-gradients, linear-gradient(270deg, rgba($black, .25), rgba($black, .001)), null);
background-image: if(variables.$enable-gradients, linear-gradient(270deg, rgba(variables.$black, .25), rgba(variables.$black, .001)), null);
}
// Icons for within
.carousel-control-prev-icon,
.carousel-control-next-icon {
display: inline-block;
width: $carousel-control-icon-width;
height: $carousel-control-icon-width;
width: variables.$carousel-control-icon-width;
height: variables.$carousel-control-icon-width;
background-repeat: no-repeat;
background-position: 50%;
background-size: 100% 100%;
}
.carousel-control-prev-icon {
background-image: escape-svg($carousel-control-prev-icon-bg) #{"/*rtl:" + escape-svg($carousel-control-next-icon-bg) + "*/"};
background-image: functions.escape-svg(variables.$carousel-control-prev-icon-bg) #{"/*rtl:" + functions.escape-svg(variables.$carousel-control-next-icon-bg) + "*/"};
}
.carousel-control-next-icon {
background-image: escape-svg($carousel-control-next-icon-bg) #{"/*rtl:" + escape-svg($carousel-control-prev-icon-bg) + "*/"};
background-image: functions.escape-svg(variables.$carousel-control-next-icon-bg) #{"/*rtl:" + functions.escape-svg(variables.$carousel-control-prev-icon-bg) + "*/"};
}
// Optional indicator pips/controls
@ -154,32 +160,32 @@
justify-content: center;
padding: 0;
// Use the .carousel-control's width as margin so we don't overlay those
margin-right: $carousel-control-width;
margin-right: variables.$carousel-control-width;
margin-bottom: 1rem;
margin-left: $carousel-control-width;
margin-left: variables.$carousel-control-width;
[data-bs-target] {
box-sizing: content-box;
flex: 0 1 auto;
width: $carousel-indicator-width;
height: $carousel-indicator-height;
width: variables.$carousel-indicator-width;
height: variables.$carousel-indicator-height;
padding: 0;
margin-right: $carousel-indicator-spacer;
margin-left: $carousel-indicator-spacer;
margin-right: variables.$carousel-indicator-spacer;
margin-left: variables.$carousel-indicator-spacer;
text-indent: -999px;
cursor: pointer;
background-color: $carousel-indicator-active-bg;
background-color: variables.$carousel-indicator-active-bg;
background-clip: padding-box;
border: 0;
// Use transparent borders to increase the hit area by 10px on top and bottom.
border-top: $carousel-indicator-hit-area-height solid transparent;
border-bottom: $carousel-indicator-hit-area-height solid transparent;
opacity: $carousel-indicator-opacity;
@include transition($carousel-indicator-transition);
border-top: variables.$carousel-indicator-hit-area-height solid transparent;
border-bottom: variables.$carousel-indicator-hit-area-height solid transparent;
opacity: variables.$carousel-indicator-opacity;
@include transition.transition(variables.$carousel-indicator-transition);
}
.active {
opacity: $carousel-indicator-active-opacity;
opacity: variables.$carousel-indicator-active-opacity;
}
}
@ -190,12 +196,12 @@
.carousel-caption {
position: absolute;
right: (100% - $carousel-caption-width) * .5;
bottom: $carousel-caption-spacer;
left: (100% - $carousel-caption-width) * .5;
padding-top: $carousel-caption-padding-y;
padding-bottom: $carousel-caption-padding-y;
color: $carousel-caption-color;
right: (100% - variables.$carousel-caption-width) * .5;
bottom: variables.$carousel-caption-spacer;
left: (100% - variables.$carousel-caption-width) * .5;
padding-top: variables.$carousel-caption-padding-y;
padding-bottom: variables.$carousel-caption-padding-y;
color: variables.$carousel-caption-color;
text-align: center;
}
@ -204,15 +210,15 @@
@mixin carousel-dark() {
.carousel-control-prev-icon,
.carousel-control-next-icon {
filter: $carousel-dark-control-icon-filter;
filter: variables.$carousel-dark-control-icon-filter;
}
.carousel-indicators [data-bs-target] {
background-color: $carousel-dark-indicator-active-bg;
background-color: variables.$carousel-dark-indicator-active-bg;
}
.carousel-caption {
color: $carousel-dark-caption-color;
color: variables.$carousel-dark-caption-color;
}
}
@ -220,9 +226,9 @@
@include carousel-dark();
}
@if $enable-dark-mode {
@include color-mode(dark) {
@if $color-mode-type == "media-query" {
@if variables.$enable-dark-mode {
@include color-mode.color-mode(dark) {
@if variables.$color-mode-type == "media-query" {
.carousel {
@include carousel-dark();
}

51
scss/_close.scss
View File

@ -1,3 +1,8 @@
@use "functions";
@use "mixins/border-radius";
@use "mixins/color-mode";
@use "variables";
// Transparent background and border properties included for button version.
// iOS requires the button element instead of an anchor tag.
// If you want the anchor version, it requires `href="#"`.
@ -5,57 +10,57 @@
.btn-close {
// scss-docs-start close-css-vars
--#{$prefix}btn-close-color: #{$btn-close-color};
--#{$prefix}btn-close-bg: #{ escape-svg($btn-close-bg) };
--#{$prefix}btn-close-opacity: #{$btn-close-opacity};
--#{$prefix}btn-close-hover-opacity: #{$btn-close-hover-opacity};
--#{$prefix}btn-close-focus-shadow: #{$btn-close-focus-shadow};
--#{$prefix}btn-close-focus-opacity: #{$btn-close-focus-opacity};
--#{$prefix}btn-close-disabled-opacity: #{$btn-close-disabled-opacity};
--#{$prefix}btn-close-white-filter: #{$btn-close-white-filter};
--#{variables.$prefix}btn-close-color: #{variables.$btn-close-color};
--#{variables.$prefix}btn-close-bg: #{ functions.escape-svg(variables.$btn-close-bg) };
--#{variables.$prefix}btn-close-opacity: #{variables.$btn-close-opacity};
--#{variables.$prefix}btn-close-hover-opacity: #{variables.$btn-close-hover-opacity};
--#{variables.$prefix}btn-close-focus-shadow: #{variables.$btn-close-focus-shadow};
--#{variables.$prefix}btn-close-focus-opacity: #{variables.$btn-close-focus-opacity};
--#{variables.$prefix}btn-close-disabled-opacity: #{variables.$btn-close-disabled-opacity};
--#{variables.$prefix}btn-close-white-filter: #{variables.$btn-close-white-filter};
// scss-docs-end close-css-vars
box-sizing: content-box;
width: $btn-close-width;
height: $btn-close-height;
padding: $btn-close-padding-y $btn-close-padding-x;
color: var(--#{$prefix}btn-close-color);
background: transparent var(--#{$prefix}btn-close-bg) center / $btn-close-width auto no-repeat; // include transparent for button elements
width: variables.$btn-close-width;
height: variables.$btn-close-height;
padding: variables.$btn-close-padding-y variables.$btn-close-padding-x;
color: var(--#{variables.$prefix}btn-close-color);
background: transparent var(--#{variables.$prefix}btn-close-bg) center / variables.$btn-close-width auto no-repeat; // include transparent for button elements
border: 0; // for button elements
@include border-radius();
opacity: var(--#{$prefix}btn-close-opacity);
@include border-radius.border-radius();
opacity: var(--#{variables.$prefix}btn-close-opacity);
// Override <a>'s hover style
&:hover {
color: var(--#{$prefix}btn-close-color);
color: var(--#{variables.$prefix}btn-close-color);
text-decoration: none;
opacity: var(--#{$prefix}btn-close-hover-opacity);
opacity: var(--#{variables.$prefix}btn-close-hover-opacity);
}
&:focus {
outline: 0;
box-shadow: var(--#{$prefix}btn-close-focus-shadow);
opacity: var(--#{$prefix}btn-close-focus-opacity);
box-shadow: var(--#{variables.$prefix}btn-close-focus-shadow);
opacity: var(--#{variables.$prefix}btn-close-focus-opacity);
}
&:disabled,
&.disabled {
pointer-events: none;
user-select: none;
opacity: var(--#{$prefix}btn-close-disabled-opacity);
opacity: var(--#{variables.$prefix}btn-close-disabled-opacity);
}
}
@mixin btn-close-white() {
filter: var(--#{$prefix}btn-close-white-filter);
filter: var(--#{variables.$prefix}btn-close-white-filter);
}
.btn-close-white {
@include btn-close-white();
}
@if $enable-dark-mode {
@include color-mode(dark) {
@if variables.$enable-dark-mode {
@include color-mode.color-mode(dark) {
.btn-close {
@include btn-close-white();
}

16
scss/_containers.scss
View File

@ -1,22 +1,26 @@
@use "mixins/breakpoints";
@use "mixins/container";
@use "variables";
// Container widths
//
// Set the container width, and override it for fixed navbars in media queries.
@if $enable-container-classes {
@if variables.$enable-container-classes {
// Single container class with breakpoint max-widths
.container,
// 100% wide container at all breakpoints
.container-fluid {
@include make-container();
@include container.make-container();
}
// Responsive containers that are 100% wide until a breakpoint
@each $breakpoint, $container-max-width in $container-max-widths {
@each $breakpoint, $container-max-width in variables.$container-max-widths {
.container-#{$breakpoint} {
@extend .container-fluid;
}
@include media-breakpoint-up($breakpoint, $grid-breakpoints) {
@include breakpoints.media-breakpoint-up($breakpoint, variables.$grid-breakpoints) {
%responsive-container-#{$breakpoint} {
max-width: $container-max-width;
}
@ -24,9 +28,9 @@
// Extend each breakpoint which is smaller or equal to the current breakpoint
$extend-breakpoint: true;
@each $name, $width in $grid-breakpoints {
@each $name, $width in variables.$grid-breakpoints {
@if ($extend-breakpoint) {
.container#{breakpoint-infix($name, $grid-breakpoints)} {
.container#{breakpoints.breakpoint-infix($name, variables.$grid-breakpoints)} {
@extend %responsive-container-#{$breakpoint};
}

169
scss/_dropdown.scss
View File

@ -1,3 +1,12 @@
@use "sass:map";
@use "mixins/border-radius";
@use "mixins/box-shadow";
@use "mixins/breakpoints";
@use "mixins/caret";
@use "mixins/gradients";
@use "variables";
@use "vendor/rfs";
// The dropdown wrapper (`<div>`)
.dropup,
.dropend,
@ -12,70 +21,70 @@
white-space: nowrap;
// Generate the caret automatically
@include caret();
@include caret.caret();
}
// The dropdown menu
.dropdown-menu {
// scss-docs-start dropdown-css-vars
--#{$prefix}dropdown-zindex: #{$zindex-dropdown};
--#{$prefix}dropdown-min-width: #{$dropdown-min-width};
--#{$prefix}dropdown-padding-x: #{$dropdown-padding-x};
--#{$prefix}dropdown-padding-y: #{$dropdown-padding-y};
--#{$prefix}dropdown-spacer: #{$dropdown-spacer};
@include rfs($dropdown-font-size, --#{$prefix}dropdown-font-size);
--#{$prefix}dropdown-color: #{$dropdown-color};
--#{$prefix}dropdown-bg: #{$dropdown-bg};
--#{$prefix}dropdown-border-color: #{$dropdown-border-color};
--#{$prefix}dropdown-border-radius: #{$dropdown-border-radius};
--#{$prefix}dropdown-border-width: #{$dropdown-border-width};
--#{$prefix}dropdown-inner-border-radius: #{$dropdown-inner-border-radius};
--#{$prefix}dropdown-divider-bg: #{$dropdown-divider-bg};
--#{$prefix}dropdown-divider-margin-y: #{$dropdown-divider-margin-y};
--#{$prefix}dropdown-box-shadow: #{$dropdown-box-shadow};
--#{$prefix}dropdown-link-color: #{$dropdown-link-color};
--#{$prefix}dropdown-link-hover-color: #{$dropdown-link-hover-color};
--#{$prefix}dropdown-link-hover-bg: #{$dropdown-link-hover-bg};
--#{$prefix}dropdown-link-active-color: #{$dropdown-link-active-color};
--#{$prefix}dropdown-link-active-bg: #{$dropdown-link-active-bg};
--#{$prefix}dropdown-link-disabled-color: #{$dropdown-link-disabled-color};
--#{$prefix}dropdown-item-padding-x: #{$dropdown-item-padding-x};
--#{$prefix}dropdown-item-padding-y: #{$dropdown-item-padding-y};
--#{$prefix}dropdown-header-color: #{$dropdown-header-color};
--#{$prefix}dropdown-header-padding-x: #{$dropdown-header-padding-x};
--#{$prefix}dropdown-header-padding-y: #{$dropdown-header-padding-y};
--#{variables.$prefix}dropdown-zindex: #{variables.$zindex-dropdown};
--#{variables.$prefix}dropdown-min-width: #{variables.$dropdown-min-width};
--#{variables.$prefix}dropdown-padding-x: #{variables.$dropdown-padding-x};
--#{variables.$prefix}dropdown-padding-y: #{variables.$dropdown-padding-y};
--#{variables.$prefix}dropdown-spacer: #{variables.$dropdown-spacer};
@include rfs.rfs(variables.$dropdown-font-size, --#{variables.$prefix}dropdown-font-size);
--#{variables.$prefix}dropdown-color: #{variables.$dropdown-color};
--#{variables.$prefix}dropdown-bg: #{variables.$dropdown-bg};
--#{variables.$prefix}dropdown-border-color: #{variables.$dropdown-border-color};
--#{variables.$prefix}dropdown-border-radius: #{variables.$dropdown-border-radius};
--#{variables.$prefix}dropdown-border-width: #{variables.$dropdown-border-width};
--#{variables.$prefix}dropdown-inner-border-radius: #{variables.$dropdown-inner-border-radius};
--#{variables.$prefix}dropdown-divider-bg: #{variables.$dropdown-divider-bg};
--#{variables.$prefix}dropdown-divider-margin-y: #{variables.$dropdown-divider-margin-y};
--#{variables.$prefix}dropdown-box-shadow: #{variables.$dropdown-box-shadow};
--#{variables.$prefix}dropdown-link-color: #{variables.$dropdown-link-color};
--#{variables.$prefix}dropdown-link-hover-color: #{variables.$dropdown-link-hover-color};
--#{variables.$prefix}dropdown-link-hover-bg: #{variables.$dropdown-link-hover-bg};
--#{variables.$prefix}dropdown-link-active-color: #{variables.$dropdown-link-active-color};
--#{variables.$prefix}dropdown-link-active-bg: #{variables.$dropdown-link-active-bg};
--#{variables.$prefix}dropdown-link-disabled-color: #{variables.$dropdown-link-disabled-color};
--#{variables.$prefix}dropdown-item-padding-x: #{variables.$dropdown-item-padding-x};
--#{variables.$prefix}dropdown-item-padding-y: #{variables.$dropdown-item-padding-y};
--#{variables.$prefix}dropdown-header-color: #{variables.$dropdown-header-color};
--#{variables.$prefix}dropdown-header-padding-x: #{variables.$dropdown-header-padding-x};
--#{variables.$prefix}dropdown-header-padding-y: #{variables.$dropdown-header-padding-y};
// scss-docs-end dropdown-css-vars
position: absolute;
z-index: var(--#{$prefix}dropdown-zindex);
z-index: var(--#{variables.$prefix}dropdown-zindex);
display: none; // none by default, but block on "open" of the menu
min-width: var(--#{$prefix}dropdown-min-width);
padding: var(--#{$prefix}dropdown-padding-y) var(--#{$prefix}dropdown-padding-x);
min-width: var(--#{variables.$prefix}dropdown-min-width);
padding: var(--#{variables.$prefix}dropdown-padding-y) var(--#{variables.$prefix}dropdown-padding-x);
margin: 0; // Override default margin of ul
@include font-size(var(--#{$prefix}dropdown-font-size));
color: var(--#{$prefix}dropdown-color);
@include rfs.font-size(var(--#{variables.$prefix}dropdown-font-size));
color: var(--#{variables.$prefix}dropdown-color);
text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer)
list-style: none;
background-color: var(--#{$prefix}dropdown-bg);
background-color: var(--#{variables.$prefix}dropdown-bg);
background-clip: padding-box;
border: var(--#{$prefix}dropdown-border-width) solid var(--#{$prefix}dropdown-border-color);
@include border-radius(var(--#{$prefix}dropdown-border-radius));
@include box-shadow(var(--#{$prefix}dropdown-box-shadow));
border: var(--#{variables.$prefix}dropdown-border-width) solid var(--#{variables.$prefix}dropdown-border-color);
@include border-radius.border-radius(var(--#{variables.$prefix}dropdown-border-radius));
@include box-shadow.box-shadow(var(--#{variables.$prefix}dropdown-box-shadow));
&[data-bs-popper] {
top: 100%;
left: 0;
margin-top: var(--#{$prefix}dropdown-spacer);
margin-top: var(--#{variables.$prefix}dropdown-spacer);
}
@if $dropdown-padding-y == 0 {
@if variables.$dropdown-padding-y == 0 {
> .dropdown-item:first-child,
> li:first-child .dropdown-item {
@include border-top-radius(var(--#{$prefix}dropdown-inner-border-radius));
@include border-radius.border-top-radius(var(--#{variables.$prefix}dropdown-inner-border-radius));
}
> .dropdown-item:last-child,
> li:last-child .dropdown-item {
@include border-bottom-radius(var(--#{$prefix}dropdown-inner-border-radius));
@include border-radius.border-bottom-radius(var(--#{variables.$prefix}dropdown-inner-border-radius));
}
}
@ -85,9 +94,9 @@
// We deliberately hardcode the `bs-` prefix because we check
// this custom property in JS to determine Popper's positioning
@each $breakpoint in map-keys($grid-breakpoints) {
@include media-breakpoint-up($breakpoint) {
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
@each $breakpoint in map.keys(variables.$grid-breakpoints) {
@include breakpoints.media-breakpoint-up($breakpoint) {
$infix: breakpoints.breakpoint-infix($breakpoint, variables.$grid-breakpoints);
.dropdown-menu#{$infix}-start {
--bs-position: start;
@ -117,11 +126,11 @@
top: auto;
bottom: 100%;
margin-top: 0;
margin-bottom: var(--#{$prefix}dropdown-spacer);
margin-bottom: var(--#{variables.$prefix}dropdown-spacer);
}
.dropdown-toggle {
@include caret(up);
@include caret.caret(up);
}
}
@ -131,11 +140,11 @@
right: auto;
left: 100%;
margin-top: 0;
margin-left: var(--#{$prefix}dropdown-spacer);
margin-left: var(--#{variables.$prefix}dropdown-spacer);
}
.dropdown-toggle {
@include caret(end);
@include caret.caret(end);
&::after {
vertical-align: 0;
}
@ -148,11 +157,11 @@
right: 100%;
left: auto;
margin-top: 0;
margin-right: var(--#{$prefix}dropdown-spacer);
margin-right: var(--#{variables.$prefix}dropdown-spacer);
}
.dropdown-toggle {
@include caret(start);
@include caret.caret(start);
&::before {
vertical-align: 0;
}
@ -163,9 +172,9 @@
// Dividers (basically an `<hr>`) within the dropdown
.dropdown-divider {
height: 0;
margin: var(--#{$prefix}dropdown-divider-margin-y) 0;
margin: var(--#{variables.$prefix}dropdown-divider-margin-y) 0;
overflow: hidden;
border-top: 1px solid var(--#{$prefix}dropdown-divider-bg);
border-top: 1px solid var(--#{variables.$prefix}dropdown-divider-bg);
opacity: 1; // Revisit in v6 to de-dupe styles that conflict with <hr> element
}
@ -175,38 +184,38 @@
.dropdown-item {
display: block;
width: 100%; // For `<button>`s
padding: var(--#{$prefix}dropdown-item-padding-y) var(--#{$prefix}dropdown-item-padding-x);
padding: var(--#{variables.$prefix}dropdown-item-padding-y) var(--#{variables.$prefix}dropdown-item-padding-x);
clear: both;
font-weight: $font-weight-normal;
color: var(--#{$prefix}dropdown-link-color);
font-weight: variables.$font-weight-normal;
color: var(--#{variables.$prefix}dropdown-link-color);
text-align: inherit; // For `<button>`s
text-decoration: if($link-decoration == none, null, none);
text-decoration: if(variables.$link-decoration == none, null, none);
white-space: nowrap; // prevent links from randomly breaking onto new lines
background-color: transparent; // For `<button>`s
border: 0; // For `<button>`s
@include border-radius(var(--#{$prefix}dropdown-item-border-radius, 0));
@include border-radius.border-radius(var(--#{variables.$prefix}dropdown-item-border-radius, 0));
&:hover,
&:focus {
color: var(--#{$prefix}dropdown-link-hover-color);
text-decoration: if($link-hover-decoration == underline, none, null);
@include gradient-bg(var(--#{$prefix}dropdown-link-hover-bg));
color: var(--#{variables.$prefix}dropdown-link-hover-color);
text-decoration: if(variables.$link-hover-decoration == underline, none, null);
@include gradients.gradient-bg(var(--#{variables.$prefix}dropdown-link-hover-bg));
}
&.active,
&:active {
color: var(--#{$prefix}dropdown-link-active-color);
color: var(--#{variables.$prefix}dropdown-link-active-color);
text-decoration: none;
@include gradient-bg(var(--#{$prefix}dropdown-link-active-bg));
@include gradients.gradient-bg(var(--#{variables.$prefix}dropdown-link-active-bg));
}
&.disabled,
&:disabled {
color: var(--#{$prefix}dropdown-link-disabled-color);
color: var(--#{variables.$prefix}dropdown-link-disabled-color);
pointer-events: none;
background-color: transparent;
// Remove CSS gradients if they're enabled
background-image: if($enable-gradients, none, null);
background-image: if(variables.$enable-gradients, none, null);
}
}
@ -217,34 +226,34 @@
// Dropdown section headers
.dropdown-header {
display: block;
padding: var(--#{$prefix}dropdown-header-padding-y) var(--#{$prefix}dropdown-header-padding-x);
padding: var(--#{variables.$prefix}dropdown-header-padding-y) var(--#{variables.$prefix}dropdown-header-padding-x);
margin-bottom: 0; // for use with heading elements
@include font-size($font-size-sm);
color: var(--#{$prefix}dropdown-header-color);
@include rfs.font-size(variables.$font-size-sm);
color: var(--#{variables.$prefix}dropdown-header-color);
white-space: nowrap; // as with > li > a
}
// Dropdown text
.dropdown-item-text {
display: block;
padding: var(--#{$prefix}dropdown-item-padding-y) var(--#{$prefix}dropdown-item-padding-x);
color: var(--#{$prefix}dropdown-link-color);
padding: var(--#{variables.$prefix}dropdown-item-padding-y) var(--#{variables.$prefix}dropdown-item-padding-x);
color: var(--#{variables.$prefix}dropdown-link-color);
}
// Dark dropdowns
.dropdown-menu-dark {
// scss-docs-start dropdown-dark-css-vars
--#{$prefix}dropdown-color: #{$dropdown-dark-color};
--#{$prefix}dropdown-bg: #{$dropdown-dark-bg};
--#{$prefix}dropdown-border-color: #{$dropdown-dark-border-color};
--#{$prefix}dropdown-box-shadow: #{$dropdown-dark-box-shadow};
--#{$prefix}dropdown-link-color: #{$dropdown-dark-link-color};
--#{$prefix}dropdown-link-hover-color: #{$dropdown-dark-link-hover-color};
--#{$prefix}dropdown-divider-bg: #{$dropdown-dark-divider-bg};
--#{$prefix}dropdown-link-hover-bg: #{$dropdown-dark-link-hover-bg};
--#{$prefix}dropdown-link-active-color: #{$dropdown-dark-link-active-color};
--#{$prefix}dropdown-link-active-bg: #{$dropdown-dark-link-active-bg};
--#{$prefix}dropdown-link-disabled-color: #{$dropdown-dark-link-disabled-color};
--#{$prefix}dropdown-header-color: #{$dropdown-dark-header-color};
--#{variables.$prefix}dropdown-color: #{variables.$dropdown-dark-color};
--#{variables.$prefix}dropdown-bg: #{variables.$dropdown-dark-bg};
--#{variables.$prefix}dropdown-border-color: #{variables.$dropdown-dark-border-color};
--#{variables.$prefix}dropdown-box-shadow: #{variables.$dropdown-dark-box-shadow};
--#{variables.$prefix}dropdown-link-color: #{variables.$dropdown-dark-link-color};
--#{variables.$prefix}dropdown-link-hover-color: #{variables.$dropdown-dark-link-hover-color};
--#{variables.$prefix}dropdown-divider-bg: #{variables.$dropdown-dark-divider-bg};
--#{variables.$prefix}dropdown-link-hover-bg: #{variables.$dropdown-dark-link-hover-bg};
--#{variables.$prefix}dropdown-link-active-color: #{variables.$dropdown-dark-link-active-color};
--#{variables.$prefix}dropdown-link-active-bg: #{variables.$dropdown-dark-link-active-bg};
--#{variables.$prefix}dropdown-link-disabled-color: #{variables.$dropdown-dark-link-disabled-color};
--#{variables.$prefix}dropdown-header-color: #{variables.$dropdown-dark-header-color};
// scss-docs-end dropdown-dark-css-vars
}

18
scss/_forms.scss
View File

@ -1,9 +1,9 @@
@import "forms/labels";
@import "forms/form-text";
@import "forms/form-control";
@import "forms/form-select";
@import "forms/form-check";
@import "forms/form-range";
@import "forms/floating-labels";
@import "forms/input-group";
@import "forms/validation";
@use "forms/labels";
@use "forms/form-text";
@use "forms/form-control";
@use "forms/form-select";
@use "forms/form-check";
@use "forms/form-range";
@use "forms/floating-labels";
@use "forms/input-group";
@use "forms/validation";

92
scss/_functions.scss
View File

@ -1,16 +1,24 @@
@use "sass:color";
@use "sass:list";
@use "sass:map";
@use "sass:math";
@use "sass:meta";
@use "sass:string";
// @use "variables";
// Bootstrap functions
//
// Utility mixins and functions for evaluating source code across our variables, maps, and mixins.
// Ascending
// Used to evaluate Sass maps like our grid breakpoints.
@mixin _assert-ascending($map, $map-name) {
@mixin assert-ascending($map, $map-name) {
$prev-key: null;
$prev-num: null;
@each $key, $num in $map {
@if $prev-num == null or unit($num) == "%" or unit($prev-num) == "%" {
@if $prev-num == null or math.unit($num) == "%" or math.unit($prev-num) == "%" {
// Do nothing
} @else if not comparable($prev-num, $num) {
} @else if not math.compatible($prev-num, $num) {
@warn "Potentially invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} whose unit makes it incomparable to #{$prev-num}, the value of the previous key '#{$prev-key}' !";
} @else if $prev-num >= $num {
@warn "Invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} which isn't greater than #{$prev-num}, the value of the previous key '#{$prev-key}' !";
@ -22,10 +30,10 @@
// Starts at zero
// Used to ensure the min-width of the lowest breakpoint starts at 0.
@mixin _assert-starts-at-zero($map, $map-name: "$grid-breakpoints") {
@if length($map) > 0 {
$values: map-values($map);
$first-value: nth($values, 1);
@mixin assert-starts-at-zero($map, $map-name: "$grid-breakpoints") {
@if list.length($map) > 0 {
$values: map.values($map);
$first-value: list.nth($values, 1);
@if $first-value != 0 {
@warn "First breakpoint in #{$map-name} must start at 0, but starts at #{$first-value}.";
}
@ -34,17 +42,17 @@
// Colors
@function to-rgb($value) {
@return red($value), green($value), blue($value);
@return color.red($value), color.green($value), color.blue($value);
}
// stylelint-disable scss/dollar-variable-pattern
@function rgba-css-var($identifier, $target) {
@if $identifier == "body" and $target == "bg" {
@return rgba(var(--#{$prefix}#{$identifier}-bg-rgb), var(--#{$prefix}#{$target}-opacity));
@return rgba(var(--#{variables.$prefix}#{$identifier}-bg-rgb), var(--#{variables.$prefix}#{$target}-opacity));
} @if $identifier == "body" and $target == "text" {
@return rgba(var(--#{$prefix}#{$identifier}-color-rgb), var(--#{$prefix}#{$target}-opacity));
@return rgba(var(--#{variables.$prefix}#{$identifier}-color-rgb), var(--#{variables.$prefix}#{$target}-opacity));
} @else {
@return rgba(var(--#{$prefix}#{$identifier}-rgb), var(--#{$prefix}#{$target}-opacity));
@return rgba(var(--#{variables.$prefix}#{$identifier}-rgb), var(--#{variables.$prefix}#{$target}-opacity));
}
}
@ -55,10 +63,10 @@
// allow to pass the $key and $value of the map as an function argument
$_args: ();
@each $arg in $args {
$_args: append($_args, if($arg == "$key", $key, if($arg == "$value", $value, $arg)));
$_args: list.append($_args, if($arg == "$key", $key, if($arg == "$value", $value, $arg)));
}
$_map: map-merge($_map, ($key: call(get-function($func), $_args...)));
$_map: map.merge($_map, ($key: meta.call(meta.get-function($func), $_args...)));
}
@return $_map;
@ -68,7 +76,7 @@
@function varify($list) {
$result: null;
@each $entry in $list {
$result: append($result, var(--#{$prefix}#{$entry}), space);
$result: list.append($result, var(--#{variables.$prefix}#{$entry}), space);
}
@return $result;
}
@ -79,7 +87,7 @@
$result: ();
@each $key, $value in $map {
@if $key != 0 {
$result: map-merge($result, ("n" + $key: (-$value)));
$result: map.merge($result, ("n" + $key: (-$value)));
}
}
@return $result;
@ -89,8 +97,8 @@
@function map-get-multiple($map, $values) {
$result: ();
@each $key, $value in $map {
@if (index($values, $key) != null) {
$result: map-merge($result, ($key: $value));
@if (list.index($values, $key) != null) {
$result: map.merge($result, ($key: $value));
}
}
@return $result;
@ -101,7 +109,7 @@
$merged-maps: ();
@each $map in $maps {
$merged-maps: map-merge($merged-maps, $map);
$merged-maps: map.merge($merged-maps, $map);
}
@return $merged-maps;
}
@ -115,10 +123,10 @@
// @param {String} $replace ('') - New value
// @return {String} - Updated string
@function str-replace($string, $search, $replace: "") {
$index: str-index($string, $search);
$index: string.index($string, $search);
@if $index {
@return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
@return string.slice($string, 1, $index - 1) + $replace + str-replace(string.slice($string, $index + string.length($search)), $search, $replace);
}
@return $string;
@ -129,11 +137,11 @@
// Requires the use of quotes around data URIs.
@function escape-svg($string) {
@if str-index($string, "data:image/svg+xml") {
@each $char, $encoded in $escaped-characters {
@if string.index($string, "data:image/svg+xml") {
@each $char, $encoded in variables.$escaped-characters {
// Do not escape the url brackets
@if str-index($string, "url(") == 1 {
$string: url("#{str-replace(str-slice($string, 6, -3), $char, $encoded)}");
@if string.index($string, "url(") == 1 {
$string: url("#{str-replace(string.slice($string, 6, -3), $char, $encoded)}");
} @else {
$string: str-replace($string, $char, $encoded);
}
@ -151,7 +159,7 @@
$_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003 .0033 .0037 .004 .0044 .0048 .0052 .0056 .006 .0065 .007 .0075 .008 .0086 .0091 .0097 .0103 .011 .0116 .0123 .013 .0137 .0144 .0152 .016 .0168 .0176 .0185 .0194 .0203 .0212 .0222 .0232 .0242 .0252 .0262 .0273 .0284 .0296 .0307 .0319 .0331 .0343 .0356 .0369 .0382 .0395 .0409 .0423 .0437 .0452 .0467 .0482 .0497 .0513 .0529 .0545 .0561 .0578 .0595 .0612 .063 .0648 .0666 .0685 .0704 .0723 .0742 .0762 .0782 .0802 .0823 .0844 .0865 .0887 .0908 .0931 .0953 .0976 .0999 .1022 .1046 .107 .1095 .1119 .1144 .117 .1195 .1221 .1248 .1274 .1301 .1329 .1356 .1384 .1413 .1441 .147 .15 .1529 .1559 .159 .162 .1651 .1683 .1714 .1746 .1779 .1812 .1845 .1878 .1912 .1946 .1981 .2016 .2051 .2086 .2122 .2159 .2195 .2232 .227 .2307 .2346 .2384 .2423 .2462 .2502 .2542 .2582 .2623 .2664 .2705 .2747 .2789 .2831 .2874 .2918 .2961 .3005 .305 .3095 .314 .3185 .3231 .3278 .3325 .3372 .3419 .3467 .3515 .3564 .3613 .3663 .3712 .3763 .3813 .3864 .3916 .3968 .402 .4072 .4125 .4179 .4233 .4287 .4342 .4397 .4452 .4508 .4564 .4621 .4678 .4735 .4793 .4851 .491 .4969 .5029 .5089 .5149 .521 .5271 .5333 .5395 .5457 .552 .5583 .5647 .5711 .5776 .5841 .5906 .5972 .6038 .6105 .6172 .624 .6308 .6376 .6445 .6514 .6584 .6654 .6724 .6795 .6867 .6939 .7011 .7084 .7157 .7231 .7305 .7379 .7454 .7529 .7605 .7682 .7758 .7835 .7913 .7991 .807 .8148 .8228 .8308 .8388 .8469 .855 .8632 .8714 .8796 .8879 .8963 .9047 .9131 .9216 .9301 .9387 .9473 .956 .9647 .9734 .9823 .9911 1;
@function color-contrast($background, $color-contrast-dark: $color-contrast-dark, $color-contrast-light: $color-contrast-light, $min-contrast-ratio: $min-contrast-ratio) {
$foregrounds: $color-contrast-light, $color-contrast-dark, $white, $black;
$foregrounds: $color-contrast-light, $color-contrast-dark, variables.$white, variables.$black;
$max-ratio: 0;
$max-ratio-color: null;
@ -170,7 +178,7 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003
@return $max-ratio-color;
}
@function contrast-ratio($background, $foreground: $color-contrast-light) {
@function contrast-ratio($background, $foreground: variables.$color-contrast-light) {
$l1: luminance($background);
$l2: luminance(opaque($background, $foreground));
@ -182,34 +190,36 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003
// See https://www.w3.org/TR/WCAG/#dfn-contrast-ratio
@function luminance($color) {
$rgb: (
"r": red($color),
"g": green($color),
"b": blue($color)
"r": color.red($color),
"g": color.green($color),
"b": color.blue($color)
);
@each $name, $value in $rgb {
$value: if(divide($value, 255) < .04045, divide(divide($value, 255), 12.92), nth($_luminance-list, $value + 1));
$rgb: map-merge($rgb, ($name: $value));
$value: if(divide($value, 255) < .04045, divide(divide($value, 255), 12.92), list.nth($_luminance-list, $value + 1));
$rgb: map.merge($rgb, ($name: $value));
}
@return (map-get($rgb, "r") * .2126) + (map-get($rgb, "g") * .7152) + (map-get($rgb, "b") * .0722);
@return (map.get($rgb, "r") * .2126) + (map.get($rgb, "g") * .7152) + (map.get($rgb, "b") * .0722);
}
// Return opaque color
// opaque(#fff, rgba(0, 0, 0, .5)) => #808080
@function opaque($background, $foreground) {
@return mix(rgba($foreground, 1), $background, opacity($foreground) * 100%);
@return color.mix(rgba($foreground, 1), $background, opacity($foreground) * 100%);
}
// mdo-do: Replace tint-color and shade-color with color.adjust(COLOR, $lightness: %).
// scss-docs-start color-functions
// Tint a color: mix a color with white
@function tint-color($color, $weight) {
@return mix(white, $color, $weight);
@return color.mix(white, $color, $weight);
}
// Shade a color: mix a color with black
@function shade-color($color, $weight) {
@return mix(black, $color, $weight);
@return color.mix(black, $color, $weight);
}
// Shade the color if the weight is positive, else tint it
@ -261,8 +271,8 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003
@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);
$dividend: math.abs($dividend);
$divisor: math.abs($divisor);
@if $dividend == 0 {
@return 0;
}
@ -287,16 +297,16 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003
}
}
$result: $result * $factor * $sign;
$dividend-unit: unit($dividend);
$divisor-unit: unit($divisor);
$dividend-unit: math.unit($dividend);
$divisor-unit: math.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);
@if ($dividend-unit != $divisor-unit and map.has-key($unit-map, $dividend-unit)) {
$result: $result * map.get($unit-map, $dividend-unit);
}
@return $result;
}

27
scss/_grid.scss
View File

@ -1,31 +1,34 @@
@use "mixins/grid";
@use "variables";
// Row
//
// Rows contain your columns.
:root {
@each $name, $value in $grid-breakpoints {
--#{$prefix}breakpoint-#{$name}: #{$value};
@each $name, $value in variables.$grid-breakpoints {
--#{variables.$prefix}breakpoint-#{$name}: #{$value};
}
}
@if $enable-grid-classes {
@if variables.$enable-grid-classes {
.row {
@include make-row();
@include grid.make-row();
> * {
@include make-col-ready();
@include grid.make-col-ready();
}
}
}
@if $enable-cssgrid {
@if variables.$enable-cssgrid {
.grid {
display: grid;
grid-template-rows: repeat(var(--#{$prefix}rows, 1), 1fr);
grid-template-columns: repeat(var(--#{$prefix}columns, #{$grid-columns}), 1fr);
gap: var(--#{$prefix}gap, #{$grid-gutter-width});
grid-template-rows: repeat(var(--#{variables.$prefix}rows, 1), 1fr);
grid-template-columns: repeat(var(--#{variables.$prefix}columns, #{variables.$grid-columns}), 1fr);
gap: var(--#{variables.$prefix}gap, #{variables.$grid-gutter-width});
@include make-cssgrid();
@include grid.make-cssgrid();
}
}
@ -34,6 +37,6 @@
//
// Common styles for small and large grid columns
@if $enable-grid-classes {
@include make-grid-columns();
@if variables.$enable-grid-classes {
@include grid.make-grid-columns();
}

24
scss/_helpers.scss
View File

@ -1,12 +1,12 @@
@import "helpers/clearfix";
@import "helpers/color-bg";
@import "helpers/colored-links";
@import "helpers/focus-ring";
@import "helpers/icon-link";
@import "helpers/ratio";
@import "helpers/position";
@import "helpers/stacks";
@import "helpers/visually-hidden";
@import "helpers/stretched-link";
@import "helpers/text-truncation";
@import "helpers/vr";
@use "helpers/clearfix";
@use "helpers/color-bg";
@use "helpers/colored-links";
@use "helpers/focus-ring";
@use "helpers/icon-link";
@use "helpers/ratio";
@use "helpers/position";
@use "helpers/stacks";
@use "helpers/visually-hidden";
@use "helpers/stretched-link";
@use "helpers/text-truncation";
@use "helpers/vr";

26
scss/_images.scss
View File

@ -1,3 +1,9 @@
@use "mixins/border-radius";
@use "mixins/box-shadow";
@use "mixins/image";
@use "variables";
@use "vendor/rfs";
// Responsive images (ensure images don't scale beyond their parents)
//
// This is purposefully opt-in via an explicit class rather than being the default for all `<img>`s.
@ -6,20 +12,20 @@
// which weren't expecting the images within themselves to be involuntarily resized.
// See also https://github.com/twbs/bootstrap/issues/18178
.img-fluid {
@include img-fluid();
@include image.img-fluid();
}
// Image thumbnails
.img-thumbnail {
padding: $thumbnail-padding;
background-color: $thumbnail-bg;
border: $thumbnail-border-width solid $thumbnail-border-color;
@include border-radius($thumbnail-border-radius);
@include box-shadow($thumbnail-box-shadow);
padding: variables.$thumbnail-padding;
background-color: variables.$thumbnail-bg;
border: variables.$thumbnail-border-width solid variables.$thumbnail-border-color;
@include border-radius.border-radius(variables.$thumbnail-border-radius);
@include box-shadow.box-shadow(variables.$thumbnail-box-shadow);
// Keep them at most 100% wide
@include img-fluid();
@include image.img-fluid();
}
//
@ -32,11 +38,11 @@
}
.figure-img {
margin-bottom: $spacer * .5;
margin-bottom: variables.$spacer * .5;
line-height: 1;
}
.figure-caption {
@include font-size($figure-caption-font-size);
color: $figure-caption-color;
@include rfs.font-size(variables.$figure-caption-font-size);
color: variables.$figure-caption-color;
}

125
scss/_list-group.scss
View File

@ -1,26 +1,31 @@
@use "sass:map";
@use "mixins/border-radius";
@use "mixins/breakpoints";
@use "variables";
// Base class
//
// Easily usable on <ul>, <ol>, or <div>.
.list-group {
// scss-docs-start list-group-css-vars
--#{$prefix}list-group-color: #{$list-group-color};
--#{$prefix}list-group-bg: #{$list-group-bg};
--#{$prefix}list-group-border-color: #{$list-group-border-color};
--#{$prefix}list-group-border-width: #{$list-group-border-width};
--#{$prefix}list-group-border-radius: #{$list-group-border-radius};
--#{$prefix}list-group-item-padding-x: #{$list-group-item-padding-x};
--#{$prefix}list-group-item-padding-y: #{$list-group-item-padding-y};
--#{$prefix}list-group-action-color: #{$list-group-action-color};
--#{$prefix}list-group-action-hover-color: #{$list-group-action-hover-color};
--#{$prefix}list-group-action-hover-bg: #{$list-group-hover-bg};
--#{$prefix}list-group-action-active-color: #{$list-group-action-active-color};
--#{$prefix}list-group-action-active-bg: #{$list-group-action-active-bg};
--#{$prefix}list-group-disabled-color: #{$list-group-disabled-color};
--#{$prefix}list-group-disabled-bg: #{$list-group-disabled-bg};
--#{$prefix}list-group-active-color: #{$list-group-active-color};
--#{$prefix}list-group-active-bg: #{$list-group-active-bg};
--#{$prefix}list-group-active-border-color: #{$list-group-active-border-color};
--#{variables.$prefix}list-group-color: #{variables.$list-group-color};
--#{variables.$prefix}list-group-bg: #{variables.$list-group-bg};
--#{variables.$prefix}list-group-border-color: #{variables.$list-group-border-color};
--#{variables.$prefix}list-group-border-width: #{variables.$list-group-border-width};
--#{variables.$prefix}list-group-border-radius: #{variables.$list-group-border-radius};
--#{variables.$prefix}list-group-item-padding-x: #{variables.$list-group-item-padding-x};
--#{variables.$prefix}list-group-item-padding-y: #{variables.$list-group-item-padding-y};
--#{variables.$prefix}list-group-action-color: #{variables.$list-group-action-color};
--#{variables.$prefix}list-group-action-hover-color: #{variables.$list-group-action-hover-color};
--#{variables.$prefix}list-group-action-hover-bg: #{variables.$list-group-hover-bg};
--#{variables.$prefix}list-group-action-active-color: #{variables.$list-group-action-active-color};
--#{variables.$prefix}list-group-action-active-bg: #{variables.$list-group-action-active-bg};
--#{variables.$prefix}list-group-disabled-color: #{variables.$list-group-disabled-color};
--#{variables.$prefix}list-group-disabled-bg: #{variables.$list-group-disabled-bg};
--#{variables.$prefix}list-group-active-color: #{variables.$list-group-active-color};
--#{variables.$prefix}list-group-active-bg: #{variables.$list-group-active-bg};
--#{variables.$prefix}list-group-active-border-color: #{variables.$list-group-active-border-color};
// scss-docs-end list-group-css-vars
display: flex;
@ -29,7 +34,7 @@
// No need to set list-style: none; since .list-group-item is block level
padding-left: 0; // reset padding because ul and ol
margin-bottom: 0;
@include border-radius(var(--#{$prefix}list-group-border-radius));
@include border-radius.border-radius(var(--#{variables.$prefix}list-group-border-radius));
}
.list-group-numbered {
@ -50,21 +55,21 @@
.list-group-item-action {
width: 100%; // For `<button>`s (anchors become 100% by default though)
color: var(--#{$prefix}list-group-action-color);
color: var(--#{variables.$prefix}list-group-action-color);
text-align: inherit; // For `<button>`s (anchors inherit)
// Hover state
&:hover,
&:focus {
z-index: 1; // Place hover/focus items above their siblings for proper border styling
color: var(--#{$prefix}list-group-action-hover-color);
color: var(--#{variables.$prefix}list-group-action-hover-color);
text-decoration: none;
background-color: var(--#{$prefix}list-group-action-hover-bg);
background-color: var(--#{variables.$prefix}list-group-action-hover-bg);
}
&:active {
color: var(--#{$prefix}list-group-action-active-color);
background-color: var(--#{$prefix}list-group-action-active-bg);
color: var(--#{variables.$prefix}list-group-action-active-color);
background-color: var(--#{variables.$prefix}list-group-action-active-bg);
}
}
@ -75,33 +80,33 @@
.list-group-item {
position: relative;
display: block;
padding: var(--#{$prefix}list-group-item-padding-y) var(--#{$prefix}list-group-item-padding-x);
color: var(--#{$prefix}list-group-color);
text-decoration: if($link-decoration == none, null, none);
background-color: var(--#{$prefix}list-group-bg);
border: var(--#{$prefix}list-group-border-width) solid var(--#{$prefix}list-group-border-color);
padding: var(--#{variables.$prefix}list-group-item-padding-y) var(--#{variables.$prefix}list-group-item-padding-x);
color: var(--#{variables.$prefix}list-group-color);
text-decoration: if(variables.$link-decoration == none, null, none);
background-color: var(--#{variables.$prefix}list-group-bg);
border: var(--#{variables.$prefix}list-group-border-width) solid var(--#{variables.$prefix}list-group-border-color);
&:first-child {
@include border-top-radius(inherit);
@include border-radius.border-top-radius(inherit);
}
&:last-child {
@include border-bottom-radius(inherit);
@include border-radius.border-bottom-radius(inherit);
}
&.disabled,
&:disabled {
color: var(--#{$prefix}list-group-disabled-color);
color: var(--#{variables.$prefix}list-group-disabled-color);
pointer-events: none;
background-color: var(--#{$prefix}list-group-disabled-bg);
background-color: var(--#{variables.$prefix}list-group-disabled-bg);
}
// Include both here for `<a>`s and `<button>`s
&.active {
z-index: 2; // Place active items above their siblings for proper border styling
color: var(--#{$prefix}list-group-active-color);
background-color: var(--#{$prefix}list-group-active-bg);
border-color: var(--#{$prefix}list-group-active-border-color);
color: var(--#{variables.$prefix}list-group-active-color);
background-color: var(--#{variables.$prefix}list-group-active-bg);
border-color: var(--#{variables.$prefix}list-group-active-border-color);
}
// stylelint-disable-next-line scss/selector-no-redundant-nesting-selector
@ -109,8 +114,8 @@
border-top-width: 0;
&.active {
margin-top: calc(-1 * var(--#{$prefix}list-group-border-width)); // stylelint-disable-line function-disallowed-list
border-top-width: var(--#{$prefix}list-group-border-width);
margin-top: calc(-1 * var(--#{variables.$prefix}list-group-border-width)); // stylelint-disable-line function-disallowed-list
border-top-width: var(--#{variables.$prefix}list-group-border-width);
}
}
}
@ -119,22 +124,22 @@
//
// Change the layout of list group items from vertical (default) to horizontal.
@each $breakpoint in map-keys($grid-breakpoints) {
@include media-breakpoint-up($breakpoint) {
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
@each $breakpoint in map.keys(variables.$grid-breakpoints) {
@include breakpoints.media-breakpoint-up($breakpoint) {
$infix: breakpoints.breakpoint-infix($breakpoint, variables.$grid-breakpoints);
.list-group-horizontal#{$infix} {
flex-direction: row;
> .list-group-item {
&:first-child:not(:last-child) {
@include border-bottom-start-radius(var(--#{$prefix}list-group-border-radius));
@include border-top-end-radius(0);
@include border-radius.border-bottom-start-radius(var(--#{variables.$prefix}list-group-border-radius));
@include border-radius.border-top-end-radius(0);
}
&:last-child:not(:first-child) {
@include border-top-end-radius(var(--#{$prefix}list-group-border-radius));
@include border-bottom-start-radius(0);
@include border-radius.border-top-end-radius(var(--#{variables.$prefix}list-group-border-radius));
@include border-radius.border-bottom-start-radius(0);
}
&.active {
@ -142,12 +147,12 @@
}
+ .list-group-item {
border-top-width: var(--#{$prefix}list-group-border-width);
border-top-width: var(--#{variables.$prefix}list-group-border-width);
border-left-width: 0;
&.active {
margin-left: calc(-1 * var(--#{$prefix}list-group-border-width)); // stylelint-disable-line function-disallowed-list
border-left-width: var(--#{$prefix}list-group-border-width);
margin-left: calc(-1 * var(--#{variables.$prefix}list-group-border-width)); // stylelint-disable-line function-disallowed-list
border-left-width: var(--#{variables.$prefix}list-group-border-width);
}
}
}
@ -162,10 +167,10 @@
// useful within other components (e.g., cards).
.list-group-flush {
@include border-radius(0);
@include border-radius.border-radius(0);
> .list-group-item {
border-width: 0 0 var(--#{$prefix}list-group-border-width);
border-width: 0 0 var(--#{variables.$prefix}list-group-border-width);
&:last-child {
border-bottom-width: 0;
@ -180,18 +185,18 @@
// Add modifier classes to change text and background color on individual items.
// Organizationally, this must come after the `:hover` states.
@each $state in map-keys($theme-colors) {
@each $state in map.keys(variables.$theme-colors) {
.list-group-item-#{$state} {
--#{$prefix}list-group-color: var(--#{$prefix}#{$state}-text-emphasis);
--#{$prefix}list-group-bg: var(--#{$prefix}#{$state}-bg-subtle);
--#{$prefix}list-group-border-color: var(--#{$prefix}#{$state}-border-subtle);
--#{$prefix}list-group-action-hover-color: var(--#{$prefix}emphasis-color);
--#{$prefix}list-group-action-hover-bg: var(--#{$prefix}#{$state}-border-subtle);
--#{$prefix}list-group-action-active-color: var(--#{$prefix}emphasis-color);
--#{$prefix}list-group-action-active-bg: var(--#{$prefix}#{$state}-border-subtle);
--#{$prefix}list-group-active-color: var(--#{$prefix}#{$state}-bg-subtle);
--#{$prefix}list-group-active-bg: var(--#{$prefix}#{$state}-text-emphasis);
--#{$prefix}list-group-active-border-color: var(--#{$prefix}#{$state}-text-emphasis);
--#{variables.$prefix}list-group-color: var(--#{variables.$prefix}#{$state}-text-emphasis);
--#{variables.$prefix}list-group-bg: var(--#{variables.$prefix}#{$state}-bg-subtle);
--#{variables.$prefix}list-group-border-color: var(--#{variables.$prefix}#{$state}-border-subtle);
--#{variables.$prefix}list-group-action-hover-color: var(--#{variables.$prefix}emphasis-color);
--#{variables.$prefix}list-group-action-hover-bg: var(--#{variables.$prefix}#{$state}-border-subtle);
--#{variables.$prefix}list-group-action-active-color: var(--#{variables.$prefix}emphasis-color);
--#{variables.$prefix}list-group-action-active-bg: var(--#{variables.$prefix}#{$state}-border-subtle);
--#{variables.$prefix}list-group-active-color: var(--#{variables.$prefix}#{$state}-bg-subtle);
--#{variables.$prefix}list-group-active-bg: var(--#{variables.$prefix}#{$state}-text-emphasis);
--#{variables.$prefix}list-group-active-border-color: var(--#{variables.$prefix}#{$state}-text-emphasis);
}
}
// scss-docs-end list-group-modifiers

22
scss/_maps.scss
View File

@ -1,3 +1,9 @@
@use "sass:map";
@use "setup/variables" as *;
@use "setup/functions" as *;
// @use "functions";
// @use "variables";
// Re-assigned maps
//
// Placed here so that others can override the default Sass maps and see automatic updates to utilities and more.
@ -94,13 +100,13 @@ $theme-colors-border-subtle-dark: null !default;
//
// Extends the default `$theme-colors` maps to help create our utilities.
// Come v6, we'll de-dupe these variables. Until then, for backward compatibility, we keep them to reassign.
// Come v6, we'll de-dupe these Until then, for backward compatibility, we keep them to reassign.
// scss-docs-start utilities-colors
$utilities-colors: $theme-colors-rgb !default;
// scss-docs-end utilities-colors
// scss-docs-start utilities-text-colors
$utilities-text: map-merge(
$utilities-text: map.merge(
$utilities-colors,
(
"black": to-rgb($black),
@ -108,7 +114,7 @@ $utilities-text: map-merge(
"body": to-rgb($body-color)
)
) !default;
$utilities-text-colors: map-loop($utilities-text, rgba-css-var, "$key", "text") !default;
$utilities-text-colors: map-loop($utilities-text, rgba-css-var, "$key", "text", "bs") !default;
$utilities-text-emphasis-colors: (
"primary-emphasis": var(--#{$prefix}primary-text-emphasis),
@ -123,7 +129,7 @@ $utilities-text-emphasis-colors: (
// scss-docs-end utilities-text-colors
// scss-docs-start utilities-bg-colors
$utilities-bg: map-merge(
$utilities-bg: map.merge(
$utilities-colors,
(
"black": to-rgb($black),
@ -131,7 +137,7 @@ $utilities-bg: map-merge(
"body": to-rgb($body-bg)
)
) !default;
$utilities-bg-colors: map-loop($utilities-bg, rgba-css-var, "$key", "bg") !default;
$utilities-bg-colors: map-loop($utilities-bg, rgba-css-var, "$key", "bg", "bs") !default;
$utilities-bg-subtle: (
"primary-subtle": var(--#{$prefix}primary-bg-subtle),
@ -146,14 +152,14 @@ $utilities-bg-subtle: (
// scss-docs-end utilities-bg-colors
// scss-docs-start utilities-border-colors
$utilities-border: map-merge(
$utilities-border: map.merge(
$utilities-colors,
(
"black": to-rgb($black),
"white": to-rgb($white)
)
) !default;
$utilities-border-colors: map-loop($utilities-border, rgba-css-var, "$key", "border") !default;
$utilities-border-colors: map-loop($utilities-border, rgba-css-var, "$key", "border", "bs") !default;
$utilities-border-subtle: (
"primary-subtle": var(--#{$prefix}primary-border-subtle),
@ -167,7 +173,7 @@ $utilities-border-subtle: (
) !default;
// scss-docs-end utilities-border-colors
$utilities-links-underline: map-loop($utilities-colors, rgba-css-var, "$key", "link-underline") !default;
$utilities-links-underline: map-loop($utilities-colors, rgba-css-var, "$key", "link-underline", "bs") !default;
$negative-spacers: if($enable-negative-margins, negativify-map($spacers), null) !default;

70
scss/_mixins.scss
View File

@ -1,42 +1,42 @@
// Toggles
//
// Used in conjunction with global variables to enable certain theme features.
// // Toggles
// //
// // Used in conjunction with global variables to enable certain theme features.
// Vendor
@import "vendor/rfs";
// // Vendor
// @use "vendor/rfs";
// Deprecate
@import "mixins/deprecate";
// // Deprecate
// @use "mixins/deprecate";
// Helpers
@import "mixins/breakpoints";
@import "mixins/color-mode";
@import "mixins/color-scheme";
@import "mixins/image";
@import "mixins/resize";
@import "mixins/visually-hidden";
@import "mixins/reset-text";
@import "mixins/text-truncate";
// // Helpers
// @use "mixins/breakpoints";
// @use "mixins/color-mode";
// @use "mixins/color-scheme";
// @use "mixins/image";
// @use "mixins/resize";
// @use "mixins/visually-hidden";
// @use "mixins/reset-text";
// @use "mixins/text-truncate";
// Utilities
@import "mixins/utilities";
// // Utilities
// @use "mixins/utilities";
// Components
@import "mixins/backdrop";
@import "mixins/buttons";
@import "mixins/caret";
@import "mixins/pagination";
@import "mixins/lists";
@import "mixins/forms";
@import "mixins/table-variants";
// // Components
// @use "mixins/backdrop";
// @use "mixins/buttons";
// @use "mixins/caret";
// @use "mixins/pagination";
// @use "mixins/lists";
// @use "mixins/forms";
// @use "mixins/table-variants";
// Skins
@import "mixins/border-radius";
@import "mixins/box-shadow";
@import "mixins/gradients";
@import "mixins/transition";
// // Skins
// @use "mixins/border-radius";
// @use "mixins/box-shadow";
// @use "mixins/gradients";
// @use "mixins/transition";
// Layout
@import "mixins/clearfix";
@import "mixins/container";
@import "mixins/grid";
// // Layout
// @use "mixins/clearfix";
// @use "mixins/container";
// @use "mixins/grid";

136
scss/_modal.scss
View File

@ -1,3 +1,11 @@
@use "sass:map";
@use "mixins/backdrop";
@use "mixins/border-radius";
@use "mixins/box-shadow";
@use "mixins/breakpoints";
@use "mixins/transition";
@use "variables";
// stylelint-disable function-disallowed-list
// .modal-open - body class for killing the scroll
@ -9,33 +17,33 @@
// Container that the modal scrolls within
.modal {
// scss-docs-start modal-css-vars
--#{$prefix}modal-zindex: #{$zindex-modal};
--#{$prefix}modal-width: #{$modal-md};
--#{$prefix}modal-padding: #{$modal-inner-padding};
--#{$prefix}modal-margin: #{$modal-dialog-margin};
--#{$prefix}modal-color: #{$modal-content-color};
--#{$prefix}modal-bg: #{$modal-content-bg};
--#{$prefix}modal-border-color: #{$modal-content-border-color};
--#{$prefix}modal-border-width: #{$modal-content-border-width};
--#{$prefix}modal-border-radius: #{$modal-content-border-radius};
--#{$prefix}modal-box-shadow: #{$modal-content-box-shadow-xs};
--#{$prefix}modal-inner-border-radius: #{$modal-content-inner-border-radius};
--#{$prefix}modal-header-padding-x: #{$modal-header-padding-x};
--#{$prefix}modal-header-padding-y: #{$modal-header-padding-y};
--#{$prefix}modal-header-padding: #{$modal-header-padding}; // Todo in v6: Split this padding into x and y
--#{$prefix}modal-header-border-color: #{$modal-header-border-color};
--#{$prefix}modal-header-border-width: #{$modal-header-border-width};
--#{$prefix}modal-title-line-height: #{$modal-title-line-height};
--#{$prefix}modal-footer-gap: #{$modal-footer-margin-between};
--#{$prefix}modal-footer-bg: #{$modal-footer-bg};
--#{$prefix}modal-footer-border-color: #{$modal-footer-border-color};
--#{$prefix}modal-footer-border-width: #{$modal-footer-border-width};
--#{variables.$prefix}modal-zindex: #{variables.$zindex-modal};
--#{variables.$prefix}modal-width: #{variables.$modal-md};
--#{variables.$prefix}modal-padding: #{variables.$modal-inner-padding};
--#{variables.$prefix}modal-margin: #{variables.$modal-dialog-margin};
--#{variables.$prefix}modal-color: #{variables.$modal-content-color};
--#{variables.$prefix}modal-bg: #{variables.$modal-content-bg};
--#{variables.$prefix}modal-border-color: #{variables.$modal-content-border-color};
--#{variables.$prefix}modal-border-width: #{variables.$modal-content-border-width};
--#{variables.$prefix}modal-border-radius: #{variables.$modal-content-border-radius};
--#{variables.$prefix}modal-box-shadow: #{variables.$modal-content-box-shadow-xs};
--#{variables.$prefix}modal-inner-border-radius: #{variables.$modal-content-inner-border-radius};
--#{variables.$prefix}modal-header-padding-x: #{variables.$modal-header-padding-x};
--#{variables.$prefix}modal-header-padding-y: #{variables.$modal-header-padding-y};
--#{variables.$prefix}modal-header-padding: #{variables.$modal-header-padding}; // Todo in v6: Split this padding into x and y
--#{variables.$prefix}modal-header-border-color: #{variables.$modal-header-border-color};
--#{variables.$prefix}modal-header-border-width: #{variables.$modal-header-border-width};
--#{variables.$prefix}modal-title-line-height: #{variables.$modal-title-line-height};
--#{variables.$prefix}modal-footer-gap: #{variables.$modal-footer-margin-between};
--#{variables.$prefix}modal-footer-bg: #{variables.$modal-footer-bg};
--#{variables.$prefix}modal-footer-border-color: #{variables.$modal-footer-border-color};
--#{variables.$prefix}modal-footer-border-width: #{variables.$modal-footer-border-width};
// scss-docs-end modal-css-vars
position: fixed;
top: 0;
left: 0;
z-index: var(--#{$prefix}modal-zindex);
z-index: var(--#{variables.$prefix}modal-zindex);
display: none;
width: 100%;
height: 100%;
@ -53,27 +61,27 @@
.modal-dialog {
position: relative;
width: auto;
margin: var(--#{$prefix}modal-margin);
margin: var(--#{variables.$prefix}modal-margin);
// allow clicks to pass through for custom click handling to close modal
pointer-events: none;
// When fading in the modal, animate it to slide down
.modal.fade & {
transform: $modal-fade-transform;
@include transition($modal-transition);
transform: variables.$modal-fade-transform;
@include transition.transition(variables.$modal-transition);
}
.modal.show & {
transform: $modal-show-transform;
transform: variables.$modal-show-transform;
}
// When trying to close, animate focus to scale
.modal.modal-static & {
transform: $modal-scale-transform;
transform: variables.$modal-scale-transform;
}
}
.modal-dialog-scrollable {
height: calc(100% - var(--#{$prefix}modal-margin) * 2);
height: calc(100% - var(--#{variables.$prefix}modal-margin) * 2);
.modal-content {
max-height: 100%;
@ -88,7 +96,7 @@
.modal-dialog-centered {
display: flex;
align-items: center;
min-height: calc(100% - var(--#{$prefix}modal-margin) * 2);
min-height: calc(100% - var(--#{variables.$prefix}modal-margin) * 2);
}
// Actual modal
@ -98,13 +106,13 @@
flex-direction: column;
width: 100%; // Ensure `.modal-content` extends the full width of the parent `.modal-dialog`
// counteract the pointer-events: none; in the .modal-dialog
color: var(--#{$prefix}modal-color);
color: var(--#{variables.$prefix}modal-color);
pointer-events: auto;
background-color: var(--#{$prefix}modal-bg);
background-color: var(--#{variables.$prefix}modal-bg);
background-clip: padding-box;
border: var(--#{$prefix}modal-border-width) solid var(--#{$prefix}modal-border-color);
@include border-radius(var(--#{$prefix}modal-border-radius));
@include box-shadow(var(--#{$prefix}modal-box-shadow));
border: var(--#{variables.$prefix}modal-border-width) solid var(--#{variables.$prefix}modal-border-color);
@include border-radius.border-radius(var(--#{variables.$prefix}modal-border-radius));
@include box-shadow.box-shadow(var(--#{variables.$prefix}modal-box-shadow));
// Remove focus outline from opened modal
outline: 0;
}
@ -112,12 +120,12 @@
// Modal background
.modal-backdrop {
// scss-docs-start modal-backdrop-css-vars
--#{$prefix}backdrop-zindex: #{$zindex-modal-backdrop};
--#{$prefix}backdrop-bg: #{$modal-backdrop-bg};
--#{$prefix}backdrop-opacity: #{$modal-backdrop-opacity};
--#{variables.$prefix}backdrop-zindex: #{variables.$zindex-modal-backdrop};
--#{variables.$prefix}backdrop-bg: #{variables.$modal-backdrop-bg};
--#{variables.$prefix}backdrop-opacity: #{variables.$modal-backdrop-opacity};
// scss-docs-end modal-backdrop-css-vars
@include overlay-backdrop(var(--#{$prefix}backdrop-zindex), var(--#{$prefix}backdrop-bg), var(--#{$prefix}backdrop-opacity));
@include backdrop.overlay-backdrop(var(--#{variables.$prefix}backdrop-zindex), var(--#{variables.$prefix}backdrop-bg), var(--#{variables.$prefix}backdrop-opacity));
}
// Modal header
@ -126,20 +134,20 @@
display: flex;
flex-shrink: 0;
align-items: center;
padding: var(--#{$prefix}modal-header-padding);
border-bottom: var(--#{$prefix}modal-header-border-width) solid var(--#{$prefix}modal-header-border-color);
@include border-top-radius(var(--#{$prefix}modal-inner-border-radius));
padding: var(--#{variables.$prefix}modal-header-padding);
border-bottom: var(--#{variables.$prefix}modal-header-border-width) solid var(--#{variables.$prefix}modal-header-border-color);
@include border-radius.border-top-radius(var(--#{variables.$prefix}modal-inner-border-radius));
.btn-close {
padding: calc(var(--#{$prefix}modal-header-padding-y) * .5) calc(var(--#{$prefix}modal-header-padding-x) * .5);
margin: calc(-.5 * var(--#{$prefix}modal-header-padding-y)) calc(-.5 * var(--#{$prefix}modal-header-padding-x)) calc(-.5 * var(--#{$prefix}modal-header-padding-y)) auto;
padding: calc(var(--#{variables.$prefix}modal-header-padding-y) * .5) calc(var(--#{variables.$prefix}modal-header-padding-x) * .5);
margin: calc(-.5 * var(--#{variables.$prefix}modal-header-padding-y)) calc(-.5 * var(--#{variables.$prefix}modal-header-padding-x)) calc(-.5 * var(--#{variables.$prefix}modal-header-padding-y)) auto;
}
}
// Title text within header
.modal-title {
margin-bottom: 0;
line-height: var(--#{$prefix}modal-title-line-height);
line-height: var(--#{variables.$prefix}modal-title-line-height);
}
// Modal body
@ -149,7 +157,7 @@
// Enable `flex-grow: 1` so that the body take up as much space as possible
// when there should be a fixed height on `.modal-dialog`.
flex: 1 1 auto;
padding: var(--#{$prefix}modal-padding);
padding: var(--#{variables.$prefix}modal-padding);
}
// Footer (for actions)
@ -159,57 +167,57 @@
flex-wrap: wrap;
align-items: center; // vertically center
justify-content: flex-end; // Right align buttons with flex property because text-align doesn't work on flex items
padding: calc(var(--#{$prefix}modal-padding) - var(--#{$prefix}modal-footer-gap) * .5);
background-color: var(--#{$prefix}modal-footer-bg);
border-top: var(--#{$prefix}modal-footer-border-width) solid var(--#{$prefix}modal-footer-border-color);
@include border-bottom-radius(var(--#{$prefix}modal-inner-border-radius));
padding: calc(var(--#{variables.$prefix}modal-padding) - var(--#{variables.$prefix}modal-footer-gap) * .5);
background-color: var(--#{variables.$prefix}modal-footer-bg);
border-top: var(--#{variables.$prefix}modal-footer-border-width) solid var(--#{variables.$prefix}modal-footer-border-color);
@include border-radius.border-bottom-radius(var(--#{variables.$prefix}modal-inner-border-radius));
// Place margin between footer elements
// This solution is far from ideal because of the universal selector usage,
// but is needed to fix https://github.com/twbs/bootstrap/issues/24800
> * {
margin: calc(var(--#{$prefix}modal-footer-gap) * .5); // Todo in v6: replace with gap on parent class
margin: calc(var(--#{variables.$prefix}modal-footer-gap) * .5); // Todo in v6: replace with gap on parent class
}
}
// Scale up the modal
@include media-breakpoint-up(sm) {
@include breakpoints.media-breakpoint-up(sm) {
.modal {
--#{$prefix}modal-margin: #{$modal-dialog-margin-y-sm-up};
--#{$prefix}modal-box-shadow: #{$modal-content-box-shadow-sm-up};
--#{variables.$prefix}modal-margin: #{variables.$modal-dialog-margin-y-sm-up};
--#{variables.$prefix}modal-box-shadow: #{variables.$modal-content-box-shadow-sm-up};
}
// Automatically set modal's width for larger viewports
.modal-dialog {
max-width: var(--#{$prefix}modal-width);
max-width: var(--#{variables.$prefix}modal-width);
margin-right: auto;
margin-left: auto;
}
.modal-sm {
--#{$prefix}modal-width: #{$modal-sm};
--#{variables.$prefix}modal-width: #{variables.$modal-sm};
}
}
@include media-breakpoint-up(lg) {
@include breakpoints.media-breakpoint-up(lg) {
.modal-lg,
.modal-xl {
--#{$prefix}modal-width: #{$modal-lg};
--#{variables.$prefix}modal-width: #{variables.$modal-lg};
}
}
@include media-breakpoint-up(xl) {
@include breakpoints.media-breakpoint-up(xl) {
.modal-xl {
--#{$prefix}modal-width: #{$modal-xl};
--#{variables.$prefix}modal-width: #{variables.$modal-xl};
}
}
// scss-docs-start modal-fullscreen-loop
@each $breakpoint in map-keys($grid-breakpoints) {
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
@each $breakpoint in map.keys(variables.$grid-breakpoints) {
$infix: breakpoints.breakpoint-infix($breakpoint, variables.$grid-breakpoints);
$postfix: if($infix != "", $infix + "-down", "");
@include media-breakpoint-down($breakpoint) {
@include breakpoints.media-breakpoint-down($breakpoint) {
.modal-fullscreen#{$postfix} {
width: 100vw;
max-width: none;
@ -219,12 +227,12 @@
.modal-content {
height: 100%;
border: 0;
@include border-radius(0);
@include border-radius.border-radius(0);
}
.modal-header,
.modal-footer {
@include border-radius(0);
@include border-radius.border-radius(0);
}
.modal-body {

100
scss/_nav.scss
View File

@ -1,3 +1,9 @@
@use "mixins/border-radius";
@use "mixins/gradients";
@use "mixins/transition";
@use "variables";
@use "vendor/rfs";
// Base class
//
// Kickstart any navigation component with a set of style resets. Works with
@ -5,13 +11,13 @@
.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};
--#{variables.$prefix}nav-link-padding-x: #{variables.$nav-link-padding-x};
--#{variables.$prefix}nav-link-padding-y: #{variables.$nav-link-padding-y};
@include rfs.rfs(variables.$nav-link-font-size, --#{variables.$prefix}nav-link-font-size);
--#{variables.$prefix}nav-link-font-weight: #{variables.$nav-link-font-weight};
--#{variables.$prefix}nav-link-color: #{variables.$nav-link-color};
--#{variables.$prefix}nav-link-hover-color: #{variables.$nav-link-hover-color};
--#{variables.$prefix}nav-link-disabled-color: #{variables.$nav-link-disabled-color};
// scss-docs-end nav-css-vars
display: flex;
@ -23,30 +29,30 @@
.nav-link {
display: block;
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);
padding: var(--#{variables.$prefix}nav-link-padding-y) var(--#{variables.$prefix}nav-link-padding-x);
@include rfs.font-size(var(--#{variables.$prefix}nav-link-font-size));
font-weight: var(--#{variables.$prefix}nav-link-font-weight);
color: var(--#{variables.$prefix}nav-link-color);
text-decoration: if(variables.$link-decoration == none, null, none);
background: none;
border: 0;
@include transition($nav-link-transition);
@include transition.transition(variables.$nav-link-transition);
&:hover,
&:focus {
color: var(--#{$prefix}nav-link-hover-color);
text-decoration: if($link-hover-decoration == underline, none, null);
color: var(--#{variables.$prefix}nav-link-hover-color);
text-decoration: if(variables.$link-hover-decoration == underline, none, null);
}
&:focus-visible {
outline: 0;
box-shadow: $nav-link-focus-box-shadow;
box-shadow: variables.$nav-link-focus-box-shadow;
}
// Disabled state lightens text
&.disabled,
&:disabled {
color: var(--#{$prefix}nav-link-disabled-color);
color: var(--#{variables.$prefix}nav-link-disabled-color);
pointer-events: none;
cursor: default;
}
@ -58,42 +64,42 @@
.nav-tabs {
// 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};
--#{variables.$prefix}nav-tabs-border-width: #{variables.$nav-tabs-border-width};
--#{variables.$prefix}nav-tabs-border-color: #{variables.$nav-tabs-border-color};
--#{variables.$prefix}nav-tabs-border-radius: #{variables.$nav-tabs-border-radius};
--#{variables.$prefix}nav-tabs-link-hover-border-color: #{variables.$nav-tabs-link-hover-border-color};
--#{variables.$prefix}nav-tabs-link-active-color: #{variables.$nav-tabs-link-active-color};
--#{variables.$prefix}nav-tabs-link-active-bg: #{variables.$nav-tabs-link-active-bg};
--#{variables.$prefix}nav-tabs-link-active-border-color: #{variables.$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);
border-bottom: var(--#{variables.$prefix}nav-tabs-border-width) solid var(--#{variables.$prefix}nav-tabs-border-color);
.nav-link {
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));
margin-bottom: calc(-1 * var(--#{variables.$prefix}nav-tabs-border-width)); // stylelint-disable-line function-disallowed-list
border: var(--#{variables.$prefix}nav-tabs-border-width) solid transparent;
@include border-radius.border-top-radius(var(--#{variables.$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);
border-color: var(--#{variables.$prefix}nav-tabs-link-hover-border-color);
}
}
.nav-link.active,
.nav-item.show .nav-link {
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);
color: var(--#{variables.$prefix}nav-tabs-link-active-color);
background-color: var(--#{variables.$prefix}nav-tabs-link-active-bg);
border-color: var(--#{variables.$prefix}nav-tabs-link-active-border-color);
}
.dropdown-menu {
// Make dropdown border overlap tab border
margin-top: calc(-1 * var(--#{$prefix}nav-tabs-border-width)); // stylelint-disable-line function-disallowed-list
margin-top: calc(-1 * var(--#{variables.$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);
@include border-radius.border-top-radius(0);
}
}
@ -104,19 +110,19 @@
.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};
--#{variables.$prefix}nav-pills-border-radius: #{variables.$nav-pills-border-radius};
--#{variables.$prefix}nav-pills-link-active-color: #{variables.$nav-pills-link-active-color};
--#{variables.$prefix}nav-pills-link-active-bg: #{variables.$nav-pills-link-active-bg};
// scss-docs-end nav-pills-css-vars
.nav-link {
@include border-radius(var(--#{$prefix}nav-pills-border-radius));
@include border-radius.border-radius(var(--#{variables.$prefix}nav-pills-border-radius));
}
.nav-link.active,
.show > .nav-link {
color: var(--#{$prefix}nav-pills-link-active-color);
@include gradient-bg(var(--#{$prefix}nav-pills-link-active-bg));
color: var(--#{variables.$prefix}nav-pills-link-active-color);
@include gradients.gradient-bg(var(--#{variables.$prefix}nav-pills-link-active-bg));
}
}
@ -127,17 +133,17 @@
.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};
--#{variables.$prefix}nav-underline-gap: #{variables.$nav-underline-gap};
--#{variables.$prefix}nav-underline-border-width: #{variables.$nav-underline-border-width};
--#{variables.$prefix}nav-underline-link-active-color: #{variables.$nav-underline-link-active-color};
// scss-docs-end nav-underline-css-vars
gap: var(--#{$prefix}nav-underline-gap);
gap: var(--#{variables.$prefix}nav-underline-gap);
.nav-link {
padding-right: 0;
padding-left: 0;
border-bottom: var(--#{$prefix}nav-underline-border-width) solid transparent;
border-bottom: var(--#{variables.$prefix}nav-underline-border-width) solid transparent;
&:hover,
&:focus {
@ -147,8 +153,8 @@
.nav-link.active,
.show > .nav-link {
font-weight: $font-weight-bold;
color: var(--#{$prefix}nav-underline-link-active-color);
font-weight: variables.$font-weight-bold;
color: var(--#{variables.$prefix}nav-underline-link-active-color);
border-bottom-color: currentcolor;
}
}

158
scss/_navbar.scss
View File

@ -1,3 +1,15 @@
@use "sass:map";
@use "functions";
@use "mixins/border-radius";
@use "mixins/box-shadow";
@use "mixins/breakpoints";
@use "mixins/color-mode";
@use "mixins/deprecate";
@use "mixins/gradients";
@use "mixins/transition";
@use "variables";
@use "vendor/rfs";
// Navbar
//
// Provide a static navbar from which we expand to create full-width, fixed, and
@ -5,26 +17,26 @@
.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};
--#{variables.$prefix}navbar-padding-x: #{if(variables.$navbar-padding-x == null, 0, variables.$navbar-padding-x)};
--#{variables.$prefix}navbar-padding-y: #{variables.$navbar-padding-y};
--#{variables.$prefix}navbar-color: #{variables.$navbar-light-color};
--#{variables.$prefix}navbar-hover-color: #{variables.$navbar-light-hover-color};
--#{variables.$prefix}navbar-disabled-color: #{variables.$navbar-light-disabled-color};
--#{variables.$prefix}navbar-active-color: #{variables.$navbar-light-active-color};
--#{variables.$prefix}navbar-brand-padding-y: #{variables.$navbar-brand-padding-y};
--#{variables.$prefix}navbar-brand-margin-end: #{variables.$navbar-brand-margin-end};
--#{variables.$prefix}navbar-brand-font-size: #{variables.$navbar-brand-font-size};
--#{variables.$prefix}navbar-brand-color: #{variables.$navbar-light-brand-color};
--#{variables.$prefix}navbar-brand-hover-color: #{variables.$navbar-light-brand-hover-color};
--#{variables.$prefix}navbar-nav-link-padding-x: #{variables.$navbar-nav-link-padding-x};
--#{variables.$prefix}navbar-toggler-padding-y: #{variables.$navbar-toggler-padding-y};
--#{variables.$prefix}navbar-toggler-padding-x: #{variables.$navbar-toggler-padding-x};
--#{variables.$prefix}navbar-toggler-font-size: #{variables.$navbar-toggler-font-size};
--#{variables.$prefix}navbar-toggler-icon-bg: #{functions.escape-svg(variables.$navbar-light-toggler-icon-bg)};
--#{variables.$prefix}navbar-toggler-border-color: #{variables.$navbar-light-toggler-border-color};
--#{variables.$prefix}navbar-toggler-border-radius: #{variables.$navbar-toggler-border-radius};
--#{variables.$prefix}navbar-toggler-focus-width: #{variables.$navbar-toggler-focus-width};
--#{variables.$prefix}navbar-toggler-transition: #{variables.$navbar-toggler-transition};
// scss-docs-end navbar-css-vars
position: relative;
@ -32,8 +44,8 @@
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: var(--#{$prefix}navbar-padding-y) var(--#{$prefix}navbar-padding-x);
@include gradient-bg();
padding: var(--#{variables.$prefix}navbar-padding-y) var(--#{variables.$prefix}navbar-padding-x);
@include gradients.gradient-bg();
// Because flex properties aren't inherited, we need to redeclare these first
// few properties so that content nested within behave properly.
@ -50,8 +62,8 @@
@extend %container-flex-properties;
}
@each $breakpoint, $container-max-width in $container-max-widths {
> .container#{breakpoint-infix($breakpoint, $container-max-widths)} {
@each $breakpoint, $container-max-width in variables.$container-max-widths {
> .container#{breakpoints.breakpoint-infix($breakpoint, variables.$container-max-widths)} {
@extend %container-flex-properties;
}
}
@ -63,18 +75,18 @@
// Used for brand, project, or site names.
.navbar-brand {
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);
padding-top: var(--#{variables.$prefix}navbar-brand-padding-y);
padding-bottom: var(--#{variables.$prefix}navbar-brand-padding-y);
margin-right: var(--#{variables.$prefix}navbar-brand-margin-end);
@include rfs.font-size(var(--#{variables.$prefix}navbar-brand-font-size));
color: var(--#{variables.$prefix}navbar-brand-color);
text-decoration: if(variables.$link-decoration == none, null, none);
white-space: nowrap;
&:hover,
&:focus {
color: var(--#{$prefix}navbar-brand-hover-color);
text-decoration: if($link-hover-decoration == underline, none, null);
color: var(--#{variables.$prefix}navbar-brand-hover-color);
text-decoration: if(variables.$link-hover-decoration == underline, none, null);
}
}
@ -85,13 +97,13 @@
.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);
--#{variables.$prefix}nav-link-padding-x: 0;
--#{variables.$prefix}nav-link-padding-y: #{variables.$nav-link-padding-y};
@include rfs.rfs(variables.$nav-link-font-size, --#{variables.$prefix}nav-link-font-size);
--#{variables.$prefix}nav-link-font-weight: #{variables.$nav-link-font-weight};
--#{variables.$prefix}nav-link-color: var(--#{variables.$prefix}navbar-color);
--#{variables.$prefix}nav-link-hover-color: var(--#{variables.$prefix}navbar-hover-color);
--#{variables.$prefix}nav-link-disabled-color: var(--#{variables.$prefix}navbar-disabled-color);
// scss-docs-end navbar-nav-css-vars
display: flex;
@ -103,7 +115,7 @@
.nav-link {
&.active,
&.show {
color: var(--#{$prefix}navbar-active-color);
color: var(--#{variables.$prefix}navbar-active-color);
}
}
@ -118,14 +130,14 @@
//
.navbar-text {
padding-top: $nav-link-padding-y;
padding-bottom: $nav-link-padding-y;
color: var(--#{$prefix}navbar-color);
padding-top: variables.$nav-link-padding-y;
padding-bottom: variables.$nav-link-padding-y;
color: var(--#{variables.$prefix}navbar-color);
a,
a:hover,
a:focus {
color: var(--#{$prefix}navbar-active-color);
color: var(--#{variables.$prefix}navbar-active-color);
}
}
@ -148,14 +160,14 @@
// Button for toggling the navbar when in its collapsed state
.navbar-toggler {
padding: var(--#{$prefix}navbar-toggler-padding-y) var(--#{$prefix}navbar-toggler-padding-x);
@include font-size(var(--#{$prefix}navbar-toggler-font-size));
padding: var(--#{variables.$prefix}navbar-toggler-padding-y) var(--#{variables.$prefix}navbar-toggler-padding-x);
@include rfs.font-size(var(--#{variables.$prefix}navbar-toggler-font-size));
line-height: 1;
color: var(--#{$prefix}navbar-color);
color: var(--#{variables.$prefix}navbar-color);
background-color: transparent; // remove default button style
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));
border: var(--#{variables.$prefix}border-width) solid var(--#{variables.$prefix}navbar-toggler-border-color); // remove default button style
@include border-radius.border-radius(var(--#{variables.$prefix}navbar-toggler-border-radius));
@include transition.transition(var(--#{variables.$prefix}navbar-toggler-transition));
&:hover {
text-decoration: none;
@ -164,7 +176,7 @@
&:focus {
text-decoration: none;
outline: 0;
box-shadow: 0 0 0 var(--#{$prefix}navbar-toggler-focus-width);
box-shadow: 0 0 0 var(--#{variables.$prefix}navbar-toggler-focus-width);
}
}
@ -175,14 +187,14 @@
width: 1.5em;
height: 1.5em;
vertical-align: middle;
background-image: var(--#{$prefix}navbar-toggler-icon-bg);
background-image: var(--#{variables.$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);
max-height: var(--#{variables.$prefix}scroll-height, 75vh);
overflow-y: auto;
}
@ -190,13 +202,13 @@
// Generate series of `.navbar-expand-*` responsive classes for configuring
// where your navbar collapses.
.navbar-expand {
@each $breakpoint in map-keys($grid-breakpoints) {
$next: breakpoint-next($breakpoint, $grid-breakpoints);
$infix: breakpoint-infix($next, $grid-breakpoints);
@each $breakpoint in map.keys(variables.$grid-breakpoints) {
$next: breakpoints.breakpoint-next($breakpoint, variables.$grid-breakpoints);
$infix: breakpoints.breakpoint-infix($next, variables.$grid-breakpoints);
// stylelint-disable-next-line scss/selector-no-union-class-name
&#{$infix} {
@include media-breakpoint-up($next) {
@include breakpoints.media-breakpoint-up($next) {
flex-wrap: nowrap;
justify-content: flex-start;
@ -208,8 +220,8 @@
}
.nav-link {
padding-right: var(--#{$prefix}navbar-nav-link-padding-x);
padding-left: var(--#{$prefix}navbar-nav-link-padding-x);
padding-right: var(--#{variables.$prefix}navbar-nav-link-padding-x);
padding-left: var(--#{variables.$prefix}navbar-nav-link-padding-x);
}
}
@ -237,8 +249,8 @@
background-color: transparent !important;
border: 0 !important;
transform: none !important;
@include box-shadow(none);
@include transition(none);
@include box-shadow.box-shadow(none);
@include transition.transition(none);
// stylelint-enable declaration-no-important
.offcanvas-header {
@ -263,27 +275,27 @@
// Styles for switching between navbars with light or dark background.
.navbar-light {
@include deprecate("`.navbar-light`", "v5.2.0", "v6.0.0", true);
@include deprecate.deprecate("`.navbar-light`", "v5.2.0", "v6.0.0", true);
}
.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)};
--#{variables.$prefix}navbar-color: #{variables.$navbar-dark-color};
--#{variables.$prefix}navbar-hover-color: #{variables.$navbar-dark-hover-color};
--#{variables.$prefix}navbar-disabled-color: #{variables.$navbar-dark-disabled-color};
--#{variables.$prefix}navbar-active-color: #{variables.$navbar-dark-active-color};
--#{variables.$prefix}navbar-brand-color: #{variables.$navbar-dark-brand-color};
--#{variables.$prefix}navbar-brand-hover-color: #{variables.$navbar-dark-brand-hover-color};
--#{variables.$prefix}navbar-toggler-border-color: #{variables.$navbar-dark-toggler-border-color};
--#{variables.$prefix}navbar-toggler-icon-bg: #{functions.escape-svg(variables.$navbar-dark-toggler-icon-bg)};
// scss-docs-end navbar-dark-css-vars
}
@if $enable-dark-mode {
@include color-mode(dark) {
@if variables.$enable-dark-mode {
@include color-mode.color-mode(dark) {
.navbar-toggler-icon {
--#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-dark-toggler-icon-bg)};
--#{variables.$prefix}navbar-toggler-icon-bg: #{functions.escape-svg(variables.$navbar-dark-toggler-icon-bg)};
}
}
}

89
scss/_offcanvas.scss
View File

@ -1,64 +1,71 @@
@use "sass:map";
@use "mixins/backdrop";
@use "mixins/box-shadow";
@use "mixins/breakpoints";
@use "mixins/transition";
@use "variables";
// 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};
--#{variables.$prefix}offcanvas-zindex: #{variables.$zindex-offcanvas};
--#{variables.$prefix}offcanvas-width: #{variables.$offcanvas-horizontal-width};
--#{variables.$prefix}offcanvas-height: #{variables.$offcanvas-vertical-height};
--#{variables.$prefix}offcanvas-padding-x: #{variables.$offcanvas-padding-x};
--#{variables.$prefix}offcanvas-padding-y: #{variables.$offcanvas-padding-y};
--#{variables.$prefix}offcanvas-color: #{variables.$offcanvas-color};
--#{variables.$prefix}offcanvas-bg: #{variables.$offcanvas-bg-color};
--#{variables.$prefix}offcanvas-border-width: #{variables.$offcanvas-border-width};
--#{variables.$prefix}offcanvas-border-color: #{variables.$offcanvas-border-color};
--#{variables.$prefix}offcanvas-box-shadow: #{variables.$offcanvas-box-shadow};
--#{variables.$prefix}offcanvas-transition: #{transform variables.$offcanvas-transition-duration ease-in-out};
--#{variables.$prefix}offcanvas-title-line-height: #{variables.$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);
@each $breakpoint in map.keys(variables.$grid-breakpoints) {
$next: breakpoints.breakpoint-next($breakpoint, variables.$grid-breakpoints);
$infix: breakpoints.breakpoint-infix($next, variables.$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);
@each $breakpoint in map.keys(variables.$grid-breakpoints) {
$next: breakpoints.breakpoint-next($breakpoint, variables.$grid-breakpoints);
$infix: breakpoints.breakpoint-infix($next, variables.$grid-breakpoints);
.offcanvas#{$infix} {
@include media-breakpoint-down($next) {
@include breakpoints.media-breakpoint-down($next) {
position: fixed;
bottom: 0;
z-index: var(--#{$prefix}offcanvas-zindex);
z-index: var(--#{variables.$prefix}offcanvas-zindex);
display: flex;
flex-direction: column;
max-width: 100%;
color: var(--#{$prefix}offcanvas-color);
color: var(--#{variables.$prefix}offcanvas-color);
visibility: hidden;
background-color: var(--#{$prefix}offcanvas-bg);
background-color: var(--#{variables.$prefix}offcanvas-bg);
background-clip: padding-box;
outline: 0;
@include box-shadow(var(--#{$prefix}offcanvas-box-shadow));
@include transition(var(--#{$prefix}offcanvas-transition));
@include box-shadow.box-shadow(var(--#{variables.$prefix}offcanvas-box-shadow));
@include transition.transition(var(--#{variables.$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);
width: var(--#{variables.$prefix}offcanvas-width);
border-right: var(--#{variables.$prefix}offcanvas-border-width) solid var(--#{variables.$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);
width: var(--#{variables.$prefix}offcanvas-width);
border-left: var(--#{variables.$prefix}offcanvas-border-width) solid var(--#{variables.$prefix}offcanvas-border-color);
transform: translateX(100%);
}
@ -66,18 +73,18 @@
top: 0;
right: 0;
left: 0;
height: var(--#{$prefix}offcanvas-height);
height: var(--#{variables.$prefix}offcanvas-height);
max-height: 100%;
border-bottom: var(--#{$prefix}offcanvas-border-width) solid var(--#{$prefix}offcanvas-border-color);
border-bottom: var(--#{variables.$prefix}offcanvas-border-width) solid var(--#{variables.$prefix}offcanvas-border-color);
transform: translateY(-100%);
}
&.offcanvas-bottom {
right: 0;
left: 0;
height: var(--#{$prefix}offcanvas-height);
height: var(--#{variables.$prefix}offcanvas-height);
max-height: 100%;
border-top: var(--#{$prefix}offcanvas-border-width) solid var(--#{$prefix}offcanvas-border-color);
border-top: var(--#{variables.$prefix}offcanvas-border-width) solid var(--#{variables.$prefix}offcanvas-border-color);
transform: translateY(100%);
}
@ -94,9 +101,9 @@
}
@if not ($infix == "") {
@include media-breakpoint-up($next) {
--#{$prefix}offcanvas-height: auto;
--#{$prefix}offcanvas-border-width: 0;
@include breakpoints.media-breakpoint-up($next) {
--#{variables.$prefix}offcanvas-height: auto;
--#{variables.$prefix}offcanvas-border-width: 0;
background-color: transparent !important; // stylelint-disable-line declaration-no-important
.offcanvas-header {
@ -117,27 +124,27 @@
}
.offcanvas-backdrop {
@include overlay-backdrop($zindex-offcanvas-backdrop, $offcanvas-backdrop-bg, $offcanvas-backdrop-opacity);
@include backdrop.overlay-backdrop(variables.$zindex-offcanvas-backdrop, variables.$offcanvas-backdrop-bg, variables.$offcanvas-backdrop-opacity);
}
.offcanvas-header {
display: flex;
align-items: center;
padding: var(--#{$prefix}offcanvas-padding-y) var(--#{$prefix}offcanvas-padding-x);
padding: var(--#{variables.$prefix}offcanvas-padding-y) var(--#{variables.$prefix}offcanvas-padding-x);
.btn-close {
padding: calc(var(--#{$prefix}offcanvas-padding-y) * .5) calc(var(--#{$prefix}offcanvas-padding-x) * .5);
margin: calc(-.5 * var(--#{$prefix}offcanvas-padding-y)) calc(-.5 * var(--#{$prefix}offcanvas-padding-x)) calc(-.5 * var(--#{$prefix}offcanvas-padding-y)) auto;
padding: calc(var(--#{variables.$prefix}offcanvas-padding-y) * .5) calc(var(--#{variables.$prefix}offcanvas-padding-x) * .5);
margin: calc(-.5 * var(--#{variables.$prefix}offcanvas-padding-y)) calc(-.5 * var(--#{variables.$prefix}offcanvas-padding-x)) calc(-.5 * var(--#{variables.$prefix}offcanvas-padding-y)) auto;
}
}
.offcanvas-title {
margin-bottom: 0;
line-height: var(--#{$prefix}offcanvas-title-line-height);
line-height: var(--#{variables.$prefix}offcanvas-title-line-height);
}
.offcanvas-body {
flex-grow: 1;
padding: var(--#{$prefix}offcanvas-padding-y) var(--#{$prefix}offcanvas-padding-x);
padding: var(--#{variables.$prefix}offcanvas-padding-y) var(--#{variables.$prefix}offcanvas-padding-x);
overflow-y: auto;
}

106
scss/_pagination.scss
View File

@ -1,96 +1,104 @@
@use "mixins/border-radius";
@use "mixins/gradients";
@use "mixins/lists";
@use "mixins/pagination";
@use "mixins/transition";
@use "variables";
@use "vendor/rfs";
.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};
--#{variables.$prefix}pagination-padding-x: #{variables.$pagination-padding-x};
--#{variables.$prefix}pagination-padding-y: #{variables.$pagination-padding-y};
@include rfs.rfs(variables.$pagination-font-size, --#{variables.$prefix}pagination-font-size);
--#{variables.$prefix}pagination-color: #{variables.$pagination-color};
--#{variables.$prefix}pagination-bg: #{variables.$pagination-bg};
--#{variables.$prefix}pagination-border-width: #{variables.$pagination-border-width};
--#{variables.$prefix}pagination-border-color: #{variables.$pagination-border-color};
--#{variables.$prefix}pagination-border-radius: #{variables.$pagination-border-radius};
--#{variables.$prefix}pagination-hover-color: #{variables.$pagination-hover-color};
--#{variables.$prefix}pagination-hover-bg: #{variables.$pagination-hover-bg};
--#{variables.$prefix}pagination-hover-border-color: #{variables.$pagination-hover-border-color};
--#{variables.$prefix}pagination-focus-color: #{variables.$pagination-focus-color};
--#{variables.$prefix}pagination-focus-bg: #{variables.$pagination-focus-bg};
--#{variables.$prefix}pagination-focus-box-shadow: #{variables.$pagination-focus-box-shadow};
--#{variables.$prefix}pagination-active-color: #{variables.$pagination-active-color};
--#{variables.$prefix}pagination-active-bg: #{variables.$pagination-active-bg};
--#{variables.$prefix}pagination-active-border-color: #{variables.$pagination-active-border-color};
--#{variables.$prefix}pagination-disabled-color: #{variables.$pagination-disabled-color};
--#{variables.$prefix}pagination-disabled-bg: #{variables.$pagination-disabled-bg};
--#{variables.$prefix}pagination-disabled-border-color: #{variables.$pagination-disabled-border-color};
// scss-docs-end pagination-css-vars
display: flex;
@include list-unstyled();
@include lists.list-unstyled();
}
.page-link {
position: relative;
display: block;
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);
padding: var(--#{variables.$prefix}pagination-padding-y) var(--#{variables.$prefix}pagination-padding-x);
@include rfs.font-size(var(--#{variables.$prefix}pagination-font-size));
color: var(--#{variables.$prefix}pagination-color);
text-decoration: if(variables.$link-decoration == none, null, none);
background-color: var(--#{variables.$prefix}pagination-bg);
border: var(--#{variables.$prefix}pagination-border-width) solid var(--#{variables.$prefix}pagination-border-color);
@include transition.transition(variables.$pagination-transition);
&:hover {
z-index: 2;
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);
color: var(--#{variables.$prefix}pagination-hover-color);
text-decoration: if(variables.$link-hover-decoration == underline, none, null);
background-color: var(--#{variables.$prefix}pagination-hover-bg);
border-color: var(--#{variables.$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: var(--#{$prefix}pagination-focus-box-shadow);
color: var(--#{variables.$prefix}pagination-focus-color);
background-color: var(--#{variables.$prefix}pagination-focus-bg);
outline: variables.$pagination-focus-outline;
box-shadow: var(--#{variables.$prefix}pagination-focus-box-shadow);
}
&.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);
color: var(--#{variables.$prefix}pagination-active-color);
@include gradients.gradient-bg(var(--#{variables.$prefix}pagination-active-bg));
border-color: var(--#{variables.$prefix}pagination-active-border-color);
}
&.disabled,
.disabled > & {
color: var(--#{$prefix}pagination-disabled-color);
color: var(--#{variables.$prefix}pagination-disabled-color);
pointer-events: none;
background-color: var(--#{$prefix}pagination-disabled-bg);
border-color: var(--#{$prefix}pagination-disabled-border-color);
background-color: var(--#{variables.$prefix}pagination-disabled-bg);
border-color: var(--#{variables.$prefix}pagination-disabled-border-color);
}
}
.page-item {
&:not(:first-child) .page-link {
margin-left: $pagination-margin-start;
margin-left: variables.$pagination-margin-start;
}
@if $pagination-margin-start == calc(#{$pagination-border-width} * -1) {
@if variables.$pagination-margin-start == calc(#{variables.$pagination-border-width} * -1) {
&:first-child {
.page-link {
@include border-start-radius(var(--#{$prefix}pagination-border-radius));
@include border-radius.border-start-radius(var(--#{variables.$prefix}pagination-border-radius));
}
}
&:last-child {
.page-link {
@include border-end-radius(var(--#{$prefix}pagination-border-radius));
@include border-radius.border-end-radius(var(--#{variables.$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));
@include border-radius.border-radius(var(--#{variables.$prefix}pagination-border-radius));
}
}
}
@ -101,9 +109,9 @@
//
.pagination-lg {
@include pagination-size($pagination-padding-y-lg, $pagination-padding-x-lg, $font-size-lg, $pagination-border-radius-lg);
@include pagination.pagination-size(variables.$pagination-padding-y-lg, variables.$pagination-padding-x-lg, variables.$font-size-lg, variables.$pagination-border-radius-lg);
}
.pagination-sm {
@include pagination-size($pagination-padding-y-sm, $pagination-padding-x-sm, $font-size-sm, $pagination-border-radius-sm);
@include pagination.pagination-size(variables.$pagination-padding-y-sm, variables.$pagination-padding-x-sm, variables.$font-size-sm, variables.$pagination-border-radius-sm);
}

8
scss/_placeholders.scss
View File

@ -1,10 +1,12 @@
@use "variables";
.placeholder {
display: inline-block;
min-height: 1em;
vertical-align: middle;
cursor: wait;
background-color: currentcolor;
opacity: $placeholder-opacity-max;
opacity: variables.$placeholder-opacity-max;
&.btn::before {
display: inline-block;
@ -34,12 +36,12 @@
@keyframes placeholder-glow {
50% {
opacity: $placeholder-opacity-min;
opacity: variables.$placeholder-opacity-min;
}
}
.placeholder-wave {
mask-image: linear-gradient(130deg, $black 55%, rgba(0, 0, 0, (1 - $placeholder-opacity-min)) 75%, $black 95%);
mask-image: linear-gradient(130deg, variables.$black 55%, rgba(0, 0, 0, (1 - variables.$placeholder-opacity-min)) 75%, variables.$black 95%);
mask-size: 200% 100%;
animation: placeholder-wave 2s linear infinite;
}

136
scss/_popover.scss
View File

@ -1,46 +1,52 @@
@use "mixins/border-radius";
@use "mixins/box-shadow";
@use "mixins/reset-text";
@use "variables";
@use "vendor/rfs";
.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);
--#{variables.$prefix}popover-zindex: #{variables.$zindex-popover};
--#{variables.$prefix}popover-max-width: #{variables.$popover-max-width};
@include rfs.rfs(variables.$popover-font-size, --#{variables.$prefix}popover-font-size);
--#{variables.$prefix}popover-bg: #{variables.$popover-bg};
--#{variables.$prefix}popover-border-width: #{variables.$popover-border-width};
--#{variables.$prefix}popover-border-color: #{variables.$popover-border-color};
--#{variables.$prefix}popover-border-radius: #{variables.$popover-border-radius};
--#{variables.$prefix}popover-inner-border-radius: #{variables.$popover-inner-border-radius};
--#{variables.$prefix}popover-box-shadow: #{variables.$popover-box-shadow};
--#{variables.$prefix}popover-header-padding-x: #{variables.$popover-header-padding-x};
--#{variables.$prefix}popover-header-padding-y: #{variables.$popover-header-padding-y};
@include rfs.rfs(variables.$popover-header-font-size, --#{variables.$prefix}popover-header-font-size);
--#{variables.$prefix}popover-header-color: #{variables.$popover-header-color};
--#{variables.$prefix}popover-header-bg: #{variables.$popover-header-bg};
--#{variables.$prefix}popover-body-padding-x: #{variables.$popover-body-padding-x};
--#{variables.$prefix}popover-body-padding-y: #{variables.$popover-body-padding-y};
--#{variables.$prefix}popover-body-color: #{variables.$popover-body-color};
--#{variables.$prefix}popover-arrow-width: #{variables.$popover-arrow-width};
--#{variables.$prefix}popover-arrow-height: #{variables.$popover-arrow-height};
--#{variables.$prefix}popover-arrow-border: var(--#{variables.$prefix}popover-border-color);
// scss-docs-end popover-css-vars
z-index: var(--#{$prefix}popover-zindex);
z-index: var(--#{variables.$prefix}popover-zindex);
display: block;
max-width: var(--#{$prefix}popover-max-width);
max-width: var(--#{variables.$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(var(--#{$prefix}popover-font-size));
@include reset-text.reset-text();
@include rfs.font-size(var(--#{variables.$prefix}popover-font-size));
// Allow breaking very long words so they don't overflow the popover's bounds
word-wrap: break-word;
background-color: var(--#{$prefix}popover-bg);
background-color: var(--#{variables.$prefix}popover-bg);
background-clip: padding-box;
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));
border: var(--#{variables.$prefix}popover-border-width) solid var(--#{variables.$prefix}popover-border-color);
@include border-radius.border-radius(var(--#{variables.$prefix}popover-border-radius));
@include box-shadow.box-shadow(var(--#{variables.$prefix}popover-box-shadow));
.popover-arrow {
display: block;
width: var(--#{$prefix}popover-arrow-width);
height: var(--#{$prefix}popover-arrow-height);
width: var(--#{variables.$prefix}popover-arrow-width);
height: var(--#{variables.$prefix}popover-arrow-height);
&::before,
&::after {
@ -56,21 +62,21 @@
.bs-popover-top {
> .popover-arrow {
bottom: calc(-1 * (var(--#{$prefix}popover-arrow-height)) - var(--#{$prefix}popover-border-width)); // stylelint-disable-line function-disallowed-list
bottom: calc(-1 * (var(--#{variables.$prefix}popover-arrow-height)) - var(--#{variables.$prefix}popover-border-width)); // stylelint-disable-line function-disallowed-list
&::before,
&::after {
border-width: var(--#{$prefix}popover-arrow-height) calc(var(--#{$prefix}popover-arrow-width) * .5) 0; // stylelint-disable-line function-disallowed-list
border-width: var(--#{variables.$prefix}popover-arrow-height) calc(var(--#{variables.$prefix}popover-arrow-width) * .5) 0; // stylelint-disable-line function-disallowed-list
}
&::before {
bottom: 0;
border-top-color: var(--#{$prefix}popover-arrow-border);
border-top-color: var(--#{variables.$prefix}popover-arrow-border);
}
&::after {
bottom: var(--#{$prefix}popover-border-width);
border-top-color: var(--#{$prefix}popover-bg);
bottom: var(--#{variables.$prefix}popover-border-width);
border-top-color: var(--#{variables.$prefix}popover-bg);
}
}
}
@ -78,23 +84,23 @@
/* 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);
left: calc(-1 * (var(--#{variables.$prefix}popover-arrow-height)) - var(--#{variables.$prefix}popover-border-width)); // stylelint-disable-line function-disallowed-list
width: var(--#{variables.$prefix}popover-arrow-height);
height: var(--#{variables.$prefix}popover-arrow-width);
&::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
border-width: calc(var(--#{variables.$prefix}popover-arrow-width) * .5) var(--#{variables.$prefix}popover-arrow-height) calc(var(--#{variables.$prefix}popover-arrow-width) * .5) 0; // stylelint-disable-line function-disallowed-list
}
&::before {
left: 0;
border-right-color: var(--#{$prefix}popover-arrow-border);
border-right-color: var(--#{variables.$prefix}popover-arrow-border);
}
&::after {
left: var(--#{$prefix}popover-border-width);
border-right-color: var(--#{$prefix}popover-bg);
left: var(--#{variables.$prefix}popover-border-width);
border-right-color: var(--#{variables.$prefix}popover-bg);
}
}
}
@ -103,21 +109,21 @@
.bs-popover-bottom {
> .popover-arrow {
top: calc(-1 * (var(--#{$prefix}popover-arrow-height)) - var(--#{$prefix}popover-border-width)); // stylelint-disable-line function-disallowed-list
top: calc(-1 * (var(--#{variables.$prefix}popover-arrow-height)) - var(--#{variables.$prefix}popover-border-width)); // stylelint-disable-line function-disallowed-list
&::before,
&::after {
border-width: 0 calc(var(--#{$prefix}popover-arrow-width) * .5) var(--#{$prefix}popover-arrow-height); // stylelint-disable-line function-disallowed-list
border-width: 0 calc(var(--#{variables.$prefix}popover-arrow-width) * .5) var(--#{variables.$prefix}popover-arrow-height); // stylelint-disable-line function-disallowed-list
}
&::before {
top: 0;
border-bottom-color: var(--#{$prefix}popover-arrow-border);
border-bottom-color: var(--#{variables.$prefix}popover-arrow-border);
}
&::after {
top: var(--#{$prefix}popover-border-width);
border-bottom-color: var(--#{$prefix}popover-bg);
top: var(--#{variables.$prefix}popover-border-width);
border-bottom-color: var(--#{variables.$prefix}popover-bg);
}
}
@ -127,33 +133,33 @@
top: 0;
left: 50%;
display: block;
width: var(--#{$prefix}popover-arrow-width);
margin-left: calc(-.5 * var(--#{$prefix}popover-arrow-width)); // stylelint-disable-line function-disallowed-list
width: var(--#{variables.$prefix}popover-arrow-width);
margin-left: calc(-.5 * var(--#{variables.$prefix}popover-arrow-width)); // stylelint-disable-line function-disallowed-list
content: "";
border-bottom: var(--#{$prefix}popover-border-width) solid var(--#{$prefix}popover-header-bg);
border-bottom: var(--#{variables.$prefix}popover-border-width) solid var(--#{variables.$prefix}popover-header-bg);
}
}
/* 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);
right: calc(-1 * (var(--#{variables.$prefix}popover-arrow-height)) - var(--#{variables.$prefix}popover-border-width)); // stylelint-disable-line function-disallowed-list
width: var(--#{variables.$prefix}popover-arrow-height);
height: var(--#{variables.$prefix}popover-arrow-width);
&::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
border-width: calc(var(--#{variables.$prefix}popover-arrow-width) * .5) 0 calc(var(--#{variables.$prefix}popover-arrow-width) * .5) var(--#{variables.$prefix}popover-arrow-height); // stylelint-disable-line function-disallowed-list
}
&::before {
right: 0;
border-left-color: var(--#{$prefix}popover-arrow-border);
border-left-color: var(--#{variables.$prefix}popover-arrow-border);
}
&::after {
right: var(--#{$prefix}popover-border-width);
border-left-color: var(--#{$prefix}popover-bg);
right: var(--#{variables.$prefix}popover-border-width);
border-left-color: var(--#{variables.$prefix}popover-bg);
}
}
}
@ -177,13 +183,13 @@
// Offset the popover to account for the popover arrow
.popover-header {
padding: var(--#{$prefix}popover-header-padding-y) var(--#{$prefix}popover-header-padding-x);
padding: var(--#{variables.$prefix}popover-header-padding-y) var(--#{variables.$prefix}popover-header-padding-x);
margin-bottom: 0; // Reset the default from Reboot
@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));
@include rfs.font-size(var(--#{variables.$prefix}popover-header-font-size));
color: var(--#{variables.$prefix}popover-header-color);
background-color: var(--#{variables.$prefix}popover-header-bg);
border-bottom: var(--#{variables.$prefix}popover-border-width) solid var(--#{variables.$prefix}popover-border-color);
@include border-radius.border-top-radius(var(--#{variables.$prefix}popover-inner-border-radius));
&:empty {
display: none;
@ -191,6 +197,6 @@
}
.popover-body {
padding: var(--#{$prefix}popover-body-padding-y) var(--#{$prefix}popover-body-padding-x);
color: var(--#{$prefix}popover-body-color);
padding: var(--#{variables.$prefix}popover-body-padding-y) var(--#{variables.$prefix}popover-body-padding-x);
color: var(--#{variables.$prefix}popover-body-color);
}

53
scss/_progress.scss
View File

@ -1,9 +1,16 @@
@use "mixins/border-radius";
@use "mixins/box-shadow";
@use "mixins/gradients";
@use "mixins/transition";
@use "variables";
@use "vendor/rfs";
// Disable animation if transitions are disabled
// scss-docs-start progress-keyframes
@if $enable-transitions {
@if variables.$enable-transitions {
@keyframes progress-bar-stripes {
0% { background-position-x: $progress-height; }
0% { background-position-x: variables.$progress-height; }
}
}
// scss-docs-end progress-keyframes
@ -11,23 +18,23 @@
.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};
--#{variables.$prefix}progress-height: #{variables.$progress-height};
@include rfs.rfs(variables.$progress-font-size, --#{variables.$prefix}progress-font-size);
--#{variables.$prefix}progress-bg: #{variables.$progress-bg};
--#{variables.$prefix}progress-border-radius: #{variables.$progress-border-radius};
--#{variables.$prefix}progress-box-shadow: #{variables.$progress-box-shadow};
--#{variables.$prefix}progress-bar-color: #{variables.$progress-bar-color};
--#{variables.$prefix}progress-bar-bg: #{variables.$progress-bar-bg};
--#{variables.$prefix}progress-bar-transition: #{variables.$progress-bar-transition};
// scss-docs-end progress-css-vars
display: flex;
height: var(--#{$prefix}progress-height);
height: var(--#{variables.$prefix}progress-height);
overflow: hidden; // force rounded corners by cropping it
@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));
@include rfs.font-size(var(--#{variables.$prefix}progress-font-size));
background-color: var(--#{variables.$prefix}progress-bg);
@include border-radius.border-radius(var(--#{variables.$prefix}progress-border-radius));
@include box-shadow.box-shadow(var(--#{variables.$prefix}progress-box-shadow));
}
.progress-bar {
@ -35,16 +42,16 @@
flex-direction: column;
justify-content: center;
overflow: hidden;
color: var(--#{$prefix}progress-bar-color);
color: var(--#{variables.$prefix}progress-bar-color);
text-align: center;
white-space: nowrap;
background-color: var(--#{$prefix}progress-bar-bg);
@include transition(var(--#{$prefix}progress-bar-transition));
background-color: var(--#{variables.$prefix}progress-bar-bg);
@include transition.transition(var(--#{variables.$prefix}progress-bar-transition));
}
.progress-bar-striped {
@include gradient-striped();
background-size: var(--#{$prefix}progress-height) var(--#{$prefix}progress-height);
@include gradients.gradient-striped();
background-size: var(--#{variables.$prefix}progress-height) var(--#{variables.$prefix}progress-height);
}
.progress-stacked > .progress {
@ -55,11 +62,11 @@
width: 100%;
}
@if $enable-transitions {
@if variables.$enable-transitions {
.progress-bar-animated {
animation: $progress-bar-animation-timing progress-bar-stripes;
animation: variables.$progress-bar-animation-timing progress-bar-stripes;
@if $enable-reduced-motion {
@if variables.$enable-reduced-motion {
@media (prefers-reduced-motion: reduce) {
animation: none;
}

128
scss/_reboot.scss
View File

@ -1,3 +1,7 @@
@use "mixins/border-radius";
@use "variables";
@use "vendor/rfs";
// stylelint-disable declaration-no-important, selector-no-qualifying-type, property-no-vendor-prefix
@ -26,11 +30,11 @@
// null by default, thus nothing is generated.
:root {
@if $font-size-root != null {
@include font-size(var(--#{$prefix}root-font-size));
@if variables.$font-size-root != null {
@include rfs.font-size(var(--#{variables.$prefix}root-font-size));
}
@if $enable-smooth-scroll {
@if variables.$enable-smooth-scroll {
@media (prefers-reduced-motion: no-preference) {
scroll-behavior: smooth;
}
@ -48,15 +52,15 @@
// scss-docs-start reboot-body-rules
body {
margin: 0; // 1
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
font-family: var(--#{variables.$prefix}body-font-family);
@include rfs.font-size(var(--#{variables.$prefix}body-font-size));
font-weight: var(--#{variables.$prefix}body-font-weight);
line-height: var(--#{variables.$prefix}body-line-height);
color: var(--#{variables.$prefix}body-color);
text-align: var(--#{variables.$prefix}body-text-align);
background-color: var(--#{variables.$prefix}body-bg); // 2
-webkit-text-size-adjust: 100%; // 3
-webkit-tap-highlight-color: rgba($black, 0); // 4
-webkit-tap-highlight-color: rgba(variables.$black, 0); // 4
}
// scss-docs-end reboot-body-rules
@ -66,11 +70,11 @@ body {
// 1. Reset Firefox's gray color
hr {
margin: $hr-margin-y 0;
color: $hr-color; // 1
margin: variables.$hr-margin-y 0;
color: variables.$hr-color; // 1
border: 0;
border-top: $hr-border-width solid $hr-border-color;
opacity: $hr-opacity;
border-top: variables.$hr-border-width solid variables.$hr-border-color;
opacity: variables.$hr-opacity;
}
@ -82,42 +86,42 @@ hr {
%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);
margin-bottom: variables.$headings-margin-bottom;
font-family: variables.$headings-font-family;
font-style: variables.$headings-font-style;
font-weight: variables.$headings-font-weight;
line-height: variables.$headings-line-height;
color: var(--#{variables.$prefix}heading-color);
}
h1 {
@extend %heading;
@include font-size($h1-font-size);
@include rfs.font-size(variables.$h1-font-size);
}
h2 {
@extend %heading;
@include font-size($h2-font-size);
@include rfs.font-size(variables.$h2-font-size);
}
h3 {
@extend %heading;
@include font-size($h3-font-size);
@include rfs.font-size(variables.$h3-font-size);
}
h4 {
@extend %heading;
@include font-size($h4-font-size);
@include rfs.font-size(variables.$h4-font-size);
}
h5 {
@extend %heading;
@include font-size($h5-font-size);
@include rfs.font-size(variables.$h5-font-size);
}
h6 {
@extend %heading;
@include font-size($h6-font-size);
@include rfs.font-size(variables.$h6-font-size);
}
@ -128,7 +132,7 @@ h6 {
p {
margin-top: 0;
margin-bottom: $paragraph-margin-bottom;
margin-bottom: variables.$paragraph-margin-bottom;
}
@ -176,7 +180,7 @@ ul ol {
}
dt {
font-weight: $dt-font-weight;
font-weight: variables.$dt-font-weight;
}
// 1. Undo browser default
@ -200,7 +204,7 @@ blockquote {
b,
strong {
font-weight: $font-weight-bolder;
font-weight: variables.$font-weight-bolder;
}
@ -209,16 +213,16 @@ strong {
// Add the correct font size in all browsers
small {
@include font-size($small-font-size);
@include rfs.font-size(variables.$small-font-size);
}
// Mark
mark {
padding: $mark-padding;
color: var(--#{$prefix}highlight-color);
background-color: var(--#{$prefix}highlight-bg);
padding: variables.$mark-padding;
color: var(--#{variables.$prefix}highlight-color);
background-color: var(--#{variables.$prefix}highlight-bg);
}
@ -230,7 +234,7 @@ mark {
sub,
sup {
position: relative;
@include font-size($sub-sup-font-size);
@include rfs.font-size(variables.$sub-sup-font-size);
line-height: 0;
vertical-align: baseline;
}
@ -242,12 +246,12 @@ sup { top: -.5em; }
// Links
a {
color: rgba(var(--#{$prefix}link-color-rgb), var(--#{$prefix}link-opacity, 1));
text-decoration: $link-decoration;
color: rgba(var(--#{variables.$prefix}link-color-rgb), var(--#{variables.$prefix}link-opacity, 1));
text-decoration: variables.$link-decoration;
&:hover {
--#{$prefix}link-color-rgb: var(--#{$prefix}link-hover-color-rgb);
text-decoration: $link-hover-decoration;
--#{variables.$prefix}link-color-rgb: var(--#{variables.$prefix}link-hover-color-rgb);
text-decoration: variables.$link-hover-decoration;
}
}
@ -271,8 +275,8 @@ pre,
code,
kbd,
samp {
font-family: $font-family-code;
@include font-size(1em); // Correct the odd `em` font sizing in all browsers.
font-family: variables.$font-family-code;
@include rfs.font-size(1em); // Correct the odd `em` font sizing in all browsers.
}
// 1. Remove browser default top margin
@ -284,20 +288,20 @@ pre {
margin-top: 0; // 1
margin-bottom: 1rem; // 2
overflow: auto; // 3
@include font-size($code-font-size);
color: $pre-color;
@include rfs.font-size(variables.$code-font-size);
color: variables.$pre-color;
// Account for some code outputs that place code tags in pre tags
code {
@include font-size(inherit);
@include rfs.font-size(inherit);
color: inherit;
word-break: normal;
}
}
code {
@include font-size($code-font-size);
color: var(--#{$prefix}code-color);
@include rfs.font-size(variables.$code-font-size);
color: var(--#{variables.$prefix}code-color);
word-wrap: break-word;
// Streamline the style when inside anchors to avoid broken underline and more
@ -307,16 +311,16 @@ code {
}
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);
padding: variables.$kbd-padding-y variables.$kbd-padding-x;
@include rfs.font-size(variables.$kbd-font-size);
color: variables.$kbd-color;
background-color: variables.$kbd-bg;
@include border-radius.border-radius(variables.$border-radius-sm);
kbd {
padding: 0;
@include font-size(1em);
font-weight: $nested-kbd-font-weight;
@include rfs.font-size(1em);
font-weight: variables.$nested-kbd-font-weight;
}
}
@ -348,9 +352,9 @@ table {
}
caption {
padding-top: $table-cell-padding-y;
padding-bottom: $table-cell-padding-y;
color: $table-caption-color;
padding-top: variables.$table-cell-padding-y;
padding-bottom: variables.$table-cell-padding-y;
color: variables.$table-caption-color;
text-align: left;
}
@ -359,7 +363,7 @@ caption {
// 3. Fix alignment for Safari
th {
font-weight: $table-th-font-weight; // 1
font-weight: variables.$table-th-font-weight; // 1
text-align: inherit; // 2
text-align: -webkit-match-parent; // 3
}
@ -410,7 +414,7 @@ optgroup,
textarea {
margin: 0; // 1
font-family: inherit;
@include font-size(inherit);
@include rfs.font-size(inherit);
line-height: inherit;
}
@ -455,7 +459,7 @@ button,
[type="submit"] {
-webkit-appearance: button; // 2
@if $enable-button-pointers {
@if variables.$enable-button-pointers {
&:not(:disabled) {
cursor: pointer; // 3
}
@ -498,10 +502,10 @@ legend {
float: left; // 1
width: 100%;
padding: 0;
margin-bottom: $legend-margin-bottom;
font-weight: $legend-font-weight;
margin-bottom: variables.$legend-margin-bottom;
font-weight: variables.$legend-font-weight;
line-height: inherit;
@include font-size($legend-font-size);
@include rfs.font-size(variables.$legend-font-size);
+ * {
clear: left; // 2

11
scss/_root.scss
View File

@ -1,3 +1,8 @@
@use "sass:meta";
@use "setup" as *;
@use "mixins/color-mode" as *;
@use "vendor/rfs" as *;
:root,
[data-bs-theme="light"] {
// Note: Custom variable values only support SassScript inside `#{}`.
@ -41,8 +46,8 @@
// Note: Use `inspect` for lists so that quoted items keep the quotes.
// See https://github.com/sass/sass/issues/2383#issuecomment-336349172
--#{$prefix}font-sans-serif: #{inspect($font-family-sans-serif)};
--#{$prefix}font-monospace: #{inspect($font-family-monospace)};
--#{$prefix}font-sans-serif: #{meta.inspect($font-family-sans-serif)};
--#{$prefix}font-monospace: #{meta.inspect($font-family-monospace)};
--#{$prefix}gradient: #{$gradient};
// Root and body
@ -50,7 +55,7 @@
@if $font-size-root != null {
--#{$prefix}root-font-size: #{$font-size-root};
}
--#{$prefix}body-font-family: #{inspect($font-family-base)};
--#{$prefix}body-font-family: #{meta.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};

48
scss/_spinners.scss
View File

@ -1,3 +1,5 @@
@use "variables";
//
// Rotating border
//
@ -5,12 +7,12 @@
.spinner-grow,
.spinner-border {
display: inline-block;
width: var(--#{$prefix}spinner-width);
height: var(--#{$prefix}spinner-height);
vertical-align: var(--#{$prefix}spinner-vertical-align);
width: var(--#{variables.$prefix}spinner-width);
height: var(--#{variables.$prefix}spinner-height);
vertical-align: var(--#{variables.$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);
animation: var(--#{variables.$prefix}spinner-animation-speed) linear infinite var(--#{variables.$prefix}spinner-animation-name);
}
// scss-docs-start spinner-border-keyframes
@ -21,23 +23,23 @@
.spinner-border {
// 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;
--#{variables.$prefix}spinner-width: #{variables.$spinner-width};
--#{variables.$prefix}spinner-height: #{variables.$spinner-height};
--#{variables.$prefix}spinner-vertical-align: #{variables.$spinner-vertical-align};
--#{variables.$prefix}spinner-border-width: #{variables.$spinner-border-width};
--#{variables.$prefix}spinner-animation-speed: #{variables.$spinner-animation-speed};
--#{variables.$prefix}spinner-animation-name: spinner-border;
// scss-docs-end spinner-border-css-vars
border: var(--#{$prefix}spinner-border-width) solid currentcolor;
border: var(--#{variables.$prefix}spinner-border-width) solid currentcolor;
border-right-color: transparent;
}
.spinner-border-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};
--#{variables.$prefix}spinner-width: #{variables.$spinner-width-sm};
--#{variables.$prefix}spinner-height: #{variables.$spinner-height-sm};
--#{variables.$prefix}spinner-border-width: #{variables.$spinner-border-width-sm};
// scss-docs-end spinner-border-sm-css-vars
}
@ -59,11 +61,11 @@
.spinner-grow {
// 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;
--#{variables.$prefix}spinner-width: #{variables.$spinner-width};
--#{variables.$prefix}spinner-height: #{variables.$spinner-height};
--#{variables.$prefix}spinner-vertical-align: #{variables.$spinner-vertical-align};
--#{variables.$prefix}spinner-animation-speed: #{variables.$spinner-animation-speed};
--#{variables.$prefix}spinner-animation-name: spinner-grow;
// scss-docs-end spinner-grow-css-vars
background-color: currentcolor;
@ -71,15 +73,15 @@
}
.spinner-grow-sm {
--#{$prefix}spinner-width: #{$spinner-width-sm};
--#{$prefix}spinner-height: #{$spinner-height-sm};
--#{variables.$prefix}spinner-width: #{variables.$spinner-width-sm};
--#{variables.$prefix}spinner-height: #{variables.$spinner-height-sm};
}
@if $enable-reduced-motion {
@if variables.$enable-reduced-motion {
@media (prefers-reduced-motion: reduce) {
.spinner-border,
.spinner-grow {
--#{$prefix}spinner-animation-speed: #{$spinner-animation-speed * 2};
--#{variables.$prefix}spinner-animation-speed: #{variables.$spinner-animation-speed * 2};
}
}
}

87
scss/_tables.scss
View File

@ -1,29 +1,34 @@
@use "sass:map";
@use "mixins/breakpoints";
@use "mixins/table-variants";
@use "variables";
//
// Basic Bootstrap table
//
.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;
--#{variables.$prefix}table-color-type: initial;
--#{variables.$prefix}table-bg-type: initial;
--#{variables.$prefix}table-color-state: initial;
--#{variables.$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};
--#{variables.$prefix}table-color: #{variables.$table-color};
--#{variables.$prefix}table-bg: #{variables.$table-bg};
--#{variables.$prefix}table-border-color: #{variables.$table-border-color};
--#{variables.$prefix}table-accent-bg: #{variables.$table-accent-bg};
--#{variables.$prefix}table-striped-color: #{variables.$table-striped-color};
--#{variables.$prefix}table-striped-bg: #{variables.$table-striped-bg};
--#{variables.$prefix}table-active-color: #{variables.$table-active-color};
--#{variables.$prefix}table-active-bg: #{variables.$table-active-bg};
--#{variables.$prefix}table-hover-color: #{variables.$table-hover-color};
--#{variables.$prefix}table-hover-bg: #{variables.$table-hover-bg};
width: 100%;
margin-bottom: $spacer;
vertical-align: $table-cell-vertical-align;
border-color: var(--#{$prefix}table-border-color);
margin-bottom: variables.$spacer;
vertical-align: variables.$table-cell-vertical-align;
border-color: var(--#{variables.$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.
@ -31,12 +36,12 @@
// 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;
padding: variables.$table-cell-padding-y variables.$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)));
color: var(--#{variables.$prefix}table-color-state, var(--#{variables.$prefix}table-color-type, var(--#{variables.$prefix}table-color)));
background-color: var(--#{variables.$prefix}table-bg);
border-bottom-width: variables.$table-border-width;
box-shadow: inset 0 0 0 9999px var(--#{variables.$prefix}table-bg-state, var(--#{variables.$prefix}table-bg-type, var(--#{variables.$prefix}table-accent-bg)));
}
> tbody {
@ -49,7 +54,7 @@
}
.table-group-divider {
border-top: calc(#{$table-border-width} * 2) solid $table-group-separator-color; // stylelint-disable-line function-disallowed-list
border-top: calc(#{variables.$table-border-width} * 2) solid variables.$table-group-separator-color; // stylelint-disable-line function-disallowed-list
}
//
@ -68,7 +73,7 @@
.table-sm {
// stylelint-disable-next-line selector-max-universal
> :not(caption) > * > * {
padding: $table-cell-padding-y-sm $table-cell-padding-x-sm;
padding: variables.$table-cell-padding-y-sm variables.$table-cell-padding-x-sm;
}
}
@ -84,11 +89,11 @@
.table-bordered {
> :not(caption) > * {
border-width: $table-border-width 0;
border-width: variables.$table-border-width 0;
// stylelint-disable-next-line selector-max-universal
> * {
border-width: 0 $table-border-width;
border-width: 0 variables.$table-border-width;
}
}
}
@ -110,17 +115,17 @@
// For rows
.table-striped {
> 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);
> tbody > tr:nth-of-type(#{variables.$table-striped-order}) > * {
--#{variables.$prefix}table-color-type: var(--#{variables.$prefix}table-striped-color);
--#{variables.$prefix}table-bg-type: var(--#{variables.$prefix}table-striped-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);
> :not(caption) > tr > :nth-child(#{variables.$table-striped-columns-order}) {
--#{variables.$prefix}table-color-type: var(--#{variables.$prefix}table-striped-color);
--#{variables.$prefix}table-bg-type: var(--#{variables.$prefix}table-striped-bg);
}
}
@ -129,8 +134,8 @@
// The `.table-active` class can be added to highlight rows or cells
.table-active {
--#{$prefix}table-color-state: var(--#{$prefix}table-active-color);
--#{$prefix}table-bg-state: var(--#{$prefix}table-active-bg);
--#{variables.$prefix}table-color-state: var(--#{variables.$prefix}table-active-color);
--#{variables.$prefix}table-bg-state: var(--#{variables.$prefix}table-active-bg);
}
// Hover effect
@ -139,8 +144,8 @@
.table-hover {
> tbody > tr:hover > * {
--#{$prefix}table-color-state: var(--#{$prefix}table-hover-color);
--#{$prefix}table-bg-state: var(--#{$prefix}table-hover-bg);
--#{variables.$prefix}table-color-state: var(--#{variables.$prefix}table-hover-color);
--#{variables.$prefix}table-bg-state: var(--#{variables.$prefix}table-hover-bg);
}
}
@ -150,8 +155,8 @@
// Table variants set the table cell backgrounds, border colors
// and the colors of the striped, hovered & active tables
@each $color, $value in $table-variants {
@include table-variant($color, $value);
@each $color, $value in variables.$table-variants {
@include table-variants.table-variant($color, $value);
}
// Responsive tables
@ -159,10 +164,10 @@
// Generate series of `.table-responsive-*` classes for configuring the screen
// size of where your table will overflow.
@each $breakpoint in map-keys($grid-breakpoints) {
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
@each $breakpoint in map.keys(variables.$grid-breakpoints) {
$infix: breakpoints.breakpoint-infix($breakpoint, variables.$grid-breakpoints);
@include media-breakpoint-down($breakpoint) {
@include breakpoints.media-breakpoint-down($breakpoint) {
.table-responsive#{$infix} {
overflow-x: auto;
-webkit-overflow-scrolling: touch;

70
scss/_toasts.scss
View File

@ -1,32 +1,36 @@
@use "mixins/border-radius";
@use "variables";
@use "vendor/rfs";
.toast {
// 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};
--#{variables.$prefix}toast-zindex: #{variables.$zindex-toast};
--#{variables.$prefix}toast-padding-x: #{variables.$toast-padding-x};
--#{variables.$prefix}toast-padding-y: #{variables.$toast-padding-y};
--#{variables.$prefix}toast-spacing: #{variables.$toast-spacing};
--#{variables.$prefix}toast-max-width: #{variables.$toast-max-width};
@include rfs.rfs(variables.$toast-font-size, --#{variables.$prefix}toast-font-size);
--#{variables.$prefix}toast-color: #{variables.$toast-color};
--#{variables.$prefix}toast-bg: #{variables.$toast-background-color};
--#{variables.$prefix}toast-border-width: #{variables.$toast-border-width};
--#{variables.$prefix}toast-border-color: #{variables.$toast-border-color};
--#{variables.$prefix}toast-border-radius: #{variables.$toast-border-radius};
--#{variables.$prefix}toast-box-shadow: #{variables.$toast-box-shadow};
--#{variables.$prefix}toast-header-color: #{variables.$toast-header-color};
--#{variables.$prefix}toast-header-bg: #{variables.$toast-header-background-color};
--#{variables.$prefix}toast-header-border-color: #{variables.$toast-header-border-color};
// scss-docs-end toast-css-vars
width: var(--#{$prefix}toast-max-width);
width: var(--#{variables.$prefix}toast-max-width);
max-width: 100%;
@include font-size(var(--#{$prefix}toast-font-size));
color: var(--#{$prefix}toast-color);
@include rfs.font-size(var(--#{variables.$prefix}toast-font-size));
color: var(--#{variables.$prefix}toast-color);
pointer-events: auto;
background-color: var(--#{$prefix}toast-bg);
background-color: var(--#{variables.$prefix}toast-bg);
background-clip: padding-box;
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));
border: var(--#{variables.$prefix}toast-border-width) solid var(--#{variables.$prefix}toast-border-color);
box-shadow: var(--#{variables.$prefix}toast-box-shadow);
@include border-radius.border-radius(var(--#{variables.$prefix}toast-border-radius));
&.showing {
opacity: 0;
@ -38,36 +42,36 @@
}
.toast-container {
--#{$prefix}toast-zindex: #{$zindex-toast};
--#{variables.$prefix}toast-zindex: #{variables.$zindex-toast};
position: absolute;
z-index: var(--#{$prefix}toast-zindex);
z-index: var(--#{variables.$prefix}toast-zindex);
width: max-content;
max-width: 100%;
pointer-events: none;
> :not(:last-child) {
margin-bottom: var(--#{$prefix}toast-spacing);
margin-bottom: var(--#{variables.$prefix}toast-spacing);
}
}
.toast-header {
display: flex;
align-items: center;
padding: var(--#{$prefix}toast-padding-y) var(--#{$prefix}toast-padding-x);
color: var(--#{$prefix}toast-header-color);
background-color: var(--#{$prefix}toast-header-bg);
padding: var(--#{variables.$prefix}toast-padding-y) var(--#{variables.$prefix}toast-padding-x);
color: var(--#{variables.$prefix}toast-header-color);
background-color: var(--#{variables.$prefix}toast-header-bg);
background-clip: padding-box;
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)));
border-bottom: var(--#{variables.$prefix}toast-border-width) solid var(--#{variables.$prefix}toast-header-border-color);
@include border-radius.border-top-radius(calc(var(--#{variables.$prefix}toast-border-radius) - var(--#{variables.$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);
margin-right: calc(-.5 * var(--#{variables.$prefix}toast-padding-x)); // stylelint-disable-line function-disallowed-list
margin-left: var(--#{variables.$prefix}toast-padding-x);
}
}
.toast-body {
padding: var(--#{$prefix}toast-padding-x);
padding: var(--#{variables.$prefix}toast-padding-x);
word-wrap: break-word;
}

88
scss/_tooltip.scss
View File

@ -1,38 +1,44 @@
@use "mixins/border-radius";
@use "mixins/deprecate";
@use "mixins/reset-text";
@use "variables";
@use "vendor/rfs";
// Base class
.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};
--#{variables.$prefix}tooltip-zindex: #{variables.$zindex-tooltip};
--#{variables.$prefix}tooltip-max-width: #{variables.$tooltip-max-width};
--#{variables.$prefix}tooltip-padding-x: #{variables.$tooltip-padding-x};
--#{variables.$prefix}tooltip-padding-y: #{variables.$tooltip-padding-y};
--#{variables.$prefix}tooltip-margin: #{variables.$tooltip-margin};
@include rfs.rfs(variables.$tooltip-font-size, --#{variables.$prefix}tooltip-font-size);
--#{variables.$prefix}tooltip-color: #{variables.$tooltip-color};
--#{variables.$prefix}tooltip-bg: #{variables.$tooltip-bg};
--#{variables.$prefix}tooltip-border-radius: #{variables.$tooltip-border-radius};
--#{variables.$prefix}tooltip-opacity: #{variables.$tooltip-opacity};
--#{variables.$prefix}tooltip-arrow-width: #{variables.$tooltip-arrow-width};
--#{variables.$prefix}tooltip-arrow-height: #{variables.$tooltip-arrow-height};
// scss-docs-end tooltip-css-vars
z-index: var(--#{$prefix}tooltip-zindex);
z-index: var(--#{variables.$prefix}tooltip-zindex);
display: block;
margin: var(--#{$prefix}tooltip-margin);
@include deprecate("`$tooltip-margin`", "v5", "v5.x", true);
margin: var(--#{variables.$prefix}tooltip-margin);
@include deprecate.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(var(--#{$prefix}tooltip-font-size));
@include reset-text.reset-text();
@include rfs.font-size(var(--#{variables.$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: var(--#{$prefix}tooltip-opacity); }
&.show { opacity: var(--#{variables.$prefix}tooltip-opacity); }
.tooltip-arrow {
display: block;
width: var(--#{$prefix}tooltip-arrow-width);
height: var(--#{$prefix}tooltip-arrow-height);
width: var(--#{variables.$prefix}tooltip-arrow-width);
height: var(--#{variables.$prefix}tooltip-arrow-height);
&::before {
position: absolute;
@ -44,50 +50,50 @@
}
.bs-tooltip-top .tooltip-arrow {
bottom: calc(-1 * var(--#{$prefix}tooltip-arrow-height)); // stylelint-disable-line function-disallowed-list
bottom: calc(-1 * var(--#{variables.$prefix}tooltip-arrow-height)); // stylelint-disable-line function-disallowed-list
&::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);
border-width: var(--#{variables.$prefix}tooltip-arrow-height) calc(var(--#{variables.$prefix}tooltip-arrow-width) * .5) 0; // stylelint-disable-line function-disallowed-list
border-top-color: var(--#{variables.$prefix}tooltip-bg);
}
}
/* 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);
left: calc(-1 * var(--#{variables.$prefix}tooltip-arrow-height)); // stylelint-disable-line function-disallowed-list
width: var(--#{variables.$prefix}tooltip-arrow-height);
height: var(--#{variables.$prefix}tooltip-arrow-width);
&::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);
border-width: calc(var(--#{variables.$prefix}tooltip-arrow-width) * .5) var(--#{variables.$prefix}tooltip-arrow-height) calc(var(--#{variables.$prefix}tooltip-arrow-width) * .5) 0; // stylelint-disable-line function-disallowed-list
border-right-color: var(--#{variables.$prefix}tooltip-bg);
}
}
/* rtl:end:ignore */
.bs-tooltip-bottom .tooltip-arrow {
top: calc(-1 * var(--#{$prefix}tooltip-arrow-height)); // stylelint-disable-line function-disallowed-list
top: calc(-1 * var(--#{variables.$prefix}tooltip-arrow-height)); // stylelint-disable-line function-disallowed-list
&::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);
border-width: 0 calc(var(--#{variables.$prefix}tooltip-arrow-width) * .5) var(--#{variables.$prefix}tooltip-arrow-height); // stylelint-disable-line function-disallowed-list
border-bottom-color: var(--#{variables.$prefix}tooltip-bg);
}
}
/* 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);
right: calc(-1 * var(--#{variables.$prefix}tooltip-arrow-height)); // stylelint-disable-line function-disallowed-list
width: var(--#{variables.$prefix}tooltip-arrow-height);
height: var(--#{variables.$prefix}tooltip-arrow-width);
&::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);
border-width: calc(var(--#{variables.$prefix}tooltip-arrow-width) * .5) 0 calc(var(--#{variables.$prefix}tooltip-arrow-width) * .5) var(--#{variables.$prefix}tooltip-arrow-height); // stylelint-disable-line function-disallowed-list
border-left-color: var(--#{variables.$prefix}tooltip-bg);
}
}
@ -110,10 +116,10 @@
// Wrapper for the tooltip content
.tooltip-inner {
max-width: var(--#{$prefix}tooltip-max-width);
padding: var(--#{$prefix}tooltip-padding-y) var(--#{$prefix}tooltip-padding-x);
color: var(--#{$prefix}tooltip-color);
max-width: var(--#{variables.$prefix}tooltip-max-width);
padding: var(--#{variables.$prefix}tooltip-padding-y) var(--#{variables.$prefix}tooltip-padding-x);
color: var(--#{variables.$prefix}tooltip-color);
text-align: center;
background-color: var(--#{$prefix}tooltip-bg);
@include border-radius(var(--#{$prefix}tooltip-border-radius));
background-color: var(--#{variables.$prefix}tooltip-bg);
@include border-radius.border-radius(var(--#{variables.$prefix}tooltip-border-radius));
}

9
scss/_transitions.scss
View File

@ -1,5 +1,8 @@
@use "mixins/transition";
@use "variables";
.fade {
@include transition($transition-fade);
@include transition.transition(variables.$transition-fade);
&:not(.show) {
opacity: 0;
@ -16,12 +19,12 @@
.collapsing {
height: 0;
overflow: hidden;
@include transition($transition-collapse);
@include transition.transition(variables.$transition-collapse);
&.collapse-horizontal {
width: 0;
height: auto;
@include transition($transition-collapse-width);
@include transition.transition(variables.$transition-collapse-width);
}
}
// scss-docs-end collapse-classes

40
scss/_type.scss
View File

@ -1,3 +1,7 @@
@use "mixins/lists";
@use "variables";
@use "vendor/rfs";
//
// Headings
//
@ -27,18 +31,18 @@
.lead {
@include font-size($lead-font-size);
font-weight: $lead-font-weight;
@include rfs.font-size(variables.$lead-font-size);
font-weight: variables.$lead-font-weight;
}
// Type display classes
@each $display, $font-size in $display-font-sizes {
@each $display, $font-size in variables.$display-font-sizes {
.display-#{$display} {
font-family: $display-font-family;
font-style: $display-font-style;
font-weight: $display-font-weight;
line-height: $display-line-height;
@include font-size($font-size);
font-family: variables.$display-font-family;
font-style: variables.$display-font-style;
font-weight: variables.$display-font-weight;
line-height: variables.$display-line-height;
@include rfs.font-size($font-size);
}
}
@ -58,18 +62,18 @@
//
.list-unstyled {
@include list-unstyled();
@include lists.list-unstyled();
}
// Inline turns list items into inline-block
.list-inline {
@include list-unstyled();
@include lists.list-unstyled();
}
.list-inline-item {
display: inline-block;
&:not(:last-child) {
margin-right: $list-inline-padding;
margin-right: variables.$list-inline-padding;
}
}
@ -80,14 +84,14 @@
// Builds on `abbr`
.initialism {
@include font-size($initialism-font-size);
@include rfs.font-size(variables.$initialism-font-size);
text-transform: uppercase;
}
// Blockquotes
.blockquote {
margin-bottom: $blockquote-margin-y;
@include font-size($blockquote-font-size);
margin-bottom: variables.$blockquote-margin-y;
@include rfs.font-size(variables.$blockquote-font-size);
> :last-child {
margin-bottom: 0;
@ -95,10 +99,10 @@
}
.blockquote-footer {
margin-top: -$blockquote-margin-y;
margin-bottom: $blockquote-margin-y;
@include font-size($blockquote-footer-font-size);
color: $blockquote-footer-color;
margin-top: -(variables.$blockquote-margin-y);
margin-bottom: variables.$blockquote-margin-y;
@include rfs.font-size(variables.$blockquote-footer-font-size);
color: variables.$blockquote-footer-color;
&::before {
content: "\2014\00A0"; // em dash, nbsp

219
scss/_utilities.scss
View File

@ -1,8 +1,13 @@
@use "sass:map";
@use "functions";
@use "maps";
@use "variables";
// Utilities
$utilities: () !default;
// stylelint-disable-next-line scss/dollar-variable-default
$utilities: map-merge(
$utilities: map.merge(
(
// scss-docs-start utils-vertical-align
"align": (
@ -77,9 +82,9 @@ $utilities: map-merge(
property: box-shadow,
class: shadow,
values: (
null: var(--#{$prefix}box-shadow),
sm: var(--#{$prefix}box-shadow-sm),
lg: var(--#{$prefix}box-shadow-lg),
null: var(--#{variables.$prefix}box-shadow),
sm: var(--#{variables.$prefix}box-shadow-sm),
lg: var(--#{variables.$prefix}box-shadow-lg),
none: none,
)
),
@ -89,7 +94,7 @@ $utilities: map-merge(
css-var: true,
css-variable-name: focus-ring-color,
class: focus-ring,
values: map-loop($theme-colors-rgb, rgba-css-var, "$key", "focus-ring")
values: functions.map-loop(maps.$theme-colors-rgb, rgba-css-var, "$key", "focus-ring")
),
// scss-docs-end utils-focus-ring
// scss-docs-start utils-position
@ -99,21 +104,21 @@ $utilities: map-merge(
),
"top": (
property: top,
values: $position-values
values: variables.$position-values
),
"bottom": (
property: bottom,
values: $position-values
values: variables.$position-values
),
"start": (
property: left,
class: start,
values: $position-values
values: variables.$position-values
),
"end": (
property: right,
class: end,
values: $position-values
values: variables.$position-values
),
"translate-middle": (
property: transform,
@ -129,14 +134,14 @@ $utilities: map-merge(
"border": (
property: border,
values: (
null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
null: var(--#{variables.$prefix}border-width) var(--#{variables.$prefix}border-style) var(--#{variables.$prefix}border-color),
0: 0,
)
),
"border-top": (
property: border-top,
values: (
null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
null: var(--#{variables.$prefix}border-width) var(--#{variables.$prefix}border-style) var(--#{variables.$prefix}border-color),
0: 0,
)
),
@ -144,14 +149,14 @@ $utilities: map-merge(
property: border-right,
class: border-end,
values: (
null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
null: var(--#{variables.$prefix}border-width) var(--#{variables.$prefix}border-style) var(--#{variables.$prefix}border-color),
0: 0,
)
),
"border-bottom": (
property: border-bottom,
values: (
null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
null: var(--#{variables.$prefix}border-width) var(--#{variables.$prefix}border-style) var(--#{variables.$prefix}border-color),
0: 0,
)
),
@ -159,7 +164,7 @@ $utilities: map-merge(
property: border-left,
class: border-start,
values: (
null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
null: var(--#{variables.$prefix}border-width) var(--#{variables.$prefix}border-style) var(--#{variables.$prefix}border-color),
0: 0,
)
),
@ -169,17 +174,17 @@ $utilities: map-merge(
local-vars: (
"border-opacity": 1
),
values: $utilities-border-colors
values: maps.$utilities-border-colors
),
"subtle-border-color": (
property: border-color,
class: border,
values: $utilities-border-subtle
values: maps.$utilities-border-subtle
),
"border-width": (
property: border-width,
class: border,
values: $border-widths
values: variables.$border-widths
),
"border-opacity": (
css-var: true,
@ -353,148 +358,148 @@ $utilities: map-merge(
responsive: true,
property: margin,
class: m,
values: map-merge($spacers, (auto: auto))
values: map.merge(variables.$spacers, (auto: auto))
),
"margin-x": (
responsive: true,
property: margin-right margin-left,
class: mx,
values: map-merge($spacers, (auto: auto))
values: map.merge(variables.$spacers, (auto: auto))
),
"margin-y": (
responsive: true,
property: margin-top margin-bottom,
class: my,
values: map-merge($spacers, (auto: auto))
values: map.merge(variables.$spacers, (auto: auto))
),
"margin-top": (
responsive: true,
property: margin-top,
class: mt,
values: map-merge($spacers, (auto: auto))
values: map.merge(variables.$spacers, (auto: auto))
),
"margin-end": (
responsive: true,
property: margin-right,
class: me,
values: map-merge($spacers, (auto: auto))
values: map.merge(variables.$spacers, (auto: auto))
),
"margin-bottom": (
responsive: true,
property: margin-bottom,
class: mb,
values: map-merge($spacers, (auto: auto))
values: map.merge(variables.$spacers, (auto: auto))
),
"margin-start": (
responsive: true,
property: margin-left,
class: ms,
values: map-merge($spacers, (auto: auto))
values: map.merge(variables.$spacers, (auto: auto))
),
// Negative margin utilities
"negative-margin": (
responsive: true,
property: margin,
class: m,
values: $negative-spacers
values: maps.$negative-spacers
),
"negative-margin-x": (
responsive: true,
property: margin-right margin-left,
class: mx,
values: $negative-spacers
values: maps.$negative-spacers
),
"negative-margin-y": (
responsive: true,
property: margin-top margin-bottom,
class: my,
values: $negative-spacers
values: maps.$negative-spacers
),
"negative-margin-top": (
responsive: true,
property: margin-top,
class: mt,
values: $negative-spacers
values: maps.$negative-spacers
),
"negative-margin-end": (
responsive: true,
property: margin-right,
class: me,
values: $negative-spacers
values: maps.$negative-spacers
),
"negative-margin-bottom": (
responsive: true,
property: margin-bottom,
class: mb,
values: $negative-spacers
values: maps.$negative-spacers
),
"negative-margin-start": (
responsive: true,
property: margin-left,
class: ms,
values: $negative-spacers
values: maps.$negative-spacers
),
// Padding utilities
"padding": (
responsive: true,
property: padding,
class: p,
values: $spacers
values: variables.$spacers
),
"padding-x": (
responsive: true,
property: padding-right padding-left,
class: px,
values: $spacers
values: variables.$spacers
),
"padding-y": (
responsive: true,
property: padding-top padding-bottom,
class: py,
values: $spacers
values: variables.$spacers
),
"padding-top": (
responsive: true,
property: padding-top,
class: pt,
values: $spacers
values: variables.$spacers
),
"padding-end": (
responsive: true,
property: padding-right,
class: pe,
values: $spacers
values: variables.$spacers
),
"padding-bottom": (
responsive: true,
property: padding-bottom,
class: pb,
values: $spacers
values: variables.$spacers
),
"padding-start": (
responsive: true,
property: padding-left,
class: ps,
values: $spacers
values: variables.$spacers
),
// Gap utility
"gap": (
responsive: true,
property: gap,
class: gap,
values: $spacers
values: variables.$spacers
),
"row-gap": (
responsive: true,
property: row-gap,
class: row-gap,
values: $spacers
values: variables.$spacers
),
"column-gap": (
responsive: true,
property: column-gap,
class: column-gap,
values: $spacers
values: variables.$spacers
),
// scss-docs-end utils-spacing
// Text
@ -502,13 +507,13 @@ $utilities: map-merge(
"font-family": (
property: font-family,
class: font,
values: (monospace: var(--#{$prefix}font-monospace))
values: (monospace: var(--#{variables.$prefix}font-monospace))
),
"font-size": (
rfs: true,
property: font-size,
class: fs,
values: $font-sizes
values: variables.$font-sizes
),
"font-style": (
property: font-style,
@ -519,13 +524,13 @@ $utilities: map-merge(
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
lighter: variables.$font-weight-lighter,
light: variables.$font-weight-light,
normal: variables.$font-weight-normal,
medium: variables.$font-weight-medium,
semibold: variables.$font-weight-semibold,
bold: variables.$font-weight-bold,
bolder: variables.$font-weight-bolder
)
),
"line-height": (
@ -533,9 +538,9 @@ $utilities: map-merge(
class: lh,
values: (
1: 1,
sm: $line-height-sm,
base: $line-height-base,
lg: $line-height-lg,
sm: variables.$line-height-sm,
base: variables.$line-height-base,
lg: variables.$line-height-lg,
)
),
"text-align": (
@ -579,15 +584,15 @@ $utilities: map-merge(
local-vars: (
"text-opacity": 1
),
values: map-merge(
$utilities-text-colors,
values: map.merge(
maps.$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),
"muted": var(--#{variables.$prefix}secondary-color), // deprecated
"black-50": rgba(variables.$black, .5), // deprecated
"white-50": rgba(variables.$white, .5), // deprecated
"body-secondary": var(--#{variables.$prefix}secondary-color),
"body-tertiary": var(--#{variables.$prefix}tertiary-color),
"body-emphasis": var(--#{variables.$prefix}emphasis-color),
"reset": inherit,
)
)
@ -605,7 +610,7 @@ $utilities: map-merge(
"text-color": (
property: color,
class: text,
values: $utilities-text-emphasis-colors
values: maps.$utilities-text-emphasis-colors
),
// scss-docs-end utils-color
// scss-docs-start utils-links
@ -637,10 +642,10 @@ $utilities: map-merge(
local-vars: (
"link-underline-opacity": 1
),
values: map-merge(
$utilities-links-underline,
values: map.merge(
maps.$utilities-links-underline,
(
null: rgba(var(--#{$prefix}link-color-rgb), var(--#{$prefix}link-underline-opacity, 1)),
null: rgba(var(--#{variables.$prefix}link-color-rgb), var(--#{variables.$prefix}link-underline-opacity, 1)),
)
)
),
@ -665,12 +670,12 @@ $utilities: map-merge(
local-vars: (
"bg-opacity": 1
),
values: map-merge(
$utilities-bg-colors,
values: map.merge(
maps.$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)),
"body-secondary": rgba(var(--#{variables.$prefix}secondary-bg-rgb), var(--#{variables.$prefix}bg-opacity)),
"body-tertiary": rgba(var(--#{variables.$prefix}tertiary-bg-rgb), var(--#{variables.$prefix}bg-opacity)),
)
)
),
@ -688,13 +693,13 @@ $utilities: map-merge(
"subtle-background-color": (
property: background-color,
class: bg,
values: $utilities-bg-subtle
values: maps.$utilities-bg-subtle
),
// scss-docs-end utils-bg-color
"gradient": (
property: background-image,
class: bg,
values: (gradient: var(--#{$prefix}gradient))
values: (gradient: var(--#{variables.$prefix}gradient))
),
// scss-docs-start utils-interaction
"user-select": (
@ -712,75 +717,75 @@ $utilities: map-merge(
property: border-radius,
class: rounded,
values: (
null: var(--#{$prefix}border-radius),
null: var(--#{variables.$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),
1: var(--#{variables.$prefix}border-radius-sm),
2: var(--#{variables.$prefix}border-radius),
3: var(--#{variables.$prefix}border-radius-lg),
4: var(--#{variables.$prefix}border-radius-xl),
5: var(--#{variables.$prefix}border-radius-xxl),
circle: 50%,
pill: var(--#{$prefix}border-radius-pill)
pill: var(--#{variables.$prefix}border-radius-pill)
)
),
"rounded-top": (
property: border-top-left-radius border-top-right-radius,
class: rounded-top,
values: (
null: var(--#{$prefix}border-radius),
null: var(--#{variables.$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),
1: var(--#{variables.$prefix}border-radius-sm),
2: var(--#{variables.$prefix}border-radius),
3: var(--#{variables.$prefix}border-radius-lg),
4: var(--#{variables.$prefix}border-radius-xl),
5: var(--#{variables.$prefix}border-radius-xxl),
circle: 50%,
pill: var(--#{$prefix}border-radius-pill)
pill: var(--#{variables.$prefix}border-radius-pill)
)
),
"rounded-end": (
property: border-top-right-radius border-bottom-right-radius,
class: rounded-end,
values: (
null: var(--#{$prefix}border-radius),
null: var(--#{variables.$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),
1: var(--#{variables.$prefix}border-radius-sm),
2: var(--#{variables.$prefix}border-radius),
3: var(--#{variables.$prefix}border-radius-lg),
4: var(--#{variables.$prefix}border-radius-xl),
5: var(--#{variables.$prefix}border-radius-xxl),
circle: 50%,
pill: var(--#{$prefix}border-radius-pill)
pill: var(--#{variables.$prefix}border-radius-pill)
)
),
"rounded-bottom": (
property: border-bottom-right-radius border-bottom-left-radius,
class: rounded-bottom,
values: (
null: var(--#{$prefix}border-radius),
null: var(--#{variables.$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),
1: var(--#{variables.$prefix}border-radius-sm),
2: var(--#{variables.$prefix}border-radius),
3: var(--#{variables.$prefix}border-radius-lg),
4: var(--#{variables.$prefix}border-radius-xl),
5: var(--#{variables.$prefix}border-radius-xxl),
circle: 50%,
pill: var(--#{$prefix}border-radius-pill)
pill: var(--#{variables.$prefix}border-radius-pill)
)
),
"rounded-start": (
property: border-bottom-left-radius border-top-left-radius,
class: rounded-start,
values: (
null: var(--#{$prefix}border-radius),
null: var(--#{variables.$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),
1: var(--#{variables.$prefix}border-radius-sm),
2: var(--#{variables.$prefix}border-radius),
3: var(--#{variables.$prefix}border-radius-lg),
4: var(--#{variables.$prefix}border-radius-xl),
5: var(--#{variables.$prefix}border-radius-xxl),
circle: 50%,
pill: var(--#{$prefix}border-radius-pill)
pill: var(--#{variables.$prefix}border-radius-pill)
)
),
// scss-docs-end utils-border-radius
@ -798,7 +803,7 @@ $utilities: map-merge(
"z-index": (
property: z-index,
class: z,
values: $zindex-levels,
values: variables.$zindex-levels,
)
// scss-docs-end utils-zindex
),

148
scss/_variables-dark.scss
View File

@ -1,87 +1,89 @@
// 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.
@use "setup/variables" as *;
//
// Global colors
//
// // 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.
// 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
// //
// // Global colors
// //
// 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 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-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
// // 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
$body-color-dark: $gray-300 !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;
$mark-color-dark: $body-color-dark !default;
$mark-bg-dark: $yellow-800 !default;
// // 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-300 !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;
// $mark-color-dark: $body-color-dark !default;
// $mark-bg-dark: $yellow-800 !default;
//
// Forms
//
// //
// // Forms
// //
$form-select-indicator-color-dark: $body-color-dark !default;
$form-select-indicator-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$form-select-indicator-color-dark}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/></svg>") !default;
// $form-select-indicator-color-dark: $body-color-dark !default;
// $form-select-indicator-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$form-select-indicator-color-dark}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/></svg>") !default;
$form-switch-color-dark: rgba($white, .25) !default;
$form-switch-bg-image-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-color-dark}'/></svg>") !default;
// $form-switch-color-dark: rgba($white, .25) !default;
// $form-switch-bg-image-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-color-dark}'/></svg>") !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
// // 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
// //
$accordion-icon-color-dark: $primary-text-emphasis-dark !default;
$accordion-icon-active-color-dark: $primary-text-emphasis-dark !default;
// $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,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-color-dark}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/></svg>") !default;
$accordion-button-active-icon-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-active-color-dark}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/></svg>") !default;
// scss-docs-end sass-dark-mode-vars
// $accordion-button-icon-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-color-dark}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/></svg>") !default;
// $accordion-button-active-icon-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-active-color-dark}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/></svg>") !default;
// // scss-docs-end sass-dark-mode-vars

1751
scss/_variables.scss
View File

@ -1,1751 +0,0 @@
// Variables
//
// Variables should follow the `$component-state-property-size` formula for
// consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs.
// Color system
// scss-docs-start gray-color-variables
$white: #fff !default;
$gray-100: #f8f9fa !default;
$gray-200: #e9ecef !default;
$gray-300: #dee2e6 !default;
$gray-400: #ced4da !default;
$gray-500: #adb5bd !default;
$gray-600: #6c757d !default;
$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
// scss-docs-start color-variables
$blue: #0d6efd !default;
$indigo: #6610f2 !default;
$purple: #6f42c1 !default;
$pink: #d63384 !default;
$red: #dc3545 !default;
$orange: #fd7e14 !default;
$yellow: #ffc107 !default;
$green: #198754 !default;
$teal: #20c997 !default;
$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;
$info: $cyan !default;
$warning: $yellow !default;
$danger: $red !default;
$light: $gray-100 !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"),
("(", "%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-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
//
// Control the default styling of most Bootstrap elements by modifying these
// 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: (
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 `<body>` element.
$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: $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
//
// Style p element.
$paragraph-margin-bottom: 1rem !default;
// Grid breakpoints
//
// 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,
xxl: 1400px
) !default;
// scss-docs-end grid-breakpoints
@include _assert-ascending($grid-breakpoints, "$grid-breakpoints");
@include _assert-starts-at-zero($grid-breakpoints, "$grid-breakpoints");
// Grid containers
//
// 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,
xxl: 1320px
) !default;
// scss-docs-end container-max-widths
@include _assert-ascending($container-max-widths, "$container-max-widths");
// Grid columns
//
// Set the number of columns and specify the width of the gutters.
$grid-columns: 12 !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.
// 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-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: $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;
$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: 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;
// 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-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;
$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
// 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: 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;
$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: .875em !default;
$sub-sup-font-size: .75em !default;
// fusv-disable
$text-muted: var(--#{$prefix}secondary-color) !default; // Deprecated in 5.3.0
// fusv-enable
$initialism-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-margin-y: $spacer !default;
$hr-color: inherit !default;
// fusv-disable
$hr-bg-color: null !default; // Deprecated in v5.2.0
$hr-height: null !default; // Deprecated in v5.2.0
// fusv-enable
$hr-border-color: null !default; // Allows for inherited colors
$hr-border-width: var(--#{$prefix}border-width) !default;
$hr-opacity: .25 !default;
// scss-docs-start vr-variables
$vr-border-width: var(--#{$prefix}border-width) !default;
// scss-docs-end vr-variables
$legend-margin-bottom: .5rem !default;
$legend-font-size: 1.5rem !default;
$legend-font-weight: null !default;
$dt-font-weight: $font-weight-bold !default;
$list-inline-padding: .5rem !default;
$mark-padding: .1875em !default;
$mark-color: $body-color !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.
// 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-cell-vertical-align: top !default;
$table-color: var(--#{$prefix}emphasis-color) !default;
$table-bg: var(--#{$prefix}body-bg) !default;
$table-accent-bg: transparent !default;
$table-th-font-weight: null !default;
$table-striped-color: $table-color !default;
$table-striped-bg-factor: .05 !default;
$table-striped-bg: rgba(var(--#{$prefix}emphasis-color-rgb), $table-striped-bg-factor) !default;
$table-active-color: $table-color !default;
$table-active-bg-factor: .1 !default;
$table-active-bg: rgba(var(--#{$prefix}emphasis-color-rgb), $table-active-bg-factor) !default;
$table-hover-color: $table-color !default;
$table-hover-bg-factor: .075 !default;
$table-hover-bg: rgba(var(--#{$prefix}emphasis-color-rgb), $table-hover-bg-factor) !default;
$table-border-factor: .2 !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-bg-scale: -80% !default;
// scss-docs-end table-variables
// 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: $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-padding-y-lg: .5rem !default;
$input-btn-padding-x-lg: 1rem !default;
$input-btn-font-size-lg: $font-size-lg !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;
$btn-font-size: $input-btn-font-size !default;
$btn-line-height: $input-btn-line-height !default;
$btn-white-space: null !default; // Set to `nowrap` to prevent text wrapping
$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-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-border-width: $input-btn-border-width !default;
$btn-font-weight: $font-weight-normal !default;
$btn-box-shadow: inset 0 1px 0 rgba($white, .15), 0 1px 1px rgba($black, .075) !default;
$btn-focus-width: $input-btn-focus-width !default;
$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-link-focus-shadow-rgb: to-rgb(mix(color-contrast($link-color), $link-color, 15%)) !default;
// Allows for customizing button radius independently from global border radius
$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
// 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;
$input-font-size: $input-btn-font-size !default;
$input-font-weight: $font-weight-base !default;
$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-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-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: var(--#{$prefix}body-color) !default;
$input-border-color: var(--#{$prefix}border-color) !default;
$input-border-width: $input-btn-border-width !default;
$input-box-shadow: var(--#{$prefix}box-shadow-inset) !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: 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: var(--#{$prefix}secondary-color) !default;
$input-plaintext-color: var(--#{$prefix}body-color) !default;
$input-height-border: calc(#{$input-border-width} * 2) !default; // stylelint-disable-line function-disallowed-list
$input-height-inner: calc(#{$input-line-height} * 1em + #{$input-padding-y} * 2) !default;
$input-height-inner-half: calc(#{$input-line-height} * .5em + #{$input-padding-y}) !default;
$input-height-inner-quarter: calc(#{$input-line-height} * .25em + #{$input-padding-y} * .5) !default;
$input-height: calc(#{$input-line-height} * 1em + #{$input-padding-y} * 2 + #{$input-height-border}) !default;
$input-height-sm: calc(#{$input-line-height} * 1em + #{$input-padding-y-sm} * 2 + #{$input-height-border}) !default;
$input-height-lg: calc(#{$input-line-height} * 1em + #{$input-padding-y-lg} * 2 + #{$input-height-border}) !default;
$input-transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out !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,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$form-check-input-checked-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/></svg>") !default;
$form-check-radio-checked-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='2' fill='#{$form-check-input-checked-color}'/></svg>") !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,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$form-check-input-indeterminate-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/></svg>") !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,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-color}'/></svg>") !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,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-focus-color}'/></svg>") !default;
$form-switch-checked-color: $component-active-color !default;
$form-switch-checked-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-checked-color}'/></svg>") !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: var(--#{$prefix}tertiary-bg) !default;
$input-group-addon-border-color: $input-border-color !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,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$form-select-indicator-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/></svg>") !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: var(--#{$prefix}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}secondary-bg) !default;
$form-range-track-border-radius: 1rem !default;
$form-range-track-box-shadow: var(--#{$prefix}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: calc(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: $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,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><path fill='#{$form-feedback-icon-valid-color}' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1'/></svg>") !default;
$form-feedback-icon-invalid-color: $form-feedback-invalid-color !default;
$form-feedback-icon-invalid: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='#{$form-feedback-icon-invalid-color}'><circle cx='6' cy='6' r='4.5'/><path stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/><circle cx='6' cy='8.2' r='.6' fill='#{$form-feedback-icon-invalid-color}' stroke='none'/></svg>") !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),
),
"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-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-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-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
// scss-docs-start navbar-variables
$navbar-padding-y: $spacer * .5 !default;
$navbar-padding-x: null !default;
$navbar-nav-link-padding-x: .5rem !default;
$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) * .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-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,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-light-icon-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !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-icon-color: $navbar-dark-color !default;
$navbar-dark-toggler-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-dark-icon-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !default;
$navbar-dark-toggler-border-color: rgba($white, .1) !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: 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: var(--#{$prefix}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: var(--#{$prefix}tertiary-color) !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
// 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-font-size: $font-size-base !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: 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: $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-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
// Placeholders
// scss-docs-start placeholders
$placeholder-opacity-max: .5 !default;
$placeholder-opacity-min: .2 !default;
// scss-docs-end placeholders
// Cards
// 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: calc(#{$card-border-radius} - #{$card-border-width}) !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: 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: calc(#{$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;
// fusv-disable
$accordion-button-focus-border-color: $input-focus-border-color !default; // Deprecated in v5.3.3
// fusv-enable
$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,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='#{$accordion-icon-color}' stroke-linecap='round' stroke-linejoin='round'><path d='m2 5 6 6 6-6'/></svg>") !default;
$accordion-button-active-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='#{$accordion-icon-active-color}' stroke-linecap='round' stroke-linejoin='round'><path d='m2 5 6 6 6-6'/></svg>") !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: 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: $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;
// 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: 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: var(--#{$prefix}body-bg) !default;
$popover-max-width: 276px !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: var(--#{$prefix}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: $spacer !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;
// scss-docs-end popover-variables
// 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: .5rem !default;
$toast-font-size: .875rem !default;
$toast-color: null !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: 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
// scss-docs-start badge-variables
$badge-font-size: .75em !default;
$badge-font-weight: $font-weight-bold !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
// scss-docs-start modal-variables
$modal-inner-padding: $spacer !default;
$modal-footer-margin-between: .5rem !default;
$modal-dialog-margin: .5rem !default;
$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: 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: calc(#{$modal-content-border-radius} - #{$modal-content-border-width}) !default;
$modal-content-box-shadow-xs: var(--#{$prefix}box-shadow-sm) !default;
$modal-content-box-shadow-sm-up: var(--#{$prefix}box-shadow) !default;
$modal-backdrop-bg: $black !default;
$modal-backdrop-opacity: .5 !default;
$modal-header-border-color: var(--#{$prefix}border-color) !default;
$modal-header-border-width: $modal-content-border-width !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-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.
// 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-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: 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: $primary !default;
$progress-bar-animation-timing: 1s linear infinite !default;
$progress-bar-transition: width .6s ease !default;
// scss-docs-end progress-variables
// List group
// 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: var(--#{$prefix}secondary-color) !default;
$list-group-disabled-bg: $list-group-bg !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: 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: 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
// 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: 0 !default;
$breadcrumb-padding-x: 0 !default;
$breadcrumb-item-padding-x: .5rem !default;
$breadcrumb-margin-bottom: 1rem !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-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;
$carousel-control-hover-opacity: .9 !default;
$carousel-control-transition: opacity .15s ease !default;
$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: 2rem !default;
$carousel-control-prev-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0'/></svg>") !default;
$carousel-control-next-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708'/></svg>") !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
// 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
// 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,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$btn-close-color}'><path d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414'/></svg>") !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: $small-font-size !default;
$code-color: $pink !default;
$kbd-padding-y: .1875rem !default;
$kbd-padding-x: .375rem !default;
$kbd-font-size: $code-font-size !default;
$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
$pre-color: null !default;
@import "variables-dark"; // TODO: can be removed safely in v6, only here to avoid breaking changes in v5.3

85
scss/bootstrap.scss vendored
View File

@ -6,49 +6,50 @@
// scss-docs-start import-stack
// Configuration
@import "functions";
@import "variables";
@import "variables-dark";
@import "maps";
@import "mixins";
@import "utilities";
// @use "functions";
// @use "variables";
@use "setup" as *;
// @use "mixins";
// @use "variables-dark";
// @use "maps";
// @use "utilities";
// Layout & components
@import "root";
@import "reboot";
@import "type";
@import "images";
@import "containers";
@import "grid";
@import "tables";
@import "forms";
@import "buttons";
@import "transitions";
@import "dropdown";
@import "button-group";
@import "nav";
@import "navbar";
@import "card";
@import "accordion";
@import "breadcrumb";
@import "pagination";
@import "badge";
@import "alert";
@import "progress";
@import "list-group";
@import "close";
@import "toasts";
@import "modal";
@import "tooltip";
@import "popover";
@import "carousel";
@import "spinners";
@import "offcanvas";
@import "placeholders";
@use "root";
// @use "reboot";
// @use "type";
// @use "images";
// @use "containers";
// @use "grid";
// @use "tables";
// @use "forms";
// @use "buttons";
// @use "transitions";
// @use "dropdown";
// @use "button-group";
// @use "nav";
// @use "navbar";
// @use "card";
// @use "accordion";
// @use "breadcrumb";
// @use "pagination";
// @use "badge";
// @use "alert";
// @use "progress";
// @use "list-group";
// @use "close";
// @use "toasts";
// @use "modal";
// @use "tooltip";
// @use "popover";
// @use "carousel";
// @use "spinners";
// @use "offcanvas";
// @use "placeholders";
// Helpers
@import "helpers";
// // Helpers
// @use "helpers";
// Utilities
@import "utilities/api";
// scss-docs-end import-stack
// // Utilities
// @use "utilities/api";
// // scss-docs-end import-stack

50
scss/forms/_floating-labels.scss
View File

@ -1,12 +1,16 @@
@use "../mixins/border-radius";
@use "../mixins/transition";
@use "../variables";
.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;
height: variables.$form-floating-height;
min-height: variables.$form-floating-height;
line-height: variables.$form-floating-line-height;
}
> label {
@ -16,21 +20,21 @@
z-index: 2;
max-width: 100%;
height: 100%; // allow textareas
padding: $form-floating-padding-y $form-floating-padding-x;
padding: variables.$form-floating-padding-y variables.$form-floating-padding-x;
overflow: hidden;
color: rgba(var(--#{$prefix}body-color-rgb), #{$form-floating-label-opacity});
color: rgba(var(--#{variables.$prefix}body-color-rgb), #{variables.$form-floating-label-opacity});
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
border: variables.$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);
@include transition.transition(variables.$form-floating-transition);
}
> .form-control,
> .form-control-plaintext {
padding: $form-floating-padding-y $form-floating-padding-x;
padding: variables.$form-floating-padding-y variables.$form-floating-padding-x;
&::placeholder {
color: transparent;
@ -38,19 +42,19 @@
&:focus,
&:not(:placeholder-shown) {
padding-top: $form-floating-input-padding-t;
padding-bottom: $form-floating-input-padding-b;
padding-top: variables.$form-floating-input-padding-t;
padding-bottom: variables.$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;
padding-top: variables.$form-floating-input-padding-t;
padding-bottom: variables.$form-floating-input-padding-b;
}
}
> .form-select {
padding-top: $form-floating-input-padding-t;
padding-bottom: $form-floating-input-padding-b;
padding-top: variables.$form-floating-input-padding-t;
padding-bottom: variables.$form-floating-input-padding-b;
}
> .form-control:focus,
@ -58,39 +62,39 @@
> .form-control-plaintext,
> .form-select {
~ label {
transform: $form-floating-label-transform;
transform: variables.$form-floating-label-transform;
}
}
// Duplicated because `:-webkit-autofill` invalidates other selectors when grouped
> .form-control:-webkit-autofill {
~ label {
transform: $form-floating-label-transform;
transform: variables.$form-floating-label-transform;
}
}
> textarea:focus,
> textarea:not(:placeholder-shown) {
~ label::after {
position: absolute;
inset: $form-floating-padding-y ($form-floating-padding-x * .5);
inset: variables.$form-floating-padding-y (variables.$form-floating-padding-x * .5);
z-index: -1;
height: $form-floating-label-height;
height: variables.$form-floating-label-height;
content: "";
background-color: $input-bg;
@include border-radius($input-border-radius);
background-color: variables.$input-bg;
@include border-radius.border-radius(variables.$input-border-radius);
}
}
> textarea:disabled ~ label::after {
background-color: $input-disabled-bg;
background-color: variables.$input-disabled-bg;
}
> .form-control-plaintext {
~ label {
border-width: $input-border-width 0; // Required to properly position label text - as explained above
border-width: variables.$input-border-width 0; // Required to properly position label text - as explained above
}
}
> :disabled ~ label,
> .form-control:disabled ~ label { // Required for `.form-control`s because of specificity
color: $form-floating-label-disabled-color;
color: variables.$form-floating-label-disabled-color;
}
}

116
scss/forms/_form-check.scss
View File

@ -1,104 +1,110 @@
@use "../functions";
@use "../mixins/border-radius";
@use "../mixins/color-mode";
@use "../mixins/transition";
@use "../variables";
//
// Check/radio
//
.form-check {
display: block;
min-height: $form-check-min-height;
padding-left: $form-check-padding-start;
margin-bottom: $form-check-margin-bottom;
min-height: variables.$form-check-min-height;
padding-left: variables.$form-check-padding-start;
margin-bottom: variables.$form-check-margin-bottom;
.form-check-input {
float: left;
margin-left: $form-check-padding-start * -1;
margin-left: variables.$form-check-padding-start * -1;
}
}
.form-check-reverse {
padding-right: $form-check-padding-start;
padding-right: variables.$form-check-padding-start;
padding-left: 0;
text-align: right;
.form-check-input {
float: right;
margin-right: $form-check-padding-start * -1;
margin-right: variables.$form-check-padding-start * -1;
margin-left: 0;
}
}
.form-check-input {
--#{$prefix}form-check-bg: #{$form-check-input-bg};
--#{variables.$prefix}form-check-bg: #{variables.$form-check-input-bg};
flex-shrink: 0;
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
width: variables.$form-check-input-width;
height: variables.$form-check-input-width;
margin-top: (variables.$line-height-base - variables.$form-check-input-width) * .5; // line-height minus check height
vertical-align: top;
appearance: none;
background-color: var(--#{$prefix}form-check-bg);
background-image: var(--#{$prefix}form-check-bg-image);
background-color: var(--#{variables.$prefix}form-check-bg);
background-image: var(--#{variables.$prefix}form-check-bg-image);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
border: $form-check-input-border;
border: variables.$form-check-input-border;
print-color-adjust: exact; // Keep themed appearance for print
@include transition($form-check-transition);
@include transition.transition(variables.$form-check-transition);
&[type="checkbox"] {
@include border-radius($form-check-input-border-radius);
@include border-radius.border-radius(variables.$form-check-input-border-radius);
}
&[type="radio"] {
// stylelint-disable-next-line property-disallowed-list
border-radius: $form-check-radio-border-radius;
border-radius: variables.$form-check-radio-border-radius;
}
&:active {
filter: $form-check-input-active-filter;
filter: variables.$form-check-input-active-filter;
}
&:focus {
border-color: $form-check-input-focus-border;
border-color: variables.$form-check-input-focus-border;
outline: 0;
box-shadow: $form-check-input-focus-box-shadow;
box-shadow: variables.$form-check-input-focus-box-shadow;
}
&:checked {
background-color: $form-check-input-checked-bg-color;
border-color: $form-check-input-checked-border-color;
background-color: variables.$form-check-input-checked-bg-color;
border-color: variables.$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);
@if variables.$enable-gradients {
--#{variables.$prefix}form-check-bg-image: #{functions.escape-svg(variables.$form-check-input-checked-bg-image)}, var(--#{variables.$prefix}gradient);
} @else {
--#{$prefix}form-check-bg-image: #{escape-svg($form-check-input-checked-bg-image)};
--#{variables.$prefix}form-check-bg-image: #{functions.escape-svg(variables.$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);
@if variables.$enable-gradients {
--#{variables.$prefix}form-check-bg-image: #{functions.escape-svg(variables.$form-check-radio-checked-bg-image)}, var(--#{variables.$prefix}gradient);
} @else {
--#{$prefix}form-check-bg-image: #{escape-svg($form-check-radio-checked-bg-image)};
--#{variables.$prefix}form-check-bg-image: #{functions.escape-svg(variables.$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;
background-color: variables.$form-check-input-indeterminate-bg-color;
border-color: variables.$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);
@if variables.$enable-gradients {
--#{variables.$prefix}form-check-bg-image: #{functions.escape-svg(variables.$form-check-input-indeterminate-bg-image)}, var(--#{variables.$prefix}gradient);
} @else {
--#{$prefix}form-check-bg-image: #{escape-svg($form-check-input-indeterminate-bg-image)};
--#{variables.$prefix}form-check-bg-image: #{functions.escape-svg(variables.$form-check-input-indeterminate-bg-image)};
}
}
&:disabled {
pointer-events: none;
filter: none;
opacity: $form-check-input-disabled-opacity;
opacity: variables.$form-check-input-disabled-opacity;
}
// Use disabled attribute in addition of :disabled pseudo-class
@ -107,14 +113,14 @@
&:disabled {
~ .form-check-label {
cursor: default;
opacity: $form-check-label-disabled-opacity;
opacity: variables.$form-check-label-disabled-opacity;
}
}
}
.form-check-label {
color: $form-check-label-color;
cursor: $form-check-label-cursor;
color: variables.$form-check-label-color;
cursor: variables.$form-check-label-cursor;
}
//
@ -122,39 +128,39 @@
//
.form-switch {
padding-left: $form-switch-padding-start;
padding-left: variables.$form-switch-padding-start;
.form-check-input {
--#{$prefix}form-switch-bg: #{escape-svg($form-switch-bg-image)};
--#{variables.$prefix}form-switch-bg: #{functions.escape-svg(variables.$form-switch-bg-image)};
width: $form-switch-width;
margin-left: $form-switch-padding-start * -1;
background-image: var(--#{$prefix}form-switch-bg);
width: variables.$form-switch-width;
margin-left: variables.$form-switch-padding-start * -1;
background-image: var(--#{variables.$prefix}form-switch-bg);
background-position: left center;
@include border-radius($form-switch-border-radius, 0);
@include transition($form-switch-transition);
@include border-radius.border-radius(variables.$form-switch-border-radius, 0);
@include transition.transition(variables.$form-switch-transition);
&:focus {
--#{$prefix}form-switch-bg: #{escape-svg($form-switch-focus-bg-image)};
--#{variables.$prefix}form-switch-bg: #{functions.escape-svg(variables.$form-switch-focus-bg-image)};
}
&:checked {
background-position: $form-switch-checked-bg-position;
background-position: variables.$form-switch-checked-bg-position;
@if $enable-gradients {
--#{$prefix}form-switch-bg: #{escape-svg($form-switch-checked-bg-image)}, var(--#{$prefix}gradient);
@if variables.$enable-gradients {
--#{variables.$prefix}form-switch-bg: #{functions.escape-svg(variables.$form-switch-checked-bg-image)}, var(--#{variables.$prefix}gradient);
} @else {
--#{$prefix}form-switch-bg: #{escape-svg($form-switch-checked-bg-image)};
--#{variables.$prefix}form-switch-bg: #{functions.escape-svg(variables.$form-switch-checked-bg-image)};
}
}
}
&.form-check-reverse {
padding-right: $form-switch-padding-start;
padding-right: variables.$form-switch-padding-start;
padding-left: 0;
.form-check-input {
margin-right: $form-switch-padding-start * -1;
margin-right: variables.$form-switch-padding-start * -1;
margin-left: 0;
}
}
@ -162,7 +168,7 @@
.form-check-inline {
display: inline-block;
margin-right: $form-check-inline-margin-end;
margin-right: variables.$form-check-inline-margin-end;
}
.btn-check {
@ -175,15 +181,15 @@
+ .btn {
pointer-events: none;
filter: none;
opacity: $form-check-btn-check-disabled-opacity;
opacity: variables.$form-check-btn-check-disabled-opacity;
}
}
}
@if $enable-dark-mode {
@include color-mode(dark) {
@if variables.$enable-dark-mode {
@include color-mode.color-mode(dark) {
.form-switch .form-check-input:not(:checked):not(:focus) {
--#{$prefix}form-switch-bg: #{escape-svg($form-switch-bg-image-dark)};
--#{variables.$prefix}form-switch-bg: #{functions.escape-svg($form-switch-bg-image-dark)};
}
}
}

124
scss/forms/_form-control.scss
View File

@ -1,3 +1,11 @@
@use "sass:math";
@use "../mixins/border-radius";
@use "../mixins/box-shadow";
@use "../mixins/gradients";
@use "../mixins/transition";
@use "../variables";
@use "../vendor/rfs";
//
// General form controls (plus a few specific high-level interventions)
//
@ -5,22 +13,22 @@
.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;
padding: variables.$input-padding-y variables.$input-padding-x;
font-family: variables.$input-font-family;
@include rfs.font-size(variables.$input-font-size);
font-weight: variables.$input-font-weight;
line-height: variables.$input-line-height;
color: variables.$input-color;
appearance: none; // Fix appearance for date inputs in Safari
background-color: $input-bg;
background-color: variables.$input-bg;
background-clip: padding-box;
border: $input-border-width solid $input-border-color;
border: variables.$input-border-width solid variables.$input-border-color;
// Note: This has no effect on <select>s in some browsers, due to the limited stylability of `<select>`s in CSS.
@include border-radius($input-border-radius, 0);
@include border-radius.border-radius(variables.$input-border-radius, 0);
@include box-shadow($input-box-shadow);
@include transition($input-transition);
@include box-shadow.box-shadow(variables.$input-box-shadow);
@include transition.transition(variables.$input-transition);
&[type="file"] {
overflow: hidden; // prevent pseudo element button overlap
@ -32,15 +40,15 @@
// 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;
color: variables.$input-focus-color;
background-color: variables.$input-focus-bg;
border-color: variables.$input-focus-border-color;
outline: 0;
@if $enable-shadows {
@include box-shadow($input-box-shadow, $input-focus-box-shadow);
@if variables.$enable-shadows {
@include box-shadow.box-shadow(variables.$input-box-shadow, variables.$input-focus-box-shadow);
} @else {
// Avoid using mixin so we can pass custom focus shadow properly
box-shadow: $input-focus-box-shadow;
box-shadow: variables.$input-focus-box-shadow;
}
}
@ -56,7 +64,7 @@
// 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);
height: if(math.unit(variables.$input-line-height) == "", variables.$input-line-height * 1em, variables.$input-line-height);
// Android Chrome type="date" is taller than the other inputs
// because of "margin: 1px 24px 1px 4px" inside the shadow DOM
@ -73,7 +81,7 @@
// Placeholder
&::placeholder {
color: $input-placeholder-color;
color: variables.$input-placeholder-color;
// Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526.
opacity: 1;
}
@ -84,31 +92,31 @@
// 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;
color: variables.$input-disabled-color;
background-color: variables.$input-disabled-bg;
border-color: variables.$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);
padding: variables.$input-padding-y variables.$input-padding-x;
margin: (-(variables.$input-padding-y)) (-(variables.$input-padding-x));
margin-inline-end: variables.$input-padding-x;
color: variables.$form-file-button-color;
@include gradients.gradient-bg(variables.$form-file-button-bg);
pointer-events: none;
border-color: inherit;
border-style: solid;
border-width: 0;
border-inline-end-width: $input-border-width;
border-inline-end-width: variables.$input-border-width;
border-radius: 0; // stylelint-disable-line property-disallowed-list
@include transition($btn-transition);
@include transition.transition(variables.$btn-transition);
}
&:hover:not(:disabled):not([readonly])::file-selector-button {
background-color: $form-file-button-hover-bg;
background-color: variables.$form-file-button-hover-bg;
}
}
@ -120,13 +128,13 @@
.form-control-plaintext {
display: block;
width: 100%;
padding: $input-padding-y 0;
padding: variables.$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;
line-height: variables.$input-line-height;
color: variables.$input-plaintext-color;
background-color: transparent;
border: solid transparent;
border-width: $input-border-width 0;
border-width: variables.$input-border-width 0;
&:focus {
outline: 0;
@ -147,28 +155,28 @@
// 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);
min-height: variables.$input-height-sm;
padding: variables.$input-padding-y-sm variables.$input-padding-x-sm;
@include rfs.font-size(variables.$input-font-size-sm);
@include border-radius.border-radius(variables.$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;
padding: variables.$input-padding-y-sm variables.$input-padding-x-sm;
margin: (-(variables.$input-padding-y-sm)) (-(variables.$input-padding-x-sm));
margin-inline-end: variables.$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);
min-height: variables.$input-height-lg;
padding: variables.$input-padding-y-lg variables.$input-padding-x-lg;
@include rfs.font-size(variables.$input-font-size-lg);
@include border-radius.border-radius(variables.$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;
padding: variables.$input-padding-y-lg variables.$input-padding-x-lg;
margin: (-(variables.$input-padding-y-lg)) (-(variables.$input-padding-x-lg));
margin-inline-end: variables.$input-padding-x-lg;
}
}
@ -177,23 +185,23 @@
// stylelint-disable selector-no-qualifying-type
textarea {
&.form-control {
min-height: $input-height;
min-height: variables.$input-height;
}
&.form-control-sm {
min-height: $input-height-sm;
min-height: variables.$input-height-sm;
}
&.form-control-lg {
min-height: $input-height-lg;
min-height: variables.$input-height-lg;
}
}
// stylelint-enable selector-no-qualifying-type
.form-control-color {
width: $form-color-width;
height: $input-height;
padding: $input-padding-y;
width: variables.$form-color-width;
height: variables.$input-height;
padding: variables.$input-padding-y;
&:not(:disabled):not([readonly]) {
cursor: pointer;
@ -201,14 +209,14 @@ textarea {
&::-moz-color-swatch {
border: 0 !important; // stylelint-disable-line declaration-no-important
@include border-radius($input-border-radius);
@include border-radius.border-radius(variables.$input-border-radius);
}
&::-webkit-color-swatch {
border: 0 !important; // stylelint-disable-line declaration-no-important
@include border-radius($input-border-radius);
@include border-radius.border-radius(variables.$input-border-radius);
}
&.form-control-sm { height: $input-height-sm; }
&.form-control-lg { height: $input-height-lg; }
&.form-control-sm { height: variables.$input-height-sm; }
&.form-control-lg { height: variables.$input-height-lg; }
}

74
scss/forms/_form-range.scss
View File

@ -1,3 +1,9 @@
@use "../mixins/border-radius";
@use "../mixins/box-shadow";
@use "../mixins/gradients";
@use "../mixins/transition";
@use "../variables";
// Range
//
// Style range inputs the same across browsers. Vendor-specific rules for pseudo
@ -6,7 +12,7 @@
.form-range {
width: 100%;
height: calc(#{$form-range-thumb-height} + #{$form-range-thumb-focus-box-shadow-width} * 2);
height: calc(#{variables.$form-range-thumb-height} + #{variables.$form-range-thumb-focus-box-shadow-width} * 2);
padding: 0; // Need to reset padding
appearance: none;
background-color: transparent;
@ -16,8 +22,8 @@
// 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; }
&::-webkit-slider-thumb { box-shadow: variables.$form-range-thumb-focus-box-shadow; }
&::-moz-range-thumb { box-shadow: variables.$form-range-thumb-focus-box-shadow; }
}
&::-moz-focus-outer {
@ -25,67 +31,67 @@
}
&::-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
width: variables.$form-range-thumb-width;
height: variables.$form-range-thumb-height;
margin-top: (variables.$form-range-track-height - variables.$form-range-thumb-height) * .5; // Webkit specific
appearance: none;
@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);
@include gradients.gradient-bg(variables.$form-range-thumb-bg);
border: variables.$form-range-thumb-border;
@include border-radius.border-radius(variables.$form-range-thumb-border-radius);
@include box-shadow.box-shadow(variables.$form-range-thumb-box-shadow);
@include transition.transition(variables.$form-range-thumb-transition);
&:active {
@include gradient-bg($form-range-thumb-active-bg);
@include gradients.gradient-bg(variables.$form-range-thumb-active-bg);
}
}
&::-webkit-slider-runnable-track {
width: $form-range-track-width;
height: $form-range-track-height;
width: variables.$form-range-track-width;
height: variables.$form-range-track-height;
color: transparent; // Why?
cursor: $form-range-track-cursor;
background-color: $form-range-track-bg;
cursor: variables.$form-range-track-cursor;
background-color: variables.$form-range-track-bg;
border-color: transparent;
@include border-radius($form-range-track-border-radius);
@include box-shadow($form-range-track-box-shadow);
@include border-radius.border-radius(variables.$form-range-track-border-radius);
@include box-shadow.box-shadow(variables.$form-range-track-box-shadow);
}
&::-moz-range-thumb {
width: $form-range-thumb-width;
height: $form-range-thumb-height;
width: variables.$form-range-thumb-width;
height: variables.$form-range-thumb-height;
appearance: none;
@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);
@include gradients.gradient-bg(variables.$form-range-thumb-bg);
border: variables.$form-range-thumb-border;
@include border-radius.border-radius(variables.$form-range-thumb-border-radius);
@include box-shadow.box-shadow(variables.$form-range-thumb-box-shadow);
@include transition.transition(variables.$form-range-thumb-transition);
&:active {
@include gradient-bg($form-range-thumb-active-bg);
@include gradients.gradient-bg(variables.$form-range-thumb-active-bg);
}
}
&::-moz-range-track {
width: $form-range-track-width;
height: $form-range-track-height;
width: variables.$form-range-track-width;
height: variables.$form-range-track-height;
color: transparent;
cursor: $form-range-track-cursor;
background-color: $form-range-track-bg;
cursor: variables.$form-range-track-cursor;
background-color: variables.$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);
@include border-radius.border-radius(variables.$form-range-track-border-radius);
@include box-shadow.box-shadow(variables.$form-range-track-box-shadow);
}
&:disabled {
pointer-events: none;
&::-webkit-slider-thumb {
background-color: $form-range-thumb-disabled-bg;
background-color: variables.$form-range-thumb-disabled-bg;
}
&::-moz-range-thumb {
background-color: $form-range-thumb-disabled-bg;
background-color: variables.$form-range-thumb-disabled-bg;
}
}
}

82
scss/forms/_form-select.scss
View File

@ -1,80 +1,88 @@
@use "../functions";
@use "../mixins/border-radius";
@use "../mixins/box-shadow";
@use "../mixins/color-mode";
@use "../mixins/transition";
@use "../variables";
@use "../vendor/rfs";
// 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)};
--#{variables.$prefix}form-select-bg-img: #{functions.escape-svg(variables.$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;
padding: variables.$form-select-padding-y variables.$form-select-indicator-padding variables.$form-select-padding-y variables.$form-select-padding-x;
font-family: variables.$form-select-font-family;
@include rfs.font-size(variables.$form-select-font-size);
font-weight: variables.$form-select-font-weight;
line-height: variables.$form-select-line-height;
color: variables.$form-select-color;
appearance: none;
background-color: $form-select-bg;
background-image: var(--#{$prefix}form-select-bg-img), var(--#{$prefix}form-select-bg-icon, none);
background-color: variables.$form-select-bg;
background-image: var(--#{variables.$prefix}form-select-bg-img), var(--#{variables.$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);
background-position: variables.$form-select-bg-position;
background-size: variables.$form-select-bg-size;
border: variables.$form-select-border-width solid variables.$form-select-border-color;
@include border-radius.border-radius(variables.$form-select-border-radius, 0);
@include box-shadow.box-shadow(variables.$form-select-box-shadow);
@include transition.transition(variables.$form-select-transition);
&:focus {
border-color: $form-select-focus-border-color;
border-color: variables.$form-select-focus-border-color;
outline: 0;
@if $enable-shadows {
@include box-shadow($form-select-box-shadow, $form-select-focus-box-shadow);
@if variables.$enable-shadows {
@include box-shadow.box-shadow(variables.$form-select-box-shadow, variables.$form-select-focus-box-shadow);
} @else {
// Avoid using mixin so we can pass custom focus shadow properly
box-shadow: $form-select-focus-box-shadow;
box-shadow: variables.$form-select-focus-box-shadow;
}
}
&[multiple],
&[size]:not([size="1"]) {
padding-right: $form-select-padding-x;
padding-right: variables.$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;
color: variables.$form-select-disabled-color;
background-color: variables.$form-select-disabled-bg;
border-color: variables.$form-select-disabled-border-color;
}
// Remove outline from select box in FF
&:-moz-focusring {
color: transparent;
text-shadow: 0 0 0 $form-select-color;
text-shadow: 0 0 0 variables.$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);
padding-top: variables.$form-select-padding-y-sm;
padding-bottom: variables.$form-select-padding-y-sm;
padding-left: variables.$form-select-padding-x-sm;
@include rfs.font-size(variables.$form-select-font-size-sm);
@include border-radius.border-radius(variables.$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);
padding-top: variables.$form-select-padding-y-lg;
padding-bottom: variables.$form-select-padding-y-lg;
padding-left: variables.$form-select-padding-x-lg;
@include rfs.font-size(variables.$form-select-font-size-lg);
@include border-radius.border-radius(variables.$form-select-border-radius-lg);
}
@if $enable-dark-mode {
@include color-mode(dark) {
@if variables.$enable-dark-mode {
@include color-mode.color-mode(dark) {
.form-select {
--#{$prefix}form-select-bg-img: #{escape-svg($form-select-indicator-dark)};
--#{variables.$prefix}form-select-bg-img: #{functions.escape-svg($form-select-indicator-dark)};
}
}
}

13
scss/forms/_form-text.scss
View File

@ -1,11 +1,14 @@
@use "../variables";
@use "../vendor/rfs";
//
// 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;
margin-top: variables.$form-text-margin-top;
@include rfs.font-size(variables.$form-text-font-size);
font-style: variables.$form-text-font-style;
font-weight: variables.$form-text-font-weight;
color: variables.$form-text-color;
}

50
scss/forms/_input-group.scss
View File

@ -1,3 +1,9 @@
@use "sass:map";
@use "sass:string";
@use "../mixins/border-radius";
@use "../variables";
@use "../vendor/rfs";
//
// Base styles
//
@ -47,16 +53,16 @@
.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;
padding: variables.$input-group-addon-padding-y variables.$input-group-addon-padding-x;
@include rfs.font-size(variables.$input-font-size); // Match inputs
font-weight: variables.$input-group-addon-font-weight;
line-height: variables.$input-line-height;
color: variables.$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);
background-color: variables.$input-group-addon-bg;
border: variables.$input-border-width solid variables.$input-group-addon-border-color;
@include border-radius.border-radius(variables.$input-border-radius);
}
@ -69,23 +75,23 @@
.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);
padding: variables.$input-padding-y-lg variables.$input-padding-x-lg;
@include rfs.font-size(variables.$input-font-size-lg);
@include border-radius.border-radius(variables.$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);
padding: variables.$input-padding-y-sm variables.$input-padding-x-sm;
@include rfs.font-size(variables.$input-font-size-sm);
@include border-radius.border-radius(variables.$input-border-radius-sm);
}
.input-group-lg > .form-select,
.input-group-sm > .form-select {
padding-right: $form-select-padding-x + $form-select-indicator-padding;
padding-right: variables.$form-select-padding-x + variables.$form-select-indicator-padding;
}
@ -102,7 +108,7 @@
> .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);
@include border-radius.border-end-radius(0);
}
}
@ -111,22 +117,22 @@
> .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);
@include border-radius.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)";
@each $state in map.keys(variables.$form-validation-states) {
$validation-messages: $validation-messages + ":not(." + string.unquote($state) + "-tooltip)" + ":not(." + string.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);
margin-left: calc(#{variables.$input-border-width} * -1); // stylelint-disable-line function-disallowed-list
@include border-radius.border-start-radius(0);
}
> .form-floating:not(:first-child) > .form-control,
> .form-floating:not(:first-child) > .form-select {
@include border-start-radius(0);
@include border-radius.border-start-radius(0);
}
}

39
scss/forms/_labels.scss
View File

@ -1,36 +1,39 @@
@use "../variables";
@use "../vendor/rfs";
//
// 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;
margin-bottom: variables.$form-label-margin-bottom;
@include rfs.font-size(variables.$form-label-font-size);
font-style: variables.$form-label-font-style;
font-weight: variables.$form-label-font-weight;
color: variables.$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: calc(#{$input-padding-y} + #{$input-border-width});
padding-bottom: calc(#{$input-padding-y} + #{$input-border-width});
padding-top: calc(#{variables.$input-padding-y} + #{variables.$input-border-width});
padding-bottom: calc(#{variables.$input-padding-y} + #{variables.$input-border-width});
margin-bottom: 0; // Override the `<legend>` default
@include font-size(inherit); // Override the `<legend>` default
font-style: $form-label-font-style;
font-weight: $form-label-font-weight;
line-height: $input-line-height;
color: $form-label-color;
@include rfs.font-size(inherit); // Override the `<legend>` default
font-style: variables.$form-label-font-style;
font-weight: variables.$form-label-font-weight;
line-height: variables.$input-line-height;
color: variables.$form-label-color;
}
.col-form-label-lg {
padding-top: calc(#{$input-padding-y-lg} + #{$input-border-width});
padding-bottom: calc(#{$input-padding-y-lg} + #{$input-border-width});
@include font-size($input-font-size-lg);
padding-top: calc(#{variables.$input-padding-y-lg} + #{variables.$input-border-width});
padding-bottom: calc(#{variables.$input-padding-y-lg} + #{variables.$input-border-width});
@include rfs.font-size(variables.$input-font-size-lg);
}
.col-form-label-sm {
padding-top: calc(#{$input-padding-y-sm} + #{$input-border-width});
padding-bottom: calc(#{$input-padding-y-sm} + #{$input-border-width});
@include font-size($input-font-size-sm);
padding-top: calc(#{variables.$input-padding-y-sm} + #{variables.$input-border-width});
padding-bottom: calc(#{variables.$input-padding-y-sm} + #{variables.$input-border-width});
@include rfs.font-size(variables.$input-font-size-sm);
}

7
scss/forms/_validation.scss
View File

@ -1,3 +1,6 @@
@use "../mixins/forms";
@use "../variables";
// Form validation
//
// Provide feedback to users when form field values are valid or invalid. Works
@ -6,7 +9,7 @@
// server-side validation.
// scss-docs-start form-validation-states-loop
@each $state, $data in $form-validation-states {
@include form-validation-state($state, $data...);
@each $state, $data in variables.$form-validation-states {
@include forms.form-validation-state($state, $data...);
}
// scss-docs-end form-validation-states-loop

4
scss/helpers/_clearfix.scss
View File

@ -1,3 +1,5 @@
@use "../mixins/clearfix";
.clearfix {
@include clearfix();
@include clearfix.clearfix();
}

9
scss/helpers/_color-bg.scss
View File

@ -1,7 +1,10 @@
@use "../functions";
@use "../variables";
// All-caps `RGBA()` function used because of this Sass bug: https://github.com/sass/node-sass/issues/2251
@each $color, $value in $theme-colors {
@each $color, $value in variables.$theme-colors {
.text-bg-#{$color} {
color: color-contrast($value) if($enable-important-utilities, !important, null);
background-color: RGBA(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}bg-opacity, 1)) if($enable-important-utilities, !important, null);
color: functions.color-contrast($value) if(variables.$enable-important-utilities, !important, null);
background-color: RGBA(var(--#{variables.$prefix}#{$color}-rgb), var(--#{variables.$prefix}bg-opacity, 1)) if(variables.$enable-important-utilities, !important, null);
}
}

31
scss/helpers/_colored-links.scss
View File

@ -1,15 +1,18 @@
// 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);
@use "../functions";
@use "../variables";
@if $link-shade-percentage != 0 {
// All-caps `RGBA()` function used because of this Sass bug: https://github.com/sass/node-sass/issues/2251
@each $color, $value in variables.$theme-colors {
.link-#{$color} {
color: RGBA(var(--#{variables.$prefix}#{$color}-rgb), var(--#{variables.$prefix}link-opacity, 1)) if(variables.$enable-important-utilities, !important, null);
text-decoration-color: RGBA(var(--#{variables.$prefix}#{$color}-rgb), var(--#{variables.$prefix}link-underline-opacity, 1)) if(variables.$enable-important-utilities, !important, null);
@if variables.$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);
$hover-color: if(functions.color-contrast($value) == variables.$color-contrast-light, functions.shade-color($value, variables.$link-shade-percentage), functions.tint-color($value, variables.$link-shade-percentage));
color: RGBA(#{functions.to-rgb($hover-color)}, var(--#{variables.$prefix}link-opacity, 1)) if(variables.$enable-important-utilities, !important, null);
text-decoration-color: RGBA(functions.to-rgb($hover-color), var(--#{variables.$prefix}link-underline-opacity, 1)) if(variables.$enable-important-utilities, !important, null);
}
}
}
@ -17,14 +20,14 @@
// 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);
color: RGBA(var(--#{variables.$prefix}emphasis-color-rgb), var(--#{variables.$prefix}link-opacity, 1)) if(variables.$enable-important-utilities, !important, null);
text-decoration-color: RGBA(var(--#{variables.$prefix}emphasis-color-rgb), var(--#{variables.$prefix}link-underline-opacity, 1)) if(variables.$enable-important-utilities, !important, null);
@if $link-shade-percentage != 0 {
@if variables.$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);
color: RGBA(var(--#{variables.$prefix}emphasis-color-rgb), var(--#{variables.$prefix}link-opacity, .75)) if(variables.$enable-important-utilities, !important, null);
text-decoration-color: RGBA(var(--#{variables.$prefix}emphasis-color-rgb), var(--#{variables.$prefix}link-underline-opacity, .75)) if(variables.$enable-important-utilities, !important, null);
}
}
}

4
scss/helpers/_focus-ring.scss
View File

@ -1,5 +1,7 @@
@use "../variables";
.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);
box-shadow: var(--#{variables.$prefix}focus-ring-x, 0) var(--#{variables.$prefix}focus-ring-y, 0) var(--#{variables.$prefix}focus-ring-blur, 0) var(--#{variables.$prefix}focus-ring-width) var(--#{variables.$prefix}focus-ring-color);
}

17
scss/helpers/_icon-link.scss
View File

@ -1,17 +1,20 @@
@use "../mixins/transition";
@use "../variables";
.icon-link {
display: inline-flex;
gap: $icon-link-gap;
gap: variables.$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;
text-decoration-color: rgba(var(--#{variables.$prefix}link-color-rgb), var(--#{variables.$prefix}link-opacity, .5));
text-underline-offset: variables.$icon-link-underline-offset;
backface-visibility: hidden;
> .bi {
flex-shrink: 0;
width: $icon-link-icon-size;
height: $icon-link-icon-size;
width: variables.$icon-link-icon-size;
height: variables.$icon-link-icon-size;
fill: currentcolor;
@include transition($icon-link-icon-transition);
@include transition.transition(variables.$icon-link-icon-transition);
}
}
@ -19,7 +22,7 @@
&:hover,
&:focus-visible {
> .bi {
transform: var(--#{$prefix}icon-link-transform, $icon-link-icon-transform);
transform: var(--#{variables.$prefix}icon-link-transform, variables.$icon-link-icon-transform);
}
}
}

18
scss/helpers/_position.scss
View File

@ -1,3 +1,7 @@
@use "sass:map";
@use "../mixins/breakpoints";
@use "../variables";
// Shorthand
.fixed-top {
@ -5,7 +9,7 @@
top: 0;
right: 0;
left: 0;
z-index: $zindex-fixed;
z-index: variables.$zindex-fixed;
}
.fixed-bottom {
@ -13,24 +17,24 @@
right: 0;
bottom: 0;
left: 0;
z-index: $zindex-fixed;
z-index: variables.$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);
@each $breakpoint in map.keys(variables.$grid-breakpoints) {
@include breakpoints.media-breakpoint-up($breakpoint) {
$infix: breakpoints.breakpoint-infix($breakpoint, variables.$grid-breakpoints);
.sticky#{$infix}-top {
position: sticky;
top: 0;
z-index: $zindex-sticky;
z-index: variables.$zindex-sticky;
}
.sticky#{$infix}-bottom {
position: sticky;
bottom: 0;
z-index: $zindex-sticky;
z-index: variables.$zindex-sticky;
}
}
}

8
scss/helpers/_ratio.scss
View File

@ -1,3 +1,5 @@
@use "../variables";
// Credit: Nicolas Gallagher and SUIT CSS.
.ratio {
@ -6,7 +8,7 @@
&::before {
display: block;
padding-top: var(--#{$prefix}aspect-ratio);
padding-top: var(--#{variables.$prefix}aspect-ratio);
content: "";
}
@ -19,8 +21,8 @@
}
}
@each $key, $ratio in $aspect-ratios {
@each $key, $ratio in variables.$aspect-ratios {
.ratio-#{$key} {
--#{$prefix}aspect-ratio: #{$ratio};
--#{variables.$prefix}aspect-ratio: #{$ratio};
}
}

6
scss/helpers/_stretched-link.scss
View File

@ -1,15 +1,17 @@
@use "../variables";
//
// Stretched link
//
.stretched-link {
&::#{$stretched-link-pseudo-element} {
&::#{variables.$stretched-link-pseudo-element} {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: $stretched-link-z-index;
z-index: variables.$stretched-link-z-index;
content: "";
}
}

4
scss/helpers/_text-truncation.scss
View File

@ -1,7 +1,9 @@
@use "../mixins/text-truncate";
//
// Text truncation
//
.text-truncate {
@include text-truncate();
@include text-truncate.text-truncate();
}

4
scss/helpers/_visually-hidden.scss
View File

@ -1,8 +1,10 @@
@use "../mixins/visually-hidden";
//
// Visually hidden
//
.visually-hidden,
.visually-hidden-focusable:not(:focus):not(:focus-within) {
@include visually-hidden();
@include visually-hidden.visually-hidden();
}

6
scss/helpers/_vr.scss
View File

@ -1,8 +1,10 @@
@use "../variables";
.vr {
display: inline-block;
align-self: stretch;
width: $vr-border-width;
width: variables.$vr-border-width;
min-height: 1em;
background-color: currentcolor;
opacity: $hr-opacity;
opacity: variables.$hr-opacity;
}

46
scss/mixins/_border-radius.scss
View File

@ -1,3 +1,7 @@
@use "sass:list";
@use "sass:meta";
@use "../variables";
// stylelint-disable property-disallowed-list
// Single side border-radius
@ -5,18 +9,18 @@
@function valid-radius($radius) {
$return: ();
@each $value in $radius {
@if type-of($value) == number {
$return: append($return, max($value, 0));
@if meta.type-of($value) == number {
$return: list.append($return, max($value, 0));
} @else {
$return: append($return, $value);
$return: list.append($return, $value);
}
}
@return $return;
}
// scss-docs-start border-radius-mixins
@mixin border-radius($radius: $border-radius, $fallback-border-radius: false) {
@if $enable-rounded {
@mixin border-radius($radius: variables.$border-radius, $fallback-border-radius: false) {
@if variables.$enable-rounded {
border-radius: valid-radius($radius);
}
@else if $fallback-border-radius != false {
@ -24,54 +28,54 @@
}
}
@mixin border-top-radius($radius: $border-radius) {
@if $enable-rounded {
@mixin border-top-radius($radius: variables.$border-radius) {
@if variables.$enable-rounded {
border-top-left-radius: valid-radius($radius);
border-top-right-radius: valid-radius($radius);
}
}
@mixin border-end-radius($radius: $border-radius) {
@if $enable-rounded {
@mixin border-end-radius($radius: variables.$border-radius) {
@if variables.$enable-rounded {
border-top-right-radius: valid-radius($radius);
border-bottom-right-radius: valid-radius($radius);
}
}
@mixin border-bottom-radius($radius: $border-radius) {
@if $enable-rounded {
@mixin border-bottom-radius($radius: variables.$border-radius) {
@if variables.$enable-rounded {
border-bottom-right-radius: valid-radius($radius);
border-bottom-left-radius: valid-radius($radius);
}
}
@mixin border-start-radius($radius: $border-radius) {
@if $enable-rounded {
@mixin border-start-radius($radius: variables.$border-radius) {
@if variables.$enable-rounded {
border-top-left-radius: valid-radius($radius);
border-bottom-left-radius: valid-radius($radius);
}
}
@mixin border-top-start-radius($radius: $border-radius) {
@if $enable-rounded {
@mixin border-top-start-radius($radius: variables.$border-radius) {
@if variables.$enable-rounded {
border-top-left-radius: valid-radius($radius);
}
}
@mixin border-top-end-radius($radius: $border-radius) {
@if $enable-rounded {
@mixin border-top-end-radius($radius: variables.$border-radius) {
@if variables.$enable-rounded {
border-top-right-radius: valid-radius($radius);
}
}
@mixin border-bottom-end-radius($radius: $border-radius) {
@if $enable-rounded {
@mixin border-bottom-end-radius($radius: variables.$border-radius) {
@if variables.$enable-rounded {
border-bottom-right-radius: valid-radius($radius);
}
}
@mixin border-bottom-start-radius($radius: $border-radius) {
@if $enable-rounded {
@mixin border-bottom-start-radius($radius: variables.$border-radius) {
@if variables.$enable-rounded {
border-bottom-left-radius: valid-radius($radius);
}
}

11
scss/mixins/_box-shadow.scss
View File

@ -1,17 +1,20 @@
@use "sass:list";
@use "../variables";
@mixin box-shadow($shadow...) {
@if $enable-shadows {
@if variables.$enable-shadows {
$result: ();
@each $value in $shadow {
@if $value != null {
$result: append($result, $value, "comma");
$result: list.append($result, $value, "comma");
}
@if $value == none and length($shadow) > 1 {
@if $value == none and list.length($shadow) > 1 {
@warn "The keyword 'none' must be used as a single argument.";
}
}
@if (length($result) > 0) {
@if (list.length($result) > 0) {
box-shadow: $result;
}
}

28
scss/mixins/_breakpoints.scss
View File

@ -1,3 +1,7 @@
@use "sass:list";
@use "sass:map";
@use "../variables";
// Breakpoint viewport sizes and media queries.
//
// Breakpoints are defined as a map of (name: minimum width), order from small to large:
@ -14,20 +18,20 @@
// md
// >> 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);
@function breakpoint-next($name, $breakpoints: variables.$grid-breakpoints, $breakpoint-names: map.keys($breakpoints)) {
$n: list.index($breakpoint-names, $name);
@if not $n {
@error "breakpoint `#{$name}` not found in `#{$breakpoints}`";
}
@return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);
@return if($n < list.length($breakpoint-names), list.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, xxl: 1400px))
// 576px
@function breakpoint-min($name, $breakpoints: $grid-breakpoints) {
$min: map-get($breakpoints, $name);
@function breakpoint-min($name, $breakpoints: variables.$grid-breakpoints) {
$min: map.get($breakpoints, $name);
@return if($min != 0, $min, null);
}
@ -40,8 +44,8 @@
//
// >> breakpoint-max(md, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))
// 767.98px
@function breakpoint-max($name, $breakpoints: $grid-breakpoints) {
$max: map-get($breakpoints, $name);
@function breakpoint-max($name, $breakpoints: variables.$grid-breakpoints) {
$max: map.get($breakpoints, $name);
@return if($max and $max > 0, $max - .02, null);
}
@ -52,13 +56,13 @@
// "" (Returns a blank string)
// >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))
// "-sm"
@function breakpoint-infix($name, $breakpoints: $grid-breakpoints) {
@function breakpoint-infix($name, $breakpoints: variables.$grid-breakpoints) {
@return if(breakpoint-min($name, $breakpoints) == null, "", "-#{$name}");
}
// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.
// Makes the @content apply to the given breakpoint and wider.
@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {
@mixin media-breakpoint-up($name, $breakpoints: variables.$grid-breakpoints) {
$min: breakpoint-min($name, $breakpoints);
@if $min {
@media (min-width: $min) {
@ -71,7 +75,7 @@
// Media of at most the maximum breakpoint width. No query for the largest breakpoint.
// Makes the @content apply to the given breakpoint and narrower.
@mixin media-breakpoint-down($name, $breakpoints: $grid-breakpoints) {
@mixin media-breakpoint-down($name, $breakpoints: variables.$grid-breakpoints) {
$max: breakpoint-max($name, $breakpoints);
@if $max {
@media (max-width: $max) {
@ -84,7 +88,7 @@
// Media that spans multiple breakpoint widths.
// Makes the @content apply between the min and max breakpoints
@mixin media-breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints) {
@mixin media-breakpoint-between($lower, $upper, $breakpoints: variables.$grid-breakpoints) {
$min: breakpoint-min($lower, $breakpoints);
$max: breakpoint-max($upper, $breakpoints);
@ -106,7 +110,7 @@
// Media between the breakpoint's minimum and maximum widths.
// 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) {
@mixin media-breakpoint-only($name, $breakpoints: variables.$grid-breakpoints) {
$min: breakpoint-min($name, $breakpoints);
$next: breakpoint-next($name, $breakpoints);
$max: breakpoint-max($next, $breakpoints);

89
scss/mixins/_buttons.scss
View File

@ -1,3 +1,8 @@
@use "sass:color";
@use "../functions";
@use "../variables";
@use "../vendor/rfs";
// Button variants
//
// Easily pump out default styles, as well as :hover, :focus, :active,
@ -7,64 +12,64 @@
@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),
$color: functions.color-contrast($background),
$hover-background: if($color == variables.$color-contrast-light, functions.shade-color($background, variables.$btn-hover-bg-shade-amount), functions.tint-color($background, variables.$btn-hover-bg-tint-amount)),
$hover-border: if($color == variables.$color-contrast-light, functions.shade-color($border, variables.$btn-hover-border-shade-amount), functions.tint-color($border, variables.$btn-hover-border-tint-amount)),
$hover-color: functions.color-contrast($hover-background),
$active-background: if($color == variables.$color-contrast-light, functions.shade-color($background, variables.$btn-active-bg-shade-amount), functions.tint-color($background, variables.$btn-active-bg-tint-amount)),
$active-border: if($color == variables.$color-contrast-light, functions.shade-color($border, variables.$btn-active-border-shade-amount), functions.tint-color($border, variables.$btn-active-border-tint-amount)),
$active-color: functions.color-contrast($active-background),
$disabled-background: $background,
$disabled-border: $border,
$disabled-color: color-contrast($disabled-background)
$disabled-color: functions.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};
--#{variables.$prefix}btn-color: #{$color};
--#{variables.$prefix}btn-bg: #{$background};
--#{variables.$prefix}btn-border-color: #{$border};
--#{variables.$prefix}btn-hover-color: #{$hover-color};
--#{variables.$prefix}btn-hover-bg: #{$hover-background};
--#{variables.$prefix}btn-hover-border-color: #{$hover-border};
--#{variables.$prefix}btn-focus-shadow-rgb: #{functions.to-rgb(color.mix($color, $border, 15%))};
--#{variables.$prefix}btn-active-color: #{$active-color};
--#{variables.$prefix}btn-active-bg: #{$active-background};
--#{variables.$prefix}btn-active-border-color: #{$active-border};
--#{variables.$prefix}btn-active-shadow: #{variables.$btn-active-box-shadow};
--#{variables.$prefix}btn-disabled-color: #{$disabled-color};
--#{variables.$prefix}btn-disabled-bg: #{$disabled-background};
--#{variables.$prefix}btn-disabled-border-color: #{$disabled-border};
}
// scss-docs-end btn-variant-mixin
// scss-docs-start btn-outline-variant-mixin
@mixin button-outline-variant(
$color,
$color-hover: color-contrast($color),
$color-hover: functions.color-contrast($color),
$active-background: $color,
$active-border: $color,
$active-color: color-contrast($active-background)
$active-color: functions.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;
--#{variables.$prefix}btn-color: #{$color};
--#{variables.$prefix}btn-border-color: #{$color};
--#{variables.$prefix}btn-hover-color: #{$color-hover};
--#{variables.$prefix}btn-hover-bg: #{$active-background};
--#{variables.$prefix}btn-hover-border-color: #{$active-border};
--#{variables.$prefix}btn-focus-shadow-rgb: #{functions.to-rgb($color)};
--#{variables.$prefix}btn-active-color: #{$active-color};
--#{variables.$prefix}btn-active-bg: #{$active-background};
--#{variables.$prefix}btn-active-border-color: #{$active-border};
--#{variables.$prefix}btn-active-shadow: #{variables.$btn-active-box-shadow};
--#{variables.$prefix}btn-disabled-color: #{$color};
--#{variables.$prefix}btn-disabled-bg: transparent;
--#{variables.$prefix}btn-disabled-border-color: #{$color};
--#{variables.$prefix}gradient: none;
}
// scss-docs-end btn-outline-variant-mixin
// 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};
--#{variables.$prefix}btn-padding-y: #{$padding-y};
--#{variables.$prefix}btn-padding-x: #{$padding-x};
@include rfs.rfs($font-size, --#{variables.$prefix}btn-font-size);
--#{variables.$prefix}btn-border-radius: #{$border-radius};
}
// scss-docs-end btn-size-mixin

18
scss/mixins/_caret.scss
View File

@ -1,26 +1,28 @@
@use "../variables";
// scss-docs-start caret-mixins
@mixin caret-down($width: $caret-width) {
@mixin caret-down($width: variables.$caret-width) {
border-top: $width solid;
border-right: $width solid transparent;
border-bottom: 0;
border-left: $width solid transparent;
}
@mixin caret-up($width: $caret-width) {
@mixin caret-up($width: variables.$caret-width) {
border-top: 0;
border-right: $width solid transparent;
border-bottom: $width solid;
border-left: $width solid transparent;
}
@mixin caret-end($width: $caret-width) {
@mixin caret-end($width: variables.$caret-width) {
border-top: $width solid transparent;
border-right: 0;
border-bottom: $width solid transparent;
border-left: $width solid;
}
@mixin caret-start($width: $caret-width) {
@mixin caret-start($width: variables.$caret-width) {
border-top: $width solid transparent;
border-right: $width solid;
border-bottom: $width solid transparent;
@ -28,11 +30,11 @@
@mixin caret(
$direction: down,
$width: $caret-width,
$spacing: $caret-spacing,
$vertical-align: $caret-vertical-align
$width: variables.$caret-width,
$spacing: variables.$caret-spacing,
$vertical-align: variables.$caret-vertical-align
) {
@if $enable-caret {
@if variables.$enable-caret {
&::after {
display: inline-block;
margin-left: $spacing;

4
scss/mixins/_color-mode.scss
View File

@ -1,5 +1,7 @@
// @use "setup" as *;
// scss-docs-start color-mode-mixin
@mixin color-mode($mode: light, $root: false) {
@mixin color-mode($mode: light, $root: false, $color-mode-type: "media-query") {
@if $color-mode-type == "media-query" {
@if $root == true {
@media (prefers-color-scheme: $mode) {

12
scss/mixins/_container.scss
View File

@ -1,11 +1,13 @@
@use "../variables";
// Container mixins
@mixin make-container($gutter: $container-padding-x) {
--#{$prefix}gutter-x: #{$gutter};
--#{$prefix}gutter-y: 0;
@mixin make-container($gutter: variables.$container-padding-x) {
--#{variables.$prefix}gutter-x: #{$gutter};
--#{variables.$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
padding-right: calc(var(--#{variables.$prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list
padding-left: calc(var(--#{variables.$prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list
margin-right: auto;
margin-left: auto;
}

4
scss/mixins/_deprecate.scss
View File

@ -1,10 +1,12 @@
@use "../setup/variables";
// Deprecate mixin
//
// This mixin can be used to deprecate mixins or functions.
// `$enable-deprecation-messages` is a global variable, `$ignore-warning` is a variable that can be passed to
// some deprecated mixins to suppress the warning (for example if the mixin is still be used in the current version of Bootstrap)
@mixin deprecate($name, $deprecate-version, $remove-version, $ignore-warning: false) {
@if ($enable-deprecation-messages != false and $ignore-warning != true) {
@if (variables.$enable-deprecation-messages != false and $ignore-warning != true) {
@warn "#{$name} has been deprecated as of #{$deprecate-version}. It will be removed entirely in #{$remove-version}.";
}
}

64
scss/mixins/_forms.scss
View File

@ -1,3 +1,9 @@
@use "../functions";
@use "../variables";
@use "../vendor/rfs";
@use "border-radius";
@use "box-shadow";
// 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
@ -19,17 +25,17 @@
$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),
$tooltip-color: functions.color-contrast($color),
$tooltip-bg-color: rgba($color, variables.$form-feedback-tooltip-opacity),
$focus-box-shadow: 0 0 variables.$input-btn-focus-blur variables.$input-focus-width rgba($color, variables.$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;
margin-top: variables.$form-feedback-margin-top;
@include rfs.font-size(variables.$form-feedback-font-size);
font-style: variables.$form-feedback-font-style;
color: $color;
}
@ -39,13 +45,13 @@
z-index: 5;
display: none;
max-width: 100%; // Contain to parent when possible
padding: $form-feedback-tooltip-padding-y $form-feedback-tooltip-padding-x;
padding: variables.$form-feedback-tooltip-padding-y variables.$form-feedback-tooltip-padding-x;
margin-top: .1rem;
@include font-size($form-feedback-tooltip-font-size);
line-height: $form-feedback-tooltip-line-height;
@include rfs.font-size(variables.$form-feedback-tooltip-font-size);
line-height: variables.$form-feedback-tooltip-line-height;
color: $tooltip-color;
background-color: $tooltip-bg-color;
@include border-radius($form-feedback-tooltip-border-radius);
@include border-radius.border-radius(variables.$form-feedback-tooltip-border-radius);
}
@include form-validation-state-selector($state) {
@ -59,18 +65,18 @@
@include form-validation-state-selector($state) {
border-color: $border-color;
@if $enable-validation-icons {
padding-right: $input-height-inner;
background-image: escape-svg($icon);
@if variables.$enable-validation-icons {
padding-right: variables.$input-height-inner;
background-image: functions.escape-svg($icon);
background-repeat: no-repeat;
background-position: right $input-height-inner-quarter center;
background-size: $input-height-inner-half $input-height-inner-half;
background-position: right variables.$input-height-inner-quarter center;
background-size: variables.$input-height-inner-half variables.$input-height-inner-half;
}
&:focus {
border-color: $border-color;
@if $enable-shadows {
@include box-shadow($input-box-shadow, $focus-box-shadow);
@if variables.$enable-shadows {
@include box-shadow.box-shadow(variables.$input-box-shadow, $focus-box-shadow);
} @else {
// Avoid using mixin so we can pass custom focus shadow properly
box-shadow: $focus-box-shadow;
@ -82,9 +88,9 @@
// stylelint-disable-next-line selector-no-qualifying-type
textarea.form-control {
@include form-validation-state-selector($state) {
@if $enable-validation-icons {
padding-right: $input-height-inner;
background-position: top $input-height-inner-quarter right $input-height-inner-quarter;
@if variables.$enable-validation-icons {
padding-right: variables.$input-height-inner;
background-position: top variables.$input-height-inner-quarter right variables.$input-height-inner-quarter;
}
}
}
@ -93,20 +99,20 @@
@include form-validation-state-selector($state) {
border-color: $border-color;
@if $enable-validation-icons {
@if variables.$enable-validation-icons {
&: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;
--#{variables.$prefix}form-select-bg-icon: #{functions.escape-svg($icon)};
padding-right: variables.$form-select-feedback-icon-padding-end;
background-position: variables.$form-select-bg-position, variables.$form-select-feedback-icon-position;
background-size: variables.$form-select-bg-size, variables.$form-select-feedback-icon-size;
}
}
&:focus {
border-color: $border-color;
@if $enable-shadows {
@include box-shadow($form-select-box-shadow, $focus-box-shadow);
@if variables.$enable-shadows {
@include box-shadow.box-shadow(variables.$form-select-box-shadow, $focus-box-shadow);
} @else {
// Avoid using mixin so we can pass custom focus shadow properly
box-shadow: $focus-box-shadow;
@ -117,8 +123,8 @@
.form-control-color {
@include form-validation-state-selector($state) {
@if $enable-validation-icons {
width: calc(#{$form-color-width} + #{$input-height-inner});
@if variables.$enable-validation-icons {
width: calc(#{variables.$form-color-width} + #{variables.$input-height-inner});
}
}
}

20
scss/mixins/_gradients.scss
View File

@ -1,11 +1,13 @@
@use "../variables";
// Gradients
// scss-docs-start gradient-bg-mixin
@mixin gradient-bg($color: null) {
background-color: $color;
@if $enable-gradients {
background-image: var(--#{$prefix}gradient);
@if variables.$enable-gradients {
background-image: var(--#{variables.$prefix}gradient);
}
}
// scss-docs-end gradient-bg-mixin
@ -14,34 +16,34 @@
// 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%) {
@mixin gradient-x($start-color: variables.$gray-700, $end-color: variables.$gray-800, $start-percent: 0%, $end-percent: 100%) {
background-image: linear-gradient(to right, $start-color $start-percent, $end-color $end-percent);
}
// 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: null, $end-percent: null) {
@mixin gradient-y($start-color: variables.$gray-700, $end-color: variables.$gray-800, $start-percent: null, $end-percent: null) {
background-image: linear-gradient(to bottom, $start-color $start-percent, $end-color $end-percent);
}
@mixin gradient-directional($start-color: $gray-700, $end-color: $gray-800, $deg: 45deg) {
@mixin gradient-directional($start-color: variables.$gray-700, $end-color: variables.$gray-800, $deg: 45deg) {
background-image: linear-gradient($deg, $start-color, $end-color);
}
@mixin gradient-x-three-colors($start-color: $blue, $mid-color: $purple, $color-stop: 50%, $end-color: $red) {
@mixin gradient-x-three-colors($start-color: variables.$blue, $mid-color: variables.$purple, $color-stop: 50%, $end-color: variables.$red) {
background-image: linear-gradient(to right, $start-color, $mid-color $color-stop, $end-color);
}
@mixin gradient-y-three-colors($start-color: $blue, $mid-color: $purple, $color-stop: 50%, $end-color: $red) {
@mixin gradient-y-three-colors($start-color: variables.$blue, $mid-color: variables.$purple, $color-stop: 50%, $end-color: variables.$red) {
background-image: linear-gradient($start-color, $mid-color $color-stop, $end-color);
}
@mixin gradient-radial($inner-color: $gray-700, $outer-color: $gray-800) {
@mixin gradient-radial($inner-color: variables.$gray-700, $outer-color: variables.$gray-800) {
background-image: radial-gradient(circle, $inner-color, $outer-color);
}
@mixin gradient-striped($color: rgba($white, .15), $angle: 45deg) {
@mixin gradient-striped($color: rgba(variables.$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

30
scss/mixins/_grid.scss
View File

@ -1,3 +1,11 @@
@use "sass:map";
@use "sass:math";
@use "sass:meta";
// @use "../setup" as *;
// @use "../maps";
// @use "../setup/variables";
// @use "breakpoints";
// Grid system
//
// Generate semantic grid columns with these mixins.
@ -15,7 +23,7 @@
@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);
box-sizing: if(meta.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 set the width
// later on to override this initial width.
@ -30,7 +38,7 @@
@mixin make-col($size: false, $columns: $grid-columns) {
@if $size {
flex: 0 0 auto;
width: percentage(divide($size, $columns));
width: math.percentage(divide($size, $columns));
} @else {
flex: 1 1 0;
@ -45,7 +53,7 @@
@mixin make-col-offset($size, $columns: $grid-columns) {
$num: divide($size, $columns);
margin-left: if($num == 0, 0, percentage($num));
margin-left: if($num == 0, 0, math.percentage($num));
}
// Row columns
@ -56,7 +64,7 @@
@mixin row-cols($count) {
> * {
flex: 0 0 auto;
width: percentage(divide(1, $count));
width: math.percentage(divide(1, $count));
}
}
@ -66,10 +74,10 @@
// 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);
@each $breakpoint in map.keys($breakpoints) {
$infix: breakpoints.breakpoint-infix($breakpoint, $breakpoints);
@include media-breakpoint-up($breakpoint, $breakpoints) {
@include breakpoints.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
@ -111,7 +119,7 @@
// Gutters
//
// Make use of `.g-*`, `.gx-*` or `.gy-*` utilities to change spacing between the columns.
@each $key, $value in $gutters {
@each $key, $value in maps.$gutters {
.g#{$infix}-#{$key},
.gx#{$infix}-#{$key} {
--#{$prefix}gutter-x: #{$value};
@ -127,10 +135,10 @@
}
@mixin make-cssgrid($columns: $grid-columns, $breakpoints: $grid-breakpoints) {
@each $breakpoint in map-keys($breakpoints) {
$infix: breakpoint-infix($breakpoint, $breakpoints);
@each $breakpoint in map.keys($breakpoints) {
$infix: breakpoints.breakpoint-infix($breakpoint, $breakpoints);
@include media-breakpoint-up($breakpoint, $breakpoints) {
@include breakpoints.media-breakpoint-up($breakpoint, $breakpoints) {
@if $columns > 0 {
@for $i from 1 through $columns {
.g-col#{$infix}-#{$i} {

11
scss/mixins/_pagination.scss
View File

@ -1,10 +1,13 @@
@use "../variables";
@use "../vendor/rfs";
// Pagination
// 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};
--#{variables.$prefix}pagination-padding-x: #{$padding-x};
--#{variables.$prefix}pagination-padding-y: #{$padding-y};
@include rfs.rfs($font-size, --#{variables.$prefix}pagination-font-size);
--#{variables.$prefix}pagination-border-radius: #{$border-radius};
}
// scss-docs-end pagination-mixin

8
scss/mixins/_reset-text.scss
View File

@ -1,9 +1,11 @@
@use "../variables";
@mixin reset-text {
font-family: $font-family-base;
font-family: variables.$font-family-base;
// 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;
font-weight: variables.$font-weight-normal;
line-height: variables.$line-height-base;
text-align: left; // Fallback for where `start` is not supported
text-align: start;
text-decoration: none;

37
scss/mixins/_table-variants.scss
View File

@ -1,24 +1,29 @@
@use "sass:color";
@use "sass:math";
@use "../functions";
@use "../variables";
// 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));
$color: functions.color-contrast(functions.opaque(variables.$body-bg, $background));
$hover-bg: color.mix($color, $background, math.percentage(variables.$table-hover-bg-factor));
$striped-bg: color.mix($color, $background, math.percentage(variables.$table-striped-bg-factor));
$active-bg: color.mix($color, $background, math.percentage(variables.$table-active-bg-factor));
$table-border-color: color.mix($color, $background, math.percentage(variables.$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)};
--#{variables.$prefix}table-color: #{$color};
--#{variables.$prefix}table-bg: #{$background};
--#{variables.$prefix}table-border-color: #{$table-border-color};
--#{variables.$prefix}table-striped-bg: #{$striped-bg};
--#{variables.$prefix}table-striped-color: #{functions.color-contrast($striped-bg)};
--#{variables.$prefix}table-active-bg: #{$active-bg};
--#{variables.$prefix}table-active-color: #{functions.color-contrast($active-bg)};
--#{variables.$prefix}table-hover-bg: #{$hover-bg};
--#{variables.$prefix}table-hover-color: #{functions.color-contrast($hover-bg)};
color: var(--#{$prefix}table-color);
border-color: var(--#{$prefix}table-border-color);
color: var(--#{variables.$prefix}table-color);
border-color: var(--#{variables.$prefix}table-border-color);
}
}
// scss-docs-end table-variant

15
scss/mixins/_transition.scss
View File

@ -1,10 +1,13 @@
@use "sass:list";
@use "../variables";
// stylelint-disable property-disallowed-list
@mixin transition($transition...) {
@if length($transition) == 0 {
$transition: $transition-base;
@if list.length($transition) == 0 {
$transition: variables.$transition-base;
}
@if length($transition) > 1 {
@if list.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.";
@ -12,12 +15,12 @@
}
}
@if $enable-transitions {
@if nth($transition, 1) != null {
@if variables.$enable-transitions {
@if list.nth($transition, 1) != null {
transition: $transition;
}
@if $enable-reduced-motion and nth($transition, 1) != null and nth($transition, 1) != none {
@if variables.$enable-reduced-motion and list.nth($transition, 1) != null and list.nth($transition, 1) != none {
@media (prefers-reduced-motion: reduce) {
transition: none;
}

53
scss/mixins/_utilities.scss
View File

@ -1,52 +1,59 @@
@use "sass:list";
@use "sass:map";
@use "sass:meta";
@use "sass:string";
@use "../variables";
@use "../vendor/rfs";
// Utility generator
// Used to generate utilities & print utilities
@mixin generate-utility($utility, $infix: "", $is-rfs-media-query: false) {
$values: map-get($utility, values);
$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);
@if meta.type-of($values) == "string" or meta.type-of(list.nth($values, 1)) != "list" {
$values: list.zip($values, $values);
}
@each $key, $value in $values {
$properties: map-get($utility, property);
$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);
@if meta.type-of($properties) == "string" {
$properties: list.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(map.has-key($utility, class), map.get($utility, class), list.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));
$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), ());
$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);
$infix: if($property-class == "" and string.slice($infix, 1, 1) == "-", string.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) {
@if map.get($utility, rfs) {
// Inside the media query
@if $is-rfs-media-query {
$val: rfs-value($value);
$val: rfs.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);
$value: if($val == rfs.rfs-fluid-value($value), null, $val);
}
@else {
$value: rfs-fluid-value($value);
$value: rfs.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);
$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 {
@ -55,12 +62,12 @@
@if $is-css-var {
.#{$property-class + $infix + $property-class-modifier} {
--#{$prefix}#{$css-variable-name}: #{$value};
--#{variables.$prefix}#{$css-variable-name}: #{$value};
}
@each $pseudo in $state {
.#{$property-class + $infix + $property-class-modifier}-#{$pseudo}:#{$pseudo} {
--#{$prefix}#{$css-variable-name}: #{$value};
--#{variables.$prefix}#{$css-variable-name}: #{$value};
}
}
} @else {
@ -68,10 +75,10 @@
@each $property in $properties {
@if $is-local-vars {
@each $local-var, $variable in $is-local-vars {
--#{$prefix}#{$local-var}: #{$variable};
--#{variables.$prefix}#{$local-var}: #{$variable};
}
}
#{$property}: $value if($enable-important-utilities, !important, null);
#{$property}: $value if(variables.$enable-important-utilities, !important, null);
}
}
@ -80,10 +87,10 @@
@each $property in $properties {
@if $is-local-vars {
@each $local-var, $variable in $is-local-vars {
--#{$prefix}#{$local-var}: #{$variable};
--#{variables.$prefix}#{$local-var}: #{$variable};
}
}
#{$property}: $value if($enable-important-utilities, !important, null);
#{$property}: $value if(variables.$enable-important-utilities, !important, null);
}
}
}

42
scss/mixins/index.scss Normal file
View File

@ -0,0 +1,42 @@
// Toggles
//
// Used in conjunction with global variables to enable certain theme features.
// Vendor
@forward "../vendor/rfs";
// Deprecate
@forward "deprecate";
// Helpers
@forward "breakpoints";
@forward "color-mode";
@forward "color-scheme";
@forward "image";
@forward "resize";
@forward "visually-hidden";
@forward "reset-text";
@forward "text-truncate";
// Utilities
@forward "utilities";
// Components
@forward "backdrop";
@forward "buttons";
@forward "caret";
@forward "pagination";
@forward "lists";
@forward "forms";
@forward "table-variants";
// Skins
@forward "border-radius";
@forward "box-shadow";
@forward "gradients";
@forward "transition";
// Layout
@forward "clearfix";
@forward "container";
@forward "grid";

320
scss/setup/_functions.scss Normal file
View File

@ -0,0 +1,320 @@
@use "sass:color";
@use "sass:list";
@use "sass:map";
@use "sass:math";
@use "sass:meta";
@use "sass:string";
// @use "variables";
// Bootstrap functions
//
// Utility mixins and functions for evaluating source code across our variables, maps, and mixins.
// Ascending
// Used to evaluate Sass maps like our grid breakpoints.
@mixin assert-ascending($map, $map-name) {
$prev-key: null;
$prev-num: null;
@each $key, $num in $map {
@if $prev-num == null or math.unit($num) == "%" or math.unit($prev-num) == "%" {
// Do nothing
} @else if not math.compatible($prev-num, $num) {
@warn "Potentially invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} whose unit makes it incomparable to #{$prev-num}, the value of the previous key '#{$prev-key}' !";
} @else if $prev-num >= $num {
@warn "Invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} which isn't greater than #{$prev-num}, the value of the previous key '#{$prev-key}' !";
}
$prev-key: $key;
$prev-num: $num;
}
}
// Starts at zero
// Used to ensure the min-width of the lowest breakpoint starts at 0.
@mixin assert-starts-at-zero($map, $map-name: "$grid-breakpoints") {
@if list.length($map) > 0 {
$values: map.values($map);
$first-value: list.nth($values, 1);
@if $first-value != 0 {
@warn "First breakpoint in #{$map-name} must start at 0, but starts at #{$first-value}.";
}
}
}
// Colors
@function to-rgb($value) {
@return color.red($value), color.green($value), color.blue($value);
}
// stylelint-disable scss/dollar-variable-pattern
@function rgba-css-var($identifier, $target, $prefix) {
@if $identifier == "body" and $target == "bg" {
@return rgba(var(--#{$prefix}#{$identifier}-bg-rgb), var(--#{$prefix}#{$target}-opacity));
} @if $identifier == "body" and $target == "text" {
@return rgba(var(--#{$prefix}#{$identifier}-color-rgb), var(--#{$prefix}#{$target}-opacity));
} @else {
@return rgba(var(--#{$prefix}#{$identifier}-rgb), var(--#{$prefix}#{$target}-opacity));
}
}
@function map-loop($map, $func, $args...) {
$_map: ();
@each $key, $value in $map {
// allow to pass the $key and $value of the map as an function argument
$_args: ();
@each $arg in $args {
$_args: list.append($_args, if($arg == "$key", $key, if($arg == "$value", $value, $arg)));
}
$_map: map.merge($_map, ($key: meta.call(meta.get-function($func), $_args...)));
}
@return $_map;
}
// stylelint-enable scss/dollar-variable-pattern
@function varify($list, $prefix) {
$result: null;
@each $entry in $list {
$result: list.append($result, var(--#{$prefix}#{$entry}), space);
}
@return $result;
}
// Internal Bootstrap function to turn maps into its negative variant.
// It prefixes the keys with `n` and makes the value negative.
@function negativify-map($map) {
$result: ();
@each $key, $value in $map {
@if $key != 0 {
$result: map.merge($result, ("n" + $key: (-$value)));
}
}
@return $result;
}
// Get multiple keys from a sass map
@function map-get-multiple($map, $values) {
$result: ();
@each $key, $value in $map {
@if (list.index($values, $key) != null) {
$result: map.merge($result, ($key: $value));
}
}
@return $result;
}
// Merge multiple maps
@function map-merge-multiple($maps...) {
$merged-maps: ();
@each $map in $maps {
$merged-maps: map.merge($merged-maps, $map);
}
@return $merged-maps;
}
// Replace `$search` with `$replace` in `$string`
// Used on our SVG icon backgrounds for custom forms.
//
// @author Kitty Giraudel
// @param {String} $string - Initial string
// @param {String} $search - Substring to replace
// @param {String} $replace ('') - New value
// @return {String} - Updated string
@function str-replace($string, $search, $replace: "") {
$index: string.index($string, $search);
@if $index {
@return string.slice($string, 1, $index - 1) + $replace + str-replace(string.slice($string, $index + string.length($search)), $search, $replace);
}
@return $string;
}
// See https://codepen.io/kevinweber/pen/dXWoRw
//
// Requires the use of quotes around data URIs.
$escaped-characters: (
("<", "%3c"),
(">", "%3e"),
("#", "%23"),
("(", "%28"),
(")", "%29"),
) !default;
@function escape-svg($string) {
@if string.index($string, "data:image/svg+xml") {
@each $char, $encoded in $escaped-characters {
// Do not escape the url brackets
@if string.index($string, "url(") == 1 {
$string: url("#{str-replace(string.slice($string, 6, -3), $char, $encoded)}");
} @else {
$string: str-replace($string, $char, $encoded);
}
}
}
@return $string;
}
// Color contrast
// See https://github.com/twbs/bootstrap/pull/30168
// A list of pre-calculated numbers of pow(divide((divide($value, 255) + .055), 1.055), 2.4). (from 0 to 255)
// stylelint-disable-next-line scss/dollar-variable-default, scss/dollar-variable-pattern
$_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003 .0033 .0037 .004 .0044 .0048 .0052 .0056 .006 .0065 .007 .0075 .008 .0086 .0091 .0097 .0103 .011 .0116 .0123 .013 .0137 .0144 .0152 .016 .0168 .0176 .0185 .0194 .0203 .0212 .0222 .0232 .0242 .0252 .0262 .0273 .0284 .0296 .0307 .0319 .0331 .0343 .0356 .0369 .0382 .0395 .0409 .0423 .0437 .0452 .0467 .0482 .0497 .0513 .0529 .0545 .0561 .0578 .0595 .0612 .063 .0648 .0666 .0685 .0704 .0723 .0742 .0762 .0782 .0802 .0823 .0844 .0865 .0887 .0908 .0931 .0953 .0976 .0999 .1022 .1046 .107 .1095 .1119 .1144 .117 .1195 .1221 .1248 .1274 .1301 .1329 .1356 .1384 .1413 .1441 .147 .15 .1529 .1559 .159 .162 .1651 .1683 .1714 .1746 .1779 .1812 .1845 .1878 .1912 .1946 .1981 .2016 .2051 .2086 .2122 .2159 .2195 .2232 .227 .2307 .2346 .2384 .2423 .2462 .2502 .2542 .2582 .2623 .2664 .2705 .2747 .2789 .2831 .2874 .2918 .2961 .3005 .305 .3095 .314 .3185 .3231 .3278 .3325 .3372 .3419 .3467 .3515 .3564 .3613 .3663 .3712 .3763 .3813 .3864 .3916 .3968 .402 .4072 .4125 .4179 .4233 .4287 .4342 .4397 .4452 .4508 .4564 .4621 .4678 .4735 .4793 .4851 .491 .4969 .5029 .5089 .5149 .521 .5271 .5333 .5395 .5457 .552 .5583 .5647 .5711 .5776 .5841 .5906 .5972 .6038 .6105 .6172 .624 .6308 .6376 .6445 .6514 .6584 .6654 .6724 .6795 .6867 .6939 .7011 .7084 .7157 .7231 .7305 .7379 .7454 .7529 .7605 .7682 .7758 .7835 .7913 .7991 .807 .8148 .8228 .8308 .8388 .8469 .855 .8632 .8714 .8796 .8879 .8963 .9047 .9131 .9216 .9301 .9387 .9473 .956 .9647 .9734 .9823 .9911 1;
@function color-contrast($background, $color-contrast-dark: black, $color-contrast-light: white, $min-contrast-ratio: 4.5) {
$foregrounds: $color-contrast-light, $color-contrast-dark, #fff, #000;
$max-ratio: 0;
$max-ratio-color: null;
@each $color in $foregrounds {
$contrast-ratio: contrast-ratio($background, $color);
@if $contrast-ratio > $min-contrast-ratio {
@return $color;
} @else if $contrast-ratio > $max-ratio {
$max-ratio: $contrast-ratio;
$max-ratio-color: $color;
}
}
@warn "Found no color leading to #{$min-contrast-ratio}:1 contrast ratio against #{$background}...";
@return $max-ratio-color;
}
@function contrast-ratio($background, $foreground: variables.$color-contrast-light) {
$l1: luminance($background);
$l2: luminance(opaque($background, $foreground));
@return if($l1 > $l2, divide($l1 + .05, $l2 + .05), divide($l2 + .05, $l1 + .05));
}
// Return WCAG2.1 relative luminance
// See https://www.w3.org/TR/WCAG/#dfn-relative-luminance
// See https://www.w3.org/TR/WCAG/#dfn-contrast-ratio
@function luminance($color) {
$rgb: (
"r": color.red($color),
"g": color.green($color),
"b": color.blue($color)
);
@each $name, $value in $rgb {
$value: if(divide($value, 255) < .04045, divide(divide($value, 255), 12.92), list.nth($_luminance-list, $value + 1));
$rgb: map.merge($rgb, ($name: $value));
}
@return (map.get($rgb, "r") * .2126) + (map.get($rgb, "g") * .7152) + (map.get($rgb, "b") * .0722);
}
// Return opaque color
// opaque(#fff, rgba(0, 0, 0, .5)) => #808080
@function opaque($background, $foreground) {
@return color.mix(rgba($foreground, 1), $background, opacity($foreground) * 100%);
}
// mdo-do: Replace tint-color and shade-color with color.adjust(COLOR, $lightness: %).
// scss-docs-start color-functions
// Tint a color: mix a color with white
@function tint-color($color, $weight) {
@return color.mix(white, $color, $weight);
}
// Shade a color: mix a color with black
@function shade-color($color, $weight) {
@return color.mix(black, $color, $weight);
}
// Shade the color if the weight is positive, else tint it
@function shift-color($color, $weight) {
@return if($weight > 0, shade-color($color, $weight), tint-color($color, -$weight));
}
// scss-docs-end color-functions
// Return valid calc
// @function add($value1, $value2, $return-calc: true) {
// @if $value1 == null {
// @return $value2;
// }
// @if $value2 == null {
// @return $value1;
// }
// @if type-of($value1) == number and type-of($value2) == number and comparable($value1, $value2) {
// @return $value1 + $value2;
// }
// @return if($return-calc == true, calc(#{$value1} + #{$value2}), $value1 + unquote(" + ") + $value2);
// }
// @function subtract($value1, $value2, $return-calc: true) {
// @if $value1 == null and $value2 == null {
// @return null;
// }
// @if $value1 == null {
// @return -$value2;
// }
// @if $value2 == null {
// @return $value1;
// }
// @if type-of($value1) == number and type-of($value2) == number and comparable($value1, $value2) {
// @return $value1 - $value2;
// }
// @if type-of($value2) != number {
// $value2: unquote("(") + $value2 + unquote(")");
// }
// @return if($return-calc == true, calc(#{$value1} - #{$value2}), $value1 + unquote(" - ") + $value2);
// }
@function divide($dividend, $divisor, $precision: 10) {
$sign: if($dividend > 0 and $divisor > 0 or $dividend < 0 and $divisor < 0, 1, -1);
$dividend: math.abs($dividend);
$divisor: math.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: math.unit($dividend);
$divisor-unit: math.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;
}

0
scss/setup/_variables-dark.scss Normal file
View File

1842
scss/setup/_variables.scss Normal file
View File

@ -0,0 +1,1842 @@
@use "sass:color";
@use "sass:string";
@use "functions";
// Variables
//
// Variables should follow the `$component-state-property-size` formula for
// consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs.
// Color system
// scss-docs-start gray-color-variables
$white: #fff !default;
$gray-100: #f8f9fa !default;
$gray-200: #e9ecef !default;
$gray-300: #dee2e6 !default;
$gray-400: #ced4da !default;
$gray-500: #adb5bd !default;
$gray-600: #6c757d !default;
$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
// scss-docs-start color-variables
$blue: #0d6efd !default;
$indigo: #6610f2 !default;
$purple: #6f42c1 !default;
$pink: #d63384 !default;
$red: #dc3545 !default;
$orange: #fd7e14 !default;
$yellow: #ffc107 !default;
$green: #198754 !default;
$teal: #20c997 !default;
$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;
$info: $cyan !default;
$warning: $yellow !default;
$danger: $red !default;
$light: $gray-100 !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: color.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"),
// ("(", "%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-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
//
// Control the default styling of most Bootstrap elements by modifying these
// 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: (
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 `<body>` element.
$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: $primary !default;
$link-decoration: underline !default;
$link-shade-percentage: 20% !default;
$link-hover-color: color.adjust($link-color, $lightness: $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
//
// Style p element.
$paragraph-margin-bottom: 1rem !default;
// Grid breakpoints
//
// 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,
xxl: 1400px
) !default;
// scss-docs-end grid-breakpoints
// @include assert-ascending($grid-breakpoints, "$grid-breakpoints");
// @include assert-starts-at-zero($grid-breakpoints, "$grid-breakpoints");
// Grid containers
//
// 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,
xxl: 1320px
) !default;
// scss-docs-end container-max-widths
// @include assert-ascending($container-max-widths, "$container-max-widths");
// Grid columns
//
// Set the number of columns and specify the width of the gutters.
$grid-columns: 12 !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.
// 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-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: $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;
$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: 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;
// 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-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;
$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
// 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: 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;
$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: .875em !default;
$sub-sup-font-size: .75em !default;
// fusv-disable
$text-muted: var(--#{$prefix}secondary-color) !default; // Deprecated in 5.3.0
// fusv-enable
$initialism-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-margin-y: $spacer !default;
$hr-color: inherit !default;
// fusv-disable
$hr-bg-color: null !default; // Deprecated in v5.2.0
$hr-height: null !default; // Deprecated in v5.2.0
// fusv-enable
$hr-border-color: null !default; // Allows for inherited colors
$hr-border-width: var(--#{$prefix}border-width) !default;
$hr-opacity: .25 !default;
// scss-docs-start vr-variables
$vr-border-width: var(--#{$prefix}border-width) !default;
// scss-docs-end vr-variables
$legend-margin-bottom: .5rem !default;
$legend-font-size: 1.5rem !default;
$legend-font-weight: null !default;
$dt-font-weight: $font-weight-bold !default;
$list-inline-padding: .5rem !default;
$mark-padding: .1875em !default;
$mark-color: $body-color !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.
// 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-cell-vertical-align: top !default;
$table-color: var(--#{$prefix}emphasis-color) !default;
$table-bg: var(--#{$prefix}body-bg) !default;
$table-accent-bg: transparent !default;
$table-th-font-weight: null !default;
$table-striped-color: $table-color !default;
$table-striped-bg-factor: .05 !default;
$table-striped-bg: rgba(var(--#{$prefix}emphasis-color-rgb), $table-striped-bg-factor) !default;
$table-active-color: $table-color !default;
$table-active-bg-factor: .1 !default;
$table-active-bg: rgba(var(--#{$prefix}emphasis-color-rgb), $table-active-bg-factor) !default;
$table-hover-color: $table-color !default;
$table-hover-bg-factor: .075 !default;
$table-hover-bg: rgba(var(--#{$prefix}emphasis-color-rgb), $table-hover-bg-factor) !default;
$table-border-factor: .2 !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-bg-scale: -80% !default;
// scss-docs-end table-variables
// 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: $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-padding-y-lg: .5rem !default;
$input-btn-padding-x-lg: 1rem !default;
$input-btn-font-size-lg: $font-size-lg !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;
$btn-font-size: $input-btn-font-size !default;
$btn-line-height: $input-btn-line-height !default;
$btn-white-space: null !default; // Set to `nowrap` to prevent text wrapping
$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-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-border-width: $input-btn-border-width !default;
$btn-font-weight: $font-weight-normal !default;
$btn-box-shadow: inset 0 1px 0 rgba($white, .15), 0 1px 1px rgba($black, .075) !default;
$btn-focus-width: $input-btn-focus-width !default;
$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-link-focus-shadow-rgb: to-rgb(color.mix(functions.color-contrast($link-color), $link-color, 15%)) !default;
// Allows for customizing button radius independently from global border radius
$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
// 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;
$input-font-size: $input-btn-font-size !default;
$input-font-weight: $font-weight-base !default;
$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-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-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: var(--#{$prefix}body-color) !default;
$input-border-color: var(--#{$prefix}border-color) !default;
$input-border-width: $input-btn-border-width !default;
$input-box-shadow: var(--#{$prefix}box-shadow-inset) !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: 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: var(--#{$prefix}secondary-color) !default;
$input-plaintext-color: var(--#{$prefix}body-color) !default;
$input-height-border: calc(#{$input-border-width} * 2) !default; // stylelint-disable-line function-disallowed-list
$input-height-inner: calc(#{$input-line-height} * 1em + #{$input-padding-y} * 2) !default;
$input-height-inner-half: calc(#{$input-line-height} * .5em + #{$input-padding-y}) !default;
$input-height-inner-quarter: calc(#{$input-line-height} * .25em + #{$input-padding-y} * .5) !default;
$input-height: calc(#{$input-line-height} * 1em + #{$input-padding-y} * 2 + #{$input-height-border}) !default;
$input-height-sm: calc(#{$input-line-height} * 1em + #{$input-padding-y-sm} * 2 + #{$input-height-border}) !default;
$input-height-lg: calc(#{$input-line-height} * 1em + #{$input-padding-y-lg} * 2 + #{$input-height-border}) !default;
$input-transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out !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,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$form-check-input-checked-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/></svg>") !default;
$form-check-radio-checked-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='2' fill='#{$form-check-input-checked-color}'/></svg>") !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,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$form-check-input-indeterminate-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/></svg>") !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,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-color}'/></svg>") !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,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-focus-color}'/></svg>") !default;
$form-switch-checked-color: $component-active-color !default;
$form-switch-checked-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-checked-color}'/></svg>") !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: var(--#{$prefix}tertiary-bg) !default;
$input-group-addon-border-color: $input-border-color !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,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$form-select-indicator-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/></svg>") !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: var(--#{$prefix}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}secondary-bg) !default;
$form-range-track-border-radius: 1rem !default;
$form-range-track-box-shadow: var(--#{$prefix}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: calc(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: $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,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><path fill='#{$form-feedback-icon-valid-color}' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1'/></svg>") !default;
$form-feedback-icon-invalid-color: $form-feedback-invalid-color !default;
$form-feedback-icon-invalid: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='#{$form-feedback-icon-invalid-color}'><circle cx='6' cy='6' r='4.5'/><path stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/><circle cx='6' cy='8.2' r='.6' fill='#{$form-feedback-icon-invalid-color}' stroke='none'/></svg>") !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),
),
"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-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-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-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
// scss-docs-start navbar-variables
$navbar-padding-y: $spacer * .5 !default;
$navbar-padding-x: null !default;
$navbar-nav-link-padding-x: .5rem !default;
$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) * .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-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,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-light-icon-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !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-icon-color: $navbar-dark-color !default;
$navbar-dark-toggler-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-dark-icon-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !default;
$navbar-dark-toggler-border-color: rgba($white, .1) !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: 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: var(--#{$prefix}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: var(--#{$prefix}tertiary-color) !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
// 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-font-size: $font-size-base !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: 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: $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-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
// Placeholders
// scss-docs-start placeholders
$placeholder-opacity-max: .5 !default;
$placeholder-opacity-min: .2 !default;
// scss-docs-end placeholders
// Cards
// 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: calc(#{$card-border-radius} - #{$card-border-width}) !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: 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: calc(#{$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;
// fusv-disable
$accordion-button-focus-border-color: $input-focus-border-color !default; // Deprecated in v5.3.3
// fusv-enable
$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,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='#{$accordion-icon-color}' stroke-linecap='round' stroke-linejoin='round'><path d='m2 5 6 6 6-6'/></svg>") !default;
$accordion-button-active-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='#{$accordion-icon-active-color}' stroke-linecap='round' stroke-linejoin='round'><path d='m2 5 6 6 6-6'/></svg>") !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: 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: $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;
// 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: 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: var(--#{$prefix}body-bg) !default;
$popover-max-width: 276px !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: var(--#{$prefix}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: $spacer !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;
// scss-docs-end popover-variables
// 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: .5rem !default;
$toast-font-size: .875rem !default;
$toast-color: null !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: 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
// scss-docs-start badge-variables
$badge-font-size: .75em !default;
$badge-font-weight: $font-weight-bold !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
// scss-docs-start modal-variables
$modal-inner-padding: $spacer !default;
$modal-footer-margin-between: .5rem !default;
$modal-dialog-margin: .5rem !default;
$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: 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: calc(#{$modal-content-border-radius} - #{$modal-content-border-width}) !default;
$modal-content-box-shadow-xs: var(--#{$prefix}box-shadow-sm) !default;
$modal-content-box-shadow-sm-up: var(--#{$prefix}box-shadow) !default;
$modal-backdrop-bg: $black !default;
$modal-backdrop-opacity: .5 !default;
$modal-header-border-color: var(--#{$prefix}border-color) !default;
$modal-header-border-width: $modal-content-border-width !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-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.
// 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-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: 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: $primary !default;
$progress-bar-animation-timing: 1s linear infinite !default;
$progress-bar-transition: width .6s ease !default;
// scss-docs-end progress-variables
// List group
// 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: var(--#{$prefix}secondary-color) !default;
$list-group-disabled-bg: $list-group-bg !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: 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: 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
// 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: 0 !default;
$breadcrumb-padding-x: 0 !default;
$breadcrumb-item-padding-x: .5rem !default;
$breadcrumb-margin-bottom: 1rem !default;
$breadcrumb-bg: null !default;
$breadcrumb-divider-color: var(--#{$prefix}secondary-color) !default;
$breadcrumb-active-color: var(--#{$prefix}secondary-color) !default;
$breadcrumb-divider: string.quote("/") !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;
$carousel-control-hover-opacity: .9 !default;
$carousel-control-transition: opacity .15s ease !default;
$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: 2rem !default;
$carousel-control-prev-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0'/></svg>") !default;
$carousel-control-next-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708'/></svg>") !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
// 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
// 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,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$btn-close-color}'><path d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414'/></svg>") !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: $small-font-size !default;
$code-color: $pink !default;
$kbd-padding-y: .1875rem !default;
$kbd-padding-x: .375rem !default;
$kbd-font-size: $code-font-size !default;
$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
$pre-color: null !default;
// 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-300 !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: color.adjust($primary, $blackness: 40%) !default;
$link-hover-color-dark: color.adjust($link-color-dark, $blackness: $link-shade-percentage) !default;
$code-color-dark: color.adjust($code-color, $whiteness: 40%) !default;
$mark-color-dark: $body-color-dark !default;
$mark-bg-dark: $yellow-800 !default;
//
// Forms
//
$form-select-indicator-color-dark: $body-color-dark !default;
$form-select-indicator-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$form-select-indicator-color-dark}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/></svg>") !default;
$form-switch-color-dark: rgba($white, .25) !default;
$form-switch-bg-image-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-color-dark}'/></svg>") !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,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-color-dark}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/></svg>") !default;
$accordion-button-active-icon-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-active-color-dark}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/></svg>") !default;
// scss-docs-end sass-dark-mode-vars

5
scss/setup/index.scss Normal file
View File

@ -0,0 +1,5 @@
@forward "functions";
@forward "variables";
@forward "../variables-dark";
@forward "../mixins";
@forward "../maps";

40
scss/utilities/_api.scss
View File

@ -1,33 +1,41 @@
@use "sass:map";
@use "sass:meta";
@use "../mixins/breakpoints";
@use "../mixins/utilities" as mixins-utilities;
@use "../utilities";
@use "../variables";
@use "../vendor/rfs";
// Loop over each breakpoint
@each $breakpoint in map-keys($grid-breakpoints) {
@each $breakpoint in map.keys(variables.$grid-breakpoints) {
// Generate media query if needed
@include media-breakpoint-up($breakpoint) {
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
@include breakpoints.media-breakpoint-up($breakpoint) {
$infix: breakpoints.breakpoint-infix($breakpoint, variables.$grid-breakpoints);
// Loop over each utility property
@each $key, $utility in $utilities {
@each $key, $utility in utilities.$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);
@if meta.type-of($utility) == "map" and (map.get($utility, responsive) or $infix == "") {
@include mixins-utilities.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);
@media (min-width: rfs.$rfs-mq-value) {
@each $breakpoint in map.keys(variables.$grid-breakpoints) {
$infix: breakpoints.breakpoint-infix($breakpoint, variables.$grid-breakpoints);
@if (map-get($grid-breakpoints, $breakpoint) < $rfs-breakpoint) {
@if (map.get(variables.$grid-breakpoints, $breakpoint) < rfs.$rfs-breakpoint) {
// Loop over each utility property
@each $key, $utility in $utilities {
@each $key, $utility in utilities.$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);
@if meta.type-of($utility) == "map" and map.get($utility, rfs) and (map.get($utility, responsive) or $infix == "") {
@include mixins-utilities.generate-utility($utility, $infix, true);
}
}
}
@ -37,11 +45,11 @@
// Print utilities
@media print {
@each $key, $utility in $utilities {
@each $key, $utility in utilities.$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");
@if meta.type-of($utility) == "map" and map.get($utility, print) == true {
@include mixins-utilities.generate-utility($utility, "-print");
}
}
}

28
scss/vendor/_rfs.scss vendored
View File

@ -1,3 +1,5 @@
@use "sass:meta";
@use "sass:string";
@use "sass:math";
// stylelint-disable scss/dimension-no-non-numeric-values
@ -32,7 +34,7 @@ $rfs-two-dimensional: false !default;
// Factor of decrease
$rfs-factor: 10 !default;
@if type-of($rfs-factor) != number or $rfs-factor <= 1 {
@if meta.type-of($rfs-factor) != number or $rfs-factor <= 1 {
@error "`#{$rfs-factor}` is not a valid $rfs-factor, it must be greater than 1.";
}
@ -52,7 +54,7 @@ $rfs-safari-iframe-resize-bug-fix: false !default;
$enable-rfs: true !default;
// Cache $rfs-base-value unit
$rfs-base-value-unit: unit($rfs-base-value);
$rfs-base-value-unit: math.unit($rfs-base-value);
// Remove px-unit from $rfs-base-value for calculations
@if $rfs-base-value-unit == px {
@ -63,7 +65,7 @@ $rfs-base-value-unit: unit($rfs-base-value);
}
// Cache $rfs-breakpoint unit to prevent multiple calls
$rfs-breakpoint-unit-cache: unit($rfs-breakpoint);
$rfs-breakpoint-unit-cache: math.unit($rfs-breakpoint);
// Remove unit from $rfs-breakpoint for calculations
@if $rfs-breakpoint-unit-cache == px {
@ -150,7 +152,7 @@ $rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height
// Helper function to get the formatted non-responsive value
@function rfs-value($values) {
// Convert to list
$values: if(type-of($values) != list, ($values,), $values);
$values: if(meta.type-of($values) != list, ($values,), $values);
$val: "";
@ -161,7 +163,7 @@ $rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height
}
@else {
// Cache $value unit
$unit: if(type-of($value) == "number", unit($value), false);
$unit: if(meta.type-of($value) == "number", math.unit($value), false);
@if $unit == px {
// Convert to rem if needed
@ -178,13 +180,13 @@ $rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height
}
// Remove first space
@return unquote(str-slice($val, 2));
@return string.unquote(string.slice($val, 2));
}
// 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);
$values: if(meta.type-of($values) != list, ($values,), $values);
$val: "";
@ -194,7 +196,7 @@ $rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height
$val: $val + " 0";
} @else {
// Cache $value unit
$unit: if(type-of($value) == "number", unit($value), false);
$unit: if(meta.type-of($value) == "number", math.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 {
@ -204,15 +206,15 @@ $rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height
$value: math.div($value, $value * 0 + if($unit == px, 1, math.div(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 {
@if math.abs($value) <= $rfs-base-value or not $enable-rfs {
$val: $val + " " + if($rfs-unit == rem, #{math.div($value, $rfs-rem-value)}rem, #{$value}px);
}
@else {
// Calculate the minimum value
$value-min: $rfs-base-value + math.div(abs($value) - $rfs-base-value, $rfs-factor);
$value-min: $rfs-base-value + math.div(math.abs($value) - $rfs-base-value, $rfs-factor);
// Calculate difference between $value and the minimum value
$value-diff: abs($value) - $value-min;
$value-diff: math.abs($value) - $value-min;
// Base value formatting
$min-width: if($rfs-unit == rem, #{math.div($value-min, $rfs-rem-value)}rem, #{$value-min}px);
@ -227,14 +229,14 @@ $rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height
$variable-width: #{math.div($value-diff * 100, $rfs-breakpoint)}#{$variable-unit};
// Return the calculated value
$val: $val + " calc(" + $min-width + if($value < 0, " - ", " + ") + $variable-width + ")";
$val: $val + " min(" + $min-width + if($value < 0, " - ", " + ") + $variable-width + ")";
}
}
}
}
// Remove first space
@return unquote(str-slice($val, 2));
@return string.unquote(string.slice($val, 2));
}
// RFS mixin