},
{
"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",
},
{
"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",
.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
.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
.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);
}
}
.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);
}
}
&: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);
}
}
}
&: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);
}
}
// 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;
// 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);
}
}
top: auto;
bottom: 100%;
margin-top: 0;
- margin-bottom: var(--#{$variable-prefix}dropdown-spacer);
+ margin-bottom: var(--#{$prefix}dropdown-spacer);
}
.dropdown-toggle {
right: auto;
left: 100%;
margin-top: 0;
- margin-left: var(--#{$variable-prefix}dropdown-spacer);
+ margin-left: var(--#{$prefix}dropdown-spacer);
}
.dropdown-toggle {
right: 100%;
left: auto;
margin-top: 0;
- margin-right: var(--#{$variable-prefix}dropdown-spacer);
+ margin-right: var(--#{$prefix}dropdown-spacer);
}
.dropdown-toggle {
// 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
}
.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
// 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
// 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
}
// 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));
}
}
@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;
}
@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();
}
.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;
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
// 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);
}
}
.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 {
.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);
}
}
// 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;
&: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);
}
}
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;
}
}
.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);
}
}
}
.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)};
}
.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;
.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);
}
}
@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));
}
}
}
.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 {
.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);
}
}
}
/* 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);
}
}
}
.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);
}
}
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);
}
}
}
// 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 {
}
.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);
}
: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 {
// 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
}
font-style: $headings-font-style;
font-weight: $headings-font-weight;
line-height: $headings-line-height;
- color: $headings-color;
+ color: var(--#{$prefix}heading-color);
}
h1 {
mark {
padding: $mark-padding;
- background-color: $mark-bg;
+ background-color: var(--#{$prefix}highlight-bg);
}
// 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;
}
}
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
+// stylelint-disable custom-property-empty-line-before
+
:root {
// Note: Custom variable values only support SassScript inside `#{}`.
// 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};
}
//
.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.
// 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 {
// 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);
}
}
// 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
.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);
}
}
// 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;
}
.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);
}
}
}
/* 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);
}
}
}
// 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
}
"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,
)
),
"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,
)
),
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,
)
),
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,
)
),
"font-family": (
property: font-family,
class: font,
- values: (monospace: var(--#{$variable-prefix}font-monospace))
+ values: (monospace: var(--#{$prefix}font-monospace))
),
"font-size": (
rfs: true,
"gradient": (
property: background-image,
class: bg,
- values: (gradient: var(--#{$variable-prefix}gradient))
+ values: (gradient: var(--#{$prefix}gradient))
),
// scss-docs-start utils-interaction
"user-select": (
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
// 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
//
5: 5px
) !default;
+$border-style: solid !default;
$border-color: rgba($black, .15) !default;
// scss-docs-end border-variables
$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
$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;
// 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
$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;
$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;
$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
$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;
$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;
$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
$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;
$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;
$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;
$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;
$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;
$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
$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;
$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;
$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;
$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;
// 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
$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;
&[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);
}
&[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);
}
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);
}
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);
}
&::before {
display: block;
- padding-top: var(--#{$variable-prefix}aspect-ratio);
+ padding-top: var(--#{$prefix}aspect-ratio);
content: "";
}
@each $key, $ratio in $aspect-ratios {
.ratio-#{$key} {
- --#{$variable-prefix}aspect-ratio: #{$ratio};
+ --#{$prefix}aspect-ratio: #{$ratio};
}
}
// 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 {
$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
$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
// 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;
}
background-color: $color;
@if $enable-gradients {
- background-image: var(--#{$variable-prefix}gradient);
+ background-image: var(--#{$prefix}gradient);
}
}
// scss-docs-end gradient-bg-mixin
// 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() {
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) {
@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};
}
}
}
// 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
$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
@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 {
@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);
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;
.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);
}
}
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
projects / thirdparty / bootstrap.git / commitdiff
