rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-12 09:54:25 +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; display: none !important;
} }
} }
/*# sourceMappingURL=bootstrap-grid.css.map */ /*# 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] { [hidden] {
display: none !important; display: none !important;
} }
/*# sourceMappingURL=bootstrap-reboot.css.map */ /*# 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; display: none !important;
} }
} }
/*# sourceMappingURL=bootstrap-utilities.css.map */ /*# 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

11974
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

4
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

11948
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

4
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 // Base styles
// //
.accordion { .accordion {
// scss-docs-start accordion-css-vars // scss-docs-start accordion-css-vars
--#{$prefix}accordion-color: #{$accordion-color}; --#{variables.$prefix}accordion-color: #{variables.$accordion-color};
--#{$prefix}accordion-bg: #{$accordion-bg}; --#{variables.$prefix}accordion-bg: #{variables.$accordion-bg};
--#{$prefix}accordion-transition: #{$accordion-transition}; --#{variables.$prefix}accordion-transition: #{variables.$accordion-transition};
--#{$prefix}accordion-border-color: #{$accordion-border-color}; --#{variables.$prefix}accordion-border-color: #{variables.$accordion-border-color};
--#{$prefix}accordion-border-width: #{$accordion-border-width}; --#{variables.$prefix}accordion-border-width: #{variables.$accordion-border-width};
--#{$prefix}accordion-border-radius: #{$accordion-border-radius}; --#{variables.$prefix}accordion-border-radius: #{variables.$accordion-border-radius};
--#{$prefix}accordion-inner-border-radius: #{$accordion-inner-border-radius}; --#{variables.$prefix}accordion-inner-border-radius: #{variables.$accordion-inner-border-radius};
--#{$prefix}accordion-btn-padding-x: #{$accordion-button-padding-x}; --#{variables.$prefix}accordion-btn-padding-x: #{variables.$accordion-button-padding-x};
--#{$prefix}accordion-btn-padding-y: #{$accordion-button-padding-y}; --#{variables.$prefix}accordion-btn-padding-y: #{variables.$accordion-button-padding-y};
--#{$prefix}accordion-btn-color: #{$accordion-button-color}; --#{variables.$prefix}accordion-btn-color: #{variables.$accordion-button-color};
--#{$prefix}accordion-btn-bg: #{$accordion-button-bg}; --#{variables.$prefix}accordion-btn-bg: #{variables.$accordion-button-bg};
--#{$prefix}accordion-btn-icon: #{escape-svg($accordion-button-icon)}; --#{variables.$prefix}accordion-btn-icon: #{functions.escape-svg(variables.$accordion-button-icon)};
--#{$prefix}accordion-btn-icon-width: #{$accordion-icon-width}; --#{variables.$prefix}accordion-btn-icon-width: #{variables.$accordion-icon-width};
--#{$prefix}accordion-btn-icon-transform: #{$accordion-icon-transform}; --#{variables.$prefix}accordion-btn-icon-transform: #{variables.$accordion-icon-transform};
--#{$prefix}accordion-btn-icon-transition: #{$accordion-icon-transition}; --#{variables.$prefix}accordion-btn-icon-transition: #{variables.$accordion-icon-transition};
--#{$prefix}accordion-btn-active-icon: #{escape-svg($accordion-button-active-icon)}; --#{variables.$prefix}accordion-btn-active-icon: #{functions.escape-svg(variables.$accordion-button-active-icon)};
--#{$prefix}accordion-btn-focus-box-shadow: #{$accordion-button-focus-box-shadow}; --#{variables.$prefix}accordion-btn-focus-box-shadow: #{variables.$accordion-button-focus-box-shadow};
--#{$prefix}accordion-body-padding-x: #{$accordion-body-padding-x}; --#{variables.$prefix}accordion-body-padding-x: #{variables.$accordion-body-padding-x};
--#{$prefix}accordion-body-padding-y: #{$accordion-body-padding-y}; --#{variables.$prefix}accordion-body-padding-y: #{variables.$accordion-body-padding-y};
--#{$prefix}accordion-active-color: #{$accordion-button-active-color}; --#{variables.$prefix}accordion-active-color: #{variables.$accordion-button-active-color};
--#{$prefix}accordion-active-bg: #{$accordion-button-active-bg}; --#{variables.$prefix}accordion-active-bg: #{variables.$accordion-button-active-bg};
// scss-docs-end accordion-css-vars // scss-docs-end accordion-css-vars
} }
@ -33,38 +40,38 @@
display: flex; display: flex;
align-items: center; align-items: center;
width: 100%; width: 100%;
padding: var(--#{$prefix}accordion-btn-padding-y) var(--#{$prefix}accordion-btn-padding-x); padding: var(--#{variables.$prefix}accordion-btn-padding-y) var(--#{variables.$prefix}accordion-btn-padding-x);
@include font-size($font-size-base); @include rfs.font-size(variables.$font-size-base);
color: var(--#{$prefix}accordion-btn-color); color: var(--#{variables.$prefix}accordion-btn-color);
text-align: left; // Reset button style text-align: left; // Reset button style
background-color: var(--#{$prefix}accordion-btn-bg); background-color: var(--#{variables.$prefix}accordion-btn-bg);
border: 0; border: 0;
@include border-radius(0); @include border-radius.border-radius(0);
overflow-anchor: none; overflow-anchor: none;
@include transition(var(--#{$prefix}accordion-transition)); @include transition.transition(var(--#{variables.$prefix}accordion-transition));
&:not(.collapsed) { &:not(.collapsed) {
color: var(--#{$prefix}accordion-active-color); color: var(--#{variables.$prefix}accordion-active-color);
background-color: var(--#{$prefix}accordion-active-bg); background-color: var(--#{variables.$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 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 { &::after {
background-image: var(--#{$prefix}accordion-btn-active-icon); background-image: var(--#{variables.$prefix}accordion-btn-active-icon);
transform: var(--#{$prefix}accordion-btn-icon-transform); transform: var(--#{variables.$prefix}accordion-btn-icon-transform);
} }
} }
// Accordion icon // Accordion icon
&::after { &::after {
flex-shrink: 0; flex-shrink: 0;
width: var(--#{$prefix}accordion-btn-icon-width); width: var(--#{variables.$prefix}accordion-btn-icon-width);
height: var(--#{$prefix}accordion-btn-icon-width); height: var(--#{variables.$prefix}accordion-btn-icon-width);
margin-left: auto; margin-left: auto;
content: ""; content: "";
background-image: var(--#{$prefix}accordion-btn-icon); background-image: var(--#{variables.$prefix}accordion-btn-icon);
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: var(--#{$prefix}accordion-btn-icon-width); background-size: var(--#{variables.$prefix}accordion-btn-icon-width);
@include transition(var(--#{$prefix}accordion-btn-icon-transition)); @include transition.transition(var(--#{variables.$prefix}accordion-btn-icon-transition));
} }
&:hover { &:hover {
@ -74,7 +81,7 @@
&:focus { &:focus {
z-index: 3; z-index: 3;
outline: 0; 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 { .accordion-item {
color: var(--#{$prefix}accordion-color); color: var(--#{variables.$prefix}accordion-color);
background-color: var(--#{$prefix}accordion-bg); background-color: var(--#{variables.$prefix}accordion-bg);
border: var(--#{$prefix}accordion-border-width) solid var(--#{$prefix}accordion-border-color); border: var(--#{variables.$prefix}accordion-border-width) solid var(--#{variables.$prefix}accordion-border-color);
&:first-of-type { &: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 { > .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 // Only set a border-radius on the last item if the accordion is collapsed
&:last-of-type { &: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 { > .accordion-header .accordion-button {
&.collapsed { &.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 { > .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 { .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 { > .accordion-item {
border-right: 0; border-right: 0;
border-left: 0; border-left: 0;
@include border-radius(0); @include border-radius.border-radius(0);
&:first-child { border-top: 0; } &:first-child { border-top: 0; }
&:last-child { border-bottom: 0; } &:last-child { border-bottom: 0; }
@ -137,17 +144,17 @@
> .accordion-collapse, > .accordion-collapse,
> .accordion-header .accordion-button, > .accordion-header .accordion-button,
> .accordion-header .accordion-button.collapsed { > .accordion-header .accordion-button.collapsed {
@include border-radius(0); @include border-radius.border-radius(0);
} }
// stylelint-enable selector-max-class // stylelint-enable selector-max-class
} }
} }
@if $enable-dark-mode { @if variables.$enable-dark-mode {
@include color-mode(dark) { @include color-mode.color-mode(dark) {
.accordion-button::after { .accordion-button::after {
--#{$prefix}accordion-btn-icon: #{escape-svg($accordion-button-icon-dark)}; --#{variables.$prefix}accordion-btn-icon: #{functions.escape-svg($accordion-button-icon-dark)};
--#{$prefix}accordion-btn-active-icon: #{escape-svg($accordion-button-active-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 // Base styles
// //
.alert { .alert {
// scss-docs-start alert-css-vars // scss-docs-start alert-css-vars
--#{$prefix}alert-bg: transparent; --#{variables.$prefix}alert-bg: transparent;
--#{$prefix}alert-padding-x: #{$alert-padding-x}; --#{variables.$prefix}alert-padding-x: #{variables.$alert-padding-x};
--#{$prefix}alert-padding-y: #{$alert-padding-y}; --#{variables.$prefix}alert-padding-y: #{variables.$alert-padding-y};
--#{$prefix}alert-margin-bottom: #{$alert-margin-bottom}; --#{variables.$prefix}alert-margin-bottom: #{variables.$alert-margin-bottom};
--#{$prefix}alert-color: inherit; --#{variables.$prefix}alert-color: inherit;
--#{$prefix}alert-border-color: transparent; --#{variables.$prefix}alert-border-color: transparent;
--#{$prefix}alert-border: #{$alert-border-width} solid var(--#{$prefix}alert-border-color); --#{variables.$prefix}alert-border: #{variables.$alert-border-width} solid var(--#{variables.$prefix}alert-border-color);
--#{$prefix}alert-border-radius: #{$alert-border-radius}; --#{variables.$prefix}alert-border-radius: #{variables.$alert-border-radius};
--#{$prefix}alert-link-color: inherit; --#{variables.$prefix}alert-link-color: inherit;
// scss-docs-end alert-css-vars // scss-docs-end alert-css-vars
position: relative; position: relative;
padding: var(--#{$prefix}alert-padding-y) var(--#{$prefix}alert-padding-x); padding: var(--#{variables.$prefix}alert-padding-y) var(--#{variables.$prefix}alert-padding-x);
margin-bottom: var(--#{$prefix}alert-margin-bottom); margin-bottom: var(--#{variables.$prefix}alert-margin-bottom);
color: var(--#{$prefix}alert-color); color: var(--#{variables.$prefix}alert-color);
background-color: var(--#{$prefix}alert-bg); background-color: var(--#{variables.$prefix}alert-bg);
border: var(--#{$prefix}alert-border); border: var(--#{variables.$prefix}alert-border);
@include border-radius(var(--#{$prefix}alert-border-radius)); @include border-radius.border-radius(var(--#{variables.$prefix}alert-border-radius));
} }
// Headings for larger alerts // Headings for larger alerts
@ -32,8 +36,8 @@
// Provide class for links that match alerts // Provide class for links that match alerts
.alert-link { .alert-link {
font-weight: $alert-link-font-weight; font-weight: variables.$alert-link-font-weight;
color: var(--#{$prefix}alert-link-color); color: var(--#{variables.$prefix}alert-link-color);
} }
@ -42,27 +46,27 @@
// Expand the right padding and account for the close button's positioning. // Expand the right padding and account for the close button's positioning.
.alert-dismissible { .alert-dismissible {
padding-right: $alert-dismissible-padding-r; padding-right: variables.$alert-dismissible-padding-r;
// Adjust close link position // Adjust close link position
.btn-close { .btn-close {
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
z-index: $stretched-link-z-index + 1; z-index: variables.$stretched-link-z-index + 1;
padding: $alert-padding-y * 1.25 $alert-padding-x; padding: variables.$alert-padding-y * 1.25 variables.$alert-padding-x;
} }
} }
// scss-docs-start alert-modifiers // scss-docs-start alert-modifiers
// Generate contextual modifier classes for colorizing the alert // 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} { .alert-#{$state} {
--#{$prefix}alert-color: var(--#{$prefix}#{$state}-text-emphasis); --#{variables.$prefix}alert-color: var(--#{variables.$prefix}#{$state}-text-emphasis);
--#{$prefix}alert-bg: var(--#{$prefix}#{$state}-bg-subtle); --#{variables.$prefix}alert-bg: var(--#{variables.$prefix}#{$state}-bg-subtle);
--#{$prefix}alert-border-color: var(--#{$prefix}#{$state}-border-subtle); --#{variables.$prefix}alert-border-color: var(--#{variables.$prefix}#{$state}-border-subtle);
--#{$prefix}alert-link-color: var(--#{$prefix}#{$state}-text-emphasis); --#{variables.$prefix}alert-link-color: var(--#{variables.$prefix}#{$state}-text-emphasis);
} }
} }
// scss-docs-end alert-modifiers // 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 // Base class
// //
// Requires one of the contextual, color modifier classes for `color` and // Requires one of the contextual, color modifier classes for `color` and
@ -5,25 +10,25 @@
.badge { .badge {
// scss-docs-start badge-css-vars // scss-docs-start badge-css-vars
--#{$prefix}badge-padding-x: #{$badge-padding-x}; --#{variables.$prefix}badge-padding-x: #{variables.$badge-padding-x};
--#{$prefix}badge-padding-y: #{$badge-padding-y}; --#{variables.$prefix}badge-padding-y: #{variables.$badge-padding-y};
@include rfs($badge-font-size, --#{$prefix}badge-font-size); @include rfs.rfs(variables.$badge-font-size, --#{variables.$prefix}badge-font-size);
--#{$prefix}badge-font-weight: #{$badge-font-weight}; --#{variables.$prefix}badge-font-weight: #{variables.$badge-font-weight};
--#{$prefix}badge-color: #{$badge-color}; --#{variables.$prefix}badge-color: #{variables.$badge-color};
--#{$prefix}badge-border-radius: #{$badge-border-radius}; --#{variables.$prefix}badge-border-radius: #{variables.$badge-border-radius};
// scss-docs-end badge-css-vars // scss-docs-end badge-css-vars
display: inline-block; display: inline-block;
padding: var(--#{$prefix}badge-padding-y) var(--#{$prefix}badge-padding-x); padding: var(--#{variables.$prefix}badge-padding-y) var(--#{variables.$prefix}badge-padding-x);
@include font-size(var(--#{$prefix}badge-font-size)); @include rfs.font-size(var(--#{variables.$prefix}badge-font-size));
font-weight: var(--#{$prefix}badge-font-weight); font-weight: var(--#{variables.$prefix}badge-font-weight);
line-height: 1; line-height: 1;
color: var(--#{$prefix}badge-color); color: var(--#{variables.$prefix}badge-color);
text-align: center; text-align: center;
white-space: nowrap; white-space: nowrap;
vertical-align: baseline; vertical-align: baseline;
@include border-radius(var(--#{$prefix}badge-border-radius)); @include border-radius.border-radius(var(--#{variables.$prefix}badge-border-radius));
@include gradient-bg(); @include gradients.gradient-bg();
// Empty badges collapse automatically // Empty badges collapse automatically
&:empty { &:empty {

43
scss/_breadcrumb.scss
View File

@ -1,40 +1,45 @@
@use "functions";
@use "mixins/border-radius";
@use "variables";
@use "vendor/rfs";
.breadcrumb { .breadcrumb {
// scss-docs-start breadcrumb-css-vars // scss-docs-start breadcrumb-css-vars
--#{$prefix}breadcrumb-padding-x: #{$breadcrumb-padding-x}; --#{variables.$prefix}breadcrumb-padding-x: #{variables.$breadcrumb-padding-x};
--#{$prefix}breadcrumb-padding-y: #{$breadcrumb-padding-y}; --#{variables.$prefix}breadcrumb-padding-y: #{variables.$breadcrumb-padding-y};
--#{$prefix}breadcrumb-margin-bottom: #{$breadcrumb-margin-bottom}; --#{variables.$prefix}breadcrumb-margin-bottom: #{variables.$breadcrumb-margin-bottom};
@include rfs($breadcrumb-font-size, --#{$prefix}breadcrumb-font-size); @include rfs.rfs(variables.$breadcrumb-font-size, --#{variables.$prefix}breadcrumb-font-size);
--#{$prefix}breadcrumb-bg: #{$breadcrumb-bg}; --#{variables.$prefix}breadcrumb-bg: #{variables.$breadcrumb-bg};
--#{$prefix}breadcrumb-border-radius: #{$breadcrumb-border-radius}; --#{variables.$prefix}breadcrumb-border-radius: #{variables.$breadcrumb-border-radius};
--#{$prefix}breadcrumb-divider-color: #{$breadcrumb-divider-color}; --#{variables.$prefix}breadcrumb-divider-color: #{variables.$breadcrumb-divider-color};
--#{$prefix}breadcrumb-item-padding-x: #{$breadcrumb-item-padding-x}; --#{variables.$prefix}breadcrumb-item-padding-x: #{variables.$breadcrumb-item-padding-x};
--#{$prefix}breadcrumb-item-active-color: #{$breadcrumb-active-color}; --#{variables.$prefix}breadcrumb-item-active-color: #{variables.$breadcrumb-active-color};
// scss-docs-end breadcrumb-css-vars // scss-docs-end breadcrumb-css-vars
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
padding: var(--#{$prefix}breadcrumb-padding-y) var(--#{$prefix}breadcrumb-padding-x); padding: var(--#{variables.$prefix}breadcrumb-padding-y) var(--#{variables.$prefix}breadcrumb-padding-x);
margin-bottom: var(--#{$prefix}breadcrumb-margin-bottom); margin-bottom: var(--#{variables.$prefix}breadcrumb-margin-bottom);
@include font-size(var(--#{$prefix}breadcrumb-font-size)); @include rfs.font-size(var(--#{variables.$prefix}breadcrumb-font-size));
list-style: none; list-style: none;
background-color: var(--#{$prefix}breadcrumb-bg); background-color: var(--#{variables.$prefix}breadcrumb-bg);
@include border-radius(var(--#{$prefix}breadcrumb-border-radius)); @include border-radius.border-radius(var(--#{variables.$prefix}breadcrumb-border-radius));
} }
.breadcrumb-item { .breadcrumb-item {
// The separator between breadcrumbs (by default, a forward-slash: "/") // The separator between breadcrumbs (by default, a forward-slash: "/")
+ .breadcrumb-item { + .breadcrumb-item {
padding-left: var(--#{$prefix}breadcrumb-item-padding-x); padding-left: var(--#{variables.$prefix}breadcrumb-item-padding-x);
&::before { &::before {
float: left; // Suppress inline spacings and underlining of the separator float: left; // Suppress inline spacings and underlining of the separator
padding-right: var(--#{$prefix}breadcrumb-item-padding-x); padding-right: var(--#{variables.$prefix}breadcrumb-item-padding-x);
color: var(--#{$prefix}breadcrumb-divider-color); color: var(--#{variables.$prefix}breadcrumb-divider-color);
content: var(--#{$prefix}breadcrumb-divider, escape-svg($breadcrumb-divider)) #{"/* rtl:"} var(--#{$prefix}breadcrumb-divider, escape-svg($breadcrumb-divider-flipped)) #{"*/"}; 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 { &.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 // Make the div behave like a button
.btn-group, .btn-group,
.btn-group-vertical { .btn-group-vertical {
@ -34,19 +38,19 @@
} }
.btn-group { .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 // Prevent double borders when buttons are next to each other
> :not(.btn-check:first-child) + .btn, > :not(.btn-check:first-child) + .btn,
> .btn-group:not(:first-child) { > .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 // Reset rounded corners
> .btn:not(:last-child):not(.dropdown-toggle), > .btn:not(:last-child):not(.dropdown-toggle),
> .btn.dropdown-toggle-split:first-child, > .btn.dropdown-toggle-split:first-child,
> .btn-group:not(:last-child) > .btn { > .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: // The left radius should be 0 if the button is:
@ -56,7 +60,7 @@
> .btn:nth-child(n + 3), > .btn:nth-child(n + 3),
> :not(.btn-check) + .btn, > :not(.btn-check) + .btn,
> .btn-group:not(:first-child) > .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 { .dropdown-toggle-split {
padding-right: $btn-padding-x * .75; padding-right: variables.$btn-padding-x * .75;
padding-left: $btn-padding-x * .75; padding-left: variables.$btn-padding-x * .75;
&::after, &::after,
.dropup &::after, .dropup &::after,
@ -88,24 +92,24 @@
} }
.btn-sm + .dropdown-toggle-split { .btn-sm + .dropdown-toggle-split {
padding-right: $btn-padding-x-sm * .75; padding-right: variables.$btn-padding-x-sm * .75;
padding-left: $btn-padding-x-sm * .75; padding-left: variables.$btn-padding-x-sm * .75;
} }
.btn-lg + .dropdown-toggle-split { .btn-lg + .dropdown-toggle-split {
padding-right: $btn-padding-x-lg * .75; padding-right: variables.$btn-padding-x-lg * .75;
padding-left: $btn-padding-x-lg * .75; padding-left: variables.$btn-padding-x-lg * .75;
} }
// The clickable button for toggling the menu // The clickable button for toggling the menu
// Set the same inset shadow as the :active state // Set the same inset shadow as the :active state
.btn-group.show .dropdown-toggle { .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. // Show no shadow for `.btn-link` since it has no other button styles.
&.btn-link { &.btn-link {
@include box-shadow(none); @include box-shadow.box-shadow(none);
} }
} }
@ -126,13 +130,13 @@
> .btn:not(:first-child), > .btn:not(:first-child),
> .btn-group: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 // Reset rounded corners
> .btn:not(:last-child):not(.dropdown-toggle), > .btn:not(:last-child):not(.dropdown-toggle),
> .btn-group:not(:last-child) > .btn { > .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: // The top radius should be 0 if the button is:
@ -142,6 +146,6 @@
> .btn:nth-child(n + 3), > .btn:nth-child(n + 3),
> :not(.btn-check) + .btn, > :not(.btn-check) + .btn,
> .btn-group:not(:first-child) > .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 // Base styles
// //
.btn { .btn {
// scss-docs-start btn-css-vars // scss-docs-start btn-css-vars
--#{$prefix}btn-padding-x: #{$btn-padding-x}; --#{variables.$prefix}btn-padding-x: #{variables.$btn-padding-x};
--#{$prefix}btn-padding-y: #{$btn-padding-y}; --#{variables.$prefix}btn-padding-y: #{variables.$btn-padding-y};
--#{$prefix}btn-font-family: #{$btn-font-family}; --#{variables.$prefix}btn-font-family: #{variables.$btn-font-family};
@include rfs($btn-font-size, --#{$prefix}btn-font-size); @include rfs.rfs(variables.$btn-font-size, --#{variables.$prefix}btn-font-size);
--#{$prefix}btn-font-weight: #{$btn-font-weight}; --#{variables.$prefix}btn-font-weight: #{variables.$btn-font-weight};
--#{$prefix}btn-line-height: #{$btn-line-height}; --#{variables.$prefix}btn-line-height: #{variables.$btn-line-height};
--#{$prefix}btn-color: #{$btn-color}; --#{variables.$prefix}btn-color: #{variables.$btn-color};
--#{$prefix}btn-bg: transparent; --#{variables.$prefix}btn-bg: transparent;
--#{$prefix}btn-border-width: #{$btn-border-width}; --#{variables.$prefix}btn-border-width: #{variables.$btn-border-width};
--#{$prefix}btn-border-color: transparent; --#{variables.$prefix}btn-border-color: transparent;
--#{$prefix}btn-border-radius: #{$btn-border-radius}; --#{variables.$prefix}btn-border-radius: #{variables.$btn-border-radius};
--#{$prefix}btn-hover-border-color: transparent; --#{variables.$prefix}btn-hover-border-color: transparent;
--#{$prefix}btn-box-shadow: #{$btn-box-shadow}; --#{variables.$prefix}btn-box-shadow: #{variables.$btn-box-shadow};
--#{$prefix}btn-disabled-opacity: #{$btn-disabled-opacity}; --#{variables.$prefix}btn-disabled-opacity: #{variables.$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-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 // scss-docs-end btn-css-vars
display: inline-block; display: inline-block;
padding: var(--#{$prefix}btn-padding-y) var(--#{$prefix}btn-padding-x); padding: var(--#{variables.$prefix}btn-padding-y) var(--#{variables.$prefix}btn-padding-x);
font-family: var(--#{$prefix}btn-font-family); font-family: var(--#{variables.$prefix}btn-font-family);
@include font-size(var(--#{$prefix}btn-font-size)); @include rfs.font-size(var(--#{variables.$prefix}btn-font-size));
font-weight: var(--#{$prefix}btn-font-weight); font-weight: var(--#{variables.$prefix}btn-font-weight);
line-height: var(--#{$prefix}btn-line-height); line-height: var(--#{variables.$prefix}btn-line-height);
color: var(--#{$prefix}btn-color); color: var(--#{variables.$prefix}btn-color);
text-align: center; text-align: center;
text-decoration: if($link-decoration == none, null, none); text-decoration: if(variables.$link-decoration == none, null, none);
white-space: $btn-white-space; white-space: variables.$btn-white-space;
vertical-align: middle; vertical-align: middle;
cursor: if($enable-button-pointers, pointer, null); cursor: if(variables.$enable-button-pointers, pointer, null);
user-select: none; user-select: none;
border: var(--#{$prefix}btn-border-width) solid var(--#{$prefix}btn-border-color); border: var(--#{variables.$prefix}btn-border-width) solid var(--#{variables.$prefix}btn-border-color);
@include border-radius(var(--#{$prefix}btn-border-radius)); @include border-radius.border-radius(var(--#{variables.$prefix}btn-border-radius));
@include gradient-bg(var(--#{$prefix}btn-bg)); @include gradients.gradient-bg(var(--#{variables.$prefix}btn-bg));
@include box-shadow(var(--#{$prefix}btn-box-shadow)); @include box-shadow.box-shadow(var(--#{variables.$prefix}btn-box-shadow));
@include transition($btn-transition); @include transition.transition(variables.$btn-transition);
&:hover { &:hover {
color: var(--#{$prefix}btn-hover-color); color: var(--#{variables.$prefix}btn-hover-color);
text-decoration: if($link-hover-decoration == underline, none, null); text-decoration: if(variables.$link-hover-decoration == underline, none, null);
background-color: var(--#{$prefix}btn-hover-bg); background-color: var(--#{variables.$prefix}btn-hover-bg);
border-color: var(--#{$prefix}btn-hover-border-color); border-color: var(--#{variables.$prefix}btn-hover-border-color);
} }
.btn-check + &:hover { .btn-check + &:hover {
// override for the checkbox/radio buttons // override for the checkbox/radio buttons
color: var(--#{$prefix}btn-color); color: var(--#{variables.$prefix}btn-color);
background-color: var(--#{$prefix}btn-bg); background-color: var(--#{variables.$prefix}btn-bg);
border-color: var(--#{$prefix}btn-border-color); border-color: var(--#{variables.$prefix}btn-border-color);
} }
&:focus-visible { &:focus-visible {
color: var(--#{$prefix}btn-hover-color); color: var(--#{variables.$prefix}btn-hover-color);
@include gradient-bg(var(--#{$prefix}btn-hover-bg)); @include gradients.gradient-bg(var(--#{variables.$prefix}btn-hover-bg));
border-color: var(--#{$prefix}btn-hover-border-color); border-color: var(--#{variables.$prefix}btn-hover-border-color);
outline: 0; outline: 0;
// Avoid using mixin so we can pass custom focus shadow properly // Avoid using mixin so we can pass custom focus shadow properly
@if $enable-shadows { @if variables.$enable-shadows {
box-shadow: var(--#{$prefix}btn-box-shadow), var(--#{$prefix}btn-focus-box-shadow); box-shadow: var(--#{variables.$prefix}btn-box-shadow), var(--#{variables.$prefix}btn-focus-box-shadow);
} @else { } @else {
box-shadow: var(--#{$prefix}btn-focus-box-shadow); box-shadow: var(--#{variables.$prefix}btn-focus-box-shadow);
} }
} }
.btn-check:focus-visible + & { .btn-check:focus-visible + & {
border-color: var(--#{$prefix}btn-hover-border-color); border-color: var(--#{variables.$prefix}btn-hover-border-color);
outline: 0; outline: 0;
// Avoid using mixin so we can pass custom focus shadow properly // Avoid using mixin so we can pass custom focus shadow properly
@if $enable-shadows { @if variables.$enable-shadows {
box-shadow: var(--#{$prefix}btn-box-shadow), var(--#{$prefix}btn-focus-box-shadow); box-shadow: var(--#{variables.$prefix}btn-box-shadow), var(--#{variables.$prefix}btn-focus-box-shadow);
} @else { } @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, &:first-child:active,
&.active, &.active,
&.show { &.show {
color: var(--#{$prefix}btn-active-color); color: var(--#{variables.$prefix}btn-active-color);
background-color: var(--#{$prefix}btn-active-bg); background-color: var(--#{variables.$prefix}btn-active-bg);
// Remove CSS gradients if they're enabled // Remove CSS gradients if they're enabled
background-image: if($enable-gradients, none, null); background-image: if(variables.$enable-gradients, none, null);
border-color: var(--#{$prefix}btn-active-border-color); border-color: var(--#{variables.$prefix}btn-active-border-color);
@include box-shadow(var(--#{$prefix}btn-active-shadow)); @include box-shadow.box-shadow(var(--#{variables.$prefix}btn-active-shadow));
&:focus-visible { &:focus-visible {
// Avoid using mixin so we can pass custom focus shadow properly // Avoid using mixin so we can pass custom focus shadow properly
@if $enable-shadows { @if variables.$enable-shadows {
box-shadow: var(--#{$prefix}btn-active-shadow), var(--#{$prefix}btn-focus-box-shadow); box-shadow: var(--#{variables.$prefix}btn-active-shadow), var(--#{variables.$prefix}btn-focus-box-shadow);
} @else { } @else {
box-shadow: var(--#{$prefix}btn-focus-box-shadow); box-shadow: var(--#{variables.$prefix}btn-focus-box-shadow);
} }
} }
} }
.btn-check:checked:focus-visible + & { .btn-check:checked:focus-visible + & {
// Avoid using mixin so we can pass custom focus shadow properly // Avoid using mixin so we can pass custom focus shadow properly
@if $enable-shadows { @if variables.$enable-shadows {
box-shadow: var(--#{$prefix}btn-active-shadow), var(--#{$prefix}btn-focus-box-shadow); box-shadow: var(--#{variables.$prefix}btn-active-shadow), var(--#{variables.$prefix}btn-focus-box-shadow);
} @else { } @else {
box-shadow: var(--#{$prefix}btn-focus-box-shadow); box-shadow: var(--#{variables.$prefix}btn-focus-box-shadow);
} }
} }
&:disabled, &:disabled,
&.disabled, &.disabled,
fieldset:disabled & { fieldset:disabled & {
color: var(--#{$prefix}btn-disabled-color); color: var(--#{variables.$prefix}btn-disabled-color);
pointer-events: none; pointer-events: none;
background-color: var(--#{$prefix}btn-disabled-bg); background-color: var(--#{variables.$prefix}btn-disabled-bg);
background-image: if($enable-gradients, none, null); background-image: if(variables.$enable-gradients, none, null);
border-color: var(--#{$prefix}btn-disabled-border-color); border-color: var(--#{variables.$prefix}btn-disabled-border-color);
opacity: var(--#{$prefix}btn-disabled-opacity); opacity: var(--#{variables.$prefix}btn-disabled-opacity);
@include box-shadow(none); @include box-shadow.box-shadow(none);
} }
} }
@ -128,35 +137,35 @@
// //
// scss-docs-start btn-variant-loops // scss-docs-start btn-variant-loops
@each $color, $value in $theme-colors { @each $color, $value in variables.$theme-colors {
.btn-#{$color} { .btn-#{$color} {
@if $color == "light" { @if $color == "light" {
@include button-variant( @include buttons.button-variant(
$value, $value,
$value, $value,
$hover-background: shade-color($value, $btn-hover-bg-shade-amount), $hover-background: functions.shade-color($value, variables.$btn-hover-bg-shade-amount),
$hover-border: shade-color($value, $btn-hover-border-shade-amount), $hover-border: functions.shade-color($value, variables.$btn-hover-border-shade-amount),
$active-background: shade-color($value, $btn-active-bg-shade-amount), $active-background: functions.shade-color($value, variables.$btn-active-bg-shade-amount),
$active-border: shade-color($value, $btn-active-border-shade-amount) $active-border: functions.shade-color($value, variables.$btn-active-border-shade-amount)
); );
} @else if $color == "dark" { } @else if $color == "dark" {
@include button-variant( @include buttons.button-variant(
$value, $value,
$value, $value,
$hover-background: tint-color($value, $btn-hover-bg-tint-amount), $hover-background: functions.tint-color($value, variables.$btn-hover-bg-tint-amount),
$hover-border: tint-color($value, $btn-hover-border-tint-amount), $hover-border: functions.tint-color($value, variables.$btn-hover-border-tint-amount),
$active-background: tint-color($value, $btn-active-bg-tint-amount), $active-background: functions.tint-color($value, variables.$btn-active-bg-tint-amount),
$active-border: tint-color($value, $btn-active-border-tint-amount) $active-border: functions.tint-color($value, variables.$btn-active-border-tint-amount)
); );
} @else { } @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} { .btn-outline-#{$color} {
@include button-outline-variant($value); @include buttons.button-outline-variant($value);
} }
} }
// scss-docs-end btn-variant-loops // scss-docs-end btn-variant-loops
@ -168,35 +177,35 @@
// Make a button look and behave like a link // Make a button look and behave like a link
.btn-link { .btn-link {
--#{$prefix}btn-font-weight: #{$font-weight-normal}; --#{variables.$prefix}btn-font-weight: #{variables.$font-weight-normal};
--#{$prefix}btn-color: #{$btn-link-color}; --#{variables.$prefix}btn-color: #{variables.$btn-link-color};
--#{$prefix}btn-bg: transparent; --#{variables.$prefix}btn-bg: transparent;
--#{$prefix}btn-border-color: transparent; --#{variables.$prefix}btn-border-color: transparent;
--#{$prefix}btn-hover-color: #{$btn-link-hover-color}; --#{variables.$prefix}btn-hover-color: #{variables.$btn-link-hover-color};
--#{$prefix}btn-hover-border-color: transparent; --#{variables.$prefix}btn-hover-border-color: transparent;
--#{$prefix}btn-active-color: #{$btn-link-hover-color}; --#{variables.$prefix}btn-active-color: #{variables.$btn-link-hover-color};
--#{$prefix}btn-active-border-color: transparent; --#{variables.$prefix}btn-active-border-color: transparent;
--#{$prefix}btn-disabled-color: #{$btn-link-disabled-color}; --#{variables.$prefix}btn-disabled-color: #{variables.$btn-link-disabled-color};
--#{$prefix}btn-disabled-border-color: transparent; --#{variables.$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 --#{variables.$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-focus-shadow-rgb: #{variables.$btn-link-focus-shadow-rgb};
text-decoration: $link-decoration; text-decoration: variables.$link-decoration;
@if $enable-gradients { @if variables.$enable-gradients {
background-image: none; background-image: none;
} }
&:hover, &:hover,
&:focus-visible { &:focus-visible {
text-decoration: $link-hover-decoration; text-decoration: variables.$link-hover-decoration;
} }
&:focus-visible { &:focus-visible {
color: var(--#{$prefix}btn-color); color: var(--#{variables.$prefix}btn-color);
} }
&:hover { &:hover {
color: var(--#{$prefix}btn-hover-color); color: var(--#{variables.$prefix}btn-hover-color);
} }
// No need for an active state here // No need for an active state here
@ -208,9 +217,9 @@
// //
.btn-lg { .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 { .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 // Base styles
// //
.card { .card {
// scss-docs-start card-css-vars // scss-docs-start card-css-vars
--#{$prefix}card-spacer-y: #{$card-spacer-y}; --#{variables.$prefix}card-spacer-y: #{variables.$card-spacer-y};
--#{$prefix}card-spacer-x: #{$card-spacer-x}; --#{variables.$prefix}card-spacer-x: #{variables.$card-spacer-x};
--#{$prefix}card-title-spacer-y: #{$card-title-spacer-y}; --#{variables.$prefix}card-title-spacer-y: #{variables.$card-title-spacer-y};
--#{$prefix}card-title-color: #{$card-title-color}; --#{variables.$prefix}card-title-color: #{variables.$card-title-color};
--#{$prefix}card-subtitle-color: #{$card-subtitle-color}; --#{variables.$prefix}card-subtitle-color: #{variables.$card-subtitle-color};
--#{$prefix}card-border-width: #{$card-border-width}; --#{variables.$prefix}card-border-width: #{variables.$card-border-width};
--#{$prefix}card-border-color: #{$card-border-color}; --#{variables.$prefix}card-border-color: #{variables.$card-border-color};
--#{$prefix}card-border-radius: #{$card-border-radius}; --#{variables.$prefix}card-border-radius: #{variables.$card-border-radius};
--#{$prefix}card-box-shadow: #{$card-box-shadow}; --#{variables.$prefix}card-box-shadow: #{variables.$card-box-shadow};
--#{$prefix}card-inner-border-radius: #{$card-inner-border-radius}; --#{variables.$prefix}card-inner-border-radius: #{variables.$card-inner-border-radius};
--#{$prefix}card-cap-padding-y: #{$card-cap-padding-y}; --#{variables.$prefix}card-cap-padding-y: #{variables.$card-cap-padding-y};
--#{$prefix}card-cap-padding-x: #{$card-cap-padding-x}; --#{variables.$prefix}card-cap-padding-x: #{variables.$card-cap-padding-x};
--#{$prefix}card-cap-bg: #{$card-cap-bg}; --#{variables.$prefix}card-cap-bg: #{variables.$card-cap-bg};
--#{$prefix}card-cap-color: #{$card-cap-color}; --#{variables.$prefix}card-cap-color: #{variables.$card-cap-color};
--#{$prefix}card-height: #{$card-height}; --#{variables.$prefix}card-height: #{variables.$card-height};
--#{$prefix}card-color: #{$card-color}; --#{variables.$prefix}card-color: #{variables.$card-color};
--#{$prefix}card-bg: #{$card-bg}; --#{variables.$prefix}card-bg: #{variables.$card-bg};
--#{$prefix}card-img-overlay-padding: #{$card-img-overlay-padding}; --#{variables.$prefix}card-img-overlay-padding: #{variables.$card-img-overlay-padding};
--#{$prefix}card-group-margin: #{$card-group-margin}; --#{variables.$prefix}card-group-margin: #{variables.$card-group-margin};
// scss-docs-end card-css-vars // scss-docs-end card-css-vars
position: relative; position: relative;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
min-width: 0; // See https://github.com/twbs/bootstrap/pull/22740#issuecomment-305868106 min-width: 0; // See https://github.com/twbs/bootstrap/pull/22740#issuecomment-305868106
height: var(--#{$prefix}card-height); height: var(--#{variables.$prefix}card-height);
color: var(--#{$prefix}body-color); color: var(--#{variables.$prefix}body-color);
word-wrap: break-word; word-wrap: break-word;
background-color: var(--#{$prefix}card-bg); background-color: var(--#{variables.$prefix}card-bg);
background-clip: border-box; background-clip: border-box;
border: var(--#{$prefix}card-border-width) solid var(--#{$prefix}card-border-color); border: var(--#{variables.$prefix}card-border-width) solid var(--#{variables.$prefix}card-border-color);
@include border-radius(var(--#{$prefix}card-border-radius)); @include border-radius.border-radius(var(--#{variables.$prefix}card-border-radius));
@include box-shadow(var(--#{$prefix}card-box-shadow)); @include box-shadow.box-shadow(var(--#{variables.$prefix}card-box-shadow));
> hr { > hr {
margin-right: 0; margin-right: 0;
@ -49,12 +54,12 @@
&:first-child { &:first-child {
border-top-width: 0; 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 { &:last-child {
border-bottom-width: 0; 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 // 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. // as much space as possible, ensuring footers are aligned to the bottom.
flex: 1 1 auto; flex: 1 1 auto;
padding: var(--#{$prefix}card-spacer-y) var(--#{$prefix}card-spacer-x); padding: var(--#{variables.$prefix}card-spacer-y) var(--#{variables.$prefix}card-spacer-x);
color: var(--#{$prefix}card-color); color: var(--#{variables.$prefix}card-color);
} }
.card-title { .card-title {
margin-bottom: var(--#{$prefix}card-title-spacer-y); margin-bottom: var(--#{variables.$prefix}card-title-spacer-y);
color: var(--#{$prefix}card-title-color); color: var(--#{variables.$prefix}card-title-color);
} }
.card-subtitle { .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; margin-bottom: 0;
color: var(--#{$prefix}card-subtitle-color); color: var(--#{variables.$prefix}card-subtitle-color);
} }
.card-text:last-child { .card-text:last-child {
@ -91,11 +96,11 @@
.card-link { .card-link {
&:hover { &:hover {
text-decoration: if($link-hover-decoration == underline, none, null); text-decoration: if(variables.$link-hover-decoration == underline, none, null);
} }
+ .card-link { + .card-link {
margin-left: var(--#{$prefix}card-spacer-x); margin-left: var(--#{variables.$prefix}card-spacer-x);
} }
} }
@ -104,25 +109,25 @@
// //
.card-header { .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> margin-bottom: 0; // Removes the default margin-bottom of <hN>
color: var(--#{$prefix}card-cap-color); color: var(--#{variables.$prefix}card-cap-color);
background-color: var(--#{$prefix}card-cap-bg); background-color: var(--#{variables.$prefix}card-cap-bg);
border-bottom: var(--#{$prefix}card-border-width) solid var(--#{$prefix}card-border-color); border-bottom: var(--#{variables.$prefix}card-border-width) solid var(--#{variables.$prefix}card-border-color);
&:first-child { &: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 { .card-footer {
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);
color: var(--#{$prefix}card-cap-color); color: var(--#{variables.$prefix}card-cap-color);
background-color: var(--#{$prefix}card-cap-bg); background-color: var(--#{variables.$prefix}card-cap-bg);
border-top: var(--#{$prefix}card-border-width) solid var(--#{$prefix}card-border-color); border-top: var(--#{variables.$prefix}card-border-width) solid var(--#{variables.$prefix}card-border-color);
&:last-child { &: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 { .card-header-tabs {
margin-right: 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(--#{$prefix}card-cap-padding-y)); // 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(--#{$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
border-bottom: 0; border-bottom: 0;
.nav-link.active { .nav-link.active {
background-color: var(--#{$prefix}card-bg); background-color: var(--#{variables.$prefix}card-bg);
border-bottom-color: var(--#{$prefix}card-bg); border-bottom-color: var(--#{variables.$prefix}card-bg);
} }
} }
.card-header-pills { .card-header-pills {
margin-right: 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(--#{$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 // Card image
@ -155,8 +160,8 @@
right: 0; right: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;
padding: var(--#{$prefix}card-img-overlay-padding); padding: var(--#{variables.$prefix}card-img-overlay-padding);
@include border-radius(var(--#{$prefix}card-inner-border-radius)); @include border-radius.border-radius(var(--#{variables.$prefix}card-inner-border-radius));
} }
.card-img, .card-img,
@ -167,12 +172,12 @@
.card-img, .card-img,
.card-img-top { .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,
.card-img-bottom { .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` // The child selector allows nested `.card` within `.card-group`
// to display properly. // to display properly.
> .card { > .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; display: flex;
flex-flow: row wrap; flex-flow: row wrap;
// The child selector allows nested `.card` within `.card-group` // The child selector allows nested `.card` within `.card-group`
@ -203,9 +208,9 @@
} }
// Handle rounded corners // Handle rounded corners
@if $enable-rounded { @if variables.$enable-rounded {
&:not(:last-child) { &:not(:last-child) {
@include border-end-radius(0); @include border-radius.border-end-radius(0);
.card-img-top, .card-img-top,
.card-header { .card-header {
@ -220,7 +225,7 @@
} }
&:not(:first-child) { &:not(:first-child) {
@include border-start-radius(0); @include border-radius.border-start-radius(0);
.card-img-top, .card-img-top,
.card-header { .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: // Notes on the classes:
// //
// 1. .carousel.pointer-event should ideally be pan-y (to allow for users to scroll vertically) // 1. .carousel.pointer-event should ideally be pan-y (to allow for users to scroll vertically)
@ -23,7 +29,7 @@
position: relative; position: relative;
width: 100%; width: 100%;
overflow: hidden; overflow: hidden;
@include clearfix(); @include clearfix.clearfix();
} }
.carousel-item { .carousel-item {
@ -33,7 +39,7 @@
width: 100%; width: 100%;
margin-right: -100%; margin-right: -100%;
backface-visibility: hidden; backface-visibility: hidden;
@include transition($carousel-transition); @include transition.transition(variables.$carousel-transition);
} }
.carousel-item.active, .carousel-item.active,
@ -75,7 +81,7 @@
.active.carousel-item-end { .active.carousel-item-end {
z-index: 0; z-index: 0;
opacity: 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 display: flex; // 1. allow flex styles
align-items: center; // 2. vertically center contents align-items: center; // 2. vertically center contents
justify-content: center; // 3. horizontally center contents justify-content: center; // 3. horizontally center contents
width: $carousel-control-width; width: variables.$carousel-control-width;
padding: 0; padding: 0;
color: $carousel-control-color; color: variables.$carousel-control-color;
text-align: center; text-align: center;
background: none; background: none;
border: 0; border: 0;
opacity: $carousel-control-opacity; opacity: variables.$carousel-control-opacity;
@include transition($carousel-control-transition); @include transition.transition(variables.$carousel-control-transition);
// Hover/focus state // Hover/focus state
&:hover, &:hover,
&:focus { &:focus {
color: $carousel-control-color; color: variables.$carousel-control-color;
text-decoration: none; text-decoration: none;
outline: 0; outline: 0;
opacity: $carousel-control-hover-opacity; opacity: variables.$carousel-control-hover-opacity;
} }
} }
.carousel-control-prev { .carousel-control-prev {
left: 0; 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 { .carousel-control-next {
right: 0; 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 // Icons for within
.carousel-control-prev-icon, .carousel-control-prev-icon,
.carousel-control-next-icon { .carousel-control-next-icon {
display: inline-block; display: inline-block;
width: $carousel-control-icon-width; width: variables.$carousel-control-icon-width;
height: $carousel-control-icon-width; height: variables.$carousel-control-icon-width;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: 50%; background-position: 50%;
background-size: 100% 100%; background-size: 100% 100%;
} }
.carousel-control-prev-icon { .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 { .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 // Optional indicator pips/controls
@ -154,32 +160,32 @@
justify-content: center; justify-content: center;
padding: 0; padding: 0;
// Use the .carousel-control's width as margin so we don't overlay those // 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-bottom: 1rem;
margin-left: $carousel-control-width; margin-left: variables.$carousel-control-width;
[data-bs-target] { [data-bs-target] {
box-sizing: content-box; box-sizing: content-box;
flex: 0 1 auto; flex: 0 1 auto;
width: $carousel-indicator-width; width: variables.$carousel-indicator-width;
height: $carousel-indicator-height; height: variables.$carousel-indicator-height;
padding: 0; padding: 0;
margin-right: $carousel-indicator-spacer; margin-right: variables.$carousel-indicator-spacer;
margin-left: $carousel-indicator-spacer; margin-left: variables.$carousel-indicator-spacer;
text-indent: -999px; text-indent: -999px;
cursor: pointer; cursor: pointer;
background-color: $carousel-indicator-active-bg; background-color: variables.$carousel-indicator-active-bg;
background-clip: padding-box; background-clip: padding-box;
border: 0; border: 0;
// Use transparent borders to increase the hit area by 10px on top and bottom. // Use transparent borders to increase the hit area by 10px on top and bottom.
border-top: $carousel-indicator-hit-area-height solid transparent; border-top: variables.$carousel-indicator-hit-area-height solid transparent;
border-bottom: $carousel-indicator-hit-area-height solid transparent; border-bottom: variables.$carousel-indicator-hit-area-height solid transparent;
opacity: $carousel-indicator-opacity; opacity: variables.$carousel-indicator-opacity;
@include transition($carousel-indicator-transition); @include transition.transition(variables.$carousel-indicator-transition);
} }
.active { .active {
opacity: $carousel-indicator-active-opacity; opacity: variables.$carousel-indicator-active-opacity;
} }
} }
@ -190,12 +196,12 @@
.carousel-caption { .carousel-caption {
position: absolute; position: absolute;
right: (100% - $carousel-caption-width) * .5; right: (100% - variables.$carousel-caption-width) * .5;
bottom: $carousel-caption-spacer; bottom: variables.$carousel-caption-spacer;
left: (100% - $carousel-caption-width) * .5; left: (100% - variables.$carousel-caption-width) * .5;
padding-top: $carousel-caption-padding-y; padding-top: variables.$carousel-caption-padding-y;
padding-bottom: $carousel-caption-padding-y; padding-bottom: variables.$carousel-caption-padding-y;
color: $carousel-caption-color; color: variables.$carousel-caption-color;
text-align: center; text-align: center;
} }
@ -204,15 +210,15 @@
@mixin carousel-dark() { @mixin carousel-dark() {
.carousel-control-prev-icon, .carousel-control-prev-icon,
.carousel-control-next-icon { .carousel-control-next-icon {
filter: $carousel-dark-control-icon-filter; filter: variables.$carousel-dark-control-icon-filter;
} }
.carousel-indicators [data-bs-target] { .carousel-indicators [data-bs-target] {
background-color: $carousel-dark-indicator-active-bg; background-color: variables.$carousel-dark-indicator-active-bg;
} }
.carousel-caption { .carousel-caption {
color: $carousel-dark-caption-color; color: variables.$carousel-dark-caption-color;
} }
} }
@ -220,9 +226,9 @@
@include carousel-dark(); @include carousel-dark();
} }
@if $enable-dark-mode { @if variables.$enable-dark-mode {
@include color-mode(dark) { @include color-mode.color-mode(dark) {
@if $color-mode-type == "media-query" { @if variables.$color-mode-type == "media-query" {
.carousel { .carousel {
@include carousel-dark(); @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. // Transparent background and border properties included for button version.
// iOS requires the button element instead of an anchor tag. // iOS requires the button element instead of an anchor tag.
// If you want the anchor version, it requires `href="#"`. // If you want the anchor version, it requires `href="#"`.
@ -5,57 +10,57 @@
.btn-close { .btn-close {
// scss-docs-start close-css-vars // scss-docs-start close-css-vars
--#{$prefix}btn-close-color: #{$btn-close-color}; --#{variables.$prefix}btn-close-color: #{variables.$btn-close-color};
--#{$prefix}btn-close-bg: #{ escape-svg($btn-close-bg) }; --#{variables.$prefix}btn-close-bg: #{ functions.escape-svg(variables.$btn-close-bg) };
--#{$prefix}btn-close-opacity: #{$btn-close-opacity}; --#{variables.$prefix}btn-close-opacity: #{variables.$btn-close-opacity};
--#{$prefix}btn-close-hover-opacity: #{$btn-close-hover-opacity}; --#{variables.$prefix}btn-close-hover-opacity: #{variables.$btn-close-hover-opacity};
--#{$prefix}btn-close-focus-shadow: #{$btn-close-focus-shadow}; --#{variables.$prefix}btn-close-focus-shadow: #{variables.$btn-close-focus-shadow};
--#{$prefix}btn-close-focus-opacity: #{$btn-close-focus-opacity}; --#{variables.$prefix}btn-close-focus-opacity: #{variables.$btn-close-focus-opacity};
--#{$prefix}btn-close-disabled-opacity: #{$btn-close-disabled-opacity}; --#{variables.$prefix}btn-close-disabled-opacity: #{variables.$btn-close-disabled-opacity};
--#{$prefix}btn-close-white-filter: #{$btn-close-white-filter}; --#{variables.$prefix}btn-close-white-filter: #{variables.$btn-close-white-filter};
// scss-docs-end close-css-vars // scss-docs-end close-css-vars
box-sizing: content-box; box-sizing: content-box;
width: $btn-close-width; width: variables.$btn-close-width;
height: $btn-close-height; height: variables.$btn-close-height;
padding: $btn-close-padding-y $btn-close-padding-x; padding: variables.$btn-close-padding-y variables.$btn-close-padding-x;
color: var(--#{$prefix}btn-close-color); color: var(--#{variables.$prefix}btn-close-color);
background: transparent var(--#{$prefix}btn-close-bg) center / $btn-close-width auto no-repeat; // include transparent for button elements 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 border: 0; // for button elements
@include border-radius(); @include border-radius.border-radius();
opacity: var(--#{$prefix}btn-close-opacity); opacity: var(--#{variables.$prefix}btn-close-opacity);
// Override <a>'s hover style // Override <a>'s hover style
&:hover { &:hover {
color: var(--#{$prefix}btn-close-color); color: var(--#{variables.$prefix}btn-close-color);
text-decoration: none; text-decoration: none;
opacity: var(--#{$prefix}btn-close-hover-opacity); opacity: var(--#{variables.$prefix}btn-close-hover-opacity);
} }
&:focus { &:focus {
outline: 0; outline: 0;
box-shadow: var(--#{$prefix}btn-close-focus-shadow); box-shadow: var(--#{variables.$prefix}btn-close-focus-shadow);
opacity: var(--#{$prefix}btn-close-focus-opacity); opacity: var(--#{variables.$prefix}btn-close-focus-opacity);
} }
&:disabled, &:disabled,
&.disabled { &.disabled {
pointer-events: none; pointer-events: none;
user-select: none; user-select: none;
opacity: var(--#{$prefix}btn-close-disabled-opacity); opacity: var(--#{variables.$prefix}btn-close-disabled-opacity);
} }
} }
@mixin btn-close-white() { @mixin btn-close-white() {
filter: var(--#{$prefix}btn-close-white-filter); filter: var(--#{variables.$prefix}btn-close-white-filter);
} }
.btn-close-white { .btn-close-white {
@include btn-close-white(); @include btn-close-white();
} }
@if $enable-dark-mode { @if variables.$enable-dark-mode {
@include color-mode(dark) { @include color-mode.color-mode(dark) {
.btn-close { .btn-close {
@include btn-close-white(); @include btn-close-white();
} }

16
scss/_containers.scss
View File

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

18
scss/_forms.scss
View File

@ -1,9 +1,9 @@
@import "forms/labels"; @use "forms/labels";
@import "forms/form-text"; @use "forms/form-text";
@import "forms/form-control"; @use "forms/form-control";
@import "forms/form-select"; @use "forms/form-select";
@import "forms/form-check"; @use "forms/form-check";
@import "forms/form-range"; @use "forms/form-range";
@import "forms/floating-labels"; @use "forms/floating-labels";
@import "forms/input-group"; @use "forms/input-group";
@import "forms/validation"; @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 // Bootstrap functions
// //
// Utility mixins and functions for evaluating source code across our variables, maps, and mixins. // Utility mixins and functions for evaluating source code across our variables, maps, and mixins.
// Ascending // Ascending
// Used to evaluate Sass maps like our grid breakpoints. // 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-key: null;
$prev-num: null; $prev-num: null;
@each $key, $num in $map { @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 // 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}' !"; @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 { } @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}' !"; @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 // Starts at zero
// Used to ensure the min-width of the lowest breakpoint starts at 0. // Used to ensure the min-width of the lowest breakpoint starts at 0.
@mixin _assert-starts-at-zero($map, $map-name: "$grid-breakpoints") { @mixin assert-starts-at-zero($map, $map-name: "$grid-breakpoints") {
@if length($map) > 0 { @if list.length($map) > 0 {
$values: map-values($map); $values: map.values($map);
$first-value: nth($values, 1); $first-value: list.nth($values, 1);
@if $first-value != 0 { @if $first-value != 0 {
@warn "First breakpoint in #{$map-name} must start at 0, but starts at #{$first-value}."; @warn "First breakpoint in #{$map-name} must start at 0, but starts at #{$first-value}.";
} }
@ -34,17 +42,17 @@
// Colors // Colors
@function to-rgb($value) { @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 // stylelint-disable scss/dollar-variable-pattern
@function rgba-css-var($identifier, $target) { @function rgba-css-var($identifier, $target) {
@if $identifier == "body" and $target == "bg" { @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" { } @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 { } @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 // allow to pass the $key and $value of the map as an function argument
$_args: (); $_args: ();
@each $arg in $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; @return $_map;
@ -68,7 +76,7 @@
@function varify($list) { @function varify($list) {
$result: null; $result: null;
@each $entry in $list { @each $entry in $list {
$result: append($result, var(--#{$prefix}#{$entry}), space); $result: list.append($result, var(--#{variables.$prefix}#{$entry}), space);
} }
@return $result; @return $result;
} }
@ -79,7 +87,7 @@
$result: (); $result: ();
@each $key, $value in $map { @each $key, $value in $map {
@if $key != 0 { @if $key != 0 {
$result: map-merge($result, ("n" + $key: (-$value))); $result: map.merge($result, ("n" + $key: (-$value)));
} }
} }
@return $result; @return $result;
@ -89,8 +97,8 @@
@function map-get-multiple($map, $values) { @function map-get-multiple($map, $values) {
$result: (); $result: ();
@each $key, $value in $map { @each $key, $value in $map {
@if (index($values, $key) != null) { @if (list.index($values, $key) != null) {
$result: map-merge($result, ($key: $value)); $result: map.merge($result, ($key: $value));
} }
} }
@return $result; @return $result;
@ -101,7 +109,7 @@
$merged-maps: (); $merged-maps: ();
@each $map in $maps { @each $map in $maps {
$merged-maps: map-merge($merged-maps, $map); $merged-maps: map.merge($merged-maps, $map);
} }
@return $merged-maps; @return $merged-maps;
} }
@ -115,10 +123,10 @@
// @param {String} $replace ('') - New value // @param {String} $replace ('') - New value
// @return {String} - Updated string // @return {String} - Updated string
@function str-replace($string, $search, $replace: "") { @function str-replace($string, $search, $replace: "") {
$index: str-index($string, $search); $index: string.index($string, $search);
@if $index { @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; @return $string;
@ -129,11 +137,11 @@
// Requires the use of quotes around data URIs. // Requires the use of quotes around data URIs.
@function escape-svg($string) { @function escape-svg($string) {
@if str-index($string, "data:image/svg+xml") { @if string.index($string, "data:image/svg+xml") {
@each $char, $encoded in $escaped-characters { @each $char, $encoded in variables.$escaped-characters {
// Do not escape the url brackets // Do not escape the url brackets
@if str-index($string, "url(") == 1 { @if string.index($string, "url(") == 1 {
$string: url("#{str-replace(str-slice($string, 6, -3), $char, $encoded)}"); $string: url("#{str-replace(string.slice($string, 6, -3), $char, $encoded)}");
} @else { } @else {
$string: str-replace($string, $char, $encoded); $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; $_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) { @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: 0;
$max-ratio-color: null; $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; @return $max-ratio-color;
} }
@function contrast-ratio($background, $foreground: $color-contrast-light) { @function contrast-ratio($background, $foreground: variables.$color-contrast-light) {
$l1: luminance($background); $l1: luminance($background);
$l2: luminance(opaque($background, $foreground)); $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 // See https://www.w3.org/TR/WCAG/#dfn-contrast-ratio
@function luminance($color) { @function luminance($color) {
$rgb: ( $rgb: (
"r": red($color), "r": color.red($color),
"g": green($color), "g": color.green($color),
"b": blue($color) "b": color.blue($color)
); );
@each $name, $value in $rgb { @each $name, $value in $rgb {
$value: if(divide($value, 255) < .04045, divide(divide($value, 255), 12.92), nth($_luminance-list, $value + 1)); $value: if(divide($value, 255) < .04045, divide(divide($value, 255), 12.92), list.nth($_luminance-list, $value + 1));
$rgb: map-merge($rgb, ($name: $value)); $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 // Return opaque color
// opaque(#fff, rgba(0, 0, 0, .5)) => #808080 // opaque(#fff, rgba(0, 0, 0, .5)) => #808080
@function opaque($background, $foreground) { @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 // scss-docs-start color-functions
// Tint a color: mix a color with white // Tint a color: mix a color with white
@function tint-color($color, $weight) { @function tint-color($color, $weight) {
@return mix(white, $color, $weight); @return color.mix(white, $color, $weight);
} }
// Shade a color: mix a color with black // Shade a color: mix a color with black
@function shade-color($color, $weight) { @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 // 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) { @function divide($dividend, $divisor, $precision: 10) {
$sign: if($dividend > 0 and $divisor > 0 or $dividend < 0 and $divisor < 0, 1, -1); $sign: if($dividend > 0 and $divisor > 0 or $dividend < 0 and $divisor < 0, 1, -1);
$dividend: abs($dividend); $dividend: math.abs($dividend);
$divisor: abs($divisor); $divisor: math.abs($divisor);
@if $dividend == 0 { @if $dividend == 0 {
@return 0; @return 0;
} }
@ -287,16 +297,16 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003
} }
} }
$result: $result * $factor * $sign; $result: $result * $factor * $sign;
$dividend-unit: unit($dividend); $dividend-unit: math.unit($dividend);
$divisor-unit: unit($divisor); $divisor-unit: math.unit($divisor);
$unit-map: ( $unit-map: (
"px": 1px, "px": 1px,
"rem": 1rem, "rem": 1rem,
"em": 1em, "em": 1em,
"%": 1% "%": 1%
); );
@if ($dividend-unit != $divisor-unit and map-has-key($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); $result: $result * map.get($unit-map, $dividend-unit);
} }
@return $result; @return $result;
} }

27
scss/_grid.scss
View File

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

24
scss/_helpers.scss
View File

@ -1,12 +1,12 @@
@import "helpers/clearfix"; @use "helpers/clearfix";
@import "helpers/color-bg"; @use "helpers/color-bg";
@import "helpers/colored-links"; @use "helpers/colored-links";
@import "helpers/focus-ring"; @use "helpers/focus-ring";
@import "helpers/icon-link"; @use "helpers/icon-link";
@import "helpers/ratio"; @use "helpers/ratio";
@import "helpers/position"; @use "helpers/position";
@import "helpers/stacks"; @use "helpers/stacks";
@import "helpers/visually-hidden"; @use "helpers/visually-hidden";
@import "helpers/stretched-link"; @use "helpers/stretched-link";
@import "helpers/text-truncation"; @use "helpers/text-truncation";
@import "helpers/vr"; @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) // 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. // 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. // which weren't expecting the images within themselves to be involuntarily resized.
// See also https://github.com/twbs/bootstrap/issues/18178 // See also https://github.com/twbs/bootstrap/issues/18178
.img-fluid { .img-fluid {
@include img-fluid(); @include image.img-fluid();
} }
// Image thumbnails // Image thumbnails
.img-thumbnail { .img-thumbnail {
padding: $thumbnail-padding; padding: variables.$thumbnail-padding;
background-color: $thumbnail-bg; background-color: variables.$thumbnail-bg;
border: $thumbnail-border-width solid $thumbnail-border-color; border: variables.$thumbnail-border-width solid variables.$thumbnail-border-color;
@include border-radius($thumbnail-border-radius); @include border-radius.border-radius(variables.$thumbnail-border-radius);
@include box-shadow($thumbnail-box-shadow); @include box-shadow.box-shadow(variables.$thumbnail-box-shadow);
// Keep them at most 100% wide // Keep them at most 100% wide
@include img-fluid(); @include image.img-fluid();
} }
// //
@ -32,11 +38,11 @@
} }
.figure-img { .figure-img {
margin-bottom: $spacer * .5; margin-bottom: variables.$spacer * .5;
line-height: 1; line-height: 1;
} }
.figure-caption { .figure-caption {
@include font-size($figure-caption-font-size); @include rfs.font-size(variables.$figure-caption-font-size);
color: $figure-caption-color; 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 // Base class
// //
// Easily usable on <ul>, <ol>, or <div>. // Easily usable on <ul>, <ol>, or <div>.
.list-group { .list-group {
// scss-docs-start list-group-css-vars // scss-docs-start list-group-css-vars
--#{$prefix}list-group-color: #{$list-group-color}; --#{variables.$prefix}list-group-color: #{variables.$list-group-color};
--#{$prefix}list-group-bg: #{$list-group-bg}; --#{variables.$prefix}list-group-bg: #{variables.$list-group-bg};
--#{$prefix}list-group-border-color: #{$list-group-border-color}; --#{variables.$prefix}list-group-border-color: #{variables.$list-group-border-color};
--#{$prefix}list-group-border-width: #{$list-group-border-width}; --#{variables.$prefix}list-group-border-width: #{variables.$list-group-border-width};
--#{$prefix}list-group-border-radius: #{$list-group-border-radius}; --#{variables.$prefix}list-group-border-radius: #{variables.$list-group-border-radius};
--#{$prefix}list-group-item-padding-x: #{$list-group-item-padding-x}; --#{variables.$prefix}list-group-item-padding-x: #{variables.$list-group-item-padding-x};
--#{$prefix}list-group-item-padding-y: #{$list-group-item-padding-y}; --#{variables.$prefix}list-group-item-padding-y: #{variables.$list-group-item-padding-y};
--#{$prefix}list-group-action-color: #{$list-group-action-color}; --#{variables.$prefix}list-group-action-color: #{variables.$list-group-action-color};
--#{$prefix}list-group-action-hover-color: #{$list-group-action-hover-color}; --#{variables.$prefix}list-group-action-hover-color: #{variables.$list-group-action-hover-color};
--#{$prefix}list-group-action-hover-bg: #{$list-group-hover-bg}; --#{variables.$prefix}list-group-action-hover-bg: #{variables.$list-group-hover-bg};
--#{$prefix}list-group-action-active-color: #{$list-group-action-active-color}; --#{variables.$prefix}list-group-action-active-color: #{variables.$list-group-action-active-color};
--#{$prefix}list-group-action-active-bg: #{$list-group-action-active-bg}; --#{variables.$prefix}list-group-action-active-bg: #{variables.$list-group-action-active-bg};
--#{$prefix}list-group-disabled-color: #{$list-group-disabled-color}; --#{variables.$prefix}list-group-disabled-color: #{variables.$list-group-disabled-color};
--#{$prefix}list-group-disabled-bg: #{$list-group-disabled-bg}; --#{variables.$prefix}list-group-disabled-bg: #{variables.$list-group-disabled-bg};
--#{$prefix}list-group-active-color: #{$list-group-active-color}; --#{variables.$prefix}list-group-active-color: #{variables.$list-group-active-color};
--#{$prefix}list-group-active-bg: #{$list-group-active-bg}; --#{variables.$prefix}list-group-active-bg: #{variables.$list-group-active-bg};
--#{$prefix}list-group-active-border-color: #{$list-group-active-border-color}; --#{variables.$prefix}list-group-active-border-color: #{variables.$list-group-active-border-color};
// scss-docs-end list-group-css-vars // scss-docs-end list-group-css-vars
display: flex; display: flex;
@ -29,7 +34,7 @@
// No need to set list-style: none; since .list-group-item is block level // No need to set list-style: none; since .list-group-item is block level
padding-left: 0; // reset padding because ul and ol padding-left: 0; // reset padding because ul and ol
margin-bottom: 0; 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 { .list-group-numbered {
@ -50,21 +55,21 @@
.list-group-item-action { .list-group-item-action {
width: 100%; // For `<button>`s (anchors become 100% by default though) 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) text-align: inherit; // For `<button>`s (anchors inherit)
// Hover state // Hover state
&:hover, &:hover,
&:focus { &:focus {
z-index: 1; // Place hover/focus items above their siblings for proper border styling 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; text-decoration: none;
background-color: var(--#{$prefix}list-group-action-hover-bg); background-color: var(--#{variables.$prefix}list-group-action-hover-bg);
} }
&:active { &:active {
color: var(--#{$prefix}list-group-action-active-color); color: var(--#{variables.$prefix}list-group-action-active-color);
background-color: var(--#{$prefix}list-group-action-active-bg); background-color: var(--#{variables.$prefix}list-group-action-active-bg);
} }
} }
@ -75,33 +80,33 @@
.list-group-item { .list-group-item {
position: relative; position: relative;
display: block; display: block;
padding: var(--#{$prefix}list-group-item-padding-y) var(--#{$prefix}list-group-item-padding-x); padding: var(--#{variables.$prefix}list-group-item-padding-y) var(--#{variables.$prefix}list-group-item-padding-x);
color: var(--#{$prefix}list-group-color); color: var(--#{variables.$prefix}list-group-color);
text-decoration: if($link-decoration == none, null, none); text-decoration: if(variables.$link-decoration == none, null, none);
background-color: var(--#{$prefix}list-group-bg); background-color: var(--#{variables.$prefix}list-group-bg);
border: var(--#{$prefix}list-group-border-width) solid var(--#{$prefix}list-group-border-color); border: var(--#{variables.$prefix}list-group-border-width) solid var(--#{variables.$prefix}list-group-border-color);
&:first-child { &:first-child {
@include border-top-radius(inherit); @include border-radius.border-top-radius(inherit);
} }
&:last-child { &:last-child {
@include border-bottom-radius(inherit); @include border-radius.border-bottom-radius(inherit);
} }
&.disabled, &.disabled,
&:disabled { &:disabled {
color: var(--#{$prefix}list-group-disabled-color); color: var(--#{variables.$prefix}list-group-disabled-color);
pointer-events: none; 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 // Include both here for `<a>`s and `<button>`s
&.active { &.active {
z-index: 2; // Place active items above their siblings for proper border styling z-index: 2; // Place active items above their siblings for proper border styling
color: var(--#{$prefix}list-group-active-color); color: var(--#{variables.$prefix}list-group-active-color);
background-color: var(--#{$prefix}list-group-active-bg); background-color: var(--#{variables.$prefix}list-group-active-bg);
border-color: var(--#{$prefix}list-group-active-border-color); border-color: var(--#{variables.$prefix}list-group-active-border-color);
} }
// stylelint-disable-next-line scss/selector-no-redundant-nesting-selector // stylelint-disable-next-line scss/selector-no-redundant-nesting-selector
@ -109,8 +114,8 @@
border-top-width: 0; border-top-width: 0;
&.active { &.active {
margin-top: calc(-1 * var(--#{$prefix}list-group-border-width)); // stylelint-disable-line function-disallowed-list margin-top: calc(-1 * var(--#{variables.$prefix}list-group-border-width)); // stylelint-disable-line function-disallowed-list
border-top-width: var(--#{$prefix}list-group-border-width); 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. // Change the layout of list group items from vertical (default) to horizontal.
@each $breakpoint in map-keys($grid-breakpoints) { @each $breakpoint in map.keys(variables.$grid-breakpoints) {
@include media-breakpoint-up($breakpoint) { @include breakpoints.media-breakpoint-up($breakpoint) {
$infix: breakpoint-infix($breakpoint, $grid-breakpoints); $infix: breakpoints.breakpoint-infix($breakpoint, variables.$grid-breakpoints);
.list-group-horizontal#{$infix} { .list-group-horizontal#{$infix} {
flex-direction: row; flex-direction: row;
> .list-group-item { > .list-group-item {
&:first-child:not(:last-child) { &:first-child:not(:last-child) {
@include border-bottom-start-radius(var(--#{$prefix}list-group-border-radius)); @include border-radius.border-bottom-start-radius(var(--#{variables.$prefix}list-group-border-radius));
@include border-top-end-radius(0); @include border-radius.border-top-end-radius(0);
} }
&:last-child:not(:first-child) { &:last-child:not(:first-child) {
@include border-top-end-radius(var(--#{$prefix}list-group-border-radius)); @include border-radius.border-top-end-radius(var(--#{variables.$prefix}list-group-border-radius));
@include border-bottom-start-radius(0); @include border-radius.border-bottom-start-radius(0);
} }
&.active { &.active {
@ -142,12 +147,12 @@
} }
+ .list-group-item { + .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; border-left-width: 0;
&.active { &.active {
margin-left: calc(-1 * var(--#{$prefix}list-group-border-width)); // stylelint-disable-line function-disallowed-list margin-left: calc(-1 * var(--#{variables.$prefix}list-group-border-width)); // stylelint-disable-line function-disallowed-list
border-left-width: var(--#{$prefix}list-group-border-width); border-left-width: var(--#{variables.$prefix}list-group-border-width);
} }
} }
} }
@ -162,10 +167,10 @@
// useful within other components (e.g., cards). // useful within other components (e.g., cards).
.list-group-flush { .list-group-flush {
@include border-radius(0); @include border-radius.border-radius(0);
> .list-group-item { > .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 { &:last-child {
border-bottom-width: 0; border-bottom-width: 0;
@ -180,18 +185,18 @@
// Add modifier classes to change text and background color on individual items. // Add modifier classes to change text and background color on individual items.
// Organizationally, this must come after the `:hover` states. // 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} { .list-group-item-#{$state} {
--#{$prefix}list-group-color: var(--#{$prefix}#{$state}-text-emphasis); --#{variables.$prefix}list-group-color: var(--#{variables.$prefix}#{$state}-text-emphasis);
--#{$prefix}list-group-bg: var(--#{$prefix}#{$state}-bg-subtle); --#{variables.$prefix}list-group-bg: var(--#{variables.$prefix}#{$state}-bg-subtle);
--#{$prefix}list-group-border-color: var(--#{$prefix}#{$state}-border-subtle); --#{variables.$prefix}list-group-border-color: var(--#{variables.$prefix}#{$state}-border-subtle);
--#{$prefix}list-group-action-hover-color: var(--#{$prefix}emphasis-color); --#{variables.$prefix}list-group-action-hover-color: var(--#{variables.$prefix}emphasis-color);
--#{$prefix}list-group-action-hover-bg: var(--#{$prefix}#{$state}-border-subtle); --#{variables.$prefix}list-group-action-hover-bg: var(--#{variables.$prefix}#{$state}-border-subtle);
--#{$prefix}list-group-action-active-color: var(--#{$prefix}emphasis-color); --#{variables.$prefix}list-group-action-active-color: var(--#{variables.$prefix}emphasis-color);
--#{$prefix}list-group-action-active-bg: var(--#{$prefix}#{$state}-border-subtle); --#{variables.$prefix}list-group-action-active-bg: var(--#{variables.$prefix}#{$state}-border-subtle);
--#{$prefix}list-group-active-color: var(--#{$prefix}#{$state}-bg-subtle); --#{variables.$prefix}list-group-active-color: var(--#{variables.$prefix}#{$state}-bg-subtle);
--#{$prefix}list-group-active-bg: var(--#{$prefix}#{$state}-text-emphasis); --#{variables.$prefix}list-group-active-bg: var(--#{variables.$prefix}#{$state}-text-emphasis);
--#{$prefix}list-group-active-border-color: var(--#{$prefix}#{$state}-text-emphasis); --#{variables.$prefix}list-group-active-border-color: var(--#{variables.$prefix}#{$state}-text-emphasis);
} }
} }
// scss-docs-end list-group-modifiers // 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 // Re-assigned maps
// //
// Placed here so that others can override the default Sass maps and see automatic updates to utilities and more. // 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. // 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 // scss-docs-start utilities-colors
$utilities-colors: $theme-colors-rgb !default; $utilities-colors: $theme-colors-rgb !default;
// scss-docs-end utilities-colors // scss-docs-end utilities-colors
// scss-docs-start utilities-text-colors // scss-docs-start utilities-text-colors
$utilities-text: map-merge( $utilities-text: map.merge(
$utilities-colors, $utilities-colors,
( (
"black": to-rgb($black), "black": to-rgb($black),
@ -108,7 +114,7 @@ $utilities-text: map-merge(
"body": to-rgb($body-color) "body": to-rgb($body-color)
) )
) !default; ) !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: ( $utilities-text-emphasis-colors: (
"primary-emphasis": var(--#{$prefix}primary-text-emphasis), "primary-emphasis": var(--#{$prefix}primary-text-emphasis),
@ -123,7 +129,7 @@ $utilities-text-emphasis-colors: (
// scss-docs-end utilities-text-colors // scss-docs-end utilities-text-colors
// scss-docs-start utilities-bg-colors // scss-docs-start utilities-bg-colors
$utilities-bg: map-merge( $utilities-bg: map.merge(
$utilities-colors, $utilities-colors,
( (
"black": to-rgb($black), "black": to-rgb($black),
@ -131,7 +137,7 @@ $utilities-bg: map-merge(
"body": to-rgb($body-bg) "body": to-rgb($body-bg)
) )
) !default; ) !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: ( $utilities-bg-subtle: (
"primary-subtle": var(--#{$prefix}primary-bg-subtle), "primary-subtle": var(--#{$prefix}primary-bg-subtle),
@ -146,14 +152,14 @@ $utilities-bg-subtle: (
// scss-docs-end utilities-bg-colors // scss-docs-end utilities-bg-colors
// scss-docs-start utilities-border-colors // scss-docs-start utilities-border-colors
$utilities-border: map-merge( $utilities-border: map.merge(
$utilities-colors, $utilities-colors,
( (
"black": to-rgb($black), "black": to-rgb($black),
"white": to-rgb($white) "white": to-rgb($white)
) )
) !default; ) !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: ( $utilities-border-subtle: (
"primary-subtle": var(--#{$prefix}primary-border-subtle), "primary-subtle": var(--#{$prefix}primary-border-subtle),
@ -167,7 +173,7 @@ $utilities-border-subtle: (
) !default; ) !default;
// scss-docs-end utilities-border-colors // 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; $negative-spacers: if($enable-negative-margins, negativify-map($spacers), null) !default;

70
scss/_mixins.scss
View File

@ -1,42 +1,42 @@
// Toggles // // Toggles
// // //
// Used in conjunction with global variables to enable certain theme features. // // Used in conjunction with global variables to enable certain theme features.
// Vendor // // Vendor
@import "vendor/rfs"; // @use "vendor/rfs";
// Deprecate // // Deprecate
@import "mixins/deprecate"; // @use "mixins/deprecate";
// Helpers // // Helpers
@import "mixins/breakpoints"; // @use "mixins/breakpoints";
@import "mixins/color-mode"; // @use "mixins/color-mode";
@import "mixins/color-scheme"; // @use "mixins/color-scheme";
@import "mixins/image"; // @use "mixins/image";
@import "mixins/resize"; // @use "mixins/resize";
@import "mixins/visually-hidden"; // @use "mixins/visually-hidden";
@import "mixins/reset-text"; // @use "mixins/reset-text";
@import "mixins/text-truncate"; // @use "mixins/text-truncate";
// Utilities // // Utilities
@import "mixins/utilities"; // @use "mixins/utilities";
// Components // // Components
@import "mixins/backdrop"; // @use "mixins/backdrop";
@import "mixins/buttons"; // @use "mixins/buttons";
@import "mixins/caret"; // @use "mixins/caret";
@import "mixins/pagination"; // @use "mixins/pagination";
@import "mixins/lists"; // @use "mixins/lists";
@import "mixins/forms"; // @use "mixins/forms";
@import "mixins/table-variants"; // @use "mixins/table-variants";
// Skins // // Skins
@import "mixins/border-radius"; // @use "mixins/border-radius";
@import "mixins/box-shadow"; // @use "mixins/box-shadow";
@import "mixins/gradients"; // @use "mixins/gradients";
@import "mixins/transition"; // @use "mixins/transition";
// Layout // // Layout
@import "mixins/clearfix"; // @use "mixins/clearfix";
@import "mixins/container"; // @use "mixins/container";
@import "mixins/grid"; // @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 // stylelint-disable function-disallowed-list
// .modal-open - body class for killing the scroll // .modal-open - body class for killing the scroll
@ -9,33 +17,33 @@
// Container that the modal scrolls within // Container that the modal scrolls within
.modal { .modal {
// scss-docs-start modal-css-vars // scss-docs-start modal-css-vars
--#{$prefix}modal-zindex: #{$zindex-modal}; --#{variables.$prefix}modal-zindex: #{variables.$zindex-modal};
--#{$prefix}modal-width: #{$modal-md}; --#{variables.$prefix}modal-width: #{variables.$modal-md};
--#{$prefix}modal-padding: #{$modal-inner-padding}; --#{variables.$prefix}modal-padding: #{variables.$modal-inner-padding};
--#{$prefix}modal-margin: #{$modal-dialog-margin}; --#{variables.$prefix}modal-margin: #{variables.$modal-dialog-margin};
--#{$prefix}modal-color: #{$modal-content-color}; --#{variables.$prefix}modal-color: #{variables.$modal-content-color};
--#{$prefix}modal-bg: #{$modal-content-bg}; --#{variables.$prefix}modal-bg: #{variables.$modal-content-bg};
--#{$prefix}modal-border-color: #{$modal-content-border-color}; --#{variables.$prefix}modal-border-color: #{variables.$modal-content-border-color};
--#{$prefix}modal-border-width: #{$modal-content-border-width}; --#{variables.$prefix}modal-border-width: #{variables.$modal-content-border-width};
--#{$prefix}modal-border-radius: #{$modal-content-border-radius}; --#{variables.$prefix}modal-border-radius: #{variables.$modal-content-border-radius};
--#{$prefix}modal-box-shadow: #{$modal-content-box-shadow-xs}; --#{variables.$prefix}modal-box-shadow: #{variables.$modal-content-box-shadow-xs};
--#{$prefix}modal-inner-border-radius: #{$modal-content-inner-border-radius}; --#{variables.$prefix}modal-inner-border-radius: #{variables.$modal-content-inner-border-radius};
--#{$prefix}modal-header-padding-x: #{$modal-header-padding-x}; --#{variables.$prefix}modal-header-padding-x: #{variables.$modal-header-padding-x};
--#{$prefix}modal-header-padding-y: #{$modal-header-padding-y}; --#{variables.$prefix}modal-header-padding-y: #{variables.$modal-header-padding-y};
--#{$prefix}modal-header-padding: #{$modal-header-padding}; // Todo in v6: Split this padding into x and y --#{variables.$prefix}modal-header-padding: #{variables.$modal-header-padding}; // Todo in v6: Split this padding into x and y
--#{$prefix}modal-header-border-color: #{$modal-header-border-color}; --#{variables.$prefix}modal-header-border-color: #{variables.$modal-header-border-color};
--#{$prefix}modal-header-border-width: #{$modal-header-border-width}; --#{variables.$prefix}modal-header-border-width: #{variables.$modal-header-border-width};
--#{$prefix}modal-title-line-height: #{$modal-title-line-height}; --#{variables.$prefix}modal-title-line-height: #{variables.$modal-title-line-height};
--#{$prefix}modal-footer-gap: #{$modal-footer-margin-between}; --#{variables.$prefix}modal-footer-gap: #{variables.$modal-footer-margin-between};
--#{$prefix}modal-footer-bg: #{$modal-footer-bg}; --#{variables.$prefix}modal-footer-bg: #{variables.$modal-footer-bg};
--#{$prefix}modal-footer-border-color: #{$modal-footer-border-color}; --#{variables.$prefix}modal-footer-border-color: #{variables.$modal-footer-border-color};
--#{$prefix}modal-footer-border-width: #{$modal-footer-border-width}; --#{variables.$prefix}modal-footer-border-width: #{variables.$modal-footer-border-width};
// scss-docs-end modal-css-vars // scss-docs-end modal-css-vars
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
z-index: var(--#{$prefix}modal-zindex); z-index: var(--#{variables.$prefix}modal-zindex);
display: none; display: none;
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -53,27 +61,27 @@
.modal-dialog { .modal-dialog {
position: relative; position: relative;
width: auto; 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 // allow clicks to pass through for custom click handling to close modal
pointer-events: none; pointer-events: none;
// When fading in the modal, animate it to slide down // When fading in the modal, animate it to slide down
.modal.fade & { .modal.fade & {
transform: $modal-fade-transform; transform: variables.$modal-fade-transform;
@include transition($modal-transition); @include transition.transition(variables.$modal-transition);
} }
.modal.show & { .modal.show & {
transform: $modal-show-transform; transform: variables.$modal-show-transform;
} }
// When trying to close, animate focus to scale // When trying to close, animate focus to scale
.modal.modal-static & { .modal.modal-static & {
transform: $modal-scale-transform; transform: variables.$modal-scale-transform;
} }
} }
.modal-dialog-scrollable { .modal-dialog-scrollable {
height: calc(100% - var(--#{$prefix}modal-margin) * 2); height: calc(100% - var(--#{variables.$prefix}modal-margin) * 2);
.modal-content { .modal-content {
max-height: 100%; max-height: 100%;
@ -88,7 +96,7 @@
.modal-dialog-centered { .modal-dialog-centered {
display: flex; display: flex;
align-items: center; align-items: center;
min-height: calc(100% - var(--#{$prefix}modal-margin) * 2); min-height: calc(100% - var(--#{variables.$prefix}modal-margin) * 2);
} }
// Actual modal // Actual modal
@ -98,13 +106,13 @@
flex-direction: column; flex-direction: column;
width: 100%; // Ensure `.modal-content` extends the full width of the parent `.modal-dialog` width: 100%; // Ensure `.modal-content` extends the full width of the parent `.modal-dialog`
// counteract the pointer-events: none; in the .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; pointer-events: auto;
background-color: var(--#{$prefix}modal-bg); background-color: var(--#{variables.$prefix}modal-bg);
background-clip: padding-box; background-clip: padding-box;
border: var(--#{$prefix}modal-border-width) solid var(--#{$prefix}modal-border-color); border: var(--#{variables.$prefix}modal-border-width) solid var(--#{variables.$prefix}modal-border-color);
@include border-radius(var(--#{$prefix}modal-border-radius)); @include border-radius.border-radius(var(--#{variables.$prefix}modal-border-radius));
@include box-shadow(var(--#{$prefix}modal-box-shadow)); @include box-shadow.box-shadow(var(--#{variables.$prefix}modal-box-shadow));
// Remove focus outline from opened modal // Remove focus outline from opened modal
outline: 0; outline: 0;
} }
@ -112,12 +120,12 @@
// Modal background // Modal background
.modal-backdrop { .modal-backdrop {
// scss-docs-start modal-backdrop-css-vars // scss-docs-start modal-backdrop-css-vars
--#{$prefix}backdrop-zindex: #{$zindex-modal-backdrop}; --#{variables.$prefix}backdrop-zindex: #{variables.$zindex-modal-backdrop};
--#{$prefix}backdrop-bg: #{$modal-backdrop-bg}; --#{variables.$prefix}backdrop-bg: #{variables.$modal-backdrop-bg};
--#{$prefix}backdrop-opacity: #{$modal-backdrop-opacity}; --#{variables.$prefix}backdrop-opacity: #{variables.$modal-backdrop-opacity};
// scss-docs-end modal-backdrop-css-vars // 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 // Modal header
@ -126,20 +134,20 @@
display: flex; display: flex;
flex-shrink: 0; flex-shrink: 0;
align-items: center; align-items: center;
padding: var(--#{$prefix}modal-header-padding); padding: var(--#{variables.$prefix}modal-header-padding);
border-bottom: var(--#{$prefix}modal-header-border-width) solid var(--#{$prefix}modal-header-border-color); border-bottom: var(--#{variables.$prefix}modal-header-border-width) solid var(--#{variables.$prefix}modal-header-border-color);
@include border-top-radius(var(--#{$prefix}modal-inner-border-radius)); @include border-radius.border-top-radius(var(--#{variables.$prefix}modal-inner-border-radius));
.btn-close { .btn-close {
padding: calc(var(--#{$prefix}modal-header-padding-y) * .5) calc(var(--#{$prefix}modal-header-padding-x) * .5); padding: calc(var(--#{variables.$prefix}modal-header-padding-y) * .5) calc(var(--#{variables.$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; 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 // Title text within header
.modal-title { .modal-title {
margin-bottom: 0; margin-bottom: 0;
line-height: var(--#{$prefix}modal-title-line-height); line-height: var(--#{variables.$prefix}modal-title-line-height);
} }
// Modal body // Modal body
@ -149,7 +157,7 @@
// Enable `flex-grow: 1` so that the body take up as much space as possible // 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`. // when there should be a fixed height on `.modal-dialog`.
flex: 1 1 auto; flex: 1 1 auto;
padding: var(--#{$prefix}modal-padding); padding: var(--#{variables.$prefix}modal-padding);
} }
// Footer (for actions) // Footer (for actions)
@ -159,57 +167,57 @@
flex-wrap: wrap; flex-wrap: wrap;
align-items: center; // vertically center align-items: center; // vertically center
justify-content: flex-end; // Right align buttons with flex property because text-align doesn't work on flex items 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); padding: calc(var(--#{variables.$prefix}modal-padding) - var(--#{variables.$prefix}modal-footer-gap) * .5);
background-color: var(--#{$prefix}modal-footer-bg); background-color: var(--#{variables.$prefix}modal-footer-bg);
border-top: var(--#{$prefix}modal-footer-border-width) solid var(--#{$prefix}modal-footer-border-color); border-top: var(--#{variables.$prefix}modal-footer-border-width) solid var(--#{variables.$prefix}modal-footer-border-color);
@include border-bottom-radius(var(--#{$prefix}modal-inner-border-radius)); @include border-radius.border-bottom-radius(var(--#{variables.$prefix}modal-inner-border-radius));
// Place margin between footer elements // Place margin between footer elements
// This solution is far from ideal because of the universal selector usage, // This solution is far from ideal because of the universal selector usage,
// but is needed to fix https://github.com/twbs/bootstrap/issues/24800 // 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 // Scale up the modal
@include media-breakpoint-up(sm) { @include breakpoints.media-breakpoint-up(sm) {
.modal { .modal {
--#{$prefix}modal-margin: #{$modal-dialog-margin-y-sm-up}; --#{variables.$prefix}modal-margin: #{variables.$modal-dialog-margin-y-sm-up};
--#{$prefix}modal-box-shadow: #{$modal-content-box-shadow-sm-up}; --#{variables.$prefix}modal-box-shadow: #{variables.$modal-content-box-shadow-sm-up};
} }
// Automatically set modal's width for larger viewports // Automatically set modal's width for larger viewports
.modal-dialog { .modal-dialog {
max-width: var(--#{$prefix}modal-width); max-width: var(--#{variables.$prefix}modal-width);
margin-right: auto; margin-right: auto;
margin-left: auto; margin-left: auto;
} }
.modal-sm { .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-lg,
.modal-xl { .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 { .modal-xl {
--#{$prefix}modal-width: #{$modal-xl}; --#{variables.$prefix}modal-width: #{variables.$modal-xl};
} }
} }
// scss-docs-start modal-fullscreen-loop // scss-docs-start modal-fullscreen-loop
@each $breakpoint in map-keys($grid-breakpoints) { @each $breakpoint in map.keys(variables.$grid-breakpoints) {
$infix: breakpoint-infix($breakpoint, $grid-breakpoints); $infix: breakpoints.breakpoint-infix($breakpoint, variables.$grid-breakpoints);
$postfix: if($infix != "", $infix + "-down", ""); $postfix: if($infix != "", $infix + "-down", "");
@include media-breakpoint-down($breakpoint) { @include breakpoints.media-breakpoint-down($breakpoint) {
.modal-fullscreen#{$postfix} { .modal-fullscreen#{$postfix} {
width: 100vw; width: 100vw;
max-width: none; max-width: none;
@ -219,12 +227,12 @@
.modal-content { .modal-content {
height: 100%; height: 100%;
border: 0; border: 0;
@include border-radius(0); @include border-radius.border-radius(0);
} }
.modal-header, .modal-header,
.modal-footer { .modal-footer {
@include border-radius(0); @include border-radius.border-radius(0);
} }
.modal-body { .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 // Base class
// //
// Kickstart any navigation component with a set of style resets. Works with // Kickstart any navigation component with a set of style resets. Works with
@ -5,13 +11,13 @@
.nav { .nav {
// scss-docs-start nav-css-vars // scss-docs-start nav-css-vars
--#{$prefix}nav-link-padding-x: #{$nav-link-padding-x}; --#{variables.$prefix}nav-link-padding-x: #{variables.$nav-link-padding-x};
--#{$prefix}nav-link-padding-y: #{$nav-link-padding-y}; --#{variables.$prefix}nav-link-padding-y: #{variables.$nav-link-padding-y};
@include rfs($nav-link-font-size, --#{$prefix}nav-link-font-size); @include rfs.rfs(variables.$nav-link-font-size, --#{variables.$prefix}nav-link-font-size);
--#{$prefix}nav-link-font-weight: #{$nav-link-font-weight}; --#{variables.$prefix}nav-link-font-weight: #{variables.$nav-link-font-weight};
--#{$prefix}nav-link-color: #{$nav-link-color}; --#{variables.$prefix}nav-link-color: #{variables.$nav-link-color};
--#{$prefix}nav-link-hover-color: #{$nav-link-hover-color}; --#{variables.$prefix}nav-link-hover-color: #{variables.$nav-link-hover-color};
--#{$prefix}nav-link-disabled-color: #{$nav-link-disabled-color}; --#{variables.$prefix}nav-link-disabled-color: #{variables.$nav-link-disabled-color};
// scss-docs-end nav-css-vars // scss-docs-end nav-css-vars
display: flex; display: flex;
@ -23,30 +29,30 @@
.nav-link { .nav-link {
display: block; display: block;
padding: var(--#{$prefix}nav-link-padding-y) var(--#{$prefix}nav-link-padding-x); padding: var(--#{variables.$prefix}nav-link-padding-y) var(--#{variables.$prefix}nav-link-padding-x);
@include font-size(var(--#{$prefix}nav-link-font-size)); @include rfs.font-size(var(--#{variables.$prefix}nav-link-font-size));
font-weight: var(--#{$prefix}nav-link-font-weight); font-weight: var(--#{variables.$prefix}nav-link-font-weight);
color: var(--#{$prefix}nav-link-color); color: var(--#{variables.$prefix}nav-link-color);
text-decoration: if($link-decoration == none, null, none); text-decoration: if(variables.$link-decoration == none, null, none);
background: none; background: none;
border: 0; border: 0;
@include transition($nav-link-transition); @include transition.transition(variables.$nav-link-transition);
&:hover, &:hover,
&:focus { &:focus {
color: var(--#{$prefix}nav-link-hover-color); color: var(--#{variables.$prefix}nav-link-hover-color);
text-decoration: if($link-hover-decoration == underline, none, null); text-decoration: if(variables.$link-hover-decoration == underline, none, null);
} }
&:focus-visible { &:focus-visible {
outline: 0; outline: 0;
box-shadow: $nav-link-focus-box-shadow; box-shadow: variables.$nav-link-focus-box-shadow;
} }
// Disabled state lightens text // Disabled state lightens text
&.disabled, &.disabled,
&:disabled { &:disabled {
color: var(--#{$prefix}nav-link-disabled-color); color: var(--#{variables.$prefix}nav-link-disabled-color);
pointer-events: none; pointer-events: none;
cursor: default; cursor: default;
} }
@ -58,42 +64,42 @@
.nav-tabs { .nav-tabs {
// scss-docs-start nav-tabs-css-vars // scss-docs-start nav-tabs-css-vars
--#{$prefix}nav-tabs-border-width: #{$nav-tabs-border-width}; --#{variables.$prefix}nav-tabs-border-width: #{variables.$nav-tabs-border-width};
--#{$prefix}nav-tabs-border-color: #{$nav-tabs-border-color}; --#{variables.$prefix}nav-tabs-border-color: #{variables.$nav-tabs-border-color};
--#{$prefix}nav-tabs-border-radius: #{$nav-tabs-border-radius}; --#{variables.$prefix}nav-tabs-border-radius: #{variables.$nav-tabs-border-radius};
--#{$prefix}nav-tabs-link-hover-border-color: #{$nav-tabs-link-hover-border-color}; --#{variables.$prefix}nav-tabs-link-hover-border-color: #{variables.$nav-tabs-link-hover-border-color};
--#{$prefix}nav-tabs-link-active-color: #{$nav-tabs-link-active-color}; --#{variables.$prefix}nav-tabs-link-active-color: #{variables.$nav-tabs-link-active-color};
--#{$prefix}nav-tabs-link-active-bg: #{$nav-tabs-link-active-bg}; --#{variables.$prefix}nav-tabs-link-active-bg: #{variables.$nav-tabs-link-active-bg};
--#{$prefix}nav-tabs-link-active-border-color: #{$nav-tabs-link-active-border-color}; --#{variables.$prefix}nav-tabs-link-active-border-color: #{variables.$nav-tabs-link-active-border-color};
// scss-docs-end nav-tabs-css-vars // 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 { .nav-link {
margin-bottom: calc(-1 * var(--#{$prefix}nav-tabs-border-width)); // stylelint-disable-line function-disallowed-list margin-bottom: calc(-1 * var(--#{variables.$prefix}nav-tabs-border-width)); // stylelint-disable-line function-disallowed-list
border: var(--#{$prefix}nav-tabs-border-width) solid transparent; border: var(--#{variables.$prefix}nav-tabs-border-width) solid transparent;
@include border-top-radius(var(--#{$prefix}nav-tabs-border-radius)); @include border-radius.border-top-radius(var(--#{variables.$prefix}nav-tabs-border-radius));
&:hover, &:hover,
&:focus { &:focus {
// Prevents active .nav-link tab overlapping focus outline of previous/next .nav-link // Prevents active .nav-link tab overlapping focus outline of previous/next .nav-link
isolation: isolate; 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-link.active,
.nav-item.show .nav-link { .nav-item.show .nav-link {
color: var(--#{$prefix}nav-tabs-link-active-color); color: var(--#{variables.$prefix}nav-tabs-link-active-color);
background-color: var(--#{$prefix}nav-tabs-link-active-bg); background-color: var(--#{variables.$prefix}nav-tabs-link-active-bg);
border-color: var(--#{$prefix}nav-tabs-link-active-border-color); border-color: var(--#{variables.$prefix}nav-tabs-link-active-border-color);
} }
.dropdown-menu { .dropdown-menu {
// Make dropdown border overlap tab border // 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 // 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 { .nav-pills {
// scss-docs-start nav-pills-css-vars // scss-docs-start nav-pills-css-vars
--#{$prefix}nav-pills-border-radius: #{$nav-pills-border-radius}; --#{variables.$prefix}nav-pills-border-radius: #{variables.$nav-pills-border-radius};
--#{$prefix}nav-pills-link-active-color: #{$nav-pills-link-active-color}; --#{variables.$prefix}nav-pills-link-active-color: #{variables.$nav-pills-link-active-color};
--#{$prefix}nav-pills-link-active-bg: #{$nav-pills-link-active-bg}; --#{variables.$prefix}nav-pills-link-active-bg: #{variables.$nav-pills-link-active-bg};
// scss-docs-end nav-pills-css-vars // scss-docs-end nav-pills-css-vars
.nav-link { .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, .nav-link.active,
.show > .nav-link { .show > .nav-link {
color: var(--#{$prefix}nav-pills-link-active-color); color: var(--#{variables.$prefix}nav-pills-link-active-color);
@include gradient-bg(var(--#{$prefix}nav-pills-link-active-bg)); @include gradients.gradient-bg(var(--#{variables.$prefix}nav-pills-link-active-bg));
} }
} }
@ -127,17 +133,17 @@
.nav-underline { .nav-underline {
// scss-docs-start nav-underline-css-vars // scss-docs-start nav-underline-css-vars
--#{$prefix}nav-underline-gap: #{$nav-underline-gap}; --#{variables.$prefix}nav-underline-gap: #{variables.$nav-underline-gap};
--#{$prefix}nav-underline-border-width: #{$nav-underline-border-width}; --#{variables.$prefix}nav-underline-border-width: #{variables.$nav-underline-border-width};
--#{$prefix}nav-underline-link-active-color: #{$nav-underline-link-active-color}; --#{variables.$prefix}nav-underline-link-active-color: #{variables.$nav-underline-link-active-color};
// scss-docs-end nav-underline-css-vars // scss-docs-end nav-underline-css-vars
gap: var(--#{$prefix}nav-underline-gap); gap: var(--#{variables.$prefix}nav-underline-gap);
.nav-link { .nav-link {
padding-right: 0; padding-right: 0;
padding-left: 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, &:hover,
&:focus { &:focus {
@ -147,8 +153,8 @@
.nav-link.active, .nav-link.active,
.show > .nav-link { .show > .nav-link {
font-weight: $font-weight-bold; font-weight: variables.$font-weight-bold;
color: var(--#{$prefix}nav-underline-link-active-color); color: var(--#{variables.$prefix}nav-underline-link-active-color);
border-bottom-color: currentcolor; 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 // Navbar
// //
// Provide a static navbar from which we expand to create full-width, fixed, and // Provide a static navbar from which we expand to create full-width, fixed, and
@ -5,26 +17,26 @@
.navbar { .navbar {
// scss-docs-start navbar-css-vars // scss-docs-start navbar-css-vars
--#{$prefix}navbar-padding-x: #{if($navbar-padding-x == null, 0, $navbar-padding-x)}; --#{variables.$prefix}navbar-padding-x: #{if(variables.$navbar-padding-x == null, 0, variables.$navbar-padding-x)};
--#{$prefix}navbar-padding-y: #{$navbar-padding-y}; --#{variables.$prefix}navbar-padding-y: #{variables.$navbar-padding-y};
--#{$prefix}navbar-color: #{$navbar-light-color}; --#{variables.$prefix}navbar-color: #{variables.$navbar-light-color};
--#{$prefix}navbar-hover-color: #{$navbar-light-hover-color}; --#{variables.$prefix}navbar-hover-color: #{variables.$navbar-light-hover-color};
--#{$prefix}navbar-disabled-color: #{$navbar-light-disabled-color}; --#{variables.$prefix}navbar-disabled-color: #{variables.$navbar-light-disabled-color};
--#{$prefix}navbar-active-color: #{$navbar-light-active-color}; --#{variables.$prefix}navbar-active-color: #{variables.$navbar-light-active-color};
--#{$prefix}navbar-brand-padding-y: #{$navbar-brand-padding-y}; --#{variables.$prefix}navbar-brand-padding-y: #{variables.$navbar-brand-padding-y};
--#{$prefix}navbar-brand-margin-end: #{$navbar-brand-margin-end}; --#{variables.$prefix}navbar-brand-margin-end: #{variables.$navbar-brand-margin-end};
--#{$prefix}navbar-brand-font-size: #{$navbar-brand-font-size}; --#{variables.$prefix}navbar-brand-font-size: #{variables.$navbar-brand-font-size};
--#{$prefix}navbar-brand-color: #{$navbar-light-brand-color}; --#{variables.$prefix}navbar-brand-color: #{variables.$navbar-light-brand-color};
--#{$prefix}navbar-brand-hover-color: #{$navbar-light-brand-hover-color}; --#{variables.$prefix}navbar-brand-hover-color: #{variables.$navbar-light-brand-hover-color};
--#{$prefix}navbar-nav-link-padding-x: #{$navbar-nav-link-padding-x}; --#{variables.$prefix}navbar-nav-link-padding-x: #{variables.$navbar-nav-link-padding-x};
--#{$prefix}navbar-toggler-padding-y: #{$navbar-toggler-padding-y}; --#{variables.$prefix}navbar-toggler-padding-y: #{variables.$navbar-toggler-padding-y};
--#{$prefix}navbar-toggler-padding-x: #{$navbar-toggler-padding-x}; --#{variables.$prefix}navbar-toggler-padding-x: #{variables.$navbar-toggler-padding-x};
--#{$prefix}navbar-toggler-font-size: #{$navbar-toggler-font-size}; --#{variables.$prefix}navbar-toggler-font-size: #{variables.$navbar-toggler-font-size};
--#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-light-toggler-icon-bg)}; --#{variables.$prefix}navbar-toggler-icon-bg: #{functions.escape-svg(variables.$navbar-light-toggler-icon-bg)};
--#{$prefix}navbar-toggler-border-color: #{$navbar-light-toggler-border-color}; --#{variables.$prefix}navbar-toggler-border-color: #{variables.$navbar-light-toggler-border-color};
--#{$prefix}navbar-toggler-border-radius: #{$navbar-toggler-border-radius}; --#{variables.$prefix}navbar-toggler-border-radius: #{variables.$navbar-toggler-border-radius};
--#{$prefix}navbar-toggler-focus-width: #{$navbar-toggler-focus-width}; --#{variables.$prefix}navbar-toggler-focus-width: #{variables.$navbar-toggler-focus-width};
--#{$prefix}navbar-toggler-transition: #{$navbar-toggler-transition}; --#{variables.$prefix}navbar-toggler-transition: #{variables.$navbar-toggler-transition};
// scss-docs-end navbar-css-vars // scss-docs-end navbar-css-vars
position: relative; position: relative;
@ -32,8 +44,8 @@
flex-wrap: wrap; // allow us to do the line break for collapsing content flex-wrap: wrap; // allow us to do the line break for collapsing content
align-items: center; align-items: center;
justify-content: space-between; // space out brand from logo justify-content: space-between; // space out brand from logo
padding: var(--#{$prefix}navbar-padding-y) var(--#{$prefix}navbar-padding-x); padding: var(--#{variables.$prefix}navbar-padding-y) var(--#{variables.$prefix}navbar-padding-x);
@include gradient-bg(); @include gradients.gradient-bg();
// Because flex properties aren't inherited, we need to redeclare these first // Because flex properties aren't inherited, we need to redeclare these first
// few properties so that content nested within behave properly. // few properties so that content nested within behave properly.
@ -50,8 +62,8 @@
@extend %container-flex-properties; @extend %container-flex-properties;
} }
@each $breakpoint, $container-max-width in $container-max-widths { @each $breakpoint, $container-max-width in variables.$container-max-widths {
> .container#{breakpoint-infix($breakpoint, $container-max-widths)} { > .container#{breakpoints.breakpoint-infix($breakpoint, variables.$container-max-widths)} {
@extend %container-flex-properties; @extend %container-flex-properties;
} }
} }
@ -63,18 +75,18 @@
// Used for brand, project, or site names. // Used for brand, project, or site names.
.navbar-brand { .navbar-brand {
padding-top: var(--#{$prefix}navbar-brand-padding-y); padding-top: var(--#{variables.$prefix}navbar-brand-padding-y);
padding-bottom: var(--#{$prefix}navbar-brand-padding-y); padding-bottom: var(--#{variables.$prefix}navbar-brand-padding-y);
margin-right: var(--#{$prefix}navbar-brand-margin-end); margin-right: var(--#{variables.$prefix}navbar-brand-margin-end);
@include font-size(var(--#{$prefix}navbar-brand-font-size)); @include rfs.font-size(var(--#{variables.$prefix}navbar-brand-font-size));
color: var(--#{$prefix}navbar-brand-color); color: var(--#{variables.$prefix}navbar-brand-color);
text-decoration: if($link-decoration == none, null, none); text-decoration: if(variables.$link-decoration == none, null, none);
white-space: nowrap; white-space: nowrap;
&:hover, &:hover,
&:focus { &:focus {
color: var(--#{$prefix}navbar-brand-hover-color); color: var(--#{variables.$prefix}navbar-brand-hover-color);
text-decoration: if($link-hover-decoration == underline, none, null); text-decoration: if(variables.$link-hover-decoration == underline, none, null);
} }
} }
@ -85,13 +97,13 @@
.navbar-nav { .navbar-nav {
// scss-docs-start navbar-nav-css-vars // scss-docs-start navbar-nav-css-vars
--#{$prefix}nav-link-padding-x: 0; --#{variables.$prefix}nav-link-padding-x: 0;
--#{$prefix}nav-link-padding-y: #{$nav-link-padding-y}; --#{variables.$prefix}nav-link-padding-y: #{variables.$nav-link-padding-y};
@include rfs($nav-link-font-size, --#{$prefix}nav-link-font-size); @include rfs.rfs(variables.$nav-link-font-size, --#{variables.$prefix}nav-link-font-size);
--#{$prefix}nav-link-font-weight: #{$nav-link-font-weight}; --#{variables.$prefix}nav-link-font-weight: #{variables.$nav-link-font-weight};
--#{$prefix}nav-link-color: var(--#{$prefix}navbar-color); --#{variables.$prefix}nav-link-color: var(--#{variables.$prefix}navbar-color);
--#{$prefix}nav-link-hover-color: var(--#{$prefix}navbar-hover-color); --#{variables.$prefix}nav-link-hover-color: var(--#{variables.$prefix}navbar-hover-color);
--#{$prefix}nav-link-disabled-color: var(--#{$prefix}navbar-disabled-color); --#{variables.$prefix}nav-link-disabled-color: var(--#{variables.$prefix}navbar-disabled-color);
// scss-docs-end navbar-nav-css-vars // scss-docs-end navbar-nav-css-vars
display: flex; display: flex;
@ -103,7 +115,7 @@
.nav-link { .nav-link {
&.active, &.active,
&.show { &.show {
color: var(--#{$prefix}navbar-active-color); color: var(--#{variables.$prefix}navbar-active-color);
} }
} }
@ -118,14 +130,14 @@
// //
.navbar-text { .navbar-text {
padding-top: $nav-link-padding-y; padding-top: variables.$nav-link-padding-y;
padding-bottom: $nav-link-padding-y; padding-bottom: variables.$nav-link-padding-y;
color: var(--#{$prefix}navbar-color); color: var(--#{variables.$prefix}navbar-color);
a, a,
a:hover, a:hover,
a:focus { 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 // Button for toggling the navbar when in its collapsed state
.navbar-toggler { .navbar-toggler {
padding: var(--#{$prefix}navbar-toggler-padding-y) var(--#{$prefix}navbar-toggler-padding-x); padding: var(--#{variables.$prefix}navbar-toggler-padding-y) var(--#{variables.$prefix}navbar-toggler-padding-x);
@include font-size(var(--#{$prefix}navbar-toggler-font-size)); @include rfs.font-size(var(--#{variables.$prefix}navbar-toggler-font-size));
line-height: 1; line-height: 1;
color: var(--#{$prefix}navbar-color); color: var(--#{variables.$prefix}navbar-color);
background-color: transparent; // remove default button style background-color: transparent; // remove default button style
border: var(--#{$prefix}border-width) solid var(--#{$prefix}navbar-toggler-border-color); // remove default button style border: var(--#{variables.$prefix}border-width) solid var(--#{variables.$prefix}navbar-toggler-border-color); // remove default button style
@include border-radius(var(--#{$prefix}navbar-toggler-border-radius)); @include border-radius.border-radius(var(--#{variables.$prefix}navbar-toggler-border-radius));
@include transition(var(--#{$prefix}navbar-toggler-transition)); @include transition.transition(var(--#{variables.$prefix}navbar-toggler-transition));
&:hover { &:hover {
text-decoration: none; text-decoration: none;
@ -164,7 +176,7 @@
&:focus { &:focus {
text-decoration: none; text-decoration: none;
outline: 0; 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; width: 1.5em;
height: 1.5em; height: 1.5em;
vertical-align: middle; 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-repeat: no-repeat;
background-position: center; background-position: center;
background-size: 100%; background-size: 100%;
} }
.navbar-nav-scroll { .navbar-nav-scroll {
max-height: var(--#{$prefix}scroll-height, 75vh); max-height: var(--#{variables.$prefix}scroll-height, 75vh);
overflow-y: auto; overflow-y: auto;
} }
@ -190,13 +202,13 @@
// Generate series of `.navbar-expand-*` responsive classes for configuring // Generate series of `.navbar-expand-*` responsive classes for configuring
// where your navbar collapses. // where your navbar collapses.
.navbar-expand { .navbar-expand {
@each $breakpoint in map-keys($grid-breakpoints) { @each $breakpoint in map.keys(variables.$grid-breakpoints) {
$next: breakpoint-next($breakpoint, $grid-breakpoints); $next: breakpoints.breakpoint-next($breakpoint, variables.$grid-breakpoints);
$infix: breakpoint-infix($next, $grid-breakpoints); $infix: breakpoints.breakpoint-infix($next, variables.$grid-breakpoints);
// stylelint-disable-next-line scss/selector-no-union-class-name // stylelint-disable-next-line scss/selector-no-union-class-name
&#{$infix} { &#{$infix} {
@include media-breakpoint-up($next) { @include breakpoints.media-breakpoint-up($next) {
flex-wrap: nowrap; flex-wrap: nowrap;
justify-content: flex-start; justify-content: flex-start;
@ -208,8 +220,8 @@
} }
.nav-link { .nav-link {
padding-right: var(--#{$prefix}navbar-nav-link-padding-x); padding-right: var(--#{variables.$prefix}navbar-nav-link-padding-x);
padding-left: var(--#{$prefix}navbar-nav-link-padding-x); padding-left: var(--#{variables.$prefix}navbar-nav-link-padding-x);
} }
} }
@ -237,8 +249,8 @@
background-color: transparent !important; background-color: transparent !important;
border: 0 !important; border: 0 !important;
transform: none !important; transform: none !important;
@include box-shadow(none); @include box-shadow.box-shadow(none);
@include transition(none); @include transition.transition(none);
// stylelint-enable declaration-no-important // stylelint-enable declaration-no-important
.offcanvas-header { .offcanvas-header {
@ -263,27 +275,27 @@
// Styles for switching between navbars with light or dark background. // Styles for switching between navbars with light or dark background.
.navbar-light { .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-dark,
.navbar[data-bs-theme="dark"] { .navbar[data-bs-theme="dark"] {
// scss-docs-start navbar-dark-css-vars // scss-docs-start navbar-dark-css-vars
--#{$prefix}navbar-color: #{$navbar-dark-color}; --#{variables.$prefix}navbar-color: #{variables.$navbar-dark-color};
--#{$prefix}navbar-hover-color: #{$navbar-dark-hover-color}; --#{variables.$prefix}navbar-hover-color: #{variables.$navbar-dark-hover-color};
--#{$prefix}navbar-disabled-color: #{$navbar-dark-disabled-color}; --#{variables.$prefix}navbar-disabled-color: #{variables.$navbar-dark-disabled-color};
--#{$prefix}navbar-active-color: #{$navbar-dark-active-color}; --#{variables.$prefix}navbar-active-color: #{variables.$navbar-dark-active-color};
--#{$prefix}navbar-brand-color: #{$navbar-dark-brand-color}; --#{variables.$prefix}navbar-brand-color: #{variables.$navbar-dark-brand-color};
--#{$prefix}navbar-brand-hover-color: #{$navbar-dark-brand-hover-color}; --#{variables.$prefix}navbar-brand-hover-color: #{variables.$navbar-dark-brand-hover-color};
--#{$prefix}navbar-toggler-border-color: #{$navbar-dark-toggler-border-color}; --#{variables.$prefix}navbar-toggler-border-color: #{variables.$navbar-dark-toggler-border-color};
--#{$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)};
// scss-docs-end navbar-dark-css-vars // scss-docs-end navbar-dark-css-vars
} }
@if $enable-dark-mode { @if variables.$enable-dark-mode {
@include color-mode(dark) { @include color-mode.color-mode(dark) {
.navbar-toggler-icon { .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 // stylelint-disable function-disallowed-list
%offcanvas-css-vars { %offcanvas-css-vars {
// scss-docs-start offcanvas-css-vars // scss-docs-start offcanvas-css-vars
--#{$prefix}offcanvas-zindex: #{$zindex-offcanvas}; --#{variables.$prefix}offcanvas-zindex: #{variables.$zindex-offcanvas};
--#{$prefix}offcanvas-width: #{$offcanvas-horizontal-width}; --#{variables.$prefix}offcanvas-width: #{variables.$offcanvas-horizontal-width};
--#{$prefix}offcanvas-height: #{$offcanvas-vertical-height}; --#{variables.$prefix}offcanvas-height: #{variables.$offcanvas-vertical-height};
--#{$prefix}offcanvas-padding-x: #{$offcanvas-padding-x}; --#{variables.$prefix}offcanvas-padding-x: #{variables.$offcanvas-padding-x};
--#{$prefix}offcanvas-padding-y: #{$offcanvas-padding-y}; --#{variables.$prefix}offcanvas-padding-y: #{variables.$offcanvas-padding-y};
--#{$prefix}offcanvas-color: #{$offcanvas-color}; --#{variables.$prefix}offcanvas-color: #{variables.$offcanvas-color};
--#{$prefix}offcanvas-bg: #{$offcanvas-bg-color}; --#{variables.$prefix}offcanvas-bg: #{variables.$offcanvas-bg-color};
--#{$prefix}offcanvas-border-width: #{$offcanvas-border-width}; --#{variables.$prefix}offcanvas-border-width: #{variables.$offcanvas-border-width};
--#{$prefix}offcanvas-border-color: #{$offcanvas-border-color}; --#{variables.$prefix}offcanvas-border-color: #{variables.$offcanvas-border-color};
--#{$prefix}offcanvas-box-shadow: #{$offcanvas-box-shadow}; --#{variables.$prefix}offcanvas-box-shadow: #{variables.$offcanvas-box-shadow};
--#{$prefix}offcanvas-transition: #{transform $offcanvas-transition-duration ease-in-out}; --#{variables.$prefix}offcanvas-transition: #{transform variables.$offcanvas-transition-duration ease-in-out};
--#{$prefix}offcanvas-title-line-height: #{$offcanvas-title-line-height}; --#{variables.$prefix}offcanvas-title-line-height: #{variables.$offcanvas-title-line-height};
// scss-docs-end offcanvas-css-vars // scss-docs-end offcanvas-css-vars
} }
@each $breakpoint in map-keys($grid-breakpoints) { @each $breakpoint in map.keys(variables.$grid-breakpoints) {
$next: breakpoint-next($breakpoint, $grid-breakpoints); $next: breakpoints.breakpoint-next($breakpoint, variables.$grid-breakpoints);
$infix: breakpoint-infix($next, $grid-breakpoints); $infix: breakpoints.breakpoint-infix($next, variables.$grid-breakpoints);
.offcanvas#{$infix} { .offcanvas#{$infix} {
@extend %offcanvas-css-vars; @extend %offcanvas-css-vars;
} }
} }
@each $breakpoint in map-keys($grid-breakpoints) { @each $breakpoint in map.keys(variables.$grid-breakpoints) {
$next: breakpoint-next($breakpoint, $grid-breakpoints); $next: breakpoints.breakpoint-next($breakpoint, variables.$grid-breakpoints);
$infix: breakpoint-infix($next, $grid-breakpoints); $infix: breakpoints.breakpoint-infix($next, variables.$grid-breakpoints);
.offcanvas#{$infix} { .offcanvas#{$infix} {
@include media-breakpoint-down($next) { @include breakpoints.media-breakpoint-down($next) {
position: fixed; position: fixed;
bottom: 0; bottom: 0;
z-index: var(--#{$prefix}offcanvas-zindex); z-index: var(--#{variables.$prefix}offcanvas-zindex);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
max-width: 100%; max-width: 100%;
color: var(--#{$prefix}offcanvas-color); color: var(--#{variables.$prefix}offcanvas-color);
visibility: hidden; visibility: hidden;
background-color: var(--#{$prefix}offcanvas-bg); background-color: var(--#{variables.$prefix}offcanvas-bg);
background-clip: padding-box; background-clip: padding-box;
outline: 0; outline: 0;
@include box-shadow(var(--#{$prefix}offcanvas-box-shadow)); @include box-shadow.box-shadow(var(--#{variables.$prefix}offcanvas-box-shadow));
@include transition(var(--#{$prefix}offcanvas-transition)); @include transition.transition(var(--#{variables.$prefix}offcanvas-transition));
&.offcanvas-start { &.offcanvas-start {
top: 0; top: 0;
left: 0; left: 0;
width: var(--#{$prefix}offcanvas-width); width: var(--#{variables.$prefix}offcanvas-width);
border-right: var(--#{$prefix}offcanvas-border-width) solid var(--#{$prefix}offcanvas-border-color); border-right: var(--#{variables.$prefix}offcanvas-border-width) solid var(--#{variables.$prefix}offcanvas-border-color);
transform: translateX(-100%); transform: translateX(-100%);
} }
&.offcanvas-end { &.offcanvas-end {
top: 0; top: 0;
right: 0; right: 0;
width: var(--#{$prefix}offcanvas-width); width: var(--#{variables.$prefix}offcanvas-width);
border-left: var(--#{$prefix}offcanvas-border-width) solid var(--#{$prefix}offcanvas-border-color); border-left: var(--#{variables.$prefix}offcanvas-border-width) solid var(--#{variables.$prefix}offcanvas-border-color);
transform: translateX(100%); transform: translateX(100%);
} }
@ -66,18 +73,18 @@
top: 0; top: 0;
right: 0; right: 0;
left: 0; left: 0;
height: var(--#{$prefix}offcanvas-height); height: var(--#{variables.$prefix}offcanvas-height);
max-height: 100%; 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%); transform: translateY(-100%);
} }
&.offcanvas-bottom { &.offcanvas-bottom {
right: 0; right: 0;
left: 0; left: 0;
height: var(--#{$prefix}offcanvas-height); height: var(--#{variables.$prefix}offcanvas-height);
max-height: 100%; 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%); transform: translateY(100%);
} }
@ -94,9 +101,9 @@
} }
@if not ($infix == "") { @if not ($infix == "") {
@include media-breakpoint-up($next) { @include breakpoints.media-breakpoint-up($next) {
--#{$prefix}offcanvas-height: auto; --#{variables.$prefix}offcanvas-height: auto;
--#{$prefix}offcanvas-border-width: 0; --#{variables.$prefix}offcanvas-border-width: 0;
background-color: transparent !important; // stylelint-disable-line declaration-no-important background-color: transparent !important; // stylelint-disable-line declaration-no-important
.offcanvas-header { .offcanvas-header {
@ -117,27 +124,27 @@
} }
.offcanvas-backdrop { .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 { .offcanvas-header {
display: flex; display: flex;
align-items: center; 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 { .btn-close {
padding: calc(var(--#{$prefix}offcanvas-padding-y) * .5) calc(var(--#{$prefix}offcanvas-padding-x) * .5); padding: calc(var(--#{variables.$prefix}offcanvas-padding-y) * .5) calc(var(--#{variables.$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; 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 { .offcanvas-title {
margin-bottom: 0; margin-bottom: 0;
line-height: var(--#{$prefix}offcanvas-title-line-height); line-height: var(--#{variables.$prefix}offcanvas-title-line-height);
} }
.offcanvas-body { .offcanvas-body {
flex-grow: 1; 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; 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 { .pagination {
// scss-docs-start pagination-css-vars // scss-docs-start pagination-css-vars
--#{$prefix}pagination-padding-x: #{$pagination-padding-x}; --#{variables.$prefix}pagination-padding-x: #{variables.$pagination-padding-x};
--#{$prefix}pagination-padding-y: #{$pagination-padding-y}; --#{variables.$prefix}pagination-padding-y: #{variables.$pagination-padding-y};
@include rfs($pagination-font-size, --#{$prefix}pagination-font-size); @include rfs.rfs(variables.$pagination-font-size, --#{variables.$prefix}pagination-font-size);
--#{$prefix}pagination-color: #{$pagination-color}; --#{variables.$prefix}pagination-color: #{variables.$pagination-color};
--#{$prefix}pagination-bg: #{$pagination-bg}; --#{variables.$prefix}pagination-bg: #{variables.$pagination-bg};
--#{$prefix}pagination-border-width: #{$pagination-border-width}; --#{variables.$prefix}pagination-border-width: #{variables.$pagination-border-width};
--#{$prefix}pagination-border-color: #{$pagination-border-color}; --#{variables.$prefix}pagination-border-color: #{variables.$pagination-border-color};
--#{$prefix}pagination-border-radius: #{$pagination-border-radius}; --#{variables.$prefix}pagination-border-radius: #{variables.$pagination-border-radius};
--#{$prefix}pagination-hover-color: #{$pagination-hover-color}; --#{variables.$prefix}pagination-hover-color: #{variables.$pagination-hover-color};
--#{$prefix}pagination-hover-bg: #{$pagination-hover-bg}; --#{variables.$prefix}pagination-hover-bg: #{variables.$pagination-hover-bg};
--#{$prefix}pagination-hover-border-color: #{$pagination-hover-border-color}; --#{variables.$prefix}pagination-hover-border-color: #{variables.$pagination-hover-border-color};
--#{$prefix}pagination-focus-color: #{$pagination-focus-color}; --#{variables.$prefix}pagination-focus-color: #{variables.$pagination-focus-color};
--#{$prefix}pagination-focus-bg: #{$pagination-focus-bg}; --#{variables.$prefix}pagination-focus-bg: #{variables.$pagination-focus-bg};
--#{$prefix}pagination-focus-box-shadow: #{$pagination-focus-box-shadow}; --#{variables.$prefix}pagination-focus-box-shadow: #{variables.$pagination-focus-box-shadow};
--#{$prefix}pagination-active-color: #{$pagination-active-color}; --#{variables.$prefix}pagination-active-color: #{variables.$pagination-active-color};
--#{$prefix}pagination-active-bg: #{$pagination-active-bg}; --#{variables.$prefix}pagination-active-bg: #{variables.$pagination-active-bg};
--#{$prefix}pagination-active-border-color: #{$pagination-active-border-color}; --#{variables.$prefix}pagination-active-border-color: #{variables.$pagination-active-border-color};
--#{$prefix}pagination-disabled-color: #{$pagination-disabled-color}; --#{variables.$prefix}pagination-disabled-color: #{variables.$pagination-disabled-color};
--#{$prefix}pagination-disabled-bg: #{$pagination-disabled-bg}; --#{variables.$prefix}pagination-disabled-bg: #{variables.$pagination-disabled-bg};
--#{$prefix}pagination-disabled-border-color: #{$pagination-disabled-border-color}; --#{variables.$prefix}pagination-disabled-border-color: #{variables.$pagination-disabled-border-color};
// scss-docs-end pagination-css-vars // scss-docs-end pagination-css-vars
display: flex; display: flex;
@include list-unstyled(); @include lists.list-unstyled();
} }
.page-link { .page-link {
position: relative; position: relative;
display: block; display: block;
padding: var(--#{$prefix}pagination-padding-y) var(--#{$prefix}pagination-padding-x); padding: var(--#{variables.$prefix}pagination-padding-y) var(--#{variables.$prefix}pagination-padding-x);
@include font-size(var(--#{$prefix}pagination-font-size)); @include rfs.font-size(var(--#{variables.$prefix}pagination-font-size));
color: var(--#{$prefix}pagination-color); color: var(--#{variables.$prefix}pagination-color);
text-decoration: if($link-decoration == none, null, none); text-decoration: if(variables.$link-decoration == none, null, none);
background-color: var(--#{$prefix}pagination-bg); background-color: var(--#{variables.$prefix}pagination-bg);
border: var(--#{$prefix}pagination-border-width) solid var(--#{$prefix}pagination-border-color); border: var(--#{variables.$prefix}pagination-border-width) solid var(--#{variables.$prefix}pagination-border-color);
@include transition($pagination-transition); @include transition.transition(variables.$pagination-transition);
&:hover { &:hover {
z-index: 2; z-index: 2;
color: var(--#{$prefix}pagination-hover-color); color: var(--#{variables.$prefix}pagination-hover-color);
text-decoration: if($link-hover-decoration == underline, none, null); text-decoration: if(variables.$link-hover-decoration == underline, none, null);
background-color: var(--#{$prefix}pagination-hover-bg); background-color: var(--#{variables.$prefix}pagination-hover-bg);
border-color: var(--#{$prefix}pagination-hover-border-color); border-color: var(--#{variables.$prefix}pagination-hover-border-color);
} }
&:focus { &:focus {
z-index: 3; z-index: 3;
color: var(--#{$prefix}pagination-focus-color); color: var(--#{variables.$prefix}pagination-focus-color);
background-color: var(--#{$prefix}pagination-focus-bg); background-color: var(--#{variables.$prefix}pagination-focus-bg);
outline: $pagination-focus-outline; outline: variables.$pagination-focus-outline;
box-shadow: var(--#{$prefix}pagination-focus-box-shadow); box-shadow: var(--#{variables.$prefix}pagination-focus-box-shadow);
} }
&.active, &.active,
.active > & { .active > & {
z-index: 3; z-index: 3;
color: var(--#{$prefix}pagination-active-color); color: var(--#{variables.$prefix}pagination-active-color);
@include gradient-bg(var(--#{$prefix}pagination-active-bg)); @include gradients.gradient-bg(var(--#{variables.$prefix}pagination-active-bg));
border-color: var(--#{$prefix}pagination-active-border-color); border-color: var(--#{variables.$prefix}pagination-active-border-color);
} }
&.disabled, &.disabled,
.disabled > & { .disabled > & {
color: var(--#{$prefix}pagination-disabled-color); color: var(--#{variables.$prefix}pagination-disabled-color);
pointer-events: none; pointer-events: none;
background-color: var(--#{$prefix}pagination-disabled-bg); background-color: var(--#{variables.$prefix}pagination-disabled-bg);
border-color: var(--#{$prefix}pagination-disabled-border-color); border-color: var(--#{variables.$prefix}pagination-disabled-border-color);
} }
} }
.page-item { .page-item {
&:not(:first-child) .page-link { &: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 { &:first-child {
.page-link { .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 { &:last-child {
.page-link { .page-link {
@include border-end-radius(var(--#{$prefix}pagination-border-radius)); @include border-radius.border-end-radius(var(--#{variables.$prefix}pagination-border-radius));
} }
} }
} @else { } @else {
// Add border-radius to all pageLinks in case they have left margin // Add border-radius to all pageLinks in case they have left margin
.page-link { .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 { .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 { .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 { .placeholder {
display: inline-block; display: inline-block;
min-height: 1em; min-height: 1em;
vertical-align: middle; vertical-align: middle;
cursor: wait; cursor: wait;
background-color: currentcolor; background-color: currentcolor;
opacity: $placeholder-opacity-max; opacity: variables.$placeholder-opacity-max;
&.btn::before { &.btn::before {
display: inline-block; display: inline-block;
@ -34,12 +36,12 @@
@keyframes placeholder-glow { @keyframes placeholder-glow {
50% { 50% {
opacity: $placeholder-opacity-min; opacity: variables.$placeholder-opacity-min;
} }
} }
.placeholder-wave { .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%; mask-size: 200% 100%;
animation: placeholder-wave 2s linear infinite; 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 { .popover {
// scss-docs-start popover-css-vars // scss-docs-start popover-css-vars
--#{$prefix}popover-zindex: #{$zindex-popover}; --#{variables.$prefix}popover-zindex: #{variables.$zindex-popover};
--#{$prefix}popover-max-width: #{$popover-max-width}; --#{variables.$prefix}popover-max-width: #{variables.$popover-max-width};
@include rfs($popover-font-size, --#{$prefix}popover-font-size); @include rfs.rfs(variables.$popover-font-size, --#{variables.$prefix}popover-font-size);
--#{$prefix}popover-bg: #{$popover-bg}; --#{variables.$prefix}popover-bg: #{variables.$popover-bg};
--#{$prefix}popover-border-width: #{$popover-border-width}; --#{variables.$prefix}popover-border-width: #{variables.$popover-border-width};
--#{$prefix}popover-border-color: #{$popover-border-color}; --#{variables.$prefix}popover-border-color: #{variables.$popover-border-color};
--#{$prefix}popover-border-radius: #{$popover-border-radius}; --#{variables.$prefix}popover-border-radius: #{variables.$popover-border-radius};
--#{$prefix}popover-inner-border-radius: #{$popover-inner-border-radius}; --#{variables.$prefix}popover-inner-border-radius: #{variables.$popover-inner-border-radius};
--#{$prefix}popover-box-shadow: #{$popover-box-shadow}; --#{variables.$prefix}popover-box-shadow: #{variables.$popover-box-shadow};
--#{$prefix}popover-header-padding-x: #{$popover-header-padding-x}; --#{variables.$prefix}popover-header-padding-x: #{variables.$popover-header-padding-x};
--#{$prefix}popover-header-padding-y: #{$popover-header-padding-y}; --#{variables.$prefix}popover-header-padding-y: #{variables.$popover-header-padding-y};
@include rfs($popover-header-font-size, --#{$prefix}popover-header-font-size); @include rfs.rfs(variables.$popover-header-font-size, --#{variables.$prefix}popover-header-font-size);
--#{$prefix}popover-header-color: #{$popover-header-color}; --#{variables.$prefix}popover-header-color: #{variables.$popover-header-color};
--#{$prefix}popover-header-bg: #{$popover-header-bg}; --#{variables.$prefix}popover-header-bg: #{variables.$popover-header-bg};
--#{$prefix}popover-body-padding-x: #{$popover-body-padding-x}; --#{variables.$prefix}popover-body-padding-x: #{variables.$popover-body-padding-x};
--#{$prefix}popover-body-padding-y: #{$popover-body-padding-y}; --#{variables.$prefix}popover-body-padding-y: #{variables.$popover-body-padding-y};
--#{$prefix}popover-body-color: #{$popover-body-color}; --#{variables.$prefix}popover-body-color: #{variables.$popover-body-color};
--#{$prefix}popover-arrow-width: #{$popover-arrow-width}; --#{variables.$prefix}popover-arrow-width: #{variables.$popover-arrow-width};
--#{$prefix}popover-arrow-height: #{$popover-arrow-height}; --#{variables.$prefix}popover-arrow-height: #{variables.$popover-arrow-height};
--#{$prefix}popover-arrow-border: var(--#{$prefix}popover-border-color); --#{variables.$prefix}popover-arrow-border: var(--#{variables.$prefix}popover-border-color);
// scss-docs-end popover-css-vars // scss-docs-end popover-css-vars
z-index: var(--#{$prefix}popover-zindex); z-index: var(--#{variables.$prefix}popover-zindex);
display: block; 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. // 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. // So reset our font and text properties to avoid inheriting weird values.
@include reset-text(); @include reset-text.reset-text();
@include font-size(var(--#{$prefix}popover-font-size)); @include rfs.font-size(var(--#{variables.$prefix}popover-font-size));
// Allow breaking very long words so they don't overflow the popover's bounds // Allow breaking very long words so they don't overflow the popover's bounds
word-wrap: break-word; word-wrap: break-word;
background-color: var(--#{$prefix}popover-bg); background-color: var(--#{variables.$prefix}popover-bg);
background-clip: padding-box; background-clip: padding-box;
border: var(--#{$prefix}popover-border-width) solid var(--#{$prefix}popover-border-color); border: var(--#{variables.$prefix}popover-border-width) solid var(--#{variables.$prefix}popover-border-color);
@include border-radius(var(--#{$prefix}popover-border-radius)); @include border-radius.border-radius(var(--#{variables.$prefix}popover-border-radius));
@include box-shadow(var(--#{$prefix}popover-box-shadow)); @include box-shadow.box-shadow(var(--#{variables.$prefix}popover-box-shadow));
.popover-arrow { .popover-arrow {
display: block; display: block;
width: var(--#{$prefix}popover-arrow-width); width: var(--#{variables.$prefix}popover-arrow-width);
height: var(--#{$prefix}popover-arrow-height); height: var(--#{variables.$prefix}popover-arrow-height);
&::before, &::before,
&::after { &::after {
@ -56,21 +62,21 @@
.bs-popover-top { .bs-popover-top {
> .popover-arrow { > .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, &::before,
&::after { &::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 { &::before {
bottom: 0; bottom: 0;
border-top-color: var(--#{$prefix}popover-arrow-border); border-top-color: var(--#{variables.$prefix}popover-arrow-border);
} }
&::after { &::after {
bottom: var(--#{$prefix}popover-border-width); bottom: var(--#{variables.$prefix}popover-border-width);
border-top-color: var(--#{$prefix}popover-bg); border-top-color: var(--#{variables.$prefix}popover-bg);
} }
} }
} }
@ -78,23 +84,23 @@
/* rtl:begin:ignore */ /* rtl:begin:ignore */
.bs-popover-end { .bs-popover-end {
> .popover-arrow { > .popover-arrow {
left: calc(-1 * (var(--#{$prefix}popover-arrow-height)) - var(--#{$prefix}popover-border-width)); // stylelint-disable-line function-disallowed-list left: calc(-1 * (var(--#{variables.$prefix}popover-arrow-height)) - var(--#{variables.$prefix}popover-border-width)); // stylelint-disable-line function-disallowed-list
width: var(--#{$prefix}popover-arrow-height); width: var(--#{variables.$prefix}popover-arrow-height);
height: var(--#{$prefix}popover-arrow-width); height: var(--#{variables.$prefix}popover-arrow-width);
&::before, &::before,
&::after { &::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 { &::before {
left: 0; left: 0;
border-right-color: var(--#{$prefix}popover-arrow-border); border-right-color: var(--#{variables.$prefix}popover-arrow-border);
} }
&::after { &::after {
left: var(--#{$prefix}popover-border-width); left: var(--#{variables.$prefix}popover-border-width);
border-right-color: var(--#{$prefix}popover-bg); border-right-color: var(--#{variables.$prefix}popover-bg);
} }
} }
} }
@ -103,21 +109,21 @@
.bs-popover-bottom { .bs-popover-bottom {
> .popover-arrow { > .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, &::before,
&::after { &::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 { &::before {
top: 0; top: 0;
border-bottom-color: var(--#{$prefix}popover-arrow-border); border-bottom-color: var(--#{variables.$prefix}popover-arrow-border);
} }
&::after { &::after {
top: var(--#{$prefix}popover-border-width); top: var(--#{variables.$prefix}popover-border-width);
border-bottom-color: var(--#{$prefix}popover-bg); border-bottom-color: var(--#{variables.$prefix}popover-bg);
} }
} }
@ -127,33 +133,33 @@
top: 0; top: 0;
left: 50%; left: 50%;
display: block; display: block;
width: var(--#{$prefix}popover-arrow-width); width: var(--#{variables.$prefix}popover-arrow-width);
margin-left: calc(-.5 * var(--#{$prefix}popover-arrow-width)); // stylelint-disable-line function-disallowed-list margin-left: calc(-.5 * var(--#{variables.$prefix}popover-arrow-width)); // stylelint-disable-line function-disallowed-list
content: ""; 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 */ /* rtl:begin:ignore */
.bs-popover-start { .bs-popover-start {
> .popover-arrow { > .popover-arrow {
right: calc(-1 * (var(--#{$prefix}popover-arrow-height)) - var(--#{$prefix}popover-border-width)); // stylelint-disable-line function-disallowed-list right: calc(-1 * (var(--#{variables.$prefix}popover-arrow-height)) - var(--#{variables.$prefix}popover-border-width)); // stylelint-disable-line function-disallowed-list
width: var(--#{$prefix}popover-arrow-height); width: var(--#{variables.$prefix}popover-arrow-height);
height: var(--#{$prefix}popover-arrow-width); height: var(--#{variables.$prefix}popover-arrow-width);
&::before, &::before,
&::after { &::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 { &::before {
right: 0; right: 0;
border-left-color: var(--#{$prefix}popover-arrow-border); border-left-color: var(--#{variables.$prefix}popover-arrow-border);
} }
&::after { &::after {
right: var(--#{$prefix}popover-border-width); right: var(--#{variables.$prefix}popover-border-width);
border-left-color: var(--#{$prefix}popover-bg); border-left-color: var(--#{variables.$prefix}popover-bg);
} }
} }
} }
@ -177,13 +183,13 @@
// Offset the popover to account for the popover arrow // Offset the popover to account for the popover arrow
.popover-header { .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 margin-bottom: 0; // Reset the default from Reboot
@include font-size(var(--#{$prefix}popover-header-font-size)); @include rfs.font-size(var(--#{variables.$prefix}popover-header-font-size));
color: var(--#{$prefix}popover-header-color); color: var(--#{variables.$prefix}popover-header-color);
background-color: var(--#{$prefix}popover-header-bg); background-color: var(--#{variables.$prefix}popover-header-bg);
border-bottom: var(--#{$prefix}popover-border-width) solid var(--#{$prefix}popover-border-color); border-bottom: var(--#{variables.$prefix}popover-border-width) solid var(--#{variables.$prefix}popover-border-color);
@include border-top-radius(var(--#{$prefix}popover-inner-border-radius)); @include border-radius.border-top-radius(var(--#{variables.$prefix}popover-inner-border-radius));
&:empty { &:empty {
display: none; display: none;
@ -191,6 +197,6 @@
} }
.popover-body { .popover-body {
padding: var(--#{$prefix}popover-body-padding-y) var(--#{$prefix}popover-body-padding-x); padding: var(--#{variables.$prefix}popover-body-padding-y) var(--#{variables.$prefix}popover-body-padding-x);
color: var(--#{$prefix}popover-body-color); 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 // Disable animation if transitions are disabled
// scss-docs-start progress-keyframes // scss-docs-start progress-keyframes
@if $enable-transitions { @if variables.$enable-transitions {
@keyframes progress-bar-stripes { @keyframes progress-bar-stripes {
0% { background-position-x: $progress-height; } 0% { background-position-x: variables.$progress-height; }
} }
} }
// scss-docs-end progress-keyframes // scss-docs-end progress-keyframes
@ -11,23 +18,23 @@
.progress, .progress,
.progress-stacked { .progress-stacked {
// scss-docs-start progress-css-vars // scss-docs-start progress-css-vars
--#{$prefix}progress-height: #{$progress-height}; --#{variables.$prefix}progress-height: #{variables.$progress-height};
@include rfs($progress-font-size, --#{$prefix}progress-font-size); @include rfs.rfs(variables.$progress-font-size, --#{variables.$prefix}progress-font-size);
--#{$prefix}progress-bg: #{$progress-bg}; --#{variables.$prefix}progress-bg: #{variables.$progress-bg};
--#{$prefix}progress-border-radius: #{$progress-border-radius}; --#{variables.$prefix}progress-border-radius: #{variables.$progress-border-radius};
--#{$prefix}progress-box-shadow: #{$progress-box-shadow}; --#{variables.$prefix}progress-box-shadow: #{variables.$progress-box-shadow};
--#{$prefix}progress-bar-color: #{$progress-bar-color}; --#{variables.$prefix}progress-bar-color: #{variables.$progress-bar-color};
--#{$prefix}progress-bar-bg: #{$progress-bar-bg}; --#{variables.$prefix}progress-bar-bg: #{variables.$progress-bar-bg};
--#{$prefix}progress-bar-transition: #{$progress-bar-transition}; --#{variables.$prefix}progress-bar-transition: #{variables.$progress-bar-transition};
// scss-docs-end progress-css-vars // scss-docs-end progress-css-vars
display: flex; display: flex;
height: var(--#{$prefix}progress-height); height: var(--#{variables.$prefix}progress-height);
overflow: hidden; // force rounded corners by cropping it overflow: hidden; // force rounded corners by cropping it
@include font-size(var(--#{$prefix}progress-font-size)); @include rfs.font-size(var(--#{variables.$prefix}progress-font-size));
background-color: var(--#{$prefix}progress-bg); background-color: var(--#{variables.$prefix}progress-bg);
@include border-radius(var(--#{$prefix}progress-border-radius)); @include border-radius.border-radius(var(--#{variables.$prefix}progress-border-radius));
@include box-shadow(var(--#{$prefix}progress-box-shadow)); @include box-shadow.box-shadow(var(--#{variables.$prefix}progress-box-shadow));
} }
.progress-bar { .progress-bar {
@ -35,16 +42,16 @@
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
overflow: hidden; overflow: hidden;
color: var(--#{$prefix}progress-bar-color); color: var(--#{variables.$prefix}progress-bar-color);
text-align: center; text-align: center;
white-space: nowrap; white-space: nowrap;
background-color: var(--#{$prefix}progress-bar-bg); background-color: var(--#{variables.$prefix}progress-bar-bg);
@include transition(var(--#{$prefix}progress-bar-transition)); @include transition.transition(var(--#{variables.$prefix}progress-bar-transition));
} }
.progress-bar-striped { .progress-bar-striped {
@include gradient-striped(); @include gradients.gradient-striped();
background-size: var(--#{$prefix}progress-height) var(--#{$prefix}progress-height); background-size: var(--#{variables.$prefix}progress-height) var(--#{variables.$prefix}progress-height);
} }
.progress-stacked > .progress { .progress-stacked > .progress {
@ -55,11 +62,11 @@
width: 100%; width: 100%;
} }
@if $enable-transitions { @if variables.$enable-transitions {
.progress-bar-animated { .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) { @media (prefers-reduced-motion: reduce) {
animation: none; 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 // stylelint-disable declaration-no-important, selector-no-qualifying-type, property-no-vendor-prefix
@ -26,11 +30,11 @@
// null by default, thus nothing is generated. // null by default, thus nothing is generated.
:root { :root {
@if $font-size-root != null { @if variables.$font-size-root != null {
@include font-size(var(--#{$prefix}root-font-size)); @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) { @media (prefers-reduced-motion: no-preference) {
scroll-behavior: smooth; scroll-behavior: smooth;
} }
@ -48,15 +52,15 @@
// scss-docs-start reboot-body-rules // scss-docs-start reboot-body-rules
body { body {
margin: 0; // 1 margin: 0; // 1
font-family: var(--#{$prefix}body-font-family); font-family: var(--#{variables.$prefix}body-font-family);
@include font-size(var(--#{$prefix}body-font-size)); @include rfs.font-size(var(--#{variables.$prefix}body-font-size));
font-weight: var(--#{$prefix}body-font-weight); font-weight: var(--#{variables.$prefix}body-font-weight);
line-height: var(--#{$prefix}body-line-height); line-height: var(--#{variables.$prefix}body-line-height);
color: var(--#{$prefix}body-color); color: var(--#{variables.$prefix}body-color);
text-align: var(--#{$prefix}body-text-align); text-align: var(--#{variables.$prefix}body-text-align);
background-color: var(--#{$prefix}body-bg); // 2 background-color: var(--#{variables.$prefix}body-bg); // 2
-webkit-text-size-adjust: 100%; // 3 -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 // scss-docs-end reboot-body-rules
@ -66,11 +70,11 @@ body {
// 1. Reset Firefox's gray color // 1. Reset Firefox's gray color
hr { hr {
margin: $hr-margin-y 0; margin: variables.$hr-margin-y 0;
color: $hr-color; // 1 color: variables.$hr-color; // 1
border: 0; border: 0;
border-top: $hr-border-width solid $hr-border-color; border-top: variables.$hr-border-width solid variables.$hr-border-color;
opacity: $hr-opacity; opacity: variables.$hr-opacity;
} }
@ -82,42 +86,42 @@ hr {
%heading { %heading {
margin-top: 0; // 1 margin-top: 0; // 1
margin-bottom: $headings-margin-bottom; margin-bottom: variables.$headings-margin-bottom;
font-family: $headings-font-family; font-family: variables.$headings-font-family;
font-style: $headings-font-style; font-style: variables.$headings-font-style;
font-weight: $headings-font-weight; font-weight: variables.$headings-font-weight;
line-height: $headings-line-height; line-height: variables.$headings-line-height;
color: var(--#{$prefix}heading-color); color: var(--#{variables.$prefix}heading-color);
} }
h1 { h1 {
@extend %heading; @extend %heading;
@include font-size($h1-font-size); @include rfs.font-size(variables.$h1-font-size);
} }
h2 { h2 {
@extend %heading; @extend %heading;
@include font-size($h2-font-size); @include rfs.font-size(variables.$h2-font-size);
} }
h3 { h3 {
@extend %heading; @extend %heading;
@include font-size($h3-font-size); @include rfs.font-size(variables.$h3-font-size);
} }
h4 { h4 {
@extend %heading; @extend %heading;
@include font-size($h4-font-size); @include rfs.font-size(variables.$h4-font-size);
} }
h5 { h5 {
@extend %heading; @extend %heading;
@include font-size($h5-font-size); @include rfs.font-size(variables.$h5-font-size);
} }
h6 { h6 {
@extend %heading; @extend %heading;
@include font-size($h6-font-size); @include rfs.font-size(variables.$h6-font-size);
} }
@ -128,7 +132,7 @@ h6 {
p { p {
margin-top: 0; margin-top: 0;
margin-bottom: $paragraph-margin-bottom; margin-bottom: variables.$paragraph-margin-bottom;
} }
@ -176,7 +180,7 @@ ul ol {
} }
dt { dt {
font-weight: $dt-font-weight; font-weight: variables.$dt-font-weight;
} }
// 1. Undo browser default // 1. Undo browser default
@ -200,7 +204,7 @@ blockquote {
b, b,
strong { 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 // Add the correct font size in all browsers
small { small {
@include font-size($small-font-size); @include rfs.font-size(variables.$small-font-size);
} }
// Mark // Mark
mark { mark {
padding: $mark-padding; padding: variables.$mark-padding;
color: var(--#{$prefix}highlight-color); color: var(--#{variables.$prefix}highlight-color);
background-color: var(--#{$prefix}highlight-bg); background-color: var(--#{variables.$prefix}highlight-bg);
} }
@ -230,7 +234,7 @@ mark {
sub, sub,
sup { sup {
position: relative; position: relative;
@include font-size($sub-sup-font-size); @include rfs.font-size(variables.$sub-sup-font-size);
line-height: 0; line-height: 0;
vertical-align: baseline; vertical-align: baseline;
} }
@ -242,12 +246,12 @@ sup { top: -.5em; }
// Links // Links
a { a {
color: rgba(var(--#{$prefix}link-color-rgb), var(--#{$prefix}link-opacity, 1)); color: rgba(var(--#{variables.$prefix}link-color-rgb), var(--#{variables.$prefix}link-opacity, 1));
text-decoration: $link-decoration; text-decoration: variables.$link-decoration;
&:hover { &:hover {
--#{$prefix}link-color-rgb: var(--#{$prefix}link-hover-color-rgb); --#{variables.$prefix}link-color-rgb: var(--#{variables.$prefix}link-hover-color-rgb);
text-decoration: $link-hover-decoration; text-decoration: variables.$link-hover-decoration;
} }
} }
@ -271,8 +275,8 @@ pre,
code, code,
kbd, kbd,
samp { samp {
font-family: $font-family-code; font-family: variables.$font-family-code;
@include font-size(1em); // Correct the odd `em` font sizing in all browsers. @include rfs.font-size(1em); // Correct the odd `em` font sizing in all browsers.
} }
// 1. Remove browser default top margin // 1. Remove browser default top margin
@ -284,20 +288,20 @@ pre {
margin-top: 0; // 1 margin-top: 0; // 1
margin-bottom: 1rem; // 2 margin-bottom: 1rem; // 2
overflow: auto; // 3 overflow: auto; // 3
@include font-size($code-font-size); @include rfs.font-size(variables.$code-font-size);
color: $pre-color; color: variables.$pre-color;
// Account for some code outputs that place code tags in pre tags // Account for some code outputs that place code tags in pre tags
code { code {
@include font-size(inherit); @include rfs.font-size(inherit);
color: inherit; color: inherit;
word-break: normal; word-break: normal;
} }
} }
code { code {
@include font-size($code-font-size); @include rfs.font-size(variables.$code-font-size);
color: var(--#{$prefix}code-color); color: var(--#{variables.$prefix}code-color);
word-wrap: break-word; word-wrap: break-word;
// Streamline the style when inside anchors to avoid broken underline and more // Streamline the style when inside anchors to avoid broken underline and more
@ -307,16 +311,16 @@ code {
} }
kbd { kbd {
padding: $kbd-padding-y $kbd-padding-x; padding: variables.$kbd-padding-y variables.$kbd-padding-x;
@include font-size($kbd-font-size); @include rfs.font-size(variables.$kbd-font-size);
color: $kbd-color; color: variables.$kbd-color;
background-color: $kbd-bg; background-color: variables.$kbd-bg;
@include border-radius($border-radius-sm); @include border-radius.border-radius(variables.$border-radius-sm);
kbd { kbd {
padding: 0; padding: 0;
@include font-size(1em); @include rfs.font-size(1em);
font-weight: $nested-kbd-font-weight; font-weight: variables.$nested-kbd-font-weight;
} }
} }
@ -348,9 +352,9 @@ table {
} }
caption { caption {
padding-top: $table-cell-padding-y; padding-top: variables.$table-cell-padding-y;
padding-bottom: $table-cell-padding-y; padding-bottom: variables.$table-cell-padding-y;
color: $table-caption-color; color: variables.$table-caption-color;
text-align: left; text-align: left;
} }
@ -359,7 +363,7 @@ caption {
// 3. Fix alignment for Safari // 3. Fix alignment for Safari
th { th {
font-weight: $table-th-font-weight; // 1 font-weight: variables.$table-th-font-weight; // 1
text-align: inherit; // 2 text-align: inherit; // 2
text-align: -webkit-match-parent; // 3 text-align: -webkit-match-parent; // 3
} }
@ -410,7 +414,7 @@ optgroup,
textarea { textarea {
margin: 0; // 1 margin: 0; // 1
font-family: inherit; font-family: inherit;
@include font-size(inherit); @include rfs.font-size(inherit);
line-height: inherit; line-height: inherit;
} }
@ -455,7 +459,7 @@ button,
[type="submit"] { [type="submit"] {
-webkit-appearance: button; // 2 -webkit-appearance: button; // 2
@if $enable-button-pointers { @if variables.$enable-button-pointers {
&:not(:disabled) { &:not(:disabled) {
cursor: pointer; // 3 cursor: pointer; // 3
} }
@ -498,10 +502,10 @@ legend {
float: left; // 1 float: left; // 1
width: 100%; width: 100%;
padding: 0; padding: 0;
margin-bottom: $legend-margin-bottom; margin-bottom: variables.$legend-margin-bottom;
font-weight: $legend-font-weight; font-weight: variables.$legend-font-weight;
line-height: inherit; line-height: inherit;
@include font-size($legend-font-size); @include rfs.font-size(variables.$legend-font-size);
+ * { + * {
clear: left; // 2 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, :root,
[data-bs-theme="light"] { [data-bs-theme="light"] {
// Note: Custom variable values only support SassScript inside `#{}`. // Note: Custom variable values only support SassScript inside `#{}`.
@ -41,8 +46,8 @@
// Note: Use `inspect` for lists so that quoted items keep the quotes. // Note: Use `inspect` for lists so that quoted items keep the quotes.
// See https://github.com/sass/sass/issues/2383#issuecomment-336349172 // See https://github.com/sass/sass/issues/2383#issuecomment-336349172
--#{$prefix}font-sans-serif: #{inspect($font-family-sans-serif)}; --#{$prefix}font-sans-serif: #{meta.inspect($font-family-sans-serif)};
--#{$prefix}font-monospace: #{inspect($font-family-monospace)}; --#{$prefix}font-monospace: #{meta.inspect($font-family-monospace)};
--#{$prefix}gradient: #{$gradient}; --#{$prefix}gradient: #{$gradient};
// Root and body // Root and body
@ -50,7 +55,7 @@
@if $font-size-root != null { @if $font-size-root != null {
--#{$prefix}root-font-size: #{$font-size-root}; --#{$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); @include rfs($font-size-base, --#{$prefix}body-font-size);
--#{$prefix}body-font-weight: #{$font-weight-base}; --#{$prefix}body-font-weight: #{$font-weight-base};
--#{$prefix}body-line-height: #{$line-height-base}; --#{$prefix}body-line-height: #{$line-height-base};

48
scss/_spinners.scss
View File

@ -1,3 +1,5 @@
@use "variables";
// //
// Rotating border // Rotating border
// //
@ -5,12 +7,12 @@
.spinner-grow, .spinner-grow,
.spinner-border { .spinner-border {
display: inline-block; display: inline-block;
width: var(--#{$prefix}spinner-width); width: var(--#{variables.$prefix}spinner-width);
height: var(--#{$prefix}spinner-height); height: var(--#{variables.$prefix}spinner-height);
vertical-align: var(--#{$prefix}spinner-vertical-align); vertical-align: var(--#{variables.$prefix}spinner-vertical-align);
// stylelint-disable-next-line property-disallowed-list // stylelint-disable-next-line property-disallowed-list
border-radius: 50%; 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 // scss-docs-start spinner-border-keyframes
@ -21,23 +23,23 @@
.spinner-border { .spinner-border {
// scss-docs-start spinner-border-css-vars // scss-docs-start spinner-border-css-vars
--#{$prefix}spinner-width: #{$spinner-width}; --#{variables.$prefix}spinner-width: #{variables.$spinner-width};
--#{$prefix}spinner-height: #{$spinner-height}; --#{variables.$prefix}spinner-height: #{variables.$spinner-height};
--#{$prefix}spinner-vertical-align: #{$spinner-vertical-align}; --#{variables.$prefix}spinner-vertical-align: #{variables.$spinner-vertical-align};
--#{$prefix}spinner-border-width: #{$spinner-border-width}; --#{variables.$prefix}spinner-border-width: #{variables.$spinner-border-width};
--#{$prefix}spinner-animation-speed: #{$spinner-animation-speed}; --#{variables.$prefix}spinner-animation-speed: #{variables.$spinner-animation-speed};
--#{$prefix}spinner-animation-name: spinner-border; --#{variables.$prefix}spinner-animation-name: spinner-border;
// scss-docs-end spinner-border-css-vars // 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; border-right-color: transparent;
} }
.spinner-border-sm { .spinner-border-sm {
// scss-docs-start spinner-border-sm-css-vars // scss-docs-start spinner-border-sm-css-vars
--#{$prefix}spinner-width: #{$spinner-width-sm}; --#{variables.$prefix}spinner-width: #{variables.$spinner-width-sm};
--#{$prefix}spinner-height: #{$spinner-height-sm}; --#{variables.$prefix}spinner-height: #{variables.$spinner-height-sm};
--#{$prefix}spinner-border-width: #{$spinner-border-width-sm}; --#{variables.$prefix}spinner-border-width: #{variables.$spinner-border-width-sm};
// scss-docs-end spinner-border-sm-css-vars // scss-docs-end spinner-border-sm-css-vars
} }
@ -59,11 +61,11 @@
.spinner-grow { .spinner-grow {
// scss-docs-start spinner-grow-css-vars // scss-docs-start spinner-grow-css-vars
--#{$prefix}spinner-width: #{$spinner-width}; --#{variables.$prefix}spinner-width: #{variables.$spinner-width};
--#{$prefix}spinner-height: #{$spinner-height}; --#{variables.$prefix}spinner-height: #{variables.$spinner-height};
--#{$prefix}spinner-vertical-align: #{$spinner-vertical-align}; --#{variables.$prefix}spinner-vertical-align: #{variables.$spinner-vertical-align};
--#{$prefix}spinner-animation-speed: #{$spinner-animation-speed}; --#{variables.$prefix}spinner-animation-speed: #{variables.$spinner-animation-speed};
--#{$prefix}spinner-animation-name: spinner-grow; --#{variables.$prefix}spinner-animation-name: spinner-grow;
// scss-docs-end spinner-grow-css-vars // scss-docs-end spinner-grow-css-vars
background-color: currentcolor; background-color: currentcolor;
@ -71,15 +73,15 @@
} }
.spinner-grow-sm { .spinner-grow-sm {
--#{$prefix}spinner-width: #{$spinner-width-sm}; --#{variables.$prefix}spinner-width: #{variables.$spinner-width-sm};
--#{$prefix}spinner-height: #{$spinner-height-sm}; --#{variables.$prefix}spinner-height: #{variables.$spinner-height-sm};
} }
@if $enable-reduced-motion { @if variables.$enable-reduced-motion {
@media (prefers-reduced-motion: reduce) { @media (prefers-reduced-motion: reduce) {
.spinner-border, .spinner-border,
.spinner-grow { .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 // Basic Bootstrap table
// //
.table { .table {
// Reset needed for nesting tables // Reset needed for nesting tables
--#{$prefix}table-color-type: initial; --#{variables.$prefix}table-color-type: initial;
--#{$prefix}table-bg-type: initial; --#{variables.$prefix}table-bg-type: initial;
--#{$prefix}table-color-state: initial; --#{variables.$prefix}table-color-state: initial;
--#{$prefix}table-bg-state: initial; --#{variables.$prefix}table-bg-state: initial;
// End of reset // End of reset
--#{$prefix}table-color: #{$table-color}; --#{variables.$prefix}table-color: #{variables.$table-color};
--#{$prefix}table-bg: #{$table-bg}; --#{variables.$prefix}table-bg: #{variables.$table-bg};
--#{$prefix}table-border-color: #{$table-border-color}; --#{variables.$prefix}table-border-color: #{variables.$table-border-color};
--#{$prefix}table-accent-bg: #{$table-accent-bg}; --#{variables.$prefix}table-accent-bg: #{variables.$table-accent-bg};
--#{$prefix}table-striped-color: #{$table-striped-color}; --#{variables.$prefix}table-striped-color: #{variables.$table-striped-color};
--#{$prefix}table-striped-bg: #{$table-striped-bg}; --#{variables.$prefix}table-striped-bg: #{variables.$table-striped-bg};
--#{$prefix}table-active-color: #{$table-active-color}; --#{variables.$prefix}table-active-color: #{variables.$table-active-color};
--#{$prefix}table-active-bg: #{$table-active-bg}; --#{variables.$prefix}table-active-bg: #{variables.$table-active-bg};
--#{$prefix}table-hover-color: #{$table-hover-color}; --#{variables.$prefix}table-hover-color: #{variables.$table-hover-color};
--#{$prefix}table-hover-bg: #{$table-hover-bg}; --#{variables.$prefix}table-hover-bg: #{variables.$table-hover-bg};
width: 100%; width: 100%;
margin-bottom: $spacer; margin-bottom: variables.$spacer;
vertical-align: $table-cell-vertical-align; vertical-align: variables.$table-cell-vertical-align;
border-color: var(--#{$prefix}table-border-color); border-color: var(--#{variables.$prefix}table-border-color);
// Target th & td // Target th & td
// We need the child combinator to prevent styles leaking to nested tables which doesn't have a `.table` class. // 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. // 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 // stylelint-disable-next-line selector-max-universal
> :not(caption) > * > * { > :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 // 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))); color: var(--#{variables.$prefix}table-color-state, var(--#{variables.$prefix}table-color-type, var(--#{variables.$prefix}table-color)));
background-color: var(--#{$prefix}table-bg); background-color: var(--#{variables.$prefix}table-bg);
border-bottom-width: $table-border-width; border-bottom-width: variables.$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))); 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 { > tbody {
@ -49,7 +54,7 @@
} }
.table-group-divider { .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 { .table-sm {
// stylelint-disable-next-line selector-max-universal // stylelint-disable-next-line selector-max-universal
> :not(caption) > * > * { > :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 { .table-bordered {
> :not(caption) > * { > :not(caption) > * {
border-width: $table-border-width 0; border-width: variables.$table-border-width 0;
// stylelint-disable-next-line selector-max-universal // 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 // For rows
.table-striped { .table-striped {
> tbody > tr:nth-of-type(#{$table-striped-order}) > * { > tbody > tr:nth-of-type(#{variables.$table-striped-order}) > * {
--#{$prefix}table-color-type: var(--#{$prefix}table-striped-color); --#{variables.$prefix}table-color-type: var(--#{variables.$prefix}table-striped-color);
--#{$prefix}table-bg-type: var(--#{$prefix}table-striped-bg); --#{variables.$prefix}table-bg-type: var(--#{variables.$prefix}table-striped-bg);
} }
} }
// For columns // For columns
.table-striped-columns { .table-striped-columns {
> :not(caption) > tr > :nth-child(#{$table-striped-columns-order}) { > :not(caption) > tr > :nth-child(#{variables.$table-striped-columns-order}) {
--#{$prefix}table-color-type: var(--#{$prefix}table-striped-color); --#{variables.$prefix}table-color-type: var(--#{variables.$prefix}table-striped-color);
--#{$prefix}table-bg-type: var(--#{$prefix}table-striped-bg); --#{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 // The `.table-active` class can be added to highlight rows or cells
.table-active { .table-active {
--#{$prefix}table-color-state: var(--#{$prefix}table-active-color); --#{variables.$prefix}table-color-state: var(--#{variables.$prefix}table-active-color);
--#{$prefix}table-bg-state: var(--#{$prefix}table-active-bg); --#{variables.$prefix}table-bg-state: var(--#{variables.$prefix}table-active-bg);
} }
// Hover effect // Hover effect
@ -139,8 +144,8 @@
.table-hover { .table-hover {
> tbody > tr:hover > * { > tbody > tr:hover > * {
--#{$prefix}table-color-state: var(--#{$prefix}table-hover-color); --#{variables.$prefix}table-color-state: var(--#{variables.$prefix}table-hover-color);
--#{$prefix}table-bg-state: var(--#{$prefix}table-hover-bg); --#{variables.$prefix}table-bg-state: var(--#{variables.$prefix}table-hover-bg);
} }
} }
@ -150,8 +155,8 @@
// Table variants set the table cell backgrounds, border colors // Table variants set the table cell backgrounds, border colors
// and the colors of the striped, hovered & active tables // and the colors of the striped, hovered & active tables
@each $color, $value in $table-variants { @each $color, $value in variables.$table-variants {
@include table-variant($color, $value); @include table-variants.table-variant($color, $value);
} }
// Responsive tables // Responsive tables
@ -159,10 +164,10 @@
// Generate series of `.table-responsive-*` classes for configuring the screen // Generate series of `.table-responsive-*` classes for configuring the screen
// size of where your table will overflow. // size of where your table will overflow.
@each $breakpoint in map-keys($grid-breakpoints) { @each $breakpoint in map.keys(variables.$grid-breakpoints) {
$infix: breakpoint-infix($breakpoint, $grid-breakpoints); $infix: breakpoints.breakpoint-infix($breakpoint, variables.$grid-breakpoints);
@include media-breakpoint-down($breakpoint) { @include breakpoints.media-breakpoint-down($breakpoint) {
.table-responsive#{$infix} { .table-responsive#{$infix} {
overflow-x: auto; overflow-x: auto;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;

70
scss/_toasts.scss
View File

@ -1,32 +1,36 @@
@use "mixins/border-radius";
@use "variables";
@use "vendor/rfs";
.toast { .toast {
// scss-docs-start toast-css-vars // scss-docs-start toast-css-vars
--#{$prefix}toast-zindex: #{$zindex-toast}; --#{variables.$prefix}toast-zindex: #{variables.$zindex-toast};
--#{$prefix}toast-padding-x: #{$toast-padding-x}; --#{variables.$prefix}toast-padding-x: #{variables.$toast-padding-x};
--#{$prefix}toast-padding-y: #{$toast-padding-y}; --#{variables.$prefix}toast-padding-y: #{variables.$toast-padding-y};
--#{$prefix}toast-spacing: #{$toast-spacing}; --#{variables.$prefix}toast-spacing: #{variables.$toast-spacing};
--#{$prefix}toast-max-width: #{$toast-max-width}; --#{variables.$prefix}toast-max-width: #{variables.$toast-max-width};
@include rfs($toast-font-size, --#{$prefix}toast-font-size); @include rfs.rfs(variables.$toast-font-size, --#{variables.$prefix}toast-font-size);
--#{$prefix}toast-color: #{$toast-color}; --#{variables.$prefix}toast-color: #{variables.$toast-color};
--#{$prefix}toast-bg: #{$toast-background-color}; --#{variables.$prefix}toast-bg: #{variables.$toast-background-color};
--#{$prefix}toast-border-width: #{$toast-border-width}; --#{variables.$prefix}toast-border-width: #{variables.$toast-border-width};
--#{$prefix}toast-border-color: #{$toast-border-color}; --#{variables.$prefix}toast-border-color: #{variables.$toast-border-color};
--#{$prefix}toast-border-radius: #{$toast-border-radius}; --#{variables.$prefix}toast-border-radius: #{variables.$toast-border-radius};
--#{$prefix}toast-box-shadow: #{$toast-box-shadow}; --#{variables.$prefix}toast-box-shadow: #{variables.$toast-box-shadow};
--#{$prefix}toast-header-color: #{$toast-header-color}; --#{variables.$prefix}toast-header-color: #{variables.$toast-header-color};
--#{$prefix}toast-header-bg: #{$toast-header-background-color}; --#{variables.$prefix}toast-header-bg: #{variables.$toast-header-background-color};
--#{$prefix}toast-header-border-color: #{$toast-header-border-color}; --#{variables.$prefix}toast-header-border-color: #{variables.$toast-header-border-color};
// scss-docs-end toast-css-vars // scss-docs-end toast-css-vars
width: var(--#{$prefix}toast-max-width); width: var(--#{variables.$prefix}toast-max-width);
max-width: 100%; max-width: 100%;
@include font-size(var(--#{$prefix}toast-font-size)); @include rfs.font-size(var(--#{variables.$prefix}toast-font-size));
color: var(--#{$prefix}toast-color); color: var(--#{variables.$prefix}toast-color);
pointer-events: auto; pointer-events: auto;
background-color: var(--#{$prefix}toast-bg); background-color: var(--#{variables.$prefix}toast-bg);
background-clip: padding-box; background-clip: padding-box;
border: var(--#{$prefix}toast-border-width) solid var(--#{$prefix}toast-border-color); border: var(--#{variables.$prefix}toast-border-width) solid var(--#{variables.$prefix}toast-border-color);
box-shadow: var(--#{$prefix}toast-box-shadow); box-shadow: var(--#{variables.$prefix}toast-box-shadow);
@include border-radius(var(--#{$prefix}toast-border-radius)); @include border-radius.border-radius(var(--#{variables.$prefix}toast-border-radius));
&.showing { &.showing {
opacity: 0; opacity: 0;
@ -38,36 +42,36 @@
} }
.toast-container { .toast-container {
--#{$prefix}toast-zindex: #{$zindex-toast}; --#{variables.$prefix}toast-zindex: #{variables.$zindex-toast};
position: absolute; position: absolute;
z-index: var(--#{$prefix}toast-zindex); z-index: var(--#{variables.$prefix}toast-zindex);
width: max-content; width: max-content;
max-width: 100%; max-width: 100%;
pointer-events: none; pointer-events: none;
> :not(:last-child) { > :not(:last-child) {
margin-bottom: var(--#{$prefix}toast-spacing); margin-bottom: var(--#{variables.$prefix}toast-spacing);
} }
} }
.toast-header { .toast-header {
display: flex; display: flex;
align-items: center; align-items: center;
padding: var(--#{$prefix}toast-padding-y) var(--#{$prefix}toast-padding-x); padding: var(--#{variables.$prefix}toast-padding-y) var(--#{variables.$prefix}toast-padding-x);
color: var(--#{$prefix}toast-header-color); color: var(--#{variables.$prefix}toast-header-color);
background-color: var(--#{$prefix}toast-header-bg); background-color: var(--#{variables.$prefix}toast-header-bg);
background-clip: padding-box; background-clip: padding-box;
border-bottom: var(--#{$prefix}toast-border-width) solid var(--#{$prefix}toast-header-border-color); border-bottom: var(--#{variables.$prefix}toast-border-width) solid var(--#{variables.$prefix}toast-header-border-color);
@include border-top-radius(calc(var(--#{$prefix}toast-border-radius) - var(--#{$prefix}toast-border-width))); @include border-radius.border-top-radius(calc(var(--#{variables.$prefix}toast-border-radius) - var(--#{variables.$prefix}toast-border-width)));
.btn-close { .btn-close {
margin-right: calc(-.5 * var(--#{$prefix}toast-padding-x)); // stylelint-disable-line function-disallowed-list margin-right: calc(-.5 * var(--#{variables.$prefix}toast-padding-x)); // stylelint-disable-line function-disallowed-list
margin-left: var(--#{$prefix}toast-padding-x); margin-left: var(--#{variables.$prefix}toast-padding-x);
} }
} }
.toast-body { .toast-body {
padding: var(--#{$prefix}toast-padding-x); padding: var(--#{variables.$prefix}toast-padding-x);
word-wrap: break-word; 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 // Base class
.tooltip { .tooltip {
// scss-docs-start tooltip-css-vars // scss-docs-start tooltip-css-vars
--#{$prefix}tooltip-zindex: #{$zindex-tooltip}; --#{variables.$prefix}tooltip-zindex: #{variables.$zindex-tooltip};
--#{$prefix}tooltip-max-width: #{$tooltip-max-width}; --#{variables.$prefix}tooltip-max-width: #{variables.$tooltip-max-width};
--#{$prefix}tooltip-padding-x: #{$tooltip-padding-x}; --#{variables.$prefix}tooltip-padding-x: #{variables.$tooltip-padding-x};
--#{$prefix}tooltip-padding-y: #{$tooltip-padding-y}; --#{variables.$prefix}tooltip-padding-y: #{variables.$tooltip-padding-y};
--#{$prefix}tooltip-margin: #{$tooltip-margin}; --#{variables.$prefix}tooltip-margin: #{variables.$tooltip-margin};
@include rfs($tooltip-font-size, --#{$prefix}tooltip-font-size); @include rfs.rfs(variables.$tooltip-font-size, --#{variables.$prefix}tooltip-font-size);
--#{$prefix}tooltip-color: #{$tooltip-color}; --#{variables.$prefix}tooltip-color: #{variables.$tooltip-color};
--#{$prefix}tooltip-bg: #{$tooltip-bg}; --#{variables.$prefix}tooltip-bg: #{variables.$tooltip-bg};
--#{$prefix}tooltip-border-radius: #{$tooltip-border-radius}; --#{variables.$prefix}tooltip-border-radius: #{variables.$tooltip-border-radius};
--#{$prefix}tooltip-opacity: #{$tooltip-opacity}; --#{variables.$prefix}tooltip-opacity: #{variables.$tooltip-opacity};
--#{$prefix}tooltip-arrow-width: #{$tooltip-arrow-width}; --#{variables.$prefix}tooltip-arrow-width: #{variables.$tooltip-arrow-width};
--#{$prefix}tooltip-arrow-height: #{$tooltip-arrow-height}; --#{variables.$prefix}tooltip-arrow-height: #{variables.$tooltip-arrow-height};
// scss-docs-end tooltip-css-vars // scss-docs-end tooltip-css-vars
z-index: var(--#{$prefix}tooltip-zindex); z-index: var(--#{variables.$prefix}tooltip-zindex);
display: block; display: block;
margin: var(--#{$prefix}tooltip-margin); margin: var(--#{variables.$prefix}tooltip-margin);
@include deprecate("`$tooltip-margin`", "v5", "v5.x", true); @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. // 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. // So reset our font and text properties to avoid inheriting weird values.
@include reset-text(); @include reset-text.reset-text();
@include font-size(var(--#{$prefix}tooltip-font-size)); @include rfs.font-size(var(--#{variables.$prefix}tooltip-font-size));
// Allow breaking very long words so they don't overflow the tooltip's bounds // Allow breaking very long words so they don't overflow the tooltip's bounds
word-wrap: break-word; word-wrap: break-word;
opacity: 0; opacity: 0;
&.show { opacity: var(--#{$prefix}tooltip-opacity); } &.show { opacity: var(--#{variables.$prefix}tooltip-opacity); }
.tooltip-arrow { .tooltip-arrow {
display: block; display: block;
width: var(--#{$prefix}tooltip-arrow-width); width: var(--#{variables.$prefix}tooltip-arrow-width);
height: var(--#{$prefix}tooltip-arrow-height); height: var(--#{variables.$prefix}tooltip-arrow-height);
&::before { &::before {
position: absolute; position: absolute;
@ -44,50 +50,50 @@
} }
.bs-tooltip-top .tooltip-arrow { .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 { &::before {
top: -1px; top: -1px;
border-width: var(--#{$prefix}tooltip-arrow-height) calc(var(--#{$prefix}tooltip-arrow-width) * .5) 0; // stylelint-disable-line function-disallowed-list 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(--#{$prefix}tooltip-bg); border-top-color: var(--#{variables.$prefix}tooltip-bg);
} }
} }
/* rtl:begin:ignore */ /* rtl:begin:ignore */
.bs-tooltip-end .tooltip-arrow { .bs-tooltip-end .tooltip-arrow {
left: calc(-1 * var(--#{$prefix}tooltip-arrow-height)); // stylelint-disable-line function-disallowed-list left: calc(-1 * var(--#{variables.$prefix}tooltip-arrow-height)); // stylelint-disable-line function-disallowed-list
width: var(--#{$prefix}tooltip-arrow-height); width: var(--#{variables.$prefix}tooltip-arrow-height);
height: var(--#{$prefix}tooltip-arrow-width); height: var(--#{variables.$prefix}tooltip-arrow-width);
&::before { &::before {
right: -1px; 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-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(--#{$prefix}tooltip-bg); border-right-color: var(--#{variables.$prefix}tooltip-bg);
} }
} }
/* rtl:end:ignore */ /* rtl:end:ignore */
.bs-tooltip-bottom .tooltip-arrow { .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 { &::before {
bottom: -1px; bottom: -1px;
border-width: 0 calc(var(--#{$prefix}tooltip-arrow-width) * .5) var(--#{$prefix}tooltip-arrow-height); // stylelint-disable-line function-disallowed-list 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(--#{$prefix}tooltip-bg); border-bottom-color: var(--#{variables.$prefix}tooltip-bg);
} }
} }
/* rtl:begin:ignore */ /* rtl:begin:ignore */
.bs-tooltip-start .tooltip-arrow { .bs-tooltip-start .tooltip-arrow {
right: calc(-1 * var(--#{$prefix}tooltip-arrow-height)); // stylelint-disable-line function-disallowed-list right: calc(-1 * var(--#{variables.$prefix}tooltip-arrow-height)); // stylelint-disable-line function-disallowed-list
width: var(--#{$prefix}tooltip-arrow-height); width: var(--#{variables.$prefix}tooltip-arrow-height);
height: var(--#{$prefix}tooltip-arrow-width); height: var(--#{variables.$prefix}tooltip-arrow-width);
&::before { &::before {
left: -1px; 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-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(--#{$prefix}tooltip-bg); border-left-color: var(--#{variables.$prefix}tooltip-bg);
} }
} }
@ -110,10 +116,10 @@
// Wrapper for the tooltip content // Wrapper for the tooltip content
.tooltip-inner { .tooltip-inner {
max-width: var(--#{$prefix}tooltip-max-width); max-width: var(--#{variables.$prefix}tooltip-max-width);
padding: var(--#{$prefix}tooltip-padding-y) var(--#{$prefix}tooltip-padding-x); padding: var(--#{variables.$prefix}tooltip-padding-y) var(--#{variables.$prefix}tooltip-padding-x);
color: var(--#{$prefix}tooltip-color); color: var(--#{variables.$prefix}tooltip-color);
text-align: center; text-align: center;
background-color: var(--#{$prefix}tooltip-bg); background-color: var(--#{variables.$prefix}tooltip-bg);
@include border-radius(var(--#{$prefix}tooltip-border-radius)); @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 { .fade {
@include transition($transition-fade); @include transition.transition(variables.$transition-fade);
&:not(.show) { &:not(.show) {
opacity: 0; opacity: 0;
@ -16,12 +19,12 @@
.collapsing { .collapsing {
height: 0; height: 0;
overflow: hidden; overflow: hidden;
@include transition($transition-collapse); @include transition.transition(variables.$transition-collapse);
&.collapse-horizontal { &.collapse-horizontal {
width: 0; width: 0;
height: auto; height: auto;
@include transition($transition-collapse-width); @include transition.transition(variables.$transition-collapse-width);
} }
} }
// scss-docs-end collapse-classes // scss-docs-end collapse-classes

40
scss/_type.scss
View File

@ -1,3 +1,7 @@
@use "mixins/lists";
@use "variables";
@use "vendor/rfs";
// //
// Headings // Headings
// //
@ -27,18 +31,18 @@
.lead { .lead {
@include font-size($lead-font-size); @include rfs.font-size(variables.$lead-font-size);
font-weight: $lead-font-weight; font-weight: variables.$lead-font-weight;
} }
// Type display classes // Type display classes
@each $display, $font-size in $display-font-sizes { @each $display, $font-size in variables.$display-font-sizes {
.display-#{$display} { .display-#{$display} {
font-family: $display-font-family; font-family: variables.$display-font-family;
font-style: $display-font-style; font-style: variables.$display-font-style;
font-weight: $display-font-weight; font-weight: variables.$display-font-weight;
line-height: $display-line-height; line-height: variables.$display-line-height;
@include font-size($font-size); @include rfs.font-size($font-size);
} }
} }
@ -58,18 +62,18 @@
// //
.list-unstyled { .list-unstyled {
@include list-unstyled(); @include lists.list-unstyled();
} }
// Inline turns list items into inline-block // Inline turns list items into inline-block
.list-inline { .list-inline {
@include list-unstyled(); @include lists.list-unstyled();
} }
.list-inline-item { .list-inline-item {
display: inline-block; display: inline-block;
&:not(:last-child) { &:not(:last-child) {
margin-right: $list-inline-padding; margin-right: variables.$list-inline-padding;
} }
} }
@ -80,14 +84,14 @@
// Builds on `abbr` // Builds on `abbr`
.initialism { .initialism {
@include font-size($initialism-font-size); @include rfs.font-size(variables.$initialism-font-size);
text-transform: uppercase; text-transform: uppercase;
} }
// Blockquotes // Blockquotes
.blockquote { .blockquote {
margin-bottom: $blockquote-margin-y; margin-bottom: variables.$blockquote-margin-y;
@include font-size($blockquote-font-size); @include rfs.font-size(variables.$blockquote-font-size);
> :last-child { > :last-child {
margin-bottom: 0; margin-bottom: 0;
@ -95,10 +99,10 @@
} }
.blockquote-footer { .blockquote-footer {
margin-top: -$blockquote-margin-y; margin-top: -(variables.$blockquote-margin-y);
margin-bottom: $blockquote-margin-y; margin-bottom: variables.$blockquote-margin-y;
@include font-size($blockquote-footer-font-size); @include rfs.font-size(variables.$blockquote-footer-font-size);
color: $blockquote-footer-color; color: variables.$blockquote-footer-color;
&::before { &::before {
content: "\2014\00A0"; // em dash, nbsp 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
$utilities: () !default; $utilities: () !default;
// stylelint-disable-next-line scss/dollar-variable-default // stylelint-disable-next-line scss/dollar-variable-default
$utilities: map-merge( $utilities: map.merge(
( (
// scss-docs-start utils-vertical-align // scss-docs-start utils-vertical-align
"align": ( "align": (
@ -77,9 +82,9 @@ $utilities: map-merge(
property: box-shadow, property: box-shadow,
class: shadow, class: shadow,
values: ( values: (
null: var(--#{$prefix}box-shadow), null: var(--#{variables.$prefix}box-shadow),
sm: var(--#{$prefix}box-shadow-sm), sm: var(--#{variables.$prefix}box-shadow-sm),
lg: var(--#{$prefix}box-shadow-lg), lg: var(--#{variables.$prefix}box-shadow-lg),
none: none, none: none,
) )
), ),
@ -89,7 +94,7 @@ $utilities: map-merge(
css-var: true, css-var: true,
css-variable-name: focus-ring-color, css-variable-name: focus-ring-color,
class: focus-ring, 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-end utils-focus-ring
// scss-docs-start utils-position // scss-docs-start utils-position
@ -99,21 +104,21 @@ $utilities: map-merge(
), ),
"top": ( "top": (
property: top, property: top,
values: $position-values values: variables.$position-values
), ),
"bottom": ( "bottom": (
property: bottom, property: bottom,
values: $position-values values: variables.$position-values
), ),
"start": ( "start": (
property: left, property: left,
class: start, class: start,
values: $position-values values: variables.$position-values
), ),
"end": ( "end": (
property: right, property: right,
class: end, class: end,
values: $position-values values: variables.$position-values
), ),
"translate-middle": ( "translate-middle": (
property: transform, property: transform,
@ -129,14 +134,14 @@ $utilities: map-merge(
"border": ( "border": (
property: border, property: border,
values: ( 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, 0: 0,
) )
), ),
"border-top": ( "border-top": (
property: border-top, property: border-top,
values: ( 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, 0: 0,
) )
), ),
@ -144,14 +149,14 @@ $utilities: map-merge(
property: border-right, property: border-right,
class: border-end, class: border-end,
values: ( 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, 0: 0,
) )
), ),
"border-bottom": ( "border-bottom": (
property: border-bottom, property: border-bottom,
values: ( 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, 0: 0,
) )
), ),
@ -159,7 +164,7 @@ $utilities: map-merge(
property: border-left, property: border-left,
class: border-start, class: border-start,
values: ( 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, 0: 0,
) )
), ),
@ -169,17 +174,17 @@ $utilities: map-merge(
local-vars: ( local-vars: (
"border-opacity": 1 "border-opacity": 1
), ),
values: $utilities-border-colors values: maps.$utilities-border-colors
), ),
"subtle-border-color": ( "subtle-border-color": (
property: border-color, property: border-color,
class: border, class: border,
values: $utilities-border-subtle values: maps.$utilities-border-subtle
), ),
"border-width": ( "border-width": (
property: border-width, property: border-width,
class: border, class: border,
values: $border-widths values: variables.$border-widths
), ),
"border-opacity": ( "border-opacity": (
css-var: true, css-var: true,
@ -353,148 +358,148 @@ $utilities: map-merge(
responsive: true, responsive: true,
property: margin, property: margin,
class: m, class: m,
values: map-merge($spacers, (auto: auto)) values: map.merge(variables.$spacers, (auto: auto))
), ),
"margin-x": ( "margin-x": (
responsive: true, responsive: true,
property: margin-right margin-left, property: margin-right margin-left,
class: mx, class: mx,
values: map-merge($spacers, (auto: auto)) values: map.merge(variables.$spacers, (auto: auto))
), ),
"margin-y": ( "margin-y": (
responsive: true, responsive: true,
property: margin-top margin-bottom, property: margin-top margin-bottom,
class: my, class: my,
values: map-merge($spacers, (auto: auto)) values: map.merge(variables.$spacers, (auto: auto))
), ),
"margin-top": ( "margin-top": (
responsive: true, responsive: true,
property: margin-top, property: margin-top,
class: mt, class: mt,
values: map-merge($spacers, (auto: auto)) values: map.merge(variables.$spacers, (auto: auto))
), ),
"margin-end": ( "margin-end": (
responsive: true, responsive: true,
property: margin-right, property: margin-right,
class: me, class: me,
values: map-merge($spacers, (auto: auto)) values: map.merge(variables.$spacers, (auto: auto))
), ),
"margin-bottom": ( "margin-bottom": (
responsive: true, responsive: true,
property: margin-bottom, property: margin-bottom,
class: mb, class: mb,
values: map-merge($spacers, (auto: auto)) values: map.merge(variables.$spacers, (auto: auto))
), ),
"margin-start": ( "margin-start": (
responsive: true, responsive: true,
property: margin-left, property: margin-left,
class: ms, class: ms,
values: map-merge($spacers, (auto: auto)) values: map.merge(variables.$spacers, (auto: auto))
), ),
// Negative margin utilities // Negative margin utilities
"negative-margin": ( "negative-margin": (
responsive: true, responsive: true,
property: margin, property: margin,
class: m, class: m,
values: $negative-spacers values: maps.$negative-spacers
), ),
"negative-margin-x": ( "negative-margin-x": (
responsive: true, responsive: true,
property: margin-right margin-left, property: margin-right margin-left,
class: mx, class: mx,
values: $negative-spacers values: maps.$negative-spacers
), ),
"negative-margin-y": ( "negative-margin-y": (
responsive: true, responsive: true,
property: margin-top margin-bottom, property: margin-top margin-bottom,
class: my, class: my,
values: $negative-spacers values: maps.$negative-spacers
), ),
"negative-margin-top": ( "negative-margin-top": (
responsive: true, responsive: true,
property: margin-top, property: margin-top,
class: mt, class: mt,
values: $negative-spacers values: maps.$negative-spacers
), ),
"negative-margin-end": ( "negative-margin-end": (
responsive: true, responsive: true,
property: margin-right, property: margin-right,
class: me, class: me,
values: $negative-spacers values: maps.$negative-spacers
), ),
"negative-margin-bottom": ( "negative-margin-bottom": (
responsive: true, responsive: true,
property: margin-bottom, property: margin-bottom,
class: mb, class: mb,
values: $negative-spacers values: maps.$negative-spacers
), ),
"negative-margin-start": ( "negative-margin-start": (
responsive: true, responsive: true,
property: margin-left, property: margin-left,
class: ms, class: ms,
values: $negative-spacers values: maps.$negative-spacers
), ),
// Padding utilities // Padding utilities
"padding": ( "padding": (
responsive: true, responsive: true,
property: padding, property: padding,
class: p, class: p,
values: $spacers values: variables.$spacers
), ),
"padding-x": ( "padding-x": (
responsive: true, responsive: true,
property: padding-right padding-left, property: padding-right padding-left,
class: px, class: px,
values: $spacers values: variables.$spacers
), ),
"padding-y": ( "padding-y": (
responsive: true, responsive: true,
property: padding-top padding-bottom, property: padding-top padding-bottom,
class: py, class: py,
values: $spacers values: variables.$spacers
), ),
"padding-top": ( "padding-top": (
responsive: true, responsive: true,
property: padding-top, property: padding-top,
class: pt, class: pt,
values: $spacers values: variables.$spacers
), ),
"padding-end": ( "padding-end": (
responsive: true, responsive: true,
property: padding-right, property: padding-right,
class: pe, class: pe,
values: $spacers values: variables.$spacers
), ),
"padding-bottom": ( "padding-bottom": (
responsive: true, responsive: true,
property: padding-bottom, property: padding-bottom,
class: pb, class: pb,
values: $spacers values: variables.$spacers
), ),
"padding-start": ( "padding-start": (
responsive: true, responsive: true,
property: padding-left, property: padding-left,
class: ps, class: ps,
values: $spacers values: variables.$spacers
), ),
// Gap utility // Gap utility
"gap": ( "gap": (
responsive: true, responsive: true,
property: gap, property: gap,
class: gap, class: gap,
values: $spacers values: variables.$spacers
), ),
"row-gap": ( "row-gap": (
responsive: true, responsive: true,
property: row-gap, property: row-gap,
class: row-gap, class: row-gap,
values: $spacers values: variables.$spacers
), ),
"column-gap": ( "column-gap": (
responsive: true, responsive: true,
property: column-gap, property: column-gap,
class: column-gap, class: column-gap,
values: $spacers values: variables.$spacers
), ),
// scss-docs-end utils-spacing // scss-docs-end utils-spacing
// Text // Text
@ -502,13 +507,13 @@ $utilities: map-merge(
"font-family": ( "font-family": (
property: font-family, property: font-family,
class: font, class: font,
values: (monospace: var(--#{$prefix}font-monospace)) values: (monospace: var(--#{variables.$prefix}font-monospace))
), ),
"font-size": ( "font-size": (
rfs: true, rfs: true,
property: font-size, property: font-size,
class: fs, class: fs,
values: $font-sizes values: variables.$font-sizes
), ),
"font-style": ( "font-style": (
property: font-style, property: font-style,
@ -519,13 +524,13 @@ $utilities: map-merge(
property: font-weight, property: font-weight,
class: fw, class: fw,
values: ( values: (
lighter: $font-weight-lighter, lighter: variables.$font-weight-lighter,
light: $font-weight-light, light: variables.$font-weight-light,
normal: $font-weight-normal, normal: variables.$font-weight-normal,
medium: $font-weight-medium, medium: variables.$font-weight-medium,
semibold: $font-weight-semibold, semibold: variables.$font-weight-semibold,
bold: $font-weight-bold, bold: variables.$font-weight-bold,
bolder: $font-weight-bolder bolder: variables.$font-weight-bolder
) )
), ),
"line-height": ( "line-height": (
@ -533,9 +538,9 @@ $utilities: map-merge(
class: lh, class: lh,
values: ( values: (
1: 1, 1: 1,
sm: $line-height-sm, sm: variables.$line-height-sm,
base: $line-height-base, base: variables.$line-height-base,
lg: $line-height-lg, lg: variables.$line-height-lg,
) )
), ),
"text-align": ( "text-align": (
@ -579,15 +584,15 @@ $utilities: map-merge(
local-vars: ( local-vars: (
"text-opacity": 1 "text-opacity": 1
), ),
values: map-merge( values: map.merge(
$utilities-text-colors, maps.$utilities-text-colors,
( (
"muted": var(--#{$prefix}secondary-color), // deprecated "muted": var(--#{variables.$prefix}secondary-color), // deprecated
"black-50": rgba($black, .5), // deprecated "black-50": rgba(variables.$black, .5), // deprecated
"white-50": rgba($white, .5), // deprecated "white-50": rgba(variables.$white, .5), // deprecated
"body-secondary": var(--#{$prefix}secondary-color), "body-secondary": var(--#{variables.$prefix}secondary-color),
"body-tertiary": var(--#{$prefix}tertiary-color), "body-tertiary": var(--#{variables.$prefix}tertiary-color),
"body-emphasis": var(--#{$prefix}emphasis-color), "body-emphasis": var(--#{variables.$prefix}emphasis-color),
"reset": inherit, "reset": inherit,
) )
) )
@ -605,7 +610,7 @@ $utilities: map-merge(
"text-color": ( "text-color": (
property: color, property: color,
class: text, class: text,
values: $utilities-text-emphasis-colors values: maps.$utilities-text-emphasis-colors
), ),
// scss-docs-end utils-color // scss-docs-end utils-color
// scss-docs-start utils-links // scss-docs-start utils-links
@ -637,10 +642,10 @@ $utilities: map-merge(
local-vars: ( local-vars: (
"link-underline-opacity": 1 "link-underline-opacity": 1
), ),
values: map-merge( values: map.merge(
$utilities-links-underline, 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: ( local-vars: (
"bg-opacity": 1 "bg-opacity": 1
), ),
values: map-merge( values: map.merge(
$utilities-bg-colors, maps.$utilities-bg-colors,
( (
"transparent": transparent, "transparent": transparent,
"body-secondary": rgba(var(--#{$prefix}secondary-bg-rgb), var(--#{$prefix}bg-opacity)), "body-secondary": rgba(var(--#{variables.$prefix}secondary-bg-rgb), var(--#{variables.$prefix}bg-opacity)),
"body-tertiary": rgba(var(--#{$prefix}tertiary-bg-rgb), var(--#{$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": ( "subtle-background-color": (
property: background-color, property: background-color,
class: bg, class: bg,
values: $utilities-bg-subtle values: maps.$utilities-bg-subtle
), ),
// scss-docs-end utils-bg-color // scss-docs-end utils-bg-color
"gradient": ( "gradient": (
property: background-image, property: background-image,
class: bg, class: bg,
values: (gradient: var(--#{$prefix}gradient)) values: (gradient: var(--#{variables.$prefix}gradient))
), ),
// scss-docs-start utils-interaction // scss-docs-start utils-interaction
"user-select": ( "user-select": (
@ -712,75 +717,75 @@ $utilities: map-merge(
property: border-radius, property: border-radius,
class: rounded, class: rounded,
values: ( values: (
null: var(--#{$prefix}border-radius), null: var(--#{variables.$prefix}border-radius),
0: 0, 0: 0,
1: var(--#{$prefix}border-radius-sm), 1: var(--#{variables.$prefix}border-radius-sm),
2: var(--#{$prefix}border-radius), 2: var(--#{variables.$prefix}border-radius),
3: var(--#{$prefix}border-radius-lg), 3: var(--#{variables.$prefix}border-radius-lg),
4: var(--#{$prefix}border-radius-xl), 4: var(--#{variables.$prefix}border-radius-xl),
5: var(--#{$prefix}border-radius-xxl), 5: var(--#{variables.$prefix}border-radius-xxl),
circle: 50%, circle: 50%,
pill: var(--#{$prefix}border-radius-pill) pill: var(--#{variables.$prefix}border-radius-pill)
) )
), ),
"rounded-top": ( "rounded-top": (
property: border-top-left-radius border-top-right-radius, property: border-top-left-radius border-top-right-radius,
class: rounded-top, class: rounded-top,
values: ( values: (
null: var(--#{$prefix}border-radius), null: var(--#{variables.$prefix}border-radius),
0: 0, 0: 0,
1: var(--#{$prefix}border-radius-sm), 1: var(--#{variables.$prefix}border-radius-sm),
2: var(--#{$prefix}border-radius), 2: var(--#{variables.$prefix}border-radius),
3: var(--#{$prefix}border-radius-lg), 3: var(--#{variables.$prefix}border-radius-lg),
4: var(--#{$prefix}border-radius-xl), 4: var(--#{variables.$prefix}border-radius-xl),
5: var(--#{$prefix}border-radius-xxl), 5: var(--#{variables.$prefix}border-radius-xxl),
circle: 50%, circle: 50%,
pill: var(--#{$prefix}border-radius-pill) pill: var(--#{variables.$prefix}border-radius-pill)
) )
), ),
"rounded-end": ( "rounded-end": (
property: border-top-right-radius border-bottom-right-radius, property: border-top-right-radius border-bottom-right-radius,
class: rounded-end, class: rounded-end,
values: ( values: (
null: var(--#{$prefix}border-radius), null: var(--#{variables.$prefix}border-radius),
0: 0, 0: 0,
1: var(--#{$prefix}border-radius-sm), 1: var(--#{variables.$prefix}border-radius-sm),
2: var(--#{$prefix}border-radius), 2: var(--#{variables.$prefix}border-radius),
3: var(--#{$prefix}border-radius-lg), 3: var(--#{variables.$prefix}border-radius-lg),
4: var(--#{$prefix}border-radius-xl), 4: var(--#{variables.$prefix}border-radius-xl),
5: var(--#{$prefix}border-radius-xxl), 5: var(--#{variables.$prefix}border-radius-xxl),
circle: 50%, circle: 50%,
pill: var(--#{$prefix}border-radius-pill) pill: var(--#{variables.$prefix}border-radius-pill)
) )
), ),
"rounded-bottom": ( "rounded-bottom": (
property: border-bottom-right-radius border-bottom-left-radius, property: border-bottom-right-radius border-bottom-left-radius,
class: rounded-bottom, class: rounded-bottom,
values: ( values: (
null: var(--#{$prefix}border-radius), null: var(--#{variables.$prefix}border-radius),
0: 0, 0: 0,
1: var(--#{$prefix}border-radius-sm), 1: var(--#{variables.$prefix}border-radius-sm),
2: var(--#{$prefix}border-radius), 2: var(--#{variables.$prefix}border-radius),
3: var(--#{$prefix}border-radius-lg), 3: var(--#{variables.$prefix}border-radius-lg),
4: var(--#{$prefix}border-radius-xl), 4: var(--#{variables.$prefix}border-radius-xl),
5: var(--#{$prefix}border-radius-xxl), 5: var(--#{variables.$prefix}border-radius-xxl),
circle: 50%, circle: 50%,
pill: var(--#{$prefix}border-radius-pill) pill: var(--#{variables.$prefix}border-radius-pill)
) )
), ),
"rounded-start": ( "rounded-start": (
property: border-bottom-left-radius border-top-left-radius, property: border-bottom-left-radius border-top-left-radius,
class: rounded-start, class: rounded-start,
values: ( values: (
null: var(--#{$prefix}border-radius), null: var(--#{variables.$prefix}border-radius),
0: 0, 0: 0,
1: var(--#{$prefix}border-radius-sm), 1: var(--#{variables.$prefix}border-radius-sm),
2: var(--#{$prefix}border-radius), 2: var(--#{variables.$prefix}border-radius),
3: var(--#{$prefix}border-radius-lg), 3: var(--#{variables.$prefix}border-radius-lg),
4: var(--#{$prefix}border-radius-xl), 4: var(--#{variables.$prefix}border-radius-xl),
5: var(--#{$prefix}border-radius-xxl), 5: var(--#{variables.$prefix}border-radius-xxl),
circle: 50%, circle: 50%,
pill: var(--#{$prefix}border-radius-pill) pill: var(--#{variables.$prefix}border-radius-pill)
) )
), ),
// scss-docs-end utils-border-radius // scss-docs-end utils-border-radius
@ -798,7 +803,7 @@ $utilities: map-merge(
"z-index": ( "z-index": (
property: z-index, property: z-index,
class: z, class: z,
values: $zindex-levels, values: variables.$zindex-levels,
) )
// scss-docs-end utils-zindex // scss-docs-end utils-zindex
), ),

148
scss/_variables-dark.scss
View File

@ -1,87 +1,89 @@
// Dark color mode variables @use "setup/variables" as *;
//
// 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.
// // // Dark color mode variables
// Global colors // //
// // // 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 // // Global colors
$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 // // scss-docs-start sass-dark-mode-vars
$primary-bg-subtle-dark: shade-color($primary, 80%) !default; // // scss-docs-start theme-text-dark-variables
$secondary-bg-subtle-dark: shade-color($secondary, 80%) !default; // $primary-text-emphasis-dark: tint-color($primary, 40%) !default;
$success-bg-subtle-dark: shade-color($success, 80%) !default; // $secondary-text-emphasis-dark: tint-color($secondary, 40%) !default;
$info-bg-subtle-dark: shade-color($info, 80%) !default; // $success-text-emphasis-dark: tint-color($success, 40%) !default;
$warning-bg-subtle-dark: shade-color($warning, 80%) !default; // $info-text-emphasis-dark: tint-color($info, 40%) !default;
$danger-bg-subtle-dark: shade-color($danger, 80%) !default; // $warning-text-emphasis-dark: tint-color($warning, 40%) !default;
$light-bg-subtle-dark: $gray-800 !default; // $danger-text-emphasis-dark: tint-color($danger, 40%) !default;
$dark-bg-subtle-dark: mix($gray-800, $black) !default; // $light-text-emphasis-dark: $gray-100 !default;
// scss-docs-end theme-bg-subtle-dark-variables // $dark-text-emphasis-dark: $gray-300 !default;
// // scss-docs-end theme-text-dark-variables
// scss-docs-start theme-border-subtle-dark-variables // // scss-docs-start theme-bg-subtle-dark-variables
$primary-border-subtle-dark: shade-color($primary, 40%) !default; // $primary-bg-subtle-dark: shade-color($primary, 80%) !default;
$secondary-border-subtle-dark: shade-color($secondary, 40%) !default; // $secondary-bg-subtle-dark: shade-color($secondary, 80%) !default;
$success-border-subtle-dark: shade-color($success, 40%) !default; // $success-bg-subtle-dark: shade-color($success, 80%) !default;
$info-border-subtle-dark: shade-color($info, 40%) !default; // $info-bg-subtle-dark: shade-color($info, 80%) !default;
$warning-border-subtle-dark: shade-color($warning, 40%) !default; // $warning-bg-subtle-dark: shade-color($warning, 80%) !default;
$danger-border-subtle-dark: shade-color($danger, 40%) !default; // $danger-bg-subtle-dark: shade-color($danger, 80%) !default;
$light-border-subtle-dark: $gray-700 !default; // $light-bg-subtle-dark: $gray-800 !default;
$dark-border-subtle-dark: $gray-800 !default; // $dark-bg-subtle-dark: mix($gray-800, $black) !default;
// scss-docs-end theme-border-subtle-dark-variables // // scss-docs-end theme-bg-subtle-dark-variables
$body-color-dark: $gray-300 !default; // // scss-docs-start theme-border-subtle-dark-variables
$body-bg-dark: $gray-900 !default; // $primary-border-subtle-dark: shade-color($primary, 40%) !default;
$body-secondary-color-dark: rgba($body-color-dark, .75) !default; // $secondary-border-subtle-dark: shade-color($secondary, 40%) !default;
$body-secondary-bg-dark: $gray-800 !default; // $success-border-subtle-dark: shade-color($success, 40%) !default;
$body-tertiary-color-dark: rgba($body-color-dark, .5) !default; // $info-border-subtle-dark: shade-color($info, 40%) !default;
$body-tertiary-bg-dark: mix($gray-800, $gray-900, 50%) !default; // $warning-border-subtle-dark: shade-color($warning, 40%) !default;
$body-emphasis-color-dark: $white !default; // $danger-border-subtle-dark: shade-color($danger, 40%) !default;
$border-color-dark: $gray-700 !default; // $light-border-subtle-dark: $gray-700 !default;
$border-color-translucent-dark: rgba($white, .15) !default; // $dark-border-subtle-dark: $gray-800 !default;
$headings-color-dark: inherit !default; // // scss-docs-end theme-border-subtle-dark-variables
$link-color-dark: tint-color($primary, 40%) !default;
$link-hover-color-dark: shift-color($link-color-dark, -$link-shade-percentage) !default; // $body-color-dark: $gray-300 !default;
$code-color-dark: tint-color($code-color, 40%) !default; // $body-bg-dark: $gray-900 !default;
$mark-color-dark: $body-color-dark !default; // $body-secondary-color-dark: rgba($body-color-dark, .75) !default;
$mark-bg-dark: $yellow-800 !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-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-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-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-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 // // scss-docs-start form-validation-colors-dark
$form-valid-color-dark: $green-300 !default; // $form-valid-color-dark: $green-300 !default;
$form-valid-border-color-dark: $green-300 !default; // $form-valid-border-color-dark: $green-300 !default;
$form-invalid-color-dark: $red-300 !default; // $form-invalid-color-dark: $red-300 !default;
$form-invalid-border-color-dark: $red-300 !default; // $form-invalid-border-color-dark: $red-300 !default;
// scss-docs-end form-validation-colors-dark // // scss-docs-end form-validation-colors-dark
// // //
// Accordion // // Accordion
// // //
$accordion-icon-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-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-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; // $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 // // 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 // scss-docs-start import-stack
// Configuration // Configuration
@import "functions"; // @use "functions";
@import "variables"; // @use "variables";
@import "variables-dark"; @use "setup" as *;
@import "maps"; // @use "mixins";
@import "mixins"; // @use "variables-dark";
@import "utilities"; // @use "maps";
// @use "utilities";
// Layout & components // Layout & components
@import "root"; @use "root";
@import "reboot"; // @use "reboot";
@import "type"; // @use "type";
@import "images"; // @use "images";
@import "containers"; // @use "containers";
@import "grid"; // @use "grid";
@import "tables"; // @use "tables";
@import "forms"; // @use "forms";
@import "buttons"; // @use "buttons";
@import "transitions"; // @use "transitions";
@import "dropdown"; // @use "dropdown";
@import "button-group"; // @use "button-group";
@import "nav"; // @use "nav";
@import "navbar"; // @use "navbar";
@import "card"; // @use "card";
@import "accordion"; // @use "accordion";
@import "breadcrumb"; // @use "breadcrumb";
@import "pagination"; // @use "pagination";
@import "badge"; // @use "badge";
@import "alert"; // @use "alert";
@import "progress"; // @use "progress";
@import "list-group"; // @use "list-group";
@import "close"; // @use "close";
@import "toasts"; // @use "toasts";
@import "modal"; // @use "modal";
@import "tooltip"; // @use "tooltip";
@import "popover"; // @use "popover";
@import "carousel"; // @use "carousel";
@import "spinners"; // @use "spinners";
@import "offcanvas"; // @use "offcanvas";
@import "placeholders"; // @use "placeholders";
// Helpers // // Helpers
@import "helpers"; // @use "helpers";
// Utilities // // Utilities
@import "utilities/api"; // @use "utilities/api";
// scss-docs-end import-stack // // 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 { .form-floating {
position: relative; position: relative;
> .form-control, > .form-control,
> .form-control-plaintext, > .form-control-plaintext,
> .form-select { > .form-select {
height: $form-floating-height; height: variables.$form-floating-height;
min-height: $form-floating-height; min-height: variables.$form-floating-height;
line-height: $form-floating-line-height; line-height: variables.$form-floating-line-height;
} }
> label { > label {
@ -16,21 +20,21 @@
z-index: 2; z-index: 2;
max-width: 100%; max-width: 100%;
height: 100%; // allow textareas 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; 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-align: start;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
pointer-events: none; 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; transform-origin: 0 0;
@include transition($form-floating-transition); @include transition.transition(variables.$form-floating-transition);
} }
> .form-control, > .form-control,
> .form-control-plaintext { > .form-control-plaintext {
padding: $form-floating-padding-y $form-floating-padding-x; padding: variables.$form-floating-padding-y variables.$form-floating-padding-x;
&::placeholder { &::placeholder {
color: transparent; color: transparent;
@ -38,19 +42,19 @@
&:focus, &:focus,
&:not(:placeholder-shown) { &:not(:placeholder-shown) {
padding-top: $form-floating-input-padding-t; padding-top: variables.$form-floating-input-padding-t;
padding-bottom: $form-floating-input-padding-b; padding-bottom: variables.$form-floating-input-padding-b;
} }
// Duplicated because `:-webkit-autofill` invalidates other selectors when grouped // Duplicated because `:-webkit-autofill` invalidates other selectors when grouped
&:-webkit-autofill { &:-webkit-autofill {
padding-top: $form-floating-input-padding-t; padding-top: variables.$form-floating-input-padding-t;
padding-bottom: $form-floating-input-padding-b; padding-bottom: variables.$form-floating-input-padding-b;
} }
} }
> .form-select { > .form-select {
padding-top: $form-floating-input-padding-t; padding-top: variables.$form-floating-input-padding-t;
padding-bottom: $form-floating-input-padding-b; padding-bottom: variables.$form-floating-input-padding-b;
} }
> .form-control:focus, > .form-control:focus,
@ -58,39 +62,39 @@
> .form-control-plaintext, > .form-control-plaintext,
> .form-select { > .form-select {
~ label { ~ label {
transform: $form-floating-label-transform; transform: variables.$form-floating-label-transform;
} }
} }
// Duplicated because `:-webkit-autofill` invalidates other selectors when grouped // Duplicated because `:-webkit-autofill` invalidates other selectors when grouped
> .form-control:-webkit-autofill { > .form-control:-webkit-autofill {
~ label { ~ label {
transform: $form-floating-label-transform; transform: variables.$form-floating-label-transform;
} }
} }
> textarea:focus, > textarea:focus,
> textarea:not(:placeholder-shown) { > textarea:not(:placeholder-shown) {
~ label::after { ~ label::after {
position: absolute; 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; z-index: -1;
height: $form-floating-label-height; height: variables.$form-floating-label-height;
content: ""; content: "";
background-color: $input-bg; background-color: variables.$input-bg;
@include border-radius($input-border-radius); @include border-radius.border-radius(variables.$input-border-radius);
} }
} }
> textarea:disabled ~ label::after { > textarea:disabled ~ label::after {
background-color: $input-disabled-bg; background-color: variables.$input-disabled-bg;
} }
> .form-control-plaintext { > .form-control-plaintext {
~ label { ~ 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, > :disabled ~ label,
> .form-control:disabled ~ label { // Required for `.form-control`s because of specificity > .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 // Check/radio
// //
.form-check { .form-check {
display: block; display: block;
min-height: $form-check-min-height; min-height: variables.$form-check-min-height;
padding-left: $form-check-padding-start; padding-left: variables.$form-check-padding-start;
margin-bottom: $form-check-margin-bottom; margin-bottom: variables.$form-check-margin-bottom;
.form-check-input { .form-check-input {
float: left; float: left;
margin-left: $form-check-padding-start * -1; margin-left: variables.$form-check-padding-start * -1;
} }
} }
.form-check-reverse { .form-check-reverse {
padding-right: $form-check-padding-start; padding-right: variables.$form-check-padding-start;
padding-left: 0; padding-left: 0;
text-align: right; text-align: right;
.form-check-input { .form-check-input {
float: right; float: right;
margin-right: $form-check-padding-start * -1; margin-right: variables.$form-check-padding-start * -1;
margin-left: 0; margin-left: 0;
} }
} }
.form-check-input { .form-check-input {
--#{$prefix}form-check-bg: #{$form-check-input-bg}; --#{variables.$prefix}form-check-bg: #{variables.$form-check-input-bg};
flex-shrink: 0; flex-shrink: 0;
width: $form-check-input-width; width: variables.$form-check-input-width;
height: $form-check-input-width; height: variables.$form-check-input-width;
margin-top: ($line-height-base - $form-check-input-width) * .5; // line-height minus check height margin-top: (variables.$line-height-base - variables.$form-check-input-width) * .5; // line-height minus check height
vertical-align: top; vertical-align: top;
appearance: none; appearance: none;
background-color: var(--#{$prefix}form-check-bg); background-color: var(--#{variables.$prefix}form-check-bg);
background-image: var(--#{$prefix}form-check-bg-image); background-image: var(--#{variables.$prefix}form-check-bg-image);
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
background-size: contain; background-size: contain;
border: $form-check-input-border; border: variables.$form-check-input-border;
print-color-adjust: exact; // Keep themed appearance for print print-color-adjust: exact; // Keep themed appearance for print
@include transition($form-check-transition); @include transition.transition(variables.$form-check-transition);
&[type="checkbox"] { &[type="checkbox"] {
@include border-radius($form-check-input-border-radius); @include border-radius.border-radius(variables.$form-check-input-border-radius);
} }
&[type="radio"] { &[type="radio"] {
// stylelint-disable-next-line property-disallowed-list // stylelint-disable-next-line property-disallowed-list
border-radius: $form-check-radio-border-radius; border-radius: variables.$form-check-radio-border-radius;
} }
&:active { &:active {
filter: $form-check-input-active-filter; filter: variables.$form-check-input-active-filter;
} }
&:focus { &:focus {
border-color: $form-check-input-focus-border; border-color: variables.$form-check-input-focus-border;
outline: 0; outline: 0;
box-shadow: $form-check-input-focus-box-shadow; box-shadow: variables.$form-check-input-focus-box-shadow;
} }
&:checked { &:checked {
background-color: $form-check-input-checked-bg-color; background-color: variables.$form-check-input-checked-bg-color;
border-color: $form-check-input-checked-border-color; border-color: variables.$form-check-input-checked-border-color;
&[type="checkbox"] { &[type="checkbox"] {
@if $enable-gradients { @if variables.$enable-gradients {
--#{$prefix}form-check-bg-image: #{escape-svg($form-check-input-checked-bg-image)}, var(--#{$prefix}gradient); --#{variables.$prefix}form-check-bg-image: #{functions.escape-svg(variables.$form-check-input-checked-bg-image)}, var(--#{variables.$prefix}gradient);
} @else { } @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"] { &[type="radio"] {
@if $enable-gradients { @if variables.$enable-gradients {
--#{$prefix}form-check-bg-image: #{escape-svg($form-check-radio-checked-bg-image)}, var(--#{$prefix}gradient); --#{variables.$prefix}form-check-bg-image: #{functions.escape-svg(variables.$form-check-radio-checked-bg-image)}, var(--#{variables.$prefix}gradient);
} @else { } @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 { &[type="checkbox"]:indeterminate {
background-color: $form-check-input-indeterminate-bg-color; background-color: variables.$form-check-input-indeterminate-bg-color;
border-color: $form-check-input-indeterminate-border-color; border-color: variables.$form-check-input-indeterminate-border-color;
@if $enable-gradients { @if variables.$enable-gradients {
--#{$prefix}form-check-bg-image: #{escape-svg($form-check-input-indeterminate-bg-image)}, var(--#{$prefix}gradient); --#{variables.$prefix}form-check-bg-image: #{functions.escape-svg(variables.$form-check-input-indeterminate-bg-image)}, var(--#{variables.$prefix}gradient);
} @else { } @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 { &:disabled {
pointer-events: none; pointer-events: none;
filter: 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 // Use disabled attribute in addition of :disabled pseudo-class
@ -107,14 +113,14 @@
&:disabled { &:disabled {
~ .form-check-label { ~ .form-check-label {
cursor: default; cursor: default;
opacity: $form-check-label-disabled-opacity; opacity: variables.$form-check-label-disabled-opacity;
} }
} }
} }
.form-check-label { .form-check-label {
color: $form-check-label-color; color: variables.$form-check-label-color;
cursor: $form-check-label-cursor; cursor: variables.$form-check-label-cursor;
} }
// //
@ -122,39 +128,39 @@
// //
.form-switch { .form-switch {
padding-left: $form-switch-padding-start; padding-left: variables.$form-switch-padding-start;
.form-check-input { .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; width: variables.$form-switch-width;
margin-left: $form-switch-padding-start * -1; margin-left: variables.$form-switch-padding-start * -1;
background-image: var(--#{$prefix}form-switch-bg); background-image: var(--#{variables.$prefix}form-switch-bg);
background-position: left center; background-position: left center;
@include border-radius($form-switch-border-radius, 0); @include border-radius.border-radius(variables.$form-switch-border-radius, 0);
@include transition($form-switch-transition); @include transition.transition(variables.$form-switch-transition);
&:focus { &: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 { &:checked {
background-position: $form-switch-checked-bg-position; background-position: variables.$form-switch-checked-bg-position;
@if $enable-gradients { @if variables.$enable-gradients {
--#{$prefix}form-switch-bg: #{escape-svg($form-switch-checked-bg-image)}, var(--#{$prefix}gradient); --#{variables.$prefix}form-switch-bg: #{functions.escape-svg(variables.$form-switch-checked-bg-image)}, var(--#{variables.$prefix}gradient);
} @else { } @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 { &.form-check-reverse {
padding-right: $form-switch-padding-start; padding-right: variables.$form-switch-padding-start;
padding-left: 0; padding-left: 0;
.form-check-input { .form-check-input {
margin-right: $form-switch-padding-start * -1; margin-right: variables.$form-switch-padding-start * -1;
margin-left: 0; margin-left: 0;
} }
} }
@ -162,7 +168,7 @@
.form-check-inline { .form-check-inline {
display: inline-block; display: inline-block;
margin-right: $form-check-inline-margin-end; margin-right: variables.$form-check-inline-margin-end;
} }
.btn-check { .btn-check {
@ -175,15 +181,15 @@
+ .btn { + .btn {
pointer-events: none; pointer-events: none;
filter: none; filter: none;
opacity: $form-check-btn-check-disabled-opacity; opacity: variables.$form-check-btn-check-disabled-opacity;
} }
} }
} }
@if $enable-dark-mode { @if variables.$enable-dark-mode {
@include color-mode(dark) { @include color-mode.color-mode(dark) {
.form-switch .form-check-input:not(:checked):not(:focus) { .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) // General form controls (plus a few specific high-level interventions)
// //
@ -5,22 +13,22 @@
.form-control { .form-control {
display: block; display: block;
width: 100%; width: 100%;
padding: $input-padding-y $input-padding-x; padding: variables.$input-padding-y variables.$input-padding-x;
font-family: $input-font-family; font-family: variables.$input-font-family;
@include font-size($input-font-size); @include rfs.font-size(variables.$input-font-size);
font-weight: $input-font-weight; font-weight: variables.$input-font-weight;
line-height: $input-line-height; line-height: variables.$input-line-height;
color: $input-color; color: variables.$input-color;
appearance: none; // Fix appearance for date inputs in Safari appearance: none; // Fix appearance for date inputs in Safari
background-color: $input-bg; background-color: variables.$input-bg;
background-clip: padding-box; 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. // 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 box-shadow.box-shadow(variables.$input-box-shadow);
@include transition($input-transition); @include transition.transition(variables.$input-transition);
&[type="file"] { &[type="file"] {
overflow: hidden; // prevent pseudo element button overlap overflow: hidden; // prevent pseudo element button overlap
@ -32,15 +40,15 @@
// Customize the `:focus` state to imitate native WebKit styles. // Customize the `:focus` state to imitate native WebKit styles.
&:focus { &:focus {
color: $input-focus-color; color: variables.$input-focus-color;
background-color: $input-focus-bg; background-color: variables.$input-focus-bg;
border-color: $input-focus-border-color; border-color: variables.$input-focus-border-color;
outline: 0; outline: 0;
@if $enable-shadows { @if variables.$enable-shadows {
@include box-shadow($input-box-shadow, $input-focus-box-shadow); @include box-shadow.box-shadow(variables.$input-box-shadow, variables.$input-focus-box-shadow);
} @else { } @else {
// Avoid using mixin so we can pass custom focus shadow properly // 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 // 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 // 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 // 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 // Android Chrome type="date" is taller than the other inputs
// because of "margin: 1px 24px 1px 4px" inside the shadow DOM // because of "margin: 1px 24px 1px 4px" inside the shadow DOM
@ -73,7 +81,7 @@
// Placeholder // Placeholder
&::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. // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526.
opacity: 1; opacity: 1;
} }
@ -84,31 +92,31 @@
// disabled if the fieldset is disabled. Due to implementation difficulty, we // disabled if the fieldset is disabled. Due to implementation difficulty, we
// don't honor that edge case; we style them as disabled anyway. // don't honor that edge case; we style them as disabled anyway.
&:disabled { &:disabled {
color: $input-disabled-color; color: variables.$input-disabled-color;
background-color: $input-disabled-bg; background-color: variables.$input-disabled-bg;
border-color: $input-disabled-border-color; border-color: variables.$input-disabled-border-color;
// iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655. // iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655.
opacity: 1; opacity: 1;
} }
// File input buttons theming // File input buttons theming
&::file-selector-button { &::file-selector-button {
padding: $input-padding-y $input-padding-x; padding: variables.$input-padding-y variables.$input-padding-x;
margin: (-$input-padding-y) (-$input-padding-x); margin: (-(variables.$input-padding-y)) (-(variables.$input-padding-x));
margin-inline-end: $input-padding-x; margin-inline-end: variables.$input-padding-x;
color: $form-file-button-color; color: variables.$form-file-button-color;
@include gradient-bg($form-file-button-bg); @include gradients.gradient-bg(variables.$form-file-button-bg);
pointer-events: none; pointer-events: none;
border-color: inherit; border-color: inherit;
border-style: solid; border-style: solid;
border-width: 0; 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 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 { &: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 { .form-control-plaintext {
display: block; display: block;
width: 100%; 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 margin-bottom: 0; // match inputs if this class comes on inputs with default margins
line-height: $input-line-height; line-height: variables.$input-line-height;
color: $input-plaintext-color; color: variables.$input-plaintext-color;
background-color: transparent; background-color: transparent;
border: solid transparent; border: solid transparent;
border-width: $input-border-width 0; border-width: variables.$input-border-width 0;
&:focus { &:focus {
outline: 0; outline: 0;
@ -147,28 +155,28 @@
// Repeated in `_input_group.scss` to avoid Sass extend issues. // Repeated in `_input_group.scss` to avoid Sass extend issues.
.form-control-sm { .form-control-sm {
min-height: $input-height-sm; min-height: variables.$input-height-sm;
padding: $input-padding-y-sm $input-padding-x-sm; padding: variables.$input-padding-y-sm variables.$input-padding-x-sm;
@include font-size($input-font-size-sm); @include rfs.font-size(variables.$input-font-size-sm);
@include border-radius($input-border-radius-sm); @include border-radius.border-radius(variables.$input-border-radius-sm);
&::file-selector-button { &::file-selector-button {
padding: $input-padding-y-sm $input-padding-x-sm; padding: variables.$input-padding-y-sm variables.$input-padding-x-sm;
margin: (-$input-padding-y-sm) (-$input-padding-x-sm); margin: (-(variables.$input-padding-y-sm)) (-(variables.$input-padding-x-sm));
margin-inline-end: $input-padding-x-sm; margin-inline-end: variables.$input-padding-x-sm;
} }
} }
.form-control-lg { .form-control-lg {
min-height: $input-height-lg; min-height: variables.$input-height-lg;
padding: $input-padding-y-lg $input-padding-x-lg; padding: variables.$input-padding-y-lg variables.$input-padding-x-lg;
@include font-size($input-font-size-lg); @include rfs.font-size(variables.$input-font-size-lg);
@include border-radius($input-border-radius-lg); @include border-radius.border-radius(variables.$input-border-radius-lg);
&::file-selector-button { &::file-selector-button {
padding: $input-padding-y-lg $input-padding-x-lg; padding: variables.$input-padding-y-lg variables.$input-padding-x-lg;
margin: (-$input-padding-y-lg) (-$input-padding-x-lg); margin: (-(variables.$input-padding-y-lg)) (-(variables.$input-padding-x-lg));
margin-inline-end: $input-padding-x-lg; margin-inline-end: variables.$input-padding-x-lg;
} }
} }
@ -177,23 +185,23 @@
// stylelint-disable selector-no-qualifying-type // stylelint-disable selector-no-qualifying-type
textarea { textarea {
&.form-control { &.form-control {
min-height: $input-height; min-height: variables.$input-height;
} }
&.form-control-sm { &.form-control-sm {
min-height: $input-height-sm; min-height: variables.$input-height-sm;
} }
&.form-control-lg { &.form-control-lg {
min-height: $input-height-lg; min-height: variables.$input-height-lg;
} }
} }
// stylelint-enable selector-no-qualifying-type // stylelint-enable selector-no-qualifying-type
.form-control-color { .form-control-color {
width: $form-color-width; width: variables.$form-color-width;
height: $input-height; height: variables.$input-height;
padding: $input-padding-y; padding: variables.$input-padding-y;
&:not(:disabled):not([readonly]) { &:not(:disabled):not([readonly]) {
cursor: pointer; cursor: pointer;
@ -201,14 +209,14 @@ textarea {
&::-moz-color-swatch { &::-moz-color-swatch {
border: 0 !important; // stylelint-disable-line declaration-no-important 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 { &::-webkit-color-swatch {
border: 0 !important; // stylelint-disable-line declaration-no-important 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-sm { height: variables.$input-height-sm; }
&.form-control-lg { height: $input-height-lg; } &.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 // Range
// //
// Style range inputs the same across browsers. Vendor-specific rules for pseudo // Style range inputs the same across browsers. Vendor-specific rules for pseudo
@ -6,7 +12,7 @@
.form-range { .form-range {
width: 100%; 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 padding: 0; // Need to reset padding
appearance: none; appearance: none;
background-color: transparent; background-color: transparent;
@ -16,8 +22,8 @@
// Pseudo-elements must be split across multiple rulesets to have an effect. // Pseudo-elements must be split across multiple rulesets to have an effect.
// No box-shadow() mixin for focus accessibility. // No box-shadow() mixin for focus accessibility.
&::-webkit-slider-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: $form-range-thumb-focus-box-shadow; } &::-moz-range-thumb { box-shadow: variables.$form-range-thumb-focus-box-shadow; }
} }
&::-moz-focus-outer { &::-moz-focus-outer {
@ -25,67 +31,67 @@
} }
&::-webkit-slider-thumb { &::-webkit-slider-thumb {
width: $form-range-thumb-width; width: variables.$form-range-thumb-width;
height: $form-range-thumb-height; height: variables.$form-range-thumb-height;
margin-top: ($form-range-track-height - $form-range-thumb-height) * .5; // Webkit specific margin-top: (variables.$form-range-track-height - variables.$form-range-thumb-height) * .5; // Webkit specific
appearance: none; appearance: none;
@include gradient-bg($form-range-thumb-bg); @include gradients.gradient-bg(variables.$form-range-thumb-bg);
border: $form-range-thumb-border; border: variables.$form-range-thumb-border;
@include border-radius($form-range-thumb-border-radius); @include border-radius.border-radius(variables.$form-range-thumb-border-radius);
@include box-shadow($form-range-thumb-box-shadow); @include box-shadow.box-shadow(variables.$form-range-thumb-box-shadow);
@include transition($form-range-thumb-transition); @include transition.transition(variables.$form-range-thumb-transition);
&:active { &:active {
@include gradient-bg($form-range-thumb-active-bg); @include gradients.gradient-bg(variables.$form-range-thumb-active-bg);
} }
} }
&::-webkit-slider-runnable-track { &::-webkit-slider-runnable-track {
width: $form-range-track-width; width: variables.$form-range-track-width;
height: $form-range-track-height; height: variables.$form-range-track-height;
color: transparent; // Why? color: transparent; // Why?
cursor: $form-range-track-cursor; cursor: variables.$form-range-track-cursor;
background-color: $form-range-track-bg; background-color: variables.$form-range-track-bg;
border-color: transparent; border-color: transparent;
@include border-radius($form-range-track-border-radius); @include border-radius.border-radius(variables.$form-range-track-border-radius);
@include box-shadow($form-range-track-box-shadow); @include box-shadow.box-shadow(variables.$form-range-track-box-shadow);
} }
&::-moz-range-thumb { &::-moz-range-thumb {
width: $form-range-thumb-width; width: variables.$form-range-thumb-width;
height: $form-range-thumb-height; height: variables.$form-range-thumb-height;
appearance: none; appearance: none;
@include gradient-bg($form-range-thumb-bg); @include gradients.gradient-bg(variables.$form-range-thumb-bg);
border: $form-range-thumb-border; border: variables.$form-range-thumb-border;
@include border-radius($form-range-thumb-border-radius); @include border-radius.border-radius(variables.$form-range-thumb-border-radius);
@include box-shadow($form-range-thumb-box-shadow); @include box-shadow.box-shadow(variables.$form-range-thumb-box-shadow);
@include transition($form-range-thumb-transition); @include transition.transition(variables.$form-range-thumb-transition);
&:active { &:active {
@include gradient-bg($form-range-thumb-active-bg); @include gradients.gradient-bg(variables.$form-range-thumb-active-bg);
} }
} }
&::-moz-range-track { &::-moz-range-track {
width: $form-range-track-width; width: variables.$form-range-track-width;
height: $form-range-track-height; height: variables.$form-range-track-height;
color: transparent; color: transparent;
cursor: $form-range-track-cursor; cursor: variables.$form-range-track-cursor;
background-color: $form-range-track-bg; background-color: variables.$form-range-track-bg;
border-color: transparent; // Firefox specific? border-color: transparent; // Firefox specific?
@include border-radius($form-range-track-border-radius); @include border-radius.border-radius(variables.$form-range-track-border-radius);
@include box-shadow($form-range-track-box-shadow); @include box-shadow.box-shadow(variables.$form-range-track-box-shadow);
} }
&:disabled { &:disabled {
pointer-events: none; pointer-events: none;
&::-webkit-slider-thumb { &::-webkit-slider-thumb {
background-color: $form-range-thumb-disabled-bg; background-color: variables.$form-range-thumb-disabled-bg;
} }
&::-moz-range-thumb { &::-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 // Select
// //
// Replaces the browser default select with a custom one, mostly pulled from // Replaces the browser default select with a custom one, mostly pulled from
// https://primer.github.io/. // https://primer.github.io/.
.form-select { .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; display: block;
width: 100%; width: 100%;
padding: $form-select-padding-y $form-select-indicator-padding $form-select-padding-y $form-select-padding-x; padding: variables.$form-select-padding-y variables.$form-select-indicator-padding variables.$form-select-padding-y variables.$form-select-padding-x;
font-family: $form-select-font-family; font-family: variables.$form-select-font-family;
@include font-size($form-select-font-size); @include rfs.font-size(variables.$form-select-font-size);
font-weight: $form-select-font-weight; font-weight: variables.$form-select-font-weight;
line-height: $form-select-line-height; line-height: variables.$form-select-line-height;
color: $form-select-color; color: variables.$form-select-color;
appearance: none; appearance: none;
background-color: $form-select-bg; background-color: variables.$form-select-bg;
background-image: var(--#{$prefix}form-select-bg-img), var(--#{$prefix}form-select-bg-icon, none); background-image: var(--#{variables.$prefix}form-select-bg-img), var(--#{variables.$prefix}form-select-bg-icon, none);
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: $form-select-bg-position; background-position: variables.$form-select-bg-position;
background-size: $form-select-bg-size; background-size: variables.$form-select-bg-size;
border: $form-select-border-width solid $form-select-border-color; border: variables.$form-select-border-width solid variables.$form-select-border-color;
@include border-radius($form-select-border-radius, 0); @include border-radius.border-radius(variables.$form-select-border-radius, 0);
@include box-shadow($form-select-box-shadow); @include box-shadow.box-shadow(variables.$form-select-box-shadow);
@include transition($form-select-transition); @include transition.transition(variables.$form-select-transition);
&:focus { &:focus {
border-color: $form-select-focus-border-color; border-color: variables.$form-select-focus-border-color;
outline: 0; outline: 0;
@if $enable-shadows { @if variables.$enable-shadows {
@include box-shadow($form-select-box-shadow, $form-select-focus-box-shadow); @include box-shadow.box-shadow(variables.$form-select-box-shadow, variables.$form-select-focus-box-shadow);
} @else { } @else {
// Avoid using mixin so we can pass custom focus shadow properly // 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], &[multiple],
&[size]:not([size="1"]) { &[size]:not([size="1"]) {
padding-right: $form-select-padding-x; padding-right: variables.$form-select-padding-x;
background-image: none; background-image: none;
} }
&:disabled { &:disabled {
color: $form-select-disabled-color; color: variables.$form-select-disabled-color;
background-color: $form-select-disabled-bg; background-color: variables.$form-select-disabled-bg;
border-color: $form-select-disabled-border-color; border-color: variables.$form-select-disabled-border-color;
} }
// Remove outline from select box in FF // Remove outline from select box in FF
&:-moz-focusring { &:-moz-focusring {
color: transparent; color: transparent;
text-shadow: 0 0 0 $form-select-color; text-shadow: 0 0 0 variables.$form-select-color;
} }
} }
.form-select-sm { .form-select-sm {
padding-top: $form-select-padding-y-sm; padding-top: variables.$form-select-padding-y-sm;
padding-bottom: $form-select-padding-y-sm; padding-bottom: variables.$form-select-padding-y-sm;
padding-left: $form-select-padding-x-sm; padding-left: variables.$form-select-padding-x-sm;
@include font-size($form-select-font-size-sm); @include rfs.font-size(variables.$form-select-font-size-sm);
@include border-radius($form-select-border-radius-sm); @include border-radius.border-radius(variables.$form-select-border-radius-sm);
} }
.form-select-lg { .form-select-lg {
padding-top: $form-select-padding-y-lg; padding-top: variables.$form-select-padding-y-lg;
padding-bottom: $form-select-padding-y-lg; padding-bottom: variables.$form-select-padding-y-lg;
padding-left: $form-select-padding-x-lg; padding-left: variables.$form-select-padding-x-lg;
@include font-size($form-select-font-size-lg); @include rfs.font-size(variables.$form-select-font-size-lg);
@include border-radius($form-select-border-radius-lg); @include border-radius.border-radius(variables.$form-select-border-radius-lg);
} }
@if $enable-dark-mode { @if variables.$enable-dark-mode {
@include color-mode(dark) { @include color-mode.color-mode(dark) {
.form-select { .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
// //
.form-text { .form-text {
margin-top: $form-text-margin-top; margin-top: variables.$form-text-margin-top;
@include font-size($form-text-font-size); @include rfs.font-size(variables.$form-text-font-size);
font-style: $form-text-font-style; font-style: variables.$form-text-font-style;
font-weight: $form-text-font-weight; font-weight: variables.$form-text-font-weight;
color: $form-text-color; 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 // Base styles
// //
@ -47,16 +53,16 @@
.input-group-text { .input-group-text {
display: flex; display: flex;
align-items: center; align-items: center;
padding: $input-group-addon-padding-y $input-group-addon-padding-x; padding: variables.$input-group-addon-padding-y variables.$input-group-addon-padding-x;
@include font-size($input-font-size); // Match inputs @include rfs.font-size(variables.$input-font-size); // Match inputs
font-weight: $input-group-addon-font-weight; font-weight: variables.$input-group-addon-font-weight;
line-height: $input-line-height; line-height: variables.$input-line-height;
color: $input-group-addon-color; color: variables.$input-group-addon-color;
text-align: center; text-align: center;
white-space: nowrap; white-space: nowrap;
background-color: $input-group-addon-bg; background-color: variables.$input-group-addon-bg;
border: $input-border-width solid $input-group-addon-border-color; border: variables.$input-border-width solid variables.$input-group-addon-border-color;
@include border-radius($input-border-radius); @include border-radius.border-radius(variables.$input-border-radius);
} }
@ -69,23 +75,23 @@
.input-group-lg > .form-select, .input-group-lg > .form-select,
.input-group-lg > .input-group-text, .input-group-lg > .input-group-text,
.input-group-lg > .btn { .input-group-lg > .btn {
padding: $input-padding-y-lg $input-padding-x-lg; padding: variables.$input-padding-y-lg variables.$input-padding-x-lg;
@include font-size($input-font-size-lg); @include rfs.font-size(variables.$input-font-size-lg);
@include border-radius($input-border-radius-lg); @include border-radius.border-radius(variables.$input-border-radius-lg);
} }
.input-group-sm > .form-control, .input-group-sm > .form-control,
.input-group-sm > .form-select, .input-group-sm > .form-select,
.input-group-sm > .input-group-text, .input-group-sm > .input-group-text,
.input-group-sm > .btn { .input-group-sm > .btn {
padding: $input-padding-y-sm $input-padding-x-sm; padding: variables.$input-padding-y-sm variables.$input-padding-x-sm;
@include font-size($input-font-size-sm); @include rfs.font-size(variables.$input-font-size-sm);
@include border-radius($input-border-radius-sm); @include border-radius.border-radius(variables.$input-border-radius-sm);
} }
.input-group-lg > .form-select, .input-group-lg > .form-select,
.input-group-sm > .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), > .dropdown-toggle:nth-last-child(n + 3),
> .form-floating:not(:last-child) > .form-control, > .form-floating:not(:last-child) > .form-control,
> .form-floating:not(:last-child) > .form-select { > .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), > .dropdown-toggle:nth-last-child(n + 4),
> .form-floating:nth-last-child(n + 3) > .form-control, > .form-floating:nth-last-child(n + 3) > .form-control,
> .form-floating:nth-last-child(n + 3) > .form-select { > .form-floating:nth-last-child(n + 3) > .form-select {
@include border-end-radius(0); @include border-radius.border-end-radius(0);
} }
} }
$validation-messages: ""; $validation-messages: "";
@each $state in map-keys($form-validation-states) { @each $state in map.keys(variables.$form-validation-states) {
$validation-messages: $validation-messages + ":not(." + unquote($state) + "-tooltip)" + ":not(." + unquote($state) + "-feedback)"; $validation-messages: $validation-messages + ":not(." + string.unquote($state) + "-tooltip)" + ":not(." + string.unquote($state) + "-feedback)";
} }
> :not(:first-child):not(.dropdown-menu)#{$validation-messages} { > :not(:first-child):not(.dropdown-menu)#{$validation-messages} {
margin-left: calc(#{$input-border-width} * -1); // stylelint-disable-line function-disallowed-list margin-left: calc(#{variables.$input-border-width} * -1); // stylelint-disable-line function-disallowed-list
@include border-start-radius(0); @include border-radius.border-start-radius(0);
} }
> .form-floating:not(:first-child) > .form-control, > .form-floating:not(:first-child) > .form-control,
> .form-floating:not(:first-child) > .form-select { > .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 // Labels
// //
.form-label { .form-label {
margin-bottom: $form-label-margin-bottom; margin-bottom: variables.$form-label-margin-bottom;
@include font-size($form-label-font-size); @include rfs.font-size(variables.$form-label-font-size);
font-style: $form-label-font-style; font-style: variables.$form-label-font-style;
font-weight: $form-label-font-weight; font-weight: variables.$form-label-font-weight;
color: $form-label-color; color: variables.$form-label-color;
} }
// For use with horizontal and inline forms, when you need the label (or legend) // For use with horizontal and inline forms, when you need the label (or legend)
// text to align with the form controls. // text to align with the form controls.
.col-form-label { .col-form-label {
padding-top: calc(#{$input-padding-y} + #{$input-border-width}); padding-top: calc(#{variables.$input-padding-y} + #{variables.$input-border-width});
padding-bottom: calc(#{$input-padding-y} + #{$input-border-width}); padding-bottom: calc(#{variables.$input-padding-y} + #{variables.$input-border-width});
margin-bottom: 0; // Override the `<legend>` default margin-bottom: 0; // Override the `<legend>` default
@include font-size(inherit); // Override the `<legend>` default @include rfs.font-size(inherit); // Override the `<legend>` default
font-style: $form-label-font-style; font-style: variables.$form-label-font-style;
font-weight: $form-label-font-weight; font-weight: variables.$form-label-font-weight;
line-height: $input-line-height; line-height: variables.$input-line-height;
color: $form-label-color; color: variables.$form-label-color;
} }
.col-form-label-lg { .col-form-label-lg {
padding-top: calc(#{$input-padding-y-lg} + #{$input-border-width}); padding-top: calc(#{variables.$input-padding-y-lg} + #{variables.$input-border-width});
padding-bottom: calc(#{$input-padding-y-lg} + #{$input-border-width}); padding-bottom: calc(#{variables.$input-padding-y-lg} + #{variables.$input-border-width});
@include font-size($input-font-size-lg); @include rfs.font-size(variables.$input-font-size-lg);
} }
.col-form-label-sm { .col-form-label-sm {
padding-top: calc(#{$input-padding-y-sm} + #{$input-border-width}); padding-top: calc(#{variables.$input-padding-y-sm} + #{variables.$input-border-width});
padding-bottom: calc(#{$input-padding-y-sm} + #{$input-border-width}); padding-bottom: calc(#{variables.$input-padding-y-sm} + #{variables.$input-border-width});
@include font-size($input-font-size-sm); @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 // Form validation
// //
// Provide feedback to users when form field values are valid or invalid. Works // Provide feedback to users when form field values are valid or invalid. Works
@ -6,7 +9,7 @@
// server-side validation. // server-side validation.
// scss-docs-start form-validation-states-loop // scss-docs-start form-validation-states-loop
@each $state, $data in $form-validation-states { @each $state, $data in variables.$form-validation-states {
@include form-validation-state($state, $data...); @include forms.form-validation-state($state, $data...);
} }
// scss-docs-end form-validation-states-loop // scss-docs-end form-validation-states-loop

4
scss/helpers/_clearfix.scss
View File

@ -1,3 +1,5 @@
@use "../mixins/clearfix";
.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 // 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} { .text-bg-#{$color} {
color: color-contrast($value) if($enable-important-utilities, !important, null); color: functions.color-contrast($value) if(variables.$enable-important-utilities, !important, null);
background-color: RGBA(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}bg-opacity, 1)) if($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 @use "../functions";
@each $color, $value in $theme-colors { @use "../variables";
.link-#{$color} {
color: RGBA(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}link-opacity, 1)) if($enable-important-utilities, !important, null);
text-decoration-color: RGBA(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}link-underline-opacity, 1)) if($enable-important-utilities, !important, null);
@if $link-shade-percentage != 0 { // 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, &:hover,
&:focus { &:focus {
$hover-color: if(color-contrast($value) == $color-contrast-light, shade-color($value, $link-shade-percentage), tint-color($value, $link-shade-percentage)); $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(#{to-rgb($hover-color)}, var(--#{$prefix}link-opacity, 1)) if($enable-important-utilities, !important, null); color: RGBA(#{functions.to-rgb($hover-color)}, var(--#{variables.$prefix}link-opacity, 1)) if(variables.$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); 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 // One-off special link helper as a bridge until v6
.link-body-emphasis { .link-body-emphasis {
color: RGBA(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-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(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-underline-opacity, 1)) if($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, &:hover,
&:focus { &:focus {
color: RGBA(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-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(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-underline-opacity, .75)) if($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 { .focus-ring:focus {
outline: 0; 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 // 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 { .icon-link {
display: inline-flex; display: inline-flex;
gap: $icon-link-gap; gap: variables.$icon-link-gap;
align-items: center; align-items: center;
text-decoration-color: rgba(var(--#{$prefix}link-color-rgb), var(--#{$prefix}link-opacity, .5)); text-decoration-color: rgba(var(--#{variables.$prefix}link-color-rgb), var(--#{variables.$prefix}link-opacity, .5));
text-underline-offset: $icon-link-underline-offset; text-underline-offset: variables.$icon-link-underline-offset;
backface-visibility: hidden; backface-visibility: hidden;
> .bi { > .bi {
flex-shrink: 0; flex-shrink: 0;
width: $icon-link-icon-size; width: variables.$icon-link-icon-size;
height: $icon-link-icon-size; height: variables.$icon-link-icon-size;
fill: currentcolor; fill: currentcolor;
@include transition($icon-link-icon-transition); @include transition.transition(variables.$icon-link-icon-transition);
} }
} }
@ -19,7 +22,7 @@
&:hover, &:hover,
&:focus-visible { &:focus-visible {
> .bi { > .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 // Shorthand
.fixed-top { .fixed-top {
@ -5,7 +9,7 @@
top: 0; top: 0;
right: 0; right: 0;
left: 0; left: 0;
z-index: $zindex-fixed; z-index: variables.$zindex-fixed;
} }
.fixed-bottom { .fixed-bottom {
@ -13,24 +17,24 @@
right: 0; right: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;
z-index: $zindex-fixed; z-index: variables.$zindex-fixed;
} }
// Responsive sticky top and bottom // Responsive sticky top and bottom
@each $breakpoint in map-keys($grid-breakpoints) { @each $breakpoint in map.keys(variables.$grid-breakpoints) {
@include media-breakpoint-up($breakpoint) { @include breakpoints.media-breakpoint-up($breakpoint) {
$infix: breakpoint-infix($breakpoint, $grid-breakpoints); $infix: breakpoints.breakpoint-infix($breakpoint, variables.$grid-breakpoints);
.sticky#{$infix}-top { .sticky#{$infix}-top {
position: sticky; position: sticky;
top: 0; top: 0;
z-index: $zindex-sticky; z-index: variables.$zindex-sticky;
} }
.sticky#{$infix}-bottom { .sticky#{$infix}-bottom {
position: sticky; position: sticky;
bottom: 0; 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. // Credit: Nicolas Gallagher and SUIT CSS.
.ratio { .ratio {
@ -6,7 +8,7 @@
&::before { &::before {
display: block; display: block;
padding-top: var(--#{$prefix}aspect-ratio); padding-top: var(--#{variables.$prefix}aspect-ratio);
content: ""; content: "";
} }
@ -19,8 +21,8 @@
} }
} }
@each $key, $ratio in $aspect-ratios { @each $key, $ratio in variables.$aspect-ratios {
.ratio-#{$key} { .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 { .stretched-link {
&::#{$stretched-link-pseudo-element} { &::#{variables.$stretched-link-pseudo-element} {
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;
z-index: $stretched-link-z-index; z-index: variables.$stretched-link-z-index;
content: ""; content: "";
} }
} }

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

@ -1,7 +1,9 @@
@use "../mixins/text-truncate";
// //
// Text truncation // Text truncation
// //
.text-truncate { .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, .visually-hidden,
.visually-hidden-focusable:not(:focus):not(:focus-within) { .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 { .vr {
display: inline-block; display: inline-block;
align-self: stretch; align-self: stretch;
width: $vr-border-width; width: variables.$vr-border-width;
min-height: 1em; min-height: 1em;
background-color: currentcolor; 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 // stylelint-disable property-disallowed-list
// Single side border-radius // Single side border-radius
@ -5,18 +9,18 @@
@function valid-radius($radius) { @function valid-radius($radius) {
$return: (); $return: ();
@each $value in $radius { @each $value in $radius {
@if type-of($value) == number { @if meta.type-of($value) == number {
$return: append($return, max($value, 0)); $return: list.append($return, max($value, 0));
} @else { } @else {
$return: append($return, $value); $return: list.append($return, $value);
} }
} }
@return $return; @return $return;
} }
// scss-docs-start border-radius-mixins // scss-docs-start border-radius-mixins
@mixin border-radius($radius: $border-radius, $fallback-border-radius: false) { @mixin border-radius($radius: variables.$border-radius, $fallback-border-radius: false) {
@if $enable-rounded { @if variables.$enable-rounded {
border-radius: valid-radius($radius); border-radius: valid-radius($radius);
} }
@else if $fallback-border-radius != false { @else if $fallback-border-radius != false {
@ -24,54 +28,54 @@
} }
} }
@mixin border-top-radius($radius: $border-radius) { @mixin border-top-radius($radius: variables.$border-radius) {
@if $enable-rounded { @if variables.$enable-rounded {
border-top-left-radius: valid-radius($radius); border-top-left-radius: valid-radius($radius);
border-top-right-radius: valid-radius($radius); border-top-right-radius: valid-radius($radius);
} }
} }
@mixin border-end-radius($radius: $border-radius) { @mixin border-end-radius($radius: variables.$border-radius) {
@if $enable-rounded { @if variables.$enable-rounded {
border-top-right-radius: valid-radius($radius); border-top-right-radius: valid-radius($radius);
border-bottom-right-radius: valid-radius($radius); border-bottom-right-radius: valid-radius($radius);
} }
} }
@mixin border-bottom-radius($radius: $border-radius) { @mixin border-bottom-radius($radius: variables.$border-radius) {
@if $enable-rounded { @if variables.$enable-rounded {
border-bottom-right-radius: valid-radius($radius); border-bottom-right-radius: valid-radius($radius);
border-bottom-left-radius: valid-radius($radius); border-bottom-left-radius: valid-radius($radius);
} }
} }
@mixin border-start-radius($radius: $border-radius) { @mixin border-start-radius($radius: variables.$border-radius) {
@if $enable-rounded { @if variables.$enable-rounded {
border-top-left-radius: valid-radius($radius); border-top-left-radius: valid-radius($radius);
border-bottom-left-radius: valid-radius($radius); border-bottom-left-radius: valid-radius($radius);
} }
} }
@mixin border-top-start-radius($radius: $border-radius) { @mixin border-top-start-radius($radius: variables.$border-radius) {
@if $enable-rounded { @if variables.$enable-rounded {
border-top-left-radius: valid-radius($radius); border-top-left-radius: valid-radius($radius);
} }
} }
@mixin border-top-end-radius($radius: $border-radius) { @mixin border-top-end-radius($radius: variables.$border-radius) {
@if $enable-rounded { @if variables.$enable-rounded {
border-top-right-radius: valid-radius($radius); border-top-right-radius: valid-radius($radius);
} }
} }
@mixin border-bottom-end-radius($radius: $border-radius) { @mixin border-bottom-end-radius($radius: variables.$border-radius) {
@if $enable-rounded { @if variables.$enable-rounded {
border-bottom-right-radius: valid-radius($radius); border-bottom-right-radius: valid-radius($radius);
} }
} }
@mixin border-bottom-start-radius($radius: $border-radius) { @mixin border-bottom-start-radius($radius: variables.$border-radius) {
@if $enable-rounded { @if variables.$enable-rounded {
border-bottom-left-radius: valid-radius($radius); 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...) { @mixin box-shadow($shadow...) {
@if $enable-shadows { @if variables.$enable-shadows {
$result: (); $result: ();
@each $value in $shadow { @each $value in $shadow {
@if $value != null { @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."; @warn "The keyword 'none' must be used as a single argument.";
} }
} }
@if (length($result) > 0) { @if (list.length($result) > 0) {
box-shadow: $result; 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. // Breakpoint viewport sizes and media queries.
// //
// Breakpoints are defined as a map of (name: minimum width), order from small to large: // Breakpoints are defined as a map of (name: minimum width), order from small to large:
@ -14,20 +18,20 @@
// md // md
// >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl xxl)) // >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl xxl))
// md // md
@function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) { @function breakpoint-next($name, $breakpoints: variables.$grid-breakpoints, $breakpoint-names: map.keys($breakpoints)) {
$n: index($breakpoint-names, $name); $n: list.index($breakpoint-names, $name);
@if not $n { @if not $n {
@error "breakpoint `#{$name}` not found in `#{$breakpoints}`"; @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. // Minimum breakpoint width. Null for the smallest (first) breakpoint.
// //
// >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px)) // >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))
// 576px // 576px
@function breakpoint-min($name, $breakpoints: $grid-breakpoints) { @function breakpoint-min($name, $breakpoints: variables.$grid-breakpoints) {
$min: map-get($breakpoints, $name); $min: map.get($breakpoints, $name);
@return if($min != 0, $min, null); @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)) // >> breakpoint-max(md, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))
// 767.98px // 767.98px
@function breakpoint-max($name, $breakpoints: $grid-breakpoints) { @function breakpoint-max($name, $breakpoints: variables.$grid-breakpoints) {
$max: map-get($breakpoints, $name); $max: map.get($breakpoints, $name);
@return if($max and $max > 0, $max - .02, null); @return if($max and $max > 0, $max - .02, null);
} }
@ -52,13 +56,13 @@
// "" (Returns a blank string) // "" (Returns a blank string)
// >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px)) // >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))
// "-sm" // "-sm"
@function breakpoint-infix($name, $breakpoints: $grid-breakpoints) { @function breakpoint-infix($name, $breakpoints: variables.$grid-breakpoints) {
@return if(breakpoint-min($name, $breakpoints) == null, "", "-#{$name}"); @return if(breakpoint-min($name, $breakpoints) == null, "", "-#{$name}");
} }
// Media of at least the minimum breakpoint width. No query for the smallest breakpoint. // Media of at least the minimum breakpoint width. No query for the smallest breakpoint.
// Makes the @content apply to the given breakpoint and wider. // 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); $min: breakpoint-min($name, $breakpoints);
@if $min { @if $min {
@media (min-width: $min) { @media (min-width: $min) {
@ -71,7 +75,7 @@
// Media of at most the maximum breakpoint width. No query for the largest breakpoint. // Media of at most the maximum breakpoint width. No query for the largest breakpoint.
// Makes the @content apply to the given breakpoint and narrower. // 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); $max: breakpoint-max($name, $breakpoints);
@if $max { @if $max {
@media (max-width: $max) { @media (max-width: $max) {
@ -84,7 +88,7 @@
// Media that spans multiple breakpoint widths. // Media that spans multiple breakpoint widths.
// Makes the @content apply between the min and max breakpoints // 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); $min: breakpoint-min($lower, $breakpoints);
$max: breakpoint-max($upper, $breakpoints); $max: breakpoint-max($upper, $breakpoints);
@ -106,7 +110,7 @@
// Media between the breakpoint's minimum and maximum widths. // Media between the breakpoint's minimum and maximum widths.
// No minimum for the smallest breakpoint, and no maximum for the largest one. // 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. // 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); $min: breakpoint-min($name, $breakpoints);
$next: breakpoint-next($name, $breakpoints); $next: breakpoint-next($name, $breakpoints);
$max: breakpoint-max($next, $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 // Button variants
// //
// Easily pump out default styles, as well as :hover, :focus, :active, // Easily pump out default styles, as well as :hover, :focus, :active,
@ -7,64 +12,64 @@
@mixin button-variant( @mixin button-variant(
$background, $background,
$border, $border,
$color: color-contrast($background), $color: functions.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-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 == $color-contrast-light, shade-color($border, $btn-hover-border-shade-amount), tint-color($border, $btn-hover-border-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: color-contrast($hover-background), $hover-color: functions.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-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 == $color-contrast-light, shade-color($border, $btn-active-border-shade-amount), tint-color($border, $btn-active-border-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: color-contrast($active-background), $active-color: functions.color-contrast($active-background),
$disabled-background: $background, $disabled-background: $background,
$disabled-border: $border, $disabled-border: $border,
$disabled-color: color-contrast($disabled-background) $disabled-color: functions.color-contrast($disabled-background)
) { ) {
--#{$prefix}btn-color: #{$color}; --#{variables.$prefix}btn-color: #{$color};
--#{$prefix}btn-bg: #{$background}; --#{variables.$prefix}btn-bg: #{$background};
--#{$prefix}btn-border-color: #{$border}; --#{variables.$prefix}btn-border-color: #{$border};
--#{$prefix}btn-hover-color: #{$hover-color}; --#{variables.$prefix}btn-hover-color: #{$hover-color};
--#{$prefix}btn-hover-bg: #{$hover-background}; --#{variables.$prefix}btn-hover-bg: #{$hover-background};
--#{$prefix}btn-hover-border-color: #{$hover-border}; --#{variables.$prefix}btn-hover-border-color: #{$hover-border};
--#{$prefix}btn-focus-shadow-rgb: #{to-rgb(mix($color, $border, 15%))}; --#{variables.$prefix}btn-focus-shadow-rgb: #{functions.to-rgb(color.mix($color, $border, 15%))};
--#{$prefix}btn-active-color: #{$active-color}; --#{variables.$prefix}btn-active-color: #{$active-color};
--#{$prefix}btn-active-bg: #{$active-background}; --#{variables.$prefix}btn-active-bg: #{$active-background};
--#{$prefix}btn-active-border-color: #{$active-border}; --#{variables.$prefix}btn-active-border-color: #{$active-border};
--#{$prefix}btn-active-shadow: #{$btn-active-box-shadow}; --#{variables.$prefix}btn-active-shadow: #{variables.$btn-active-box-shadow};
--#{$prefix}btn-disabled-color: #{$disabled-color}; --#{variables.$prefix}btn-disabled-color: #{$disabled-color};
--#{$prefix}btn-disabled-bg: #{$disabled-background}; --#{variables.$prefix}btn-disabled-bg: #{$disabled-background};
--#{$prefix}btn-disabled-border-color: #{$disabled-border}; --#{variables.$prefix}btn-disabled-border-color: #{$disabled-border};
} }
// scss-docs-end btn-variant-mixin // scss-docs-end btn-variant-mixin
// scss-docs-start btn-outline-variant-mixin // scss-docs-start btn-outline-variant-mixin
@mixin button-outline-variant( @mixin button-outline-variant(
$color, $color,
$color-hover: color-contrast($color), $color-hover: functions.color-contrast($color),
$active-background: $color, $active-background: $color,
$active-border: $color, $active-border: $color,
$active-color: color-contrast($active-background) $active-color: functions.color-contrast($active-background)
) { ) {
--#{$prefix}btn-color: #{$color}; --#{variables.$prefix}btn-color: #{$color};
--#{$prefix}btn-border-color: #{$color}; --#{variables.$prefix}btn-border-color: #{$color};
--#{$prefix}btn-hover-color: #{$color-hover}; --#{variables.$prefix}btn-hover-color: #{$color-hover};
--#{$prefix}btn-hover-bg: #{$active-background}; --#{variables.$prefix}btn-hover-bg: #{$active-background};
--#{$prefix}btn-hover-border-color: #{$active-border}; --#{variables.$prefix}btn-hover-border-color: #{$active-border};
--#{$prefix}btn-focus-shadow-rgb: #{to-rgb($color)}; --#{variables.$prefix}btn-focus-shadow-rgb: #{functions.to-rgb($color)};
--#{$prefix}btn-active-color: #{$active-color}; --#{variables.$prefix}btn-active-color: #{$active-color};
--#{$prefix}btn-active-bg: #{$active-background}; --#{variables.$prefix}btn-active-bg: #{$active-background};
--#{$prefix}btn-active-border-color: #{$active-border}; --#{variables.$prefix}btn-active-border-color: #{$active-border};
--#{$prefix}btn-active-shadow: #{$btn-active-box-shadow}; --#{variables.$prefix}btn-active-shadow: #{variables.$btn-active-box-shadow};
--#{$prefix}btn-disabled-color: #{$color}; --#{variables.$prefix}btn-disabled-color: #{$color};
--#{$prefix}btn-disabled-bg: transparent; --#{variables.$prefix}btn-disabled-bg: transparent;
--#{$prefix}btn-disabled-border-color: #{$color}; --#{variables.$prefix}btn-disabled-border-color: #{$color};
--#{$prefix}gradient: none; --#{variables.$prefix}gradient: none;
} }
// scss-docs-end btn-outline-variant-mixin // scss-docs-end btn-outline-variant-mixin
// scss-docs-start btn-size-mixin // scss-docs-start btn-size-mixin
@mixin button-size($padding-y, $padding-x, $font-size, $border-radius) { @mixin button-size($padding-y, $padding-x, $font-size, $border-radius) {
--#{$prefix}btn-padding-y: #{$padding-y}; --#{variables.$prefix}btn-padding-y: #{$padding-y};
--#{$prefix}btn-padding-x: #{$padding-x}; --#{variables.$prefix}btn-padding-x: #{$padding-x};
@include rfs($font-size, --#{$prefix}btn-font-size); @include rfs.rfs($font-size, --#{variables.$prefix}btn-font-size);
--#{$prefix}btn-border-radius: #{$border-radius}; --#{variables.$prefix}btn-border-radius: #{$border-radius};
} }
// scss-docs-end btn-size-mixin // scss-docs-end btn-size-mixin

18
scss/mixins/_caret.scss
View File

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

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

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

12
scss/mixins/_container.scss
View File

@ -1,11 +1,13 @@
@use "../variables";
// Container mixins // Container mixins
@mixin make-container($gutter: $container-padding-x) { @mixin make-container($gutter: variables.$container-padding-x) {
--#{$prefix}gutter-x: #{$gutter}; --#{variables.$prefix}gutter-x: #{$gutter};
--#{$prefix}gutter-y: 0; --#{variables.$prefix}gutter-y: 0;
width: 100%; width: 100%;
padding-right: 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(--#{$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-right: auto;
margin-left: auto; margin-left: auto;
} }

4
scss/mixins/_deprecate.scss
View File

@ -1,10 +1,12 @@
@use "../setup/variables";
// Deprecate mixin // Deprecate mixin
// //
// This mixin can be used to deprecate mixins or functions. // 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 // `$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) // 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) { @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}."; @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 // 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 // See https://github.com/sass/sass/issues/1873#issuecomment-152293725 for more details
@ -19,17 +25,17 @@
$state, $state,
$color, $color,
$icon, $icon,
$tooltip-color: color-contrast($color), $tooltip-color: functions.color-contrast($color),
$tooltip-bg-color: rgba($color, $form-feedback-tooltip-opacity), $tooltip-bg-color: rgba($color, variables.$form-feedback-tooltip-opacity),
$focus-box-shadow: 0 0 $input-btn-focus-blur $input-focus-width rgba($color, $input-btn-focus-color-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 $border-color: $color
) { ) {
.#{$state}-feedback { .#{$state}-feedback {
display: none; display: none;
width: 100%; width: 100%;
margin-top: $form-feedback-margin-top; margin-top: variables.$form-feedback-margin-top;
@include font-size($form-feedback-font-size); @include rfs.font-size(variables.$form-feedback-font-size);
font-style: $form-feedback-font-style; font-style: variables.$form-feedback-font-style;
color: $color; color: $color;
} }
@ -39,13 +45,13 @@
z-index: 5; z-index: 5;
display: none; display: none;
max-width: 100%; // Contain to parent when possible 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; margin-top: .1rem;
@include font-size($form-feedback-tooltip-font-size); @include rfs.font-size(variables.$form-feedback-tooltip-font-size);
line-height: $form-feedback-tooltip-line-height; line-height: variables.$form-feedback-tooltip-line-height;
color: $tooltip-color; color: $tooltip-color;
background-color: $tooltip-bg-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) { @include form-validation-state-selector($state) {
@ -59,18 +65,18 @@
@include form-validation-state-selector($state) { @include form-validation-state-selector($state) {
border-color: $border-color; border-color: $border-color;
@if $enable-validation-icons { @if variables.$enable-validation-icons {
padding-right: $input-height-inner; padding-right: variables.$input-height-inner;
background-image: escape-svg($icon); background-image: functions.escape-svg($icon);
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: right $input-height-inner-quarter center; background-position: right variables.$input-height-inner-quarter center;
background-size: $input-height-inner-half $input-height-inner-half; background-size: variables.$input-height-inner-half variables.$input-height-inner-half;
} }
&:focus { &:focus {
border-color: $border-color; border-color: $border-color;
@if $enable-shadows { @if variables.$enable-shadows {
@include box-shadow($input-box-shadow, $focus-box-shadow); @include box-shadow.box-shadow(variables.$input-box-shadow, $focus-box-shadow);
} @else { } @else {
// Avoid using mixin so we can pass custom focus shadow properly // Avoid using mixin so we can pass custom focus shadow properly
box-shadow: $focus-box-shadow; box-shadow: $focus-box-shadow;
@ -82,9 +88,9 @@
// stylelint-disable-next-line selector-no-qualifying-type // stylelint-disable-next-line selector-no-qualifying-type
textarea.form-control { textarea.form-control {
@include form-validation-state-selector($state) { @include form-validation-state-selector($state) {
@if $enable-validation-icons { @if variables.$enable-validation-icons {
padding-right: $input-height-inner; padding-right: variables.$input-height-inner;
background-position: top $input-height-inner-quarter right $input-height-inner-quarter; background-position: top variables.$input-height-inner-quarter right variables.$input-height-inner-quarter;
} }
} }
} }
@ -93,20 +99,20 @@
@include form-validation-state-selector($state) { @include form-validation-state-selector($state) {
border-color: $border-color; border-color: $border-color;
@if $enable-validation-icons { @if variables.$enable-validation-icons {
&:not([multiple]):not([size]), &:not([multiple]):not([size]),
&:not([multiple])[size="1"] { &:not([multiple])[size="1"] {
--#{$prefix}form-select-bg-icon: #{escape-svg($icon)}; --#{variables.$prefix}form-select-bg-icon: #{functions.escape-svg($icon)};
padding-right: $form-select-feedback-icon-padding-end; padding-right: variables.$form-select-feedback-icon-padding-end;
background-position: $form-select-bg-position, $form-select-feedback-icon-position; background-position: variables.$form-select-bg-position, variables.$form-select-feedback-icon-position;
background-size: $form-select-bg-size, $form-select-feedback-icon-size; background-size: variables.$form-select-bg-size, variables.$form-select-feedback-icon-size;
} }
} }
&:focus { &:focus {
border-color: $border-color; border-color: $border-color;
@if $enable-shadows { @if variables.$enable-shadows {
@include box-shadow($form-select-box-shadow, $focus-box-shadow); @include box-shadow.box-shadow(variables.$form-select-box-shadow, $focus-box-shadow);
} @else { } @else {
// Avoid using mixin so we can pass custom focus shadow properly // Avoid using mixin so we can pass custom focus shadow properly
box-shadow: $focus-box-shadow; box-shadow: $focus-box-shadow;
@ -117,8 +123,8 @@
.form-control-color { .form-control-color {
@include form-validation-state-selector($state) { @include form-validation-state-selector($state) {
@if $enable-validation-icons { @if variables.$enable-validation-icons {
width: calc(#{$form-color-width} + #{$input-height-inner}); width: calc(#{variables.$form-color-width} + #{variables.$input-height-inner});
} }
} }
} }

20
scss/mixins/_gradients.scss
View File

@ -1,11 +1,13 @@
@use "../variables";
// Gradients // Gradients
// scss-docs-start gradient-bg-mixin // scss-docs-start gradient-bg-mixin
@mixin gradient-bg($color: null) { @mixin gradient-bg($color: null) {
background-color: $color; background-color: $color;
@if $enable-gradients { @if variables.$enable-gradients {
background-image: var(--#{$prefix}gradient); background-image: var(--#{variables.$prefix}gradient);
} }
} }
// scss-docs-end gradient-bg-mixin // scss-docs-end gradient-bg-mixin
@ -14,34 +16,34 @@
// Horizontal gradient, from left to right // Horizontal gradient, from left to right
// //
// Creates two color stops, start and end, by specifying a color and position for each color stop. // 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); background-image: linear-gradient(to right, $start-color $start-percent, $end-color $end-percent);
} }
// Vertical gradient, from top to bottom // Vertical gradient, from top to bottom
// //
// Creates two color stops, start and end, by specifying a color and position for each color stop. // 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); 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); 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); 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); 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); 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); background-image: linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent);
} }
// scss-docs-end gradient-mixins // 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 // Grid system
// //
// Generate semantic grid columns with these mixins. // Generate semantic grid columns with these mixins.
@ -15,7 +23,7 @@
@mixin make-col-ready() { @mixin make-col-ready() {
// Add box sizing if only the grid is loaded // 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 // Prevent columns from becoming too narrow when at smaller grid tiers by
// always setting `width: 100%;`. This works because we set the width // always setting `width: 100%;`. This works because we set the width
// later on to override this initial width. // later on to override this initial width.
@ -30,7 +38,7 @@
@mixin make-col($size: false, $columns: $grid-columns) { @mixin make-col($size: false, $columns: $grid-columns) {
@if $size { @if $size {
flex: 0 0 auto; flex: 0 0 auto;
width: percentage(divide($size, $columns)); width: math.percentage(divide($size, $columns));
} @else { } @else {
flex: 1 1 0; flex: 1 1 0;
@ -45,7 +53,7 @@
@mixin make-col-offset($size, $columns: $grid-columns) { @mixin make-col-offset($size, $columns: $grid-columns) {
$num: divide($size, $columns); $num: divide($size, $columns);
margin-left: if($num == 0, 0, percentage($num)); margin-left: if($num == 0, 0, math.percentage($num));
} }
// Row columns // Row columns
@ -56,7 +64,7 @@
@mixin row-cols($count) { @mixin row-cols($count) {
> * { > * {
flex: 0 0 auto; flex: 0 0 auto;
width: percentage(divide(1, $count)); width: math.percentage(divide(1, $count));
} }
} }
@ -66,10 +74,10 @@
// any value of `$grid-columns`. // any value of `$grid-columns`.
@mixin make-grid-columns($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) { @mixin make-grid-columns($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) {
@each $breakpoint in map-keys($breakpoints) { @each $breakpoint in map.keys($breakpoints) {
$infix: breakpoint-infix($breakpoint, $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 // Provide basic `.col-{bp}` classes for equal-width flexbox columns
.col#{$infix} { .col#{$infix} {
flex: 1 0 0%; // Flexbugs #4: https://github.com/philipwalton/flexbugs#flexbug-4 flex: 1 0 0%; // Flexbugs #4: https://github.com/philipwalton/flexbugs#flexbug-4
@ -111,7 +119,7 @@
// Gutters // Gutters
// //
// Make use of `.g-*`, `.gx-*` or `.gy-*` utilities to change spacing between the columns. // 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}, .g#{$infix}-#{$key},
.gx#{$infix}-#{$key} { .gx#{$infix}-#{$key} {
--#{$prefix}gutter-x: #{$value}; --#{$prefix}gutter-x: #{$value};
@ -127,10 +135,10 @@
} }
@mixin make-cssgrid($columns: $grid-columns, $breakpoints: $grid-breakpoints) { @mixin make-cssgrid($columns: $grid-columns, $breakpoints: $grid-breakpoints) {
@each $breakpoint in map-keys($breakpoints) { @each $breakpoint in map.keys($breakpoints) {
$infix: breakpoint-infix($breakpoint, $breakpoints); $infix: breakpoints.breakpoint-infix($breakpoint, $breakpoints);
@include media-breakpoint-up($breakpoint, $breakpoints) { @include breakpoints.media-breakpoint-up($breakpoint, $breakpoints) {
@if $columns > 0 { @if $columns > 0 {
@for $i from 1 through $columns { @for $i from 1 through $columns {
.g-col#{$infix}-#{$i} { .g-col#{$infix}-#{$i} {

11
scss/mixins/_pagination.scss
View File

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

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

@ -1,9 +1,11 @@
@use "../variables";
@mixin reset-text { @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. // We deliberately do NOT reset font-size or overflow-wrap / word-wrap.
font-style: normal; font-style: normal;
font-weight: $font-weight-normal; font-weight: variables.$font-weight-normal;
line-height: $line-height-base; line-height: variables.$line-height-base;
text-align: left; // Fallback for where `start` is not supported text-align: left; // Fallback for where `start` is not supported
text-align: start; text-align: start;
text-decoration: none; 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 // scss-docs-start table-variant
@mixin table-variant($state, $background) { @mixin table-variant($state, $background) {
.table-#{$state} { .table-#{$state} {
$color: color-contrast(opaque($body-bg, $background)); $color: functions.color-contrast(functions.opaque(variables.$body-bg, $background));
$hover-bg: mix($color, $background, percentage($table-hover-bg-factor)); $hover-bg: color.mix($color, $background, math.percentage(variables.$table-hover-bg-factor));
$striped-bg: mix($color, $background, percentage($table-striped-bg-factor)); $striped-bg: color.mix($color, $background, math.percentage(variables.$table-striped-bg-factor));
$active-bg: mix($color, $background, percentage($table-active-bg-factor)); $active-bg: color.mix($color, $background, math.percentage(variables.$table-active-bg-factor));
$table-border-color: mix($color, $background, percentage($table-border-factor)); $table-border-color: color.mix($color, $background, math.percentage(variables.$table-border-factor));
--#{$prefix}table-color: #{$color}; --#{variables.$prefix}table-color: #{$color};
--#{$prefix}table-bg: #{$background}; --#{variables.$prefix}table-bg: #{$background};
--#{$prefix}table-border-color: #{$table-border-color}; --#{variables.$prefix}table-border-color: #{$table-border-color};
--#{$prefix}table-striped-bg: #{$striped-bg}; --#{variables.$prefix}table-striped-bg: #{$striped-bg};
--#{$prefix}table-striped-color: #{color-contrast($striped-bg)}; --#{variables.$prefix}table-striped-color: #{functions.color-contrast($striped-bg)};
--#{$prefix}table-active-bg: #{$active-bg}; --#{variables.$prefix}table-active-bg: #{$active-bg};
--#{$prefix}table-active-color: #{color-contrast($active-bg)}; --#{variables.$prefix}table-active-color: #{functions.color-contrast($active-bg)};
--#{$prefix}table-hover-bg: #{$hover-bg}; --#{variables.$prefix}table-hover-bg: #{$hover-bg};
--#{$prefix}table-hover-color: #{color-contrast($hover-bg)}; --#{variables.$prefix}table-hover-color: #{functions.color-contrast($hover-bg)};
color: var(--#{$prefix}table-color); color: var(--#{variables.$prefix}table-color);
border-color: var(--#{$prefix}table-border-color); border-color: var(--#{variables.$prefix}table-border-color);
} }
} }
// scss-docs-end table-variant // 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 // stylelint-disable property-disallowed-list
@mixin transition($transition...) { @mixin transition($transition...) {
@if length($transition) == 0 { @if list.length($transition) == 0 {
$transition: $transition-base; $transition: variables.$transition-base;
} }
@if length($transition) > 1 { @if list.length($transition) > 1 {
@each $value in $transition { @each $value in $transition {
@if $value == null or $value == none { @if $value == null or $value == none {
@warn "The keyword 'none' or 'null' must be used as a single argument."; @warn "The keyword 'none' or 'null' must be used as a single argument.";
@ -12,12 +15,12 @@
} }
} }
@if $enable-transitions { @if variables.$enable-transitions {
@if nth($transition, 1) != null { @if list.nth($transition, 1) != null {
transition: $transition; 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) { @media (prefers-reduced-motion: reduce) {
transition: none; 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 // Utility generator
// Used to generate utilities & print utilities // Used to generate utilities & print utilities
@mixin generate-utility($utility, $infix: "", $is-rfs-media-query: false) { @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 the values are a list or string, convert it into a map
@if type-of($values) == "string" or type-of(nth($values, 1)) != "list" { @if meta.type-of($values) == "string" or meta.type-of(list.nth($values, 1)) != "list" {
$values: zip($values, $values); $values: list.zip($values, $values);
} }
@each $key, $value in $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 // Multiple properties are possible, for example with vertical or horizontal margins or paddings
@if type-of($properties) == "string" { @if meta.type-of($properties) == "string" {
$properties: append((), $properties); $properties: list.append((), $properties);
} }
// Use custom class if present // 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); $property-class: if($property-class == null, "", $property-class);
// Use custom CSS variable name if present, otherwise default to `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 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) // Don't prefix if value key is null (e.g. with shadow class)
$property-class-modifier: if($key, if($property-class == "" and $infix == "", "", "-") + $key, ""); $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 // Inside the media query
@if $is-rfs-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 // 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 { @else {
$value: rfs-fluid-value($value); $value: rfs.rfs-fluid-value($value);
} }
} }
$is-css-var: map-get($utility, css-var); $is-css-var: map.get($utility, css-var);
$is-local-vars: map-get($utility, local-vars); $is-local-vars: map.get($utility, local-vars);
$is-rtl: map-get($utility, rtl); $is-rtl: map.get($utility, rtl);
@if $value != null { @if $value != null {
@if $is-rtl == false { @if $is-rtl == false {
@ -55,12 +62,12 @@
@if $is-css-var { @if $is-css-var {
.#{$property-class + $infix + $property-class-modifier} { .#{$property-class + $infix + $property-class-modifier} {
--#{$prefix}#{$css-variable-name}: #{$value}; --#{variables.$prefix}#{$css-variable-name}: #{$value};
} }
@each $pseudo in $state { @each $pseudo in $state {
.#{$property-class + $infix + $property-class-modifier}-#{$pseudo}:#{$pseudo} { .#{$property-class + $infix + $property-class-modifier}-#{$pseudo}:#{$pseudo} {
--#{$prefix}#{$css-variable-name}: #{$value}; --#{variables.$prefix}#{$css-variable-name}: #{$value};
} }
} }
} @else { } @else {
@ -68,10 +75,10 @@
@each $property in $properties { @each $property in $properties {
@if $is-local-vars { @if $is-local-vars {
@each $local-var, $variable in $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 { @each $property in $properties {
@if $is-local-vars { @if $is-local-vars {
@each $local-var, $variable in $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 // Loop over each breakpoint
@each $breakpoint in map-keys($grid-breakpoints) { @each $breakpoint in map.keys(variables.$grid-breakpoints) {
// Generate media query if needed // Generate media query if needed
@include media-breakpoint-up($breakpoint) { @include breakpoints.media-breakpoint-up($breakpoint) {
$infix: breakpoint-infix($breakpoint, $grid-breakpoints); $infix: breakpoints.breakpoint-infix($breakpoint, variables.$grid-breakpoints);
// Loop over each utility property // 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 // 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 // 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 == "") { @if meta.type-of($utility) == "map" and (map.get($utility, responsive) or $infix == "") {
@include generate-utility($utility, $infix); @include mixins-utilities.generate-utility($utility, $infix);
} }
} }
} }
} }
// RFS rescaling // RFS rescaling
@media (min-width: $rfs-mq-value) { @media (min-width: rfs.$rfs-mq-value) {
@each $breakpoint in map-keys($grid-breakpoints) { @each $breakpoint in map.keys(variables.$grid-breakpoints) {
$infix: breakpoint-infix($breakpoint, $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 // 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 // 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 // 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 == "") { @if meta.type-of($utility) == "map" and map.get($utility, rfs) and (map.get($utility, responsive) or $infix == "") {
@include generate-utility($utility, $infix, true); @include mixins-utilities.generate-utility($utility, $infix, true);
} }
} }
} }
@ -37,11 +45,11 @@
// Print utilities // Print utilities
@media print { @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 // The utility can be disabled with `false`, thus check if the utility is a map first
// Then check if the utility needs print styles // Then check if the utility needs print styles
@if type-of($utility) == "map" and map-get($utility, print) == true { @if meta.type-of($utility) == "map" and map.get($utility, print) == true {
@include generate-utility($utility, "-print"); @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"; @use "sass:math";
// stylelint-disable scss/dimension-no-non-numeric-values // stylelint-disable scss/dimension-no-non-numeric-values
@ -32,7 +34,7 @@ $rfs-two-dimensional: false !default;
// Factor of decrease // Factor of decrease
$rfs-factor: 10 !default; $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."; @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; $enable-rfs: true !default;
// Cache $rfs-base-value unit // 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 // Remove px-unit from $rfs-base-value for calculations
@if $rfs-base-value-unit == px { @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 // 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 // Remove unit from $rfs-breakpoint for calculations
@if $rfs-breakpoint-unit-cache == px { @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 // Helper function to get the formatted non-responsive value
@function rfs-value($values) { @function rfs-value($values) {
// Convert to list // Convert to list
$values: if(type-of($values) != list, ($values,), $values); $values: if(meta.type-of($values) != list, ($values,), $values);
$val: ""; $val: "";
@ -161,7 +163,7 @@ $rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height
} }
@else { @else {
// Cache $value unit // 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 { @if $unit == px {
// Convert to rem if needed // 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 // 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 // Helper function to get the responsive value calculated by RFS
@function rfs-fluid-value($values) { @function rfs-fluid-value($values) {
// Convert to list // Convert to list
$values: if(type-of($values) != list, ($values,), $values); $values: if(meta.type-of($values) != list, ($values,), $values);
$val: ""; $val: "";
@ -194,7 +196,7 @@ $rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height
$val: $val + " 0"; $val: $val + " 0";
} @else { } @else {
// Cache $value unit // 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 $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 { @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))); $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 // 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); $val: $val + " " + if($rfs-unit == rem, #{math.div($value, $rfs-rem-value)}rem, #{$value}px);
} }
@else { @else {
// Calculate the minimum value // 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 // Calculate difference between $value and the minimum value
$value-diff: abs($value) - $value-min; $value-diff: math.abs($value) - $value-min;
// Base value formatting // Base value formatting
$min-width: if($rfs-unit == rem, #{math.div($value-min, $rfs-rem-value)}rem, #{$value-min}px); $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}; $variable-width: #{math.div($value-diff * 100, $rfs-breakpoint)}#{$variable-unit};
// Return the calculated value // 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 // Remove first space
@return unquote(str-slice($val, 2)); @return string.unquote(string.slice($val, 2));
} }
// RFS mixin // RFS mixin