+import postcssPrefixCustomProperties from 'postcss-prefix-custom-properties'
+import autoprefixer from 'autoprefixer'
+
const mapConfig = {
inline: false,
annotation: true,
export default context => {
return {
map: context.file.dirname.includes('examples') ? false : mapConfig,
- plugins: {
- autoprefixer: {
- cascade: false
- }
- }
+ plugins: [
+ postcssPrefixCustomProperties({
+ prefix: 'bs-',
+ ignore: [/^--bs-/, /^--bd-/]
+ }),
+ autoprefixer({ cascade: false })
+ ]
}
}
}
],
"license": "MIT",
+ "dependencies": {
+ "postcss-prefix-custom-properties": "^0.1.0"
+ },
"devDependencies": {
"@astrojs/check": "^0.9.6",
"@astrojs/markdown-remark": "^6.3.10",
}
}
},
+ "node_modules/@astrojs/language-server/node_modules/volar-service-emmet": {
+ "version": "0.0.63",
+ "resolved": "https://registry.npmjs.org/volar-service-emmet/-/volar-service-emmet-0.0.63.tgz",
+ "integrity": "sha512-dP96bxXsbfWH8D4n+jWnFD/zVDnm+1LgCV12yIwPIhmpJyElEnzmaKR7EGBZVf3tIkKmUObnU8YATZBn5iG9eQ==",
+ "dev": true,
+ "license": "MIT",
+ "dependencies": {
+ "@emmetio/css-parser": "^0.4.0",
+ "@emmetio/html-matcher": "^1.3.0",
+ "@vscode/emmet-helper": "^2.9.3",
+ "vscode-uri": "^3.0.8"
+ },
+ "peerDependencies": {
+ "@volar/language-service": "~2.4.0"
+ },
+ "peerDependenciesMeta": {
+ "@volar/language-service": {
+ "optional": true
+ }
+ }
+ },
"node_modules/@astrojs/markdown-remark": {
"version": "6.3.10",
"resolved": "https://registry.npmjs.org/@astrojs/markdown-remark/-/markdown-remark-6.3.10.tgz",
"version": "3.3.11",
"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
"integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==",
- "dev": true,
"funding": [
{
"type": "github",
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
"integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
- "dev": true,
"license": "ISC"
},
"node_modules/picomatch": {
"version": "8.5.6",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz",
"integrity": "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==",
- "dev": true,
"funding": [
{
"type": "opencollective",
"dev": true,
"license": "MIT"
},
+ "node_modules/postcss-prefix-custom-properties": {
+ "version": "0.1.0",
+ "resolved": "https://registry.npmjs.org/postcss-prefix-custom-properties/-/postcss-prefix-custom-properties-0.1.0.tgz",
+ "integrity": "sha512-sAKQSRw+KTl9G549Q9awV/ra06fOZNEIVIIRTwiSTbvkV1t8z7WPqNQ5XBbxF1fV2mp0yQFObavc5J/GxP0a6g==",
+ "license": "MIT",
+ "dependencies": {
+ "postcss-value-parser": "^4.2.0"
+ },
+ "peerDependencies": {
+ "postcss": "^8.4.0"
+ }
+ },
"node_modules/postcss-reporter": {
"version": "7.1.0",
"resolved": "https://registry.npmjs.org/postcss-reporter/-/postcss-reporter-7.1.0.tgz",
"version": "4.2.0",
"resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
"integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
- "dev": true,
"license": "MIT"
},
"node_modules/preact": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
"integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
- "dev": true,
"license": "BSD-3-Clause",
"engines": {
"node": ">=0.10.0"
}
}
},
- "node_modules/volar-service-emmet": {
- "version": "0.0.67",
- "resolved": "https://registry.npmjs.org/volar-service-emmet/-/volar-service-emmet-0.0.67.tgz",
- "integrity": "sha512-UDBL5x7KptmuJZNCCXMlCndMhFult/tj+9jXq3FH1ZGS1E4M/1U5hC06pg1c6e4kn+vnR6bqmvX0vIhL4f98+A==",
- "dev": true,
- "license": "MIT",
- "dependencies": {
- "@emmetio/css-parser": "^0.4.1",
- "@emmetio/html-matcher": "^1.3.0",
- "@vscode/emmet-helper": "^2.9.3",
- "vscode-uri": "^3.0.8"
- },
- "peerDependencies": {
- "@volar/language-service": "~2.4.0"
- },
- "peerDependenciesMeta": {
- "@volar/language-service": {
- "optional": true
- }
- }
- },
"node_modules/volar-service-html": {
"version": "0.0.67",
"resolved": "https://registry.npmjs.org/volar-service-html/-/volar-service-html-0.0.67.tgz",
"peerDependencies": {
"@floating-ui/dom": "^1.7.0"
}
+ },
+ "overrides": {
+ "volar-service-emmet": "0.0.63"
+ },
+ "dependencies": {
+ "postcss-prefix-custom-properties": "^0.1.0"
}
}
// scss-docs-start accordion-variables
$accordion-padding-y: 1rem !default;
$accordion-padding-x: 1.25rem !default;
-$accordion-color: var(--#{$prefix}color-body) !default;
-$accordion-bg: var(--#{$prefix}bg-body) !default;
-$accordion-border-width: var(--#{$prefix}border-width) !default;
-$accordion-border-color: var(--#{$prefix}border-color) !default;
-$accordion-border-radius: var(--#{$prefix}border-radius-lg) !default;
+$accordion-color: var(--color-body) !default;
+$accordion-bg: var(--bg-body) !default;
+$accordion-border-width: var(--border-width) !default;
+$accordion-border-color: var(--border-color) !default;
+$accordion-border-radius: var(--border-radius-lg) !default;
$accordion-inner-border-radius: calc(#{$accordion-border-radius} - #{$accordion-border-width}) !default;
$accordion-body-padding-y: $accordion-padding-y !default;
$accordion-button-padding-y: $accordion-padding-y !default;
$accordion-button-padding-x: $accordion-padding-x !default;
-$accordion-button-color: var(--#{$prefix}fg-2) !default;
-$accordion-button-bg: var(--#{$prefix}accordion-bg) !default;
+$accordion-button-color: var(--fg-2) !default;
+$accordion-button-bg: var(--accordion-bg) !default;
$accordion-transition: $btn-transition, border-radius .15s ease !default;
-$accordion-button-active-bg: var(--#{$prefix}bg-2) !default;
-$accordion-button-active-color: var(--#{$prefix}fg) !default;
+$accordion-button-active-bg: var(--bg-2) !default;
+$accordion-button-active-color: var(--fg) !default;
$accordion-icon-width: 1.25rem !default;
$accordion-icon-transition: transform .2s ease-in-out !default;
@layer componenents {
.accordion {
// scss-docs-start accordion-css-vars
- --#{$prefix}accordion-color: #{$accordion-color};
- --#{$prefix}accordion-bg: #{$accordion-bg};
- --#{$prefix}accordion-transition: #{$accordion-transition};
- --#{$prefix}accordion-border-color: #{$accordion-border-color};
- --#{$prefix}accordion-border-width: #{$accordion-border-width};
- --#{$prefix}accordion-border-radius: #{$accordion-border-radius};
- --#{$prefix}accordion-inner-border-radius: #{$accordion-inner-border-radius};
- --#{$prefix}accordion-btn-padding-x: #{$accordion-button-padding-x};
- --#{$prefix}accordion-btn-padding-y: #{$accordion-button-padding-y};
- --#{$prefix}accordion-btn-color: #{$accordion-button-color};
- --#{$prefix}accordion-btn-bg: #{$accordion-button-bg};
- --#{$prefix}accordion-btn-icon: #{escape-svg($accordion-button-icon)};
- --#{$prefix}accordion-btn-icon-width: #{$accordion-icon-width};
- --#{$prefix}accordion-btn-icon-transform: #{$accordion-icon-transform};
- --#{$prefix}accordion-btn-icon-transition: #{$accordion-icon-transition};
- --#{$prefix}accordion-body-padding-x: #{$accordion-body-padding-x};
- --#{$prefix}accordion-body-padding-y: #{$accordion-body-padding-y};
- --#{$prefix}accordion-active-color: #{$accordion-button-active-color};
- --#{$prefix}accordion-active-bg: #{$accordion-button-active-bg};
+ --accordion-color: #{$accordion-color};
+ --accordion-bg: #{$accordion-bg};
+ --accordion-transition: #{$accordion-transition};
+ --accordion-border-color: #{$accordion-border-color};
+ --accordion-border-width: #{$accordion-border-width};
+ --accordion-border-radius: #{$accordion-border-radius};
+ --accordion-inner-border-radius: #{$accordion-inner-border-radius};
+ --accordion-btn-padding-x: #{$accordion-button-padding-x};
+ --accordion-btn-padding-y: #{$accordion-button-padding-y};
+ --accordion-btn-color: #{$accordion-button-color};
+ --accordion-btn-bg: #{$accordion-button-bg};
+ --accordion-btn-icon: #{escape-svg($accordion-button-icon)};
+ --accordion-btn-icon-width: #{$accordion-icon-width};
+ --accordion-btn-icon-transform: #{$accordion-icon-transform};
+ --accordion-btn-icon-transition: #{$accordion-icon-transition};
+ --accordion-body-padding-x: #{$accordion-body-padding-x};
+ --accordion-body-padding-y: #{$accordion-body-padding-y};
+ --accordion-active-color: #{$accordion-button-active-color};
+ --accordion-active-bg: #{$accordion-button-active-bg};
// scss-docs-end accordion-css-vars
}
display: flex;
align-items: center;
width: 100%;
- padding: var(--#{$prefix}accordion-btn-padding-y) var(--#{$prefix}accordion-btn-padding-x);
+ padding: var(--accordion-btn-padding-y) var(--accordion-btn-padding-x);
font-size: $font-size-base;
- color: var(--#{$prefix}accordion-btn-color);
+ color: var(--accordion-btn-color);
text-align: start; // Reset button style
- background-color: var(--#{$prefix}accordion-btn-bg);
+ background-color: var(--accordion-btn-bg);
border: 0;
@include border-radius(0);
overflow-anchor: none;
- @include transition(var(--#{$prefix}accordion-transition));
+ @include transition(var(--accordion-transition));
&:not(.collapsed) {
- color: var(--#{$prefix}accordion-active-color);
- background-color: var(--#{$prefix}accordion-active-bg);
- box-shadow: inset 0 calc(-1 * var(--#{$prefix}accordion-border-width)) 0 var(--#{$prefix}accordion-border-color);
+ color: var(--accordion-active-color);
+ background-color: var(--accordion-active-bg);
+ box-shadow: inset 0 calc(-1 * var(--accordion-border-width)) 0 var(--accordion-border-color);
&::after {
- background-image: var(--#{$prefix}accordion-btn-active-icon);
- transform: var(--#{$prefix}accordion-btn-icon-transform);
+ background-image: var(--accordion-btn-active-icon);
+ transform: var(--accordion-btn-icon-transform);
}
}
// Accordion icon
&::after {
flex-shrink: 0;
- width: var(--#{$prefix}accordion-btn-icon-width);
- height: var(--#{$prefix}accordion-btn-icon-width);
+ width: var(--accordion-btn-icon-width);
+ height: var(--accordion-btn-icon-width);
margin-inline-start: auto;
content: "";
- background-color: var(--#{$prefix}accordion-btn-color);
- mask: var(--#{$prefix}accordion-btn-icon) no-repeat center 100%;
- @include transition(var(--#{$prefix}accordion-btn-icon-transition));
+ background-color: var(--accordion-btn-color);
+ mask: var(--accordion-btn-icon) no-repeat center 100%;
+ @include transition(var(--accordion-btn-icon-transition));
}
&:hover {
}
.accordion-item {
- color: var(--#{$prefix}accordion-color);
- background-color: var(--#{$prefix}accordion-bg);
- border: var(--#{$prefix}accordion-border-width) solid var(--#{$prefix}accordion-border-color);
+ color: var(--accordion-color);
+ background-color: var(--accordion-bg);
+ border: var(--accordion-border-width) solid var(--accordion-border-color);
&:first-of-type {
- @include border-top-radius(var(--#{$prefix}accordion-border-radius));
+ @include border-top-radius(var(--accordion-border-radius));
> .accordion-header .accordion-button {
- @include border-top-radius(var(--#{$prefix}accordion-inner-border-radius));
+ @include border-top-radius(var(--accordion-inner-border-radius));
}
}
// Only set a border-radius on the last item if the accordion is collapsed
&:last-of-type {
- @include border-bottom-radius(var(--#{$prefix}accordion-border-radius));
+ @include border-bottom-radius(var(--accordion-border-radius));
> .accordion-header .accordion-button {
&.collapsed {
- @include border-bottom-radius(var(--#{$prefix}accordion-inner-border-radius));
+ @include border-bottom-radius(var(--accordion-inner-border-radius));
}
}
> .accordion-collapse {
- @include border-bottom-radius(var(--#{$prefix}accordion-border-radius));
+ @include border-bottom-radius(var(--accordion-border-radius));
}
}
}
.accordion-body {
- padding: var(--#{$prefix}accordion-body-padding-y) var(--#{$prefix}accordion-body-padding-x);
+ padding: var(--accordion-body-padding-y) var(--accordion-body-padding-x);
}
// @if $enable-dark-mode {
// @include color-mode(dark) {
// .accordion-button::after {
- // --#{$prefix}accordion-btn-icon: #{escape-svg($accordion-button-icon-dark)};
- // --#{$prefix}accordion-btn-active-icon: #{escape-svg($accordion-button-active-icon-dark)};
+ // --accordion-btn-icon: #{escape-svg($accordion-button-icon-dark)};
+ // --accordion-btn-active-icon: #{escape-svg($accordion-button-active-icon-dark)};
// }
// }
// }
$alert-padding-y: $spacer !default;
$alert-padding-x: $spacer !default;
$alert-margin-bottom: 1rem !default;
-$alert-border-radius: var(--#{$prefix}border-radius) !default;
+$alert-border-radius: var(--border-radius) !default;
$alert-link-font-weight: $font-weight-bold !default;
-$alert-border-width: var(--#{$prefix}border-width) !default;
+$alert-border-width: var(--border-width) !default;
$alert-dismissible-padding-r: $alert-padding-x * 3 !default; // 3x covers width of x plus default padding on either side
// scss-docs-end alert-variables
@layer components {
.alert {
// scss-docs-start alert-css-vars
- --#{$prefix}alert-bg: var(--#{$prefix}theme-bg-subtle, 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: var(--#{$prefix}theme-text, inherit);
- --#{$prefix}alert-border-color: transparent;
- --#{$prefix}alert-border: #{$alert-border-width} solid var(--#{$prefix}theme-border, var(--#{$prefix}alert-border-color));
- --#{$prefix}alert-border-radius: #{$alert-border-radius};
- --#{$prefix}alert-link-color: inherit;
+ --alert-bg: var(--theme-bg-subtle, transparent);
+ --alert-padding-x: #{$alert-padding-x};
+ --alert-padding-y: #{$alert-padding-y};
+ --alert-margin-bottom: #{$alert-margin-bottom};
+ --alert-color: var(--theme-text, inherit);
+ --alert-border-color: transparent;
+ --alert-border: #{$alert-border-width} solid var(--theme-border, var(--alert-border-color));
+ --alert-border-radius: #{$alert-border-radius};
+ --alert-link-color: inherit;
// scss-docs-end alert-css-vars
position: relative;
- padding: var(--#{$prefix}alert-padding-y) var(--#{$prefix}alert-padding-x);
- // margin-bottom: var(--#{$prefix}alert-margin-bottom);
- color: var(--#{$prefix}alert-color);
- background-color: var(--#{$prefix}alert-bg);
- border: var(--#{$prefix}alert-border);
- @include border-radius(var(--#{$prefix}alert-border-radius));
+ padding: var(--alert-padding-y) var(--alert-padding-x);
+ // margin-bottom: var(--alert-margin-bottom);
+ color: var(--alert-color);
+ background-color: var(--alert-bg);
+ border: var(--alert-border);
+ @include border-radius(var(--alert-border-radius));
}
// Headings for larger alerts
// Provide class for links that match alerts
.alert-link {
font-weight: $alert-link-font-weight;
- color: var(--#{$prefix}alert-link-color);
+ color: var(--alert-link-color);
}
@use "sass:map";
-@use "config" as *;
@use "colors" as *;
@use "variables" as *;
@use "theme" as *;
$badge-color: inherit !default;
$badge-padding-y: .35em !default;
$badge-padding-x: .5em !default;
-$badge-border-radius: var(--#{$prefix}border-radius) !default;
+$badge-border-radius: var(--border-radius) !default;
// scss-docs-end badge-variables
// scss-docs-start badge-variants
@layer components {
.badge {
// scss-docs-start badge-css-vars
- --#{$prefix}badge-padding-x: #{$badge-padding-x};
- --#{$prefix}badge-padding-y: #{$badge-padding-y};
- --#{$prefix}badge-font-size: #{$badge-font-size};
- --#{$prefix}badge-font-weight: #{$badge-font-weight};
- --#{$prefix}badge-color: #{$badge-color};
- --#{$prefix}badge-bg: var(--#{$prefix}bg-2);
- --#{$prefix}badge-border-width: #{$border-width};
- --#{$prefix}badge-border-color: transparent;
- --#{$prefix}badge-border-radius: #{$badge-border-radius};
+ --badge-padding-x: #{$badge-padding-x};
+ --badge-padding-y: #{$badge-padding-y};
+ --badge-font-size: #{$badge-font-size};
+ --badge-font-weight: #{$badge-font-weight};
+ --badge-color: #{$badge-color};
+ --badge-bg: var(--bg-2);
+ --badge-border-width: #{$border-width};
+ --badge-border-color: transparent;
+ --badge-border-radius: #{$badge-border-radius};
// scss-docs-end badge-css-vars
display: inline-block;
- 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);
+ padding: var(--badge-padding-y) var(--badge-padding-x);
+ font-size: var(--badge-font-size);
+ font-weight: var(--badge-font-weight);
line-height: 1;
- color: var(--#{$prefix}theme-contrast, var(--#{$prefix}badge-color));
+ color: var(--theme-contrast, var(--badge-color));
text-align: center;
white-space: nowrap;
vertical-align: baseline;
- background-color: var(--#{$prefix}theme-bg, var(--#{$prefix}badge-bg));
- border: var(--#{$prefix}badge-border-width) solid var(--#{$prefix}badge-border-color);
- @include border-radius(var(--#{$prefix}badge-border-radius));
+ background-color: var(--theme-bg, var(--badge-bg));
+ border: var(--badge-border-width) solid var(--badge-border-color);
+ @include border-radius(var(--badge-border-radius));
@include gradient-bg();
// Empty badges collapse automatically
.badge-#{$variant} {
@each $property, $value in $properties {
@if $value == "transparent" {
- --#{$prefix}badge-#{$property}: transparent;
+ --badge-#{$property}: transparent;
} @else {
- --#{$prefix}badge-#{$property}: var(--#{$prefix}theme-#{$value});
+ --badge-#{$property}: var(--theme-#{$value});
}
}
- color: var(--#{$prefix}badge-color);
- background-color: var(--#{$prefix}badge-bg);
- border-color: var(--#{$prefix}badge-border-color);
+ color: var(--badge-color);
+ background-color: var(--badge-bg);
+ border-color: var(--badge-border-color);
}
}
// scss-docs-end badge-variant-loop
$breadcrumb-item-padding-x: .5rem !default;
$breadcrumb-margin-bottom: 1rem !default;
$breadcrumb-bg: null !default;
-$breadcrumb-divider-color: var(--#{$prefix}secondary-color) !default;
-$breadcrumb-active-color: var(--#{$prefix}secondary-color) !default;
+$breadcrumb-divider-color: var(--secondary-color) !default;
+$breadcrumb-active-color: var(--secondary-color) !default;
$breadcrumb-divider: string.quote("/") !default;
$breadcrumb-divider-flipped: $breadcrumb-divider !default;
$breadcrumb-border-radius: null !default;
@layer components {
.breadcrumb {
// scss-docs-start breadcrumb-css-vars
- --#{$prefix}breadcrumb-padding-x: #{$breadcrumb-padding-x};
- --#{$prefix}breadcrumb-padding-y: #{$breadcrumb-padding-y};
- --#{$prefix}breadcrumb-margin-bottom: #{$breadcrumb-margin-bottom};
- --#{$prefix}breadcrumb-font-size: #{$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};
+ --breadcrumb-padding-x: #{$breadcrumb-padding-x};
+ --breadcrumb-padding-y: #{$breadcrumb-padding-y};
+ --breadcrumb-margin-bottom: #{$breadcrumb-margin-bottom};
+ --breadcrumb-font-size: #{$breadcrumb-font-size};
+ --breadcrumb-bg: #{$breadcrumb-bg};
+ --breadcrumb-border-radius: #{$breadcrumb-border-radius};
+ --breadcrumb-divider-color: #{$breadcrumb-divider-color};
+ --breadcrumb-item-padding-x: #{$breadcrumb-item-padding-x};
+ --breadcrumb-item-active-color: #{$breadcrumb-active-color};
// scss-docs-end breadcrumb-css-vars
display: flex;
flex-wrap: wrap;
- padding: var(--#{$prefix}breadcrumb-padding-y) var(--#{$prefix}breadcrumb-padding-x);
- margin-bottom: var(--#{$prefix}breadcrumb-margin-bottom);
- font-size: var(--#{$prefix}breadcrumb-font-size);
+ padding: var(--breadcrumb-padding-y) var(--breadcrumb-padding-x);
+ margin-bottom: var(--breadcrumb-margin-bottom);
+ font-size: var(--breadcrumb-font-size);
list-style: none;
- background-color: var(--#{$prefix}breadcrumb-bg);
- @include border-radius(var(--#{$prefix}breadcrumb-border-radius));
+ background-color: var(--breadcrumb-bg);
+ @include border-radius(var(--breadcrumb-border-radius));
}
.breadcrumb-item {
// The separator between breadcrumbs (by default, a forward-slash: "/")
+ .breadcrumb-item {
- padding-inline-start: var(--#{$prefix}breadcrumb-item-padding-x);
+ padding-inline-start: var(--breadcrumb-item-padding-x);
&::before {
float: inline-start; // Suppress inline spacings and underlining of the separator
- padding-inline-end: var(--#{$prefix}breadcrumb-item-padding-x);
- color: var(--#{$prefix}breadcrumb-divider-color);
- content: var(--#{$prefix}breadcrumb-divider, escape-svg($breadcrumb-divider));
+ padding-inline-end: var(--breadcrumb-item-padding-x);
+ color: var(--breadcrumb-divider-color);
+ content: var(--breadcrumb-divider, escape-svg($breadcrumb-divider));
}
}
[dir="rtl"] &:not(:first-child)::before {
- content: var(--#{$prefix}breadcrumb-divider, escape-svg($breadcrumb-divider-flipped));
+ content: var(--breadcrumb-divider, escape-svg($breadcrumb-divider-flipped));
}
&.active {
- color: var(--#{$prefix}breadcrumb-item-active-color);
+ color: var(--breadcrumb-item-active-color);
}
}
}
$card-title-spacer-y: $spacer * .5 !default;
$card-title-color: null !default;
$card-subtitle-color: null !default;
-$card-border-width: var(--#{$prefix}border-width) !default;
-$card-border-color: var(--#{$prefix}border-color-translucent) !default;
-$card-border-radius: var(--#{$prefix}border-radius) !default;
+$card-border-width: var(--border-width) !default;
+$card-border-color: var(--border-color-translucent) !default;
+$card-border-radius: var(--border-radius) !default;
$card-box-shadow: null !default;
$card-inner-border-radius: calc(#{$card-border-radius} - #{$card-border-width}) !default;
$card-cap-padding-y: $card-spacer-y * .5 !default;
$card-cap-padding-x: $card-spacer-x !default;
-$card-cap-bg: rgba(var(--#{$prefix}body-color-rgb), .03) !default;
+$card-cap-bg: rgba(var(--body-color-rgb), .03) !default;
$card-cap-color: null !default;
$card-height: null !default;
$card-color: null !default;
-$card-bg: var(--#{$prefix}bg-body) !default;
+$card-bg: var(--bg-body) !default;
$card-img-overlay-padding: $spacer !default;
$card-group-margin: $grid-gutter-width * .5 !default;
// scss-docs-end card-variables
@layer components {
.card {
// scss-docs-start card-css-vars
- --#{$prefix}card-spacer-y: #{$card-spacer-y};
- --#{$prefix}card-spacer-x: #{$card-spacer-x};
- --#{$prefix}card-title-spacer-y: #{$card-title-spacer-y};
- --#{$prefix}card-title-color: #{$card-title-color};
- --#{$prefix}card-subtitle-color: #{$card-subtitle-color};
- --#{$prefix}card-border-width: #{$card-border-width};
- --#{$prefix}card-border-color: #{$card-border-color};
- --#{$prefix}card-border-radius: #{$card-border-radius};
- --#{$prefix}card-box-shadow: #{$card-box-shadow};
- --#{$prefix}card-inner-border-radius: #{$card-inner-border-radius};
- --#{$prefix}card-cap-padding-y: #{$card-cap-padding-y};
- --#{$prefix}card-cap-padding-x: #{$card-cap-padding-x};
- --#{$prefix}card-cap-bg: #{$card-cap-bg};
- --#{$prefix}card-cap-color: #{$card-cap-color};
- --#{$prefix}card-height: #{$card-height};
- --#{$prefix}card-color: #{$card-color};
- --#{$prefix}card-bg: #{$card-bg};
- --#{$prefix}card-img-overlay-padding: #{$card-img-overlay-padding};
- --#{$prefix}card-group-margin: #{$card-group-margin};
+ --card-spacer-y: #{$card-spacer-y};
+ --card-spacer-x: #{$card-spacer-x};
+ --card-title-spacer-y: #{$card-title-spacer-y};
+ --card-title-color: #{$card-title-color};
+ --card-subtitle-color: #{$card-subtitle-color};
+ --card-border-width: #{$card-border-width};
+ --card-border-color: #{$card-border-color};
+ --card-border-radius: #{$card-border-radius};
+ --card-box-shadow: #{$card-box-shadow};
+ --card-inner-border-radius: #{$card-inner-border-radius};
+ --card-cap-padding-y: #{$card-cap-padding-y};
+ --card-cap-padding-x: #{$card-cap-padding-x};
+ --card-cap-bg: #{$card-cap-bg};
+ --card-cap-color: #{$card-cap-color};
+ --card-height: #{$card-height};
+ --card-color: #{$card-color};
+ --card-bg: #{$card-bg};
+ --card-img-overlay-padding: #{$card-img-overlay-padding};
+ --card-group-margin: #{$card-group-margin};
// scss-docs-end card-css-vars
position: relative;
display: flex;
flex-direction: column;
min-width: 0; // See https://github.com/twbs/bootstrap/pull/22740#issuecomment-305868106
- height: var(--#{$prefix}card-height);
- color: var(--#{$prefix}color-body);
+ height: var(--card-height);
+ color: var(--color-body);
word-wrap: break-word;
- background-color: var(--#{$prefix}card-bg);
+ background-color: var(--card-bg);
background-clip: border-box;
- border: var(--#{$prefix}card-border-width) solid var(--#{$prefix}card-border-color);
- @include border-radius(var(--#{$prefix}card-border-radius));
- @include box-shadow(var(--#{$prefix}card-box-shadow));
+ border: var(--card-border-width) solid var(--card-border-color);
+ @include border-radius(var(--card-border-radius));
+ @include box-shadow(var(--card-box-shadow));
> hr {
margin-inline: 0;
&:first-child {
border-block-start-width: 0;
- @include border-top-radius(var(--#{$prefix}card-inner-border-radius));
+ @include border-top-radius(var(--card-inner-border-radius));
}
&:last-child {
border-block-end-width: 0;
- @include border-bottom-radius(var(--#{$prefix}card-inner-border-radius));
+ @include border-bottom-radius(var(--card-inner-border-radius));
}
}
// Enable `flex-grow: 1` for decks and groups so that card blocks take up
// as much space as possible, ensuring footers are aligned to the bottom.
flex: 1 1 auto;
- padding: var(--#{$prefix}card-spacer-y) var(--#{$prefix}card-spacer-x);
- color: var(--#{$prefix}card-color);
+ padding: var(--card-spacer-y) var(--card-spacer-x);
+ color: var(--card-color);
}
.card-title {
- margin-bottom: var(--#{$prefix}card-title-spacer-y);
- color: var(--#{$prefix}card-title-color);
+ margin-bottom: var(--card-title-spacer-y);
+ color: var(--card-title-color);
}
.card-subtitle {
- margin-top: calc(-.5 * var(--#{$prefix}card-title-spacer-y));
+ margin-top: calc(-.5 * var(--card-title-spacer-y));
margin-bottom: 0;
- color: var(--#{$prefix}card-subtitle-color);
+ color: var(--card-subtitle-color);
}
.card-text:last-child {
}
+ .card-link {
- margin-inline-start: var(--#{$prefix}card-spacer-x);
+ margin-inline-start: var(--card-spacer-x);
}
}
//
.card-header {
- padding: var(--#{$prefix}card-cap-padding-y) var(--#{$prefix}card-cap-padding-x);
+ padding: var(--card-cap-padding-y) var(--card-cap-padding-x);
margin-bottom: 0; // Removes the default margin-bottom of <hN>
- color: var(--#{$prefix}card-cap-color);
- background-color: var(--#{$prefix}card-cap-bg);
- border-block-end: var(--#{$prefix}card-border-width) solid var(--#{$prefix}card-border-color);
+ color: var(--card-cap-color);
+ background-color: var(--card-cap-bg);
+ border-block-end: var(--card-border-width) solid var(--card-border-color);
&:first-child {
- @include border-radius(var(--#{$prefix}card-inner-border-radius) var(--#{$prefix}card-inner-border-radius) 0 0);
+ @include border-radius(var(--card-inner-border-radius) var(--card-inner-border-radius) 0 0);
}
}
.card-footer {
- padding: var(--#{$prefix}card-cap-padding-y) var(--#{$prefix}card-cap-padding-x);
- color: var(--#{$prefix}card-cap-color);
- background-color: var(--#{$prefix}card-cap-bg);
- border-block-start: var(--#{$prefix}card-border-width) solid var(--#{$prefix}card-border-color);
+ padding: var(--card-cap-padding-y) var(--card-cap-padding-x);
+ color: var(--card-cap-color);
+ background-color: var(--card-cap-bg);
+ border-block-start: var(--card-border-width) solid var(--card-border-color);
&:last-child {
- @include border-radius(0 0 var(--#{$prefix}card-inner-border-radius) var(--#{$prefix}card-inner-border-radius));
+ @include border-radius(0 0 var(--card-inner-border-radius) var(--card-inner-border-radius));
}
}
//
.card-header-tabs {
- margin-inline: calc(-.5 * var(--#{$prefix}card-cap-padding-x));
- margin-bottom: calc(-1 * var(--#{$prefix}card-cap-padding-y));
+ margin-inline: calc(-.5 * var(--card-cap-padding-x));
+ margin-bottom: calc(-1 * var(--card-cap-padding-y));
border-block-end: 0;
.nav-link.active {
- background-color: var(--#{$prefix}card-bg);
- border-block-end-color: var(--#{$prefix}card-bg);
+ background-color: var(--card-bg);
+ border-block-end-color: var(--card-bg);
}
}
.card-header-pills {
- margin-inline: calc(-.5 * var(--#{$prefix}card-cap-padding-x));
+ margin-inline: calc(-.5 * var(--card-cap-padding-x));
}
// Card image
.card-img-overlay {
position: absolute;
inset: 0;
- padding: var(--#{$prefix}card-img-overlay-padding);
- @include border-radius(var(--#{$prefix}card-inner-border-radius));
+ padding: var(--card-img-overlay-padding);
+ @include border-radius(var(--card-inner-border-radius));
}
.card-img,
.card-img,
.card-img-top {
- @include border-top-radius(var(--#{$prefix}card-inner-border-radius));
+ @include border-top-radius(var(--card-inner-border-radius));
}
.card-img,
.card-img-bottom {
- @include border-bottom-radius(var(--#{$prefix}card-inner-border-radius));
+ @include border-bottom-radius(var(--card-inner-border-radius));
}
// The child selector allows nested `.card` within `.card-group`
// to display properly.
> .card {
- margin-bottom: var(--#{$prefix}card-group-margin);
+ margin-bottom: var(--card-group-margin);
}
@include media-breakpoint-up(sm) {
color: $carousel-control-color;
text-align: center;
background: none;
- filter: var(--#{$prefix}carousel-control-icon-filter);
+ filter: var(--carousel-control-icon-filter);
border: 0;
opacity: $carousel-control-opacity;
@include transition($carousel-control-transition);
margin-inline: $carousel-indicator-spacer;
text-indent: -999px;
cursor: pointer;
- background-color: var(--#{$prefix}carousel-indicator-active-bg);
+ background-color: var(--carousel-indicator-active-bg);
background-clip: padding-box;
border: 0;
// Use transparent borders to increase the hit area by 10px on top and bottom.
left: (100% - $carousel-caption-width) * .5;
padding-top: $carousel-caption-padding-y;
padding-bottom: $carousel-caption-padding-y;
- color: var(--#{$prefix}carousel-caption-color);
+ color: var(--carousel-caption-color);
text-align: center;
}
// Dark mode carousel
@mixin carousel-dark() {
- --#{$prefix}carousel-indicator-active-bg: #{$carousel-indicator-active-bg-dark};
- --#{$prefix}carousel-caption-color: #{$carousel-caption-color-dark};
- --#{$prefix}carousel-control-icon-filter: #{$carousel-control-icon-filter-dark};
+ --carousel-indicator-active-bg: #{$carousel-indicator-active-bg-dark};
+ --carousel-caption-color: #{$carousel-caption-color-dark};
+ --carousel-control-icon-filter: #{$carousel-control-icon-filter-dark};
}
.carousel-dark {
:root,
[data-bs-theme="light"] {
- --#{$prefix}carousel-indicator-active-bg: #{$carousel-indicator-active-bg};
- --#{$prefix}carousel-caption-color: #{$carousel-caption-color};
- --#{$prefix}carousel-control-icon-filter: #{$carousel-control-icon-filter};
+ --carousel-indicator-active-bg: #{$carousel-indicator-active-bg};
+ --carousel-caption-color: #{$carousel-caption-color};
+ --carousel-control-icon-filter: #{$carousel-control-icon-filter};
}
@if $enable-dark-mode {
:root {
@each $color, $hue in $hues {
- --#{$prefix}#{$color}-025: color-mix(in lab, #fff 94%, #{$hue});
- --#{$prefix}#{$color}-050: color-mix(in lab, #fff 90%, #{$hue});
- --#{$prefix}#{$color}-100: color-mix(in lab, #fff 80%, #{$hue});
- --#{$prefix}#{$color}-200: color-mix(in lab, #fff 60%, #{$hue});
- --#{$prefix}#{$color}-300: color-mix(in lab, #fff 40%, #{$hue});
- --#{$prefix}#{$color}-400: color-mix(in lab, #fff 20%, #{$hue});
- --#{$prefix}#{$color}-500: #{$hue};
- --#{$prefix}#{$color}-600: color-mix(in lab, #000 16%, #{$hue});
- --#{$prefix}#{$color}-700: color-mix(in lab, #000 32%, #{$hue});
- --#{$prefix}#{$color}-800: color-mix(in lab, #000 48%, #{$hue});
- --#{$prefix}#{$color}-900: color-mix(in lab, #000 64%, #{$hue});
- --#{$prefix}#{$color}-950: color-mix(in lab, #000 76%, #{$hue});
- --#{$prefix}#{$color}-975: color-mix(in lab, #000 88%, #{$hue});
+ --#{$color}-025: color-mix(in lab, #fff 94%, #{$hue});
+ --#{$color}-050: color-mix(in lab, #fff 90%, #{$hue});
+ --#{$color}-100: color-mix(in lab, #fff 80%, #{$hue});
+ --#{$color}-200: color-mix(in lab, #fff 60%, #{$hue});
+ --#{$color}-300: color-mix(in lab, #fff 40%, #{$hue});
+ --#{$color}-400: color-mix(in lab, #fff 20%, #{$hue});
+ --#{$color}-500: #{$hue};
+ --#{$color}-600: color-mix(in lab, #000 16%, #{$hue});
+ --#{$color}-700: color-mix(in lab, #000 32%, #{$hue});
+ --#{$color}-800: color-mix(in lab, #000 48%, #{$hue});
+ --#{$color}-900: color-mix(in lab, #000 64%, #{$hue});
+ --#{$color}-950: color-mix(in lab, #000 76%, #{$hue});
+ --#{$color}-975: color-mix(in lab, #000 88%, #{$hue});
}
}
//
// Variables and settings not related to theme, components, and more go here. It does include layout.
-$prefix: bs- !default;
-
$enable-caret: true !default;
$enable-rounded: true !default;
$enable-shadows: true !default;
$dialog-width-lg: 800px !default;
$dialog-width-xl: 1140px !default;
$dialog-margin: 1.75rem !default;
-$dialog-color: var(--#{$prefix}fg-body) !default;
-$dialog-bg: var(--#{$prefix}bg-body) !default;
-$dialog-border-color: var(--#{$prefix}border-color-translucent) !default;
-$dialog-border-width: var(--#{$prefix}border-width) !default;
-$dialog-border-radius: var(--#{$prefix}border-radius-lg) !default;
-$dialog-box-shadow: var(--#{$prefix}box-shadow-lg) !default;
+$dialog-color: var(--fg-body) !default;
+$dialog-bg: var(--bg-body) !default;
+$dialog-border-color: var(--border-color-translucent) !default;
+$dialog-border-width: var(--border-width) !default;
+$dialog-border-radius: var(--border-radius-lg) !default;
+$dialog-box-shadow: var(--box-shadow-lg) !default;
$dialog-backdrop-bg: rgba(0, 0, 0, .5) !default;
$dialog-header-padding: 1rem !default;
-$dialog-header-border-color: var(--#{$prefix}border-color) !default;
-$dialog-header-border-width: var(--#{$prefix}border-width) !default;
+$dialog-header-border-color: var(--border-color) !default;
+$dialog-header-border-width: var(--border-width) !default;
$dialog-footer-padding: 1rem !default;
-$dialog-footer-border-color: var(--#{$prefix}border-color) !default;
-$dialog-footer-border-width: var(--#{$prefix}border-width) !default;
+$dialog-footer-border-color: var(--border-color) !default;
+$dialog-footer-border-width: var(--border-width) !default;
$dialog-footer-gap: .5rem !default;
// scss-docs-end dialog-css-vars
}
.dialog {
- --#{$prefix}dialog-padding: #{$dialog-padding};
- --#{$prefix}dialog-width: #{$dialog-width};
- --#{$prefix}dialog-margin: #{$dialog-margin};
- --#{$prefix}dialog-color: #{$dialog-color};
- --#{$prefix}dialog-bg: #{$dialog-bg};
- --#{$prefix}dialog-border-color: #{$dialog-border-color};
- --#{$prefix}dialog-border-width: #{$dialog-border-width};
- --#{$prefix}dialog-border-radius: #{$dialog-border-radius};
- --#{$prefix}dialog-box-shadow: #{$dialog-box-shadow};
- --#{$prefix}dialog-backdrop-bg: #{$dialog-backdrop-bg};
- --#{$prefix}dialog-header-padding: #{$dialog-header-padding};
- --#{$prefix}dialog-header-border-color: #{$dialog-header-border-color};
- --#{$prefix}dialog-header-border-width: #{$dialog-header-border-width};
- --#{$prefix}dialog-footer-padding: #{$dialog-footer-padding};
- --#{$prefix}dialog-footer-border-color: #{$dialog-footer-border-color};
- --#{$prefix}dialog-footer-border-width: #{$dialog-footer-border-width};
- --#{$prefix}dialog-footer-gap: #{$dialog-footer-gap};
+ --dialog-padding: #{$dialog-padding};
+ --dialog-width: #{$dialog-width};
+ --dialog-margin: #{$dialog-margin};
+ --dialog-color: #{$dialog-color};
+ --dialog-bg: #{$dialog-bg};
+ --dialog-border-color: #{$dialog-border-color};
+ --dialog-border-width: #{$dialog-border-width};
+ --dialog-border-radius: #{$dialog-border-radius};
+ --dialog-box-shadow: #{$dialog-box-shadow};
+ --dialog-backdrop-bg: #{$dialog-backdrop-bg};
+ --dialog-header-padding: #{$dialog-header-padding};
+ --dialog-header-border-color: #{$dialog-header-border-color};
+ --dialog-header-border-width: #{$dialog-header-border-width};
+ --dialog-footer-padding: #{$dialog-footer-padding};
+ --dialog-footer-border-color: #{$dialog-footer-border-color};
+ --dialog-footer-border-width: #{$dialog-footer-border-width};
+ --dialog-footer-gap: #{$dialog-footer-gap};
// Reset native dialog styles
- max-width: var(--#{$prefix}dialog-width);
- max-height: calc(100% - var(--#{$prefix}dialog-margin) * 2);
+ max-width: var(--dialog-width);
+ max-height: calc(100% - var(--dialog-margin) * 2);
padding: 0;
margin: auto;
- color: var(--#{$prefix}dialog-color);
- background-color: var(--#{$prefix}dialog-bg);
+ color: var(--dialog-color);
+ background-color: var(--dialog-bg);
background-clip: padding-box;
- border: var(--#{$prefix}dialog-border-width) solid var(--#{$prefix}dialog-border-color);
- @include border-radius(var(--#{$prefix}dialog-border-radius));
- @include box-shadow(var(--#{$prefix}dialog-box-shadow));
+ border: var(--dialog-border-width) solid var(--dialog-border-color);
+ @include border-radius(var(--dialog-border-radius));
+ @include box-shadow(var(--dialog-box-shadow));
// Native backdrop styling via ::backdrop pseudo-element
&::backdrop {
- background-color: var(--#{$prefix}dialog-backdrop-bg);
+ background-color: var(--dialog-backdrop-bg);
}
// Animation support using native [open] attribute
max-width: 100%;
height: 100%;
max-height: 100%;
- padding: var(--#{$prefix}dialog-margin);
+ padding: var(--dialog-margin);
margin: 0;
overflow-y: auto;
overscroll-behavior: contain;
// The visual dialog box is a child wrapper
> .dialog-box {
- max-width: var(--#{$prefix}dialog-width);
- margin-block-end: var(--#{$prefix}dialog-margin);
+ max-width: var(--dialog-width);
+ margin-block-end: var(--dialog-margin);
margin-inline: auto;
- color: var(--#{$prefix}dialog-color);
- background-color: var(--#{$prefix}dialog-bg);
+ color: var(--dialog-color);
+ background-color: var(--dialog-bg);
background-clip: padding-box;
- border: var(--#{$prefix}dialog-border-width) solid var(--#{$prefix}dialog-border-color);
- @include border-radius(var(--#{$prefix}dialog-border-radius));
- @include box-shadow(var(--#{$prefix}dialog-box-shadow));
+ border: var(--dialog-border-width) solid var(--dialog-border-color);
+ @include border-radius(var(--dialog-border-radius));
+ @include box-shadow(var(--dialog-box-shadow));
}
}
&.dialog-scrollable[open] {
display: flex;
flex-direction: column;
- max-height: calc(100% - var(--#{$prefix}dialog-margin) * 2);
+ max-height: calc(100% - var(--dialog-margin) * 2);
.dialog-body {
overflow-y: auto;
}
// Dialog sizes
- .dialog-sm { --#{$prefix}dialog-width: #{$dialog-width-sm}; }
- .dialog-lg { --#{$prefix}dialog-width: #{$dialog-width-lg}; }
- .dialog-xl { --#{$prefix}dialog-width: #{$dialog-width-xl}; }
+ .dialog-sm { --dialog-width: #{$dialog-width-sm}; }
+ .dialog-lg { --dialog-width: #{$dialog-width-lg}; }
+ .dialog-xl { --dialog-width: #{$dialog-width-xl}; }
// Fullscreen dialog
.dialog-fullscreen {
- --#{$prefix}dialog-width: 100vw;
- --#{$prefix}dialog-margin: 0;
- --#{$prefix}dialog-border-radius: 0;
+ --dialog-width: 100vw;
+ --dialog-margin: 0;
+ --dialog-border-radius: 0;
width: 100%;
max-width: none;
@if $postfix != "" {
@include media-breakpoint-down($breakpoint) {
.dialog-fullscreen#{$postfix} {
- --#{$prefix}dialog-width: 100vw;
- --#{$prefix}dialog-margin: 0;
- --#{$prefix}dialog-border-radius: 0;
+ --dialog-width: 100vw;
+ --dialog-margin: 0;
+ --dialog-border-radius: 0;
width: 100%;
max-width: none;
display: flex;
flex-shrink: 0;
align-items: center;
- padding: var(--#{$prefix}dialog-header-padding);
- border-block-end: var(--#{$prefix}dialog-header-border-width) solid var(--#{$prefix}dialog-header-border-color);
+ padding: var(--dialog-header-padding);
+ border-block-end: var(--dialog-header-border-width) solid var(--dialog-header-border-color);
.btn-close {
margin-inline-start: auto;
// Dialog title
.dialog-title {
margin-bottom: 0;
- font-size: var(--#{$prefix}font-size-md);
+ font-size: var(--font-size-md);
line-height: 1.5;
}
.dialog-body {
position: relative;
flex: 1 1 auto;
- padding: var(--#{$prefix}dialog-padding);
+ padding: var(--dialog-padding);
overflow-y: auto;
}
display: flex;
flex-shrink: 0;
flex-wrap: wrap;
- gap: var(--#{$prefix}dialog-footer-gap);
+ gap: var(--dialog-footer-gap);
align-items: center;
justify-content: flex-end;
- padding: var(--#{$prefix}dialog-footer-padding);
- border-block-start: var(--#{$prefix}dialog-footer-border-width) solid var(--#{$prefix}dialog-footer-border-color);
+ padding: var(--dialog-footer-padding);
+ border-block-start: var(--dialog-footer-border-width) solid var(--dialog-footer-border-color);
}
}
$dropdown-padding-y: .25rem !default;
$dropdown-spacer: .125rem !default;
$dropdown-font-size: $font-size-base !default;
-$dropdown-color: var(--#{$prefix}fg-body) !default;
-$dropdown-bg: var(--#{$prefix}bg-body) !default;
-$dropdown-border-color: var(--#{$prefix}border-color-translucent) !default;
-$dropdown-border-radius: var(--#{$prefix}border-radius-lg) !default;
-$dropdown-border-width: var(--#{$prefix}border-width) !default;
+$dropdown-color: var(--fg-body) !default;
+$dropdown-bg: var(--bg-body) !default;
+$dropdown-border-color: var(--border-color-translucent) !default;
+$dropdown-border-radius: var(--border-radius-lg) !default;
+$dropdown-border-width: var(--border-width) !default;
$dropdown-inner-border-radius: calc(#{$dropdown-border-radius} - #{$dropdown-border-width}) !default;
-$dropdown-box-shadow: var(--#{$prefix}box-shadow) !default;
+$dropdown-box-shadow: var(--box-shadow) !default;
$dropdown-divider-bg: $dropdown-border-color !default;
$dropdown-divider-margin-y: $spacer * .125 !default;
$dropdown-divider-margin-x: $spacer * .25 !default;
-$dropdown-link-color: var(--#{$prefix}fg-body) !default;
+$dropdown-link-color: var(--fg-body) !default;
$dropdown-link-hover-color: $dropdown-link-color !default;
-$dropdown-link-hover-bg: var(--#{$prefix}bg-1) !default;
+$dropdown-link-hover-bg: var(--bg-1) !default;
$dropdown-link-active-color: $component-active-color !default;
$dropdown-link-active-bg: $component-active-bg !default;
-$dropdown-link-disabled-color: var(--#{$prefix}fg-3) !default;
+$dropdown-link-disabled-color: var(--fg-3) !default;
$dropdown-item-padding-y: $spacer * .25 !default;
$dropdown-item-padding-x: $spacer * .75 !default;
-$dropdown-item-border-radius: var(--#{$prefix}border-radius) !default;
+$dropdown-item-border-radius: var(--border-radius) !default;
$dropdown-item-gap: $spacer * .5 !default;
-$dropdown-header-color: var(--#{$prefix}gray-600) !default;
+$dropdown-header-color: var(--gray-600) !default;
$dropdown-header-padding-x: $dropdown-item-padding-x !default;
$dropdown-header-padding-y: $dropdown-padding-y !default;
// scss-docs-end dropdown-variables
// scss-docs-start dropdown-dark-variables
-$dropdown-dark-color: var(--#{$prefix}gray-300) !default;
-$dropdown-dark-bg: var(--#{$prefix}gray-900) !default;
+$dropdown-dark-color: var(--gray-300) !default;
+$dropdown-dark-bg: var(--gray-900) !default;
$dropdown-dark-border-color: $dropdown-border-color !default;
$dropdown-dark-divider-bg: $dropdown-divider-bg !default;
$dropdown-dark-box-shadow: null !default;
$dropdown-dark-link-hover-bg: rgba($white, .15) !default;
$dropdown-dark-link-active-color: $dropdown-link-active-color !default;
$dropdown-dark-link-active-bg: $dropdown-link-active-bg !default;
-$dropdown-dark-link-disabled-color: var(--#{$prefix}gray-500) !default;
-$dropdown-dark-header-color: var(--#{$prefix}gray-500) !default;
+$dropdown-dark-link-disabled-color: var(--gray-500) !default;
+$dropdown-dark-header-color: var(--gray-500) !default;
// scss-docs-end dropdown-dark-variables
@layer components {
// The dropdown menu
.dropdown-menu {
// scss-docs-start dropdown-css-vars
- --#{$prefix}dropdown-zindex: #{$zindex-dropdown};
- --#{$prefix}dropdown-gap: #{$dropdown-gap};
- --#{$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};
- --#{$prefix}dropdown-font-size: #{$dropdown-font-size};
- --#{$prefix}dropdown-color: #{$dropdown-color};
- --#{$prefix}dropdown-bg: #{$dropdown-bg};
- --#{$prefix}dropdown-border-color: #{$dropdown-border-color};
- --#{$prefix}dropdown-border-radius: #{$dropdown-border-radius};
- --#{$prefix}dropdown-border-width: #{$dropdown-border-width};
- --#{$prefix}dropdown-inner-border-radius: #{$dropdown-inner-border-radius};
- --#{$prefix}dropdown-divider-bg: #{$dropdown-divider-bg};
- --#{$prefix}dropdown-divider-margin-y: #{$dropdown-divider-margin-y};
- --#{$prefix}dropdown-divider-margin-x: #{$dropdown-divider-margin-x};
- --#{$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-gap: #{$dropdown-item-gap};
- --#{$prefix}dropdown-item-padding-x: #{$dropdown-item-padding-x};
- --#{$prefix}dropdown-item-padding-y: #{$dropdown-item-padding-y};
- --#{$prefix}dropdown-item-border-radius: #{$dropdown-item-border-radius};
- --#{$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};
+ --dropdown-zindex: #{$zindex-dropdown};
+ --dropdown-gap: #{$dropdown-gap};
+ --dropdown-min-width: #{$dropdown-min-width};
+ --dropdown-padding-x: #{$dropdown-padding-x};
+ --dropdown-padding-y: #{$dropdown-padding-y};
+ --dropdown-spacer: #{$dropdown-spacer};
+ --dropdown-font-size: #{$dropdown-font-size};
+ --dropdown-color: #{$dropdown-color};
+ --dropdown-bg: #{$dropdown-bg};
+ --dropdown-border-color: #{$dropdown-border-color};
+ --dropdown-border-radius: #{$dropdown-border-radius};
+ --dropdown-border-width: #{$dropdown-border-width};
+ --dropdown-inner-border-radius: #{$dropdown-inner-border-radius};
+ --dropdown-divider-bg: #{$dropdown-divider-bg};
+ --dropdown-divider-margin-y: #{$dropdown-divider-margin-y};
+ --dropdown-divider-margin-x: #{$dropdown-divider-margin-x};
+ --dropdown-box-shadow: #{$dropdown-box-shadow};
+ --dropdown-link-color: #{$dropdown-link-color};
+ --dropdown-link-hover-color: #{$dropdown-link-hover-color};
+ --dropdown-link-hover-bg: #{$dropdown-link-hover-bg};
+ --dropdown-link-active-color: #{$dropdown-link-active-color};
+ --dropdown-link-active-bg: #{$dropdown-link-active-bg};
+ --dropdown-link-disabled-color: #{$dropdown-link-disabled-color};
+ --dropdown-item-gap: #{$dropdown-item-gap};
+ --dropdown-item-padding-x: #{$dropdown-item-padding-x};
+ --dropdown-item-padding-y: #{$dropdown-item-padding-y};
+ --dropdown-item-border-radius: #{$dropdown-item-border-radius};
+ --dropdown-header-color: #{$dropdown-header-color};
+ --dropdown-header-padding-x: #{$dropdown-header-padding-x};
+ --dropdown-header-padding-y: #{$dropdown-header-padding-y};
// scss-docs-end dropdown-css-vars
position: absolute;
- z-index: var(--#{$prefix}dropdown-zindex);
+ z-index: var(--dropdown-zindex);
display: none; // none by default, but flex on "open" of the menu
flex-direction: column;
- gap: var(--#{$prefix}dropdown-gap);
- min-width: var(--#{$prefix}dropdown-min-width);
- padding: var(--#{$prefix}dropdown-padding-y) var(--#{$prefix}dropdown-padding-x);
+ gap: var(--dropdown-gap);
+ min-width: var(--dropdown-min-width);
+ padding: var(--dropdown-padding-y) var(--dropdown-padding-x);
margin: 0; // Override default margin of ul
- font-size: var(--#{$prefix}dropdown-font-size);
- color: var(--#{$prefix}dropdown-color);
+ font-size: var(--dropdown-font-size);
+ color: var(--dropdown-color);
text-align: start; // Ensures proper alignment if parent has it changed (e.g., modal footer)
list-style: none;
- background-color: var(--#{$prefix}dropdown-bg);
+ background-color: var(--dropdown-bg);
background-clip: padding-box;
- border: var(--#{$prefix}dropdown-border-width) solid var(--#{$prefix}dropdown-border-color);
- @include border-radius(var(--#{$prefix}dropdown-border-radius));
- @include box-shadow(var(--#{$prefix}dropdown-box-shadow));
+ border: var(--dropdown-border-width) solid var(--dropdown-border-color);
+ @include border-radius(var(--dropdown-border-radius));
+ @include box-shadow(var(--dropdown-box-shadow));
@if $dropdown-padding-y == 0 {
> .dropdown-item:first-child,
> li:first-child .dropdown-item {
- @include border-top-radius(var(--#{$prefix}dropdown-inner-border-radius));
+ @include border-top-radius(var(--dropdown-inner-border-radius));
}
> .dropdown-item:last-child,
> li:last-child .dropdown-item {
- @include border-bottom-radius(var(--#{$prefix}dropdown-inner-border-radius));
+ @include border-bottom-radius(var(--dropdown-inner-border-radius));
}
}
}
// Dividers (basically an `<hr>`) within the dropdown
.dropdown-divider {
height: 0;
- margin: var(--#{$prefix}dropdown-divider-margin-y) var(--#{$prefix}dropdown-divider-margin-x);
+ margin: var(--dropdown-divider-margin-y) var(--dropdown-divider-margin-x);
overflow: hidden;
- border-block-start: 1px solid var(--#{$prefix}dropdown-divider-bg);
+ border-block-start: 1px solid var(--dropdown-divider-bg);
opacity: 1;
}
// `<button>`-specific styles are denoted with `// For <button>s`
.dropdown-item {
display: flex;
- gap: var(--#{$prefix}dropdown-item-gap);
+ gap: var(--dropdown-item-gap);
align-items: center;
width: 100%; // For `<button>`s
- padding: var(--#{$prefix}dropdown-item-padding-y) var(--#{$prefix}dropdown-item-padding-x);
+ padding: var(--dropdown-item-padding-y) var(--dropdown-item-padding-x);
font-weight: $font-weight-normal;
- color: var(--#{$prefix}dropdown-link-color);
+ color: var(--dropdown-link-color);
text-align: inherit; // For `<button>`s
text-decoration: none;
white-space: nowrap; // prevent links from randomly breaking onto new lines
background-color: transparent; // For `<button>`s
border: 0; // For `<button>`s
- @include border-radius(var(--#{$prefix}dropdown-item-border-radius, 0));
+ @include border-radius(var(--dropdown-item-border-radius, 0));
&:hover,
&:focus {
- color: var(--#{$prefix}dropdown-link-hover-color);
- @include gradient-bg(var(--#{$prefix}dropdown-link-hover-bg));
+ color: var(--dropdown-link-hover-color);
+ @include gradient-bg(var(--dropdown-link-hover-bg));
}
&.active,
&:active {
- color: var(--#{$prefix}dropdown-link-active-color);
- @include gradient-bg(var(--#{$prefix}dropdown-link-active-bg));
+ color: var(--dropdown-link-active-color);
+ @include gradient-bg(var(--dropdown-link-active-bg));
}
&.disabled,
&:disabled {
- color: var(--#{$prefix}dropdown-link-disabled-color);
+ color: var(--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(--#{$prefix}dropdown-header-padding-y) var(--#{$prefix}dropdown-header-padding-x);
+ padding: var(--dropdown-header-padding-y) var(--dropdown-header-padding-x);
margin-bottom: 0; // for use with heading elements
font-size: $font-size-sm;
- color: var(--#{$prefix}dropdown-header-color);
+ color: var(--dropdown-header-color);
white-space: nowrap; // as with > li > a
}
// Dropdown text
.dropdown-item-text {
display: block;
- padding: var(--#{$prefix}dropdown-item-padding-y) var(--#{$prefix}dropdown-item-padding-x);
- color: var(--#{$prefix}fg-2);
+ padding: var(--dropdown-item-padding-y) var(--dropdown-item-padding-x);
+ color: var(--fg-2);
}
// Dark dropdowns
.dropdown-menu-dark {
// scss-docs-start dropdown-dark-css-vars
- --#{$prefix}dropdown-color: #{$dropdown-dark-color};
- --#{$prefix}dropdown-bg: #{$dropdown-dark-bg};
- --#{$prefix}dropdown-border-color: #{$dropdown-dark-border-color};
- --#{$prefix}dropdown-box-shadow: #{$dropdown-dark-box-shadow};
- --#{$prefix}dropdown-link-color: #{$dropdown-dark-link-color};
- --#{$prefix}dropdown-link-hover-color: #{$dropdown-dark-link-hover-color};
- --#{$prefix}dropdown-divider-bg: #{$dropdown-dark-divider-bg};
- --#{$prefix}dropdown-link-hover-bg: #{$dropdown-dark-link-hover-bg};
- --#{$prefix}dropdown-link-active-color: #{$dropdown-dark-link-active-color};
- --#{$prefix}dropdown-link-active-bg: #{$dropdown-dark-link-active-bg};
- --#{$prefix}dropdown-link-disabled-color: #{$dropdown-dark-link-disabled-color};
- --#{$prefix}dropdown-header-color: #{$dropdown-dark-header-color};
+ --dropdown-color: #{$dropdown-dark-color};
+ --dropdown-bg: #{$dropdown-dark-bg};
+ --dropdown-border-color: #{$dropdown-dark-border-color};
+ --dropdown-box-shadow: #{$dropdown-dark-box-shadow};
+ --dropdown-link-color: #{$dropdown-dark-link-color};
+ --dropdown-link-hover-color: #{$dropdown-dark-link-hover-color};
+ --dropdown-divider-bg: #{$dropdown-dark-divider-bg};
+ --dropdown-link-hover-bg: #{$dropdown-dark-link-hover-bg};
+ --dropdown-link-active-color: #{$dropdown-dark-link-active-color};
+ --dropdown-link-active-bg: #{$dropdown-dark-link-active-bg};
+ --dropdown-link-disabled-color: #{$dropdown-dark-link-disabled-color};
+ --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(--#{$prefix}#{$identifier}-bg-rgb), var(--#{$prefix}#{$target}-opacity));
+ @return rgba(var(--#{$identifier}-bg-rgb), var(--#{$target}-opacity));
} @if $identifier == "body" and $target == "text" {
- @return rgba(var(--#{$prefix}#{$identifier}-color-rgb), var(--#{$prefix}#{$target}-opacity));
+ @return rgba(var(--#{$identifier}-color-rgb), var(--#{$target}-opacity));
} @else {
- @return rgba(var(--#{$prefix}#{$identifier}-rgb), var(--#{$prefix}#{$target}-opacity));
+ @return rgba(var(--#{$identifier}-rgb), var(--#{$target}-opacity));
}
}
@function varify($list) {
$result: null;
@each $entry in $list {
- $result: list.append($result, var(--#{$prefix}#{$entry}), space);
+ $result: list.append($result, var(--#{$entry}), space);
}
@return $result;
}
@use "layout/breakpoints" as *;
// scss-docs-start list-group-variables
-$list-group-color: var(--#{$prefix}color-body) !default;
-$list-group-bg: var(--#{$prefix}bg-body) !default;
-$list-group-border-color: var(--#{$prefix}border-color) !default;
-$list-group-border-width: var(--#{$prefix}border-width) !default;
-$list-group-border-radius: var(--#{$prefix}border-radius) !default;
+$list-group-color: var(--color-body) !default;
+$list-group-bg: var(--bg-body) !default;
+$list-group-border-color: var(--border-color) !default;
+$list-group-border-width: var(--border-width) !default;
+$list-group-border-radius: var(--border-radius) !default;
$list-group-item-padding-y: $spacer * .5 !default;
$list-group-item-padding-x: $spacer !default;
-$list-group-hover-bg: var(--#{$prefix}tertiary-bg) !default;
+$list-group-hover-bg: var(--tertiary-bg) !default;
$list-group-active-color: $component-active-color !default;
$list-group-active-bg: $component-active-bg !default;
$list-group-active-border-color: $list-group-active-bg !default;
-$list-group-disabled-color: var(--#{$prefix}secondary-color) !default;
+$list-group-disabled-color: var(--secondary-color) !default;
$list-group-disabled-bg: $list-group-bg !default;
-$list-group-action-color: var(--#{$prefix}secondary-color) !default;
-$list-group-action-hover-color: var(--#{$prefix}emphasis-color) !default;
+$list-group-action-color: var(--secondary-color) !default;
+$list-group-action-hover-color: var(--emphasis-color) !default;
-$list-group-action-active-color: var(--#{$prefix}color-body) !default;
-$list-group-action-active-bg: var(--#{$prefix}secondary-bg) !default;
+$list-group-action-active-color: var(--color-body) !default;
+$list-group-action-active-bg: var(--secondary-bg) !default;
// scss-docs-end list-group-variables
@layer components {
.list-group {
// scss-docs-start list-group-css-vars
- --#{$prefix}list-group-color: #{$list-group-color};
- --#{$prefix}list-group-bg: #{$list-group-bg};
- --#{$prefix}list-group-border-color: #{$list-group-border-color};
- --#{$prefix}list-group-border-width: #{$list-group-border-width};
- --#{$prefix}list-group-border-radius: #{$list-group-border-radius};
- --#{$prefix}list-group-item-padding-x: #{$list-group-item-padding-x};
- --#{$prefix}list-group-item-padding-y: #{$list-group-item-padding-y};
- --#{$prefix}list-group-action-color: #{$list-group-action-color};
- --#{$prefix}list-group-action-hover-color: #{$list-group-action-hover-color};
- --#{$prefix}list-group-action-hover-bg: #{$list-group-hover-bg};
- --#{$prefix}list-group-action-active-color: #{$list-group-action-active-color};
- --#{$prefix}list-group-action-active-bg: #{$list-group-action-active-bg};
- --#{$prefix}list-group-disabled-color: #{$list-group-disabled-color};
- --#{$prefix}list-group-disabled-bg: #{$list-group-disabled-bg};
- --#{$prefix}list-group-active-color: #{$list-group-active-color};
- --#{$prefix}list-group-active-bg: #{$list-group-active-bg};
- --#{$prefix}list-group-active-border-color: #{$list-group-active-border-color};
+ --list-group-color: #{$list-group-color};
+ --list-group-bg: #{$list-group-bg};
+ --list-group-border-color: #{$list-group-border-color};
+ --list-group-border-width: #{$list-group-border-width};
+ --list-group-border-radius: #{$list-group-border-radius};
+ --list-group-item-padding-x: #{$list-group-item-padding-x};
+ --list-group-item-padding-y: #{$list-group-item-padding-y};
+ --list-group-action-color: #{$list-group-action-color};
+ --list-group-action-hover-color: #{$list-group-action-hover-color};
+ --list-group-action-hover-bg: #{$list-group-hover-bg};
+ --list-group-action-active-color: #{$list-group-action-active-color};
+ --list-group-action-active-bg: #{$list-group-action-active-bg};
+ --list-group-disabled-color: #{$list-group-disabled-color};
+ --list-group-disabled-bg: #{$list-group-disabled-bg};
+ --list-group-active-color: #{$list-group-active-color};
+ --list-group-active-bg: #{$list-group-active-bg};
+ --list-group-active-border-color: #{$list-group-active-border-color};
// scss-docs-end list-group-css-vars
display: flex;
// No need to set list-style: none; since .list-group-item is block level
padding-inline-start: 0; // reset padding because ul and ol
margin-bottom: 0;
- @include border-radius(var(--#{$prefix}list-group-border-radius));
+ @include border-radius(var(--list-group-border-radius));
}
.list-group-numbered {
.list-group-item {
position: relative;
display: block;
- padding: var(--#{$prefix}list-group-item-padding-y) var(--#{$prefix}list-group-item-padding-x);
- color: var(--#{$prefix}theme-text, var(--#{$prefix}list-group-color));
+ padding: var(--list-group-item-padding-y) var(--list-group-item-padding-x);
+ color: var(--theme-text, var(--list-group-color));
// stylelint-disable-next-line scss/at-function-named-arguments
text-decoration: if(sass($link-decoration == none): null);
- background-color: var(--#{$prefix}theme-bg-subtle, var(--#{$prefix}list-group-bg));
- border: var(--#{$prefix}list-group-border-width) solid var(--#{$prefix}theme-border, var(--#{$prefix}list-group-border-color));
+ background-color: var(--theme-bg-subtle, var(--list-group-bg));
+ border: var(--list-group-border-width) solid var(--theme-border, var(--list-group-border-color));
&:first-child {
@include border-top-radius(inherit);
&.disabled,
&:disabled {
- color: var(--#{$prefix}list-group-disabled-color);
+ color: var(--list-group-disabled-color);
pointer-events: none;
- background-color: var(--#{$prefix}list-group-disabled-bg);
+ background-color: var(--list-group-disabled-bg);
}
// Include both here for `<a>`s and `<button>`s
&.active {
z-index: 2; // Place active items above their siblings for proper border styling
- color: var(--#{$prefix}list-group-active-color);
- background-color: var(--#{$prefix}list-group-active-bg);
- border-color: var(--#{$prefix}list-group-active-border-color);
+ color: var(--list-group-active-color);
+ background-color: var(--list-group-active-bg);
+ border-color: var(--list-group-active-border-color);
}
// stylelint-disable-next-line scss/selector-no-redundant-nesting-selector
border-block-start-width: 0;
&.active {
- margin-top: calc(-1 * var(--#{$prefix}list-group-border-width));
- border-block-start-width: var(--#{$prefix}list-group-border-width);
+ margin-top: calc(-1 * var(--list-group-border-width));
+ border-block-start-width: var(--list-group-border-width);
}
}
}
.list-group-item-action {
width: 100%; // For `<button>`s (anchors become 100% by default though)
- color: var(--#{$prefix}theme-text, var(--#{$prefix}list-group-action-color));
+ color: var(--theme-text, var(--list-group-action-color));
text-align: inherit; // For `<button>`s (anchors inherit)
&:not(.active) {
&:hover,
&:focus {
z-index: 1; // Place hover/focus items above their siblings for proper border styling
- color: var(--#{$prefix}theme-text-emphasis, var(--#{$prefix}list-group-action-hover-color));
+ color: var(--theme-text-emphasis, var(--list-group-action-hover-color));
text-decoration: none;
- background-color: var(--#{$prefix}theme-bg-muted, var(--#{$prefix}list-group-action-hover-bg));
+ background-color: var(--theme-bg-muted, var(--list-group-action-hover-bg));
}
&:active {
- color: var(--#{$prefix}theme-text-emphasis, var(--#{$prefix}list-group-action-active-color));
- background-color: var(--#{$prefix}theme-bg-muted, var(--#{$prefix}list-group-action-active-bg));
+ color: var(--theme-text-emphasis, var(--list-group-action-active-color));
+ background-color: var(--theme-bg-muted, var(--list-group-action-active-bg));
}
}
}
> .list-group-item {
&:first-child:not(:last-child) {
- @include border-bottom-start-radius(var(--#{$prefix}list-group-border-radius));
+ @include border-bottom-start-radius(var(--list-group-border-radius));
@include border-top-end-radius(0);
}
&:last-child:not(:first-child) {
- @include border-top-end-radius(var(--#{$prefix}list-group-border-radius));
+ @include border-top-end-radius(var(--list-group-border-radius));
@include border-bottom-start-radius(0);
}
}
+ .list-group-item {
- border-block-start-width: var(--#{$prefix}list-group-border-width);
+ border-block-start-width: var(--list-group-border-width);
border-inline-start-width: 0;
&.active {
- margin-inline-start: calc(-1 * var(--#{$prefix}list-group-border-width));
- border-inline-start-width: var(--#{$prefix}list-group-border-width);
+ margin-inline-start: calc(-1 * var(--list-group-border-width));
+ border-inline-start-width: var(--list-group-border-width);
}
}
}
@include border-radius(0);
> .list-group-item {
- border-width: 0 0 var(--#{$prefix}list-group-border-width);
+ border-width: 0 0 var(--list-group-border-width);
&:last-child {
border-block-end-width: 0;
$nav-link-gap: .5rem !default;
$nav-link-padding-y: .5rem !default;
$nav-link-padding-x: 1rem !default;
-$nav-link-color: var(--#{$prefix}fg-2) !default;
-$nav-link-hover-color: var(--#{$prefix}fg-1) !default;
-$nav-link-hover-bg: var(--#{$prefix}bg-1) !default;
+$nav-link-color: var(--fg-2) !default;
+$nav-link-hover-color: var(--fg-1) !default;
+$nav-link-hover-bg: var(--bg-1) !default;
$nav-link-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out !default;
-$nav-link-disabled-color: var(--#{$prefix}fg-4) !default;
-$nav-link-active-color: var(--#{$prefix}fg-body) !default;
-$nav-link-active-bg: var(--#{$prefix}bg-2) !default;
-
-$nav-tabs-border-color: var(--#{$prefix}border-color) !default;
-$nav-tabs-border-width: var(--#{$prefix}border-width) !default;
-$nav-tabs-border-radius: var(--#{$prefix}border-radius) !default;
-$nav-tabs-link-hover-border-color: var(--#{$prefix}border-subtle) !default;
-$nav-tabs-link-active-color: var(--#{$prefix}emphasis-color) !default;
-$nav-tabs-link-active-bg: var(--#{$prefix}bg-body) !default;
-$nav-tabs-link-active-border-color: var(--#{$prefix}border-color) var(--#{$prefix}border-color) $nav-tabs-link-active-bg !default;
+$nav-link-disabled-color: var(--fg-4) !default;
+$nav-link-active-color: var(--fg-body) !default;
+$nav-link-active-bg: var(--bg-2) !default;
+
+$nav-tabs-border-color: var(--border-color) !default;
+$nav-tabs-border-width: var(--border-width) !default;
+$nav-tabs-border-radius: var(--border-radius) !default;
+$nav-tabs-link-hover-border-color: var(--border-subtle) !default;
+$nav-tabs-link-active-color: var(--emphasis-color) !default;
+$nav-tabs-link-active-bg: var(--bg-body) !default;
+$nav-tabs-link-active-border-color: var(--border-color) var(--border-color) $nav-tabs-link-active-bg !default;
$nav-pills-link-active-color: $component-active-color !default;
$nav-pills-link-active-bg: $component-active-bg !default;
$nav-underline-gap: 1rem !default;
$nav-underline-border-width: .125rem !default;
-$nav-underline-link-active-color: var(--#{$prefix}emphasis-color) !default;
+$nav-underline-link-active-color: var(--emphasis-color) !default;
// scss-docs-end nav-variables
// Base class
@layer components {
.nav {
// scss-docs-start nav-css-vars
- --#{$prefix}nav-gap: #{$nav-gap};
- --#{$prefix}nav-link-gap: #{$nav-link-gap};
- --#{$prefix}nav-link-padding-x: #{$nav-link-padding-x};
- --#{$prefix}nav-link-padding-y: #{$nav-link-padding-y};
- --#{$prefix}nav-link-color: #{$nav-link-color};
- --#{$prefix}nav-link-hover-color: #{$nav-link-hover-color};
- --#{$prefix}nav-link-hover-bg: #{$nav-link-hover-bg};
- --#{$prefix}nav-link-active-color: #{$nav-link-active-color};
- --#{$prefix}nav-link-active-bg: #{$nav-link-active-bg};
- --#{$prefix}nav-link-disabled-color: #{$nav-link-disabled-color};
+ --nav-gap: #{$nav-gap};
+ --nav-link-gap: #{$nav-link-gap};
+ --nav-link-padding-x: #{$nav-link-padding-x};
+ --nav-link-padding-y: #{$nav-link-padding-y};
+ --nav-link-color: #{$nav-link-color};
+ --nav-link-hover-color: #{$nav-link-hover-color};
+ --nav-link-hover-bg: #{$nav-link-hover-bg};
+ --nav-link-active-color: #{$nav-link-active-color};
+ --nav-link-active-bg: #{$nav-link-active-bg};
+ --nav-link-disabled-color: #{$nav-link-disabled-color};
// scss-docs-end nav-css-vars
display: flex;
flex-wrap: wrap;
- gap: var(--#{$prefix}nav-gap);
+ gap: var(--nav-gap);
padding-inline-start: 0;
margin-bottom: 0;
list-style: none;
.nav-link {
display: flex;
- gap: var(--#{$prefix}nav-link-gap);
+ gap: var(--nav-link-gap);
align-items: center;
justify-content: center;
- padding: var(--#{$prefix}nav-link-padding-y) var(--#{$prefix}nav-link-padding-x);
- font-weight: var(--#{$prefix}nav-link-font-weight);
- color: var(--#{$prefix}nav-link-color);
+ padding: var(--nav-link-padding-y) var(--nav-link-padding-x);
+ font-weight: var(--nav-link-font-weight);
+ color: var(--nav-link-color);
text-decoration: none;
background: none;
border: 0;
- @include border-radius(var(--#{$prefix}border-radius));
- // @include font-size(var(--#{$prefix}nav-link-font-size));
+ @include border-radius(var(--border-radius));
+ // @include font-size(var(--nav-link-font-size));
@include transition($nav-link-transition);
&:hover,
&:focus {
- color: var(--#{$prefix}nav-link-hover-color);
- background-color: var(--#{$prefix}nav-link-hover-bg);
+ color: var(--nav-link-hover-color);
+ background-color: var(--nav-link-hover-bg);
}
&:focus-visible {
- color: var(--#{$prefix}nav-link-hover-color);
+ color: var(--nav-link-hover-color);
@include focus-ring(true);
- --#{$prefix}focus-ring-offset: 1px;
+ --focus-ring-offset: 1px;
}
&.active,
&:active {
- color: var(--#{$prefix}nav-link-active-color);
- background-color: var(--#{$prefix}nav-link-active-bg);
+ color: var(--nav-link-active-color);
+ background-color: var(--nav-link-active-bg);
}
// Disabled state lightens text
&.disabled,
&:disabled {
- color: var(--#{$prefix}nav-link-disabled-color);
+ color: var(--nav-link-disabled-color);
pointer-events: none;
cursor: default;
}
.nav-tabs {
// scss-docs-start nav-tabs-css-vars
- --#{$prefix}nav-tabs-border-width: #{$nav-tabs-border-width};
- --#{$prefix}nav-tabs-border-color: #{$nav-tabs-border-color};
- --#{$prefix}nav-tabs-border-radius: #{$nav-tabs-border-radius};
- --#{$prefix}nav-tabs-link-hover-border-color: #{$nav-tabs-link-hover-border-color};
- --#{$prefix}nav-tabs-link-active-color: #{$nav-tabs-link-active-color};
- --#{$prefix}nav-tabs-link-active-bg: #{$nav-tabs-link-active-bg};
- --#{$prefix}nav-tabs-link-active-border-color: #{$nav-tabs-link-active-border-color};
+ --nav-tabs-border-width: #{$nav-tabs-border-width};
+ --nav-tabs-border-color: #{$nav-tabs-border-color};
+ --nav-tabs-border-radius: #{$nav-tabs-border-radius};
+ --nav-tabs-link-hover-border-color: #{$nav-tabs-link-hover-border-color};
+ --nav-tabs-link-active-color: #{$nav-tabs-link-active-color};
+ --nav-tabs-link-active-bg: #{$nav-tabs-link-active-bg};
+ --nav-tabs-link-active-border-color: #{$nav-tabs-link-active-border-color};
// scss-docs-end nav-tabs-css-vars
- border-block-end: var(--#{$prefix}nav-tabs-border-width) solid var(--#{$prefix}nav-tabs-border-color);
+ border-block-end: var(--nav-tabs-border-width) solid var(--nav-tabs-border-color);
.nav-link {
- margin-bottom: calc(-1 * var(--#{$prefix}nav-tabs-border-width));
- border: var(--#{$prefix}nav-tabs-border-width) solid transparent;
+ margin-bottom: calc(-1 * var(--nav-tabs-border-width));
+ border: var(--nav-tabs-border-width) solid transparent;
@include border-bottom-radius(0);
&:hover {
// Prevents active .nav-link tab overlapping focus outline of previous/next .nav-link
isolation: isolate;
- border-color: var(--#{$prefix}nav-tabs-link-hover-border-color);
- border-bottom-color: var(--#{$prefix}nav-tabs-border-color);
+ border-color: var(--nav-tabs-link-hover-border-color);
+ border-bottom-color: var(--nav-tabs-border-color);
}
}
.nav-link.active,
.nav-item.show .nav-link {
- color: var(--#{$prefix}nav-tabs-link-active-color);
- background-color: var(--#{$prefix}nav-tabs-link-active-bg);
- border-color: var(--#{$prefix}nav-tabs-link-active-border-color);
- border-bottom-color: var(--#{$prefix}nav-tabs-link-active-bg);
+ color: var(--nav-tabs-link-active-color);
+ background-color: var(--nav-tabs-link-active-bg);
+ border-color: var(--nav-tabs-link-active-border-color);
+ border-bottom-color: var(--nav-tabs-link-active-bg);
}
.dropdown-menu {
// Make dropdown border overlap tab border
- margin-top: calc(-1 * var(--#{$prefix}nav-tabs-border-width));
+ margin-top: calc(-1 * var(--nav-tabs-border-width));
// Remove the top rounded corners here since there is a hard edge above the menu
@include border-top-radius(0);
}
.nav-pills {
// scss-docs-start nav-pills-css-vars
- --#{$prefix}nav-pills-link-active-color: #{$nav-pills-link-active-color};
- --#{$prefix}nav-pills-link-active-bg: #{$nav-pills-link-active-bg};
+ --nav-pills-link-active-color: #{$nav-pills-link-active-color};
+ --nav-pills-link-active-bg: #{$nav-pills-link-active-bg};
// scss-docs-end nav-pills-css-vars
.nav-link.active,
.show > .nav-link {
- color: var(--#{$prefix}nav-pills-link-active-color);
- @include gradient-bg(var(--#{$prefix}nav-pills-link-active-bg));
+ color: var(--nav-pills-link-active-color);
+ @include gradient-bg(var(--nav-pills-link-active-bg));
}
}
.nav-underline {
// scss-docs-start nav-underline-css-vars
- --#{$prefix}nav-gap: #{$nav-underline-gap};
- --#{$prefix}nav-link-active-bg: transparent;
- // --#{$prefix}nav-underline-gap: #{$nav-underline-gap};
- --#{$prefix}nav-underline-border-width: #{$nav-underline-border-width};
- --#{$prefix}nav-underline-link-active-color: #{$nav-underline-link-active-color};
+ --nav-gap: #{$nav-underline-gap};
+ --nav-link-active-bg: transparent;
+ // --nav-underline-gap: #{$nav-underline-gap};
+ --nav-underline-border-width: #{$nav-underline-border-width};
+ --nav-underline-link-active-color: #{$nav-underline-link-active-color};
// scss-docs-end nav-underline-css-vars
.nav-link {
padding-inline: 0;
- border-block-end: var(--#{$prefix}nav-underline-border-width) solid transparent;
+ border-block-end: var(--nav-underline-border-width) solid transparent;
@include border-radius(0);
&:hover,
.nav-link.active,
.show > .nav-link {
font-weight: $font-weight-bold;
- color: var(--#{$prefix}nav-underline-link-active-color);
+ color: var(--nav-underline-link-active-color);
border-block-end-color: currentcolor;
}
}
$navbar-toggler-padding-y: .25rem !default;
$navbar-toggler-padding-x: .75rem !default;
$navbar-toggler-font-size: $font-size-lg !default;
-$navbar-toggler-border-radius: var(--#{$prefix}border-radius) !default;
+$navbar-toggler-border-radius: var(--border-radius) !default;
$navbar-toggler-transition: box-shadow .15s ease-in-out !default;
-$navbar-light-color: var(--#{$prefix}fg-2) !default;
-$navbar-light-hover-color: var(--#{$prefix}fg-1) !default;
-$navbar-light-active-color: var(--#{$prefix}fg) !default;
-$navbar-light-disabled-color: var(--#{$prefix}fg-3) !default;
+$navbar-light-color: var(--fg-2) !default;
+$navbar-light-hover-color: var(--fg-1) !default;
+$navbar-light-active-color: var(--fg) !default;
+$navbar-light-disabled-color: var(--fg-3) !default;
$navbar-light-icon-color: rgba($body-color, .75) !default;
$navbar-light-toggler-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-light-icon-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !default;
-$navbar-light-toggler-border-color: rgba(var(--#{$prefix}emphasis-color-rgb), .15) !default;
+$navbar-light-toggler-border-color: rgba(var(--emphasis-color-rgb), .15) !default;
$navbar-light-brand-color: $navbar-light-active-color !default;
$navbar-light-brand-hover-color: $navbar-light-active-color !default;
// scss-docs-end navbar-variables
.navbar {
// scss-docs-start navbar-css-vars
// stylelint-disable-next-line scss/at-function-named-arguments
- --#{$prefix}navbar-padding-x: #{if(sass($navbar-padding-x == null): 0; else: $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-transition: #{$navbar-toggler-transition};
+ --navbar-padding-x: #{if(sass($navbar-padding-x == null): 0; else: $navbar-padding-x)};
+ --navbar-padding-y: #{$navbar-padding-y};
+ --navbar-color: #{$navbar-light-color};
+ --navbar-hover-color: #{$navbar-light-hover-color};
+ --navbar-disabled-color: #{$navbar-light-disabled-color};
+ --navbar-active-color: #{$navbar-light-active-color};
+ --navbar-brand-padding-y: #{$navbar-brand-padding-y};
+ --navbar-brand-margin-end: #{$navbar-brand-margin-end};
+ --navbar-brand-font-size: #{$navbar-brand-font-size};
+ --navbar-brand-color: #{$navbar-light-brand-color};
+ --navbar-brand-hover-color: #{$navbar-light-brand-hover-color};
+ --navbar-nav-link-padding-x: #{$navbar-nav-link-padding-x};
+ --navbar-toggler-padding-y: #{$navbar-toggler-padding-y};
+ --navbar-toggler-padding-x: #{$navbar-toggler-padding-x};
+ --navbar-toggler-font-size: #{$navbar-toggler-font-size};
+ --navbar-toggler-icon-bg: #{escape-svg($navbar-light-toggler-icon-bg)};
+ --navbar-toggler-border-color: #{$navbar-light-toggler-border-color};
+ --navbar-toggler-border-radius: #{$navbar-toggler-border-radius};
+ --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(--#{$prefix}navbar-padding-y) var(--#{$prefix}navbar-padding-x);
+ padding: var(--navbar-padding-y) var(--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(--#{$prefix}navbar-brand-padding-y);
- padding-bottom: var(--#{$prefix}navbar-brand-padding-y);
- margin-inline-end: var(--#{$prefix}navbar-brand-margin-end);
- font-size: var(--#{$prefix}navbar-brand-font-size);
- color: var(--#{$prefix}navbar-brand-color);
+ padding-top: var(--navbar-brand-padding-y);
+ padding-bottom: var(--navbar-brand-padding-y);
+ margin-inline-end: var(--navbar-brand-margin-end);
+ font-size: var(--navbar-brand-font-size);
+ color: var(--navbar-brand-color);
text-decoration: none;
white-space: nowrap;
&:hover,
&:focus {
- color: var(--#{$prefix}navbar-brand-hover-color);
+ color: var(--navbar-brand-hover-color);
}
}
.navbar-nav {
// scss-docs-start navbar-nav-css-vars
- // --#{$prefix}nav-link-padding-x: 0;
+ // --nav-link-padding-x: 0;
// @mdo-do: fix this, navbar shouldn't need to reuse nav link variables mb? or we need to bring them in…
- // --#{$prefix}nav-link-padding-y: #{$nav-link-padding-y};
- // @include rfs($nav-link-font-size, --#{$prefix}nav-link-font-size);
- // --#{$prefix}nav-link-font-weight: #{$nav-link-font-weight};
- --#{$prefix}nav-link-color: var(--#{$prefix}navbar-color);
- --#{$prefix}nav-link-hover-color: var(--#{$prefix}navbar-hover-color);
- --#{$prefix}nav-link-disabled-color: var(--#{$prefix}navbar-disabled-color);
+ // --nav-link-padding-y: #{$nav-link-padding-y};
+ // @include rfs($nav-link-font-size, --nav-link-font-size);
+ // --nav-link-font-weight: #{$nav-link-font-weight};
+ --nav-link-color: var(--navbar-color);
+ --nav-link-hover-color: var(--navbar-hover-color);
+ --nav-link-disabled-color: var(--navbar-disabled-color);
// scss-docs-end navbar-nav-css-vars
display: flex;
.nav-link {
&.active,
&.show {
- color: var(--#{$prefix}navbar-active-color);
+ color: var(--navbar-active-color);
}
}
// @mdo-do: fix this too
// padding-top: $nav-link-padding-y;
// padding-bottom: $nav-link-padding-y;
- color: var(--#{$prefix}navbar-color);
+ color: var(--navbar-color);
a,
a:hover,
a:focus {
- color: var(--#{$prefix}navbar-active-color);
+ color: var(--navbar-active-color);
}
}
// Button for toggling the navbar when in its collapsed state
.navbar-toggler {
- padding: var(--#{$prefix}navbar-toggler-padding-y) var(--#{$prefix}navbar-toggler-padding-x);
- font-size: var(--#{$prefix}navbar-toggler-font-size);
+ padding: var(--navbar-toggler-padding-y) var(--navbar-toggler-padding-x);
+ font-size: var(--navbar-toggler-font-size);
line-height: 1;
- color: var(--#{$prefix}navbar-color);
+ color: var(--navbar-color);
background-color: transparent; // remove default button style
- border: var(--#{$prefix}border-width) solid var(--#{$prefix}navbar-toggler-border-color); // remove default button style
- @include border-radius(var(--#{$prefix}navbar-toggler-border-radius));
- @include transition(var(--#{$prefix}navbar-toggler-transition));
+ border: var(--border-width) solid var(--navbar-toggler-border-color); // remove default button style
+ @include border-radius(var(--navbar-toggler-border-radius));
+ @include transition(var(--navbar-toggler-transition));
&:hover {
text-decoration: none;
width: 1.5em;
height: 1.5em;
vertical-align: middle;
- background-image: var(--#{$prefix}navbar-toggler-icon-bg);
+ background-image: var(--navbar-toggler-icon-bg);
background-repeat: no-repeat;
background-position: center;
background-size: 100%;
}
.navbar-nav-scroll {
- max-height: var(--#{$prefix}scroll-height, 75vh);
+ max-height: var(--scroll-height, 75vh);
overflow-y: auto;
}
justify-content: flex-start;
.navbar-nav {
- --#{$prefix}nav-link-padding-x: var(--#{$prefix}navbar-nav-link-padding-x);
+ --nav-link-padding-x: var(--navbar-nav-link-padding-x);
flex-direction: row;
// .dropdown-menu {
// }
// .nav-link {
- // padding-inline: var(--#{$prefix}navbar-nav-link-padding-x);
+ // padding-inline: var(--navbar-nav-link-padding-x);
// }
}
.navbar-dark,
.navbar[data-bs-theme="dark"] {
// scss-docs-start navbar-dark-css-vars
- --#{$prefix}navbar-color: #{$navbar-dark-color};
- --#{$prefix}navbar-hover-color: #{$navbar-dark-hover-color};
- --#{$prefix}navbar-disabled-color: #{$navbar-dark-disabled-color};
- --#{$prefix}navbar-active-color: #{$navbar-dark-active-color};
- --#{$prefix}navbar-brand-color: #{$navbar-dark-brand-color};
- --#{$prefix}navbar-brand-hover-color: #{$navbar-dark-brand-hover-color};
- --#{$prefix}navbar-toggler-border-color: #{$navbar-dark-toggler-border-color};
- --#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-dark-toggler-icon-bg)};
+ --navbar-color: #{$navbar-dark-color};
+ --navbar-hover-color: #{$navbar-dark-hover-color};
+ --navbar-disabled-color: #{$navbar-dark-disabled-color};
+ --navbar-active-color: #{$navbar-dark-active-color};
+ --navbar-brand-color: #{$navbar-dark-brand-color};
+ --navbar-brand-hover-color: #{$navbar-dark-brand-hover-color};
+ --navbar-toggler-border-color: #{$navbar-dark-toggler-border-color};
+ --navbar-toggler-icon-bg: #{escape-svg($navbar-dark-toggler-icon-bg)};
// scss-docs-end navbar-dark-css-vars
}
@if $enable-dark-mode {
@include color-mode(dark) {
.navbar-toggler-icon {
- --#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-dark-toggler-icon-bg)};
+ --navbar-toggler-icon-bg: #{escape-svg($navbar-dark-toggler-icon-bg)};
}
}
}
%offcanvas-css-vars {
// scss-docs-start offcanvas-css-vars
- --#{$prefix}offcanvas-zindex: #{$zindex-offcanvas};
- --#{$prefix}offcanvas-width: #{$offcanvas-horizontal-width};
- --#{$prefix}offcanvas-height: #{$offcanvas-vertical-height};
- --#{$prefix}offcanvas-padding-x: #{$offcanvas-padding-x};
- --#{$prefix}offcanvas-padding-y: #{$offcanvas-padding-y};
- --#{$prefix}offcanvas-color: #{$offcanvas-color};
- --#{$prefix}offcanvas-bg: #{$offcanvas-bg-color};
- --#{$prefix}offcanvas-border-width: #{$offcanvas-border-width};
- --#{$prefix}offcanvas-border-color: #{$offcanvas-border-color};
- --#{$prefix}offcanvas-box-shadow: #{$offcanvas-box-shadow};
- --#{$prefix}offcanvas-transition: #{transform $offcanvas-transition-duration ease-in-out};
- --#{$prefix}offcanvas-title-line-height: #{$offcanvas-title-line-height};
+ --offcanvas-zindex: #{$zindex-offcanvas};
+ --offcanvas-width: #{$offcanvas-horizontal-width};
+ --offcanvas-height: #{$offcanvas-vertical-height};
+ --offcanvas-padding-x: #{$offcanvas-padding-x};
+ --offcanvas-padding-y: #{$offcanvas-padding-y};
+ --offcanvas-color: #{$offcanvas-color};
+ --offcanvas-bg: #{$offcanvas-bg-color};
+ --offcanvas-border-width: #{$offcanvas-border-width};
+ --offcanvas-border-color: #{$offcanvas-border-color};
+ --offcanvas-box-shadow: #{$offcanvas-box-shadow};
+ --offcanvas-transition: #{transform $offcanvas-transition-duration ease-in-out};
+ --offcanvas-title-line-height: #{$offcanvas-title-line-height};
// scss-docs-end offcanvas-css-vars
}
@include media-breakpoint-down($next) {
position: fixed;
bottom: 0;
- z-index: var(--#{$prefix}offcanvas-zindex);
+ z-index: var(--offcanvas-zindex);
display: flex;
flex-direction: column;
max-width: 100%;
- color: var(--#{$prefix}offcanvas-color);
+ color: var(--offcanvas-color);
visibility: hidden;
- background-color: var(--#{$prefix}offcanvas-bg);
+ background-color: var(--offcanvas-bg);
background-clip: padding-box;
outline: 0;
- @include box-shadow(var(--#{$prefix}offcanvas-box-shadow));
- @include transition(var(--#{$prefix}offcanvas-transition));
+ @include box-shadow(var(--offcanvas-box-shadow));
+ @include transition(var(--offcanvas-transition));
&.offcanvas-start {
inset-block: 0;
inset-inline-start: 0;
- width: var(--#{$prefix}offcanvas-width);
- border-inline-end: var(--#{$prefix}offcanvas-border-width) solid var(--#{$prefix}offcanvas-border-color);
+ width: var(--offcanvas-width);
+ border-inline-end: var(--offcanvas-border-width) solid var(--offcanvas-border-color);
transform: translateX(-100%);
:root:dir(rtl) & {
&.offcanvas-end {
inset-block: 0;
inset-inline-end: 0;
- width: var(--#{$prefix}offcanvas-width);
- border-inline-start: var(--#{$prefix}offcanvas-border-width) solid var(--#{$prefix}offcanvas-border-color);
+ width: var(--offcanvas-width);
+ border-inline-start: var(--offcanvas-border-width) solid var(--offcanvas-border-color);
transform: translateX(100%);
:root:dir(rtl) & {
&.offcanvas-top {
inset: 0 0 auto;
- height: var(--#{$prefix}offcanvas-height);
+ height: var(--offcanvas-height);
max-height: 100%;
- border-block-end: var(--#{$prefix}offcanvas-border-width) solid var(--#{$prefix}offcanvas-border-color);
+ border-block-end: var(--offcanvas-border-width) solid var(--offcanvas-border-color);
transform: translateY(-100%);
}
&.offcanvas-bottom {
inset: auto 0 0;
- height: var(--#{$prefix}offcanvas-height);
+ height: var(--offcanvas-height);
max-height: 100%;
- border-block-start: var(--#{$prefix}offcanvas-border-width) solid var(--#{$prefix}offcanvas-border-color);
+ border-block-start: var(--offcanvas-border-width) solid var(--offcanvas-border-color);
transform: translateY(100%);
}
@if not ($infix == "") {
@include media-breakpoint-up($next) {
- --#{$prefix}offcanvas-height: auto;
- --#{$prefix}offcanvas-border-width: 0;
+ --offcanvas-height: auto;
+ --offcanvas-border-width: 0;
background-color: transparent !important; // stylelint-disable-line declaration-no-important
.offcanvas-header {
.offcanvas-header {
display: flex;
align-items: center;
- padding: var(--#{$prefix}offcanvas-padding-y) var(--#{$prefix}offcanvas-padding-x);
+ padding: var(--offcanvas-padding-y) var(--offcanvas-padding-x);
.btn-close {
- padding: calc(var(--#{$prefix}offcanvas-padding-y) * .5) calc(var(--#{$prefix}offcanvas-padding-x) * .5);
+ padding: calc(var(--offcanvas-padding-y) * .5) calc(var(--offcanvas-padding-x) * .5);
// Split properties to avoid invalid calc() function if value is 0
margin-inline-start: auto;
- margin-inline-end: calc(-.5 * var(--#{$prefix}offcanvas-padding-x));
- margin-top: calc(-.5 * var(--#{$prefix}offcanvas-padding-y));
- margin-bottom: calc(-.5 * var(--#{$prefix}offcanvas-padding-y));
+ margin-inline-end: calc(-.5 * var(--offcanvas-padding-x));
+ margin-top: calc(-.5 * var(--offcanvas-padding-y));
+ margin-bottom: calc(-.5 * var(--offcanvas-padding-y));
}
}
.offcanvas-title {
margin-bottom: 0;
- line-height: var(--#{$prefix}offcanvas-title-line-height);
+ line-height: var(--offcanvas-title-line-height);
}
.offcanvas-body {
flex-grow: 1;
- padding: var(--#{$prefix}offcanvas-padding-y) var(--#{$prefix}offcanvas-padding-x);
+ padding: var(--offcanvas-padding-y) var(--offcanvas-padding-x);
overflow-y: auto;
}
}
$pagination-font-size: $font-size-base !default;
-$pagination-color: var(--#{$prefix}link-color) !default;
-$pagination-bg: var(--#{$prefix}bg-body) !default;
-$pagination-border-radius: var(--#{$prefix}border-radius) !default;
-$pagination-border-width: var(--#{$prefix}border-width) !default;
+$pagination-color: var(--link-color) !default;
+$pagination-bg: var(--bg-body) !default;
+$pagination-border-radius: var(--border-radius) !default;
+$pagination-border-width: var(--border-width) !default;
$pagination-margin-start: calc(-1 * #{$pagination-border-width}) !default;
-$pagination-border-color: var(--#{$prefix}border-color) !default;
+$pagination-border-color: var(--border-color) !default;
-$pagination-focus-color: var(--#{$prefix}link-hover-color) !default;
-$pagination-focus-bg: var(--#{$prefix}secondary-bg) !default;
+$pagination-focus-color: var(--link-hover-color) !default;
+$pagination-focus-bg: var(--secondary-bg) !default;
-$pagination-hover-color: var(--#{$prefix}link-hover-color) !default;
-$pagination-hover-bg: var(--#{$prefix}tertiary-bg) !default;
-$pagination-hover-border-color: var(--#{$prefix}border-color) !default; // Todo in v6: remove this?
+$pagination-hover-color: var(--link-hover-color) !default;
+$pagination-hover-bg: var(--tertiary-bg) !default;
+$pagination-hover-border-color: var(--border-color) !default; // Todo in v6: remove this?
$pagination-active-color: $component-active-color !default;
$pagination-active-bg: $component-active-bg !default;
$pagination-active-border-color: $component-active-bg !default;
-$pagination-disabled-color: var(--#{$prefix}secondary-color) !default;
-$pagination-disabled-bg: var(--#{$prefix}secondary-bg) !default;
-$pagination-disabled-border-color: var(--#{$prefix}border-color) !default;
+$pagination-disabled-color: var(--secondary-color) !default;
+$pagination-disabled-bg: var(--secondary-bg) !default;
+$pagination-disabled-border-color: var(--border-color) !default;
$pagination-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
-$pagination-border-radius-sm: var(--#{$prefix}border-radius-sm) !default;
-$pagination-border-radius-lg: var(--#{$prefix}border-radius-lg) !default;
+$pagination-border-radius-sm: var(--border-radius-sm) !default;
+$pagination-border-radius-lg: var(--border-radius-lg) !default;
// scss-docs-end pagination-variables
// scss-docs-start pagination-mixin
@mixin pagination-size($padding-y, $padding-x, $font-size, $border-radius) {
- --#{$prefix}pagination-padding-x: #{$padding-x};
- --#{$prefix}pagination-padding-y: #{$padding-y};
- --#{$prefix}pagination-font-size: #{$font-size};
- --#{$prefix}pagination-border-radius: #{$border-radius};
+ --pagination-padding-x: #{$padding-x};
+ --pagination-padding-y: #{$padding-y};
+ --pagination-font-size: #{$font-size};
+ --pagination-border-radius: #{$border-radius};
}
// scss-docs-end pagination-mixin
@layer components {
.pagination {
// scss-docs-start pagination-css-vars
- --#{$prefix}pagination-padding-x: #{$pagination-padding-x};
- --#{$prefix}pagination-padding-y: #{$pagination-padding-y};
- --#{$prefix}pagination-font-size: #{$pagination-font-size};
- --#{$prefix}pagination-color: #{$pagination-color};
- --#{$prefix}pagination-bg: #{$pagination-bg};
- --#{$prefix}pagination-border-width: #{$pagination-border-width};
- --#{$prefix}pagination-border-color: #{$pagination-border-color};
- --#{$prefix}pagination-border-radius: #{$pagination-border-radius};
- --#{$prefix}pagination-hover-color: #{$pagination-hover-color};
- --#{$prefix}pagination-hover-bg: #{$pagination-hover-bg};
- --#{$prefix}pagination-hover-border-color: #{$pagination-hover-border-color};
- --#{$prefix}pagination-focus-color: #{$pagination-focus-color};
- --#{$prefix}pagination-focus-bg: #{$pagination-focus-bg};
- --#{$prefix}pagination-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};
+ --pagination-padding-x: #{$pagination-padding-x};
+ --pagination-padding-y: #{$pagination-padding-y};
+ --pagination-font-size: #{$pagination-font-size};
+ --pagination-color: #{$pagination-color};
+ --pagination-bg: #{$pagination-bg};
+ --pagination-border-width: #{$pagination-border-width};
+ --pagination-border-color: #{$pagination-border-color};
+ --pagination-border-radius: #{$pagination-border-radius};
+ --pagination-hover-color: #{$pagination-hover-color};
+ --pagination-hover-bg: #{$pagination-hover-bg};
+ --pagination-hover-border-color: #{$pagination-hover-border-color};
+ --pagination-focus-color: #{$pagination-focus-color};
+ --pagination-focus-bg: #{$pagination-focus-bg};
+ --pagination-active-color: #{$pagination-active-color};
+ --pagination-active-bg: #{$pagination-active-bg};
+ --pagination-active-border-color: #{$pagination-active-border-color};
+ --pagination-disabled-color: #{$pagination-disabled-color};
+ --pagination-disabled-bg: #{$pagination-disabled-bg};
+ --pagination-disabled-border-color: #{$pagination-disabled-border-color};
// scss-docs-end pagination-css-vars
display: flex;
.page-link {
position: relative;
display: block;
- padding: var(--#{$prefix}pagination-padding-y) var(--#{$prefix}pagination-padding-x);
- font-size: var(--#{$prefix}pagination-font-size);
- color: var(--#{$prefix}pagination-color);
+ padding: var(--pagination-padding-y) var(--pagination-padding-x);
+ font-size: var(--pagination-font-size);
+ color: var(--pagination-color);
text-decoration: none;
- background-color: var(--#{$prefix}pagination-bg);
- border: var(--#{$prefix}pagination-border-width) solid var(--#{$prefix}pagination-border-color);
+ background-color: var(--pagination-bg);
+ border: var(--pagination-border-width) solid var(--pagination-border-color);
@include transition($pagination-transition);
&:hover {
z-index: 2;
- color: var(--#{$prefix}pagination-hover-color);
- background-color: var(--#{$prefix}pagination-hover-bg);
- border-color: var(--#{$prefix}pagination-hover-border-color);
+ color: var(--pagination-hover-color);
+ background-color: var(--pagination-hover-bg);
+ border-color: var(--pagination-hover-border-color);
}
&:focus-visible {
z-index: 3;
- color: var(--#{$prefix}pagination-focus-color);
- background-color: var(--#{$prefix}pagination-focus-bg);
+ color: var(--pagination-focus-color);
+ background-color: var(--pagination-focus-bg);
@include focus-ring(true);
}
&.active,
.active > & {
z-index: 3;
- color: var(--#{$prefix}pagination-active-color);
- @include gradient-bg(var(--#{$prefix}pagination-active-bg));
- border-color: var(--#{$prefix}pagination-active-border-color);
+ color: var(--pagination-active-color);
+ @include gradient-bg(var(--pagination-active-bg));
+ border-color: var(--pagination-active-border-color);
}
&.disabled,
.disabled > & {
- color: var(--#{$prefix}pagination-disabled-color);
+ color: var(--pagination-disabled-color);
pointer-events: none;
- background-color: var(--#{$prefix}pagination-disabled-bg);
- border-color: var(--#{$prefix}pagination-disabled-border-color);
+ background-color: var(--pagination-disabled-bg);
+ border-color: var(--pagination-disabled-border-color);
}
}
@if $pagination-margin-start == calc(-1 * #{$pagination-border-width}) {
&:first-child {
.page-link {
- @include border-start-radius(var(--#{$prefix}pagination-border-radius));
+ @include border-start-radius(var(--pagination-border-radius));
}
}
&:last-child {
.page-link {
- @include border-end-radius(var(--#{$prefix}pagination-border-radius));
+ @include border-end-radius(var(--pagination-border-radius));
}
}
} @else {
// Add border-radius to all pageLinks in case they have left margin
.page-link {
- @include border-radius(var(--#{$prefix}pagination-border-radius));
+ @include border-radius(var(--pagination-border-radius));
}
}
}
@use "mixins/reset-text" as *;
// scss-docs-start popover-variables
-$popover-font-size: var(--#{$prefix}font-size-sm) !default;
-$popover-bg: var(--#{$prefix}bg-body) !default;
+$popover-font-size: var(--font-size-sm) !default;
+$popover-bg: var(--bg-body) !default;
$popover-max-width: 280px !default;
-$popover-border-width: var(--#{$prefix}border-width) !default;
-$popover-border-color: var(--#{$prefix}border-color-translucent) !default;
-$popover-border-radius: var(--#{$prefix}border-radius-lg) !default;
+$popover-border-width: var(--border-width) !default;
+$popover-border-color: var(--border-color-translucent) !default;
+$popover-border-radius: var(--border-radius-lg) !default;
$popover-inner-border-radius: calc(#{$popover-border-radius} - #{$popover-border-width}) !default;
-$popover-box-shadow: var(--#{$prefix}box-shadow) !default;
+$popover-box-shadow: var(--box-shadow) !default;
$popover-header-font-size: $font-size-base !default;
-$popover-header-bg: var(--#{$prefix}bg-1) !default;
+$popover-header-bg: var(--bg-1) !default;
$popover-header-color: $headings-color !default;
$popover-header-padding-y: $spacer * .75 !default;
$popover-header-padding-x: $spacer !default;
-$popover-body-color: var(--#{$prefix}color-body) !default;
+$popover-body-color: var(--color-body) !default;
$popover-body-padding-y: $spacer * .75 !default;
$popover-body-padding-x: $spacer !default;
@layer components {
.popover {
// scss-docs-start popover-css-vars
- --#{$prefix}popover-zindex: #{$zindex-popover};
- --#{$prefix}popover-max-width: #{$popover-max-width};
- --#{$prefix}popover-font-size: #{$popover-font-size};
- --#{$prefix}popover-bg: #{$popover-bg};
- --#{$prefix}popover-border-width: #{$popover-border-width};
- --#{$prefix}popover-border-color: #{$popover-border-color};
- --#{$prefix}popover-border-radius: #{$popover-border-radius};
- --#{$prefix}popover-inner-border-radius: #{$popover-inner-border-radius};
- --#{$prefix}popover-box-shadow: #{$popover-box-shadow};
- --#{$prefix}popover-header-padding-x: #{$popover-header-padding-x};
- --#{$prefix}popover-header-padding-y: #{$popover-header-padding-y};
- --#{$prefix}popover-header-font-size: #{$popover-header-font-size};
- --#{$prefix}popover-header-color: #{$popover-header-color};
- --#{$prefix}popover-header-bg: #{$popover-header-bg};
- --#{$prefix}popover-body-padding-x: #{$popover-body-padding-x};
- --#{$prefix}popover-body-padding-y: #{$popover-body-padding-y};
- --#{$prefix}popover-body-color: #{$popover-body-color};
- --#{$prefix}popover-arrow-width: #{$popover-arrow-width};
- --#{$prefix}popover-arrow-height: #{$popover-arrow-height};
- --#{$prefix}popover-arrow-border: var(--#{$prefix}popover-border-color);
+ --popover-zindex: #{$zindex-popover};
+ --popover-max-width: #{$popover-max-width};
+ --popover-font-size: #{$popover-font-size};
+ --popover-bg: #{$popover-bg};
+ --popover-border-width: #{$popover-border-width};
+ --popover-border-color: #{$popover-border-color};
+ --popover-border-radius: #{$popover-border-radius};
+ --popover-inner-border-radius: #{$popover-inner-border-radius};
+ --popover-box-shadow: #{$popover-box-shadow};
+ --popover-header-padding-x: #{$popover-header-padding-x};
+ --popover-header-padding-y: #{$popover-header-padding-y};
+ --popover-header-font-size: #{$popover-header-font-size};
+ --popover-header-color: #{$popover-header-color};
+ --popover-header-bg: #{$popover-header-bg};
+ --popover-body-padding-x: #{$popover-body-padding-x};
+ --popover-body-padding-y: #{$popover-body-padding-y};
+ --popover-body-color: #{$popover-body-color};
+ --popover-arrow-width: #{$popover-arrow-width};
+ --popover-arrow-height: #{$popover-arrow-height};
+ --popover-arrow-border: var(--popover-border-color);
// scss-docs-end popover-css-vars
- z-index: var(--#{$prefix}popover-zindex);
+ z-index: var(--popover-zindex);
display: block;
- max-width: var(--#{$prefix}popover-max-width);
+ max-width: var(--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(--#{$prefix}popover-font-size);
+ font-size: var(--popover-font-size);
// Allow breaking very long words so they don't overflow the popover's bounds
word-wrap: break-word;
- background-color: var(--#{$prefix}popover-bg);
+ background-color: var(--popover-bg);
background-clip: padding-box;
- border: var(--#{$prefix}popover-border-width) solid var(--#{$prefix}popover-border-color);
- @include border-radius(var(--#{$prefix}popover-border-radius));
- @include box-shadow(var(--#{$prefix}popover-box-shadow));
+ border: var(--popover-border-width) solid var(--popover-border-color);
+ @include border-radius(var(--popover-border-radius));
+ @include box-shadow(var(--popover-box-shadow));
.popover-arrow {
display: block;
- width: var(--#{$prefix}popover-arrow-width);
- height: var(--#{$prefix}popover-arrow-height);
+ width: var(--popover-arrow-width);
+ height: var(--popover-arrow-height);
&::before,
&::after {
.bs-popover-top {
> .popover-arrow {
- bottom: calc(-1 * (var(--#{$prefix}popover-arrow-height)) - var(--#{$prefix}popover-border-width));
+ bottom: calc(-1 * (var(--popover-arrow-height)) - var(--popover-border-width));
&::before,
&::after {
- border-width: var(--#{$prefix}popover-arrow-height) calc(var(--#{$prefix}popover-arrow-width) * .5) 0;
+ border-width: var(--popover-arrow-height) calc(var(--popover-arrow-width) * .5) 0;
}
&::before {
bottom: 0;
- border-block-start-color: var(--#{$prefix}popover-arrow-border);
+ border-block-start-color: var(--popover-arrow-border);
}
&::after {
- bottom: var(--#{$prefix}popover-border-width);
- border-block-start-color: var(--#{$prefix}popover-bg);
+ bottom: var(--popover-border-width);
+ border-block-start-color: var(--popover-bg);
}
}
}
.bs-popover-end {
> .popover-arrow {
- left: calc(-1 * (var(--#{$prefix}popover-arrow-height)) - var(--#{$prefix}popover-border-width));
- width: var(--#{$prefix}popover-arrow-height);
- height: var(--#{$prefix}popover-arrow-width);
+ left: calc(-1 * (var(--popover-arrow-height)) - var(--popover-border-width));
+ width: var(--popover-arrow-height);
+ height: var(--popover-arrow-width);
&::before,
&::after {
- border-width: calc(var(--#{$prefix}popover-arrow-width) * .5) var(--#{$prefix}popover-arrow-height) calc(var(--#{$prefix}popover-arrow-width) * .5) 0;
+ border-width: calc(var(--popover-arrow-width) * .5) var(--popover-arrow-height) calc(var(--popover-arrow-width) * .5) 0;
}
&::before {
left: 0;
- border-inline-end-color: var(--#{$prefix}popover-arrow-border);
+ border-inline-end-color: var(--popover-arrow-border);
}
&::after {
- left: var(--#{$prefix}popover-border-width);
- border-inline-end-color: var(--#{$prefix}popover-bg);
+ left: var(--popover-border-width);
+ border-inline-end-color: var(--popover-bg);
}
}
}
.bs-popover-bottom {
> .popover-arrow {
- top: calc(-1 * (var(--#{$prefix}popover-arrow-height)) - var(--#{$prefix}popover-border-width));
+ top: calc(-1 * (var(--popover-arrow-height)) - var(--popover-border-width));
&::before,
&::after {
- border-width: 0 calc(var(--#{$prefix}popover-arrow-width) * .5) var(--#{$prefix}popover-arrow-height);
+ border-width: 0 calc(var(--popover-arrow-width) * .5) var(--popover-arrow-height);
}
&::before {
top: 0;
- border-block-end-color: var(--#{$prefix}popover-arrow-border);
+ border-block-end-color: var(--popover-arrow-border);
}
&::after {
- top: var(--#{$prefix}popover-border-width);
- border-block-end-color: var(--#{$prefix}popover-bg);
+ top: var(--popover-border-width);
+ border-block-end-color: var(--popover-bg);
}
}
top: 0;
left: 50%;
display: block;
- width: var(--#{$prefix}popover-arrow-width);
- margin-inline-start: calc(-.5 * var(--#{$prefix}popover-arrow-width));
+ width: var(--popover-arrow-width);
+ margin-inline-start: calc(-.5 * var(--popover-arrow-width));
content: "";
- border-block-end: var(--#{$prefix}popover-border-width) solid var(--#{$prefix}popover-header-bg);
+ border-block-end: var(--popover-border-width) solid var(--popover-header-bg);
}
}
.bs-popover-start {
> .popover-arrow {
- right: calc(-1 * (var(--#{$prefix}popover-arrow-height)) - var(--#{$prefix}popover-border-width));
- width: var(--#{$prefix}popover-arrow-height);
- height: var(--#{$prefix}popover-arrow-width);
+ right: calc(-1 * (var(--popover-arrow-height)) - var(--popover-border-width));
+ width: var(--popover-arrow-height);
+ height: var(--popover-arrow-width);
&::before,
&::after {
- border-width: calc(var(--#{$prefix}popover-arrow-width) * .5) 0 calc(var(--#{$prefix}popover-arrow-width) * .5) var(--#{$prefix}popover-arrow-height);
+ border-width: calc(var(--popover-arrow-width) * .5) 0 calc(var(--popover-arrow-width) * .5) var(--popover-arrow-height);
}
&::before {
right: 0;
- border-inline-start-color: var(--#{$prefix}popover-arrow-border);
+ border-inline-start-color: var(--popover-arrow-border);
}
&::after {
- right: var(--#{$prefix}popover-border-width);
- border-inline-start-color: var(--#{$prefix}popover-bg);
+ right: var(--popover-border-width);
+ border-inline-start-color: var(--popover-bg);
}
}
}
// Offset the popover to account for the popover arrow
.popover-header {
- padding: var(--#{$prefix}popover-header-padding-y) var(--#{$prefix}popover-header-padding-x);
+ padding: var(--popover-header-padding-y) var(--popover-header-padding-x);
margin-bottom: 0; // Reset the default from Reboot
- font-size: var(--#{$prefix}popover-header-font-size);
- color: var(--#{$prefix}popover-header-color);
- background-color: var(--#{$prefix}popover-header-bg);
- border-block-end: var(--#{$prefix}popover-border-width) solid var(--#{$prefix}popover-border-color);
- @include border-top-radius(var(--#{$prefix}popover-inner-border-radius));
+ font-size: var(--popover-header-font-size);
+ color: var(--popover-header-color);
+ background-color: var(--popover-header-bg);
+ border-block-end: var(--popover-border-width) solid var(--popover-border-color);
+ @include border-top-radius(var(--popover-inner-border-radius));
&:empty {
display: none;
}
.popover-body {
- padding: var(--#{$prefix}popover-body-padding-y) var(--#{$prefix}popover-body-padding-x);
- color: var(--#{$prefix}popover-body-color);
+ padding: var(--popover-body-padding-y) var(--popover-body-padding-x);
+ color: var(--popover-body-color);
}
}
// scss-docs-start progress-variables
$progress-height: 1rem !default;
$progress-font-size: $font-size-base * .75 !default;
-$progress-bg: var(--#{$prefix}secondary-bg) !default;
-$progress-border-radius: var(--#{$prefix}border-radius) !default;
-$progress-box-shadow: var(--#{$prefix}box-shadow-inset) !default;
+$progress-bg: var(--secondary-bg) !default;
+$progress-border-radius: var(--border-radius) !default;
+$progress-box-shadow: var(--box-shadow-inset) !default;
$progress-bar-color: $white !default;
-$progress-bar-bg: var(--#{$prefix}primary-bg) !default;
+$progress-bar-bg: var(--primary-bg) !default;
$progress-bar-animation-timing: 1s linear infinite !default;
$progress-bar-transition: width .6s ease !default;
// scss-docs-end progress-variables
// scss-docs-start progress-keyframes
@if $enable-transitions {
@keyframes progress-bar-stripes {
- 0% { background-position-x: var(--#{$prefix}progress-height); }
+ 0% { background-position-x: var(--progress-height); }
}
}
// scss-docs-end progress-keyframes
.progress,
.progress-stacked {
// scss-docs-start progress-css-vars
- --#{$prefix}progress-height: #{$progress-height};
- --#{$prefix}progress-font-size: #{$progress-font-size};
- --#{$prefix}progress-bg: #{$progress-bg};
- --#{$prefix}progress-border-radius: #{$progress-border-radius};
- --#{$prefix}progress-box-shadow: #{$progress-box-shadow};
- --#{$prefix}progress-bar-color: #{$progress-bar-color};
- --#{$prefix}progress-bar-bg: #{$progress-bar-bg};
- --#{$prefix}progress-bar-transition: #{$progress-bar-transition};
+ --progress-height: #{$progress-height};
+ --progress-font-size: #{$progress-font-size};
+ --progress-bg: #{$progress-bg};
+ --progress-border-radius: #{$progress-border-radius};
+ --progress-box-shadow: #{$progress-box-shadow};
+ --progress-bar-color: #{$progress-bar-color};
+ --progress-bar-bg: #{$progress-bar-bg};
+ --progress-bar-transition: #{$progress-bar-transition};
// scss-docs-end progress-css-vars
display: flex;
- height: var(--#{$prefix}progress-height);
+ height: var(--progress-height);
overflow: hidden; // force rounded corners by cropping it
- font-size: var(--#{$prefix}progress-font-size);
- background-color: var(--#{$prefix}progress-bg);
- @include border-radius(var(--#{$prefix}progress-border-radius));
- @include box-shadow(var(--#{$prefix}progress-box-shadow));
+ font-size: var(--progress-font-size);
+ background-color: var(--progress-bg);
+ @include border-radius(var(--progress-border-radius));
+ @include box-shadow(var(--progress-box-shadow));
}
.progress-bar {
flex-direction: column;
justify-content: center;
overflow: hidden;
- color: var(--#{$prefix}progress-bar-color);
+ color: var(--progress-bar-color);
text-align: center;
white-space: nowrap;
- background-color: var(--#{$prefix}progress-bar-bg);
- @include transition(var(--#{$prefix}progress-bar-transition));
+ background-color: var(--progress-bar-bg);
+ @include transition(var(--progress-bar-transition));
}
.progress-bar-striped {
@include gradient-striped();
- background-size: var(--#{$prefix}progress-height) var(--#{$prefix}progress-height);
+ background-size: var(--progress-height) var(--progress-height);
}
.progress-stacked > .progress {
// Generate semantic theme colors
@each $color-name, $color-map in $new-theme-colors {
@each $key, $value in $color-map {
- --#{$prefix}#{$color-name}-#{$key}: #{$value};
+ --#{$color-name}-#{$key}: #{$value};
}
}
@each $color, $value in $theme-bgs {
- --#{$prefix}bg-#{$color}: #{$value};
+ --bg-#{$color}: #{$value};
}
@each $color, $value in $theme-fgs {
- --#{$prefix}fg-#{$color}: #{$value};
+ --fg-#{$color}: #{$value};
}
@each $color, $value in $theme-borders {
- --#{$prefix}border-#{$color}: #{$value};
+ --border-#{$color}: #{$value};
}
- --#{$prefix}black: #{$black};
- --#{$prefix}white: #{$white};
+ --black: #{$black};
+ --white: #{$white};
// scss-docs-end root-theme-variables
}
// Note: Custom variable values only support SassScript inside `#{}`.
- --#{$prefix}white-rgb: #{to-rgb($white)};
- --#{$prefix}black-rgb: #{to-rgb($black)};
+ --white-rgb: #{to-rgb($white)};
+ --black-rgb: #{to-rgb($black)};
// Fonts
// Note: Use `inspect` for lists so that quoted items keep the quotes.
// See https://github.com/sass/sass/issues/2383#issuecomment-336349172
- --#{$prefix}font-sans-serif: #{meta.inspect($font-family-sans-serif)};
- --#{$prefix}font-monospace: #{meta.inspect($font-family-monospace)};
- --#{$prefix}gradient: #{$gradient};
+ --font-sans-serif: #{meta.inspect($font-family-sans-serif)};
+ --font-monospace: #{meta.inspect($font-family-monospace)};
+ --gradient: #{$gradient};
// Root and body
// scss-docs-start root-body-variables
@if $font-size-root != null {
- --#{$prefix}root-font-size: #{$font-size-root};
+ --root-font-size: #{$font-size-root};
}
- --#{$prefix}body-font-family: #{meta.inspect($font-family-base)};
+ --body-font-family: #{meta.inspect($font-family-base)};
// scss-docs-start root-font-size-variables
- --#{$prefix}font-size-base: #{$font-size-base}; // 14px
-
- --#{$prefix}font-size-xs: .75rem;
- --#{$prefix}font-size-sm: .875rem;
- --#{$prefix}font-size-md: 1rem;
- --#{$prefix}font-size-lg: clamp(1.25rem, 1rem + .625vw, 1.5rem);
- --#{$prefix}font-size-xl: clamp(1.5rem, 1.1rem + .75vw, 1.75rem);
- --#{$prefix}font-size-2xl: clamp(1.75rem, 1.3rem + 1vw, 2rem);
- --#{$prefix}font-size-3xl: clamp(2rem, 1.5rem + 1.875vw, 2.5rem);
- --#{$prefix}font-size-4xl: clamp(2.25rem, 1.75rem + 2.5vw, 3rem);
- --#{$prefix}font-size-5xl: clamp(3rem, 2rem + 5vw, 4rem);
- --#{$prefix}font-size-6xl: clamp(3.75rem, 2.5rem + 6.25vw, 5rem);
-
- --#{$prefix}line-height-xs: 1.5;
- --#{$prefix}line-height-sm: 1.5;
- --#{$prefix}line-height-md: 1.5;
- --#{$prefix}line-height-lg: 1.5;
- --#{$prefix}line-height-xl: calc(2.5 / 1.75);
- --#{$prefix}line-height-2xl: calc(3 / 2.25);
- --#{$prefix}line-height-3xl: 1.2;
- --#{$prefix}line-height-4xl: 1.1;
- --#{$prefix}line-height-5xl: 1.1;
- --#{$prefix}line-height-6xl: 1;
+ --font-size-base: #{$font-size-base}; // 14px
+
+ --font-size-xs: .75rem;
+ --font-size-sm: .875rem;
+ --font-size-md: 1rem;
+ --font-size-lg: clamp(1.25rem, 1rem + .625vw, 1.5rem);
+ --font-size-xl: clamp(1.5rem, 1.1rem + .75vw, 1.75rem);
+ --font-size-2xl: clamp(1.75rem, 1.3rem + 1vw, 2rem);
+ --font-size-3xl: clamp(2rem, 1.5rem + 1.875vw, 2.5rem);
+ --font-size-4xl: clamp(2.25rem, 1.75rem + 2.5vw, 3rem);
+ --font-size-5xl: clamp(3rem, 2rem + 5vw, 4rem);
+ --font-size-6xl: clamp(3.75rem, 2.5rem + 6.25vw, 5rem);
+
+ --line-height-xs: 1.5;
+ --line-height-sm: 1.5;
+ --line-height-md: 1.5;
+ --line-height-lg: 1.5;
+ --line-height-xl: calc(2.5 / 1.75);
+ --line-height-2xl: calc(3 / 2.25);
+ --line-height-3xl: 1.2;
+ --line-height-4xl: 1.1;
+ --line-height-5xl: 1.1;
+ --line-height-6xl: 1;
// scss-docs-end root-font-size-variables
- --#{$prefix}body-font-size: #{$font-size-base};
- --#{$prefix}body-font-weight: #{$font-weight-base};
- --#{$prefix}body-line-height: #{$line-height-base};
+ --body-font-size: #{$font-size-base};
+ --body-font-weight: #{$font-weight-base};
+ --body-line-height: #{$line-height-base};
@if $body-text-align != null {
- --#{$prefix}body-text-align: #{$body-text-align};
+ --body-text-align: #{$body-text-align};
}
- --#{$prefix}body-color-rgb: #{to-rgb($body-color)};
- --#{$prefix}body-bg-rgb: #{to-rgb($body-bg)};
+ --body-color-rgb: #{to-rgb($body-color)};
+ --body-bg-rgb: #{to-rgb($body-bg)};
// scss-docs-end root-body-variables
- --#{$prefix}heading-color: #{$headings-color};
+ --heading-color: #{$headings-color};
- --#{$prefix}link-color: light-dark(var(--#{$prefix}primary-base), var(--#{$prefix}primary-text));
- --#{$prefix}link-decoration: #{$link-decoration};
- --#{$prefix}link-hover-color: color-mix(in oklch, var(--#{$prefix}link-color) 90%, #000);
+ --link-color: light-dark(var(--primary-base), var(--primary-text));
+ --link-decoration: #{$link-decoration};
+ --link-hover-color: color-mix(in oklch, var(--link-color) 90%, #000);
- --#{$prefix}code-color: #{$code-color};
- --#{$prefix}highlight-color: #{$mark-color};
- --#{$prefix}highlight-bg: #{$mark-bg};
+ --code-color: #{$code-color};
+ --highlight-color: #{$mark-color};
+ --highlight-bg: #{$mark-bg};
// scss-docs-start root-border-var
- --#{$prefix}border-width: #{$border-width};
- --#{$prefix}border-style: #{$border-style};
- --#{$prefix}border-color: #{$border-color};
- --#{$prefix}border-color-translucent: #{$border-color-translucent};
+ --border-width: #{$border-width};
+ --border-style: #{$border-style};
+ --border-color: #{$border-color};
+ --border-color-translucent: #{$border-color-translucent};
// scss-docs-end root-border-var
// scss-docs-start root-border-radius-var
- --#{$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};
+ --border-radius: #{$border-radius};
+ --border-radius-sm: #{$border-radius-sm};
+ --border-radius-lg: #{$border-radius-lg};
+ --border-radius-xl: #{$border-radius-xl};
+ --border-radius-2xl: #{$border-radius-2xl};
+ --border-radius-pill: #{$border-radius-pill};
// scss-docs-end root-border-radius-var
- --#{$prefix}box-shadow: #{$box-shadow};
- --#{$prefix}box-shadow-sm: #{$box-shadow-sm};
- --#{$prefix}box-shadow-lg: #{$box-shadow-lg};
- --#{$prefix}box-shadow-inset: #{$box-shadow-inset};
+ --box-shadow: #{$box-shadow};
+ --box-shadow-sm: #{$box-shadow-sm};
+ --box-shadow-lg: #{$box-shadow-lg};
+ --box-shadow-inset: #{$box-shadow-inset};
// Focus styles
// scss-docs-start root-focus-variables
- --#{$prefix}focus-ring-width: 3px;
- --#{$prefix}focus-ring-offset: 1px;
- --#{$prefix}focus-ring-color: var(--#{$prefix}primary-focus-ring);
- --#{$prefix}focus-ring: var(--#{$prefix}focus-ring-width) solid var(--#{$prefix}focus-ring-color);
+ --focus-ring-width: 3px;
+ --focus-ring-offset: 1px;
+ --focus-ring-color: var(--primary-focus-ring);
+ --focus-ring: var(--focus-ring-width) solid var(--focus-ring-color);
// scss-docs-end root-focus-variables
// scss-docs-start root-form-validation-variables
- --#{$prefix}form-valid-color: #{$form-valid-color};
- --#{$prefix}form-valid-border-color: #{$form-valid-border-color};
- --#{$prefix}form-invalid-color: #{$form-invalid-color};
- --#{$prefix}form-invalid-border-color: #{$form-invalid-border-color};
+ --form-valid-color: #{$form-valid-color};
+ --form-valid-border-color: #{$form-valid-border-color};
+ --form-invalid-color: #{$form-invalid-color};
+ --form-invalid-border-color: #{$form-invalid-border-color};
// scss-docs-end root-form-validation-variables
}
color-scheme: dark;
// scss-docs-start root-dark-mode-vars
- --#{$prefix}emphasis-color: #{$body-emphasis-color-dark};
- --#{$prefix}emphasis-color-rgb: #{to-rgb($body-emphasis-color-dark)};
- --#{$prefix}heading-color: #{$headings-color-dark};
+ --emphasis-color: #{$body-emphasis-color-dark};
+ --emphasis-color-rgb: #{to-rgb($body-emphasis-color-dark)};
+ --heading-color: #{$headings-color-dark};
- --#{$prefix}border-color: #{$border-color-dark};
- --#{$prefix}border-color-translucent: #{$border-color-translucent-dark};
+ --border-color: #{$border-color-dark};
+ --border-color-translucent: #{$border-color-translucent-dark};
- --#{$prefix}form-valid-color: #{$form-valid-color-dark};
- --#{$prefix}form-valid-border-color: #{$form-valid-border-color-dark};
- --#{$prefix}form-invalid-color: #{$form-invalid-color-dark};
- --#{$prefix}form-invalid-border-color: #{$form-invalid-border-color-dark};
+ --form-valid-color: #{$form-valid-color-dark};
+ --form-valid-border-color: #{$form-valid-border-color-dark};
+ --form-invalid-color: #{$form-invalid-color-dark};
+ --form-invalid-border-color: #{$form-invalid-border-color-dark};
// scss-docs-end root-dark-mode-vars
}
}
.spinner-border {
display: inline-block;
flex-shrink: 0;
- width: var(--#{$prefix}spinner-width);
- height: var(--#{$prefix}spinner-height);
- vertical-align: var(--#{$prefix}spinner-vertical-align);
+ width: var(--spinner-width);
+ height: var(--spinner-height);
+ vertical-align: var(--spinner-vertical-align);
// stylelint-disable-next-line property-disallowed-list
border-radius: 50%;
- animation: var(--#{$prefix}spinner-animation-speed) linear infinite var(--#{$prefix}spinner-animation-name);
+ animation: var(--spinner-animation-speed) linear infinite var(--spinner-animation-name);
}
// scss-docs-start spinner-border-keyframes
.spinner-border {
// scss-docs-start spinner-border-css-vars
- --#{$prefix}spinner-width: #{$spinner-width};
- --#{$prefix}spinner-height: #{$spinner-height};
- --#{$prefix}spinner-vertical-align: #{$spinner-vertical-align};
- --#{$prefix}spinner-border-width: #{$spinner-border-width};
- --#{$prefix}spinner-animation-speed: #{$spinner-animation-speed};
- --#{$prefix}spinner-animation-name: spinner-border;
+ --spinner-width: #{$spinner-width};
+ --spinner-height: #{$spinner-height};
+ --spinner-vertical-align: #{$spinner-vertical-align};
+ --spinner-border-width: #{$spinner-border-width};
+ --spinner-animation-speed: #{$spinner-animation-speed};
+ --spinner-animation-name: spinner-border;
// scss-docs-end spinner-border-css-vars
- border: var(--#{$prefix}spinner-border-width) solid currentcolor;
+ border: var(--spinner-border-width) solid currentcolor;
border-inline-end-color: transparent;
}
.spinner-border-sm {
// scss-docs-start spinner-border-sm-css-vars
- --#{$prefix}spinner-width: #{$spinner-width-sm};
- --#{$prefix}spinner-height: #{$spinner-height-sm};
- --#{$prefix}spinner-border-width: #{$spinner-border-width-sm};
+ --spinner-width: #{$spinner-width-sm};
+ --spinner-height: #{$spinner-height-sm};
+ --spinner-border-width: #{$spinner-border-width-sm};
// scss-docs-end spinner-border-sm-css-vars
}
.spinner-grow {
// scss-docs-start spinner-grow-css-vars
- --#{$prefix}spinner-width: #{$spinner-width};
- --#{$prefix}spinner-height: #{$spinner-height};
- --#{$prefix}spinner-vertical-align: #{$spinner-vertical-align};
- --#{$prefix}spinner-animation-speed: #{$spinner-animation-speed};
- --#{$prefix}spinner-animation-name: spinner-grow;
+ --spinner-width: #{$spinner-width};
+ --spinner-height: #{$spinner-height};
+ --spinner-vertical-align: #{$spinner-vertical-align};
+ --spinner-animation-speed: #{$spinner-animation-speed};
+ --spinner-animation-name: spinner-grow;
// scss-docs-end spinner-grow-css-vars
background-color: currentcolor;
}
.spinner-grow-sm {
- --#{$prefix}spinner-width: #{$spinner-width-sm};
- --#{$prefix}spinner-height: #{$spinner-height-sm};
+ --spinner-width: #{$spinner-width-sm};
+ --spinner-height: #{$spinner-height-sm};
}
@if $enable-reduced-motion {
@media (prefers-reduced-motion: reduce) {
.spinner-border,
.spinner-grow {
- --#{$prefix}spinner-animation-speed: #{$spinner-animation-speed * 2};
+ --spinner-animation-speed: #{$spinner-animation-speed * 2};
}
}
}
@each $color-name, $color-map in $new-theme-colors {
.theme-#{$color-name} {
@each $key, $value in $color-map {
- --#{$prefix}theme-#{$key}: var(--#{$prefix}#{$color-name}-#{$key});
+ --theme-#{$key}: var(--#{$color-name}-#{$key});
}
}
}
@if meta.type-of($value) == "map" {
@include create-css-vars($value, $current-key);
} @else {
- --#{$prefix}#{$current-key}: #{$value};
+ --#{$current-key}: #{$value};
}
}
}
// scss-docs-start theme-colors
$new-theme-colors: (
"primary": (
- "base": var(--#{$prefix}blue-500),
- "text": light-dark(var(--#{$prefix}blue-600), var(--#{$prefix}blue-400)),
- "text-emphasis": light-dark(var(--#{$prefix}blue-800), var(--#{$prefix}blue-200)),
- "bg": var(--#{$prefix}blue-500),
- "bg-subtle": light-dark(var(--#{$prefix}blue-100), var(--#{$prefix}blue-900)),
- "bg-muted": light-dark(var(--#{$prefix}blue-200), var(--#{$prefix}blue-800)),
- "border": light-dark(var(--#{$prefix}blue-300), var(--#{$prefix}blue-600)),
- "focus-ring": color-mix(in oklch, light-dark(var(--#{$prefix}blue-500), var(--#{$prefix}blue-400)) 50%, var(--#{$prefix}bg-body)),
- "contrast": var(--#{$prefix}white)
+ "base": var(--blue-500),
+ "text": light-dark(var(--blue-600), var(--blue-400)),
+ "text-emphasis": light-dark(var(--blue-800), var(--blue-200)),
+ "bg": var(--blue-500),
+ "bg-subtle": light-dark(var(--blue-100), var(--blue-900)),
+ "bg-muted": light-dark(var(--blue-200), var(--blue-800)),
+ "border": light-dark(var(--blue-300), var(--blue-600)),
+ "focus-ring": color-mix(in oklch, light-dark(var(--blue-500), var(--blue-400)) 50%, var(--bg-body)),
+ "contrast": var(--white)
),
"accent": (
- "base": var(--#{$prefix}indigo-500),
- "text": light-dark(var(--#{$prefix}indigo-600), color-mix(in oklch, var(--#{$prefix}indigo-400), var(--#{$prefix}indigo-300))),
- "text-emphasis": light-dark(var(--#{$prefix}indigo-800), var(--#{$prefix}indigo-300)),
- "bg": var(--#{$prefix}indigo-500),
- "bg-subtle": light-dark(var(--#{$prefix}indigo-100), var(--#{$prefix}indigo-900)),
- "bg-muted": light-dark(var(--#{$prefix}indigo-200), var(--#{$prefix}indigo-800)),
- "border": light-dark(var(--#{$prefix}indigo-300), var(--#{$prefix}indigo-600)),
- "focus-ring": color-mix(in oklch, light-dark(var(--#{$prefix}indigo-500), var(--#{$prefix}indigo-400)) 50%, var(--#{$prefix}bg-body)),
- "contrast": var(--#{$prefix}white)
+ "base": var(--indigo-500),
+ "text": light-dark(var(--indigo-600), color-mix(in oklch, var(--indigo-400), var(--indigo-300))),
+ "text-emphasis": light-dark(var(--indigo-800), var(--indigo-300)),
+ "bg": var(--indigo-500),
+ "bg-subtle": light-dark(var(--indigo-100), var(--indigo-900)),
+ "bg-muted": light-dark(var(--indigo-200), var(--indigo-800)),
+ "border": light-dark(var(--indigo-300), var(--indigo-600)),
+ "focus-ring": color-mix(in oklch, light-dark(var(--indigo-500), var(--indigo-400)) 50%, var(--bg-body)),
+ "contrast": var(--white)
),
"success": (
- "base": var(--#{$prefix}green-500),
- "text": light-dark(var(--#{$prefix}green-600), var(--#{$prefix}green-400)),
- "text-emphasis": light-dark(var(--#{$prefix}green-800), var(--#{$prefix}green-300)),
- "bg": var(--#{$prefix}green-500),
- "bg-subtle": light-dark(var(--#{$prefix}green-100), var(--#{$prefix}green-900)),
- "bg-muted": light-dark(var(--#{$prefix}green-200), var(--#{$prefix}green-800)),
- "border": light-dark(var(--#{$prefix}green-300), var(--#{$prefix}green-600)),
- "focus-ring": color-mix(in oklch, light-dark(var(--#{$prefix}green-500), var(--#{$prefix}green-400)) 50%, var(--#{$prefix}bg-body)),
- "contrast": var(--#{$prefix}white)
+ "base": var(--green-500),
+ "text": light-dark(var(--green-600), var(--green-400)),
+ "text-emphasis": light-dark(var(--green-800), var(--green-300)),
+ "bg": var(--green-500),
+ "bg-subtle": light-dark(var(--green-100), var(--green-900)),
+ "bg-muted": light-dark(var(--green-200), var(--green-800)),
+ "border": light-dark(var(--green-300), var(--green-600)),
+ "focus-ring": color-mix(in oklch, light-dark(var(--green-500), var(--green-400)) 50%, var(--bg-body)),
+ "contrast": var(--white)
),
"danger": (
- "base": var(--#{$prefix}red-500),
- "text": light-dark(var(--#{$prefix}red-600), var(--#{$prefix}red-400)),
- "text-emphasis": light-dark(var(--#{$prefix}red-800), var(--#{$prefix}red-300)),
- "bg": var(--#{$prefix}red-500),
- "bg-subtle": light-dark(var(--#{$prefix}red-100), var(--#{$prefix}red-900)),
- "bg-muted": light-dark(var(--#{$prefix}red-200), var(--#{$prefix}red-800)),
- "border": light-dark(var(--#{$prefix}red-300), var(--#{$prefix}red-600)),
- "focus-ring": color-mix(in oklch, light-dark(var(--#{$prefix}red-500), var(--#{$prefix}red-400)) 50%, var(--#{$prefix}bg-body)),
- "contrast": var(--#{$prefix}white)
+ "base": var(--red-500),
+ "text": light-dark(var(--red-600), var(--red-400)),
+ "text-emphasis": light-dark(var(--red-800), var(--red-300)),
+ "bg": var(--red-500),
+ "bg-subtle": light-dark(var(--red-100), var(--red-900)),
+ "bg-muted": light-dark(var(--red-200), var(--red-800)),
+ "border": light-dark(var(--red-300), var(--red-600)),
+ "focus-ring": color-mix(in oklch, light-dark(var(--red-500), var(--red-400)) 50%, var(--bg-body)),
+ "contrast": var(--white)
),
"warning": (
- "base": var(--#{$prefix}yellow-500),
- "text": light-dark(var(--#{$prefix}yellow-700), var(--#{$prefix}yellow-400)),
- "text-emphasis": light-dark(var(--#{$prefix}yellow-800), var(--#{$prefix}yellow-300)),
- "bg": var(--#{$prefix}yellow-500),
- "bg-subtle": light-dark(var(--#{$prefix}yellow-100), var(--#{$prefix}yellow-900)),
- "bg-muted": light-dark(var(--#{$prefix}yellow-200), var(--#{$prefix}yellow-800)),
- "border": light-dark(var(--#{$prefix}yellow-300), var(--#{$prefix}yellow-600)),
- "focus-ring": color-mix(in oklch, light-dark(var(--#{$prefix}yellow-500), var(--#{$prefix}yellow-400)) 50%, var(--#{$prefix}bg-body)),
- "contrast": var(--#{$prefix}gray-900)
+ "base": var(--yellow-500),
+ "text": light-dark(var(--yellow-700), var(--yellow-400)),
+ "text-emphasis": light-dark(var(--yellow-800), var(--yellow-300)),
+ "bg": var(--yellow-500),
+ "bg-subtle": light-dark(var(--yellow-100), var(--yellow-900)),
+ "bg-muted": light-dark(var(--yellow-200), var(--yellow-800)),
+ "border": light-dark(var(--yellow-300), var(--yellow-600)),
+ "focus-ring": color-mix(in oklch, light-dark(var(--yellow-500), var(--yellow-400)) 50%, var(--bg-body)),
+ "contrast": var(--gray-900)
),
"info": (
- "base": var(--#{$prefix}cyan-500),
- "text": light-dark(var(--#{$prefix}cyan-600), var(--#{$prefix}cyan-400)),
- "text-emphasis": light-dark(var(--#{$prefix}cyan-800), var(--#{$prefix}cyan-300)),
- "bg": var(--#{$prefix}cyan-500),
- "bg-subtle": light-dark(var(--#{$prefix}cyan-100), var(--#{$prefix}cyan-900)),
- "bg-muted": light-dark(var(--#{$prefix}cyan-200), var(--#{$prefix}cyan-800)),
- "border": light-dark(var(--#{$prefix}cyan-300), var(--#{$prefix}cyan-600)),
- "focus-ring": color-mix(in oklch, light-dark(var(--#{$prefix}cyan-500), var(--#{$prefix}cyan-400)) 50%, var(--#{$prefix}bg-body)),
- "contrast": var(--#{$prefix}gray-900)
+ "base": var(--cyan-500),
+ "text": light-dark(var(--cyan-600), var(--cyan-400)),
+ "text-emphasis": light-dark(var(--cyan-800), var(--cyan-300)),
+ "bg": var(--cyan-500),
+ "bg-subtle": light-dark(var(--cyan-100), var(--cyan-900)),
+ "bg-muted": light-dark(var(--cyan-200), var(--cyan-800)),
+ "border": light-dark(var(--cyan-300), var(--cyan-600)),
+ "focus-ring": color-mix(in oklch, light-dark(var(--cyan-500), var(--cyan-400)) 50%, var(--bg-body)),
+ "contrast": var(--gray-900)
),
"inverse": (
- "base": var(--#{$prefix}gray-900),
- "text": light-dark(var(--#{$prefix}gray-900), var(--#{$prefix}gray-200)),
- "text-emphasis": light-dark(var(--#{$prefix}gray-975), var(--#{$prefix}white)),
- "bg": light-dark(var(--#{$prefix}gray-900), var(--#{$prefix}gray-025)),
- "bg-subtle": light-dark(var(--#{$prefix}gray-100), var(--#{$prefix}gray-900)),
- "bg-muted": light-dark(var(--#{$prefix}gray-200), var(--#{$prefix}gray-300)),
- "border": light-dark(var(--#{$prefix}gray-400), var(--#{$prefix}gray-100)),
- "focus-ring": color-mix(in oklch, light-dark(var(--#{$prefix}gray-900), var(--#{$prefix}gray-100)) 50%, var(--#{$prefix}bg-body)),
- "contrast": light-dark(var(--#{$prefix}white), var(--#{$prefix}gray-900))
+ "base": var(--gray-900),
+ "text": light-dark(var(--gray-900), var(--gray-200)),
+ "text-emphasis": light-dark(var(--gray-975), var(--white)),
+ "bg": light-dark(var(--gray-900), var(--gray-025)),
+ "bg-subtle": light-dark(var(--gray-100), var(--gray-900)),
+ "bg-muted": light-dark(var(--gray-200), var(--gray-300)),
+ "border": light-dark(var(--gray-400), var(--gray-100)),
+ "focus-ring": color-mix(in oklch, light-dark(var(--gray-900), var(--gray-100)) 50%, var(--bg-body)),
+ "contrast": light-dark(var(--white), var(--gray-900))
),
"secondary": (
- "base": var(--#{$prefix}gray-200),
- "text": light-dark(var(--#{$prefix}gray-600), var(--#{$prefix}gray-400)),
- "text-emphasis": light-dark(var(--#{$prefix}gray-800), var(--#{$prefix}gray-200)),
- "bg": light-dark(var(--#{$prefix}gray-100), var(--#{$prefix}gray-600)),
- "bg-subtle": light-dark(var(--#{$prefix}gray-050), var(--#{$prefix}gray-800)),
- "bg-muted": light-dark(var(--#{$prefix}gray-100), var(--#{$prefix}gray-700)),
- "border": light-dark(var(--#{$prefix}gray-300), var(--#{$prefix}gray-600)),
- "focus-ring": color-mix(in oklch, light-dark(var(--#{$prefix}gray-500), var(--#{$prefix}gray-300)) 50%, var(--#{$prefix}bg-body)),
- "contrast": light-dark(var(--#{$prefix}gray-900), var(--#{$prefix}white))
+ "base": var(--gray-200),
+ "text": light-dark(var(--gray-600), var(--gray-400)),
+ "text-emphasis": light-dark(var(--gray-800), var(--gray-200)),
+ "bg": light-dark(var(--gray-100), var(--gray-600)),
+ "bg-subtle": light-dark(var(--gray-050), var(--gray-800)),
+ "bg-muted": light-dark(var(--gray-100), var(--gray-700)),
+ "border": light-dark(var(--gray-300), var(--gray-600)),
+ "focus-ring": color-mix(in oklch, light-dark(var(--gray-500), var(--gray-300)) 50%, var(--bg-body)),
+ "contrast": light-dark(var(--gray-900), var(--white))
)
) !default;
// scss-docs-end theme-colors
// mdo-do: consider using muted, subtle, ghost or something instead of linear scale?
$theme-bgs: (
- "body": light-dark(var(--#{$prefix}white), var(--#{$prefix}gray-975)),
- "1": light-dark(var(--#{$prefix}gray-025), var(--#{$prefix}gray-950)),
- "2": light-dark(var(--#{$prefix}gray-050), var(--#{$prefix}gray-900)),
- "3": light-dark(var(--#{$prefix}gray-100), var(--#{$prefix}gray-800)),
- "4": light-dark(var(--#{$prefix}gray-200), var(--#{$prefix}gray-700)),
- "white": var(--#{$prefix}white),
- "black": var(--#{$prefix}black),
+ "body": light-dark(var(--white), var(--gray-975)),
+ "1": light-dark(var(--gray-025), var(--gray-950)),
+ "2": light-dark(var(--gray-050), var(--gray-900)),
+ "3": light-dark(var(--gray-100), var(--gray-800)),
+ "4": light-dark(var(--gray-200), var(--gray-700)),
+ "white": var(--white),
+ "black": var(--black),
"transparent": transparent,
"inherit": inherit,
) !default;
$theme-fgs: (
- "body": light-dark(var(--#{$prefix}gray-900), var(--#{$prefix}gray-050)),
- "1": light-dark(var(--#{$prefix}gray-800), var(--#{$prefix}gray-200)),
- "2": light-dark(var(--#{$prefix}gray-700), var(--#{$prefix}gray-300)),
- "3": light-dark(var(--#{$prefix}gray-600), var(--#{$prefix}gray-500)),
- "4": light-dark(var(--#{$prefix}gray-500), var(--#{$prefix}gray-600)),
- "white": var(--#{$prefix}white),
- "black": var(--#{$prefix}black),
+ "body": light-dark(var(--gray-900), var(--gray-050)),
+ "1": light-dark(var(--gray-800), var(--gray-200)),
+ "2": light-dark(var(--gray-700), var(--gray-300)),
+ "3": light-dark(var(--gray-600), var(--gray-500)),
+ "4": light-dark(var(--gray-500), var(--gray-600)),
+ "white": var(--white),
+ "black": var(--black),
"inherit": inherit,
) !default;
$theme-borders: (
- "bg": var(--#{$prefix}bg-body),
- "body": light-dark(var(--#{$prefix}gray-300), var(--#{$prefix}gray-800)),
- "muted": light-dark(var(--#{$prefix}gray-200), var(--#{$prefix}gray-800)),
- "subtle": light-dark(var(--#{$prefix}gray-100), var(--#{$prefix}gray-900)),
- "emphasized": light-dark(var(--#{$prefix}gray-400), var(--#{$prefix}gray-600)),
- "white": var(--#{$prefix}white),
- "black": var(--#{$prefix}black),
+ "bg": var(--bg-body),
+ "body": light-dark(var(--gray-300), var(--gray-800)),
+ "muted": light-dark(var(--gray-200), var(--gray-800)),
+ "subtle": light-dark(var(--gray-100), var(--gray-900)),
+ "emphasized": light-dark(var(--gray-400), var(--gray-600)),
+ "white": var(--white),
+ "black": var(--black),
) !default;
$util-opacity: (
$toast-padding-y: .5rem !default;
$toast-font-size: .875rem !default;
$toast-color: null !default;
-$toast-background-color: rgba(var(--#{$prefix}body-bg-rgb), .85) !default;
-$toast-border-width: var(--#{$prefix}border-width) !default;
-$toast-border-color: var(--#{$prefix}border-color-translucent) !default;
-$toast-border-radius: var(--#{$prefix}border-radius) !default;
-$toast-box-shadow: var(--#{$prefix}box-shadow) !default;
+$toast-background-color: rgba(var(--body-bg-rgb), .85) !default;
+$toast-border-width: var(--border-width) !default;
+$toast-border-color: var(--border-color-translucent) !default;
+$toast-border-radius: var(--border-radius) !default;
+$toast-box-shadow: var(--box-shadow) !default;
$toast-spacing: $container-padding-x !default;
-$toast-header-color: var(--#{$prefix}secondary-color) !default;
-$toast-header-background-color: rgba(var(--#{$prefix}body-bg-rgb), .85) !default;
+$toast-header-color: var(--secondary-color) !default;
+$toast-header-background-color: rgba(var(--body-bg-rgb), .85) !default;
$toast-header-border-color: $toast-border-color !default;
// scss-docs-end toast-variables
@layer components {
.toast {
// scss-docs-start toast-css-vars
- --#{$prefix}toast-zindex: #{$zindex-toast};
- --#{$prefix}toast-padding-x: #{$toast-padding-x};
- --#{$prefix}toast-padding-y: #{$toast-padding-y};
- --#{$prefix}toast-spacing: #{$toast-spacing};
- --#{$prefix}toast-max-width: #{$toast-max-width};
- --#{$prefix}toast-font-size: #{$toast-font-size};
- --#{$prefix}toast-color: #{$toast-color};
- --#{$prefix}toast-bg: #{$toast-background-color};
- --#{$prefix}toast-border-width: #{$toast-border-width};
- --#{$prefix}toast-border-color: #{$toast-border-color};
- --#{$prefix}toast-border-radius: #{$toast-border-radius};
- --#{$prefix}toast-box-shadow: #{$toast-box-shadow};
- --#{$prefix}toast-header-color: #{$toast-header-color};
- --#{$prefix}toast-header-bg: #{$toast-header-background-color};
- --#{$prefix}toast-header-border-color: #{$toast-header-border-color};
+ --toast-zindex: #{$zindex-toast};
+ --toast-padding-x: #{$toast-padding-x};
+ --toast-padding-y: #{$toast-padding-y};
+ --toast-spacing: #{$toast-spacing};
+ --toast-max-width: #{$toast-max-width};
+ --toast-font-size: #{$toast-font-size};
+ --toast-color: #{$toast-color};
+ --toast-bg: #{$toast-background-color};
+ --toast-border-width: #{$toast-border-width};
+ --toast-border-color: #{$toast-border-color};
+ --toast-border-radius: #{$toast-border-radius};
+ --toast-box-shadow: #{$toast-box-shadow};
+ --toast-header-color: #{$toast-header-color};
+ --toast-header-bg: #{$toast-header-background-color};
+ --toast-header-border-color: #{$toast-header-border-color};
// scss-docs-end toast-css-vars
- width: var(--#{$prefix}toast-max-width);
+ width: var(--toast-max-width);
max-width: 100%;
- font-size: var(--#{$prefix}toast-font-size);
- color: var(--#{$prefix}toast-color);
+ font-size: var(--toast-font-size);
+ color: var(--toast-color);
pointer-events: auto;
- background-color: var(--#{$prefix}toast-bg);
+ background-color: var(--toast-bg);
background-clip: padding-box;
- border: var(--#{$prefix}toast-border-width) solid var(--#{$prefix}toast-border-color);
- box-shadow: var(--#{$prefix}toast-box-shadow);
- @include border-radius(var(--#{$prefix}toast-border-radius));
+ border: var(--toast-border-width) solid var(--toast-border-color);
+ box-shadow: var(--toast-box-shadow);
+ @include border-radius(var(--toast-border-radius));
&.showing {
opacity: 0;
}
.toast-container {
- --#{$prefix}toast-zindex: #{$zindex-toast};
+ --toast-zindex: #{$zindex-toast};
position: absolute;
- z-index: var(--#{$prefix}toast-zindex);
+ z-index: var(--toast-zindex);
width: max-content;
max-width: 100%;
pointer-events: none;
> :not(:last-child) {
- margin-bottom: var(--#{$prefix}toast-spacing);
+ margin-bottom: var(--toast-spacing);
}
}
.toast-header {
display: flex;
align-items: center;
- padding: var(--#{$prefix}toast-padding-y) var(--#{$prefix}toast-padding-x);
- color: var(--#{$prefix}toast-header-color);
- background-color: var(--#{$prefix}toast-header-bg);
+ padding: var(--toast-padding-y) var(--toast-padding-x);
+ color: var(--toast-header-color);
+ background-color: var(--toast-header-bg);
background-clip: padding-box;
- border-block-end: var(--#{$prefix}toast-border-width) solid var(--#{$prefix}toast-header-border-color);
- @include border-top-radius(calc(var(--#{$prefix}toast-border-radius) - var(--#{$prefix}toast-border-width)));
+ border-block-end: var(--toast-border-width) solid var(--toast-header-border-color);
+ @include border-top-radius(calc(var(--toast-border-radius) - var(--toast-border-width)));
.btn-close {
- margin-inline-start: var(--#{$prefix}toast-padding-x);
- margin-inline-end: calc(-.5 * var(--#{$prefix}toast-padding-x));
+ margin-inline-start: var(--toast-padding-x);
+ margin-inline-end: calc(-.5 * var(--toast-padding-x));
}
}
.toast-body {
- padding: var(--#{$prefix}toast-padding-x);
+ padding: var(--toast-padding-x);
word-wrap: break-word;
}
}
@use "mixins/reset-text" as *;
// scss-docs-start tooltip-variables
-$tooltip-font-size: var(--#{$prefix}font-size-sm) !default;
+$tooltip-font-size: var(--font-size-sm) !default;
$tooltip-max-width: 200px !default;
-$tooltip-color: var(--#{$prefix}bg-body) !default;
-$tooltip-bg: var(--#{$prefix}fg-body) !default;
-$tooltip-border-radius: var(--#{$prefix}border-radius) !default;
+$tooltip-color: var(--bg-body) !default;
+$tooltip-bg: var(--fg-body) !default;
+$tooltip-border-radius: var(--border-radius) !default;
$tooltip-opacity: .95 !default;
$tooltip-padding-y: $spacer * .375 !default;
$tooltip-padding-x: $spacer * .75 !default;
@layer components {
.tooltip {
// scss-docs-start tooltip-css-vars
- --#{$prefix}tooltip-zindex: #{$zindex-tooltip};
- --#{$prefix}tooltip-max-width: #{$tooltip-max-width};
- --#{$prefix}tooltip-padding-x: #{$tooltip-padding-x};
- --#{$prefix}tooltip-padding-y: #{$tooltip-padding-y};
- --#{$prefix}tooltip-font-size: #{$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};
+ --tooltip-zindex: #{$zindex-tooltip};
+ --tooltip-max-width: #{$tooltip-max-width};
+ --tooltip-padding-x: #{$tooltip-padding-x};
+ --tooltip-padding-y: #{$tooltip-padding-y};
+ --tooltip-font-size: #{$tooltip-font-size};
+ --tooltip-color: #{$tooltip-color};
+ --tooltip-bg: #{$tooltip-bg};
+ --tooltip-border-radius: #{$tooltip-border-radius};
+ --tooltip-opacity: #{$tooltip-opacity};
+ --tooltip-arrow-width: #{$tooltip-arrow-width};
+ --tooltip-arrow-height: #{$tooltip-arrow-height};
// scss-docs-end tooltip-css-vars
- z-index: var(--#{$prefix}tooltip-zindex);
+ z-index: var(--tooltip-zindex);
display: block;
// 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(--#{$prefix}tooltip-font-size);
+ font-size: var(--tooltip-font-size);
// Allow breaking very long words so they don't overflow the tooltip's bounds
word-wrap: break-word;
opacity: 0;
- &.show { opacity: var(--#{$prefix}tooltip-opacity); }
+ &.show { opacity: var(--tooltip-opacity); }
.tooltip-arrow {
display: block;
- width: var(--#{$prefix}tooltip-arrow-width);
- height: var(--#{$prefix}tooltip-arrow-height);
+ width: var(--tooltip-arrow-width);
+ height: var(--tooltip-arrow-height);
&::before {
position: absolute;
}
.bs-tooltip-top .tooltip-arrow {
- bottom: calc(-1 * var(--#{$prefix}tooltip-arrow-height));
+ bottom: calc(-1 * var(--tooltip-arrow-height));
&::before {
top: -1px;
- border-width: var(--#{$prefix}tooltip-arrow-height) calc(var(--#{$prefix}tooltip-arrow-width) * .5) 0;
- border-block-start-color: var(--#{$prefix}tooltip-bg);
+ border-width: var(--tooltip-arrow-height) calc(var(--tooltip-arrow-width) * .5) 0;
+ border-block-start-color: var(--tooltip-bg);
}
}
.bs-tooltip-end .tooltip-arrow {
- left: calc(-1 * var(--#{$prefix}tooltip-arrow-height));
- width: var(--#{$prefix}tooltip-arrow-height);
- height: var(--#{$prefix}tooltip-arrow-width);
+ left: calc(-1 * var(--tooltip-arrow-height));
+ width: var(--tooltip-arrow-height);
+ height: var(--tooltip-arrow-width);
&::before {
right: -1px;
- border-width: calc(var(--#{$prefix}tooltip-arrow-width) * .5) var(--#{$prefix}tooltip-arrow-height) calc(var(--#{$prefix}tooltip-arrow-width) * .5) 0;
- border-inline-end-color: var(--#{$prefix}tooltip-bg);
+ border-width: calc(var(--tooltip-arrow-width) * .5) var(--tooltip-arrow-height) calc(var(--tooltip-arrow-width) * .5) 0;
+ border-inline-end-color: var(--tooltip-bg);
}
}
.bs-tooltip-bottom .tooltip-arrow {
- top: calc(-1 * var(--#{$prefix}tooltip-arrow-height));
+ top: calc(-1 * var(--tooltip-arrow-height));
&::before {
bottom: -1px;
- border-width: 0 calc(var(--#{$prefix}tooltip-arrow-width) * .5) var(--#{$prefix}tooltip-arrow-height);
- border-block-end-color: var(--#{$prefix}tooltip-bg);
+ border-width: 0 calc(var(--tooltip-arrow-width) * .5) var(--tooltip-arrow-height);
+ border-block-end-color: var(--tooltip-bg);
}
}
.bs-tooltip-start .tooltip-arrow {
- right: calc(-1 * var(--#{$prefix}tooltip-arrow-height));
- width: var(--#{$prefix}tooltip-arrow-height);
- height: var(--#{$prefix}tooltip-arrow-width);
+ right: calc(-1 * var(--tooltip-arrow-height));
+ width: var(--tooltip-arrow-height);
+ height: var(--tooltip-arrow-width);
&::before {
left: -1px;
- border-width: calc(var(--#{$prefix}tooltip-arrow-width) * .5) 0 calc(var(--#{$prefix}tooltip-arrow-width) * .5) var(--#{$prefix}tooltip-arrow-height);
- border-inline-start-color: var(--#{$prefix}tooltip-bg);
+ border-width: calc(var(--tooltip-arrow-width) * .5) 0 calc(var(--tooltip-arrow-width) * .5) var(--tooltip-arrow-height);
+ border-inline-start-color: var(--tooltip-bg);
}
}
// Wrapper for the tooltip content
.tooltip-inner {
- max-width: var(--#{$prefix}tooltip-max-width);
- padding: var(--#{$prefix}tooltip-padding-y) var(--#{$prefix}tooltip-padding-x);
- color: var(--#{$prefix}tooltip-color);
+ max-width: var(--tooltip-max-width);
+ padding: var(--tooltip-padding-y) var(--tooltip-padding-x);
+ color: var(--tooltip-color);
text-align: center;
- background-color: var(--#{$prefix}tooltip-bg);
- @include border-radius(var(--#{$prefix}tooltip-border-radius));
+ background-color: var(--tooltip-bg);
+ @include border-radius(var(--tooltip-border-radius));
}
}
selector: "attr-includes",
class: "ratio-",
property: aspect-ratio,
- values: var(--#{$prefix}ratio),
+ values: var(--ratio),
),
"aspect-ratio": (
// property: aspect-ratio,
- property: --#{$prefix}ratio,
+ property: --ratio,
class: ratio,
values: $aspect-ratios
),
property: box-shadow,
class: shadow,
values: (
- null: var(--#{$prefix}box-shadow),
- sm: var(--#{$prefix}box-shadow-sm),
- lg: var(--#{$prefix}box-shadow-lg),
+ null: var(--box-shadow),
+ sm: var(--box-shadow-sm),
+ lg: var(--box-shadow-lg),
none: none,
)
),
// scss-docs-start utils-focus-ring
"focus-ring": (
// css-var: true,
- property: --#{$prefix}focus-ring-color,
+ property: --focus-ring-color,
class: focus-ring,
values: theme-color-values("focus-ring"),
),
"border": (
property: border,
values: (
- null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
+ null: var(--border-width) var(--border-style) var(--border-color),
0: 0,
)
),
class: border-top,
property: border-block-start,
values: (
- null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
+ null: var(--border-width) var(--border-style) var(--border-color),
0: 0,
)
),
property: border-inline-end,
class: border-end,
values: (
- null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
+ null: var(--border-width) var(--border-style) var(--border-color),
0: 0,
)
),
property: border-block-end,
class: border-bottom,
values: (
- null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
+ null: var(--border-width) var(--border-style) var(--border-color),
0: 0,
)
),
property: border-inline-start,
class: border-start,
values: (
- null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
+ null: var(--border-width) var(--border-style) var(--border-color),
0: 0,
)
),
"border-y": (
property: border-block,
values: (
- null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
+ null: var(--border-width) var(--border-style) var(--border-color),
0: 0,
)
),
"border-x": (
property: border-inline,
values: (
- null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
+ null: var(--border-width) var(--border-style) var(--border-color),
0: 0,
)
),
// scss-docs-start utils-border-color
"border-color": (
property: (
- "--#{$prefix}border-color": null,
- "border-color": var(--#{$prefix}border-color)
+ "--border-color": null,
+ "border-color": var(--border-color)
),
class: border,
values: map.merge(theme-color-values("bg"), $theme-borders),
),
"border-color-subtle": (
property: (
- "--#{$prefix}border-color": null,
- "border-color": var(--#{$prefix}border-color)
+ "--border-color": null,
+ "border-color": var(--border-color)
),
class: border-subtle,
values: theme-color-values("border"),
"border-opacity": (
class: border,
property: border-color,
- values: theme-opacity-values(--#{$prefix}border-color)
+ values: theme-opacity-values(--border-color)
),
// scss-docs-end utils-border-color
// Sizing utilities
),
"grid-column-counts": (
responsive: true,
- property: --#{$prefix}columns,
+ property: --columns,
class: grid-cols,
values: (
3,
property: font-family,
class: font,
values: (
- "monospace": var(--#{$prefix}font-monospace),
- "body": var(--#{$prefix}font-sans-serif),
+ "monospace": var(--font-monospace),
+ "body": var(--font-sans-serif),
)
),
// scss-docs-end utils-font-family
// selector: "attr-includes",
// class: "fg-",
// property: color,
- // values: var(--#{$prefix}fg),
+ // values: var(--fg),
// ),
"fg": (
property: (
- "--#{$prefix}fg": null,
- "color": var(--#{$prefix}fg)
+ "--fg": null,
+ "color": var(--fg)
),
class: fg,
values: map.merge(theme-color-values("text"), $theme-fgs),
),
"fg-emphasis": (
property: (
- "--#{$prefix}fg": null,
- "color": var(--#{$prefix}fg)
+ "--fg": null,
+ "color": var(--fg)
),
class: fg-emphasis,
values: theme-color-values("text-emphasis"),
"fg-opacity": (
class: fg,
property: color,
- values: theme-opacity-values(--#{$prefix}fg)
+ values: theme-opacity-values(--fg)
),
"fg-contrast": (
property: (
- "--#{$prefix}fg": null,
- "color": var(--#{$prefix}fg)
+ "--fg": null,
+ "color": var(--fg)
),
class: fg-contrast,
values: theme-color-values("contrast"),
// css-var: true,
class: link,
state: hover,
- values: theme-opacity-values(--#{$prefix}link-color)
+ values: theme-opacity-values(--link-color)
),
// scss-docs-end utils-links
// scss-docs-start utils-underline
property: text-decoration-color,
class: underline,
state: hover,
- values: theme-opacity-values(--#{$prefix}link-color)
+ values: theme-opacity-values(--link-color)
),
"underline-thickness": (
property: text-decoration-thickness,
// scss-docs-start utils-bg-color
"bg-color": (
property: (
- "--#{$prefix}bg": null,
- "background-color": var(--#{$prefix}bg)
+ "--bg": null,
+ "background-color": var(--bg)
),
class: bg,
values: map.merge(theme-color-values("bg"), $theme-bgs),
),
"bg-color-subtle": (
property: (
- "--#{$prefix}bg": null,
- "background-color": var(--#{$prefix}bg)
+ "--bg": null,
+ "background-color": var(--bg)
),
class: bg-subtle,
values: theme-color-values("bg-subtle"),
),
"bg-color-muted": (
property: (
- "--#{$prefix}bg": null,
- "background-color": var(--#{$prefix}bg)
+ "--bg": null,
+ "background-color": var(--bg)
),
class: bg-muted,
values: theme-color-values("bg-muted"),
"bg-opacity": (
class: bg,
property: background-color,
- values: theme-opacity-values(--#{$prefix}bg)
+ values: theme-opacity-values(--bg)
),
// scss-docs-end utils-bg-color
"gradient": (
property: background-image,
class: bg,
- values: (gradient: var(--#{$prefix}gradient))
+ values: (gradient: var(--gradient))
),
// scss-docs-start utils-interaction
"user-select": (
property: border-radius,
class: rounded,
values: (
- null: var(--#{$prefix}border-radius),
+ null: var(--border-radius),
0: 0,
- 1: var(--#{$prefix}border-radius-sm),
- 2: var(--#{$prefix}border-radius),
- 3: var(--#{$prefix}border-radius-lg),
- 4: var(--#{$prefix}border-radius-xl),
- 5: var(--#{$prefix}border-radius-2xl),
+ 1: var(--border-radius-sm),
+ 2: var(--border-radius),
+ 3: var(--border-radius-lg),
+ 4: var(--border-radius-xl),
+ 5: var(--border-radius-2xl),
circle: 50%,
- pill: var(--#{$prefix}border-radius-pill)
+ pill: var(--border-radius-pill)
)
),
"rounded-top": (
property: border-start-start-radius border-start-end-radius,
class: rounded-top,
values: (
- null: var(--#{$prefix}border-radius),
+ null: var(--border-radius),
0: 0,
- 1: var(--#{$prefix}border-radius-sm),
- 2: var(--#{$prefix}border-radius),
- 3: var(--#{$prefix}border-radius-lg),
- 4: var(--#{$prefix}border-radius-xl),
- 5: var(--#{$prefix}border-radius-2xl),
+ 1: var(--border-radius-sm),
+ 2: var(--border-radius),
+ 3: var(--border-radius-lg),
+ 4: var(--border-radius-xl),
+ 5: var(--border-radius-2xl),
circle: 50%,
- pill: var(--#{$prefix}border-radius-pill)
+ pill: var(--border-radius-pill)
)
),
"rounded-end": (
property: border-end-end-radius border-end-start-radius,
class: rounded-end,
values: (
- null: var(--#{$prefix}border-radius),
+ null: var(--border-radius),
0: 0,
- 1: var(--#{$prefix}border-radius-sm),
- 2: var(--#{$prefix}border-radius),
- 3: var(--#{$prefix}border-radius-lg),
- 4: var(--#{$prefix}border-radius-xl),
- 5: var(--#{$prefix}border-radius-2xl),
+ 1: var(--border-radius-sm),
+ 2: var(--border-radius),
+ 3: var(--border-radius-lg),
+ 4: var(--border-radius-xl),
+ 5: var(--border-radius-2xl),
circle: 50%,
- pill: var(--#{$prefix}border-radius-pill)
+ pill: var(--border-radius-pill)
)
),
"rounded-bottom": (
property: border-end-end-radius border-end-start-radius,
class: rounded-bottom,
values: (
- null: var(--#{$prefix}border-radius),
+ null: var(--border-radius),
0: 0,
- 1: var(--#{$prefix}border-radius-sm),
- 2: var(--#{$prefix}border-radius),
- 3: var(--#{$prefix}border-radius-lg),
- 4: var(--#{$prefix}border-radius-xl),
- 5: var(--#{$prefix}border-radius-2xl),
+ 1: var(--border-radius-sm),
+ 2: var(--border-radius),
+ 3: var(--border-radius-lg),
+ 4: var(--border-radius-xl),
+ 5: var(--border-radius-2xl),
circle: 50%,
- pill: var(--#{$prefix}border-radius-pill)
+ pill: var(--border-radius-pill)
)
),
"rounded-start": (
property: border-start-start-radius border-start-end-radius,
class: rounded-start,
values: (
- null: var(--#{$prefix}border-radius),
+ null: var(--border-radius),
0: 0,
- 1: var(--#{$prefix}border-radius-sm),
- 2: var(--#{$prefix}border-radius),
- 3: var(--#{$prefix}border-radius-lg),
- 4: var(--#{$prefix}border-radius-xl),
- 5: var(--#{$prefix}border-radius-2xl),
+ 1: var(--border-radius-sm),
+ 2: var(--border-radius),
+ 3: var(--border-radius-lg),
+ 4: var(--border-radius-xl),
+ 5: var(--border-radius-2xl),
circle: 50%,
- pill: var(--#{$prefix}border-radius-pill)
+ pill: var(--border-radius-pill)
)
),
// scss-docs-end utils-border-radius
// scss-docs-start theme-color-variables
// $primary: $blue-500 !default;
-// $secondary: var(--#{$prefix}gray-600) !default;
+// $secondary: var(--gray-600) !default;
// $success: $green-500 !default;
// $info: $cyan-500 !default;
// $warning: $yellow-500 !default;
// $danger: $red-500 !default;
-// $light: var(--#{$prefix}gray-100) !default;
-// $dark: var(--#{$prefix}gray-900) !default;
+// $light: var(--gray-100) !default;
+// $dark: var(--gray-900) !default;
// scss-docs-end theme-color-variables
// scss-docs-start theme-colors-map
// $color-mode-type: data !default; // `data` or `media-query`
// // Prefix for :root CSS variables
-// $prefix: bs- !default;
+// : bs- !default;
// $color-mode-type: "media-query" !default;
// $color-contrast-dark: #000 !default;
// Settings for the `<body>` element.
$body-text-align: null !default;
-$body-color: var(--#{$prefix}color-body) !default;
-$body-bg: var(--#{$prefix}bg-body) !default;
+$body-color: var(--color-body) !default;
+$body-bg: var(--bg-body) !default;
// Links
//
5: 5px
) !default;
$border-style: solid !default;
-$border-color: color-mix(in oklch, var(--#{$prefix}gray-100), var(--#{$prefix}gray-200)) !default;
+$border-color: color-mix(in oklch, var(--gray-100), var(--gray-200)) !default;
$border-color-translucent: rgba($black, .175) !default;
// scss-docs-end border-variables
// scss-docs-start focus-ring-variables
$focus-ring-width: .25rem !default;
$focus-ring-opacity: .25 !default;
-$focus-ring-color: var(--#{$prefix}primary-focus-ring) !default;
+$focus-ring-color: var(--primary-focus-ring) !default;
$focus-ring-blur: 0 !default;
$focus-ring-box-shadow: 0 0 $focus-ring-blur $focus-ring-width $focus-ring-color !default;
// scss-docs-end focus-ring-variables
-$component-active-color: var(--#{$prefix}primary-contrast) !default;
-$component-active-bg: var(--#{$prefix}primary-bg) !default;
+$component-active-color: var(--primary-contrast) !default;
+$component-active-bg: var(--primary-bg) !default;
$transition-base: all .2s ease-in-out !default;
$transition-fade: opacity .15s linear !default;
$font-family-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
$font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
// stylelint-enable value-keyword-case
-$font-family-base: var(--#{$prefix}font-sans-serif) !default;
-$font-family-code: var(--#{$prefix}font-monospace) !default;
+$font-family-base: var(--font-sans-serif) !default;
+$font-family-code: var(--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
$line-height-sm: 1.25 !default;
$line-height-lg: 2 !default;
-$h1-font-size: var(--#{$prefix}font-size-3xl) !default;
-$h2-font-size: var(--#{$prefix}font-size-2xl) !default;
-$h3-font-size: var(--#{$prefix}font-size-xl) !default;
-$h4-font-size: var(--#{$prefix}font-size-lg) !default;
-$h5-font-size: var(--#{$prefix}font-size-md) !default;
-$h6-font-size: var(--#{$prefix}font-size-sm) !default;
+$h1-font-size: var(--font-size-3xl) !default;
+$h2-font-size: var(--font-size-2xl) !default;
+$h3-font-size: var(--font-size-xl) !default;
+$h4-font-size: var(--font-size-lg) !default;
+$h5-font-size: var(--font-size-md) !default;
+$h6-font-size: var(--font-size-sm) !default;
// scss-docs-end font-variables
// Font sizes with line-height for utilities
$font-sizes: (
"xs": (
- "font-size": var(--#{$prefix}font-size-xs),
- "line-height": var(--#{$prefix}line-height-xs)
+ "font-size": var(--font-size-xs),
+ "line-height": var(--line-height-xs)
),
"sm": (
- "font-size": var(--#{$prefix}font-size-sm),
- "line-height": var(--#{$prefix}line-height-sm)
+ "font-size": var(--font-size-sm),
+ "line-height": var(--line-height-sm)
),
"md": (
- "font-size": var(--#{$prefix}font-size-md),
- "line-height": var(--#{$prefix}line-height-md)
+ "font-size": var(--font-size-md),
+ "line-height": var(--line-height-md)
),
"lg": (
- "font-size": var(--#{$prefix}font-size-lg),
- "line-height": var(--#{$prefix}line-height-lg)
+ "font-size": var(--font-size-lg),
+ "line-height": var(--line-height-lg)
),
"xl": (
- "font-size": var(--#{$prefix}font-size-xl),
- "line-height": var(--#{$prefix}line-height-xl)
+ "font-size": var(--font-size-xl),
+ "line-height": var(--line-height-xl)
),
"2xl": (
- "font-size": var(--#{$prefix}font-size-2xl),
- "line-height": var(--#{$prefix}line-height-2xl)
+ "font-size": var(--font-size-2xl),
+ "line-height": var(--line-height-2xl)
),
"3xl": (
- "font-size": var(--#{$prefix}font-size-3xl),
- "line-height": var(--#{$prefix}line-height-3xl)
+ "font-size": var(--font-size-3xl),
+ "line-height": var(--line-height-3xl)
),
"4xl": (
- "font-size": var(--#{$prefix}font-size-4xl),
- "line-height": var(--#{$prefix}line-height-4xl)
+ "font-size": var(--font-size-4xl),
+ "line-height": var(--line-height-4xl)
),
"5xl": (
- "font-size": var(--#{$prefix}font-size-5xl),
- "line-height": var(--#{$prefix}line-height-5xl)
+ "font-size": var(--font-size-5xl),
+ "line-height": var(--line-height-5xl)
),
"6xl": (
- "font-size": var(--#{$prefix}font-size-6xl),
- "line-height": var(--#{$prefix}line-height-6xl)
+ "font-size": var(--font-size-6xl),
+ "line-height": var(--line-height-6xl)
),
) !default;
$blockquote-margin-y: $spacer !default;
$blockquote-font-size: $font-size-base * 1.25 !default;
-$blockquote-footer-color: var(--#{$prefix}gray-600) !default;
+$blockquote-footer-color: var(--gray-600) !default;
$blockquote-footer-font-size: $small-font-size !default;
$hr-margin-y: $spacer !default;
$hr-color: inherit !default;
$hr-border-color: null !default; // Allows for inherited colors
-$hr-border-width: var(--#{$prefix}border-width) !default;
+$hr-border-width: var(--border-width) !default;
$hr-opacity: .25 !default;
// scss-docs-start vr-variables
-$vr-border-width: var(--#{$prefix}border-width) !default;
+$vr-border-width: var(--border-width) !default;
// scss-docs-end vr-variables
$legend-margin-bottom: .5rem !default;
$mark-padding: .1875em !default;
$mark-color: $body-color !default;
-$mark-bg: var(--#{$prefix}yellow-100) !default;
+$mark-bg: var(--yellow-100) !default;
// scss-docs-end type-variables
$input-btn-padding-x-lg: 1rem !default;
$input-btn-font-size-lg: $font-size-lg !default;
-$input-btn-border-width: var(--#{$prefix}border-width) !default;
+$input-btn-border-width: var(--border-width) !default;
// scss-docs-end input-btn-variables
$offcanvas-horizontal-width: 400px !default;
$offcanvas-vertical-height: 30vh !default;
$offcanvas-transition-duration: .3s !default;
-$offcanvas-border-color: var(--#{$prefix}border-color-translucent) !default;
-$offcanvas-border-width: var(--#{$prefix}border-width) !default;
+$offcanvas-border-color: var(--border-color-translucent) !default;
+$offcanvas-border-width: var(--border-width) !default;
$offcanvas-title-line-height: $line-height-base !default;
-$offcanvas-bg-color: var(--#{$prefix}bg-body) !default;
-$offcanvas-color: var(--#{$prefix}color-body) !default;
-$offcanvas-box-shadow: var(--#{$prefix}box-shadow-sm) !default;
+$offcanvas-bg-color: var(--bg-body) !default;
+$offcanvas-color: var(--color-body) !default;
+$offcanvas-box-shadow: var(--box-shadow-sm) !default;
$offcanvas-backdrop-bg: $black !default;
$offcanvas-backdrop-opacity: .5 !default;
// scss-docs-end offcanvas-variables
// Code
$code-font-size: 95% !default;
-$code-color: var(--#{$prefix}secondary-text) !default;
+$code-color: var(--secondary-text) !default;
$kbd-padding-y: .1875rem !default;
$kbd-padding-x: .375rem !default;
$kbd-font-size: $code-font-size !default;
-$kbd-color: var(--#{$prefix}bg-body) !default;
-$kbd-bg: var(--#{$prefix}color-body) !default;
+$kbd-color: var(--bg-body) !default;
+$kbd-bg: var(--color-body) !default;
$pre-color: null !default;
//
// scss-docs-start sass-dark-mode-vars
-// $body-color-dark: var(--#{$prefix}gray-200) !default;
-// $body-bg-dark: var(--#{$prefix}gray-975) !default;
+// $body-color-dark: var(--gray-200) !default;
+// $body-bg-dark: var(--gray-975) !default;
// $body-secondary-color-dark: rgba($body-color-dark, .75) !default;
-// $body-secondary-bg-dark: var(--#{$prefix}gray-800) !default;
+// $body-secondary-bg-dark: var(--gray-800) !default;
// $body-tertiary-color-dark: rgba($body-color-dark, .5) !default;
-// $body-tertiary-bg-dark: color-mix(in srgb, var(--#{$prefix}gray-800), var(--#{$prefix}gray-900)) !default;
+// $body-tertiary-bg-dark: color-mix(in srgb, var(--gray-800), var(--gray-900)) !default;
$body-emphasis-color-dark: $white !default;
-$border-color-dark: var(--#{$prefix}gray-700) !default;
+$border-color-dark: var(--gray-700) !default;
$border-color-translucent-dark: rgba($white, .15) !default;
$headings-color-dark: inherit !default;
// $mark-color-dark: $body-color-dark !default;
-// $mark-bg-dark: var(--#{$prefix}yellow-800) !default;
+// $mark-bg-dark: var(--yellow-800) !default;
//
//
// scss-docs-start form-validation-colors-dark
-$form-valid-color-dark: var(--#{$prefix}green-300) !default;
-$form-valid-border-color-dark: var(--#{$prefix}green-300) !default;
-$form-invalid-color-dark: var(--#{$prefix}red-300) !default;
-$form-invalid-border-color-dark: var(--#{$prefix}red-300) !default;
+$form-valid-color-dark: var(--green-300) !default;
+$form-valid-border-color-dark: var(--green-300) !default;
+$form-invalid-color-dark: var(--red-300) !default;
+$form-invalid-border-color-dark: var(--red-300) !default;
// scss-docs-end form-validation-colors-dark
// scss-docs-end sass-dark-mode-vars
@use "../forms/form-variables" as *;
// scss-docs-start btn-variables
-$btn-color: var(--#{$prefix}fg-body) !default;
+$btn-color: var(--fg-body) !default;
$btn-padding-y: $input-btn-padding-y !default;
$btn-padding-x: $input-btn-padding-x !default;
$btn-font-family: $input-btn-font-family !default;
$btn-padding-y-xs: .125rem !default;
$btn-padding-x-xs: .375rem !default;
-$btn-font-size-xs: var(--#{$prefix}font-size-xs) !default;
+$btn-font-size-xs: var(--font-size-xs) !default;
$btn-line-height-xs: 1.125rem !default;
$btn-padding-y-sm: $input-btn-padding-y-sm !default;
$btn-padding-x-sm: $input-btn-padding-x-sm !default;
-$btn-font-size-sm: var(--#{$prefix}font-size-sm) !default;
+$btn-font-size-sm: var(--font-size-sm) !default;
$btn-line-height-sm: 1.125rem !default;
$btn-padding-y-lg: $input-btn-padding-y-lg !default;
// Intentionally left for folks who want it
// $btn-padding-y-xl: .75rem !default;
// $btn-padding-x-xl: 1.25rem !default;
-// $btn-font-size-xl: var(--#{$prefix}font-size-lg) !default;
+// $btn-font-size-xl: var(--font-size-lg) !default;
// $btn-line-height-xl: 1.5rem !default;
$btn-border-width: $input-btn-border-width !default;
$btn-font-weight: $font-weight-normal !default;
$btn-disabled-opacity: .65 !default;
-$btn-link-color: var(--#{$prefix}link-color) !default;
-$btn-link-hover-color: var(--#{$prefix}link-hover-color) !default;
-$btn-link-disabled-color: var(--#{$prefix}fg-3) !default;
+$btn-link-color: var(--link-color) !default;
+$btn-link-hover-color: var(--link-hover-color) !default;
+$btn-link-disabled-color: var(--fg-3) !default;
// Allows for customizing button radius independently from global border radius
-$btn-border-radius: var(--#{$prefix}border-radius) !default;
-$btn-border-radius-xs: var(--#{$prefix}border-radius-sm) !default;
-$btn-border-radius-sm: var(--#{$prefix}border-radius-sm) !default;
-$btn-border-radius-lg: var(--#{$prefix}border-radius-lg) !default;
-$btn-border-radius-xl: var(--#{$prefix}border-radius-lg) !default;
+$btn-border-radius: var(--border-radius) !default;
+$btn-border-radius-xs: var(--border-radius-sm) !default;
+$btn-border-radius-sm: var(--border-radius-sm) !default;
+$btn-border-radius-lg: var(--border-radius-lg) !default;
+$btn-border-radius-xl: var(--border-radius-lg) !default;
$btn-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
// scss-docs-end btn-variables
.btn,
#{$btn-variant-selectors} {
// scss-docs-start btn-css-vars
- --#{$prefix}btn-min-height: 2.25rem;
- --#{$prefix}btn-padding-x: #{$btn-padding-x};
- --#{$prefix}btn-padding-y: #{$btn-padding-y};
- --#{$prefix}btn-font-family: #{$btn-font-family};
- --#{$prefix}btn-font-size: #{$btn-font-size};
- --#{$prefix}btn-font-weight: #{$btn-font-weight};
- --#{$prefix}btn-line-height: #{$btn-line-height};
- --#{$prefix}btn-color: #{$btn-color};
- --#{$prefix}btn-border-width: #{$btn-border-width};
- --#{$prefix}btn-border-color: transparent;
- --#{$prefix}btn-border-radius: #{$btn-border-radius};
- --#{$prefix}btn-hover-border-color: transparent;
- --#{$prefix}btn-disabled-opacity: #{$btn-disabled-opacity};
+ --btn-min-height: 2.25rem;
+ --btn-padding-x: #{$btn-padding-x};
+ --btn-padding-y: #{$btn-padding-y};
+ --btn-font-family: #{$btn-font-family};
+ --btn-font-size: #{$btn-font-size};
+ --btn-font-weight: #{$btn-font-weight};
+ --btn-line-height: #{$btn-line-height};
+ --btn-color: #{$btn-color};
+ --btn-border-width: #{$btn-border-width};
+ --btn-border-color: transparent;
+ --btn-border-radius: #{$btn-border-radius};
+ --btn-hover-border-color: transparent;
+ --btn-disabled-opacity: #{$btn-disabled-opacity};
// scss-docs-end btn-css-vars
display: inline-flex;
- gap: var(--#{$prefix}btn-gap, .25rem);
+ gap: var(--btn-gap, .25rem);
align-items: center;
justify-content: center;
- min-height: var(--#{$prefix}btn-min-height);
- 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);
+ min-height: var(--btn-min-height);
+ padding: var(--btn-padding-y) var(--btn-padding-x);
+ font-family: var(--btn-font-family);
+ font-size: var(--btn-font-size);
+ font-weight: var(--btn-font-weight);
+ line-height: var(--btn-line-height);
+ color: var(--btn-color);
text-decoration: none;
white-space: $btn-white-space;
vertical-align: middle;
// stylelint-disable-next-line scss/at-function-named-arguments
cursor: if(sass($enable-button-pointers): pointer; else: null);
user-select: none;
- background-color: var(--#{$prefix}btn-bg, var(--#{$prefix}bg-2));
- border: var(--#{$prefix}btn-border-width) solid var(--#{$prefix}btn-border-color);
- @include border-radius(var(--#{$prefix}btn-border-radius));
+ background-color: var(--btn-bg, var(--bg-2));
+ border: var(--btn-border-width) solid var(--btn-border-color);
+ @include border-radius(var(--btn-border-radius));
@include transition($btn-transition);
&:hover {
- color: var(--#{$prefix}btn-hover-color);
- background-color: var(--#{$prefix}btn-hover-bg, var(--#{$prefix}bg-3));
- border-color: var(--#{$prefix}btn-hover-border-color);
+ color: var(--btn-hover-color);
+ background-color: var(--btn-hover-bg, var(--bg-3));
+ border-color: var(--btn-hover-border-color);
}
&:focus-visible {
@include focus-ring(true);
- --#{$prefix}focus-ring-offset: 1px;
+ --focus-ring-offset: 1px;
}
&.active,
&.show {
- color: var(--#{$prefix}btn-active-color);
- background-color: var(--#{$prefix}btn-active-bg, var(--#{$prefix}bg-3));
- border-color: var(--#{$prefix}btn-active-border-color);
+ color: var(--btn-active-color);
+ background-color: var(--btn-active-bg, var(--bg-3));
+ border-color: var(--btn-active-border-color);
&:focus-visible {
@include focus-ring(true);
&:disabled,
&.disabled,
fieldset:disabled & {
- color: var(--#{$prefix}btn-disabled-color);
+ color: var(--btn-disabled-color);
pointer-events: none;
- background-color: var(--#{$prefix}btn-disabled-bg, var(--#{$prefix}bg-1));
+ background-color: var(--btn-disabled-bg, var(--bg-1));
// stylelint-disable-next-line scss/at-function-named-arguments
background-image: if(sass($enable-gradients): none; else: null);
- border-color: var(--#{$prefix}btn-disabled-border-color);
- opacity: var(--#{$prefix}btn-disabled-opacity);
+ border-color: var(--btn-disabled-border-color);
+ opacity: var(--btn-disabled-opacity);
}
}
.btn-#{$variant} {
@each $property, $value in map.get($button-variants, $variant, "base") {
@if $value == "transparent" {
- --#{$prefix}btn-#{$property}: transparent;
+ --btn-#{$property}: transparent;
} @else {
- --#{$prefix}btn-#{$property}: var(--#{$prefix}theme-#{$value});
+ --btn-#{$property}: var(--theme-#{$value});
}
}
@each $property, $value in map.get($button-variants, $variant, "active") {
@if $value == "transparent" {
- --#{$prefix}btn-active-#{$property}: transparent;
+ --btn-active-#{$property}: transparent;
} @else if $value == "bg-subtle" {
- --#{$prefix}btn-active-#{$property}: var(--#{$prefix}theme-#{$value});
+ --btn-active-#{$property}: var(--theme-#{$value});
} @else {
- --#{$prefix}btn-active-#{$property}: oklch(from var(--#{$prefix}theme-#{$value}) calc(l * .9) calc(c * 1.15) h);
+ --btn-active-#{$property}: oklch(from var(--theme-#{$value}) calc(l * .9) calc(c * 1.15) h);
}
}
@each $property, $value in map.get($button-variants, $variant, "base") {
@if $value == "transparent" {
- --#{$prefix}btn-disabled-#{$property}: transparent;
+ --btn-disabled-#{$property}: transparent;
} @else {
- --#{$prefix}btn-disabled-#{$property}: var(--#{$prefix}theme-#{$value});
+ --btn-disabled-#{$property}: var(--theme-#{$value});
}
}
&:hover {
@each $property, $value in map.get($button-variants, $variant, "hover") {
@if $value == "transparent" {
- --#{$prefix}btn-hover-#{$property}: transparent;
+ --btn-hover-#{$property}: transparent;
} @else if meta.type-of($value) == "list" {
$first-value: list.nth($value, 1);
$second-value: list.nth($value, 2);
- --#{$prefix}btn-hover-#{$property}: color-mix(in oklch, var(--#{$prefix}theme-#{$first-value}) 50%, var(--#{$prefix}theme-#{$second-value}));
+ --btn-hover-#{$property}: color-mix(in oklch, var(--theme-#{$first-value}) 50%, var(--theme-#{$second-value}));
} @else if $value == "bg-subtle" {
- --#{$prefix}btn-hover-#{$property}: var(--#{$prefix}theme-#{$value});
+ --btn-hover-#{$property}: var(--theme-#{$value});
} @else {
- --#{$prefix}btn-hover-#{$property}: oklch(from var(--#{$prefix}theme-#{$value}) calc(l * .95) calc(c * 1.1) h);
+ --btn-hover-#{$property}: oklch(from var(--theme-#{$value}) calc(l * .95) calc(c * 1.1) h);
}
}
}
&:focus-visible {
- outline-color: var(--#{$prefix}theme-focus-ring);
+ outline-color: var(--theme-focus-ring);
}
&:active,
&.btn-check:has(input:checked) {
@each $property, $value in map.get($button-variants, $variant, "active") {
@if $value == "transparent" {
- --#{$prefix}btn-active-#{$property}: transparent;
+ --btn-active-#{$property}: transparent;
} @else if $value == "bg-subtle" {
- --#{$prefix}btn-active-#{$property}: var(--#{$prefix}theme-#{$value});
+ --btn-active-#{$property}: var(--theme-#{$value});
} @else {
- --#{$prefix}btn-active-#{$property}: oklch(from var(--#{$prefix}theme-#{$value}) calc(l * .9) calc(c * 1.15) h);
+ --btn-active-#{$property}: oklch(from var(--theme-#{$value}) calc(l * .9) calc(c * 1.15) h);
}
}
}
&.btn-check:has(input:disabled) {
@each $property, $value in map.get($button-variants, $variant, "base") {
@if $value == "transparent" {
- --#{$prefix}btn-disabled-#{$property}: transparent;
+ --btn-disabled-#{$property}: transparent;
} @else {
- --#{$prefix}btn-disabled-#{$property}: var(--#{$prefix}theme-#{$value});
+ --btn-disabled-#{$property}: var(--theme-#{$value});
}
}
}
// Make a button look and behave like a link
.btn-link {
- --#{$prefix}btn-font-weight: #{$font-weight-normal};
- --#{$prefix}btn-color: #{$btn-link-color};
- --#{$prefix}btn-bg: transparent;
- --#{$prefix}btn-border-color: transparent;
- --#{$prefix}btn-hover-color: #{$btn-link-hover-color};
- --#{$prefix}btn-hover-border-color: transparent;
- --#{$prefix}btn-active-color: #{$btn-link-hover-color};
- --#{$prefix}btn-active-border-color: transparent;
- --#{$prefix}btn-disabled-color: #{$btn-link-disabled-color};
- --#{$prefix}btn-disabled-border-color: transparent;
-
- text-decoration: var(--#{$prefix}link-decoration);
+ --btn-font-weight: #{$font-weight-normal};
+ --btn-color: #{$btn-link-color};
+ --btn-bg: transparent;
+ --btn-border-color: transparent;
+ --btn-hover-color: #{$btn-link-hover-color};
+ --btn-hover-border-color: transparent;
+ --btn-active-color: #{$btn-link-hover-color};
+ --btn-active-border-color: transparent;
+ --btn-disabled-color: #{$btn-link-disabled-color};
+ --btn-disabled-border-color: transparent;
+
+ text-decoration: var(--link-decoration);
@if $enable-gradients {
background-image: none;
}
&:focus-visible {
- color: var(--#{$prefix}btn-color);
+ color: var(--btn-color);
}
&:hover {
- color: var(--#{$prefix}btn-hover-color);
+ color: var(--btn-hover-color);
}
// No need for an active state here
@each $size, $properties in $button-sizes {
.btn-#{$size},
.btn-group-#{$size} > [class*="btn-"] {
- --#{$prefix}btn-min-height: #{map.get($properties, "min-height")};
- --#{$prefix}btn-padding-y: #{map.get($properties, "padding-y")};
- --#{$prefix}btn-padding-x: #{map.get($properties, "padding-x")};
- --#{$prefix}btn-font-size: #{map.get($properties, "font-size")};
- --#{$prefix}btn-line-height: #{map.get($properties, "line-height")};
- --#{$prefix}btn-border-radius: #{map.get($properties, "border-radius")};
+ --btn-min-height: #{map.get($properties, "min-height")};
+ --btn-padding-y: #{map.get($properties, "padding-y")};
+ --btn-padding-x: #{map.get($properties, "padding-x")};
+ --btn-font-size: #{map.get($properties, "font-size")};
+ --btn-line-height: #{map.get($properties, "line-height")};
+ --btn-border-radius: #{map.get($properties, "border-radius")};
}
}
}
&:has(input:checked) {
- color: var(--#{$prefix}btn-active-color);
- background-color: var(--#{$prefix}btn-active-bg, var(--#{$prefix}bg-3));
+ color: var(--btn-active-color);
+ background-color: var(--btn-active-bg, var(--bg-3));
// stylelint-disable-next-line scss/at-function-named-arguments
background-image: if(sass($enable-gradients): none; else: null);
- border-color: var(--#{$prefix}btn-active-border-color);
- @include box-shadow(var(--#{$prefix}btn-active-shadow));
+ border-color: var(--btn-active-border-color);
+ @include box-shadow(var(--btn-active-shadow));
}
&:has(input:focus-visible) {
@include focus-ring(true);
- --#{$prefix}focus-ring-offset: 1px;
+ --focus-ring-offset: 1px;
}
&:has(input:disabled) {
- color: var(--#{$prefix}btn-disabled-color);
+ color: var(--btn-disabled-color);
pointer-events: none;
- background-color: var(--#{$prefix}btn-disabled-bg, var(--#{$prefix}bg-1));
+ background-color: var(--btn-disabled-bg, var(--bg-1));
// stylelint-disable-next-line scss/at-function-named-arguments
background-image: if(sass($enable-gradients): none; else: null);
- border-color: var(--#{$prefix}btn-disabled-border-color);
- opacity: var(--#{$prefix}btn-disabled-opacity);
+ border-color: var(--btn-disabled-border-color);
+ opacity: var(--btn-disabled-opacity);
@include box-shadow(none);
}
}
// Add visual depth with gradients and shadows. Customize via CSS variables.
.btn-styled {
- --#{$prefix}btn-gradient-start: rgb(255 255 255 / 12.5%);
- --#{$prefix}btn-gradient-end: rgb(0 0 0 / 7.5%);
- --#{$prefix}btn-border-mix-color: #000;
- --#{$prefix}btn-border-mix-amount: 10%;
- --#{$prefix}btn-border-hover-mix-amount: 12.5%;
- --#{$prefix}btn-border-active-mix-amount: 20%;
- --#{$prefix}btn-shadow: 0 1px 2px rgb(0 0 0 / 15%), inset 0 1px 0 rgb(255 255 255 / 10%);
- --#{$prefix}btn-active-shadow: inset 0 2px 4px rgba(0, 0, 0, .15);
+ --btn-gradient-start: rgb(255 255 255 / 12.5%);
+ --btn-gradient-end: rgb(0 0 0 / 7.5%);
+ --btn-border-mix-color: #000;
+ --btn-border-mix-amount: 10%;
+ --btn-border-hover-mix-amount: 12.5%;
+ --btn-border-active-mix-amount: 20%;
+ --btn-shadow: 0 1px 2px rgb(0 0 0 / 15%), inset 0 1px 0 rgb(255 255 255 / 10%);
+ --btn-active-shadow: inset 0 2px 4px rgba(0, 0, 0, .15);
background-image:
linear-gradient(
to bottom,
- var(--#{$prefix}btn-gradient-start),
- var(--#{$prefix}btn-gradient-end)
+ var(--btn-gradient-start),
+ var(--btn-gradient-end)
);
- border-color: color-mix(in lab, var(--#{$prefix}theme-bg), var(--#{$prefix}btn-border-mix-color) var(--#{$prefix}btn-border-mix-amount));
- box-shadow: var(--#{$prefix}btn-shadow);
+ border-color: color-mix(in lab, var(--theme-bg), var(--btn-border-mix-color) var(--btn-border-mix-amount));
+ box-shadow: var(--btn-shadow);
&:hover {
background-image:
linear-gradient(
to bottom,
- var(--#{$prefix}btn-gradient-start),
- var(--#{$prefix}btn-gradient-end)
+ var(--btn-gradient-start),
+ var(--btn-gradient-end)
);
- border-color: color-mix(in lab, var(--#{$prefix}theme-bg), var(--#{$prefix}btn-border-mix-color) var(--#{$prefix}btn-border-hover-mix-amount));
+ border-color: color-mix(in lab, var(--theme-bg), var(--btn-border-mix-color) var(--btn-border-hover-mix-amount));
}
&:active,
&.active {
background-image: none;
- border-color: color-mix(in lab, var(--#{$prefix}theme-bg), var(--#{$prefix}btn-border-mix-color) var(--#{$prefix}btn-border-active-mix-amount));
- box-shadow: var(--#{$prefix}btn-active-shadow);
+ border-color: color-mix(in lab, var(--theme-bg), var(--btn-border-mix-color) var(--btn-border-active-mix-amount));
+ box-shadow: var(--btn-active-shadow);
}
&:disabled,
// scss-docs-start close-variables
$btn-close-size: 1.25rem !default;
-$btn-close-color: var(--#{$prefix}fg-body) !default;
+$btn-close-color: var(--fg-body) !default;
$btn-close-opacity: .5 !default;
$btn-close-hover-opacity: .75 !default;
$btn-close-focus-opacity: .85 !default;
@layer components {
.btn-close {
// scss-docs-start close-css-vars
- --#{$prefix}btn-close-size: #{$btn-close-size};
- --#{$prefix}btn-close-color: #{$btn-close-color};
- --#{$prefix}btn-close-opacity: #{$btn-close-opacity};
- --#{$prefix}btn-close-hover-opacity: #{$btn-close-hover-opacity};
- --#{$prefix}btn-close-focus-opacity: #{$btn-close-focus-opacity};
- --#{$prefix}btn-close-disabled-opacity: #{$btn-close-disabled-opacity};
+ --btn-close-size: #{$btn-close-size};
+ --btn-close-color: #{$btn-close-color};
+ --btn-close-opacity: #{$btn-close-opacity};
+ --btn-close-hover-opacity: #{$btn-close-hover-opacity};
+ --btn-close-focus-opacity: #{$btn-close-focus-opacity};
+ --btn-close-disabled-opacity: #{$btn-close-disabled-opacity};
// scss-docs-end close-css-vars
box-sizing: content-box;
- width: var(--#{$prefix}btn-close-size);
- height: var(--#{$prefix}btn-close-size);
+ width: var(--btn-close-size);
+ height: var(--btn-close-size);
padding: 0;
- color: var(--#{$prefix}btn-close-color);
+ color: var(--btn-close-color);
background: transparent;
border: 0; // for button elements
- @include border-radius(var(--#{$prefix}border-radius-sm));
- opacity: var(--#{$prefix}btn-close-opacity);
+ @include border-radius(var(--border-radius-sm));
+ opacity: var(--btn-close-opacity);
> svg {
display: block;
// Override <a>'s hover style
&:hover {
- color: var(--#{$prefix}btn-close-color);
+ color: var(--btn-close-color);
text-decoration: none;
- opacity: var(--#{$prefix}btn-close-hover-opacity);
+ opacity: var(--btn-close-hover-opacity);
}
&:focus {
@include focus-ring();
- opacity: var(--#{$prefix}btn-close-focus-opacity);
+ opacity: var(--btn-close-focus-opacity);
}
&:disabled,
&.disabled {
pointer-events: none;
user-select: none;
- opacity: var(--#{$prefix}btn-close-disabled-opacity);
+ opacity: var(--btn-close-disabled-opacity);
}
}
}
// scss-docs-start thumbnail-variables
$thumbnail-padding: .25rem !default;
-$thumbnail-bg: var(--#{$prefix}bg-body) !default;
-$thumbnail-border-width: var(--#{$prefix}border-width) !default;
-$thumbnail-border-color: var(--#{$prefix}border-color) !default;
-$thumbnail-border-radius: var(--#{$prefix}border-radius) !default;
-$thumbnail-box-shadow: var(--#{$prefix}box-shadow-sm) !default;
+$thumbnail-bg: var(--bg-body) !default;
+$thumbnail-border-width: var(--border-width) !default;
+$thumbnail-border-color: var(--border-color) !default;
+$thumbnail-border-radius: var(--border-radius) !default;
+$thumbnail-box-shadow: var(--box-shadow-sm) !default;
// scss-docs-end thumbnail-variables
// scss-docs-start figure-variables
$figure-caption-font-size: $small-font-size !default;
-$figure-caption-color: var(--#{$prefix}secondary-color) !default;
+$figure-caption-color: var(--secondary-color) !default;
// scss-docs-end figure-variables
@layer content {
@layer content {
.prose {
- --#{$prefix}content-font-size: var(--#{$prefix}font-size-sm);
- --#{$prefix}content-gap: 20px;
- --#{$prefix}heading-color: light-dark(var(--bs-gray-900), var(--bs-white));
+ --content-font-size: var(--font-size-sm);
+ --content-gap: 20px;
+ --heading-color: light-dark(var(--gray-900), var(--white));
position: relative;
display: flex;
flex-direction: column;
- gap: var(--#{$prefix}content-gap);
+ gap: var(--content-gap);
max-width: 1000px;
margin-inline: auto;
- font-size: var(--#{$prefix}content-font-size);
+ font-size: var(--content-font-size);
line-height: 1.5;
@media (width >= 1024px) {
- --#{$prefix}content-font-size: var(--#{$prefix}font-size-md);
- --#{$prefix}content-gap: 24px;
+ --content-font-size: var(--font-size-md);
+ --content-gap: 24px;
}
p,
}
:where(ul, ol):not([class]) li:not(:last-child) {
- margin-bottom: calc(var(--#{$prefix}content-gap) / 4);
+ margin-bottom: calc(var(--content-gap) / 4);
}
li ul,
li ol {
- margin-top: calc(var(--#{$prefix}content-gap) / 4);
+ margin-top: calc(var(--content-gap) / 4);
}
hr {
- margin: calc(var(--#{$prefix}content-gap) * 1.5) 0;
+ margin: calc(var(--content-gap) * 1.5) 0;
border: 0;
- border-block-start: 1px solid var(--#{$prefix}border-color);
+ border-block-start: 1px solid var(--border-color);
}
h1,
h5,
h6 {
margin-top: 0;
- margin-bottom: calc(var(--#{$prefix}content-gap) / -2);
+ margin-bottom: calc(var(--content-gap) / -2);
font-weight: 500;
line-height: 1.25;
h1,
h2 {
&:not(:first-child) {
- margin-top: calc(var(--#{$prefix}content-gap) * 1.5);
+ margin-top: calc(var(--content-gap) * 1.5);
}
}
h5,
h6 {
&:not(:first-child) {
- margin-top: calc(var(--#{$prefix}content-gap) * 1.25);
+ margin-top: calc(var(--content-gap) * 1.25);
}
}
}
a:not([class]) {
- color: var(--#{$prefix}link-color);
+ color: var(--link-color);
text-decoration: underline;
- text-decoration-color: color-mix(in srgb, var(--#{$prefix}link-color) 25%, transparent);
+ text-decoration-color: color-mix(in srgb, var(--link-color) 25%, transparent);
text-underline-offset: 4px;
@include transition(.1s text-decoration-color ease-in-out);
}
a:not([class]):hover {
- text-decoration-color: var(--#{$prefix}link-hover-color);
+ text-decoration-color: var(--link-hover-color);
}
img {
}
blockquote {
- padding-inline-start: calc(var(--#{$prefix}content-gap) / 2);
+ padding-inline-start: calc(var(--content-gap) / 2);
margin: 0;
- border-inline-start: 4px solid var(--#{$prefix}border-color);
+ border-inline-start: 4px solid var(--border-color);
}
table {
th {
padding: 6px 12px;
text-align: inherit;
- border: 1px solid var(--#{$prefix}border-color);
+ border: 1px solid var(--border-color);
}
}
:root {
@if $font-size-root != null {
- font-size: var(--#{$prefix}root-font-size);
- // @include font-size(var(--#{$prefix}root-font-size));
+ font-size: var(--root-font-size);
+ // @include font-size(var(--root-font-size));
}
@if $enable-smooth-scroll {
// scss-docs-start reboot-body-rules
body {
margin: 0; // 1
- 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}color-body);
- text-align: var(--#{$prefix}body-text-align);
- background-color: var(--#{$prefix}bg-body); // 2
+ font-family: var(--body-font-family);
+ font-size: var(--body-font-size);
+ font-weight: var(--body-font-weight);
+ line-height: var(--body-line-height);
+ color: var(--color-body);
+ text-align: var(--body-text-align);
+ background-color: var(--bg-body); // 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: var(--#{$prefix}heading-color);
+ color: var(--heading-color);
}
h1,
mark,
.mark {
padding: $mark-padding;
- color: var(--#{$prefix}highlight-color);
- background-color: var(--#{$prefix}highlight-bg);
+ color: var(--highlight-color);
+ background-color: var(--highlight-bg);
}
// Links
a {
- color: var(--#{$prefix}link-color);
- text-decoration: var(--#{$prefix}link-decoration);
+ color: var(--link-color);
+ text-decoration: var(--link-decoration);
text-underline-offset: $link-underline-offset;
&:hover {
- // --#{$prefix}link-color: var(--#{$prefix}link-hover-color);
- // --#{$prefix}link-decoration: var(--#{$prefix}link-hover-decoration, var(--#{$prefix}link-decoration));
- color: var(--#{$prefix}link-hover-color);
- text-decoration: var(--#{$prefix}link-hover-decoration, var(--#{$prefix}link-decoration));
+ // --link-color: var(--link-hover-color);
+ // --link-decoration: var(--link-hover-decoration, var(--link-decoration));
+ color: var(--link-hover-color);
+ text-decoration: var(--link-hover-decoration, var(--link-decoration));
}
}
code {
font-size: $code-font-size;
- color: var(--#{$prefix}code-color);
+ color: var(--code-color);
word-wrap: break-word;
// Streamline the style when inside anchors to avoid broken underline and more
// padding-bottom: $table-cell-padding-y;
// color: $table-caption-color;
padding-block: .5rem;
- color: var(--#{$prefix}secondary-color);
+ color: var(--secondary-color);
text-align: start;
}
$table-cell-vertical-align: top !default;
-$table-color: var(--#{$prefix}color-body) !default;
-$table-bg: var(--#{$prefix}bg-body) !default;
+$table-color: var(--color-body) !default;
+$table-bg: var(--bg-body) !default;
$table-accent-bg: transparent !default;
// $table-th-font-weight: null !default;
$table-striped-color: $table-color !default;
$table-striped-bg-factor: .05 !default;
-$table-striped-bg: color-mix(in srgb, var(--#{$prefix}table-color) #{math.percentage($table-striped-bg-factor)}, transparent) !default;
+$table-striped-bg: color-mix(in srgb, var(--table-color) #{math.percentage($table-striped-bg-factor)}, transparent) !default;
$table-active-color: $table-color !default;
$table-active-bg-factor: .1 !default;
-$table-active-bg: color-mix(in srgb, var(--#{$prefix}table-color) #{math.percentage($table-active-bg-factor)}, transparent) !default;
+$table-active-bg: color-mix(in srgb, var(--table-color) #{math.percentage($table-active-bg-factor)}, transparent) !default;
$table-hover-color: $table-color !default;
$table-hover-bg-factor: .075 !default;
-$table-hover-bg: color-mix(in srgb, var(--#{$prefix}table-color) #{math.percentage($table-hover-bg-factor)}, transparent) !default;
+$table-hover-bg: color-mix(in srgb, var(--table-color) #{math.percentage($table-hover-bg-factor)}, transparent) !default;
-$table-border-width: var(--#{$prefix}border-width) !default;
-$table-border-color: var(--#{$prefix}border-color) !default;
+$table-border-width: var(--border-width) !default;
+$table-border-color: var(--border-color) !default;
$table-striped-order: odd !default;
$table-striped-columns-order: even !default;
$table-group-separator-color: currentcolor !default;
-// $table-caption-color: var(--#{$prefix}secondary-color) !default;
+// $table-caption-color: var(--secondary-color) !default;
// scss-docs-end table-variables
@layer content {
.table {
// Reset needed for nesting tables
- --#{$prefix}table-color-type: initial;
- --#{$prefix}table-bg-type: initial;
- --#{$prefix}table-color-state: initial;
- --#{$prefix}table-bg-state: initial;
+ --table-color-type: initial;
+ --table-bg-type: initial;
+ --table-color-state: initial;
+ --table-bg-state: initial;
// End of reset
// scss-docs-start table-css-variables
- --#{$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};
+ --table-color: #{$table-color};
+ --table-bg: #{$table-bg};
+ --table-border-color: #{$table-border-color};
+ --table-accent-bg: #{$table-accent-bg};
+ --table-striped-color: #{$table-striped-color};
+ --table-striped-bg: #{$table-striped-bg};
+ --table-active-color: #{$table-active-color};
+ --table-active-bg: #{$table-active-bg};
+ --table-hover-color: #{$table-hover-color};
+ --table-hover-bg: #{$table-hover-bg};
// scss-docs-end table-css-variables
width: 100%;
margin-bottom: $spacer;
vertical-align: $table-cell-vertical-align;
- border-color: var(--#{$prefix}theme-border, var(--#{$prefix}table-border-color));
+ border-color: var(--theme-border, var(--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.
> :not(caption) > * > * {
padding: $table-cell-padding-y $table-cell-padding-x;
// Following the precept of cascades: https://codepen.io/miriamsuzanne/full/vYNgodb
- color: var(--#{$prefix}table-color-state, var(--#{$prefix}table-color-type, var(--#{$prefix}theme-text, var(--#{$prefix}table-color))));
- background-color: var(--#{$prefix}theme-bg-subtle, var(--#{$prefix}table-bg));
+ color: var(--table-color-state, var(--table-color-type, var(--theme-text, var(--table-color))));
+ background-color: var(--theme-bg-subtle, var(--table-bg));
border-block-end-width: $table-border-width;
- box-shadow: inset 0 0 0 9999px var(--#{$prefix}table-bg-state, var(--#{$prefix}table-bg-type, var(--#{$prefix}theme-bg-subtle, var(--#{$prefix}table-accent-bg))));
+ box-shadow: inset 0 0 0 9999px var(--table-bg-state, var(--table-bg-type, var(--theme-bg-subtle, var(--table-accent-bg))));
}
> tbody {
// For rows
.table-striped {
> tbody > tr:nth-of-type(#{$table-striped-order}) > * {
- --#{$prefix}table-color-type: var(--#{$prefix}theme-text, var(--#{$prefix}table-striped-color));
- --#{$prefix}table-bg-type: color-mix(in srgb, var(--#{$prefix}theme-text, var(--#{$prefix}table-color)) #{math.percentage($table-striped-bg-factor)}, transparent);
+ --table-color-type: var(--theme-text, var(--table-striped-color));
+ --table-bg-type: color-mix(in srgb, var(--theme-text, var(--table-color)) #{math.percentage($table-striped-bg-factor)}, transparent);
}
}
// For columns
.table-striped-columns {
> :not(caption) > tr > :nth-child(#{$table-striped-columns-order}) {
- --#{$prefix}table-color-type: var(--#{$prefix}theme-text, var(--#{$prefix}table-striped-color));
- --#{$prefix}table-bg-type: color-mix(in srgb, var(--#{$prefix}theme-text, var(--#{$prefix}table-color)) #{math.percentage($table-striped-bg-factor)}, transparent);
+ --table-color-type: var(--theme-text, var(--table-striped-color));
+ --table-bg-type: color-mix(in srgb, var(--theme-text, var(--table-color)) #{math.percentage($table-striped-bg-factor)}, transparent);
}
}
// The `.table-active` class can be added to highlight rows or cells
.table-active {
- --#{$prefix}table-color-state: var(--#{$prefix}theme-text, var(--#{$prefix}table-active-color));
- --#{$prefix}table-bg-state: color-mix(in srgb, var(--#{$prefix}theme-text, var(--#{$prefix}table-color)) #{math.percentage($table-active-bg-factor)}, transparent);
+ --table-color-state: var(--theme-text, var(--table-active-color));
+ --table-bg-state: color-mix(in srgb, var(--theme-text, var(--table-color)) #{math.percentage($table-active-bg-factor)}, transparent);
}
// Hover effect
.table-hover {
> tbody > tr:hover > * {
- --#{$prefix}table-color-state: var(--#{$prefix}theme-text, var(--#{$prefix}table-hover-color));
- --#{$prefix}table-bg-state: color-mix(in srgb, var(--#{$prefix}theme-text, var(--#{$prefix}table-color)) #{math.percentage($table-hover-bg-factor)}, transparent);
+ --table-color-state: var(--theme-text, var(--table-hover-color));
+ --table-bg-state: color-mix(in srgb, var(--theme-text, var(--table-color)) #{math.percentage($table-hover-bg-factor)}, transparent);
}
}
@use "form-variables" as *;
// scss-docs-start check-variables
-$check-border-color: var(--#{$prefix}border-color) !default;
-$check-checked-bg: var(--#{$prefix}primary-base) !default;
+$check-border-color: var(--border-color) !default;
+$check-checked-bg: var(--primary-base) !default;
$check-checked-border-color: $check-checked-bg !default;
-$check-indeterminate-bg: var(--#{$prefix}primary-base) !default;
+$check-indeterminate-bg: var(--primary-base) !default;
$check-indeterminate-border-color: $check-indeterminate-bg !default;
-$check-disabled-bg: var(--#{$prefix}bg-3) !default;
+$check-disabled-bg: var(--bg-3) !default;
$check-disabled-opacity: .65 !default;
// scss-docs-end check-variables
@layer forms {
b-checkgroup {
display: flex;
- gap: var(--#{$prefix}gap, .5rem);
- align-items: var(--#{$prefix}align-items, start);
+ gap: var(--gap, .5rem);
+ align-items: var(--align-items, start);
.description {
- color: var(--#{$prefix}secondary-text);
+ color: var(--secondary-text);
}
}
.check {
// scss-docs-start check-css-variables
- --#{$prefix}check-bg: transparent;
- --#{$prefix}check-border-color: #{$check-border-color};
- --#{$prefix}check-checked-bg: #{$check-checked-bg};
- --#{$prefix}check-checked-border-color: #{$check-checked-border-color};
- --#{$prefix}check-indeterminate-bg: #{$check-indeterminate-bg};
- --#{$prefix}check-indeterminate-border-color: #{$check-indeterminate-border-color};
- --#{$prefix}check-disabled-bg: #{$check-disabled-bg};
- --#{$prefix}check-disabled-opacity: #{$check-disabled-opacity};
+ --check-bg: transparent;
+ --check-border-color: #{$check-border-color};
+ --check-checked-bg: #{$check-checked-bg};
+ --check-checked-border-color: #{$check-checked-border-color};
+ --check-indeterminate-bg: #{$check-indeterminate-bg};
+ --check-indeterminate-border-color: #{$check-indeterminate-border-color};
+ --check-disabled-bg: #{$check-disabled-bg};
+ --check-disabled-opacity: #{$check-disabled-opacity};
// scss-docs-end check-css-variables
display: grid;
:where(input) {
appearance: none;
// later: maybe set a tertiary bg color?
- background-color: var(--#{$prefix}theme-bg, var(--#{$prefix}check-bg));
- border: 1px solid var(--#{$prefix}theme-bg, var(--#{$prefix}check-border-color));
+ background-color: var(--theme-bg, var(--check-bg));
+ border: 1px solid var(--theme-bg, var(--check-border-color));
// stylelint-disable-next-line property-disallowed-list
border-radius: .25em;
}
:where(input:checked, input:indeterminate) {
- background-color: var(--#{$prefix}theme-bg, var(--#{$prefix}check-checked-bg));
- border-color: var(--#{$prefix}theme-bg, var(--#{$prefix}check-checked-border-color));
+ background-color: var(--theme-bg, var(--check-checked-bg));
+ border-color: var(--theme-bg, var(--check-checked-border-color));
}
:where(input:focus-visible) {
&:has(input:checked) .checked,
&:has(input:indeterminate) .indeterminate {
display: block;
- color: var(--#{$prefix}primary-contrast);
+ color: var(--primary-contrast);
stroke: currentcolor;
}
&:has(input:disabled) {
- --#{$prefix}check-bg: var(--#{$prefix}check-disabled-bg);
+ --check-bg: var(--check-disabled-bg);
~ label {
- color: var(--#{$prefix}secondary-text);
+ color: var(--secondary-text);
cursor: default;
}
}
&:has(input:disabled:checked) {
- opacity: var(--#{$prefix}check-disabled-opacity);
+ opacity: var(--check-disabled-opacity);
}
:where(svg) {
$form-floating-label-height: 1.5em !default;
$form-floating-label-opacity: .65 !default;
$form-floating-label-transform: scale(.85) translateY(-.5rem) translateX(.15rem) !default;
-$form-floating-label-disabled-color: var(--#{$prefix}gray-600) !default;
+$form-floating-label-disabled-color: var(--gray-600) !default;
$form-floating-transition: opacity .1s ease-in-out, transform .1s ease-in-out !default;
// scss-docs-end form-floating-variables
height: 100%; // allow textareas
padding: $form-floating-padding-y $form-floating-padding-x;
overflow: hidden;
- color: rgba(var(--#{$prefix}body-color-rgb), #{$form-floating-label-opacity});
+ color: rgba(var(--body-color-rgb), #{$form-floating-label-opacity});
text-align: start;
text-overflow: ellipsis;
white-space: nowrap;
@layer forms {
.form-control {
- --#{$prefix}control-min-height: #{$control-min-height};
- --#{$prefix}control-padding-y: #{$control-padding-y};
- --#{$prefix}control-padding-x: #{$control-padding-x};
- --#{$prefix}control-font-size: #{$control-font-size};
- --#{$prefix}control-line-height: #{$control-line-height};
- --#{$prefix}control-color: #{$control-color};
- --#{$prefix}control-bg: #{$control-bg};
- --#{$prefix}control-border-width: #{$control-border-width};
- --#{$prefix}control-border-color: #{$control-border-color};
- --#{$prefix}control-border-radius: #{$control-border-radius};
- --#{$prefix}control-select-bg-color: #{$control-select-indicator-color};
- --#{$prefix}control-select-bg: #{escape-svg($control-select-indicator)};
- --#{$prefix}control-select-bg-position: #{$control-select-bg-position};
- --#{$prefix}control-select-bg-size: #{$control-select-bg-size};
+ --control-min-height: #{$control-min-height};
+ --control-padding-y: #{$control-padding-y};
+ --control-padding-x: #{$control-padding-x};
+ --control-font-size: #{$control-font-size};
+ --control-line-height: #{$control-line-height};
+ --control-color: #{$control-color};
+ --control-bg: #{$control-bg};
+ --control-border-width: #{$control-border-width};
+ --control-border-color: #{$control-border-color};
+ --control-border-radius: #{$control-border-radius};
+ --control-select-bg-color: #{$control-select-indicator-color};
+ --control-select-bg: #{escape-svg($control-select-indicator)};
+ --control-select-bg-position: #{$control-select-bg-position};
+ --control-select-bg-size: #{$control-select-bg-size};
display: block;
width: 100%;
- min-height: var(--#{$prefix}control-min-height);
- padding: var(--#{$prefix}control-padding-y) var(--#{$prefix}control-padding-x);
- font-size: var(--#{$prefix}control-font-size);
- line-height: var(--#{$prefix}control-line-height);
- color: var(--#{$prefix}control-color);
+ min-height: var(--control-min-height);
+ padding: var(--control-padding-y) var(--control-padding-x);
+ font-size: var(--control-font-size);
+ line-height: var(--control-line-height);
+ color: var(--control-color);
appearance: none;
- background-color: var(--#{$prefix}control-bg);
+ background-color: var(--control-bg);
background-clip: padding-box;
- border: var(--#{$prefix}control-border-width) solid var(--#{$prefix}control-border-color);
- @include border-radius(var(--#{$prefix}control-border-radius), 0);
+ border: var(--control-border-width) solid var(--control-border-color);
+ @include border-radius(var(--control-border-radius), 0);
@include box-shadow($input-box-shadow);
@include transition($input-transition);
background-color: $input-focus-bg;
border-color: $input-focus-border-color;
@include focus-ring(true);
- --#{$prefix}focus-ring-offset: -1px;
+ --focus-ring-offset: -1px;
}
&::-webkit-date-and-time-value {
// File input buttons theming
&::file-selector-button {
- min-height: var(--#{$prefix}control-min-height);
- padding: var(--#{$prefix}control-padding-y) var(--#{$prefix}control-padding-x);
- margin: calc(var(--#{$prefix}control-padding-y) * -1) calc(var(--#{$prefix}control-padding-x) * -1);
- margin-inline-end: var(--#{$prefix}control-padding-x);
+ min-height: var(--control-min-height);
+ padding: var(--control-padding-y) var(--control-padding-x);
+ margin: calc(var(--control-padding-y) * -1) calc(var(--control-padding-x) * -1);
+ margin-inline-end: var(--control-padding-x);
color: $form-file-button-color;
@include gradient-bg($form-file-button-bg);
pointer-events: none;
border-color: inherit;
border-style: solid;
border-width: 0;
- border-inline-end-width: var(--#{$prefix}control-border-width);
+ border-inline-end-width: var(--control-border-width);
border-radius: 0; // stylelint-disable-line property-disallowed-list
@include transition($btn-transition);
}
// stylelint-disable selector-no-qualifying-type
select.form-control {
- padding-inline-end: calc(var(--#{$prefix}control-padding-x) * 3);
- background-image: var(--#{$prefix}control-select-bg);
+ padding-inline-end: calc(var(--control-padding-x) * 3);
+ background-image: var(--control-select-bg);
background-repeat: no-repeat;
- background-position: var(--#{$prefix}control-select-bg-position);
- background-size: var(--#{$prefix}control-select-bg-size);
+ background-position: var(--control-select-bg-position);
+ background-size: var(--control-select-bg-size);
&[multiple],
&[size]:not([size="1"]) {
- padding-inline-end: var(--#{$prefix}control-padding-x);
+ padding-inline-end: var(--control-padding-x);
background-image: none;
}
@if $enable-dark-mode {
@include color-mode(dark) {
- --#{$prefix}control-select-indicator: #{escape-svg($control-select-indicator-dark)};
+ --control-select-indicator: #{escape-svg($control-select-indicator-dark)};
}
}
}
// Repeated in `_input_group.scss` to avoid Sass extend issues.
.form-control-sm {
- --#{$prefix}control-min-height: #{$control-min-height-sm};
- --#{$prefix}control-padding-y: #{$control-padding-y-sm};
- --#{$prefix}control-padding-x: #{$control-padding-x-sm};
- --#{$prefix}control-font-size: #{$control-font-size-sm};
- --#{$prefix}control-line-height: #{$control-line-height-sm};
- --#{$prefix}control-border-radius: #{$control-border-radius-sm};
+ --control-min-height: #{$control-min-height-sm};
+ --control-padding-y: #{$control-padding-y-sm};
+ --control-padding-x: #{$control-padding-x-sm};
+ --control-font-size: #{$control-font-size-sm};
+ --control-line-height: #{$control-line-height-sm};
+ --control-border-radius: #{$control-border-radius-sm};
}
.form-control-lg {
- --#{$prefix}control-min-height: #{$control-min-height-lg};
- --#{$prefix}control-padding-y: #{$control-padding-y-lg};
- --#{$prefix}control-padding-x: #{$control-padding-x-lg};
- --#{$prefix}control-font-size: #{$control-font-size-lg};
- --#{$prefix}control-line-height: #{$control-line-height-lg};
- --#{$prefix}control-border-radius: #{$control-border-radius-lg};
+ --control-min-height: #{$control-min-height-lg};
+ --control-padding-y: #{$control-padding-y-lg};
+ --control-padding-x: #{$control-padding-x-lg};
+ --control-font-size: #{$control-font-size-lg};
+ --control-line-height: #{$control-line-height-lg};
+ --control-border-radius: #{$control-border-radius-lg};
}
// // Make sure textareas don't shrink too much when resized
$form-range-track-width: 100% !default;
$form-range-track-height: .5rem !default;
$form-range-track-cursor: pointer !default;
-$form-range-track-bg: var(--#{$prefix}secondary-bg) !default;
+$form-range-track-bg: var(--secondary-bg) !default;
$form-range-track-border-radius: 1rem !default;
-$form-range-track-box-shadow: var(--#{$prefix}box-shadow-inset) !default;
+$form-range-track-box-shadow: var(--box-shadow-inset) !default;
$form-range-thumb-width: 1rem !default;
$form-range-thumb-height: $form-range-thumb-width !default;
$form-range-thumb-border-radius: 1rem !default;
$form-range-thumb-box-shadow: 0 .1rem .25rem rgba($black, .1) !default;
$form-range-thumb-active-bg: tint-color($component-active-bg, 70%) !default;
-$form-range-thumb-disabled-bg: var(--#{$prefix}secondary-color) !default;
+$form-range-thumb-disabled-bg: var(--secondary-color) !default;
$form-range-thumb-transition: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
// scss-docs-end form-range-variables
@layer forms {
.form-range {
width: 100%;
- height: calc(#{$form-range-thumb-height} + (var(--#{$prefix}focus-ring-width) * 2));
+ height: calc(#{$form-range-thumb-height} + (var(--focus-ring-width) * 2));
padding: 0; // Need to reset padding
appearance: none;
background-color: transparent;
// Pseudo-elements must be split across multiple rulesets to have an effect.
&::-webkit-slider-thumb {
@include focus-ring(true);
- --#{$prefix}focus-ring-offset: 1px;
+ --focus-ring-offset: 1px;
}
&::-moz-range-thumb {
@include focus-ring(true);
- --#{$prefix}focus-ring-offset: 1px;
+ --focus-ring-offset: 1px;
}
}
$form-text-font-size: $small-font-size !default;
$form-text-font-style: null !default;
$form-text-font-weight: null !default;
-$form-text-color: var(--#{$prefix}secondary-color) !default;
+$form-text-color: var(--secondary-color) !default;
// scss-docs-end form-text-variables
@layer forms {
$control-padding-x: .75rem !default;
$control-font-size: $font-size-base !default;
$control-line-height: $line-height-base !default;
-$control-color: var(--#{$prefix}color-body) !default;
-$control-bg: var(--#{$prefix}bg-body) !default;
-$control-border-width: var(--#{$prefix}border-width) !default;
-$control-border-color: var(--#{$prefix}border-color) !default;
-$control-border-radius: var(--#{$prefix}border-radius) !default;
+$control-color: var(--color-body) !default;
+$control-bg: var(--bg-body) !default;
+$control-border-width: var(--border-width) !default;
+$control-border-color: var(--border-color) !default;
+$control-border-radius: var(--border-radius) !default;
$control-padding-y-sm: .25rem !default;
$control-padding-x-sm: .5rem !default;
$control-font-size-sm: $font-size-sm !default;
$control-line-height-sm: $line-height-sm !default;
-$control-border-radius-sm: var(--#{$prefix}border-radius-sm) !default;
+$control-border-radius-sm: var(--border-radius-sm) !default;
$control-padding-y-lg: .5rem !default;
$control-padding-x-lg: 1rem !default;
$control-font-size-lg: $font-size-lg !default;
$control-line-height-lg: $line-height-lg !default;
-$control-border-radius-lg: var(--#{$prefix}border-radius-lg) !default;
+$control-border-radius-lg: var(--border-radius-lg) !default;
-$control-select-indicator-color: var(--#{$prefix}gray-600) !default;
+$control-select-indicator-color: var(--gray-600) !default;
$control-select-indicator: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$control-select-indicator-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/></svg>") !default;
$control-select-bg-position: right $control-padding-x center !default;
$control-select-bg-size: 16px 12px !default;
$input-btn-padding-x-lg: 1rem !default;
$input-btn-font-size-lg: $font-size-lg !default;
-// $input-btn-border-width: var(--#{$prefix}border-width) !default;
+// $input-btn-border-width: var(--border-width) !default;
// scss-docs-end input-btn-variables
// scss-docs-start form-input-variables
$input-padding-x-lg: $input-btn-padding-x-lg !default;
$input-font-size-lg: $input-btn-font-size-lg !default;
-$input-bg: var(--#{$prefix}bg-body) !default;
+$input-bg: var(--bg-body) !default;
$input-disabled-color: null !default;
-$input-disabled-bg: var(--#{$prefix}secondary-bg) !default;
+$input-disabled-bg: var(--secondary-bg) !default;
$input-disabled-border-color: null !default;
-$input-color: var(--#{$prefix}color-body) !default;
-$input-border-color: var(--#{$prefix}border-color) !default;
-$input-border-width: var(--#{$prefix}border-width) !default;
-$input-box-shadow: var(--#{$prefix}box-shadow-inset) !default;
+$input-color: var(--color-body) !default;
+$input-border-color: var(--border-color) !default;
+$input-border-width: var(--border-width) !default;
+$input-box-shadow: var(--box-shadow-inset) !default;
-$input-border-radius: var(--#{$prefix}border-radius) !default;
-$input-border-radius-sm: var(--#{$prefix}border-radius-sm) !default;
-$input-border-radius-lg: var(--#{$prefix}border-radius-lg) !default;
+$input-border-radius: var(--border-radius) !default;
+$input-border-radius-sm: var(--border-radius-sm) !default;
+$input-border-radius-lg: var(--border-radius-lg) !default;
$input-focus-bg: $input-bg !default;
-$input-focus-border-color: var(--#{$prefix}primary-border) !default;
+$input-focus-border-color: var(--primary-border) !default;
$input-focus-color: $input-color !default;
-$input-placeholder-color: var(--#{$prefix}secondary-color) !default;
-$input-plaintext-color: var(--#{$prefix}color-body) !default;
+$input-placeholder-color: var(--secondary-color) !default;
+$input-plaintext-color: var(--color-body) !default;
$input-height-border: calc(#{$input-border-width} * 2) !default;
// scss-docs-start form-file-variables
$form-file-button-color: $input-color !default;
-$form-file-button-bg: var(--#{$prefix}tertiary-bg) !default;
-$form-file-button-hover-bg: var(--#{$prefix}secondary-bg) !default;
+$form-file-button-bg: var(--tertiary-bg) !default;
+$form-file-button-hover-bg: var(--secondary-bg) !default;
// scss-docs-end form-file-variables
// scss-docs-start form-feedback-variables
$form-feedback-margin-top: .5rem !default;
$form-feedback-font-size: $font-size-sm !default;
$form-feedback-font-style: null !default;
-$form-feedback-valid-color: var(--#{$prefix}success) !default;
-$form-feedback-invalid-color: var(--#{$prefix}danger) !default;
+$form-feedback-valid-color: var(--success) !default;
+$form-feedback-invalid-color: var(--danger) !default;
$form-feedback-icon-valid-color: $form-feedback-valid-color !default;
$form-feedback-icon-valid: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><path fill='#{$form-feedback-icon-valid-color}' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1'/></svg>") !default;
// scss-docs-start form-validation-states
$form-validation-states: (
"valid": (
- "color": var(--#{$prefix}form-valid-color),
+ "color": var(--form-valid-color),
"icon": $form-feedback-icon-valid,
"tooltip-color": #fff,
- "tooltip-bg-color": var(--#{$prefix}success),
- // "focus-box-shadow": 0 0 $input-btn-focus-blur $input-focus-width rgba(var(--#{$prefix}success-rgb), $input-btn-focus-color-opacity),
- "border-color": var(--#{$prefix}form-valid-border-color),
+ "tooltip-bg-color": var(--success),
+ // "focus-box-shadow": 0 0 $input-btn-focus-blur $input-focus-width rgba(var(--success-rgb), $input-btn-focus-color-opacity),
+ "border-color": var(--form-valid-border-color),
),
"invalid": (
- "color": var(--#{$prefix}form-invalid-color),
+ "color": var(--form-invalid-color),
"icon": $form-feedback-icon-invalid,
"tooltip-color": #fff,
- "tooltip-bg-color": var(--#{$prefix}danger),
- // "focus-box-shadow": 0 0 $input-btn-focus-blur $input-focus-width rgba(var(--#{$prefix}danger-rgb), $input-btn-focus-color-opacity),
- "border-color": var(--#{$prefix}form-invalid-border-color),
+ "tooltip-bg-color": var(--danger),
+ // "focus-box-shadow": 0 0 $input-btn-focus-blur $input-focus-width rgba(var(--danger-rgb), $input-btn-focus-color-opacity),
+ "border-color": var(--form-invalid-border-color),
)
) !default;
// scss-docs-end form-validation-states
$input-group-addon-padding-x: $input-padding-x !default;
// $input-group-addon-font-weight: $input-font-weight !default;
$input-group-addon-color: $input-color !default;
-$input-group-addon-bg: var(--#{$prefix}tertiary-bg) !default;
+$input-group-addon-bg: var(--tertiary-bg) !default;
$input-group-addon-border-color: $input-border-color !default;
// scss-docs-end input-group-variables
@use "form-variables" as *;
// scss-docs-start radio-variables
-$radio-border-color: var(--#{$prefix}border-color) !default;
-$radio-checked-bg: var(--#{$prefix}primary-base) !default;
+$radio-border-color: var(--border-color) !default;
+$radio-checked-bg: var(--primary-base) !default;
$radio-checked-border-color: $radio-checked-bg !default;
-$radio-disabled-bg: var(--#{$prefix}bg-3) !default;
+$radio-disabled-bg: var(--bg-3) !default;
$radio-disabled-opacity: .65 !default;
// scss-docs-end radio-variables
@layer forms {
b-radiogroup {
display: flex;
- gap: var(--#{$prefix}gap, .5rem);
- align-items: var(--#{$prefix}align-items, start);
+ gap: var(--gap, .5rem);
+ align-items: var(--align-items, start);
.description {
- color: var(--#{$prefix}secondary-text);
+ color: var(--secondary-text);
}
}
.radio {
// scss-docs-start radio-css-variables
- --#{$prefix}radio-bg: transparent;
- --#{$prefix}radio-border-color: #{$radio-border-color};
- --#{$prefix}radio-checked-bg: #{$radio-checked-bg};
- --#{$prefix}radio-checked-border-color: #{$radio-checked-border-color};
- --#{$prefix}radio-disabled-bg: #{$radio-disabled-bg};
- --#{$prefix}radio-disabled-opacity: #{$radio-disabled-opacity};
+ --radio-bg: transparent;
+ --radio-border-color: #{$radio-border-color};
+ --radio-checked-bg: #{$radio-checked-bg};
+ --radio-checked-border-color: #{$radio-checked-border-color};
+ --radio-disabled-bg: #{$radio-disabled-bg};
+ --radio-disabled-opacity: #{$radio-disabled-opacity};
// scss-docs-end radio-css-variables
position: relative;
height: 1rem;
margin-block: .125rem;
appearance: none;
- background-color: var(--#{$prefix}theme-bg, var(--#{$prefix}radio-bg));
- border: 1px solid var(--#{$prefix}theme-bg, var(--#{$prefix}radio-border-color));
+ background-color: var(--theme-bg, var(--radio-bg));
+ border: 1px solid var(--theme-bg, var(--radio-border-color));
// stylelint-disable-next-line property-disallowed-list
border-radius: 50%;
&:checked {
- color: var(--#{$prefix}theme-contrast, var(--#{$prefix}primary-contrast));
- background-color: var(--#{$prefix}theme-bg, var(--#{$prefix}radio-checked-bg));
- border-color: var(--#{$prefix}theme-bg, var(--#{$prefix}radio-checked-border-color));
+ color: var(--theme-contrast, var(--primary-contrast));
+ background-color: var(--theme-bg, var(--radio-checked-bg));
+ border-color: var(--theme-bg, var(--radio-checked-border-color));
&::before {
position: absolute;
}
&:disabled {
- --#{$prefix}radio-bg: var(--#{$prefix}radio-disabled-bg);
+ --radio-bg: var(--radio-disabled-bg);
~ label {
- color: var(--#{$prefix}secondary-text);
+ color: var(--secondary-text);
cursor: default;
}
}
@layer forms {
.switch {
// scss-docs-start switch-css-variables
- --#{$prefix}switch-height: 1.25rem;
- --#{$prefix}switch-width: calc(var(--#{$prefix}switch-height) * 1.5);
- --#{$prefix}switch-padding: .0625rem;
- --#{$prefix}switch-bg: var(--#{$prefix}secondary-bg);
- --#{$prefix}switch-border-width: var(--#{$prefix}border-width);
- --#{$prefix}switch-border-color: var(--#{$prefix}border-color);
- --#{$prefix}switch-indicator-bg: var(--#{$prefix}white);
- --#{$prefix}switch-checked-bg: var(--#{$prefix}primary-base);
- --#{$prefix}switch-checked-border-color: var(--#{$prefix}switch-checked-bg);
- --#{$prefix}switch-checked-indicator-bg: var(--#{$prefix}white);
- --#{$prefix}switch-disabled-bg: var(--#{$prefix}secondary-bg);
- --#{$prefix}switch-disabled-indicator-bg: var(--#{$prefix}secondary-text);
+ --switch-height: 1.25rem;
+ --switch-width: calc(var(--switch-height) * 1.5);
+ --switch-padding: .0625rem;
+ --switch-bg: var(--secondary-bg);
+ --switch-border-width: var(--border-width);
+ --switch-border-color: var(--border-color);
+ --switch-indicator-bg: var(--white);
+ --switch-checked-bg: var(--primary-base);
+ --switch-checked-border-color: var(--switch-checked-bg);
+ --switch-checked-indicator-bg: var(--white);
+ --switch-disabled-bg: var(--secondary-bg);
+ --switch-disabled-indicator-bg: var(--secondary-text);
// scss-docs-end switch-css-variables
position: relative;
flex-shrink: 0;
align-items: stretch;
justify-content: flex-start;
- width: var(--#{$prefix}switch-width);
- height: var(--#{$prefix}switch-height);
- padding: var(--#{$prefix}switch-padding);
- background-color: var(--#{$prefix}switch-bg);
- border: var(--#{$prefix}switch-border-width) solid var(--#{$prefix}switch-border-color);
+ width: var(--switch-width);
+ height: var(--switch-height);
+ padding: var(--switch-padding);
+ background-color: var(--switch-bg);
+ border: var(--switch-border-width) solid var(--switch-border-color);
// stylelint-disable-next-line property-disallowed-list
border-radius: 10rem;
box-shadow: inset 0 1px 2px rgba($black, .05);
&::before {
flex-shrink: 0;
- width: calc(var(--#{$prefix}switch-height) - calc(var(--#{$prefix}switch-padding) * 2) - var(--#{$prefix}switch-border-width) * 2);
- height: calc(var(--#{$prefix}switch-height) - calc(var(--#{$prefix}switch-padding) * 2) - var(--#{$prefix}switch-border-width) * 2);
+ width: calc(var(--switch-height) - calc(var(--switch-padding) * 2) - var(--switch-border-width) * 2);
+ height: calc(var(--switch-height) - calc(var(--switch-padding) * 2) - var(--switch-border-width) * 2);
content: "";
- background-color: var(--#{$prefix}switch-indicator-bg);
+ background-color: var(--switch-indicator-bg);
// stylelint-disable-next-line property-disallowed-list
border-radius: 50%;
box-shadow: 0 1px 2px rgba($black, .1);
}
&:has(input:checked) {
- padding-inline-start: calc(var(--#{$prefix}switch-height) / 2 + var(--#{$prefix}switch-padding));
- background-color: var(--#{$prefix}theme-bg, var(--#{$prefix}switch-checked-bg));
- border-color: var(--#{$prefix}theme-bg, var(--#{$prefix}switch-checked-border-color));
+ padding-inline-start: calc(var(--switch-height) / 2 + var(--switch-padding));
+ background-color: var(--theme-bg, var(--switch-checked-bg));
+ border-color: var(--theme-bg, var(--switch-checked-border-color));
}
&:has(input:disabled) {
- --#{$prefix}switch-bg: var(--#{$prefix}switch-disabled-bg);
- --#{$prefix}switch-indicator-bg: var(--#{$prefix}switch-disabled-indicator-bg);
+ --switch-bg: var(--switch-disabled-bg);
+ --switch-indicator-bg: var(--switch-disabled-indicator-bg);
&::before { opacity: .4; }
~ label {
- color: var(--#{$prefix}secondary-text);
+ color: var(--secondary-text);
cursor: default;
}
}
}
.switch-sm {
- --#{$prefix}switch-height: 1em;
+ --switch-height: 1em;
}
.switch-lg {
- --#{$prefix}switch-height: 2em;
+ --switch-height: 2em;
}
}
// @if $enable-validation-icons {
// &:not([multiple]):not([size]),
// &:not([multiple])[size="1"] {
- // --#{$prefix}form-select-bg-icon: #{escape-svg($icon)};
+ // --form-select-bg-icon: #{escape-svg($icon)};
// padding-right: $form-select-feedback-icon-padding-end;
// background-position: $form-select-bg-position, $form-select-feedback-icon-position;
// background-size: $form-select-bg-size, $form-select-feedback-icon-size;
// All-caps `RGBA()` function used because of this Sass bug: https://github.com/sass/node-sass/issues/2251
@each $color, $value in $new-theme-colors {
.text-bg-#{$color} {
- color: var(--#{$prefix}#{$color}-text);
- --#{$prefix}bg: var(--#{$prefix}#{$color}-bg-subtle);
+ color: var(--#{$color}-text);
+ --bg: var(--#{$color}-bg-subtle);
// color: color-contrast($value);
- // background-color: RGBA(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}bg-opacity, 1));
+ // background-color: RGBA(var(--#{$color}-rgb), var(--bg-opacity, 1));
}
}
}
@layer helpers {
@each $color, $value in $new-theme-colors {
.link-#{$color} {
- --#{$prefix}link-color: var(--#{$prefix}#{$color}-text);
- // text-decoration-color: color-mix(in srgb, var(--#{$prefix}#{$color}-text), transparent var(--#{$prefix}link-underline-opacity));
+ --link-color: var(--#{$color}-text);
+ // text-decoration-color: color-mix(in srgb, var(--#{$color}-text), transparent var(--link-underline-opacity));
@if $link-shade-percentage != 0 {
&:hover,
&:focus {
- --#{$prefix}link-color: var(--#{$prefix}#{$color}-text-emphasis);
- --#{$prefix}link-hover-color: var(--#{$prefix}#{$color}-text-emphasis);
+ --link-color: var(--#{$color}-text-emphasis);
+ --link-hover-color: var(--#{$color}-text-emphasis);
// $hover-color: if(color-contrast($value) == $color-contrast-light, shade-color($value, $link-shade-percentage), tint-color($value, $link-shade-percentage));
- // color: color-mix(in srgb, $hover-color, transparent var(--#{$prefix}link-opacity));
- // text-decoration-color: color-mix(in srgb, var(--#{$prefix}#{$color}-text), transparent var(--#{$prefix}link-underline-opacity));
+ // color: color-mix(in srgb, $hover-color, transparent var(--link-opacity));
+ // text-decoration-color: color-mix(in srgb, var(--#{$color}-text), transparent var(--link-underline-opacity));
}
}
}
// One-off special link helper as a bridge until v6
.link-body-emphasis {
- color: color-mix(in srgb, var(--#{$prefix}emphasis-color), transparent var(--#{$prefix}link-opacity));
- text-decoration-color: color-mix(in srgb, var(--#{$prefix}emphasis-color), transparent var(--#{$prefix}link-underline-opacity));
+ color: color-mix(in srgb, var(--emphasis-color), transparent var(--link-opacity));
+ text-decoration-color: color-mix(in srgb, var(--emphasis-color), transparent var(--link-underline-opacity));
@if $link-shade-percentage != 0 {
&:hover,
&:focus {
- color: color-mix(in srgb, var(--#{$prefix}emphasis-color), transparent var(--#{$prefix}link-opacity, .75));
- text-decoration-color: color-mix(in srgb, var(--#{$prefix}emphasis-color), transparent var(--#{$prefix}link-underline-opacity, .75));
+ color: color-mix(in srgb, var(--emphasis-color), transparent var(--link-opacity, .75));
+ text-decoration-color: color-mix(in srgb, var(--emphasis-color), transparent var(--link-underline-opacity, .75));
}
}
}
@layer helpers {
.focus-ring:focus-visible {
- outline: var(--#{$prefix}focus-ring);
+ outline: var(--focus-ring);
}
}
display: inline-flex;
gap: $icon-link-gap;
align-items: center;
- text-decoration-color: rgba(var(--#{$prefix}link-color-rgb), var(--#{$prefix}link-opacity, .5));
+ text-decoration-color: rgba(var(--link-color-rgb), var(--link-opacity, .5));
text-underline-offset: $icon-link-underline-offset;
backface-visibility: hidden;
&:hover,
&:focus-visible {
> .bi {
- transform: var(--#{$prefix}icon-link-transform, $icon-link-icon-transform);
+ transform: var(--icon-link-transform, $icon-link-icon-transform);
}
}
}
// Container mixins
@mixin make-container($gutter: $container-padding-x) {
- --#{$prefix}gutter-x: #{$gutter};
- --#{$prefix}gutter-y: 0;
+ --gutter-x: #{$gutter};
+ --gutter-y: 0;
width: 100%;
- padding-inline: calc(var(--#{$prefix}gutter-x) * .5);
+ padding-inline: calc(var(--gutter-x) * .5);
margin-inline: auto;
}
:root {
@each $name, $value in $grid-breakpoints {
- --#{$prefix}breakpoint-#{$name}: #{$value};
+ --breakpoint-#{$name}: #{$value};
}
}
@if $enable-cssgrid {
.grid {
- --#{$prefix}columns: #{$grid-columns};
- --#{$prefix}rows: 1;
- --#{$prefix}gap: #{$grid-gutter-width};
+ --columns: #{$grid-columns};
+ --rows: 1;
+ --gap: #{$grid-gutter-width};
display: grid;
- grid-template-rows: repeat(var(--#{$prefix}rows), 1fr);
- grid-template-columns: repeat(var(--#{$prefix}columns), 1fr);
- gap: var(--#{$prefix}gap);
+ grid-template-rows: repeat(var(--rows), 1fr);
+ grid-template-columns: repeat(var(--columns), 1fr);
+ gap: var(--gap);
}
}
.grid-fill {
- --#{$prefix}gap: #{$grid-gutter-width};
+ --gap: #{$grid-gutter-width};
display: grid;
grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
grid-auto-flow: row;
- gap: var(--#{$prefix}gap);
+ gap: var(--gap);
}
// .g-col-auto {
// mdo-do: add to utilities?
// .grid-cols-3 {
- // --#{$prefix}columns: 3;
+ // --columns: 3;
// }
// .grid-cols-4 {
- // --#{$prefix}columns: 4;
+ // --columns: 4;
// }
// .grid-cols-6 {
- // --#{$prefix}columns: 6;
+ // --columns: 6;
// }
// .grid-full {
@mixin focus-ring($offset: false, $color: null) {
@if $color != null {
- outline: var(--#{$prefix}focus-ring-width) solid #{$color};
+ outline: var(--focus-ring-width) solid #{$color};
} @else {
- outline: var(--#{$prefix}focus-ring);
+ outline: var(--focus-ring);
}
@if $offset {
- outline-offset: var(--#{$prefix}focus-ring-offset);
+ outline-offset: var(--focus-ring-offset);
}
}
@if $enable-validation-icons {
&:not([multiple]):not([size]),
&:not([multiple])[size="1"] {
- --#{$prefix}form-select-bg-icon: #{escape-svg($icon)};
+ --form-select-bg-icon: #{escape-svg($icon)};
padding-inline-end: $form-select-feedback-icon-padding-end;
background-position: $form-select-bg-position, $form-select-feedback-icon-position;
background-size: $form-select-bg-size, $form-select-feedback-icon-size;
background-color: $color;
@if $enable-gradients {
- background-image: var(--#{$prefix}gradient);
+ background-image: var(--gradient);
}
}
// scss-docs-end gradient-bg-mixin
// Horizontal gradient, from left to right
//
// Creates two color stops, start and end, by specifying a color and position for each color stop.
-@mixin gradient-x($start-color: var(--#{$prefix}gray-700), $end-color: var(--#{$prefix}gray-800), $start-percent: 0%, $end-percent: 100%) {
+@mixin gradient-x($start-color: var(--gray-700), $end-color: var(--gray-800), $start-percent: 0%, $end-percent: 100%) {
background-image: linear-gradient(to right, $start-color $start-percent, $end-color $end-percent);
}
// Vertical gradient, from top to bottom
//
// Creates two color stops, start and end, by specifying a color and position for each color stop.
-@mixin gradient-y($start-color: var(--#{$prefix}gray-700), $end-color: var(--#{$prefix}gray-800), $start-percent: null, $end-percent: null) {
+@mixin gradient-y($start-color: var(--gray-700), $end-color: var(--gray-800), $start-percent: null, $end-percent: null) {
background-image: linear-gradient(to bottom, $start-color $start-percent, $end-color $end-percent);
}
-@mixin gradient-directional($start-color: var(--#{$prefix}gray-700), $end-color: var(--#{$prefix}gray-800), $deg: 45deg) {
+@mixin gradient-directional($start-color: var(--gray-700), $end-color: var(--gray-800), $deg: 45deg) {
background-image: linear-gradient($deg, $start-color, $end-color);
}
background-image: linear-gradient($start-color, $mid-color $color-stop, $end-color);
}
-@mixin gradient-radial($inner-color: var(--#{$prefix}gray-700), $outer-color: var(--#{$prefix}gray-800)) {
+@mixin gradient-radial($inner-color: var(--gray-700), $outer-color: var(--gray-800)) {
background-image: radial-gradient(circle, $inner-color, $outer-color);
}
// Generate semantic grid columns with these mixins.
@mixin make-row($gutter: $grid-gutter-width) {
- --#{$prefix}gutter-x: #{$gutter};
- --#{$prefix}gutter-y: 0;
+ --gutter-x: #{$gutter};
+ --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-inline: calc(-.5 * var(--#{$prefix}gutter-x));
- margin-top: calc(-1 * var(--#{$prefix}gutter-y));
+ margin-inline: calc(-.5 * var(--gutter-x));
+ margin-top: calc(-1 * var(--gutter-y));
}
@mixin make-col-ready() {
flex-shrink: 0;
width: 100%;
max-width: 100%; // Prevent `.col-auto`, `.col` (& responsive variants) from breaking out the grid
- padding-inline: calc(var(--#{$prefix}gutter-x) * .5);
- margin-top: var(--#{$prefix}gutter-y);
+ padding-inline: calc(var(--gutter-x) * .5);
+ margin-top: var(--gutter-y);
}
@mixin make-col($size: false, $columns: $grid-columns) {
@each $key, $value in $gutters {
.g#{$infix}-#{$key},
.gx#{$infix}-#{$key} {
- --#{$prefix}gutter-x: #{$value};
+ --gutter-x: #{$value};
}
.g#{$infix}-#{$key},
.gy#{$infix}-#{$key} {
- --#{$prefix}gutter-y: #{$value};
+ --gutter-y: #{$value};
}
}
}
// 1. Property map with null values (CSS var receives the utility value):
// "bg-color": (
// property: (
-// "--#{$prefix}bg": null,
-// "background-color": var(--#{$prefix}bg)
+// "--bg": null,
+// "background-color": var(--bg)
// ),
// class: bg,
// values: (
-// primary: var(--#{$prefix}blue-500),
+// primary: var(--blue-500),
// )
// )
// Generates:
@if meta.type-of($variables) == "list" {
// If variables is a list, each variable gets the utility value
@each $var-name in $variables {
- --#{$prefix}#{$var-name}: #{$value};
+ --#{$var-name}: #{$value};
}
} @else if meta.type-of($variables) == "map" {
// If variables is a map, use the provided values (for static variables)
@each $var-key, $var-value in $variables {
- --#{$prefix}#{$var-key}: #{$var-value};
+ --#{$var-key}: #{$var-value};
}
}
}
@if meta.type-of($variables) == "list" {
// If variables is a list, each variable gets the utility value
@each $var-name in $variables {
- --#{$prefix}#{$var-name}: #{$value};
+ --#{$var-name}: #{$value};
}
} @else if meta.type-of($variables) == "map" {
// If variables is a map, use the provided values (for static variables)
@each $var-key, $var-value in $variables {
- --#{$prefix}#{$var-key}: #{$var-value};
+ --#{$var-key}: #{$var-value};
}
}
}
-@use "../../config" as *;
@use "../../variables" as *;
@use "../../functions" as *;
@use "../../mixins/utilities" as *;
$true-terminal-output: false;
-$prefix: bs-;
// Important: Do not import rfs to check that the mixin just calls the appropriate functions from it
// @import "../../mixins/utilities";
padding-y: 1rem;
padding-x: 1rem;
// stylelint-disable-next-line property-disallowed-list
- border-radius: var(--bs-border-radius);
+ border-radius: var(--border-radius);
}
}
}
module.exports = {
- plugins: [require('autoprefixer')]
+ plugins: [
+ require('postcss-prefix-custom-properties')({
+ prefix: 'bs-',
+ ignore: [/^--bs-/, /^--bd-/]
+ }),
+ require('autoprefixer')
+ ]
}
.breadcrumb-chevron {
- --bs-breadcrumb-divider: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%236c757d'%3E%3Cpath fill-rule='evenodd' d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
+ --bs-bs-bs-bs-bs-breadcrumb-divider: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%236c757d'%3E%3Cpath fill-rule='evenodd' d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
gap: .5rem;
}
.breadcrumb-chevron .breadcrumb-item {
height: 50px;
margin-top: -25px;
content: "";
- background-color: var(--bs-tertiary-bg);
+ background-color: var(--bs-bs-bs-bs-bs-tertiary-bg);
border-top-right-radius: .5rem;
- box-shadow: 1px -1px var(--bs-border-color);
+ box-shadow: 1px -1px var(--bs-bs-bs-bs-bs-border-color);
transform: scale(.707) rotate(45deg);
}
.breadcrumb-custom .breadcrumb-item:first-child {
body {
padding-top: 3rem;
padding-bottom: 3rem;
- color: rgb(var(--bs-tertiary-color-rgb));
+ color: rgb(var(--bs-bs-bs-bs-bs-tertiary-color-rgb));
}
padding: .1875rem .5rem;
margin-top: .125rem;
margin-left: .3125rem;
- color: var(--bs-body-color);
+ color: var(--bs-bs-bs-bs-bs-body-color);
}
.bd-aside a:hover,
.bd-aside a:focus {
- color: var(--bs-body-color);
+ color: var(--bs-bs-bs-bs-bs-body-color);
background-color: rgba(121, 82, 179, .1);
}
.bd-aside .active {
font-weight: 600;
- color: var(--bs-body-color);
+ color: var(--bs-bs-bs-bs-bs-body-color);
}
.bd-aside .btn {
padding: .25rem .5rem;
font-weight: 600;
- color: var(--bs-body-color);
+ color: var(--bs-bs-bs-bs-bs-body-color);
}
.bd-aside .btn:hover,
.bd-aside .btn:focus {
- color: var(--bs-body-color);
+ color: var(--bs-bs-bs-bs-bs-body-color);
background-color: rgba(121, 82, 179, .1);
}
.dropdown-item-danger {
- color: var(--bs-red);
+ color: var(--bs-bs-bs-bs-bs-red);
}
.dropdown-item-danger:hover,
.dropdown-item-danger:focus {
color: #fff;
- background-color: var(--bs-red);
+ background-color: var(--bs-bs-bs-bs-bs-red);
}
.dropdown-item-danger.active {
- background-color: var(--bs-red);
+ background-color: var(--bs-bs-bs-bs-bs-red);
}
.btn-hover-light {
- color: var(--bs-body-color);
- background-color: var(--bs-body-bg);
+ color: var(--bs-bs-bs-bs-bs-body-color);
+ background-color: var(--bs-bs-bs-bs-bs-body-bg);
}
.btn-hover-light:hover,
.btn-hover-light:focus {
- color: var(--bs-link-hover-color);
- background-color: var(--bs-tertiary-bg);
+ color: var(--bs-bs-bs-bs-bs-link-hover-color);
+ background-color: var(--bs-bs-bs-bs-bs-tertiary-bg);
}
.cal-month,
}
.cal-btn:not([disabled]) {
font-weight: 500;
- color: var(--bs-emphasis-color);
+ color: var(--bs-bs-bs-bs-bs-emphasis-color);
}
.cal-btn:hover,
.cal-btn:focus {
- background-color: var(--bs-secondary-bg);
+ background-color: var(--bs-bs-bs-bs-bs-secondary-bg);
}
.cal-btn[disabled] {
border: 0;
.form-control-dark {
- border-color: var(--bs-gray);
+ border-color: var(--bs-bs-bs-bs-bs-gray);
}
.form-control-dark:focus {
border-color: #fff;
-.border-dashed { --bs-border-style: dashed; }
+.border-dashed { --bs-bs-bs-bs-bs-border-style: dashed; }
clip: rect(0, 0, 0, 0);
}
.list-group-item-check:hover + .list-group-item {
- background-color: var(--bs-secondary-bg);
+ background-color: var(--bs-bs-bs-bs-bs-secondary-bg);
}
.list-group-item-check:checked + .list-group-item {
color: #fff;
- background-color: var(--bs-primary);
- border-color: var(--bs-primary);
+ background-color: var(--bs-bs-bs-bs-bs-primary);
+ border-color: var(--bs-bs-bs-bs-bs-primary);
}
.list-group-item-check[disabled] + .list-group-item,
.list-group-item-check:disabled + .list-group-item {
}
.list-group-radio .list-group-item:hover,
.list-group-radio .list-group-item:focus {
- background-color: var(--bs-secondary-bg);
+ background-color: var(--bs-bs-bs-bs-bs-secondary-bg);
}
.list-group-radio .form-check-input:checked + .list-group-item {
- background-color: var(--bs-body);
- border-color: var(--bs-primary);
- box-shadow: 0 0 0 2px var(--bs-primary);
+ background-color: var(--bs-bs-bs-bs-bs-body);
+ border-color: var(--bs-bs-bs-bs-bs-primary);
+ box-shadow: 0 0 0 2px var(--bs-bs-bs-bs-bs-primary);
}
.list-group-radio .form-check-input[disabled] + .list-group-item,
.list-group-radio .form-check-input:disabled + .list-group-item {
body {
- background-image: linear-gradient(180deg, var(--bs-secondary-bg), var(--bs-body-bg) 100px, var(--bs-body-bg));
+ background-image: linear-gradient(180deg, var(--bs-bs-bs-bs-bs-secondary-bg), var(--bs-bs-bs-bs-bs-body-bg) 100px, var(--bs-bs-bs-bs-bs-body-bg));
}
.container {
.btn-toggle {
padding: .25rem .5rem;
font-weight: 600;
- color: var(--bs-emphasis-color);
+ color: var(--bs-bs-bs-bs-bs-emphasis-color);
background-color: transparent;
}
.btn-toggle:hover,
.btn-toggle:focus {
- color: rgba(var(--bs-emphasis-color-rgb), .85);
- background-color: var(--bs-tertiary-bg);
+ color: rgba(var(--bs-bs-bs-bs-bs-emphasis-color-rgb), .85);
+ background-color: var(--bs-bs-bs-bs-bs-tertiary-bg);
}
.btn-toggle::before {
}
.btn-toggle[aria-expanded="true"] {
- color: rgba(var(--bs-emphasis-color-rgb), .85);
+ color: rgba(var(--bs-bs-bs-bs-bs-emphasis-color-rgb), .85);
}
.btn-toggle[aria-expanded="true"]::before {
transform: rotate(90deg);
}
.btn-toggle-nav a:hover,
.btn-toggle-nav a:focus {
- background-color: var(--bs-tertiary-bg);
+ background-color: var(--bs-bs-bs-bs-bs-tertiary-bg);
}
.scrollarea {
code={`// Variable overrides first
$primary: #900;
$enable-shadows: true;
-$prefix: "mo-";
// Then import Bootstrap
@import "../node_modules/bootstrap/scss/bootstrap";`}
// Variable overrides second
$primary: #900;
$enable-shadows: true;
-$prefix: "mo-";
// Required Bootstrap imports
@import "../node_modules/bootstrap/scss/variables";
-@import "../node_modules/bootstrap/scss/variables-dark";
-@import "../node_modules/bootstrap/scss/maps";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/root";
## Prefix
-Most CSS variables use a prefix to avoid collisions with your own codebase. This prefix is in addition to the `--` that’s required on every CSS variable.
+Most CSS variables use a prefix to avoid collisions with your own codebase. This prefix is in addition to the `--` that's required on every CSS variable.
-Customize the prefix via the `$prefix` Sass variable. By default, it’s set to `bs-` (note the trailing dash).
+The `bs-` prefix is added automatically via [PostCSS](https://postcss.org/) using the `postcss-prefix-custom-properties` plugin during our build process. This means you write unprefixed custom properties in the source Sass (e.g., `--border-radius`) and they become prefixed in the compiled CSS (e.g., `--bs-border-radius`).
+
+If you're building your own custom version of Bootstrap's CSS and want to change the prefix, update the `prefix` option in your PostCSS configuration:
+
+```js
+// postcss.config.js
+import postcssPrefixCustomProperties from 'postcss-prefix-custom-properties'
+
+export default {
+ plugins: [
+ postcssPrefixCustomProperties({ prefix: 'custom-' })
+ ]
+}
+```
## Examples
Dart Sass uses a rounding precision of 10 and for efficiency reasons does not allow adjustment of this value. We don’t lower this precision during further processing of our generated CSS, such as during minification, but if you chose to do so we recommend maintaining a precision of at least 6 to prevent issues with browser rounding.
-## Autoprefixer
+## PostCSS
-Bootstrap uses [Autoprefixer](https://github.com/postcss/autoprefixer) (included in our build process) to automatically add vendor prefixes to some CSS properties at build time. Doing so saves us time and code by allowing us to write key parts of our CSS a single time while eliminating the need for vendor mixins like those found in v3.
+Bootstrap uses [PostCSS](https://postcss.org/) to process our compiled CSS with several plugins:
-We maintain the list of browsers supported through Autoprefixer in a separate file within our GitHub repository. See [.browserslistrc]([[config:repo]]/blob/v[[config:current_version]]/.browserslistrc) for details.
+- **[Autoprefixer](https://github.com/postcss/autoprefixer)** automatically adds vendor prefixes to CSS properties at build time. This saves us time and code by allowing us to write key parts of our CSS a single time while eliminating the need for vendor mixins. We maintain the list of browsers supported through Autoprefixer in a separate file within our GitHub repository. See [.browserslistrc]([[config:repo]]/blob/v[[config:current_version]]/.browserslistrc) for details.
+
+- **[postcss-prefix-custom-properties](https://github.com/nicolo-ribaudo/postcss-prefix-custom-properties)** adds the `bs-` prefix to all CSS custom properties (variables). This allows us to write clean, unprefixed variable names in our Sass source (e.g., `--border-radius`) that become prefixed in the compiled CSS (e.g., `--bs-border-radius`).
+
+Our PostCSS configuration is located in `build/postcss.config.mjs`.
## Local documentation
- Dropped support for Node Sass, including no longer testing any of our source CSS against it.
- Rearranged several Sass files in the process.
- Removed `add()` and `subtract()` functions. Use `calc()` instead.
+- **CSS variable prefixing now handled by PostCSS.** The `$prefix` Sass variable has been removed. CSS custom properties are now written without a prefix in the Sass source and prefixed automatically via `postcss-prefix-custom-properties` during the build. To customize the prefix, update your PostCSS configuration instead of Sass.
- **Removes all deprecated Sass variables and values:**
- - Removed `$variable-prefix`, use `$prefix` instead.
- Removed `$nested-kbd-font-weight`, no replacement.
- Removed `muted`, `black-50`, and `white-50` from text colors utilities map
- Consolidated carousel dark variables, removing `$carousel-dark-indicator-active-bg`, `$carousel-dark-caption-color`, and `$carousel-dark-control-icon-filter` for their reassigned counterparts.
selector: "attr-includes",
class: "ratio-",
property: aspect-ratio,
- values: var(--#{$prefix}ratio),
+ values: var(--ratio),
),
// Create a CSS variable utility that matches the attribute selector utility
"aspect-ratio": (
- property: --#{$prefix}ratio,
+ property: --ratio,
class: ratio,
values: $aspect-ratios
),
);
```
+Note that the `--ratio` custom property will automatically be prefixed to `--bs-ratio` in the compiled CSS via PostCSS.
+
Which outputs the following:
```css
.anchor-link {
padding: 0 .175rem;
font-weight: 400;
- color: color-mix(in srgb, var(--#{$prefix}link-color), transparent .5);
+ color: color-mix(in srgb, var(--link-color), transparent .5);
text-decoration: none;
opacity: 0;
@include transition(color .15s ease-in-out, opacity .15s ease-in-out);
&:hover,
:hover > &,
:target > & {
- color: var(--#{$prefix}link-color);
+ color: var(--link-color);
text-decoration: none;
opacity: 0;
@include transition(color .15s ease-in-out, opacity .15s ease-in-out);
&:hover,
:hover > &,
:target > & {
- color: var(--#{$prefix}link-color);
+ color: var(--link-color);
text-decoration: none;
opacity: 1;
}
@layer custom {
.bd-callout {
- --#{$prefix}link-color: var(--bd-callout-color);
- --#{$prefix}link-hover-color: var(--bd-callout-color);
- --#{$prefix}code-color: var(--bd-callout-code-color);
+ --link-color: var(--bd-callout-color);
+ --link-hover-color: var(--bd-callout-color);
+ --code-color: var(--bd-callout-code-color);
padding: 1.25rem;
margin-top: 1.25rem;
// .bd-cyan-800 { color: color-contrast($cyan-800); background-color: $cyan-800; }
// .bd-cyan-900 { color: color-contrast($cyan-900); background-color: $cyan-900; }
-// .bd-gray-100 { color: color-contrast(var(--#{$prefix}gray-100)); background-color: var(--#{$prefix}gray-100); }
-// .bd-gray-200 { color: color-contrast(var(--#{$prefix}gray-200)); background-color: var(--#{$prefix}gray-200); }
-// .bd-gray-300 { color: color-contrast(var(--#{$prefix}gray-300)); background-color: var(--#{$prefix}gray-300); }
-// .bd-gray-400 { color: color-contrast(var(--#{$prefix}gray-400)); background-color: var(--#{$prefix}gray-400); }
-// .bd-gray-500 { color: color-contrast(var(--#{$prefix}gray-500)); background-color: var(--#{$prefix}gray-500); }
-// .bd-gray-600 { color: color-contrast(var(--#{$prefix}gray-600)); background-color: var(--#{$prefix}gray-600); }
-// .bd-gray-700 { color: color-contrast(var(--#{$prefix}gray-700)); background-color: var(--#{$prefix}gray-700); }
-// .bd-gray-800 { color: color-contrast(var(--#{$prefix}gray-800)); background-color: var(--#{$prefix}gray-800); }
-// .bd-gray-900 { color: color-contrast(var(--#{$prefix}gray-900)); background-color: var(--#{$prefix}gray-900); }
+// .bd-gray-100 { color: color-contrast(var(--gray-100)); background-color: var(--gray-100); }
+// .bd-gray-200 { color: color-contrast(var(--gray-200)); background-color: var(--gray-200); }
+// .bd-gray-300 { color: color-contrast(var(--gray-300)); background-color: var(--gray-300); }
+// .bd-gray-400 { color: color-contrast(var(--gray-400)); background-color: var(--gray-400); }
+// .bd-gray-500 { color: color-contrast(var(--gray-500)); background-color: var(--gray-500); }
+// .bd-gray-600 { color: color-contrast(var(--gray-600)); background-color: var(--gray-600); }
+// .bd-gray-700 { color: color-contrast(var(--gray-700)); background-color: var(--gray-700); }
+// .bd-gray-800 { color: color-contrast(var(--gray-800)); background-color: var(--gray-800); }
+// .bd-gray-900 { color: color-contrast(var(--gray-900)); background-color: var(--gray-900); }
// .bd-white {
// color: color-contrast($white);
--bd-example-inner-radius: calc(var(--bs-border-radius) - 1px);
margin: 0 ($bd-gutter-x * -.5);
- font-size: var(--#{$prefix}font-size-sm);
+ font-size: var(--font-size-sm);
background-color: var(--bd-pre-bg);
border: solid var(--bs-border-color);
border-width: 1px 0;
position: relative;
display: flow-root;
padding: var(--bd-example-padding);
- font-size: var(--#{$prefix}font-size-base);
+ font-size: var(--font-size-base);
// margin: 0 ($bd-gutter-x * -.5) 1rem;
background-color: var(--bs-bg-body);
@layer custom {
.bd-content {
@media (width >= 1024px) {
- font-size: var(--#{$prefix}font-size-md);
+ font-size: var(--font-size-md);
}
> ul li,
border-inline-start: 0;
@include media-breakpoint-down(lg) {
- box-shadow: var(--#{$prefix}box-shadow-lg);
+ box-shadow: var(--box-shadow-lg);
}
}
// @include rfs(.875rem, --bs-dropdown-font-size);
// @include font-size(.875rem);
// @include border-radius(.5rem);
- box-shadow: var(--#{$prefix}dropdown-box-shadow);
+ box-shadow: var(--dropdown-box-shadow);
li + li {
margin-top: .125rem;
--bd-violet-bg: var(--bd-violet);
--bd-toc-color: light-dark(var(--bd-violet), var(--bs-indigo-300));
--bd-sidebar-link-bg: light-dark(color-mix(in srgb, var(--bd-violet), transparent 90%), color-mix(in srgb, var(--bd-violet), transparent 70%));
- --bd-callout-link: var(--#{$prefix}blue-600);
+ --bd-callout-link: var(--blue-600);
--bd-callout-code-color: light-dark(var(--bs-pink-600), var(--bs-pink-300));
--bd-pre-bg: var(--bs-bg-body);
--bd-swatch-shadow: inset 0 0 0 1px light-dark(rgb(0 0 0 / .1), rgb(255 255 255 / .1));
// @include color-mode(dark, true) {
// --bd-violet: #{mix($bd-violet, $white, 75%)};
// --bd-violet-bg: #{$bd-violet};
- // --bd-toc-color: var(--#{$prefix}emphasis-color);
+ // --bd-toc-color: var(--emphasis-color);
// --bd-sidebar-link-bg: rgba(#{to-rgb(mix($bd-violet, $black, 75%))}, .5);
// --bd-callout-link: #{to-rgb($blue-300)};
// --bd-callout-code-color: #{$pink-300};
- // --bd-pre-bg: #{color.adjust(var(--#{$prefix}gray-900), $lightness: -2.5%)}; // stylelint-disable-line scss/at-function-named-arguments
+ // --bd-pre-bg: #{color.adjust(var(--gray-900), $lightness: -2.5%)}; // stylelint-disable-line scss/at-function-named-arguments
// }
}
projects / thirdparty / bootstrap.git / commitdiff
