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

Add additional root variables, rename $variable-prefix to $prefix (#35981)

Browse Source 
* Add additional root variables, rename $variable-prefix to $prefix

- Adds new root CSS variables for border-radius, border-width, border-color, and border-style
- Adds new root CSS variables for heading-color, link-colors, code color, and highlight color
- Replaces most instances of Sass variables (for border-radius, border-color, border-style, and border-width) for CSS variables inside _variables.scss
- Updates $mark-padding to be an even pixel number
- Renames $variable-prefix to $prefix throughout

* Bundlewatch
This commit is contained in:
Mark Otto 2022-03-13 10:13:09 -07:00 committed by GitHub
parent 7c966f5848
commit acf6ea74a7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
29 changed files with 581 additions and 566 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
.bundlewatch.config.json
View File

@ -6,11 +6,11 @@
}, },
{ {
"path": "./dist/css/bootstrap-grid.min.css", "path": "./dist/css/bootstrap-grid.min.css",
"maxSize": "6.5 kB" "maxSize": "6.55 kB"
}, },
{ {
"path": "./dist/css/bootstrap-reboot.css", "path": "./dist/css/bootstrap-reboot.css",
"maxSize": "2.5 kB" "maxSize": "2.55 kB"
}, },
{ {
"path": "./dist/css/bootstrap-reboot.min.css", "path": "./dist/css/bootstrap-reboot.min.css",
@ -26,11 +26,11 @@
}, },
{ {
"path": "./dist/css/bootstrap.css", "path": "./dist/css/bootstrap.css",
"maxSize": "26.4 kB" "maxSize": "26.6 kB"
}, },
{ {
"path": "./dist/css/bootstrap.min.css", "path": "./dist/css/bootstrap.min.css",
"maxSize": "24.5 kB" "maxSize": "24.65 kB"
}, },
{ {
"path": "./dist/js/bootstrap.bundle.js", "path": "./dist/js/bootstrap.bundle.js",

28
scss/_alert.scss
View File

@ -4,23 +4,23 @@
.alert { .alert {
// scss-docs-start alert-css-vars // scss-docs-start alert-css-vars
--#{$variable-prefix}alert-bg: transparent; --#{$prefix}alert-bg: transparent;
--#{$variable-prefix}alert-padding-x: #{$alert-padding-x}; --#{$prefix}alert-padding-x: #{$alert-padding-x};
--#{$variable-prefix}alert-padding-y: #{$alert-padding-y}; --#{$prefix}alert-padding-y: #{$alert-padding-y};
--#{$variable-prefix}alert-margin-bottom: #{$alert-margin-bottom}; --#{$prefix}alert-margin-bottom: #{$alert-margin-bottom};
--#{$variable-prefix}alert-color: inherit; --#{$prefix}alert-color: inherit;
--#{$variable-prefix}alert-border-color: transparent; --#{$prefix}alert-border-color: transparent;
--#{$variable-prefix}alert-border: #{$alert-border-width} solid var(--#{$variable-prefix}alert-border-color); --#{$prefix}alert-border: #{$alert-border-width} solid var(--#{$prefix}alert-border-color);
--#{$variable-prefix}alert-border-radius: #{$alert-border-radius}; --#{$prefix}alert-border-radius: #{$alert-border-radius};
// scss-docs-end alert-css-vars // scss-docs-end alert-css-vars
position: relative; position: relative;
padding: var(--#{$variable-prefix}alert-padding-y) var(--#{$variable-prefix}alert-padding-x); padding: var(--#{$prefix}alert-padding-y) var(--#{$prefix}alert-padding-x);
margin-bottom: var(--#{$variable-prefix}alert-margin-bottom); margin-bottom: var(--#{$prefix}alert-margin-bottom);
color: var(--#{$variable-prefix}alert-color); color: var(--#{$prefix}alert-color);
background-color: var(--#{$variable-prefix}alert-bg); background-color: var(--#{$prefix}alert-bg);
border: var(--#{$variable-prefix}alert-border); border: var(--#{$prefix}alert-border);
border-radius: var(--#{$variable-prefix}alert-border-radius, 0); // stylelint-disable-line property-disallowed-list border-radius: var(--#{$prefix}alert-border-radius, 0); // stylelint-disable-line property-disallowed-list
} }
// Headings for larger alerts // Headings for larger alerts

22
scss/_badge.scss
View File

@ -7,24 +7,24 @@
.badge { .badge {
// scss-docs-start badge-css-vars // scss-docs-start badge-css-vars
--#{$variable-prefix}badge-padding-x: #{$badge-padding-x}; --#{$prefix}badge-padding-x: #{$badge-padding-x};
--#{$variable-prefix}badge-padding-y: #{$badge-padding-y}; --#{$prefix}badge-padding-y: #{$badge-padding-y};
@include rfs($badge-font-size, --#{$variable-prefix}badge-font-size); @include rfs($badge-font-size, --#{$prefix}badge-font-size);
--#{$variable-prefix}badge-font-weight: #{$badge-font-weight}; --#{$prefix}badge-font-weight: #{$badge-font-weight};
--#{$variable-prefix}badge-color: #{$badge-color}; --#{$prefix}badge-color: #{$badge-color};
--#{$variable-prefix}badge-border-radius: #{$badge-border-radius}; --#{$prefix}badge-border-radius: #{$badge-border-radius};
// scss-docs-end badge-css-vars // scss-docs-end badge-css-vars
display: inline-block; display: inline-block;
padding: var(--#{$variable-prefix}badge-padding-y) var(--#{$variable-prefix}badge-padding-x); padding: var(--#{$prefix}badge-padding-y) var(--#{$prefix}badge-padding-x);
font-size: var(--#{$variable-prefix}badge-font-size); font-size: var(--#{$prefix}badge-font-size);
font-weight: var(--#{$variable-prefix}badge-font-weight); font-weight: var(--#{$prefix}badge-font-weight);
line-height: 1; line-height: 1;
color: var(--#{$variable-prefix}badge-color); color: var(--#{$prefix}badge-color);
text-align: center; text-align: center;
white-space: nowrap; white-space: nowrap;
vertical-align: baseline; vertical-align: baseline;
border-radius: var(--#{$variable-prefix}badge-border-radius, 0); // stylelint-disable-line property-disallowed-list border-radius: var(--#{$prefix}badge-border-radius, 0); // stylelint-disable-line property-disallowed-list
@include gradient-bg(); @include gradient-bg();
// Empty badges collapse automatically // Empty badges collapse automatically

38
scss/_breadcrumb.scss
View File

@ -2,42 +2,42 @@
.breadcrumb { .breadcrumb {
// scss-docs-start breadcrumb-css-vars // scss-docs-start breadcrumb-css-vars
--#{$variable-prefix}breadcrumb-padding-x: #{$breadcrumb-padding-x}; --#{$prefix}breadcrumb-padding-x: #{$breadcrumb-padding-x};
--#{$variable-prefix}breadcrumb-padding-y: #{$breadcrumb-padding-y}; --#{$prefix}breadcrumb-padding-y: #{$breadcrumb-padding-y};
--#{$variable-prefix}breadcrumb-margin-bottom: #{$breadcrumb-margin-bottom}; --#{$prefix}breadcrumb-margin-bottom: #{$breadcrumb-margin-bottom};
@include rfs($breadcrumb-font-size, --#{$variable-prefix}breadcrumb-font-size); @include rfs($breadcrumb-font-size, --#{$prefix}breadcrumb-font-size);
--#{$variable-prefix}breadcrumb-bg: #{$breadcrumb-bg}; --#{$prefix}breadcrumb-bg: #{$breadcrumb-bg};
--#{$variable-prefix}breadcrumb-border-radius: #{$breadcrumb-border-radius}; --#{$prefix}breadcrumb-border-radius: #{$breadcrumb-border-radius};
--#{$variable-prefix}breadcrumb-divider-color: #{$breadcrumb-divider-color}; --#{$prefix}breadcrumb-divider-color: #{$breadcrumb-divider-color};
--#{$variable-prefix}breadcrumb-item-padding-x: #{$breadcrumb-item-padding-x}; --#{$prefix}breadcrumb-item-padding-x: #{$breadcrumb-item-padding-x};
--#{$variable-prefix}breadcrumb-item-active-color: #{$breadcrumb-active-color}; --#{$prefix}breadcrumb-item-active-color: #{$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(--#{$variable-prefix}breadcrumb-padding-y) var(--#{$variable-prefix}breadcrumb-padding-x); padding: var(--#{$prefix}breadcrumb-padding-y) var(--#{$prefix}breadcrumb-padding-x);
margin-bottom: var(--#{$variable-prefix}breadcrumb-margin-bottom); margin-bottom: var(--#{$prefix}breadcrumb-margin-bottom);
@include font-size($breadcrumb-font-size); @include font-size($breadcrumb-font-size);
font-size: var(--#{$variable-prefix}breadcrumb-font-size); font-size: var(--#{$prefix}breadcrumb-font-size);
list-style: none; list-style: none;
background-color: var(--#{$variable-prefix}breadcrumb-bg); background-color: var(--#{$prefix}breadcrumb-bg);
@include border-radius(var(--#{$variable-prefix}breadcrumb-border-radius)); @include border-radius(var(--#{$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(--#{$variable-prefix}breadcrumb-item-padding-x); padding-left: var(--#{$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(--#{$variable-prefix}breadcrumb-item-padding-x); padding-right: $breadcrumb-item-padding-x;
color: var(--#{$variable-prefix}breadcrumb-divider-color); color: $breadcrumb-divider-color;
content: var(--#{$variable-prefix}breadcrumb-divider, escape-svg($breadcrumb-divider)) #{"/* rtl:"} var(--#{$variable-prefix}breadcrumb-divider, escape-svg($breadcrumb-divider-flipped)) #{"*/"}; content: var(--#{$prefix}breadcrumb-divider, escape-svg($breadcrumb-divider)) #{"/* rtl:"} var(--#{$prefix}breadcrumb-divider, escape-svg($breadcrumb-divider-flipped)) #{"*/"};
} }
} }
&.active { &.active {
color: var(--#{$variable-prefix}breadcrumb-item-active-color); color: var(--#{$prefix}breadcrumb-item-active-color);
} }
} }

104
scss/_buttons.scss
View File

@ -6,59 +6,59 @@
.btn { .btn {
// scss-docs-start btn-css-vars // scss-docs-start btn-css-vars
--#{$variable-prefix}btn-padding-x: #{$btn-padding-x}; --#{$prefix}btn-padding-x: #{$btn-padding-x};
--#{$variable-prefix}btn-padding-y: #{$btn-padding-y}; --#{$prefix}btn-padding-y: #{$btn-padding-y};
--#{$variable-prefix}btn-font-family: #{$btn-font-family}; --#{$prefix}btn-font-family: #{$btn-font-family};
@include rfs($btn-font-size, --#{$variable-prefix}btn-font-size); @include rfs($btn-font-size, --#{$prefix}btn-font-size);
--#{$variable-prefix}btn-font-weight: #{$btn-font-weight}; --#{$prefix}btn-font-weight: #{$btn-font-weight};
--#{$variable-prefix}btn-line-height: #{$btn-line-height}; --#{$prefix}btn-line-height: #{$btn-line-height};
--#{$variable-prefix}btn-color: #{$body-color}; --#{$prefix}btn-color: #{$body-color};
--#{$variable-prefix}btn-bg: transparent; --#{$prefix}btn-bg: transparent;
--#{$variable-prefix}btn-border-width: #{$btn-border-width}; --#{$prefix}btn-border-width: #{$btn-border-width};
--#{$variable-prefix}btn-border-color: transparent; --#{$prefix}btn-border-color: transparent;
--#{$variable-prefix}btn-border-radius: #{$btn-border-radius}; --#{$prefix}btn-border-radius: #{$btn-border-radius};
--#{$variable-prefix}btn-box-shadow: #{$btn-box-shadow}; --#{$prefix}btn-box-shadow: #{$btn-box-shadow};
--#{$variable-prefix}btn-disabled-opacity: #{$btn-disabled-opacity}; --#{$prefix}btn-disabled-opacity: #{$btn-disabled-opacity};
--#{$variable-prefix}btn-focus-box-shadow: 0 0 0 #{$btn-focus-width} rgba(var(--#{$variable-prefix}btn-focus-shadow-rgb), .5); --#{$prefix}btn-focus-box-shadow: 0 0 0 #{$btn-focus-width} rgba(var(--#{$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(--#{$variable-prefix}btn-padding-y) var(--#{$variable-prefix}btn-padding-x); padding: var(--#{$prefix}btn-padding-y) var(--#{$prefix}btn-padding-x);
font-family: var(--#{$variable-prefix}btn-font-family); font-family: var(--#{$prefix}btn-font-family);
font-size: var(--#{$variable-prefix}btn-font-size); font-size: var(--#{$prefix}btn-font-size);
font-weight: var(--#{$variable-prefix}btn-font-weight); font-weight: var(--#{$prefix}btn-font-weight);
line-height: var(--#{$variable-prefix}btn-line-height); line-height: var(--#{$prefix}btn-line-height);
color: var(--#{$variable-prefix}btn-color); color: var(--#{$prefix}btn-color);
text-align: center; text-align: center;
text-decoration: if($link-decoration == none, null, none); text-decoration: if($link-decoration == none, null, none);
white-space: $btn-white-space; white-space: $btn-white-space;
vertical-align: middle; vertical-align: middle;
cursor: if($enable-button-pointers, pointer, null); cursor: if($enable-button-pointers, pointer, null);
user-select: none; user-select: none;
border: var(--#{$variable-prefix}btn-border-width) solid var(--#{$variable-prefix}btn-border-color); border: var(--#{$prefix}btn-border-width) solid var(--#{$prefix}btn-border-color);
@include border-radius(var(--#{$variable-prefix}btn-border-radius)); @include border-radius(var(--#{$prefix}btn-border-radius));
@include gradient-bg(var(--#{$variable-prefix}btn-bg)); @include gradient-bg(var(--#{$prefix}btn-bg));
@include box-shadow(var(--#{$variable-prefix}btn-box-shadow)); @include box-shadow(var(--#{$prefix}btn-box-shadow));
@include transition($btn-transition); @include transition($btn-transition);
&:hover { &:hover {
color: var(--#{$variable-prefix}btn-hover-color); color: var(--#{$prefix}btn-hover-color);
text-decoration: if($link-hover-decoration == underline, none, null); text-decoration: if($link-hover-decoration == underline, none, null);
background-color: var(--#{$variable-prefix}btn-hover-bg); background-color: var(--#{$prefix}btn-hover-bg);
border-color: var(--#{$variable-prefix}btn-hover-border-color); border-color: var(--#{$prefix}btn-hover-border-color);
} }
.btn-check:focus + &, .btn-check:focus + &,
&:focus { &:focus {
color: var(--#{$variable-prefix}btn-hover-color); color: var(--#{$prefix}btn-hover-color);
@include gradient-bg(var(--#{$variable-prefix}btn-hover-bg)); @include gradient-bg(var(--#{$prefix}btn-hover-bg));
border-color: var(--#{$variable-prefix}btn-hover-border-color); border-color: var(--#{$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 $enable-shadows {
box-shadow: var(--#{$variable-prefix}btn-box-shadow), var(--#{$variable-prefix}btn-focus-box-shadow); box-shadow: var(--#{$prefix}btn-box-shadow), var(--#{$prefix}btn-focus-box-shadow);
} @else { } @else {
box-shadow: var(--#{$variable-prefix}btn-focus-box-shadow); box-shadow: var(--#{$prefix}btn-focus-box-shadow);
} }
} }
@ -67,19 +67,19 @@
&:active, &:active,
&.active, &.active,
&.show { &.show {
color: var(--#{$variable-prefix}btn-active-color); color: var(--#{$prefix}btn-active-color);
background-color: var(--#{$variable-prefix}btn-active-bg); background-color: var(--#{$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($enable-gradients, none, null);
border-color: var(--#{$variable-prefix}btn-active-border-color); border-color: var(--#{$prefix}btn-active-border-color);
@include box-shadow(var(--#{$variable-prefix}btn-active-shadow)); @include box-shadow(var(--#{$prefix}btn-active-shadow));
&:focus { &:focus {
// 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 $enable-shadows {
box-shadow: var(--#{$variable-prefix}btn-active-shadow), var(--#{$variable-prefix}btn-focus-box-shadow); box-shadow: var(--#{$prefix}btn-active-shadow), var(--#{$prefix}btn-focus-box-shadow);
} @else { } @else {
box-shadow: var(--#{$variable-prefix}btn-focus-box-shadow); box-shadow: var(--#{$prefix}btn-focus-box-shadow);
} }
} }
} }
@ -87,12 +87,12 @@
&:disabled, &:disabled,
&.disabled, &.disabled,
fieldset:disabled & { fieldset:disabled & {
color: var(--#{$variable-prefix}btn-disabled-color); color: var(--#{$prefix}btn-disabled-color);
pointer-events: none; pointer-events: none;
background-color: var(--#{$variable-prefix}btn-disabled-bg); background-color: var(--#{$prefix}btn-disabled-bg);
background-image: if($enable-gradients, none, null); background-image: if($enable-gradients, none, null);
border-color: var(--#{$variable-prefix}btn-disabled-border-color); border-color: var(--#{$prefix}btn-disabled-border-color);
opacity: var(--#{$variable-prefix}btn-disabled-opacity); opacity: var(--#{$prefix}btn-disabled-opacity);
@include box-shadow(none); @include box-shadow(none);
} }
} }
@ -123,16 +123,16 @@
// Make a button look and behave like a link // Make a button look and behave like a link
.btn-link { .btn-link {
--#{$variable-prefix}btn-font-weight: #{$font-weight-normal}; --#{$prefix}btn-font-weight: #{$font-weight-normal};
--#{$variable-prefix}btn-color: #{$btn-link-color}; --#{$prefix}btn-color: #{$btn-link-color};
--#{$variable-prefix}btn-bg: transparent; --#{$prefix}btn-bg: transparent;
--#{$variable-prefix}btn-border-color: transparent; --#{$prefix}btn-border-color: transparent;
--#{$variable-prefix}btn-hover-color: #{$btn-link-hover-color}; --#{$prefix}btn-hover-color: #{$btn-link-hover-color};
--#{$variable-prefix}btn-hover-border-color: transparent; --#{$prefix}btn-hover-border-color: transparent;
--#{$variable-prefix}btn-active-border-color: transparent; --#{$prefix}btn-active-border-color: transparent;
--#{$variable-prefix}btn-disabled-color: #{$btn-link-disabled-color}; --#{$prefix}btn-disabled-color: #{$btn-link-disabled-color};
--#{$variable-prefix}btn-disabled-border-color: transparent; --#{$prefix}btn-disabled-border-color: transparent;
--#{$variable-prefix}btn-box-shadow: none; --#{$prefix}btn-box-shadow: none;
text-decoration: $link-decoration; text-decoration: $link-decoration;

128
scss/_dropdown.scss
View File

@ -18,53 +18,53 @@
// The dropdown menu // The dropdown menu
.dropdown-menu { .dropdown-menu {
// scss-docs-start dropdown-css-vars // scss-docs-start dropdown-css-vars
--#{$variable-prefix}dropdown-min-width: #{$dropdown-min-width}; --#{$prefix}dropdown-min-width: #{$dropdown-min-width};
--#{$variable-prefix}dropdown-padding-x: #{$dropdown-padding-x}; --#{$prefix}dropdown-padding-x: #{$dropdown-padding-x};
--#{$variable-prefix}dropdown-padding-y: #{$dropdown-padding-y}; --#{$prefix}dropdown-padding-y: #{$dropdown-padding-y};
--#{$variable-prefix}dropdown-spacer: #{$dropdown-spacer}; --#{$prefix}dropdown-spacer: #{$dropdown-spacer};
@include rfs($dropdown-font-size, --#{$variable-prefix}dropdown-font-size); @include rfs($dropdown-font-size, --#{$prefix}dropdown-font-size);
--#{$variable-prefix}dropdown-color: #{$dropdown-color}; // stylelint-disable-line custom-property-empty-line-before --#{$prefix}dropdown-color: #{$dropdown-color}; // stylelint-disable-line custom-property-empty-line-before
--#{$variable-prefix}dropdown-bg: #{$dropdown-bg}; --#{$prefix}dropdown-bg: #{$dropdown-bg};
--#{$variable-prefix}dropdown-border-color: #{$dropdown-border-color}; --#{$prefix}dropdown-border-color: #{$dropdown-border-color};
--#{$variable-prefix}dropdown-border-radius: #{$dropdown-border-radius}; --#{$prefix}dropdown-border-radius: #{$dropdown-border-radius};
--#{$variable-prefix}dropdown-border-width: #{$dropdown-border-width}; --#{$prefix}dropdown-border-width: #{$dropdown-border-width};
--#{$variable-prefix}dropdown-inner-border-radius: #{$dropdown-inner-border-radius}; --#{$prefix}dropdown-inner-border-radius: #{$dropdown-inner-border-radius};
--#{$variable-prefix}dropdown-divider-bg: #{$dropdown-divider-bg}; --#{$prefix}dropdown-divider-bg: #{$dropdown-divider-bg};
--#{$variable-prefix}dropdown-divider-margin-y: #{$dropdown-divider-margin-y}; --#{$prefix}dropdown-divider-margin-y: #{$dropdown-divider-margin-y};
--#{$variable-prefix}dropdown-box-shadow: #{$dropdown-box-shadow}; --#{$prefix}dropdown-box-shadow: #{$dropdown-box-shadow};
--#{$variable-prefix}dropdown-link-color: #{$dropdown-link-color}; --#{$prefix}dropdown-link-color: #{$dropdown-link-color};
--#{$variable-prefix}dropdown-link-hover-color: #{$dropdown-link-hover-color}; --#{$prefix}dropdown-link-hover-color: #{$dropdown-link-hover-color};
--#{$variable-prefix}dropdown-link-hover-bg: #{$dropdown-link-hover-bg}; --#{$prefix}dropdown-link-hover-bg: #{$dropdown-link-hover-bg};
--#{$variable-prefix}dropdown-link-active-color: #{$dropdown-link-active-color}; --#{$prefix}dropdown-link-active-color: #{$dropdown-link-active-color};
--#{$variable-prefix}dropdown-link-active-bg: #{$dropdown-link-active-bg}; --#{$prefix}dropdown-link-active-bg: #{$dropdown-link-active-bg};
--#{$variable-prefix}dropdown-link-disabled-color: #{$dropdown-link-disabled-color}; --#{$prefix}dropdown-link-disabled-color: #{$dropdown-link-disabled-color};
--#{$variable-prefix}dropdown-item-padding-x: #{$dropdown-item-padding-x}; --#{$prefix}dropdown-item-padding-x: #{$dropdown-item-padding-x};
--#{$variable-prefix}dropdown-item-padding-y: #{$dropdown-item-padding-y}; --#{$prefix}dropdown-item-padding-y: #{$dropdown-item-padding-y};
--#{$variable-prefix}dropdown-header-color: #{$dropdown-header-color}; --#{$prefix}dropdown-header-color: #{$dropdown-header-color};
--#{$variable-prefix}dropdown-header-padding-x: #{$dropdown-header-padding-x}; --#{$prefix}dropdown-header-padding-x: #{$dropdown-header-padding-x};
--#{$variable-prefix}dropdown-header-padding-y: #{$dropdown-header-padding-y}; --#{$prefix}dropdown-header-padding-y: #{$dropdown-header-padding-y};
// scss-docs-end dropdown-css-vars // scss-docs-end dropdown-css-vars
position: absolute; position: absolute;
z-index: $zindex-dropdown; z-index: $zindex-dropdown;
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(--#{$variable-prefix}dropdown-min-width); min-width: var(--#{$prefix}dropdown-min-width);
padding: var(--#{$variable-prefix}dropdown-padding-y) var(--#{$variable-prefix}dropdown-padding-x); padding: var(--#{$prefix}dropdown-padding-y) var(--#{$prefix}dropdown-padding-x);
margin: 0; // Override default margin of ul margin: 0; // Override default margin of ul
@include font-size(var(--#{$variable-prefix}dropdown-font-size)); @include font-size(var(--#{$prefix}dropdown-font-size));
color: var(--#{$variable-prefix}dropdown-color); color: var(--#{$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(--#{$variable-prefix}dropdown-bg); background-color: var(--#{$prefix}dropdown-bg);
background-clip: padding-box; background-clip: padding-box;
border: var(--#{$variable-prefix}dropdown-border-width) solid var(--#{$variable-prefix}dropdown-border-color); border: var(--#{$prefix}dropdown-border-width) solid var(--#{$prefix}dropdown-border-color);
@include border-radius(var(--#{$variable-prefix}dropdown-border-radius)); @include border-radius(var(--#{$prefix}dropdown-border-radius));
@include box-shadow(var(--#{$variable-prefix}dropdown-box-shadow)); @include box-shadow(var(--#{$prefix}dropdown-box-shadow));
&[data-bs-popper] { &[data-bs-popper] {
top: 100%; top: 100%;
left: 0; left: 0;
margin-top: var(--#{$variable-prefix}dropdown-spacer); margin-top: var(--#{$prefix}dropdown-spacer);
} }
} }
@ -104,7 +104,7 @@
top: auto; top: auto;
bottom: 100%; bottom: 100%;
margin-top: 0; margin-top: 0;
margin-bottom: var(--#{$variable-prefix}dropdown-spacer); margin-bottom: var(--#{$prefix}dropdown-spacer);
} }
.dropdown-toggle { .dropdown-toggle {
@ -118,7 +118,7 @@
right: auto; right: auto;
left: 100%; left: 100%;
margin-top: 0; margin-top: 0;
margin-left: var(--#{$variable-prefix}dropdown-spacer); margin-left: var(--#{$prefix}dropdown-spacer);
} }
.dropdown-toggle { .dropdown-toggle {
@ -135,7 +135,7 @@
right: 100%; right: 100%;
left: auto; left: auto;
margin-top: 0; margin-top: 0;
margin-right: var(--#{$variable-prefix}dropdown-spacer); margin-right: var(--#{$prefix}dropdown-spacer);
} }
.dropdown-toggle { .dropdown-toggle {
@ -150,9 +150,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(--#{$variable-prefix}dropdown-divider-margin-y) 0; margin: var(--#{$prefix}dropdown-divider-margin-y) 0;
overflow: hidden; overflow: hidden;
border-top: 1px solid var(--#{$variable-prefix}dropdown-divider-bg); border-top: 1px solid var(--#{$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
} }
@ -162,10 +162,10 @@
.dropdown-item { .dropdown-item {
display: block; display: block;
width: 100%; // For `<button>`s width: 100%; // For `<button>`s
padding: var(--#{$variable-prefix}dropdown-item-padding-y) var(--#{$variable-prefix}dropdown-item-padding-x); padding: var(--#{$prefix}dropdown-item-padding-y) var(--#{$prefix}dropdown-item-padding-x);
clear: both; clear: both;
font-weight: $font-weight-normal; font-weight: $font-weight-normal;
color: var(--#{$variable-prefix}dropdown-link-color); color: var(--#{$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($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
@ -176,31 +176,31 @@
// See https://github.com/twbs/bootstrap/pull/27703 // See https://github.com/twbs/bootstrap/pull/27703
@if $dropdown-padding-y == 0 { @if $dropdown-padding-y == 0 {
&:first-child { &:first-child {
@include border-top-radius(var(--#{$variable-prefix}dropdown-inner-border-radius)); @include border-top-radius(var(--#{$prefix}dropdown-inner-border-radius));
} }
&:last-child { &:last-child {
@include border-bottom-radius(var(--#{$variable-prefix}dropdown-inner-border-radius)); @include border-bottom-radius(var(--#{$prefix}dropdown-inner-border-radius));
} }
} }
&:hover, &:hover,
&:focus { &:focus {
color: var(--#{$variable-prefix}dropdown-link-hover-color); color: var(--#{$prefix}dropdown-link-hover-color);
text-decoration: if($link-hover-decoration == underline, none, null); text-decoration: if($link-hover-decoration == underline, none, null);
@include gradient-bg(var(--#{$variable-prefix}dropdown-link-hover-bg)); @include gradient-bg(var(--#{$prefix}dropdown-link-hover-bg));
} }
&.active, &.active,
&:active { &:active {
color: var(--#{$variable-prefix}dropdown-link-active-color); color: var(--#{$prefix}dropdown-link-active-color);
text-decoration: none; text-decoration: none;
@include gradient-bg(var(--#{$variable-prefix}dropdown-link-active-bg)); @include gradient-bg(var(--#{$prefix}dropdown-link-active-bg));
} }
&.disabled, &.disabled,
&:disabled { &:disabled {
color: var(--#{$variable-prefix}dropdown-link-disabled-color); color: var(--#{$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
@ -215,34 +215,34 @@
// Dropdown section headers // Dropdown section headers
.dropdown-header { .dropdown-header {
display: block; display: block;
padding: var(--#{$variable-prefix}dropdown-header-padding-y) var(--#{$variable-prefix}dropdown-header-padding-x); padding: var(--#{$prefix}dropdown-header-padding-y) var(--#{$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 font-size($font-size-sm);
color: var(--#{$variable-prefix}dropdown-header-color); color: var(--#{$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(--#{$variable-prefix}dropdown-item-padding); padding: var(--#{$prefix}dropdown-item-padding);
color: var(--#{$variable-prefix}dropdown-link-color); color: var(--#{$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
--#{$variable-prefix}dropdown-color: #{$dropdown-dark-color}; --#{$prefix}dropdown-color: #{$dropdown-dark-color};
--#{$variable-prefix}dropdown-bg: #{$dropdown-dark-bg}; --#{$prefix}dropdown-bg: #{$dropdown-dark-bg};
--#{$variable-prefix}dropdown-border-color: #{$dropdown-dark-border-color}; --#{$prefix}dropdown-border-color: #{$dropdown-dark-border-color};
--#{$variable-prefix}dropdown-box-shadow: #{$dropdown-dark-box-shadow}; --#{$prefix}dropdown-box-shadow: #{$dropdown-dark-box-shadow};
--#{$variable-prefix}dropdown-link-color: #{$dropdown-dark-link-color}; --#{$prefix}dropdown-link-color: #{$dropdown-dark-link-color};
--#{$variable-prefix}dropdown-link-hover-color: #{$dropdown-dark-link-hover-color}; --#{$prefix}dropdown-link-hover-color: #{$dropdown-dark-link-hover-color};
--#{$variable-prefix}dropdown-divider-bg: #{$dropdown-dark-divider-bg}; --#{$prefix}dropdown-divider-bg: #{$dropdown-dark-divider-bg};
--#{$variable-prefix}dropdown-link-hover-bg: #{$dropdown-dark-link-hover-bg}; --#{$prefix}dropdown-link-hover-bg: #{$dropdown-dark-link-hover-bg};
--#{$variable-prefix}dropdown-link-active-color: #{$dropdown-dark-link-active-color}; --#{$prefix}dropdown-link-active-color: #{$dropdown-dark-link-active-color};
--#{$variable-prefix}dropdown-link-active-bg: #{$dropdown-dark-link-active-bg}; --#{$prefix}dropdown-link-active-bg: #{$dropdown-dark-link-active-bg};
--#{$variable-prefix}dropdown-link-disabled-color: #{$dropdown-dark-link-disabled-color}; --#{$prefix}dropdown-link-disabled-color: #{$dropdown-dark-link-disabled-color};
--#{$variable-prefix}dropdown-header-color: #{$dropdown-dark-header-color}; --#{$prefix}dropdown-header-color: #{$dropdown-dark-header-color};
// scss-docs-end dropdown-dark-css-vars // scss-docs-end dropdown-dark-css-vars
} }

8
scss/_functions.scss
View File

@ -40,11 +40,11 @@
// 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(--#{$variable-prefix}#{$identifier}-bg-rgb), var(--#{$variable-prefix}#{$target}-opacity)); @return rgba(var(--#{$prefix}#{$identifier}-bg-rgb), var(--#{$prefix}#{$target}-opacity));
} @if $identifier == "body" and $target == "text" { } @if $identifier == "body" and $target == "text" {
@return rgba(var(--#{$variable-prefix}#{$identifier}-color-rgb), var(--#{$variable-prefix}#{$target}-opacity)); @return rgba(var(--#{$prefix}#{$identifier}-color-rgb), var(--#{$prefix}#{$target}-opacity));
} @else { } @else {
@return rgba(var(--#{$variable-prefix}#{$identifier}-rgb), var(--#{$variable-prefix}#{$target}-opacity)); @return rgba(var(--#{$prefix}#{$identifier}-rgb), var(--#{$prefix}#{$target}-opacity));
} }
} }
@ -68,7 +68,7 @@
@function varify($list) { @function varify($list) {
$result: null; $result: null;
@each $entry in $list { @each $entry in $list {
$result: append($result, var(--#{$variable-prefix}#{$entry}), space); $result: append($result, var(--#{$prefix}#{$entry}), space);
} }
@return $result; @return $result;
} }

6
scss/_grid.scss
View File

@ -15,9 +15,9 @@
@if $enable-cssgrid { @if $enable-cssgrid {
.grid { .grid {
display: grid; display: grid;
grid-template-rows: repeat(var(--#{$variable-prefix}rows, 1), 1fr); grid-template-rows: repeat(var(--#{$prefix}rows, 1), 1fr);
grid-template-columns: repeat(var(--#{$variable-prefix}columns, #{$grid-columns}), 1fr); grid-template-columns: repeat(var(--#{$prefix}columns, #{$grid-columns}), 1fr);
gap: var(--#{$variable-prefix}gap, #{$grid-gutter-width}); gap: var(--#{$prefix}gap, #{$grid-gutter-width});
@include make-cssgrid(); @include make-cssgrid();
} }

104
scss/_navbar.scss
View File

@ -5,26 +5,26 @@
.navbar { .navbar {
// scss-docs-start navbar-css-vars // scss-docs-start navbar-css-vars
--#{$variable-prefix}navbar-padding-x: #{if($navbar-padding-x == null, 0, $navbar-padding-x)}; --#{$prefix}navbar-padding-x: #{if($navbar-padding-x == null, 0, $navbar-padding-x)};
--#{$variable-prefix}navbar-padding-y: #{$navbar-padding-y}; --#{$prefix}navbar-padding-y: #{$navbar-padding-y};
--#{$variable-prefix}navbar-color: #{$navbar-light-color}; --#{$prefix}navbar-color: #{$navbar-light-color};
--#{$variable-prefix}navbar-hover-color: #{$navbar-light-hover-color}; --#{$prefix}navbar-hover-color: #{$navbar-light-hover-color};
--#{$variable-prefix}navbar-disabled-color: #{$navbar-light-disabled-color}; --#{$prefix}navbar-disabled-color: #{$navbar-light-disabled-color};
--#{$variable-prefix}navbar-active-color: #{$navbar-light-active-color}; --#{$prefix}navbar-active-color: #{$navbar-light-active-color};
--#{$variable-prefix}navbar-brand-padding-y: #{$navbar-brand-padding-y}; --#{$prefix}navbar-brand-padding-y: #{$navbar-brand-padding-y};
--#{$variable-prefix}navbar-brand-margin-end: #{$navbar-brand-margin-end}; --#{$prefix}navbar-brand-margin-end: #{$navbar-brand-margin-end};
--#{$variable-prefix}navbar-brand-font-size: #{$navbar-brand-font-size}; --#{$prefix}navbar-brand-font-size: #{$navbar-brand-font-size};
--#{$variable-prefix}navbar-brand-color: #{$navbar-light-brand-color}; --#{$prefix}navbar-brand-color: #{$navbar-light-brand-color};
--#{$variable-prefix}navbar-brand-hover-color: #{$navbar-light-brand-hover-color}; --#{$prefix}navbar-brand-hover-color: #{$navbar-light-brand-hover-color};
--#{$variable-prefix}navbar-nav-link-padding-x: #{$navbar-nav-link-padding-x}; --#{$prefix}navbar-nav-link-padding-x: #{$navbar-nav-link-padding-x};
--#{$variable-prefix}navbar-toggler-padding-y: #{$navbar-toggler-padding-y}; --#{$prefix}navbar-toggler-padding-y: #{$navbar-toggler-padding-y};
--#{$variable-prefix}navbar-toggler-padding-x: #{$navbar-toggler-padding-x}; --#{$prefix}navbar-toggler-padding-x: #{$navbar-toggler-padding-x};
--#{$variable-prefix}navbar-toggler-font-size: #{$navbar-toggler-font-size}; --#{$prefix}navbar-toggler-font-size: #{$navbar-toggler-font-size};
--#{$variable-prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-light-toggler-icon-bg)}; --#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-light-toggler-icon-bg)};
--#{$variable-prefix}navbar-toggler-border-color: #{$navbar-light-toggler-border-color}; --#{$prefix}navbar-toggler-border-color: #{$navbar-light-toggler-border-color};
--#{$variable-prefix}navbar-toggler-border-radius: #{$navbar-toggler-border-radius}; --#{$prefix}navbar-toggler-border-radius: #{$navbar-toggler-border-radius};
--#{$variable-prefix}navbar-toggler-focus-width: #{$navbar-toggler-focus-width}; --#{$prefix}navbar-toggler-focus-width: #{$navbar-toggler-focus-width};
--#{$variable-prefix}navbar-toggler-transition: #{$navbar-toggler-transition}; --#{$prefix}navbar-toggler-transition: #{$navbar-toggler-transition};
// scss-docs-end navbar-css-vars // scss-docs-end navbar-css-vars
position: relative; position: relative;
@ -32,7 +32,7 @@
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(--#{$variable-prefix}navbar-padding-y) var(--#{$variable-prefix}navbar-padding-x); padding: var(--#{$prefix}navbar-padding-y) var(--#{$prefix}navbar-padding-x);
@include gradient-bg(); @include 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
@ -63,17 +63,17 @@
// Used for brand, project, or site names. // Used for brand, project, or site names.
.navbar-brand { .navbar-brand {
padding-top: var(--#{$variable-prefix}navbar-brand-padding-y); padding-top: var(--#{$prefix}navbar-brand-padding-y);
padding-bottom: var(--#{$variable-prefix}navbar-brand-padding-y); padding-bottom: var(--#{$prefix}navbar-brand-padding-y);
margin-right: var(--#{$variable-prefix}navbar-brand-margin-end); margin-right: var(--#{$prefix}navbar-brand-margin-end);
@include font-size(var(--#{$variable-prefix}navbar-brand-font-size)); @include font-size(var(--#{$prefix}navbar-brand-font-size));
color: var(--#{$variable-prefix}navbar-brand-color); color: var(--#{$prefix}navbar-brand-color);
text-decoration: if($link-decoration == none, null, none); text-decoration: if($link-decoration == none, null, none);
white-space: nowrap; white-space: nowrap;
&:hover, &:hover,
&:focus { &:focus {
color: var(--#{$variable-prefix}navbar-brand-hover-color); color: var(--#{$prefix}navbar-brand-hover-color);
text-decoration: if($link-hover-decoration == underline, none, null); text-decoration: if($link-hover-decoration == underline, none, null);
} }
} }
@ -93,21 +93,21 @@
.nav-link { .nav-link {
padding-right: 0; padding-right: 0;
padding-left: 0; padding-left: 0;
color: var(--#{$variable-prefix}navbar-color); color: var(--#{$prefix}navbar-color);
&:hover, &:hover,
&:focus { &:focus {
color: var(--#{$variable-prefix}navbar-hover-color); color: var(--#{$prefix}navbar-hover-color);
} }
&.disabled { &.disabled {
color: var(--#{$variable-prefix}navbar-disabled-color); color: var(--#{$prefix}navbar-disabled-color);
} }
} }
.show > .nav-link, .show > .nav-link,
.nav-link.active { .nav-link.active {
color: var(--#{$variable-prefix}navbar-active-color); color: var(--#{$prefix}navbar-active-color);
} }
.dropdown-menu { .dropdown-menu {
@ -123,12 +123,12 @@
.navbar-text { .navbar-text {
padding-top: $nav-link-padding-y; padding-top: $nav-link-padding-y;
padding-bottom: $nav-link-padding-y; padding-bottom: $nav-link-padding-y;
color: var(--#{$variable-prefix}navbar-color); color: var(--#{$prefix}navbar-color);
a, a,
a:hover, a:hover,
a:focus { a:focus {
color: var(--#{$variable-prefix}navbar-active-color); color: var(--#{$prefix}navbar-active-color);
} }
} }
@ -151,14 +151,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(--#{$variable-prefix}navbar-toggler-padding-y) var(--#{$variable-prefix}navbar-toggler-padding-x); padding: var(--#{$prefix}navbar-toggler-padding-y) var(--#{$prefix}navbar-toggler-padding-x);
@include font-size(var(--#{$variable-prefix}navbar-toggler-font-size)); @include font-size(var(--#{$prefix}navbar-toggler-font-size));
line-height: 1; line-height: 1;
color: var(--#{$variable-prefix}navbar-color); color: var(--#{$prefix}navbar-color);
background-color: transparent; // remove default button style background-color: transparent; // remove default button style
border: var(--#{$variable-prefix}border-width) solid var(--#{$variable-prefix}navbar-toggler-border-color); // remove default button style border: var(--#{$prefix}border-width) solid var(--#{$prefix}navbar-toggler-border-color); // remove default button style
@include border-radius(var(--#{$variable-prefix}navbar-toggler-border-radius)); @include border-radius(var(--#{$prefix}navbar-toggler-border-radius));
@include transition(var(--#{$variable-prefix}navbar-toggler-transition)); @include transition(var(--#{$prefix}navbar-toggler-transition));
&:hover { &:hover {
text-decoration: none; text-decoration: none;
@ -167,7 +167,7 @@
&:focus { &:focus {
text-decoration: none; text-decoration: none;
outline: 0; outline: 0;
box-shadow: 0 0 0 var(--#{$variable-prefix}navbar-toggler-focus-width); box-shadow: 0 0 0 var(--#{$prefix}navbar-toggler-focus-width);
} }
} }
@ -178,14 +178,14 @@
width: 1.5em; width: 1.5em;
height: 1.5em; height: 1.5em;
vertical-align: middle; vertical-align: middle;
background-image: var(--#{$variable-prefix}navbar-toggler-icon-bg); background-image: var(--#{$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(--#{$variable-prefix}scroll-height, 75vh); max-height: var(--#{$prefix}scroll-height, 75vh);
overflow-y: auto; overflow-y: auto;
} }
@ -211,8 +211,8 @@
} }
.nav-link { .nav-link {
padding-right: var(--#{$variable-prefix}navbar-nav-link-padding-x); padding-right: var(--#{$prefix}navbar-nav-link-padding-x);
padding-left: var(--#{$variable-prefix}navbar-nav-link-padding-x); padding-left: var(--#{$prefix}navbar-nav-link-padding-x);
} }
} }
@ -280,12 +280,12 @@
} }
.navbar-dark { .navbar-dark {
--#{$variable-prefix}navbar-color: #{$navbar-dark-color}; --#{$prefix}navbar-color: #{$navbar-dark-color};
--#{$variable-prefix}navbar-hover-color: #{$navbar-dark-hover-color}; --#{$prefix}navbar-hover-color: #{$navbar-dark-hover-color};
--#{$variable-prefix}navbar-disabled-color: #{$navbar-dark-disabled-color}; --#{$prefix}navbar-disabled-color: #{$navbar-dark-disabled-color};
--#{$variable-prefix}navbar-active-color: #{$navbar-dark-active-color}; --#{$prefix}navbar-active-color: #{$navbar-dark-active-color};
--#{$variable-prefix}navbar-brand-color: #{$navbar-dark-brand-color}; --#{$prefix}navbar-brand-color: #{$navbar-dark-brand-color};
--#{$variable-prefix}navbar-brand-hover-color: #{$navbar-dark-brand-hover-color}; --#{$prefix}navbar-brand-hover-color: #{$navbar-dark-brand-hover-color};
--#{$variable-prefix}navbar-toggler-border-color: #{$navbar-dark-toggler-border-color}; --#{$prefix}navbar-toggler-border-color: #{$navbar-dark-toggler-border-color};
--#{$variable-prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-dark-toggler-icon-bg)}; --#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-dark-toggler-icon-bg)};
} }

78
scss/_pagination.scss
View File

@ -1,24 +1,24 @@
.pagination { .pagination {
// scss-docs-start pagination-css-vars // scss-docs-start pagination-css-vars
--#{$variable-prefix}pagination-padding-x: #{$pagination-padding-x}; --#{$prefix}pagination-padding-x: #{$pagination-padding-x};
--#{$variable-prefix}pagination-padding-y: #{$pagination-padding-y}; --#{$prefix}pagination-padding-y: #{$pagination-padding-y};
--#{$variable-prefix}pagination-color: #{$pagination-color}; --#{$prefix}pagination-color: #{$pagination-color};
--#{$variable-prefix}pagination-bg: #{$pagination-bg}; --#{$prefix}pagination-bg: #{$pagination-bg};
--#{$variable-prefix}pagination-border-width: #{$pagination-border-width}; --#{$prefix}pagination-border-width: #{$pagination-border-width};
--#{$variable-prefix}pagination-border-color: #{$pagination-border-color}; --#{$prefix}pagination-border-color: #{$pagination-border-color};
--#{$variable-prefix}pagination-border-radius: #{$pagination-border-radius}; --#{$prefix}pagination-border-radius: #{$pagination-border-radius};
--#{$variable-prefix}pagination-hover-color: #{$pagination-hover-color}; --#{$prefix}pagination-hover-color: #{$pagination-hover-color};
--#{$variable-prefix}pagination-hover-bg: #{$pagination-hover-bg}; --#{$prefix}pagination-hover-bg: #{$pagination-hover-bg};
--#{$variable-prefix}pagination-hover-border-color: #{$pagination-hover-border-color}; --#{$prefix}pagination-hover-border-color: #{$pagination-hover-border-color};
--#{$variable-prefix}pagination-focus-color: #{$pagination-focus-color}; --#{$prefix}pagination-focus-color: #{$pagination-focus-color};
--#{$variable-prefix}pagination-focus-bg: #{$pagination-focus-bg}; --#{$prefix}pagination-focus-bg: #{$pagination-focus-bg};
--#{$variable-prefix}pagination-focus-box-shadow: #{$pagination-focus-box-shadow}; --#{$prefix}pagination-focus-box-shadow: #{$pagination-focus-box-shadow};
--#{$variable-prefix}pagination-active-color: #{$pagination-active-color}; --#{$prefix}pagination-active-color: #{$pagination-active-color};
--#{$variable-prefix}pagination-active-bg: #{$pagination-active-bg}; --#{$prefix}pagination-active-bg: #{$pagination-active-bg};
--#{$variable-prefix}pagination-active-border-color: #{$pagination-active-border-color}; --#{$prefix}pagination-active-border-color: #{$pagination-active-border-color};
--#{$variable-prefix}pagination-disabled-color: #{$pagination-disabled-color}; --#{$prefix}pagination-disabled-color: #{$pagination-disabled-color};
--#{$variable-prefix}pagination-disabled-bg: #{$pagination-disabled-bg}; --#{$prefix}pagination-disabled-bg: #{$pagination-disabled-bg};
--#{$variable-prefix}pagination-disabled-border-color: #{$pagination-disabled-border-color}; --#{$prefix}pagination-disabled-border-color: #{$pagination-disabled-border-color};
// scss-docs-end pagination-css-vars // scss-docs-end pagination-css-vars
display: flex; display: flex;
@ -28,44 +28,44 @@
.page-link { .page-link {
position: relative; position: relative;
display: block; display: block;
padding: var(--#{$variable-prefix}pagination-padding-y) var(--#{$variable-prefix}pagination-padding-x); padding: var(--#{$prefix}pagination-padding-y) var(--#{$prefix}pagination-padding-x);
font-size: var(--#{$variable-prefix}pagination-font-size); font-size: var(--#{$prefix}pagination-font-size);
color: var(--#{$variable-prefix}pagination-color); color: var(--#{$prefix}pagination-color);
text-decoration: if($link-decoration == none, null, none); text-decoration: if($link-decoration == none, null, none);
background-color: var(--#{$variable-prefix}pagination-bg); background-color: var(--#{$prefix}pagination-bg);
border: var(--#{$variable-prefix}pagination-border-width) solid var(--#{$variable-prefix}pagination-border-color); border: var(--#{$prefix}pagination-border-width) solid var(--#{$prefix}pagination-border-color);
@include transition($pagination-transition); @include transition($pagination-transition);
&:hover { &:hover {
z-index: 2; z-index: 2;
color: var(--#{$variable-prefix}pagination-hover-color); color: var(--#{$prefix}pagination-hover-color);
text-decoration: if($link-hover-decoration == underline, none, null); text-decoration: if($link-hover-decoration == underline, none, null);
background-color: var(--#{$variable-prefix}pagination-hover-bg); background-color: var(--#{$prefix}pagination-hover-bg);
border-color: var(--#{$variable-prefix}pagination-hover-border-color); border-color: var(--#{$prefix}pagination-hover-border-color);
} }
&:focus { &:focus {
z-index: 3; z-index: 3;
color: var(--#{$variable-prefix}pagination-focus-color); color: var(--#{$prefix}pagination-focus-color);
background-color: var(--#{$variable-prefix}pagination-focus-bg); background-color: var(--#{$prefix}pagination-focus-bg);
outline: $pagination-focus-outline; outline: $pagination-focus-outline;
box-shadow: var(--#{$variable-prefix}pagination-focus-box-shadow); box-shadow: var(--#{$prefix}pagination-focus-box-shadow);
} }
&.active, &.active,
.active > & { .active > & {
z-index: 3; z-index: 3;
color: var(--#{$variable-prefix}pagination-active-color); color: var(--#{$prefix}pagination-active-color);
@include gradient-bg(var(--#{$variable-prefix}pagination-active-bg)); @include gradient-bg(var(--#{$prefix}pagination-active-bg));
border-color: var(--#{$variable-prefix}pagination-active-border-color); border-color: var(--#{$prefix}pagination-active-border-color);
} }
&.disabled, &.disabled,
.disabled > & { .disabled > & {
color: var(--#{$variable-prefix}pagination-disabled-color); color: var(--#{$prefix}pagination-disabled-color);
pointer-events: none; pointer-events: none;
background-color: var(--#{$variable-prefix}pagination-disabled-bg); background-color: var(--#{$prefix}pagination-disabled-bg);
border-color: var(--#{$variable-prefix}pagination-disabled-border-color); border-color: var(--#{$prefix}pagination-disabled-border-color);
} }
} }
@ -77,19 +77,19 @@
@if $pagination-margin-start == (-$pagination-border-width) { @if $pagination-margin-start == (-$pagination-border-width) {
&:first-child { &:first-child {
.page-link { .page-link {
@include border-start-radius(var(--#{$variable-prefix}pagination-border-radius)); @include border-start-radius(var(--#{$prefix}pagination-border-radius));
} }
} }
&:last-child { &:last-child {
.page-link { .page-link {
@include border-end-radius(var(--#{$variable-prefix}pagination-border-radius)); @include border-end-radius(var(--#{$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(--#{$variable-prefix}pagination-border-radius)); @include border-radius(var(--#{$prefix}pagination-border-radius));
} }
} }
} }

120
scss/_popover.scss
View File

@ -2,49 +2,49 @@
.popover { .popover {
// scss-docs-start popover-css-vars // scss-docs-start popover-css-vars
--#{$variable-prefix}popover-zindex: #{$zindex-popover}; --#{$prefix}popover-zindex: #{$zindex-popover};
--#{$variable-prefix}popover-max-width: #{$popover-max-width}; --#{$prefix}popover-max-width: #{$popover-max-width};
@include rfs($popover-font-size, --#{$variable-prefix}popover-font-size); @include rfs($popover-font-size, --#{$prefix}popover-font-size);
--#{$variable-prefix}popover-bg: #{$popover-bg}; --#{$prefix}popover-bg: #{$popover-bg};
--#{$variable-prefix}popover-border-width: #{$popover-border-width}; --#{$prefix}popover-border-width: #{$popover-border-width};
--#{$variable-prefix}popover-border-color: #{$popover-border-color}; --#{$prefix}popover-border-color: #{$popover-border-color};
--#{$variable-prefix}popover-border-radius: #{$popover-border-radius}; --#{$prefix}popover-border-radius: #{$popover-border-radius};
--#{$variable-prefix}popover-box-shadow: #{$popover-box-shadow}; --#{$prefix}popover-box-shadow: #{$popover-box-shadow};
--#{$variable-prefix}popover-header-padding-x: #{$popover-header-padding-x}; --#{$prefix}popover-header-padding-x: #{$popover-header-padding-x};
--#{$variable-prefix}popover-header-padding-y: #{$popover-header-padding-y}; --#{$prefix}popover-header-padding-y: #{$popover-header-padding-y};
--#{$variable-prefix}popover-header-color: #{$popover-header-color}; --#{$prefix}popover-header-color: #{$popover-header-color};
--#{$variable-prefix}popover-header-bg: #{$popover-header-bg}; --#{$prefix}popover-header-bg: #{$popover-header-bg};
--#{$variable-prefix}popover-body-padding-x: #{$popover-body-padding-x}; --#{$prefix}popover-body-padding-x: #{$popover-body-padding-x};
--#{$variable-prefix}popover-body-padding-y: #{$popover-body-padding-y}; --#{$prefix}popover-body-padding-y: #{$popover-body-padding-y};
--#{$variable-prefix}popover-body-color: #{$popover-body-color}; --#{$prefix}popover-body-color: #{$popover-body-color};
--#{$variable-prefix}popover-arrow-width: #{$popover-arrow-width}; --#{$prefix}popover-arrow-width: #{$popover-arrow-width};
--#{$variable-prefix}popover-arrow-height: #{$popover-arrow-height}; --#{$prefix}popover-arrow-height: #{$popover-arrow-height};
--#{$variable-prefix}popover-arrow-border: var(--#{$variable-prefix}popover-border-color); --#{$prefix}popover-arrow-border: var(--#{$prefix}popover-border-color);
// scss-docs-end popover-css-vars // scss-docs-end popover-css-vars
position: absolute; position: absolute;
top: 0; top: 0;
left: 0 #{"/* rtl:ignore */"}; left: 0 #{"/* rtl:ignore */"};
z-index: var(--#{$variable-prefix}popover-zindex); z-index: var(--#{$prefix}popover-zindex);
display: block; display: block;
max-width: var(--#{$variable-prefix}popover-max-width); max-width: var(--#{$prefix}popover-max-width);
// Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element. // 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();
font-size: var(--#{$variable-prefix}popover-font-size); font-size: var(--#{$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(--#{$variable-prefix}popover-bg); background-color: var(--#{$prefix}popover-bg);
background-clip: padding-box; background-clip: padding-box;
border: var(--#{$variable-prefix}popover-border-width) solid var(--#{$variable-prefix}popover-border-color); border: var(--#{$prefix}popover-border-width) solid var(--#{$prefix}popover-border-color);
@include border-radius(var(--#{$variable-prefix}popover-border-radius)); @include border-radius(var(--#{$prefix}popover-border-radius));
@include box-shadow(var(--#{$variable-prefix}popover-box-shadow)); @include box-shadow(var(--#{$prefix}popover-box-shadow));
.popover-arrow { .popover-arrow {
position: absolute; position: absolute;
display: block; display: block;
width: var(--#{$variable-prefix}popover-arrow-width); width: var(--#{$prefix}popover-arrow-width);
height: var(--#{$variable-prefix}popover-arrow-height); height: var(--#{$prefix}popover-arrow-height);
&::before, &::before,
&::after { &::after {
@ -60,21 +60,21 @@
.bs-popover-top { .bs-popover-top {
> .popover-arrow { > .popover-arrow {
bottom: calc((var(--#{$variable-prefix}popover-arrow-height)) * -1); // stylelint-disable-line function-disallowed-list bottom: calc((var(--#{$prefix}popover-arrow-height)) * -1); // stylelint-disable-line function-disallowed-list
&::before, &::before,
&::after { &::after {
border-width: var(--#{$variable-prefix}popover-arrow-height) calc(var(--#{$variable-prefix}popover-arrow-width) * .5) 0; // stylelint-disable-line function-disallowed-list border-width: var(--#{$prefix}popover-arrow-height) calc(var(--#{$prefix}popover-arrow-width) * .5) 0; // stylelint-disable-line function-disallowed-list
} }
&::before { &::before {
bottom: 0; bottom: 0;
border-top-color: var(--#{$variable-prefix}popover-arrow-border); border-top-color: var(--#{$prefix}popover-arrow-border);
} }
&::after { &::after {
bottom: var(--#{$variable-prefix}popover-border-width); bottom: var(--#{$prefix}popover-border-width);
border-top-color: var(--#{$variable-prefix}popover-bg); border-top-color: var(--#{$prefix}popover-bg);
} }
} }
} }
@ -82,23 +82,23 @@
/* rtl:begin:ignore */ /* rtl:begin:ignore */
.bs-popover-end { .bs-popover-end {
> .popover-arrow { > .popover-arrow {
left: calc((var(--#{$variable-prefix}popover-arrow-height)) * -1); // stylelint-disable-line function-disallowed-list left: calc((var(--#{$prefix}popover-arrow-height)) * -1); // stylelint-disable-line function-disallowed-list
width: var(--#{$variable-prefix}popover-arrow-height); width: var(--#{$prefix}popover-arrow-height);
height: var(--#{$variable-prefix}popover-arrow-width); height: var(--#{$prefix}popover-arrow-width);
&::before, &::before,
&::after { &::after {
border-width: calc(var(--#{$variable-prefix}popover-arrow-width) * .5) var(--#{$variable-prefix}popover-arrow-height) calc(var(--#{$variable-prefix}popover-arrow-width) * .5) 0; // stylelint-disable-line function-disallowed-list border-width: calc(var(--#{$prefix}popover-arrow-width) * .5) var(--#{$prefix}popover-arrow-height) calc(var(--#{$prefix}popover-arrow-width) * .5) 0; // stylelint-disable-line function-disallowed-list
} }
&::before { &::before {
left: 0; left: 0;
border-right-color: var(--#{$variable-prefix}popover-arrow-border); border-right-color: var(--#{$prefix}popover-arrow-border);
} }
&::after { &::after {
left: var(--#{$variable-prefix}popover-border-width); left: var(--#{$prefix}popover-border-width);
border-right-color: var(--#{$variable-prefix}popover-bg); border-right-color: var(--#{$prefix}popover-bg);
} }
} }
} }
@ -107,21 +107,21 @@
.bs-popover-bottom { .bs-popover-bottom {
> .popover-arrow { > .popover-arrow {
top: calc((var(--#{$variable-prefix}popover-arrow-height)) * -1); // stylelint-disable-line function-disallowed-list top: calc((var(--#{$prefix}popover-arrow-height)) * -1); // stylelint-disable-line function-disallowed-list
&::before, &::before,
&::after { &::after {
border-width: 0 calc(var(--#{$variable-prefix}popover-arrow-width) * .5) var(--#{$variable-prefix}popover-arrow-height); // stylelint-disable-line function-disallowed-list border-width: 0 calc(var(--#{$prefix}popover-arrow-width) * .5) var(--#{$prefix}popover-arrow-height); // stylelint-disable-line function-disallowed-list
} }
&::before { &::before {
top: 0; top: 0;
border-bottom-color: var(--#{$variable-prefix}popover-arrow-border); border-bottom-color: var(--#{$prefix}popover-arrow-border);
} }
&::after { &::after {
top: var(--#{$variable-prefix}popover-border-width); top: var(--#{$prefix}popover-border-width);
border-bottom-color: var(--#{$variable-prefix}popover-bg); border-bottom-color: var(--#{$prefix}popover-bg);
} }
} }
@ -131,33 +131,33 @@
top: 0; top: 0;
left: 50%; left: 50%;
display: block; display: block;
width: var(--#{$variable-prefix}popover-arrow-width); width: var(--#{$prefix}popover-arrow-width);
margin-left: calc(var(--#{$variable-prefix}popover-arrow-width) * -.5); // stylelint-disable-line function-disallowed-list margin-left: calc(var(--#{$prefix}popover-arrow-width) * -.5); // stylelint-disable-line function-disallowed-list
content: ""; content: "";
border-bottom: var(--#{$variable-prefix}popover-border-width) solid var(--#{$variable-prefix}popover-header-bg); border-bottom: var(--#{$prefix}popover-border-width) solid var(--#{$prefix}popover-header-bg);
} }
} }
/* rtl:begin:ignore */ /* rtl:begin:ignore */
.bs-popover-start { .bs-popover-start {
> .popover-arrow { > .popover-arrow {
right: calc((var(--#{$variable-prefix}popover-arrow-height)) * -1); // stylelint-disable-line function-disallowed-list right: calc((var(--#{$prefix}popover-arrow-height)) * -1); // stylelint-disable-line function-disallowed-list
width: var(--#{$variable-prefix}popover-arrow-height); width: var(--#{$prefix}popover-arrow-height);
height: var(--#{$variable-prefix}popover-arrow-width); height: var(--#{$prefix}popover-arrow-width);
&::before, &::before,
&::after { &::after {
border-width: calc(var(--#{$variable-prefix}popover-arrow-width) * .5) 0 calc(var(--#{$variable-prefix}popover-arrow-width) * .5) var(--#{$variable-prefix}popover-arrow-height); // stylelint-disable-line function-disallowed-list border-width: calc(var(--#{$prefix}popover-arrow-width) * .5) 0 calc(var(--#{$prefix}popover-arrow-width) * .5) var(--#{$prefix}popover-arrow-height); // stylelint-disable-line function-disallowed-list
} }
&::before { &::before {
right: 0; right: 0;
border-left-color: var(--#{$variable-prefix}popover-arrow-border); border-left-color: var(--#{$prefix}popover-arrow-border);
} }
&::after { &::after {
right: var(--#{$variable-prefix}popover-border-width); right: var(--#{$prefix}popover-border-width);
border-left-color: var(--#{$variable-prefix}popover-bg); border-left-color: var(--#{$prefix}popover-bg);
} }
} }
} }
@ -181,12 +181,12 @@
// Offset the popover to account for the popover arrow // Offset the popover to account for the popover arrow
.popover-header { .popover-header {
padding: var(--#{$variable-prefix}popover-header-padding-y) var(--#{$variable-prefix}popover-header-padding-x); padding: var(--#{$prefix}popover-header-padding-y) var(--#{$prefix}popover-header-padding-x);
margin-bottom: 0; // Reset the default from Reboot margin-bottom: 0; // Reset the default from Reboot
@include font-size($font-size-base); @include font-size($font-size-base);
color: var(--#{$variable-prefix}popover-header-color); color: var(--#{$prefix}popover-header-color);
background-color: var(--#{$variable-prefix}popover-header-bg); background-color: var(--#{$prefix}popover-header-bg);
border-bottom: var(--#{$variable-prefix}popover-border-width) solid var(--#{$variable-prefix}popover-border-color); border-bottom: var(--#{$prefix}popover-border-width) solid var(--#{$prefix}popover-border-color);
@include border-top-radius($popover-inner-border-radius); @include border-top-radius($popover-inner-border-radius);
&:empty { &:empty {
@ -195,6 +195,6 @@
} }
.popover-body { .popover-body {
padding: var(--#{$variable-prefix}popover-body-padding-y) var(--#{$variable-prefix}popover-body-padding-x); padding: var(--#{$prefix}popover-body-padding-y) var(--#{$prefix}popover-body-padding-x);
color: var(--#{$variable-prefix}popover-body-color); color: var(--#{$prefix}popover-body-color);
} }

26
scss/_reboot.scss
View File

@ -27,7 +27,7 @@
:root { :root {
@if $font-size-root != null { @if $font-size-root != null {
font-size: var(--#{$variable-prefix}root-font-size); font-size: var(--#{$prefix}root-font-size);
} }
@if $enable-smooth-scroll { @if $enable-smooth-scroll {
@ -48,13 +48,13 @@
// scss-docs-start reboot-body-rules // scss-docs-start reboot-body-rules
body { body {
margin: 0; // 1 margin: 0; // 1
font-family: var(--#{$variable-prefix}body-font-family); font-family: var(--#{$prefix}body-font-family);
font-size: var(--#{$variable-prefix}body-font-size); font-size: var(--#{$prefix}body-font-size);
font-weight: var(--#{$variable-prefix}body-font-weight); font-weight: var(--#{$prefix}body-font-weight);
line-height: var(--#{$variable-prefix}body-line-height); line-height: var(--#{$prefix}body-line-height);
color: var(--#{$variable-prefix}body-color); color: var(--#{$prefix}body-color);
text-align: var(--#{$variable-prefix}body-text-align); text-align: var(--#{$prefix}body-text-align);
background-color: var(--#{$variable-prefix}body-bg); // 2 background-color: var(--#{$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($black, 0); // 4
} }
@ -87,7 +87,7 @@ hr {
font-style: $headings-font-style; font-style: $headings-font-style;
font-weight: $headings-font-weight; font-weight: $headings-font-weight;
line-height: $headings-line-height; line-height: $headings-line-height;
color: $headings-color; color: var(--#{$prefix}heading-color);
} }
h1 { h1 {
@ -219,7 +219,7 @@ small {
mark { mark {
padding: $mark-padding; padding: $mark-padding;
background-color: $mark-bg; background-color: var(--#{$prefix}highlight-bg);
} }
@ -243,11 +243,11 @@ sup { top: -.5em; }
// Links // Links
a { a {
color: $link-color; color: var(--#{$prefix}link-color);
text-decoration: $link-decoration; text-decoration: $link-decoration;
&:hover { &:hover {
color: $link-hover-color; color: var(--#{$prefix}link-hover-color);
text-decoration: $link-hover-decoration; text-decoration: $link-hover-decoration;
} }
} }
@ -298,7 +298,7 @@ pre {
code { code {
@include font-size($code-font-size); @include font-size($code-font-size);
color: $code-color; color: var(--#{$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

67
scss/_root.scss
View File

@ -1,3 +1,5 @@
// stylelint-disable custom-property-empty-line-before
:root { :root {
// Note: Custom variable values only support SassScript inside `#{}`. // Note: Custom variable values only support SassScript inside `#{}`.
@ -6,57 +8,70 @@
// Generate palettes for full colors, grays, and theme colors. // Generate palettes for full colors, grays, and theme colors.
@each $color, $value in $colors { @each $color, $value in $colors {
--#{$variable-prefix}#{$color}: #{$value}; --#{$prefix}#{$color}: #{$value};
} }
@each $color, $value in $grays { @each $color, $value in $grays {
--#{$variable-prefix}gray-#{$color}: #{$value}; --#{$prefix}gray-#{$color}: #{$value};
} }
@each $color, $value in $theme-colors { @each $color, $value in $theme-colors {
--#{$variable-prefix}#{$color}: #{$value}; --#{$prefix}#{$color}: #{$value};
} }
@each $color, $value in $theme-colors-rgb { @each $color, $value in $theme-colors-rgb {
--#{$variable-prefix}#{$color}-rgb: #{$value}; --#{$prefix}#{$color}-rgb: #{$value};
} }
--#{$variable-prefix}white-rgb: #{to-rgb($white)}; --#{$prefix}white-rgb: #{to-rgb($white)};
--#{$variable-prefix}black-rgb: #{to-rgb($black)}; --#{$prefix}black-rgb: #{to-rgb($black)};
--#{$variable-prefix}body-color-rgb: #{to-rgb($body-color)}; --#{$prefix}body-color-rgb: #{to-rgb($body-color)};
--#{$variable-prefix}body-bg-rgb: #{to-rgb($body-bg)}; --#{$prefix}body-bg-rgb: #{to-rgb($body-bg)};
// Fonts // Fonts
// 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
--#{$variable-prefix}font-sans-serif: #{inspect($font-family-sans-serif)}; --#{$prefix}font-sans-serif: #{inspect($font-family-sans-serif)};
--#{$variable-prefix}font-monospace: #{inspect($font-family-monospace)}; --#{$prefix}font-monospace: #{inspect($font-family-monospace)};
--#{$variable-prefix}gradient: #{$gradient}; --#{$prefix}gradient: #{$gradient};
// Root and body // Root and body
// stylelint-disable custom-property-empty-line-before
// scss-docs-start root-body-variables // scss-docs-start root-body-variables
@if $font-size-root != null { @if $font-size-root != null {
--#{$variable-prefix}root-font-size: #{$font-size-root}; --#{$prefix}root-font-size: #{$font-size-root};
} }
--#{$variable-prefix}body-font-family: #{$font-family-base}; --#{$prefix}body-font-family: #{$font-family-base};
@include rfs($font-size-base, --#{$variable-prefix}body-font-size); @include rfs($font-size-base, --#{$prefix}body-font-size);
--#{$variable-prefix}body-font-weight: #{$font-weight-base}; --#{$prefix}body-font-weight: #{$font-weight-base};
--#{$variable-prefix}body-line-height: #{$line-height-base}; --#{$prefix}body-line-height: #{$line-height-base};
--#{$variable-prefix}body-color: #{$body-color}; --#{$prefix}body-color: #{$body-color};
@if $body-text-align != null { @if $body-text-align != null {
--#{$variable-prefix}body-text-align: #{$body-text-align}; --#{$prefix}body-text-align: #{$body-text-align};
} }
--#{$variable-prefix}body-bg: #{$body-bg}; --#{$prefix}body-bg: #{$body-bg};
// scss-docs-end root-body-variables // scss-docs-end root-body-variables
// scss-docs-start root-border-var // scss-docs-start root-border-var
--#{$variable-prefix}border-width: #{$border-width}; --#{$prefix}border-width: #{$border-width};
--#{$variable-prefix}border-style: solid; --#{$prefix}border-style: #{$border-style};
--#{$variable-prefix}border-color: #{$border-color}; --#{$prefix}border-color: #{$border-color};
--#{$variable-prefix}border-radius: #{$border-radius}; --#{$prefix}border-radius: #{$border-radius};
--#{$variable-prefix}border-opacity: 1; --#{$prefix}border-opacity: 1;
--#{$prefix}border-radius: #{$border-radius};
--#{$prefix}border-radius-sm: #{$border-radius-sm};
--#{$prefix}border-radius-lg: #{$border-radius-lg};
--#{$prefix}border-radius-xl: #{$border-radius-xl};
--#{$prefix}border-radius-2xl: #{$border-radius-2xl};
--#{$prefix}border-radius-pill: #{$border-radius-pill};
// scss-docs-end root-border-var // scss-docs-end root-border-var
// stylelint-enable custom-property-empty-line-before
--#{$prefix}heading-color: #{$headings-color};
--#{$prefix}link-color: #{$link-color};
--#{$prefix}link-hover-color: #{$link-hover-color};
--#{$prefix}code-color: #{$code-color};
--#{$prefix}highlight-bg: #{$mark-bg};
} }

44
scss/_tables.scss
View File

@ -3,22 +3,22 @@
// //
.table { .table {
--#{$variable-prefix}table-color: #{$table-color}; --#{$prefix}table-color: #{$table-color};
--#{$variable-prefix}table-bg: #{$table-bg}; --#{$prefix}table-bg: #{$table-bg};
--#{$variable-prefix}table-border-color: #{$table-border-color}; --#{$prefix}table-border-color: #{$table-border-color};
--#{$variable-prefix}table-accent-bg: #{$table-accent-bg}; --#{$prefix}table-accent-bg: #{$table-accent-bg};
--#{$variable-prefix}table-striped-color: #{$table-striped-color}; --#{$prefix}table-striped-color: #{$table-striped-color};
--#{$variable-prefix}table-striped-bg: #{$table-striped-bg}; --#{$prefix}table-striped-bg: #{$table-striped-bg};
--#{$variable-prefix}table-active-color: #{$table-active-color}; --#{$prefix}table-active-color: #{$table-active-color};
--#{$variable-prefix}table-active-bg: #{$table-active-bg}; --#{$prefix}table-active-bg: #{$table-active-bg};
--#{$variable-prefix}table-hover-color: #{$table-hover-color}; --#{$prefix}table-hover-color: #{$table-hover-color};
--#{$variable-prefix}table-hover-bg: #{$table-hover-bg}; --#{$prefix}table-hover-bg: #{$table-hover-bg};
width: 100%; width: 100%;
margin-bottom: $spacer; margin-bottom: $spacer;
color: var(--#{$variable-prefix}table-color); color: var(--#{$prefix}table-color);
vertical-align: $table-cell-vertical-align; vertical-align: $table-cell-vertical-align;
border-color: var(--#{$variable-prefix}table-border-color); border-color: var(--#{$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.
@ -27,9 +27,9 @@
// 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: $table-cell-padding-y $table-cell-padding-x;
background-color: var(--#{$variable-prefix}table-bg); background-color: var(--#{$prefix}table-bg);
border-bottom-width: $table-border-width; border-bottom-width: $table-border-width;
box-shadow: inset 0 0 0 9999px var(--#{$variable-prefix}table-accent-bg); box-shadow: inset 0 0 0 9999px var(--#{$prefix}table-accent-bg);
} }
> tbody { > tbody {
@ -104,16 +104,16 @@
// For rows // For rows
.table-striped { .table-striped {
> tbody > tr:nth-of-type(#{$table-striped-order}) > * { > tbody > tr:nth-of-type(#{$table-striped-order}) > * {
--#{$variable-prefix}table-accent-bg: var(--#{$variable-prefix}table-striped-bg); --#{$prefix}table-accent-bg: var(--#{$prefix}table-striped-bg);
color: var(--#{$variable-prefix}table-striped-color); color: var(--#{$prefix}table-striped-color);
} }
} }
// For columns // For columns
.table-striped-columns { .table-striped-columns {
> :not(caption) > tr > :nth-child(#{$table-striped-columns-order}) { > :not(caption) > tr > :nth-child(#{$table-striped-columns-order}) {
--#{$variable-prefix}table-accent-bg: var(--#{$variable-prefix}table-striped-bg); --#{$prefix}table-accent-bg: var(--#{$prefix}table-striped-bg);
color: var(--#{$variable-prefix}table-striped-color); color: var(--#{$prefix}table-striped-color);
} }
} }
@ -122,8 +122,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 {
--#{$variable-prefix}table-accent-bg: var(--#{$variable-prefix}table-active-bg); --#{$prefix}table-accent-bg: var(--#{$prefix}table-active-bg);
color: var(--#{$variable-prefix}table-active-color); color: var(--#{$prefix}table-active-color);
} }
// Hover effect // Hover effect
@ -132,8 +132,8 @@
.table-hover { .table-hover {
> tbody > tr:hover > * { > tbody > tr:hover > * {
--#{$variable-prefix}table-accent-bg: var(--#{$variable-prefix}table-hover-bg); --#{$prefix}table-accent-bg: var(--#{$prefix}table-hover-bg);
color: var(--#{$variable-prefix}table-hover-color); color: var(--#{$prefix}table-hover-color);
} }
} }

78
scss/_tooltip.scss
View File

@ -3,39 +3,39 @@
// Base class // Base class
.tooltip { .tooltip {
// scss-docs-start tooltip-css-vars // scss-docs-start tooltip-css-vars
--#{$variable-prefix}tooltip-zindex: #{$zindex-tooltip}; --#{$prefix}tooltip-zindex: #{$zindex-tooltip};
--#{$variable-prefix}tooltip-max-width: #{$tooltip-max-width}; --#{$prefix}tooltip-max-width: #{$tooltip-max-width};
--#{$variable-prefix}tooltip-padding-x: #{$tooltip-padding-x}; --#{$prefix}tooltip-padding-x: #{$tooltip-padding-x};
--#{$variable-prefix}tooltip-padding-y: #{$tooltip-padding-y}; --#{$prefix}tooltip-padding-y: #{$tooltip-padding-y};
--#{$variable-prefix}tooltip-margin: #{$tooltip-margin}; --#{$prefix}tooltip-margin: #{$tooltip-margin};
@include rfs($tooltip-font-size, --#{$variable-prefix}tooltip-font-size); @include rfs($tooltip-font-size, --#{$prefix}tooltip-font-size);
--#{$variable-prefix}tooltip-color: #{$tooltip-color}; --#{$prefix}tooltip-color: #{$tooltip-color};
--#{$variable-prefix}tooltip-bg: #{$tooltip-bg}; --#{$prefix}tooltip-bg: #{$tooltip-bg};
--#{$variable-prefix}tooltip-border-radius: #{$tooltip-border-radius}; --#{$prefix}tooltip-border-radius: #{$tooltip-border-radius};
--#{$variable-prefix}tooltip-opacity: #{$tooltip-opacity}; --#{$prefix}tooltip-opacity: #{$tooltip-opacity};
--#{$variable-prefix}tooltip-arrow-width: #{$tooltip-arrow-width}; --#{$prefix}tooltip-arrow-width: #{$tooltip-arrow-width};
--#{$variable-prefix}tooltip-arrow-height: #{$tooltip-arrow-height}; --#{$prefix}tooltip-arrow-height: #{$tooltip-arrow-height};
// scss-docs-end tooltip-css-vars // scss-docs-end tooltip-css-vars
position: absolute; position: absolute;
z-index: var(--#{$variable-prefix}tooltip-zindex); z-index: var(--#{$prefix}tooltip-zindex);
display: block; display: block;
margin: var(--#{$variable-prefix}tooltip-margin); margin: var(--#{$prefix}tooltip-margin);
// 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();
@include font-size(var(--#{$variable-prefix}tooltip-font-size)); @include font-size(var(--#{$prefix}tooltip-font-size));
// Allow breaking very long words so they don't overflow the tooltip's bounds // 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(--#{$variable-prefix}tooltip-opacity); } &.show { opacity: var(--#{$prefix}tooltip-opacity); }
.tooltip-arrow { .tooltip-arrow {
position: absolute; position: absolute;
display: block; display: block;
width: var(--#{$variable-prefix}tooltip-arrow-width); width: var(--#{$prefix}tooltip-arrow-width);
height: var(--#{$variable-prefix}tooltip-arrow-height); height: var(--#{$prefix}tooltip-arrow-height);
&::before { &::before {
position: absolute; position: absolute;
@ -47,32 +47,32 @@
} }
.bs-tooltip-top { .bs-tooltip-top {
padding: var(--#{$variable-prefix}tooltip-arrow-height) 0; padding: var(--#{$prefix}tooltip-arrow-height) 0;
.tooltip-arrow { .tooltip-arrow {
bottom: 0; bottom: 0;
&::before { &::before {
top: -1px; top: -1px;
border-width: var(--#{$variable-prefix}tooltip-arrow-height) calc(var(--#{$variable-prefix}tooltip-arrow-width) * .5) 0; // stylelint-disable-line function-disallowed-list border-width: var(--#{$prefix}tooltip-arrow-height) calc(var(--#{$prefix}tooltip-arrow-width) * .5) 0; // stylelint-disable-line function-disallowed-list
border-top-color: var(--#{$variable-prefix}tooltip-bg); border-top-color: var(--#{$prefix}tooltip-bg);
} }
} }
} }
/* rtl:begin:ignore */ /* rtl:begin:ignore */
.bs-tooltip-end { .bs-tooltip-end {
padding: 0 var(--#{$variable-prefix}tooltip-arrow-height); padding: 0 var(--#{$prefix}tooltip-arrow-height);
.tooltip-arrow { .tooltip-arrow {
left: 0; left: 0;
width: var(--#{$variable-prefix}tooltip-arrow-height); width: var(--#{$prefix}tooltip-arrow-height);
height: var(--#{$variable-prefix}tooltip-arrow-width); height: var(--#{$prefix}tooltip-arrow-width);
&::before { &::before {
right: -1px; right: -1px;
border-width: calc(var(--#{$variable-prefix}tooltip-arrow-width) * .5) var(--#{$variable-prefix}tooltip-arrow-height) calc(var(--#{$variable-prefix}tooltip-arrow-width) * .5) 0; // stylelint-disable-line function-disallowed-list border-width: calc(var(--#{$prefix}tooltip-arrow-width) * .5) var(--#{$prefix}tooltip-arrow-height) calc(var(--#{$prefix}tooltip-arrow-width) * .5) 0; // stylelint-disable-line function-disallowed-list
border-right-color: var(--#{$variable-prefix}tooltip-bg); border-right-color: var(--#{$prefix}tooltip-bg);
} }
} }
} }
@ -80,32 +80,32 @@
/* rtl:end:ignore */ /* rtl:end:ignore */
.bs-tooltip-bottom { .bs-tooltip-bottom {
padding: var(--#{$variable-prefix}tooltip-arrow-height) 0; padding: var(--#{$prefix}tooltip-arrow-height) 0;
.tooltip-arrow { .tooltip-arrow {
top: 0; top: 0;
&::before { &::before {
bottom: -1px; bottom: -1px;
border-width: 0 calc(var(--#{$variable-prefix}tooltip-arrow-width) * .5) var(--#{$variable-prefix}tooltip-arrow-height); // stylelint-disable-line function-disallowed-list border-width: 0 calc(var(--#{$prefix}tooltip-arrow-width) * .5) var(--#{$prefix}tooltip-arrow-height); // stylelint-disable-line function-disallowed-list
border-bottom-color: var(--#{$variable-prefix}tooltip-bg); border-bottom-color: var(--#{$prefix}tooltip-bg);
} }
} }
} }
/* rtl:begin:ignore */ /* rtl:begin:ignore */
.bs-tooltip-start { .bs-tooltip-start {
padding: 0 var(--#{$variable-prefix}tooltip-arrow-height); padding: 0 var(--#{$prefix}tooltip-arrow-height);
.tooltip-arrow { .tooltip-arrow {
right: 0; right: 0;
width: var(--#{$variable-prefix}tooltip-arrow-height); width: var(--#{$prefix}tooltip-arrow-height);
height: var(--#{$variable-prefix}tooltip-arrow-width); height: var(--#{$prefix}tooltip-arrow-width);
&::before { &::before {
left: -1px; left: -1px;
border-width: calc(var(--#{$variable-prefix}tooltip-arrow-width) * .5) 0 calc(var(--#{$variable-prefix}tooltip-arrow-width) * .5) var(--#{$variable-prefix}tooltip-arrow-height); // stylelint-disable-line function-disallowed-list border-width: calc(var(--#{$prefix}tooltip-arrow-width) * .5) 0 calc(var(--#{$prefix}tooltip-arrow-width) * .5) var(--#{$prefix}tooltip-arrow-height); // stylelint-disable-line function-disallowed-list
border-left-color: var(--#{$variable-prefix}tooltip-bg); border-left-color: var(--#{$prefix}tooltip-bg);
} }
} }
} }
@ -129,10 +129,10 @@
// Wrapper for the tooltip content // Wrapper for the tooltip content
.tooltip-inner { .tooltip-inner {
max-width: var(--#{$variable-prefix}tooltip-max-width); max-width: var(--#{$prefix}tooltip-max-width);
padding: var(--#{$variable-prefix}tooltip-padding-y) var(--#{$variable-prefix}tooltip-padding-x); padding: var(--#{$prefix}tooltip-padding-y) var(--#{$prefix}tooltip-padding-x);
color: var(--#{$variable-prefix}tooltip-color); color: var(--#{$prefix}tooltip-color);
text-align: center; text-align: center;
background-color: var(--#{$variable-prefix}tooltip-bg); background-color: var(--#{$prefix}tooltip-bg);
border-radius: var(--#{$variable-prefix}tooltip-border-radius, 0); // stylelint-disable-line property-disallowed-list border-radius: var(--#{$prefix}tooltip-border-radius, 0); // stylelint-disable-line property-disallowed-list
} }

36
scss/_utilities.scss
View File

@ -102,7 +102,7 @@ $utilities: map-merge(
"border-opacity": 1 "border-opacity": 1
), ),
values: ( values: (
null: var(--#{$variable-prefix}border-width) var(--#{$variable-prefix}border-style) var(--#{$variable-prefix}border-color), null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
0: 0, 0: 0,
) )
), ),
@ -120,7 +120,7 @@ $utilities: map-merge(
"border-top": ( "border-top": (
property: border-top, property: border-top,
values: ( values: (
null: var(--#{$variable-prefix}border-width) var(--#{$variable-prefix}border-style) var(--#{$variable-prefix}border-color), null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
0: 0, 0: 0,
) )
), ),
@ -128,14 +128,14 @@ $utilities: map-merge(
property: border-right, property: border-right,
class: border-end, class: border-end,
values: ( values: (
null: var(--#{$variable-prefix}border-width) var(--#{$variable-prefix}border-style) var(--#{$variable-prefix}border-color), null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
0: 0, 0: 0,
) )
), ),
"border-bottom": ( "border-bottom": (
property: border-bottom, property: border-bottom,
values: ( values: (
null: var(--#{$variable-prefix}border-width) var(--#{$variable-prefix}border-style) var(--#{$variable-prefix}border-color), null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
0: 0, 0: 0,
) )
), ),
@ -143,7 +143,7 @@ $utilities: map-merge(
property: border-left, property: border-left,
class: border-start, class: border-start,
values: ( values: (
null: var(--#{$variable-prefix}border-width) var(--#{$variable-prefix}border-style) var(--#{$variable-prefix}border-color), null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
0: 0, 0: 0,
) )
), ),
@ -457,7 +457,7 @@ $utilities: map-merge(
"font-family": ( "font-family": (
property: font-family, property: font-family,
class: font, class: font,
values: (monospace: var(--#{$variable-prefix}font-monospace)) values: (monospace: var(--#{$prefix}font-monospace))
), ),
"font-size": ( "font-size": (
rfs: true, rfs: true,
@ -583,7 +583,7 @@ $utilities: map-merge(
"gradient": ( "gradient": (
property: background-image, property: background-image,
class: bg, class: bg,
values: (gradient: var(--#{$variable-prefix}gradient)) values: (gradient: var(--#{$prefix}gradient))
), ),
// scss-docs-start utils-interaction // scss-docs-start utils-interaction
"user-select": ( "user-select": (
@ -601,36 +601,36 @@ $utilities: map-merge(
property: border-radius, property: border-radius,
class: rounded, class: rounded,
values: ( values: (
null: $border-radius, null: var(--#{$prefix}border-radius),
0: 0, 0: 0,
1: $border-radius-sm, 1: var(--#{$prefix}border-radius-sm),
2: $border-radius, 2: var(--#{$prefix}border-radius),
3: $border-radius-lg, 3: var(--#{$prefix}border-radius-lg),
4: $border-radius-xl, 4: var(--#{$prefix}border-radius-xl),
5: $border-radius-2xl, 5: var(--#{$prefix}border-radius-2xl),
circle: 50%, circle: 50%,
pill: $border-radius-pill pill: var(--#{$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: (null: $border-radius) values: (null: var(--#{$prefix}border-radius))
), ),
"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: (null: $border-radius) values: (null: var(--#{$prefix}border-radius))
), ),
"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: (null: $border-radius) values: (null: var(--#{$prefix}border-radius))
), ),
"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: (null: $border-radius) values: (null: var(--#{$prefix}border-radius))
), ),
// scss-docs-end utils-border-radius // scss-docs-end utils-border-radius
// scss-docs-start utils-visibility // scss-docs-start utils-visibility

98
scss/_variables.scss
View File

@ -352,7 +352,8 @@ $enable-important-utilities: true !default;
// Prefix for :root CSS variables // Prefix for :root CSS variables
$variable-prefix: bs- !default; $variable-prefix: bs- !default; // Deprecated in v5.2.0 for the shorter `$prefix`
$prefix: $variable-prefix !default;
// Gradient // Gradient
// //
@ -484,6 +485,7 @@ $border-widths: (
5: 5px 5: 5px
) !default; ) !default;
$border-style: solid !default;
$border-color: rgba($black, .15) !default; $border-color: rgba($black, .15) !default;
// scss-docs-end border-variables // scss-docs-end border-variables
@ -539,8 +541,8 @@ $aspect-ratios: (
$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-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
$font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default; $font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
// stylelint-enable value-keyword-case // stylelint-enable value-keyword-case
$font-family-base: var(--#{$variable-prefix}font-sans-serif) !default; $font-family-base: var(--#{$prefix}font-sans-serif) !default;
$font-family-code: var(--#{$variable-prefix}font-monospace) !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-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-base affects the font size of the body text
@ -612,7 +614,7 @@ $small-font-size: .875em !default;
$sub-sup-font-size: .75em !default; $sub-sup-font-size: .75em !default;
$text-muted: rgba(var(--#{$variable-prefix}body-color-rgb), .75) !default; $text-muted: rgba(var(--#{$prefix}body-color-rgb), .75) !default;
$initialism-font-size: $small-font-size !default; $initialism-font-size: $small-font-size !default;
@ -630,22 +632,19 @@ $hr-height: null !default; // Deprecated in v5.2.0
// fusv-enable // fusv-enable
$hr-border-color: null !default; // Allows for inherited colors $hr-border-color: null !default; // Allows for inherited colors
$hr-border-width: var(--#{$variable-prefix}border-width) !default; $hr-border-width: var(--#{$prefix}border-width) !default;
$hr-opacity: .25 !default; $hr-opacity: .25 !default;
$legend-margin-bottom: .5rem !default; $legend-margin-bottom: .5rem !default;
$legend-font-size: 1.5rem !default; $legend-font-size: 1.5rem !default;
$legend-font-weight: null !default; $legend-font-weight: null !default;
$mark-padding: .2em !default;
$dt-font-weight: $font-weight-bold !default; $dt-font-weight: $font-weight-bold !default;
$nested-kbd-font-weight: $font-weight-bold !default;
$list-inline-padding: .5rem !default; $list-inline-padding: .5rem !default;
$mark-bg: #fcf8e3 !default; $mark-padding: .1875em !default;
$mark-bg: $yellow-100 !default;
// scss-docs-end type-variables // scss-docs-end type-variables
@ -661,7 +660,7 @@ $table-cell-padding-x-sm: .25rem !default;
$table-cell-vertical-align: top !default; $table-cell-vertical-align: top !default;
$table-color: $body-color !default; $table-color: var(--#{$prefix}body-color) !default;
$table-bg: transparent !default; $table-bg: transparent !default;
$table-accent-bg: transparent !default; $table-accent-bg: transparent !default;
@ -680,8 +679,8 @@ $table-hover-bg-factor: .075 !default;
$table-hover-bg: rgba($black, $table-hover-bg-factor) !default; $table-hover-bg: rgba($black, $table-hover-bg-factor) !default;
$table-border-factor: .1 !default; $table-border-factor: .1 !default;
$table-border-width: $border-width !default; $table-border-width: var(--#{$prefix}border-width) !default;
$table-border-color: $border-color !default; $table-border-color: var(--#{$prefix}border-color) !default;
$table-striped-order: odd !default; $table-striped-order: odd !default;
$table-striped-columns-order: even !default; $table-striped-columns-order: even !default;
@ -1062,14 +1061,14 @@ $nav-link-transition: color .15s ease-in-out, background-color .15
$nav-link-disabled-color: $gray-600 !default; $nav-link-disabled-color: $gray-600 !default;
$nav-tabs-border-color: $gray-300 !default; $nav-tabs-border-color: $gray-300 !default;
$nav-tabs-border-radius: $border-radius !default; $nav-tabs-border-width: var(--#{$prefix}border-width) !default;
$nav-tabs-border-width: var(--#{$variable-prefix}border-width) !default; $nav-tabs-border-radius: var(--#{$prefix}border-radius) !default;
$nav-tabs-link-hover-border-color: $gray-200 $gray-200 $nav-tabs-border-color !default; $nav-tabs-link-hover-border-color: $gray-200 $gray-200 $nav-tabs-border-color !default;
$nav-tabs-link-active-color: $gray-700 !default; $nav-tabs-link-active-color: $gray-700 !default;
$nav-tabs-link-active-bg: $body-bg !default; $nav-tabs-link-active-bg: $body-bg !default;
$nav-tabs-link-active-border-color: $gray-300 $gray-300 $nav-tabs-link-active-bg !default; $nav-tabs-link-active-border-color: $gray-300 $gray-300 $nav-tabs-link-active-bg !default;
$nav-pills-border-radius: $border-radius !default; $nav-pills-border-radius: var(--#{$prefix}border-radius) !default;
$nav-pills-link-active-color: $component-active-color !default; $nav-pills-link-active-color: $component-active-color !default;
$nav-pills-link-active-bg: $component-active-bg !default; $nav-pills-link-active-bg: $component-active-bg !default;
// scss-docs-end nav-variables // scss-docs-end nav-variables
@ -1133,8 +1132,8 @@ $dropdown-font-size: $font-size-base !default;
$dropdown-color: $body-color !default; $dropdown-color: $body-color !default;
$dropdown-bg: $white !default; $dropdown-bg: $white !default;
$dropdown-border-color: rgba($black, .15) !default; $dropdown-border-color: rgba($black, .15) !default;
$dropdown-border-radius: $border-radius !default; $dropdown-border-radius: var(--#{$prefix}border-radius) !default;
$dropdown-border-width: var(--#{$variable-prefix}border-width) !default; $dropdown-border-width: var(--#{$prefix}border-width) !default;
$dropdown-inner-border-radius: subtract($dropdown-border-radius, $dropdown-border-width) !default; $dropdown-inner-border-radius: subtract($dropdown-border-radius, $dropdown-border-width) !default;
$dropdown-divider-bg: $dropdown-border-color !default; $dropdown-divider-bg: $dropdown-border-color !default;
$dropdown-divider-margin-y: $spacer * .5 !default; $dropdown-divider-margin-y: $spacer * .5 !default;
@ -1189,7 +1188,7 @@ $pagination-padding-x-lg: 1.5rem !default;
$pagination-color: $link-color !default; $pagination-color: $link-color !default;
$pagination-bg: $white !default; $pagination-bg: $white !default;
$pagination-border-radius: $border-radius !default; $pagination-border-radius: $border-radius !default;
$pagination-border-width: var(--#{$variable-prefix}border-width) !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-margin-start: calc($pagination-border-width * -1) !default; // stylelint-disable-line function-disallowed-list
$pagination-border-color: $gray-300 !default; $pagination-border-color: $gray-300 !default;
@ -1212,8 +1211,8 @@ $pagination-disabled-border-color: $gray-300 !default;
$pagination-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default; $pagination-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: $border-radius-sm !default; $pagination-border-radius-sm: var(--#{$prefix}border-radius-sm) !default;
$pagination-border-radius-lg: $border-radius-lg !default; $pagination-border-radius-lg: var(--#{$prefix}border-radius-lg) !default;
// scss-docs-end pagination-variables // scss-docs-end pagination-variables
@ -1230,9 +1229,9 @@ $placeholder-opacity-min: .2 !default;
$card-spacer-y: $spacer !default; $card-spacer-y: $spacer !default;
$card-spacer-x: $spacer !default; $card-spacer-x: $spacer !default;
$card-title-spacer-y: $spacer * .5 !default; $card-title-spacer-y: $spacer * .5 !default;
$card-border-radius: $border-radius !default; $card-border-width: var(--#{$prefix}border-width) !default;
$card-border-width: var(--#{$variable-prefix}border-width) !default; $card-border-color: var(--#{$prefix}border-color) !default;
$card-border-color: var(--#{$variable-prefix}border-color) !default; $card-border-radius: var(--#{$prefix}border-radius) !default;
$card-box-shadow: null !default; $card-box-shadow: null !default;
$card-inner-border-radius: subtract($card-border-radius, $card-border-width) !default; $card-inner-border-radius: subtract($card-border-radius, $card-border-width) !default;
$card-cap-padding-y: $card-spacer-y * .5 !default; $card-cap-padding-y: $card-spacer-y * .5 !default;
@ -1253,9 +1252,9 @@ $accordion-padding-y: 1rem !default;
$accordion-padding-x: 1.25rem !default; $accordion-padding-x: 1.25rem !default;
$accordion-color: $body-color !default; $accordion-color: $body-color !default;
$accordion-bg: $body-bg !default; $accordion-bg: $body-bg !default;
$accordion-border-radius: $border-radius !default; $accordion-border-width: var(--#{$prefix}border-width) !default;
$accordion-border-width: var(--#{$variable-prefix}border-width) !default; $accordion-border-color: var(--#{$prefix}border-color) !default;
$accordion-border-color: var(--#{$variable-prefix}border-color) !default; $accordion-border-radius: var(--#{$prefix}border-radius) !default;
$accordion-inner-border-radius: subtract($accordion-border-radius, $accordion-border-width) !default; $accordion-inner-border-radius: subtract($accordion-border-radius, $accordion-border-width) !default;
$accordion-body-padding-y: $accordion-padding-y !default; $accordion-body-padding-y: $accordion-padding-y !default;
@ -1289,7 +1288,7 @@ $tooltip-font-size: $font-size-sm !default;
$tooltip-max-width: 200px !default; $tooltip-max-width: 200px !default;
$tooltip-color: $white !default; $tooltip-color: $white !default;
$tooltip-bg: $black !default; $tooltip-bg: $black !default;
$tooltip-border-radius: $border-radius !default; $tooltip-border-radius: var(--#{$prefix}border-radius) !default;
$tooltip-opacity: .9 !default; $tooltip-opacity: .9 !default;
$tooltip-padding-y: $spacer * .25 !default; $tooltip-padding-y: $spacer * .25 !default;
$tooltip-padding-x: $spacer * .5 !default; $tooltip-padding-x: $spacer * .5 !default;
@ -1319,9 +1318,9 @@ $form-feedback-tooltip-border-radius: $tooltip-border-radius !default;
$popover-font-size: $font-size-sm !default; $popover-font-size: $font-size-sm !default;
$popover-bg: $white !default; $popover-bg: $white !default;
$popover-max-width: 276px !default; $popover-max-width: 276px !default;
$popover-border-width: var(--#{$variable-prefix}border-width) !default; $popover-border-width: var(--#{$prefix}border-width) !default;
$popover-border-color: rgba($black, .2) !default; $popover-border-color: rgba($black, .2) !default;
$popover-border-radius: $border-radius-lg !default; $popover-border-radius: var(--#{$prefix}border-radius-lg) !default;
$popover-inner-border-radius: subtract($popover-border-radius, $popover-border-width) !default; $popover-inner-border-radius: subtract($popover-border-radius, $popover-border-width) !default;
$popover-box-shadow: $box-shadow !default; $popover-box-shadow: $box-shadow !default;
@ -1354,9 +1353,9 @@ $toast-padding-y: .5rem !default;
$toast-font-size: .875rem !default; $toast-font-size: .875rem !default;
$toast-color: null !default; $toast-color: null !default;
$toast-background-color: rgba($white, .85) !default; $toast-background-color: rgba($white, .85) !default;
$toast-border-radius: $border-radius !default; $toast-border-width: var(--#{$prefix}border-width) !default;
$toast-border-width: var(--#{$variable-prefix}border-width) !default; $toast-border-color: var(--#{$prefix}border-color) !default;
$toast-border-color: var(--#{$variable-prefix}border-color) !default; $toast-border-radius: var(--#{$prefix}border-radius) !default;
$toast-box-shadow: $box-shadow !default; $toast-box-shadow: $box-shadow !default;
$toast-spacing: $container-padding-x !default; $toast-spacing: $container-padding-x !default;
@ -1374,7 +1373,7 @@ $badge-font-weight: $font-weight-bold !default;
$badge-color: $white !default; $badge-color: $white !default;
$badge-padding-y: .35em !default; $badge-padding-y: .35em !default;
$badge-padding-x: .65em !default; $badge-padding-x: .65em !default;
$badge-border-radius: $border-radius !default; $badge-border-radius: var(--#{$prefix}border-radius) !default;
// scss-docs-end badge-variables // scss-docs-end badge-variables
@ -1392,16 +1391,16 @@ $modal-title-line-height: $line-height-base !default;
$modal-content-color: null !default; $modal-content-color: null !default;
$modal-content-bg: $white !default; $modal-content-bg: $white !default;
$modal-content-border-radius: $border-radius-lg !default; $modal-content-border-color: var(--#{$prefix}border-color) !default;
$modal-content-border-color: var(--#{$variable-prefix}border-color) !default; $modal-content-border-width: var(--#{$prefix}border-width) !default;
$modal-content-border-width: var(--#{$variable-prefix}border-width) !default; $modal-content-border-radius: var(--#{$prefix}border-radius-lg) !default;
$modal-content-inner-border-radius: subtract($modal-content-border-radius, $modal-content-border-width) !default; $modal-content-inner-border-radius: subtract($modal-content-border-radius, $modal-content-border-width) !default;
$modal-content-box-shadow-xs: $box-shadow-sm !default; $modal-content-box-shadow-xs: $box-shadow-sm !default;
$modal-content-box-shadow-sm-up: $box-shadow !default; $modal-content-box-shadow-sm-up: $box-shadow !default;
$modal-backdrop-bg: $black !default; $modal-backdrop-bg: $black !default;
$modal-backdrop-opacity: .5 !default; $modal-backdrop-opacity: .5 !default;
$modal-header-border-color: var(--#{$variable-prefix}border-color) !default; $modal-header-border-color: var(--#{$prefix}border-color) !default;
$modal-footer-border-color: $modal-header-border-color !default; $modal-footer-border-color: $modal-header-border-color !default;
$modal-header-border-width: $modal-content-border-width !default; $modal-header-border-width: $modal-content-border-width !default;
$modal-footer-border-width: $modal-header-border-width !default; $modal-footer-border-width: $modal-header-border-width !default;
@ -1430,7 +1429,7 @@ $modal-scale-transform: scale(1.02) !default;
$alert-padding-y: $spacer !default; $alert-padding-y: $spacer !default;
$alert-padding-x: $spacer !default; $alert-padding-x: $spacer !default;
$alert-margin-bottom: 1rem !default; $alert-margin-bottom: 1rem !default;
$alert-border-radius: $border-radius !default; $alert-border-radius: var(--#{$prefix}border-radius) !default;
$alert-link-font-weight: $font-weight-bold !default; $alert-link-font-weight: $font-weight-bold !default;
$alert-border-width: $border-width !default; $alert-border-width: $border-width !default;
$alert-bg-scale: -80% !default; $alert-bg-scale: -80% !default;
@ -1446,7 +1445,7 @@ $alert-dismissible-padding-r: $alert-padding-x * 3 !default; // 3x covers widt
$progress-height: 1rem !default; $progress-height: 1rem !default;
$progress-font-size: $font-size-base * .75 !default; $progress-font-size: $font-size-base * .75 !default;
$progress-bg: $gray-200 !default; $progress-bg: $gray-200 !default;
$progress-border-radius: $border-radius !default; $progress-border-radius: var(--#{$prefix}border-radius) !default;
$progress-box-shadow: $box-shadow-inset !default; $progress-box-shadow: $box-shadow-inset !default;
$progress-bar-color: $white !default; $progress-bar-color: $white !default;
$progress-bar-bg: $primary !default; $progress-bar-bg: $primary !default;
@ -1461,8 +1460,8 @@ $progress-bar-transition: width .6s ease !default;
$list-group-color: $gray-900 !default; $list-group-color: $gray-900 !default;
$list-group-bg: $white !default; $list-group-bg: $white !default;
$list-group-border-color: rgba($black, .125) !default; $list-group-border-color: rgba($black, .125) !default;
$list-group-border-radius: $border-radius !default; $list-group-border-width: var(--#{$prefix}border-width) !default;
$list-group-border-width: var(--#{$variable-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-y: $spacer * .5 !default;
$list-group-item-padding-x: $spacer !default; $list-group-item-padding-x: $spacer !default;
@ -1490,9 +1489,9 @@ $list-group-action-active-bg: $gray-200 !default;
// scss-docs-start thumbnail-variables // scss-docs-start thumbnail-variables
$thumbnail-padding: .25rem !default; $thumbnail-padding: .25rem !default;
$thumbnail-bg: $body-bg !default; $thumbnail-bg: $body-bg !default;
$thumbnail-border-radius: $border-radius !default; $thumbnail-border-width: var(--#{$prefix}border-width) !default;
$thumbnail-border-width: var(--#{$variable-prefix}border-width) !default; $thumbnail-border-color: var(--#{$prefix}border-color) !default;
$thumbnail-border-color: var(--#{$variable-prefix}border-color) !default; $thumbnail-border-radius: var(--#{$prefix}border-radius) !default;
$thumbnail-box-shadow: $box-shadow-sm !default; $thumbnail-box-shadow: $box-shadow-sm !default;
// scss-docs-end thumbnail-variables // scss-docs-end thumbnail-variables
@ -1614,10 +1613,11 @@ $offcanvas-backdrop-opacity: $modal-backdrop-opacity !default;
$code-font-size: $small-font-size !default; $code-font-size: $small-font-size !default;
$code-color: $pink !default; $code-color: $pink !default;
$kbd-padding-y: .2rem !default; $kbd-padding-y: .1875rem !default;
$kbd-padding-x: .4rem !default; $kbd-padding-x: .375rem !default;
$kbd-font-size: $code-font-size !default; $kbd-font-size: $code-font-size !default;
$kbd-color: $white !default; $kbd-color: var(--#{$prefix}body-bg) !default;
$kbd-bg: $gray-900 !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; $pre-color: null !default;

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

@ -65,7 +65,7 @@
&[type="checkbox"] { &[type="checkbox"] {
@if $enable-gradients { @if $enable-gradients {
background-image: escape-svg($form-check-input-checked-bg-image), var(--#{$variable-prefix}gradient); background-image: escape-svg($form-check-input-checked-bg-image), var(--#{$prefix}gradient);
} @else { } @else {
background-image: escape-svg($form-check-input-checked-bg-image); background-image: escape-svg($form-check-input-checked-bg-image);
} }
@ -73,7 +73,7 @@
&[type="radio"] { &[type="radio"] {
@if $enable-gradients { @if $enable-gradients {
background-image: escape-svg($form-check-radio-checked-bg-image), var(--#{$variable-prefix}gradient); background-image: escape-svg($form-check-radio-checked-bg-image), var(--#{$prefix}gradient);
} @else { } @else {
background-image: escape-svg($form-check-radio-checked-bg-image); background-image: escape-svg($form-check-radio-checked-bg-image);
} }
@ -85,7 +85,7 @@
border-color: $form-check-input-indeterminate-border-color; border-color: $form-check-input-indeterminate-border-color;
@if $enable-gradients { @if $enable-gradients {
background-image: escape-svg($form-check-input-indeterminate-bg-image), var(--#{$variable-prefix}gradient); background-image: escape-svg($form-check-input-indeterminate-bg-image), var(--#{$prefix}gradient);
} @else { } @else {
background-image: escape-svg($form-check-input-indeterminate-bg-image); background-image: escape-svg($form-check-input-indeterminate-bg-image);
} }
@ -136,7 +136,7 @@
background-position: $form-switch-checked-bg-position; background-position: $form-switch-checked-bg-position;
@if $enable-gradients { @if $enable-gradients {
background-image: escape-svg($form-switch-checked-bg-image), var(--#{$variable-prefix}gradient); background-image: escape-svg($form-switch-checked-bg-image), var(--#{$prefix}gradient);
} @else { } @else {
background-image: escape-svg($form-switch-checked-bg-image); background-image: escape-svg($form-switch-checked-bg-image);
} }

4
scss/helpers/_ratio.scss
View File

@ -6,7 +6,7 @@
&::before { &::before {
display: block; display: block;
padding-top: var(--#{$variable-prefix}aspect-ratio); padding-top: var(--#{$prefix}aspect-ratio);
content: ""; content: "";
} }
@ -21,6 +21,6 @@
@each $key, $ratio in $aspect-ratios { @each $key, $ratio in $aspect-ratios {
.ratio-#{$key} { .ratio-#{$key} {
--#{$variable-prefix}aspect-ratio: #{$ratio}; --#{$prefix}aspect-ratio: #{$ratio};
} }
} }

8
scss/mixins/_alert.scss
View File

@ -1,11 +1,11 @@
// scss-docs-start alert-variant-mixin // scss-docs-start alert-variant-mixin
@mixin alert-variant($background, $border, $color) { @mixin alert-variant($background, $border, $color) {
--#{$variable-prefix}alert-color: #{$color}; --#{$prefix}alert-color: #{$color};
--#{$variable-prefix}alert-bg: #{$background}; --#{$prefix}alert-bg: #{$background};
--#{$variable-prefix}alert-border-color: #{$border}; --#{$prefix}alert-border-color: #{$border};
@if $enable-gradients { @if $enable-gradients {
background-image: var(--#{$variable-prefix}gradient); background-image: var(--#{$prefix}gradient);
} }
.alert-link { .alert-link {

62
scss/mixins/_buttons.scss
View File

@ -20,20 +20,20 @@
$disabled-border: $border, $disabled-border: $border,
$disabled-color: color-contrast($disabled-background) $disabled-color: color-contrast($disabled-background)
) { ) {
--#{$variable-prefix}btn-color: #{$color}; --#{$prefix}btn-color: #{$color};
--#{$variable-prefix}btn-bg: #{$background}; --#{$prefix}btn-bg: #{$background};
--#{$variable-prefix}btn-border-color: #{$border}; --#{$prefix}btn-border-color: #{$border};
--#{$variable-prefix}btn-hover-color: #{$hover-color}; --#{$prefix}btn-hover-color: #{$hover-color};
--#{$variable-prefix}btn-hover-bg: #{$hover-background}; --#{$prefix}btn-hover-bg: #{$hover-background};
--#{$variable-prefix}btn-hover-border-color: #{$hover-border}; --#{$prefix}btn-hover-border-color: #{$hover-border};
--#{$variable-prefix}btn-focus-shadow-rgb: #{to-rgb(mix($color, $border, 15%))}; --#{$prefix}btn-focus-shadow-rgb: #{to-rgb(mix($color, $border, 15%))};
--#{$variable-prefix}btn-active-color: #{$active-color}; --#{$prefix}btn-active-color: #{$active-color};
--#{$variable-prefix}btn-active-bg: #{$active-background}; --#{$prefix}btn-active-bg: #{$active-background};
--#{$variable-prefix}btn-active-border-color: #{$active-border}; --#{$prefix}btn-active-border-color: #{$active-border};
--#{$variable-prefix}btn-active-shadow: #{$btn-active-box-shadow}; --#{$prefix}btn-active-shadow: #{$btn-active-box-shadow};
--#{$variable-prefix}btn-disabled-color: #{$disabled-color}; --#{$prefix}btn-disabled-color: #{$disabled-color};
--#{$variable-prefix}btn-disabled-bg: #{$disabled-background}; --#{$prefix}btn-disabled-bg: #{$disabled-background};
--#{$variable-prefix}btn-disabled-border-color: #{$disabled-border}; --#{$prefix}btn-disabled-border-color: #{$disabled-border};
} }
// scss-docs-end btn-variant-mixin // scss-docs-end btn-variant-mixin
@ -45,27 +45,27 @@
$active-border: $color, $active-border: $color,
$active-color: color-contrast($active-background) $active-color: color-contrast($active-background)
) { ) {
--#{$variable-prefix}btn-color: #{$color}; --#{$prefix}btn-color: #{$color};
--#{$variable-prefix}btn-border-color: #{$color}; --#{$prefix}btn-border-color: #{$color};
--#{$variable-prefix}btn-hover-color: #{$color-hover}; --#{$prefix}btn-hover-color: #{$color-hover};
--#{$variable-prefix}btn-hover-bg: #{$active-background}; --#{$prefix}btn-hover-bg: #{$active-background};
--#{$variable-prefix}btn-hover-border-color: #{$active-border}; --#{$prefix}btn-hover-border-color: #{$active-border};
--#{$variable-prefix}btn-focus-shadow-rgb: #{to-rgb($color)}; --#{$prefix}btn-focus-shadow-rgb: #{to-rgb($color)};
--#{$variable-prefix}btn-active-color: #{$active-color}; --#{$prefix}btn-active-color: #{$active-color};
--#{$variable-prefix}btn-active-bg: #{$active-background}; --#{$prefix}btn-active-bg: #{$active-background};
--#{$variable-prefix}btn-active-border-color: #{$active-border}; --#{$prefix}btn-active-border-color: #{$active-border};
--#{$variable-prefix}btn-active-shadow: #{$btn-active-box-shadow}; --#{$prefix}btn-active-shadow: #{$btn-active-box-shadow};
--#{$variable-prefix}btn-disabled-color: #{$color}; --#{$prefix}btn-disabled-color: #{$color};
--#{$variable-prefix}btn-disabled-bg: transparent; --#{$prefix}btn-disabled-bg: transparent;
--#{$variable-prefix}gradient: none; --#{$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) {
--#{$variable-prefix}btn-padding-y: #{$padding-y}; --#{$prefix}btn-padding-y: #{$padding-y};
--#{$variable-prefix}btn-padding-x: #{$padding-x}; --#{$prefix}btn-padding-x: #{$padding-x};
@include rfs($font-size, --#{$variable-prefix}btn-font-size); @include rfs($font-size, --#{$prefix}btn-font-size);
--#{$variable-prefix}btn-border-radius: #{$border-radius}; --#{$prefix}btn-border-radius: #{$border-radius};
} }
// scss-docs-end btn-size-mixin // scss-docs-end btn-size-mixin

8
scss/mixins/_container.scss
View File

@ -1,11 +1,11 @@
// Container mixins // Container mixins
@mixin make-container($gutter: $container-padding-x) { @mixin make-container($gutter: $container-padding-x) {
--#{$variable-prefix}gutter-x: #{$gutter}; --#{$prefix}gutter-x: #{$gutter};
--#{$variable-prefix}gutter-y: 0; --#{$prefix}gutter-y: 0;
width: 100%; width: 100%;
padding-right: calc(var(--#{$variable-prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list padding-right: calc(var(--#{$prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list
padding-left: calc(var(--#{$variable-prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list padding-left: calc(var(--#{$prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list
margin-right: auto; margin-right: auto;
margin-left: auto; margin-left: auto;
} }

2
scss/mixins/_gradients.scss
View File

@ -5,7 +5,7 @@
background-color: $color; background-color: $color;
@if $enable-gradients { @if $enable-gradients {
background-image: var(--#{$variable-prefix}gradient); background-image: var(--#{$prefix}gradient);
} }
} }
// scss-docs-end gradient-bg-mixin // scss-docs-end gradient-bg-mixin

20
scss/mixins/_grid.scss
View File

@ -3,14 +3,14 @@
// Generate semantic grid columns with these mixins. // Generate semantic grid columns with these mixins.
@mixin make-row($gutter: $grid-gutter-width) { @mixin make-row($gutter: $grid-gutter-width) {
--#{$variable-prefix}gutter-x: #{$gutter}; --#{$prefix}gutter-x: #{$gutter};
--#{$variable-prefix}gutter-y: 0; --#{$prefix}gutter-y: 0;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
// TODO: Revisit calc order after https://github.com/react-bootstrap/react-bootstrap/issues/6039 is fixed // TODO: Revisit calc order after https://github.com/react-bootstrap/react-bootstrap/issues/6039 is fixed
margin-top: calc(-1 * var(--#{$variable-prefix}gutter-y)); // stylelint-disable-line function-disallowed-list margin-top: calc(-1 * var(--#{$prefix}gutter-y)); // stylelint-disable-line function-disallowed-list
margin-right: calc(-.5 * var(--#{$variable-prefix}gutter-x)); // stylelint-disable-line function-disallowed-list margin-right: calc(-.5 * var(--#{$prefix}gutter-x)); // stylelint-disable-line function-disallowed-list
margin-left: calc(-.5 * var(--#{$variable-prefix}gutter-x)); // stylelint-disable-line function-disallowed-list margin-left: calc(-.5 * var(--#{$prefix}gutter-x)); // stylelint-disable-line function-disallowed-list
} }
@mixin make-col-ready() { @mixin make-col-ready() {
@ -22,9 +22,9 @@
flex-shrink: 0; flex-shrink: 0;
width: 100%; width: 100%;
max-width: 100%; // Prevent `.col-auto`, `.col` (& responsive variants) from breaking out the grid max-width: 100%; // Prevent `.col-auto`, `.col` (& responsive variants) from breaking out the grid
padding-right: calc(var(--#{$variable-prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list padding-right: calc(var(--#{$prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list
padding-left: calc(var(--#{$variable-prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list padding-left: calc(var(--#{$prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list
margin-top: var(--#{$variable-prefix}gutter-y); margin-top: var(--#{$prefix}gutter-y);
} }
@mixin make-col($size: false, $columns: $grid-columns) { @mixin make-col($size: false, $columns: $grid-columns) {
@ -114,12 +114,12 @@
@each $key, $value in $gutters { @each $key, $value in $gutters {
.g#{$infix}-#{$key}, .g#{$infix}-#{$key},
.gx#{$infix}-#{$key} { .gx#{$infix}-#{$key} {
--#{$variable-prefix}gutter-x: #{$value}; --#{$prefix}gutter-x: #{$value};
} }
.g#{$infix}-#{$key}, .g#{$infix}-#{$key},
.gy#{$infix}-#{$key} { .gy#{$infix}-#{$key} {
--#{$variable-prefix}gutter-y: #{$value}; --#{$prefix}gutter-y: #{$value};
} }
} }
} }

8
scss/mixins/_pagination.scss
View File

@ -2,9 +2,9 @@
// 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) {
--#{$variable-prefix}pagination-padding-x: #{$padding-x}; --#{$prefix}pagination-padding-x: #{$padding-x};
--#{$variable-prefix}pagination-padding-y: #{$padding-y}; --#{$prefix}pagination-padding-y: #{$padding-y};
@include rfs($font-size, --#{$variable-prefix}pagination-font-size); @include rfs($font-size, --#{$prefix}pagination-font-size);
--#{$variable-prefix}pagination-border-radius: #{$border-radius}; // stylelint-disable-line custom-property-empty-line-before --#{$prefix}pagination-border-radius: #{$border-radius}; // stylelint-disable-line custom-property-empty-line-before
} }
// scss-docs-end pagination-mixin // scss-docs-end pagination-mixin

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

@ -7,18 +7,18 @@
$active-bg: mix($color, $background, percentage($table-active-bg-factor)); $active-bg: mix($color, $background, percentage($table-active-bg-factor));
$border-color: mix($color, $background, percentage($table-border-factor)); $border-color: mix($color, $background, percentage($table-border-factor));
--#{$variable-prefix}table-color: #{$color}; --#{$prefix}table-color: #{$color};
--#{$variable-prefix}table-bg: #{$background}; --#{$prefix}table-bg: #{$background};
--#{$variable-prefix}table-border-color: #{$border-color}; --#{$prefix}table-border-color: #{$border-color};
--#{$variable-prefix}table-striped-bg: #{$striped-bg}; --#{$prefix}table-striped-bg: #{$striped-bg};
--#{$variable-prefix}table-striped-color: #{color-contrast($striped-bg)}; --#{$prefix}table-striped-color: #{color-contrast($striped-bg)};
--#{$variable-prefix}table-active-bg: #{$active-bg}; --#{$prefix}table-active-bg: #{$active-bg};
--#{$variable-prefix}table-active-color: #{color-contrast($active-bg)}; --#{$prefix}table-active-color: #{color-contrast($active-bg)};
--#{$variable-prefix}table-hover-bg: #{$hover-bg}; --#{$prefix}table-hover-bg: #{$hover-bg};
--#{$variable-prefix}table-hover-color: #{color-contrast($hover-bg)}; --#{$prefix}table-hover-color: #{color-contrast($hover-bg)};
color: var(--#{$variable-prefix}table-color); color: var(--#{$prefix}table-color);
border-color: var(--#{$variable-prefix}table-border-color); border-color: var(--#{$prefix}table-border-color);
} }
} }
// scss-docs-end table-variant // scss-docs-end table-variant

6
scss/mixins/_utilities.scss
View File

@ -55,12 +55,12 @@
@if $is-css-var { @if $is-css-var {
.#{$property-class + $infix + $property-class-modifier} { .#{$property-class + $infix + $property-class-modifier} {
--#{$variable-prefix}#{$css-variable-name}: #{$value}; --#{$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} {
--#{$variable-prefix}#{$css-variable-name}: #{$value}; --#{$prefix}#{$css-variable-name}: #{$value};
} }
} }
} @else { } @else {
@ -68,7 +68,7 @@
@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 {
--#{$variable-prefix}#{$local-var}: #{$variable}; --#{$prefix}#{$local-var}: #{$variable};
} }
} }
#{$property}: $value if($enable-important-utilities, !important, null); #{$property}: $value if($enable-important-utilities, !important, null);

4
site/assets/scss/_component-examples.scss
View File

@ -194,7 +194,7 @@
width: 10rem; width: 10rem;
color: $gray-600; color: $gray-600;
background-color: $gray-100; background-color: $gray-100;
border: var(--#{$variable-prefix}border-width) solid var(--#{$variable-prefix}border-color); border: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color);
> div { > div {
display: flex; display: flex;
@ -280,7 +280,7 @@
.bd-example-border-utils-0 { .bd-example-border-utils-0 {
[class^="border"] { [class^="border"] {
border: var(--#{$variable-prefix}border-width) solid var(--#{$variable-prefix}border-color); border: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color);
} }
} }

2
site/content/docs/5.1/customize/css-variables.md
View File

@ -40,7 +40,7 @@ Whenever possible, we'll assign CSS variables at the base component level (e.g.,
Most CSS variables use a prefix to avoid collisions with your own codebase. This prefix is in addition to the `--` that's required on every CSS variable. Most CSS variables use a prefix to avoid collisions with your own codebase. This prefix is in addition to the `--` that's required on every CSS variable.
Customize the prefix via the `$variable-prefix` Sass variable. By default, it's set to `bs-` (note the trailing dash). Customize the prefix via the `$prefix` Sass variable. By default, it's set to `bs-` (note the trailing dash).
## Examples ## Examples