rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-29 21:52:22 +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",
"maxSize": "6.5 kB"
"maxSize": "6.55 kB"
},
{
"path": "./dist/css/bootstrap-reboot.css",
"maxSize": "2.5 kB"
"maxSize": "2.55 kB"
},
{
"path": "./dist/css/bootstrap-reboot.min.css",
@ -26,11 +26,11 @@
},
{
"path": "./dist/css/bootstrap.css",
"maxSize": "26.4 kB"
"maxSize": "26.6 kB"
},
{
"path": "./dist/css/bootstrap.min.css",
"maxSize": "24.5 kB"
"maxSize": "24.65 kB"
},
{
"path": "./dist/js/bootstrap.bundle.js",

28
scss/_alert.scss
View File

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

22
scss/_badge.scss
View File

@ -7,24 +7,24 @@
.badge {
// scss-docs-start badge-css-vars
--#{$variable-prefix}badge-padding-x: #{$badge-padding-x};
--#{$variable-prefix}badge-padding-y: #{$badge-padding-y};
@include rfs($badge-font-size, --#{$variable-prefix}badge-font-size);
--#{$variable-prefix}badge-font-weight: #{$badge-font-weight};
--#{$variable-prefix}badge-color: #{$badge-color};
--#{$variable-prefix}badge-border-radius: #{$badge-border-radius};
--#{$prefix}badge-padding-x: #{$badge-padding-x};
--#{$prefix}badge-padding-y: #{$badge-padding-y};
@include rfs($badge-font-size, --#{$prefix}badge-font-size);
--#{$prefix}badge-font-weight: #{$badge-font-weight};
--#{$prefix}badge-color: #{$badge-color};
--#{$prefix}badge-border-radius: #{$badge-border-radius};
// scss-docs-end badge-css-vars
display: inline-block;
padding: var(--#{$variable-prefix}badge-padding-y) var(--#{$variable-prefix}badge-padding-x);
font-size: var(--#{$variable-prefix}badge-font-size);
font-weight: var(--#{$variable-prefix}badge-font-weight);
padding: var(--#{$prefix}badge-padding-y) var(--#{$prefix}badge-padding-x);
font-size: var(--#{$prefix}badge-font-size);
font-weight: var(--#{$prefix}badge-font-weight);
line-height: 1;
color: var(--#{$variable-prefix}badge-color);
color: var(--#{$prefix}badge-color);
text-align: center;
white-space: nowrap;
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();
// Empty badges collapse automatically

38
scss/_breadcrumb.scss
View File

@ -2,42 +2,42 @@
.breadcrumb {
// scss-docs-start breadcrumb-css-vars
--#{$variable-prefix}breadcrumb-padding-x: #{$breadcrumb-padding-x};
--#{$variable-prefix}breadcrumb-padding-y: #{$breadcrumb-padding-y};
--#{$variable-prefix}breadcrumb-margin-bottom: #{$breadcrumb-margin-bottom};
@include rfs($breadcrumb-font-size, --#{$variable-prefix}breadcrumb-font-size);
--#{$variable-prefix}breadcrumb-bg: #{$breadcrumb-bg};
--#{$variable-prefix}breadcrumb-border-radius: #{$breadcrumb-border-radius};
--#{$variable-prefix}breadcrumb-divider-color: #{$breadcrumb-divider-color};
--#{$variable-prefix}breadcrumb-item-padding-x: #{$breadcrumb-item-padding-x};
--#{$variable-prefix}breadcrumb-item-active-color: #{$breadcrumb-active-color};
--#{$prefix}breadcrumb-padding-x: #{$breadcrumb-padding-x};
--#{$prefix}breadcrumb-padding-y: #{$breadcrumb-padding-y};
--#{$prefix}breadcrumb-margin-bottom: #{$breadcrumb-margin-bottom};
@include rfs($breadcrumb-font-size, --#{$prefix}breadcrumb-font-size);
--#{$prefix}breadcrumb-bg: #{$breadcrumb-bg};
--#{$prefix}breadcrumb-border-radius: #{$breadcrumb-border-radius};
--#{$prefix}breadcrumb-divider-color: #{$breadcrumb-divider-color};
--#{$prefix}breadcrumb-item-padding-x: #{$breadcrumb-item-padding-x};
--#{$prefix}breadcrumb-item-active-color: #{$breadcrumb-active-color};
// scss-docs-end breadcrumb-css-vars
display: flex;
flex-wrap: wrap;
padding: var(--#{$variable-prefix}breadcrumb-padding-y) var(--#{$variable-prefix}breadcrumb-padding-x);
margin-bottom: var(--#{$variable-prefix}breadcrumb-margin-bottom);
padding: var(--#{$prefix}breadcrumb-padding-y) var(--#{$prefix}breadcrumb-padding-x);
margin-bottom: var(--#{$prefix}breadcrumb-margin-bottom);
@include font-size($breadcrumb-font-size);
font-size: var(--#{$variable-prefix}breadcrumb-font-size);
font-size: var(--#{$prefix}breadcrumb-font-size);
list-style: none;
background-color: var(--#{$variable-prefix}breadcrumb-bg);
@include border-radius(var(--#{$variable-prefix}breadcrumb-border-radius));
background-color: var(--#{$prefix}breadcrumb-bg);
@include border-radius(var(--#{$prefix}breadcrumb-border-radius));
}
.breadcrumb-item {
// The separator between breadcrumbs (by default, a forward-slash: "/")
+ .breadcrumb-item {
padding-left: var(--#{$variable-prefix}breadcrumb-item-padding-x);
padding-left: var(--#{$prefix}breadcrumb-item-padding-x);
&::before {
float: left; // Suppress inline spacings and underlining of the separator
padding-right: var(--#{$variable-prefix}breadcrumb-item-padding-x);
color: var(--#{$variable-prefix}breadcrumb-divider-color);
content: var(--#{$variable-prefix}breadcrumb-divider, escape-svg($breadcrumb-divider)) #{"/* rtl:"} var(--#{$variable-prefix}breadcrumb-divider, escape-svg($breadcrumb-divider-flipped)) #{"*/"};
padding-right: $breadcrumb-item-padding-x;
color: $breadcrumb-divider-color;
content: var(--#{$prefix}breadcrumb-divider, escape-svg($breadcrumb-divider)) #{"/* rtl:"} var(--#{$prefix}breadcrumb-divider, escape-svg($breadcrumb-divider-flipped)) #{"*/"};
}
}
&.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 {
// scss-docs-start btn-css-vars
--#{$variable-prefix}btn-padding-x: #{$btn-padding-x};
--#{$variable-prefix}btn-padding-y: #{$btn-padding-y};
--#{$variable-prefix}btn-font-family: #{$btn-font-family};
@include rfs($btn-font-size, --#{$variable-prefix}btn-font-size);
--#{$variable-prefix}btn-font-weight: #{$btn-font-weight};
--#{$variable-prefix}btn-line-height: #{$btn-line-height};
--#{$variable-prefix}btn-color: #{$body-color};
--#{$variable-prefix}btn-bg: transparent;
--#{$variable-prefix}btn-border-width: #{$btn-border-width};
--#{$variable-prefix}btn-border-color: transparent;
--#{$variable-prefix}btn-border-radius: #{$btn-border-radius};
--#{$variable-prefix}btn-box-shadow: #{$btn-box-shadow};
--#{$variable-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-padding-x: #{$btn-padding-x};
--#{$prefix}btn-padding-y: #{$btn-padding-y};
--#{$prefix}btn-font-family: #{$btn-font-family};
@include rfs($btn-font-size, --#{$prefix}btn-font-size);
--#{$prefix}btn-font-weight: #{$btn-font-weight};
--#{$prefix}btn-line-height: #{$btn-line-height};
--#{$prefix}btn-color: #{$body-color};
--#{$prefix}btn-bg: transparent;
--#{$prefix}btn-border-width: #{$btn-border-width};
--#{$prefix}btn-border-color: transparent;
--#{$prefix}btn-border-radius: #{$btn-border-radius};
--#{$prefix}btn-box-shadow: #{$btn-box-shadow};
--#{$prefix}btn-disabled-opacity: #{$btn-disabled-opacity};
--#{$prefix}btn-focus-box-shadow: 0 0 0 #{$btn-focus-width} rgba(var(--#{$prefix}btn-focus-shadow-rgb), .5);
// scss-docs-end btn-css-vars
display: inline-block;
padding: var(--#{$variable-prefix}btn-padding-y) var(--#{$variable-prefix}btn-padding-x);
font-family: var(--#{$variable-prefix}btn-font-family);
font-size: var(--#{$variable-prefix}btn-font-size);
font-weight: var(--#{$variable-prefix}btn-font-weight);
line-height: var(--#{$variable-prefix}btn-line-height);
color: var(--#{$variable-prefix}btn-color);
padding: var(--#{$prefix}btn-padding-y) var(--#{$prefix}btn-padding-x);
font-family: var(--#{$prefix}btn-font-family);
font-size: var(--#{$prefix}btn-font-size);
font-weight: var(--#{$prefix}btn-font-weight);
line-height: var(--#{$prefix}btn-line-height);
color: var(--#{$prefix}btn-color);
text-align: center;
text-decoration: if($link-decoration == none, null, none);
white-space: $btn-white-space;
vertical-align: middle;
cursor: if($enable-button-pointers, pointer, null);
user-select: none;
border: var(--#{$variable-prefix}btn-border-width) solid var(--#{$variable-prefix}btn-border-color);
@include border-radius(var(--#{$variable-prefix}btn-border-radius));
@include gradient-bg(var(--#{$variable-prefix}btn-bg));
@include box-shadow(var(--#{$variable-prefix}btn-box-shadow));
border: var(--#{$prefix}btn-border-width) solid var(--#{$prefix}btn-border-color);
@include border-radius(var(--#{$prefix}btn-border-radius));
@include gradient-bg(var(--#{$prefix}btn-bg));
@include box-shadow(var(--#{$prefix}btn-box-shadow));
@include transition($btn-transition);
&:hover {
color: var(--#{$variable-prefix}btn-hover-color);
color: var(--#{$prefix}btn-hover-color);
text-decoration: if($link-hover-decoration == underline, none, null);
background-color: var(--#{$variable-prefix}btn-hover-bg);
border-color: var(--#{$variable-prefix}btn-hover-border-color);
background-color: var(--#{$prefix}btn-hover-bg);
border-color: var(--#{$prefix}btn-hover-border-color);
}
.btn-check:focus + &,
&:focus {
color: var(--#{$variable-prefix}btn-hover-color);
@include gradient-bg(var(--#{$variable-prefix}btn-hover-bg));
border-color: var(--#{$variable-prefix}btn-hover-border-color);
color: var(--#{$prefix}btn-hover-color);
@include gradient-bg(var(--#{$prefix}btn-hover-bg));
border-color: var(--#{$prefix}btn-hover-border-color);
outline: 0;
// Avoid using mixin so we can pass custom focus shadow properly
@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 {
box-shadow: var(--#{$variable-prefix}btn-focus-box-shadow);
box-shadow: var(--#{$prefix}btn-focus-box-shadow);
}
}
@ -67,19 +67,19 @@
&:active,
&.active,
&.show {
color: var(--#{$variable-prefix}btn-active-color);
background-color: var(--#{$variable-prefix}btn-active-bg);
color: var(--#{$prefix}btn-active-color);
background-color: var(--#{$prefix}btn-active-bg);
// Remove CSS gradients if they're enabled
background-image: if($enable-gradients, none, null);
border-color: var(--#{$variable-prefix}btn-active-border-color);
@include box-shadow(var(--#{$variable-prefix}btn-active-shadow));
border-color: var(--#{$prefix}btn-active-border-color);
@include box-shadow(var(--#{$prefix}btn-active-shadow));
&:focus {
// Avoid using mixin so we can pass custom focus shadow properly
@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 {
box-shadow: var(--#{$variable-prefix}btn-focus-box-shadow);
box-shadow: var(--#{$prefix}btn-focus-box-shadow);
}
}
}
@ -87,12 +87,12 @@
&:disabled,
&.disabled,
fieldset:disabled & {
color: var(--#{$variable-prefix}btn-disabled-color);
color: var(--#{$prefix}btn-disabled-color);
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);
border-color: var(--#{$variable-prefix}btn-disabled-border-color);
opacity: var(--#{$variable-prefix}btn-disabled-opacity);
border-color: var(--#{$prefix}btn-disabled-border-color);
opacity: var(--#{$prefix}btn-disabled-opacity);
@include box-shadow(none);
}
}
@ -123,16 +123,16 @@
// Make a button look and behave like a link
.btn-link {
--#{$variable-prefix}btn-font-weight: #{$font-weight-normal};
--#{$variable-prefix}btn-color: #{$btn-link-color};
--#{$variable-prefix}btn-bg: transparent;
--#{$variable-prefix}btn-border-color: transparent;
--#{$variable-prefix}btn-hover-color: #{$btn-link-hover-color};
--#{$variable-prefix}btn-hover-border-color: transparent;
--#{$variable-prefix}btn-active-border-color: transparent;
--#{$variable-prefix}btn-disabled-color: #{$btn-link-disabled-color};
--#{$variable-prefix}btn-disabled-border-color: transparent;
--#{$variable-prefix}btn-box-shadow: none;
--#{$prefix}btn-font-weight: #{$font-weight-normal};
--#{$prefix}btn-color: #{$btn-link-color};
--#{$prefix}btn-bg: transparent;
--#{$prefix}btn-border-color: transparent;
--#{$prefix}btn-hover-color: #{$btn-link-hover-color};
--#{$prefix}btn-hover-border-color: transparent;
--#{$prefix}btn-active-border-color: transparent;
--#{$prefix}btn-disabled-color: #{$btn-link-disabled-color};
--#{$prefix}btn-disabled-border-color: transparent;
--#{$prefix}btn-box-shadow: none;
text-decoration: $link-decoration;

128
scss/_dropdown.scss
View File

@ -18,53 +18,53 @@
// The dropdown menu
.dropdown-menu {
// scss-docs-start dropdown-css-vars
--#{$variable-prefix}dropdown-min-width: #{$dropdown-min-width};
--#{$variable-prefix}dropdown-padding-x: #{$dropdown-padding-x};
--#{$variable-prefix}dropdown-padding-y: #{$dropdown-padding-y};
--#{$variable-prefix}dropdown-spacer: #{$dropdown-spacer};
@include rfs($dropdown-font-size, --#{$variable-prefix}dropdown-font-size);
--#{$variable-prefix}dropdown-color: #{$dropdown-color}; // stylelint-disable-line custom-property-empty-line-before
--#{$variable-prefix}dropdown-bg: #{$dropdown-bg};
--#{$variable-prefix}dropdown-border-color: #{$dropdown-border-color};
--#{$variable-prefix}dropdown-border-radius: #{$dropdown-border-radius};
--#{$variable-prefix}dropdown-border-width: #{$dropdown-border-width};
--#{$variable-prefix}dropdown-inner-border-radius: #{$dropdown-inner-border-radius};
--#{$variable-prefix}dropdown-divider-bg: #{$dropdown-divider-bg};
--#{$variable-prefix}dropdown-divider-margin-y: #{$dropdown-divider-margin-y};
--#{$variable-prefix}dropdown-box-shadow: #{$dropdown-box-shadow};
--#{$variable-prefix}dropdown-link-color: #{$dropdown-link-color};
--#{$variable-prefix}dropdown-link-hover-color: #{$dropdown-link-hover-color};
--#{$variable-prefix}dropdown-link-hover-bg: #{$dropdown-link-hover-bg};
--#{$variable-prefix}dropdown-link-active-color: #{$dropdown-link-active-color};
--#{$variable-prefix}dropdown-link-active-bg: #{$dropdown-link-active-bg};
--#{$variable-prefix}dropdown-link-disabled-color: #{$dropdown-link-disabled-color};
--#{$variable-prefix}dropdown-item-padding-x: #{$dropdown-item-padding-x};
--#{$variable-prefix}dropdown-item-padding-y: #{$dropdown-item-padding-y};
--#{$variable-prefix}dropdown-header-color: #{$dropdown-header-color};
--#{$variable-prefix}dropdown-header-padding-x: #{$dropdown-header-padding-x};
--#{$variable-prefix}dropdown-header-padding-y: #{$dropdown-header-padding-y};
--#{$prefix}dropdown-min-width: #{$dropdown-min-width};
--#{$prefix}dropdown-padding-x: #{$dropdown-padding-x};
--#{$prefix}dropdown-padding-y: #{$dropdown-padding-y};
--#{$prefix}dropdown-spacer: #{$dropdown-spacer};
@include rfs($dropdown-font-size, --#{$prefix}dropdown-font-size);
--#{$prefix}dropdown-color: #{$dropdown-color}; // stylelint-disable-line custom-property-empty-line-before
--#{$prefix}dropdown-bg: #{$dropdown-bg};
--#{$prefix}dropdown-border-color: #{$dropdown-border-color};
--#{$prefix}dropdown-border-radius: #{$dropdown-border-radius};
--#{$prefix}dropdown-border-width: #{$dropdown-border-width};
--#{$prefix}dropdown-inner-border-radius: #{$dropdown-inner-border-radius};
--#{$prefix}dropdown-divider-bg: #{$dropdown-divider-bg};
--#{$prefix}dropdown-divider-margin-y: #{$dropdown-divider-margin-y};
--#{$prefix}dropdown-box-shadow: #{$dropdown-box-shadow};
--#{$prefix}dropdown-link-color: #{$dropdown-link-color};
--#{$prefix}dropdown-link-hover-color: #{$dropdown-link-hover-color};
--#{$prefix}dropdown-link-hover-bg: #{$dropdown-link-hover-bg};
--#{$prefix}dropdown-link-active-color: #{$dropdown-link-active-color};
--#{$prefix}dropdown-link-active-bg: #{$dropdown-link-active-bg};
--#{$prefix}dropdown-link-disabled-color: #{$dropdown-link-disabled-color};
--#{$prefix}dropdown-item-padding-x: #{$dropdown-item-padding-x};
--#{$prefix}dropdown-item-padding-y: #{$dropdown-item-padding-y};
--#{$prefix}dropdown-header-color: #{$dropdown-header-color};
--#{$prefix}dropdown-header-padding-x: #{$dropdown-header-padding-x};
--#{$prefix}dropdown-header-padding-y: #{$dropdown-header-padding-y};
// scss-docs-end dropdown-css-vars
position: absolute;
z-index: $zindex-dropdown;
display: none; // none by default, but block on "open" of the menu
min-width: var(--#{$variable-prefix}dropdown-min-width);
padding: var(--#{$variable-prefix}dropdown-padding-y) var(--#{$variable-prefix}dropdown-padding-x);
min-width: var(--#{$prefix}dropdown-min-width);
padding: var(--#{$prefix}dropdown-padding-y) var(--#{$prefix}dropdown-padding-x);
margin: 0; // Override default margin of ul
@include font-size(var(--#{$variable-prefix}dropdown-font-size));
color: var(--#{$variable-prefix}dropdown-color);
@include font-size(var(--#{$prefix}dropdown-font-size));
color: var(--#{$prefix}dropdown-color);
text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer)
list-style: none;
background-color: var(--#{$variable-prefix}dropdown-bg);
background-color: var(--#{$prefix}dropdown-bg);
background-clip: padding-box;
border: var(--#{$variable-prefix}dropdown-border-width) solid var(--#{$variable-prefix}dropdown-border-color);
@include border-radius(var(--#{$variable-prefix}dropdown-border-radius));
@include box-shadow(var(--#{$variable-prefix}dropdown-box-shadow));
border: var(--#{$prefix}dropdown-border-width) solid var(--#{$prefix}dropdown-border-color);
@include border-radius(var(--#{$prefix}dropdown-border-radius));
@include box-shadow(var(--#{$prefix}dropdown-box-shadow));
&[data-bs-popper] {
top: 100%;
left: 0;
margin-top: var(--#{$variable-prefix}dropdown-spacer);
margin-top: var(--#{$prefix}dropdown-spacer);
}
}
@ -104,7 +104,7 @@
top: auto;
bottom: 100%;
margin-top: 0;
margin-bottom: var(--#{$variable-prefix}dropdown-spacer);
margin-bottom: var(--#{$prefix}dropdown-spacer);
}
.dropdown-toggle {
@ -118,7 +118,7 @@
right: auto;
left: 100%;
margin-top: 0;
margin-left: var(--#{$variable-prefix}dropdown-spacer);
margin-left: var(--#{$prefix}dropdown-spacer);
}
.dropdown-toggle {
@ -135,7 +135,7 @@
right: 100%;
left: auto;
margin-top: 0;
margin-right: var(--#{$variable-prefix}dropdown-spacer);
margin-right: var(--#{$prefix}dropdown-spacer);
}
.dropdown-toggle {
@ -150,9 +150,9 @@
// Dividers (basically an `<hr>`) within the dropdown
.dropdown-divider {
height: 0;
margin: var(--#{$variable-prefix}dropdown-divider-margin-y) 0;
margin: var(--#{$prefix}dropdown-divider-margin-y) 0;
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
}
@ -162,10 +162,10 @@
.dropdown-item {
display: block;
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;
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-decoration: if($link-decoration == none, null, none);
white-space: nowrap; // prevent links from randomly breaking onto new lines
@ -176,31 +176,31 @@
// See https://github.com/twbs/bootstrap/pull/27703
@if $dropdown-padding-y == 0 {
&: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 {
@include border-bottom-radius(var(--#{$variable-prefix}dropdown-inner-border-radius));
@include border-bottom-radius(var(--#{$prefix}dropdown-inner-border-radius));
}
}
&:hover,
&: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);
@include gradient-bg(var(--#{$variable-prefix}dropdown-link-hover-bg));
@include gradient-bg(var(--#{$prefix}dropdown-link-hover-bg));
}
&.active,
&:active {
color: var(--#{$variable-prefix}dropdown-link-active-color);
color: var(--#{$prefix}dropdown-link-active-color);
text-decoration: none;
@include gradient-bg(var(--#{$variable-prefix}dropdown-link-active-bg));
@include gradient-bg(var(--#{$prefix}dropdown-link-active-bg));
}
&.disabled,
&:disabled {
color: var(--#{$variable-prefix}dropdown-link-disabled-color);
color: var(--#{$prefix}dropdown-link-disabled-color);
pointer-events: none;
background-color: transparent;
// Remove CSS gradients if they're enabled
@ -215,34 +215,34 @@
// Dropdown section headers
.dropdown-header {
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
@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
}
// Dropdown text
.dropdown-item-text {
display: block;
padding: var(--#{$variable-prefix}dropdown-item-padding);
color: var(--#{$variable-prefix}dropdown-link-color);
padding: var(--#{$prefix}dropdown-item-padding);
color: var(--#{$prefix}dropdown-link-color);
}
// Dark dropdowns
.dropdown-menu-dark {
// scss-docs-start dropdown-dark-css-vars
--#{$variable-prefix}dropdown-color: #{$dropdown-dark-color};
--#{$variable-prefix}dropdown-bg: #{$dropdown-dark-bg};
--#{$variable-prefix}dropdown-border-color: #{$dropdown-dark-border-color};
--#{$variable-prefix}dropdown-box-shadow: #{$dropdown-dark-box-shadow};
--#{$variable-prefix}dropdown-link-color: #{$dropdown-dark-link-color};
--#{$variable-prefix}dropdown-link-hover-color: #{$dropdown-dark-link-hover-color};
--#{$variable-prefix}dropdown-divider-bg: #{$dropdown-dark-divider-bg};
--#{$variable-prefix}dropdown-link-hover-bg: #{$dropdown-dark-link-hover-bg};
--#{$variable-prefix}dropdown-link-active-color: #{$dropdown-dark-link-active-color};
--#{$variable-prefix}dropdown-link-active-bg: #{$dropdown-dark-link-active-bg};
--#{$variable-prefix}dropdown-link-disabled-color: #{$dropdown-dark-link-disabled-color};
--#{$variable-prefix}dropdown-header-color: #{$dropdown-dark-header-color};
--#{$prefix}dropdown-color: #{$dropdown-dark-color};
--#{$prefix}dropdown-bg: #{$dropdown-dark-bg};
--#{$prefix}dropdown-border-color: #{$dropdown-dark-border-color};
--#{$prefix}dropdown-box-shadow: #{$dropdown-dark-box-shadow};
--#{$prefix}dropdown-link-color: #{$dropdown-dark-link-color};
--#{$prefix}dropdown-link-hover-color: #{$dropdown-dark-link-hover-color};
--#{$prefix}dropdown-divider-bg: #{$dropdown-dark-divider-bg};
--#{$prefix}dropdown-link-hover-bg: #{$dropdown-dark-link-hover-bg};
--#{$prefix}dropdown-link-active-color: #{$dropdown-dark-link-active-color};
--#{$prefix}dropdown-link-active-bg: #{$dropdown-dark-link-active-bg};
--#{$prefix}dropdown-link-disabled-color: #{$dropdown-dark-link-disabled-color};
--#{$prefix}dropdown-header-color: #{$dropdown-dark-header-color};
// scss-docs-end dropdown-dark-css-vars
}

8
scss/_functions.scss
View File

@ -40,11 +40,11 @@
// stylelint-disable scss/dollar-variable-pattern
@function rgba-css-var($identifier, $target) {
@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" {
@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 {
@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) {
$result: null;
@each $entry in $list {
$result: append($result, var(--#{$variable-prefix}#{$entry}), space);
$result: append($result, var(--#{$prefix}#{$entry}), space);
}
@return $result;
}

6
scss/_grid.scss
View File

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

104
scss/_navbar.scss
View File

@ -5,26 +5,26 @@
.navbar {
// scss-docs-start navbar-css-vars
--#{$variable-prefix}navbar-padding-x: #{if($navbar-padding-x == null, 0, $navbar-padding-x)};
--#{$variable-prefix}navbar-padding-y: #{$navbar-padding-y};
--#{$variable-prefix}navbar-color: #{$navbar-light-color};
--#{$variable-prefix}navbar-hover-color: #{$navbar-light-hover-color};
--#{$variable-prefix}navbar-disabled-color: #{$navbar-light-disabled-color};
--#{$variable-prefix}navbar-active-color: #{$navbar-light-active-color};
--#{$variable-prefix}navbar-brand-padding-y: #{$navbar-brand-padding-y};
--#{$variable-prefix}navbar-brand-margin-end: #{$navbar-brand-margin-end};
--#{$variable-prefix}navbar-brand-font-size: #{$navbar-brand-font-size};
--#{$variable-prefix}navbar-brand-color: #{$navbar-light-brand-color};
--#{$variable-prefix}navbar-brand-hover-color: #{$navbar-light-brand-hover-color};
--#{$variable-prefix}navbar-nav-link-padding-x: #{$navbar-nav-link-padding-x};
--#{$variable-prefix}navbar-toggler-padding-y: #{$navbar-toggler-padding-y};
--#{$variable-prefix}navbar-toggler-padding-x: #{$navbar-toggler-padding-x};
--#{$variable-prefix}navbar-toggler-font-size: #{$navbar-toggler-font-size};
--#{$variable-prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-light-toggler-icon-bg)};
--#{$variable-prefix}navbar-toggler-border-color: #{$navbar-light-toggler-border-color};
--#{$variable-prefix}navbar-toggler-border-radius: #{$navbar-toggler-border-radius};
--#{$variable-prefix}navbar-toggler-focus-width: #{$navbar-toggler-focus-width};
--#{$variable-prefix}navbar-toggler-transition: #{$navbar-toggler-transition};
--#{$prefix}navbar-padding-x: #{if($navbar-padding-x == null, 0, $navbar-padding-x)};
--#{$prefix}navbar-padding-y: #{$navbar-padding-y};
--#{$prefix}navbar-color: #{$navbar-light-color};
--#{$prefix}navbar-hover-color: #{$navbar-light-hover-color};
--#{$prefix}navbar-disabled-color: #{$navbar-light-disabled-color};
--#{$prefix}navbar-active-color: #{$navbar-light-active-color};
--#{$prefix}navbar-brand-padding-y: #{$navbar-brand-padding-y};
--#{$prefix}navbar-brand-margin-end: #{$navbar-brand-margin-end};
--#{$prefix}navbar-brand-font-size: #{$navbar-brand-font-size};
--#{$prefix}navbar-brand-color: #{$navbar-light-brand-color};
--#{$prefix}navbar-brand-hover-color: #{$navbar-light-brand-hover-color};
--#{$prefix}navbar-nav-link-padding-x: #{$navbar-nav-link-padding-x};
--#{$prefix}navbar-toggler-padding-y: #{$navbar-toggler-padding-y};
--#{$prefix}navbar-toggler-padding-x: #{$navbar-toggler-padding-x};
--#{$prefix}navbar-toggler-font-size: #{$navbar-toggler-font-size};
--#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-light-toggler-icon-bg)};
--#{$prefix}navbar-toggler-border-color: #{$navbar-light-toggler-border-color};
--#{$prefix}navbar-toggler-border-radius: #{$navbar-toggler-border-radius};
--#{$prefix}navbar-toggler-focus-width: #{$navbar-toggler-focus-width};
--#{$prefix}navbar-toggler-transition: #{$navbar-toggler-transition};
// scss-docs-end navbar-css-vars
position: relative;
@ -32,7 +32,7 @@
flex-wrap: wrap; // allow us to do the line break for collapsing content
align-items: center;
justify-content: space-between; // space out brand from logo
padding: var(--#{$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();
// Because flex properties aren't inherited, we need to redeclare these first
@ -63,17 +63,17 @@
// Used for brand, project, or site names.
.navbar-brand {
padding-top: var(--#{$variable-prefix}navbar-brand-padding-y);
padding-bottom: var(--#{$variable-prefix}navbar-brand-padding-y);
margin-right: var(--#{$variable-prefix}navbar-brand-margin-end);
@include font-size(var(--#{$variable-prefix}navbar-brand-font-size));
color: var(--#{$variable-prefix}navbar-brand-color);
padding-top: var(--#{$prefix}navbar-brand-padding-y);
padding-bottom: var(--#{$prefix}navbar-brand-padding-y);
margin-right: var(--#{$prefix}navbar-brand-margin-end);
@include font-size(var(--#{$prefix}navbar-brand-font-size));
color: var(--#{$prefix}navbar-brand-color);
text-decoration: if($link-decoration == none, null, none);
white-space: nowrap;
&:hover,
&: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);
}
}
@ -93,21 +93,21 @@
.nav-link {
padding-right: 0;
padding-left: 0;
color: var(--#{$variable-prefix}navbar-color);
color: var(--#{$prefix}navbar-color);
&:hover,
&:focus {
color: var(--#{$variable-prefix}navbar-hover-color);
color: var(--#{$prefix}navbar-hover-color);
}
&.disabled {
color: var(--#{$variable-prefix}navbar-disabled-color);
color: var(--#{$prefix}navbar-disabled-color);
}
}
.show > .nav-link,
.nav-link.active {
color: var(--#{$variable-prefix}navbar-active-color);
color: var(--#{$prefix}navbar-active-color);
}
.dropdown-menu {
@ -123,12 +123,12 @@
.navbar-text {
padding-top: $nav-link-padding-y;
padding-bottom: $nav-link-padding-y;
color: var(--#{$variable-prefix}navbar-color);
color: var(--#{$prefix}navbar-color);
a,
a:hover,
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
.navbar-toggler {
padding: var(--#{$variable-prefix}navbar-toggler-padding-y) var(--#{$variable-prefix}navbar-toggler-padding-x);
@include font-size(var(--#{$variable-prefix}navbar-toggler-font-size));
padding: var(--#{$prefix}navbar-toggler-padding-y) var(--#{$prefix}navbar-toggler-padding-x);
@include font-size(var(--#{$prefix}navbar-toggler-font-size));
line-height: 1;
color: var(--#{$variable-prefix}navbar-color);
color: var(--#{$prefix}navbar-color);
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
@include border-radius(var(--#{$variable-prefix}navbar-toggler-border-radius));
@include transition(var(--#{$variable-prefix}navbar-toggler-transition));
border: var(--#{$prefix}border-width) solid var(--#{$prefix}navbar-toggler-border-color); // remove default button style
@include border-radius(var(--#{$prefix}navbar-toggler-border-radius));
@include transition(var(--#{$prefix}navbar-toggler-transition));
&:hover {
text-decoration: none;
@ -167,7 +167,7 @@
&:focus {
text-decoration: none;
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;
height: 1.5em;
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-position: center;
background-size: 100%;
}
.navbar-nav-scroll {
max-height: var(--#{$variable-prefix}scroll-height, 75vh);
max-height: var(--#{$prefix}scroll-height, 75vh);
overflow-y: auto;
}
@ -211,8 +211,8 @@
}
.nav-link {
padding-right: var(--#{$variable-prefix}navbar-nav-link-padding-x);
padding-left: var(--#{$variable-prefix}navbar-nav-link-padding-x);
padding-right: var(--#{$prefix}navbar-nav-link-padding-x);
padding-left: var(--#{$prefix}navbar-nav-link-padding-x);
}
}
@ -280,12 +280,12 @@
}
.navbar-dark {
--#{$variable-prefix}navbar-color: #{$navbar-dark-color};
--#{$variable-prefix}navbar-hover-color: #{$navbar-dark-hover-color};
--#{$variable-prefix}navbar-disabled-color: #{$navbar-dark-disabled-color};
--#{$variable-prefix}navbar-active-color: #{$navbar-dark-active-color};
--#{$variable-prefix}navbar-brand-color: #{$navbar-dark-brand-color};
--#{$variable-prefix}navbar-brand-hover-color: #{$navbar-dark-brand-hover-color};
--#{$variable-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-color: #{$navbar-dark-color};
--#{$prefix}navbar-hover-color: #{$navbar-dark-hover-color};
--#{$prefix}navbar-disabled-color: #{$navbar-dark-disabled-color};
--#{$prefix}navbar-active-color: #{$navbar-dark-active-color};
--#{$prefix}navbar-brand-color: #{$navbar-dark-brand-color};
--#{$prefix}navbar-brand-hover-color: #{$navbar-dark-brand-hover-color};
--#{$prefix}navbar-toggler-border-color: #{$navbar-dark-toggler-border-color};
--#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-dark-toggler-icon-bg)};
}

78
scss/_pagination.scss
View File

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

120
scss/_popover.scss
View File

@ -2,49 +2,49 @@
.popover {
// scss-docs-start popover-css-vars
--#{$variable-prefix}popover-zindex: #{$zindex-popover};
--#{$variable-prefix}popover-max-width: #{$popover-max-width};
@include rfs($popover-font-size, --#{$variable-prefix}popover-font-size);
--#{$variable-prefix}popover-bg: #{$popover-bg};
--#{$variable-prefix}popover-border-width: #{$popover-border-width};
--#{$variable-prefix}popover-border-color: #{$popover-border-color};
--#{$variable-prefix}popover-border-radius: #{$popover-border-radius};
--#{$variable-prefix}popover-box-shadow: #{$popover-box-shadow};
--#{$variable-prefix}popover-header-padding-x: #{$popover-header-padding-x};
--#{$variable-prefix}popover-header-padding-y: #{$popover-header-padding-y};
--#{$variable-prefix}popover-header-color: #{$popover-header-color};
--#{$variable-prefix}popover-header-bg: #{$popover-header-bg};
--#{$variable-prefix}popover-body-padding-x: #{$popover-body-padding-x};
--#{$variable-prefix}popover-body-padding-y: #{$popover-body-padding-y};
--#{$variable-prefix}popover-body-color: #{$popover-body-color};
--#{$variable-prefix}popover-arrow-width: #{$popover-arrow-width};
--#{$variable-prefix}popover-arrow-height: #{$popover-arrow-height};
--#{$variable-prefix}popover-arrow-border: var(--#{$variable-prefix}popover-border-color);
--#{$prefix}popover-zindex: #{$zindex-popover};
--#{$prefix}popover-max-width: #{$popover-max-width};
@include rfs($popover-font-size, --#{$prefix}popover-font-size);
--#{$prefix}popover-bg: #{$popover-bg};
--#{$prefix}popover-border-width: #{$popover-border-width};
--#{$prefix}popover-border-color: #{$popover-border-color};
--#{$prefix}popover-border-radius: #{$popover-border-radius};
--#{$prefix}popover-box-shadow: #{$popover-box-shadow};
--#{$prefix}popover-header-padding-x: #{$popover-header-padding-x};
--#{$prefix}popover-header-padding-y: #{$popover-header-padding-y};
--#{$prefix}popover-header-color: #{$popover-header-color};
--#{$prefix}popover-header-bg: #{$popover-header-bg};
--#{$prefix}popover-body-padding-x: #{$popover-body-padding-x};
--#{$prefix}popover-body-padding-y: #{$popover-body-padding-y};
--#{$prefix}popover-body-color: #{$popover-body-color};
--#{$prefix}popover-arrow-width: #{$popover-arrow-width};
--#{$prefix}popover-arrow-height: #{$popover-arrow-height};
--#{$prefix}popover-arrow-border: var(--#{$prefix}popover-border-color);
// scss-docs-end popover-css-vars
position: absolute;
top: 0;
left: 0 #{"/* rtl:ignore */"};
z-index: var(--#{$variable-prefix}popover-zindex);
z-index: var(--#{$prefix}popover-zindex);
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.
// So reset our font and text properties to avoid inheriting weird values.
@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
word-wrap: break-word;
background-color: var(--#{$variable-prefix}popover-bg);
background-color: var(--#{$prefix}popover-bg);
background-clip: padding-box;
border: var(--#{$variable-prefix}popover-border-width) solid var(--#{$variable-prefix}popover-border-color);
@include border-radius(var(--#{$variable-prefix}popover-border-radius));
@include box-shadow(var(--#{$variable-prefix}popover-box-shadow));
border: var(--#{$prefix}popover-border-width) solid var(--#{$prefix}popover-border-color);
@include border-radius(var(--#{$prefix}popover-border-radius));
@include box-shadow(var(--#{$prefix}popover-box-shadow));
.popover-arrow {
position: absolute;
display: block;
width: var(--#{$variable-prefix}popover-arrow-width);
height: var(--#{$variable-prefix}popover-arrow-height);
width: var(--#{$prefix}popover-arrow-width);
height: var(--#{$prefix}popover-arrow-height);
&::before,
&::after {
@ -60,21 +60,21 @@
.bs-popover-top {
> .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,
&::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 {
bottom: 0;
border-top-color: var(--#{$variable-prefix}popover-arrow-border);
border-top-color: var(--#{$prefix}popover-arrow-border);
}
&::after {
bottom: var(--#{$variable-prefix}popover-border-width);
border-top-color: var(--#{$variable-prefix}popover-bg);
bottom: var(--#{$prefix}popover-border-width);
border-top-color: var(--#{$prefix}popover-bg);
}
}
}
@ -82,23 +82,23 @@
/* rtl:begin:ignore */
.bs-popover-end {
> .popover-arrow {
left: calc((var(--#{$variable-prefix}popover-arrow-height)) * -1); // stylelint-disable-line function-disallowed-list
width: var(--#{$variable-prefix}popover-arrow-height);
height: var(--#{$variable-prefix}popover-arrow-width);
left: calc((var(--#{$prefix}popover-arrow-height)) * -1); // stylelint-disable-line function-disallowed-list
width: var(--#{$prefix}popover-arrow-height);
height: var(--#{$prefix}popover-arrow-width);
&::before,
&::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 {
left: 0;
border-right-color: var(--#{$variable-prefix}popover-arrow-border);
border-right-color: var(--#{$prefix}popover-arrow-border);
}
&::after {
left: var(--#{$variable-prefix}popover-border-width);
border-right-color: var(--#{$variable-prefix}popover-bg);
left: var(--#{$prefix}popover-border-width);
border-right-color: var(--#{$prefix}popover-bg);
}
}
}
@ -107,21 +107,21 @@
.bs-popover-bottom {
> .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,
&::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 {
top: 0;
border-bottom-color: var(--#{$variable-prefix}popover-arrow-border);
border-bottom-color: var(--#{$prefix}popover-arrow-border);
}
&::after {
top: var(--#{$variable-prefix}popover-border-width);
border-bottom-color: var(--#{$variable-prefix}popover-bg);
top: var(--#{$prefix}popover-border-width);
border-bottom-color: var(--#{$prefix}popover-bg);
}
}
@ -131,33 +131,33 @@
top: 0;
left: 50%;
display: block;
width: var(--#{$variable-prefix}popover-arrow-width);
margin-left: calc(var(--#{$variable-prefix}popover-arrow-width) * -.5); // stylelint-disable-line function-disallowed-list
width: var(--#{$prefix}popover-arrow-width);
margin-left: calc(var(--#{$prefix}popover-arrow-width) * -.5); // stylelint-disable-line function-disallowed-list
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 */
.bs-popover-start {
> .popover-arrow {
right: calc((var(--#{$variable-prefix}popover-arrow-height)) * -1); // stylelint-disable-line function-disallowed-list
width: var(--#{$variable-prefix}popover-arrow-height);
height: var(--#{$variable-prefix}popover-arrow-width);
right: calc((var(--#{$prefix}popover-arrow-height)) * -1); // stylelint-disable-line function-disallowed-list
width: var(--#{$prefix}popover-arrow-height);
height: var(--#{$prefix}popover-arrow-width);
&::before,
&::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 {
right: 0;
border-left-color: var(--#{$variable-prefix}popover-arrow-border);
border-left-color: var(--#{$prefix}popover-arrow-border);
}
&::after {
right: var(--#{$variable-prefix}popover-border-width);
border-left-color: var(--#{$variable-prefix}popover-bg);
right: var(--#{$prefix}popover-border-width);
border-left-color: var(--#{$prefix}popover-bg);
}
}
}
@ -181,12 +181,12 @@
// Offset the popover to account for the popover arrow
.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
@include font-size($font-size-base);
color: var(--#{$variable-prefix}popover-header-color);
background-color: var(--#{$variable-prefix}popover-header-bg);
border-bottom: var(--#{$variable-prefix}popover-border-width) solid var(--#{$variable-prefix}popover-border-color);
color: var(--#{$prefix}popover-header-color);
background-color: var(--#{$prefix}popover-header-bg);
border-bottom: var(--#{$prefix}popover-border-width) solid var(--#{$prefix}popover-border-color);
@include border-top-radius($popover-inner-border-radius);
&:empty {
@ -195,6 +195,6 @@
}
.popover-body {
padding: var(--#{$variable-prefix}popover-body-padding-y) var(--#{$variable-prefix}popover-body-padding-x);
color: var(--#{$variable-prefix}popover-body-color);
padding: var(--#{$prefix}popover-body-padding-y) var(--#{$prefix}popover-body-padding-x);
color: var(--#{$prefix}popover-body-color);
}

26
scss/_reboot.scss
View File

@ -27,7 +27,7 @@
:root {
@if $font-size-root != null {
font-size: var(--#{$variable-prefix}root-font-size);
font-size: var(--#{$prefix}root-font-size);
}
@if $enable-smooth-scroll {
@ -48,13 +48,13 @@
// scss-docs-start reboot-body-rules
body {
margin: 0; // 1
font-family: var(--#{$variable-prefix}body-font-family);
font-size: var(--#{$variable-prefix}body-font-size);
font-weight: var(--#{$variable-prefix}body-font-weight);
line-height: var(--#{$variable-prefix}body-line-height);
color: var(--#{$variable-prefix}body-color);
text-align: var(--#{$variable-prefix}body-text-align);
background-color: var(--#{$variable-prefix}body-bg); // 2
font-family: var(--#{$prefix}body-font-family);
font-size: var(--#{$prefix}body-font-size);
font-weight: var(--#{$prefix}body-font-weight);
line-height: var(--#{$prefix}body-line-height);
color: var(--#{$prefix}body-color);
text-align: var(--#{$prefix}body-text-align);
background-color: var(--#{$prefix}body-bg); // 2
-webkit-text-size-adjust: 100%; // 3
-webkit-tap-highlight-color: rgba($black, 0); // 4
}
@ -87,7 +87,7 @@ hr {
font-style: $headings-font-style;
font-weight: $headings-font-weight;
line-height: $headings-line-height;
color: $headings-color;
color: var(--#{$prefix}heading-color);
}
h1 {
@ -219,7 +219,7 @@ small {
mark {
padding: $mark-padding;
background-color: $mark-bg;
background-color: var(--#{$prefix}highlight-bg);
}
@ -243,11 +243,11 @@ sup { top: -.5em; }
// Links
a {
color: $link-color;
color: var(--#{$prefix}link-color);
text-decoration: $link-decoration;
&:hover {
color: $link-hover-color;
color: var(--#{$prefix}link-hover-color);
text-decoration: $link-hover-decoration;
}
}
@ -298,7 +298,7 @@ pre {
code {
@include font-size($code-font-size);
color: $code-color;
color: var(--#{$prefix}code-color);
word-wrap: break-word;
// 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 {
// Note: Custom variable values only support SassScript inside `#{}`.
@ -6,57 +8,70 @@
// Generate palettes for full colors, grays, and theme colors.
@each $color, $value in $colors {
--#{$variable-prefix}#{$color}: #{$value};
--#{$prefix}#{$color}: #{$value};
}
@each $color, $value in $grays {
--#{$variable-prefix}gray-#{$color}: #{$value};
--#{$prefix}gray-#{$color}: #{$value};
}
@each $color, $value in $theme-colors {
--#{$variable-prefix}#{$color}: #{$value};
--#{$prefix}#{$color}: #{$value};
}
@each $color, $value in $theme-colors-rgb {
--#{$variable-prefix}#{$color}-rgb: #{$value};
--#{$prefix}#{$color}-rgb: #{$value};
}
--#{$variable-prefix}white-rgb: #{to-rgb($white)};
--#{$variable-prefix}black-rgb: #{to-rgb($black)};
--#{$variable-prefix}body-color-rgb: #{to-rgb($body-color)};
--#{$variable-prefix}body-bg-rgb: #{to-rgb($body-bg)};
--#{$prefix}white-rgb: #{to-rgb($white)};
--#{$prefix}black-rgb: #{to-rgb($black)};
--#{$prefix}body-color-rgb: #{to-rgb($body-color)};
--#{$prefix}body-bg-rgb: #{to-rgb($body-bg)};
// Fonts
// Note: Use `inspect` for lists so that quoted items keep the quotes.
// See https://github.com/sass/sass/issues/2383#issuecomment-336349172
--#{$variable-prefix}font-sans-serif: #{inspect($font-family-sans-serif)};
--#{$variable-prefix}font-monospace: #{inspect($font-family-monospace)};
--#{$variable-prefix}gradient: #{$gradient};
--#{$prefix}font-sans-serif: #{inspect($font-family-sans-serif)};
--#{$prefix}font-monospace: #{inspect($font-family-monospace)};
--#{$prefix}gradient: #{$gradient};
// Root and body
// stylelint-disable custom-property-empty-line-before
// scss-docs-start root-body-variables
@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};
@include rfs($font-size-base, --#{$variable-prefix}body-font-size);
--#{$variable-prefix}body-font-weight: #{$font-weight-base};
--#{$variable-prefix}body-line-height: #{$line-height-base};
--#{$variable-prefix}body-color: #{$body-color};
--#{$prefix}body-font-family: #{$font-family-base};
@include rfs($font-size-base, --#{$prefix}body-font-size);
--#{$prefix}body-font-weight: #{$font-weight-base};
--#{$prefix}body-line-height: #{$line-height-base};
--#{$prefix}body-color: #{$body-color};
@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-start root-border-var
--#{$variable-prefix}border-width: #{$border-width};
--#{$variable-prefix}border-style: solid;
--#{$variable-prefix}border-color: #{$border-color};
--#{$variable-prefix}border-radius: #{$border-radius};
--#{$variable-prefix}border-opacity: 1;
--#{$prefix}border-width: #{$border-width};
--#{$prefix}border-style: #{$border-style};
--#{$prefix}border-color: #{$border-color};
--#{$prefix}border-radius: #{$border-radius};
--#{$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
// 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 {
--#{$variable-prefix}table-color: #{$table-color};
--#{$variable-prefix}table-bg: #{$table-bg};
--#{$variable-prefix}table-border-color: #{$table-border-color};
--#{$variable-prefix}table-accent-bg: #{$table-accent-bg};
--#{$variable-prefix}table-striped-color: #{$table-striped-color};
--#{$variable-prefix}table-striped-bg: #{$table-striped-bg};
--#{$variable-prefix}table-active-color: #{$table-active-color};
--#{$variable-prefix}table-active-bg: #{$table-active-bg};
--#{$variable-prefix}table-hover-color: #{$table-hover-color};
--#{$variable-prefix}table-hover-bg: #{$table-hover-bg};
--#{$prefix}table-color: #{$table-color};
--#{$prefix}table-bg: #{$table-bg};
--#{$prefix}table-border-color: #{$table-border-color};
--#{$prefix}table-accent-bg: #{$table-accent-bg};
--#{$prefix}table-striped-color: #{$table-striped-color};
--#{$prefix}table-striped-bg: #{$table-striped-bg};
--#{$prefix}table-active-color: #{$table-active-color};
--#{$prefix}table-active-bg: #{$table-active-bg};
--#{$prefix}table-hover-color: #{$table-hover-color};
--#{$prefix}table-hover-bg: #{$table-hover-bg};
width: 100%;
margin-bottom: $spacer;
color: var(--#{$variable-prefix}table-color);
color: var(--#{$prefix}table-color);
vertical-align: $table-cell-vertical-align;
border-color: var(--#{$variable-prefix}table-border-color);
border-color: var(--#{$prefix}table-border-color);
// Target th & td
// We need the child combinator to prevent styles leaking to nested tables which doesn't have a `.table` class.
@ -27,9 +27,9 @@
// stylelint-disable-next-line selector-max-universal
> :not(caption) > * > * {
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;
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 {
@ -104,16 +104,16 @@
// For rows
.table-striped {
> tbody > tr:nth-of-type(#{$table-striped-order}) > * {
--#{$variable-prefix}table-accent-bg: var(--#{$variable-prefix}table-striped-bg);
color: var(--#{$variable-prefix}table-striped-color);
--#{$prefix}table-accent-bg: var(--#{$prefix}table-striped-bg);
color: var(--#{$prefix}table-striped-color);
}
}
// For columns
.table-striped-columns {
> :not(caption) > tr > :nth-child(#{$table-striped-columns-order}) {
--#{$variable-prefix}table-accent-bg: var(--#{$variable-prefix}table-striped-bg);
color: var(--#{$variable-prefix}table-striped-color);
--#{$prefix}table-accent-bg: var(--#{$prefix}table-striped-bg);
color: var(--#{$prefix}table-striped-color);
}
}
@ -122,8 +122,8 @@
// The `.table-active` class can be added to highlight rows or cells
.table-active {
--#{$variable-prefix}table-accent-bg: var(--#{$variable-prefix}table-active-bg);
color: var(--#{$variable-prefix}table-active-color);
--#{$prefix}table-accent-bg: var(--#{$prefix}table-active-bg);
color: var(--#{$prefix}table-active-color);
}
// Hover effect
@ -132,8 +132,8 @@
.table-hover {
> tbody > tr:hover > * {
--#{$variable-prefix}table-accent-bg: var(--#{$variable-prefix}table-hover-bg);
color: var(--#{$variable-prefix}table-hover-color);
--#{$prefix}table-accent-bg: var(--#{$prefix}table-hover-bg);
color: var(--#{$prefix}table-hover-color);
}
}

78
scss/_tooltip.scss
View File

@ -3,39 +3,39 @@
// Base class
.tooltip {
// scss-docs-start tooltip-css-vars
--#{$variable-prefix}tooltip-zindex: #{$zindex-tooltip};
--#{$variable-prefix}tooltip-max-width: #{$tooltip-max-width};
--#{$variable-prefix}tooltip-padding-x: #{$tooltip-padding-x};
--#{$variable-prefix}tooltip-padding-y: #{$tooltip-padding-y};
--#{$variable-prefix}tooltip-margin: #{$tooltip-margin};
@include rfs($tooltip-font-size, --#{$variable-prefix}tooltip-font-size);
--#{$variable-prefix}tooltip-color: #{$tooltip-color};
--#{$variable-prefix}tooltip-bg: #{$tooltip-bg};
--#{$variable-prefix}tooltip-border-radius: #{$tooltip-border-radius};
--#{$variable-prefix}tooltip-opacity: #{$tooltip-opacity};
--#{$variable-prefix}tooltip-arrow-width: #{$tooltip-arrow-width};
--#{$variable-prefix}tooltip-arrow-height: #{$tooltip-arrow-height};
--#{$prefix}tooltip-zindex: #{$zindex-tooltip};
--#{$prefix}tooltip-max-width: #{$tooltip-max-width};
--#{$prefix}tooltip-padding-x: #{$tooltip-padding-x};
--#{$prefix}tooltip-padding-y: #{$tooltip-padding-y};
--#{$prefix}tooltip-margin: #{$tooltip-margin};
@include rfs($tooltip-font-size, --#{$prefix}tooltip-font-size);
--#{$prefix}tooltip-color: #{$tooltip-color};
--#{$prefix}tooltip-bg: #{$tooltip-bg};
--#{$prefix}tooltip-border-radius: #{$tooltip-border-radius};
--#{$prefix}tooltip-opacity: #{$tooltip-opacity};
--#{$prefix}tooltip-arrow-width: #{$tooltip-arrow-width};
--#{$prefix}tooltip-arrow-height: #{$tooltip-arrow-height};
// scss-docs-end tooltip-css-vars
position: absolute;
z-index: var(--#{$variable-prefix}tooltip-zindex);
z-index: var(--#{$prefix}tooltip-zindex);
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.
// So reset our font and text properties to avoid inheriting weird values.
@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
word-wrap: break-word;
opacity: 0;
&.show { opacity: var(--#{$variable-prefix}tooltip-opacity); }
&.show { opacity: var(--#{$prefix}tooltip-opacity); }
.tooltip-arrow {
position: absolute;
display: block;
width: var(--#{$variable-prefix}tooltip-arrow-width);
height: var(--#{$variable-prefix}tooltip-arrow-height);
width: var(--#{$prefix}tooltip-arrow-width);
height: var(--#{$prefix}tooltip-arrow-height);
&::before {
position: absolute;
@ -47,32 +47,32 @@
}
.bs-tooltip-top {
padding: var(--#{$variable-prefix}tooltip-arrow-height) 0;
padding: var(--#{$prefix}tooltip-arrow-height) 0;
.tooltip-arrow {
bottom: 0;
&::before {
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-top-color: var(--#{$variable-prefix}tooltip-bg);
border-width: var(--#{$prefix}tooltip-arrow-height) calc(var(--#{$prefix}tooltip-arrow-width) * .5) 0; // stylelint-disable-line function-disallowed-list
border-top-color: var(--#{$prefix}tooltip-bg);
}
}
}
/* rtl:begin:ignore */
.bs-tooltip-end {
padding: 0 var(--#{$variable-prefix}tooltip-arrow-height);
padding: 0 var(--#{$prefix}tooltip-arrow-height);
.tooltip-arrow {
left: 0;
width: var(--#{$variable-prefix}tooltip-arrow-height);
height: var(--#{$variable-prefix}tooltip-arrow-width);
width: var(--#{$prefix}tooltip-arrow-height);
height: var(--#{$prefix}tooltip-arrow-width);
&::before {
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-right-color: var(--#{$variable-prefix}tooltip-bg);
border-width: calc(var(--#{$prefix}tooltip-arrow-width) * .5) var(--#{$prefix}tooltip-arrow-height) calc(var(--#{$prefix}tooltip-arrow-width) * .5) 0; // stylelint-disable-line function-disallowed-list
border-right-color: var(--#{$prefix}tooltip-bg);
}
}
}
@ -80,32 +80,32 @@
/* rtl:end:ignore */
.bs-tooltip-bottom {
padding: var(--#{$variable-prefix}tooltip-arrow-height) 0;
padding: var(--#{$prefix}tooltip-arrow-height) 0;
.tooltip-arrow {
top: 0;
&::before {
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-bottom-color: var(--#{$variable-prefix}tooltip-bg);
border-width: 0 calc(var(--#{$prefix}tooltip-arrow-width) * .5) var(--#{$prefix}tooltip-arrow-height); // stylelint-disable-line function-disallowed-list
border-bottom-color: var(--#{$prefix}tooltip-bg);
}
}
}
/* rtl:begin:ignore */
.bs-tooltip-start {
padding: 0 var(--#{$variable-prefix}tooltip-arrow-height);
padding: 0 var(--#{$prefix}tooltip-arrow-height);
.tooltip-arrow {
right: 0;
width: var(--#{$variable-prefix}tooltip-arrow-height);
height: var(--#{$variable-prefix}tooltip-arrow-width);
width: var(--#{$prefix}tooltip-arrow-height);
height: var(--#{$prefix}tooltip-arrow-width);
&::before {
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-left-color: var(--#{$variable-prefix}tooltip-bg);
border-width: calc(var(--#{$prefix}tooltip-arrow-width) * .5) 0 calc(var(--#{$prefix}tooltip-arrow-width) * .5) var(--#{$prefix}tooltip-arrow-height); // stylelint-disable-line function-disallowed-list
border-left-color: var(--#{$prefix}tooltip-bg);
}
}
}
@ -129,10 +129,10 @@
// Wrapper for the tooltip content
.tooltip-inner {
max-width: var(--#{$variable-prefix}tooltip-max-width);
padding: var(--#{$variable-prefix}tooltip-padding-y) var(--#{$variable-prefix}tooltip-padding-x);
color: var(--#{$variable-prefix}tooltip-color);
max-width: var(--#{$prefix}tooltip-max-width);
padding: var(--#{$prefix}tooltip-padding-y) var(--#{$prefix}tooltip-padding-x);
color: var(--#{$prefix}tooltip-color);
text-align: center;
background-color: var(--#{$variable-prefix}tooltip-bg);
border-radius: var(--#{$variable-prefix}tooltip-border-radius, 0); // stylelint-disable-line property-disallowed-list
background-color: var(--#{$prefix}tooltip-bg);
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
),
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,
)
),
@ -120,7 +120,7 @@ $utilities: map-merge(
"border-top": (
property: border-top,
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,
)
),
@ -128,14 +128,14 @@ $utilities: map-merge(
property: border-right,
class: border-end,
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,
)
),
"border-bottom": (
property: border-bottom,
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,
)
),
@ -143,7 +143,7 @@ $utilities: map-merge(
property: border-left,
class: border-start,
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,
)
),
@ -457,7 +457,7 @@ $utilities: map-merge(
"font-family": (
property: font-family,
class: font,
values: (monospace: var(--#{$variable-prefix}font-monospace))
values: (monospace: var(--#{$prefix}font-monospace))
),
"font-size": (
rfs: true,
@ -583,7 +583,7 @@ $utilities: map-merge(
"gradient": (
property: background-image,
class: bg,
values: (gradient: var(--#{$variable-prefix}gradient))
values: (gradient: var(--#{$prefix}gradient))
),
// scss-docs-start utils-interaction
"user-select": (
@ -601,36 +601,36 @@ $utilities: map-merge(
property: border-radius,
class: rounded,
values: (
null: $border-radius,
null: var(--#{$prefix}border-radius),
0: 0,
1: $border-radius-sm,
2: $border-radius,
3: $border-radius-lg,
4: $border-radius-xl,
5: $border-radius-2xl,
1: var(--#{$prefix}border-radius-sm),
2: var(--#{$prefix}border-radius),
3: var(--#{$prefix}border-radius-lg),
4: var(--#{$prefix}border-radius-xl),
5: var(--#{$prefix}border-radius-2xl),
circle: 50%,
pill: $border-radius-pill
pill: var(--#{$prefix}border-radius-pill)
)
),
"rounded-top": (
property: border-top-left-radius border-top-right-radius,
class: rounded-top,
values: (null: $border-radius)
values: (null: var(--#{$prefix}border-radius))
),
"rounded-end": (
property: border-top-right-radius border-bottom-right-radius,
class: rounded-end,
values: (null: $border-radius)
values: (null: var(--#{$prefix}border-radius))
),
"rounded-bottom": (
property: border-bottom-right-radius border-bottom-left-radius,
class: rounded-bottom,
values: (null: $border-radius)
values: (null: var(--#{$prefix}border-radius))
),
"rounded-start": (
property: border-bottom-left-radius border-top-left-radius,
class: rounded-start,
values: (null: $border-radius)
values: (null: var(--#{$prefix}border-radius))
),
// scss-docs-end utils-border-radius
// 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
$variable-prefix: bs- !default;
$variable-prefix: bs- !default; // Deprecated in v5.2.0 for the shorter `$prefix`
$prefix: $variable-prefix !default;
// Gradient
//
@ -484,6 +485,7 @@ $border-widths: (
5: 5px
) !default;
$border-style: solid !default;
$border-color: rgba($black, .15) !default;
// 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-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
// stylelint-enable value-keyword-case
$font-family-base: var(--#{$variable-prefix}font-sans-serif) !default;
$font-family-code: var(--#{$variable-prefix}font-monospace) !default;
$font-family-base: var(--#{$prefix}font-sans-serif) !default;
$font-family-code: var(--#{$prefix}font-monospace) !default;
// $font-size-root affects the value of `rem`, which is used for as well font sizes, paddings, and margins
// $font-size-base affects the font size of the body text
@ -612,7 +614,7 @@ $small-font-size: .875em !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;
@ -630,22 +632,19 @@ $hr-height: null !default; // Deprecated in v5.2.0
// fusv-enable
$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;
$legend-margin-bottom: .5rem !default;
$legend-font-size: 1.5rem !default;
$legend-font-weight: null !default;
$mark-padding: .2em !default;
$dt-font-weight: $font-weight-bold !default;
$nested-kbd-font-weight: $font-weight-bold !default;
$list-inline-padding: .5rem !default;
$mark-bg: #fcf8e3 !default;
$mark-padding: .1875em !default;
$mark-bg: $yellow-100 !default;
// scss-docs-end type-variables
@ -661,7 +660,7 @@ $table-cell-padding-x-sm: .25rem !default;
$table-cell-vertical-align: top !default;
$table-color: $body-color !default;
$table-color: var(--#{$prefix}body-color) !default;
$table-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-border-factor: .1 !default;
$table-border-width: $border-width !default;
$table-border-color: $border-color !default;
$table-border-width: var(--#{$prefix}border-width) !default;
$table-border-color: var(--#{$prefix}border-color) !default;
$table-striped-order: odd !default;
$table-striped-columns-order: even !default;
@ -1062,14 +1061,14 @@ $nav-link-transition: color .15s ease-in-out, background-color .15
$nav-link-disabled-color: $gray-600 !default;
$nav-tabs-border-color: $gray-300 !default;
$nav-tabs-border-radius: $border-radius !default;
$nav-tabs-border-width: var(--#{$variable-prefix}border-width) !default;
$nav-tabs-border-width: var(--#{$prefix}border-width) !default;
$nav-tabs-border-radius: var(--#{$prefix}border-radius) !default;
$nav-tabs-link-hover-border-color: $gray-200 $gray-200 $nav-tabs-border-color !default;
$nav-tabs-link-active-color: $gray-700 !default;
$nav-tabs-link-active-bg: $body-bg !default;
$nav-tabs-link-active-border-color: $gray-300 $gray-300 $nav-tabs-link-active-bg !default;
$nav-pills-border-radius: $border-radius !default;
$nav-pills-border-radius: var(--#{$prefix}border-radius) !default;
$nav-pills-link-active-color: $component-active-color !default;
$nav-pills-link-active-bg: $component-active-bg !default;
// scss-docs-end nav-variables
@ -1133,8 +1132,8 @@ $dropdown-font-size: $font-size-base !default;
$dropdown-color: $body-color !default;
$dropdown-bg: $white !default;
$dropdown-border-color: rgba($black, .15) !default;
$dropdown-border-radius: $border-radius !default;
$dropdown-border-width: var(--#{$variable-prefix}border-width) !default;
$dropdown-border-radius: var(--#{$prefix}border-radius) !default;
$dropdown-border-width: var(--#{$prefix}border-width) !default;
$dropdown-inner-border-radius: subtract($dropdown-border-radius, $dropdown-border-width) !default;
$dropdown-divider-bg: $dropdown-border-color !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-bg: $white !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-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-border-radius-sm: $border-radius-sm !default;
$pagination-border-radius-lg: $border-radius-lg !default;
$pagination-border-radius-sm: var(--#{$prefix}border-radius-sm) !default;
$pagination-border-radius-lg: var(--#{$prefix}border-radius-lg) !default;
// scss-docs-end pagination-variables
@ -1230,9 +1229,9 @@ $placeholder-opacity-min: .2 !default;
$card-spacer-y: $spacer !default;
$card-spacer-x: $spacer !default;
$card-title-spacer-y: $spacer * .5 !default;
$card-border-radius: $border-radius !default;
$card-border-width: var(--#{$variable-prefix}border-width) !default;
$card-border-color: var(--#{$variable-prefix}border-color) !default;
$card-border-width: var(--#{$prefix}border-width) !default;
$card-border-color: var(--#{$prefix}border-color) !default;
$card-border-radius: var(--#{$prefix}border-radius) !default;
$card-box-shadow: null !default;
$card-inner-border-radius: subtract($card-border-radius, $card-border-width) !default;
$card-cap-padding-y: $card-spacer-y * .5 !default;
@ -1253,9 +1252,9 @@ $accordion-padding-y: 1rem !default;
$accordion-padding-x: 1.25rem !default;
$accordion-color: $body-color !default;
$accordion-bg: $body-bg !default;
$accordion-border-radius: $border-radius !default;
$accordion-border-width: var(--#{$variable-prefix}border-width) !default;
$accordion-border-color: var(--#{$variable-prefix}border-color) !default;
$accordion-border-width: var(--#{$prefix}border-width) !default;
$accordion-border-color: var(--#{$prefix}border-color) !default;
$accordion-border-radius: var(--#{$prefix}border-radius) !default;
$accordion-inner-border-radius: subtract($accordion-border-radius, $accordion-border-width) !default;
$accordion-body-padding-y: $accordion-padding-y !default;
@ -1289,7 +1288,7 @@ $tooltip-font-size: $font-size-sm !default;
$tooltip-max-width: 200px !default;
$tooltip-color: $white !default;
$tooltip-bg: $black !default;
$tooltip-border-radius: $border-radius !default;
$tooltip-border-radius: var(--#{$prefix}border-radius) !default;
$tooltip-opacity: .9 !default;
$tooltip-padding-y: $spacer * .25 !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-bg: $white !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-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-box-shadow: $box-shadow !default;
@ -1354,9 +1353,9 @@ $toast-padding-y: .5rem !default;
$toast-font-size: .875rem !default;
$toast-color: null !default;
$toast-background-color: rgba($white, .85) !default;
$toast-border-radius: $border-radius !default;
$toast-border-width: var(--#{$variable-prefix}border-width) !default;
$toast-border-color: var(--#{$variable-prefix}border-color) !default;
$toast-border-width: var(--#{$prefix}border-width) !default;
$toast-border-color: var(--#{$prefix}border-color) !default;
$toast-border-radius: var(--#{$prefix}border-radius) !default;
$toast-box-shadow: $box-shadow !default;
$toast-spacing: $container-padding-x !default;
@ -1374,7 +1373,7 @@ $badge-font-weight: $font-weight-bold !default;
$badge-color: $white !default;
$badge-padding-y: .35em !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
@ -1392,16 +1391,16 @@ $modal-title-line-height: $line-height-base !default;
$modal-content-color: null !default;
$modal-content-bg: $white !default;
$modal-content-border-radius: $border-radius-lg !default;
$modal-content-border-color: var(--#{$variable-prefix}border-color) !default;
$modal-content-border-width: var(--#{$variable-prefix}border-width) !default;
$modal-content-border-color: var(--#{$prefix}border-color) !default;
$modal-content-border-width: var(--#{$prefix}border-width) !default;
$modal-content-border-radius: var(--#{$prefix}border-radius-lg) !default;
$modal-content-inner-border-radius: subtract($modal-content-border-radius, $modal-content-border-width) !default;
$modal-content-box-shadow-xs: $box-shadow-sm !default;
$modal-content-box-shadow-sm-up: $box-shadow !default;
$modal-backdrop-bg: $black !default;
$modal-backdrop-opacity: .5 !default;
$modal-header-border-color: 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-header-border-width: $modal-content-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-x: $spacer !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-border-width: $border-width !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-font-size: $font-size-base * .75 !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-bar-color: $white !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-bg: $white !default;
$list-group-border-color: rgba($black, .125) !default;
$list-group-border-radius: $border-radius !default;
$list-group-border-width: var(--#{$variable-prefix}border-width) !default;
$list-group-border-width: var(--#{$prefix}border-width) !default;
$list-group-border-radius: var(--#{$prefix}border-radius) !default;
$list-group-item-padding-y: $spacer * .5 !default;
$list-group-item-padding-x: $spacer !default;
@ -1490,9 +1489,9 @@ $list-group-action-active-bg: $gray-200 !default;
// scss-docs-start thumbnail-variables
$thumbnail-padding: .25rem !default;
$thumbnail-bg: $body-bg !default;
$thumbnail-border-radius: $border-radius !default;
$thumbnail-border-width: var(--#{$variable-prefix}border-width) !default;
$thumbnail-border-color: var(--#{$variable-prefix}border-color) !default;
$thumbnail-border-width: var(--#{$prefix}border-width) !default;
$thumbnail-border-color: var(--#{$prefix}border-color) !default;
$thumbnail-border-radius: var(--#{$prefix}border-radius) !default;
$thumbnail-box-shadow: $box-shadow-sm !default;
// scss-docs-end thumbnail-variables
@ -1614,10 +1613,11 @@ $offcanvas-backdrop-opacity: $modal-backdrop-opacity !default;
$code-font-size: $small-font-size !default;
$code-color: $pink !default;
$kbd-padding-y: .2rem !default;
$kbd-padding-x: .4rem !default;
$kbd-padding-y: .1875rem !default;
$kbd-padding-x: .375rem !default;
$kbd-font-size: $code-font-size !default;
$kbd-color: $white !default;
$kbd-bg: $gray-900 !default;
$kbd-color: var(--#{$prefix}body-bg) !default;
$kbd-bg: var(--#{$prefix}body-color) !default;
$nested-kbd-font-weight: null !default; // Deprecated in v5.2.0, removing in v6
$pre-color: null !default;

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

@ -65,7 +65,7 @@
&[type="checkbox"] {
@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 {
background-image: escape-svg($form-check-input-checked-bg-image);
}
@ -73,7 +73,7 @@
&[type="radio"] {
@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 {
background-image: escape-svg($form-check-radio-checked-bg-image);
}
@ -85,7 +85,7 @@
border-color: $form-check-input-indeterminate-border-color;
@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 {
background-image: escape-svg($form-check-input-indeterminate-bg-image);
}
@ -136,7 +136,7 @@
background-position: $form-switch-checked-bg-position;
@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 {
background-image: escape-svg($form-switch-checked-bg-image);
}

4
scss/helpers/_ratio.scss
View File

@ -6,7 +6,7 @@
&::before {
display: block;
padding-top: var(--#{$variable-prefix}aspect-ratio);
padding-top: var(--#{$prefix}aspect-ratio);
content: "";
}
@ -21,6 +21,6 @@
@each $key, $ratio in $aspect-ratios {
.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
@mixin alert-variant($background, $border, $color) {
--#{$variable-prefix}alert-color: #{$color};
--#{$variable-prefix}alert-bg: #{$background};
--#{$variable-prefix}alert-border-color: #{$border};
--#{$prefix}alert-color: #{$color};
--#{$prefix}alert-bg: #{$background};
--#{$prefix}alert-border-color: #{$border};
@if $enable-gradients {
background-image: var(--#{$variable-prefix}gradient);
background-image: var(--#{$prefix}gradient);
}
.alert-link {

62
scss/mixins/_buttons.scss
View File

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

8
scss/mixins/_container.scss
View File

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

2
scss/mixins/_gradients.scss
View File

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

20
scss/mixins/_grid.scss
View File

@ -3,14 +3,14 @@
// Generate semantic grid columns with these mixins.
@mixin make-row($gutter: $grid-gutter-width) {
--#{$variable-prefix}gutter-x: #{$gutter};
--#{$variable-prefix}gutter-y: 0;
--#{$prefix}gutter-x: #{$gutter};
--#{$prefix}gutter-y: 0;
display: flex;
flex-wrap: wrap;
// 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-right: calc(-.5 * var(--#{$variable-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-top: calc(-1 * var(--#{$prefix}gutter-y)); // stylelint-disable-line function-disallowed-list
margin-right: calc(-.5 * var(--#{$prefix}gutter-x)); // stylelint-disable-line function-disallowed-list
margin-left: calc(-.5 * var(--#{$prefix}gutter-x)); // stylelint-disable-line function-disallowed-list
}
@mixin make-col-ready() {
@ -22,9 +22,9 @@
flex-shrink: 0;
width: 100%;
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-left: calc(var(--#{$variable-prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list
margin-top: var(--#{$variable-prefix}gutter-y);
padding-right: calc(var(--#{$prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list
padding-left: calc(var(--#{$prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list
margin-top: var(--#{$prefix}gutter-y);
}
@mixin make-col($size: false, $columns: $grid-columns) {
@ -114,12 +114,12 @@
@each $key, $value in $gutters {
.g#{$infix}-#{$key},
.gx#{$infix}-#{$key} {
--#{$variable-prefix}gutter-x: #{$value};
--#{$prefix}gutter-x: #{$value};
}
.g#{$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
@mixin pagination-size($padding-y, $padding-x, $font-size, $border-radius) {
--#{$variable-prefix}pagination-padding-x: #{$padding-x};
--#{$variable-prefix}pagination-padding-y: #{$padding-y};
@include rfs($font-size, --#{$variable-prefix}pagination-font-size);
--#{$variable-prefix}pagination-border-radius: #{$border-radius}; // stylelint-disable-line custom-property-empty-line-before
--#{$prefix}pagination-padding-x: #{$padding-x};
--#{$prefix}pagination-padding-y: #{$padding-y};
@include rfs($font-size, --#{$prefix}pagination-font-size);
--#{$prefix}pagination-border-radius: #{$border-radius}; // stylelint-disable-line custom-property-empty-line-before
}
// 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));
$border-color: mix($color, $background, percentage($table-border-factor));
--#{$variable-prefix}table-color: #{$color};
--#{$variable-prefix}table-bg: #{$background};
--#{$variable-prefix}table-border-color: #{$border-color};
--#{$variable-prefix}table-striped-bg: #{$striped-bg};
--#{$variable-prefix}table-striped-color: #{color-contrast($striped-bg)};
--#{$variable-prefix}table-active-bg: #{$active-bg};
--#{$variable-prefix}table-active-color: #{color-contrast($active-bg)};
--#{$variable-prefix}table-hover-bg: #{$hover-bg};
--#{$variable-prefix}table-hover-color: #{color-contrast($hover-bg)};
--#{$prefix}table-color: #{$color};
--#{$prefix}table-bg: #{$background};
--#{$prefix}table-border-color: #{$border-color};
--#{$prefix}table-striped-bg: #{$striped-bg};
--#{$prefix}table-striped-color: #{color-contrast($striped-bg)};
--#{$prefix}table-active-bg: #{$active-bg};
--#{$prefix}table-active-color: #{color-contrast($active-bg)};
--#{$prefix}table-hover-bg: #{$hover-bg};
--#{$prefix}table-hover-color: #{color-contrast($hover-bg)};
color: var(--#{$variable-prefix}table-color);
border-color: var(--#{$variable-prefix}table-border-color);
color: var(--#{$prefix}table-color);
border-color: var(--#{$prefix}table-border-color);
}
}
// scss-docs-end table-variant

6
scss/mixins/_utilities.scss
View File

@ -55,12 +55,12 @@
@if $is-css-var {
.#{$property-class + $infix + $property-class-modifier} {
--#{$variable-prefix}#{$css-variable-name}: #{$value};
--#{$prefix}#{$css-variable-name}: #{$value};
}
@each $pseudo in $state {
.#{$property-class + $infix + $property-class-modifier}-#{$pseudo}:#{$pseudo} {
--#{$variable-prefix}#{$css-variable-name}: #{$value};
--#{$prefix}#{$css-variable-name}: #{$value};
}
}
} @else {
@ -68,7 +68,7 @@
@each $property in $properties {
@if $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);

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

@ -194,7 +194,7 @@
width: 10rem;
color: $gray-600;
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 {
display: flex;
@ -280,7 +280,7 @@
.bd-example-border-utils-0 {
[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.
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