diff options
| author | Mark Otto <markd.otto@gmail.com> | 2022-03-13 20:13:09 +0300 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2022-03-13 20:13:09 +0300 |
| commit | acf6ea74a74328bcaa9f1c354f27e602cfbb8968 (patch) | |
| tree | 61aad18d82ea3eeab848a8215826d55106f519d6 | |
| parent | 7c966f584889c6dfb0f1a70dd1757b2d237a68a0 (diff) | |
Add additional root variables, rename `$variable-prefix` to `$prefix` (#35981)
* Add additional root variables, rename $variable-prefix to $prefix
- Adds new root CSS variables for border-radius, border-width, border-color, and border-style
- Adds new root CSS variables for heading-color, link-colors, code color, and highlight color
- Replaces most instances of Sass variables (for border-radius, border-color, border-style, and border-width) for CSS variables inside _variables.scss
- Updates $mark-padding to be an even pixel number
- Renames $variable-prefix to $prefix throughout
* Bundlewatch
29 files changed, 581 insertions, 566 deletions
diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json index c408f65811..eff437cee5 100644 --- a/.bundlewatch.config.json +++ b/.bundlewatch.config.json @@ -6,11 +6,11 @@ }, { "path": "./dist/css/bootstrap-grid.min.css", - "maxSize": "6.5 kB" + "maxSize": "6.55 kB" }, { "path": "./dist/css/bootstrap-reboot.css", - "maxSize": "2.5 kB" + "maxSize": "2.55 kB" }, { "path": "./dist/css/bootstrap-reboot.min.css", @@ -26,11 +26,11 @@ }, { "path": "./dist/css/bootstrap.css", - "maxSize": "26.4 kB" + "maxSize": "26.6 kB" }, { "path": "./dist/css/bootstrap.min.css", - "maxSize": "24.5 kB" + "maxSize": "24.65 kB" }, { "path": "./dist/js/bootstrap.bundle.js", diff --git a/scss/_alert.scss b/scss/_alert.scss index 316f3c5ad0..0e7dbe60d1 100644 --- a/scss/_alert.scss +++ b/scss/_alert.scss @@ -4,23 +4,23 @@ .alert { // scss-docs-start alert-css-vars - --#{$variable-prefix}alert-bg: transparent; - --#{$variable-prefix}alert-padding-x: #{$alert-padding-x}; - --#{$variable-prefix}alert-padding-y: #{$alert-padding-y}; - --#{$variable-prefix}alert-margin-bottom: #{$alert-margin-bottom}; - --#{$variable-prefix}alert-color: inherit; - --#{$variable-prefix}alert-border-color: transparent; - --#{$variable-prefix}alert-border: #{$alert-border-width} solid var(--#{$variable-prefix}alert-border-color); - --#{$variable-prefix}alert-border-radius: #{$alert-border-radius}; + --#{$prefix}alert-bg: transparent; + --#{$prefix}alert-padding-x: #{$alert-padding-x}; + --#{$prefix}alert-padding-y: #{$alert-padding-y}; + --#{$prefix}alert-margin-bottom: #{$alert-margin-bottom}; + --#{$prefix}alert-color: inherit; + --#{$prefix}alert-border-color: transparent; + --#{$prefix}alert-border: #{$alert-border-width} solid var(--#{$prefix}alert-border-color); + --#{$prefix}alert-border-radius: #{$alert-border-radius}; // scss-docs-end alert-css-vars position: relative; - padding: var(--#{$variable-prefix}alert-padding-y) var(--#{$variable-prefix}alert-padding-x); - margin-bottom: var(--#{$variable-prefix}alert-margin-bottom); - color: var(--#{$variable-prefix}alert-color); - background-color: var(--#{$variable-prefix}alert-bg); - border: var(--#{$variable-prefix}alert-border); - border-radius: var(--#{$variable-prefix}alert-border-radius, 0); // stylelint-disable-line property-disallowed-list + padding: var(--#{$prefix}alert-padding-y) var(--#{$prefix}alert-padding-x); + margin-bottom: var(--#{$prefix}alert-margin-bottom); + color: var(--#{$prefix}alert-color); + background-color: var(--#{$prefix}alert-bg); + border: var(--#{$prefix}alert-border); + border-radius: var(--#{$prefix}alert-border-radius, 0); // stylelint-disable-line property-disallowed-list } // Headings for larger alerts diff --git a/scss/_badge.scss b/scss/_badge.scss index 3e9fef14c7..33cfd99862 100644 --- a/scss/_badge.scss +++ b/scss/_badge.scss @@ -7,24 +7,24 @@ .badge { // scss-docs-start badge-css-vars - --#{$variable-prefix}badge-padding-x: #{$badge-padding-x}; - --#{$variable-prefix}badge-padding-y: #{$badge-padding-y}; - @include rfs($badge-font-size, --#{$variable-prefix}badge-font-size); - --#{$variable-prefix}badge-font-weight: #{$badge-font-weight}; - --#{$variable-prefix}badge-color: #{$badge-color}; - --#{$variable-prefix}badge-border-radius: #{$badge-border-radius}; + --#{$prefix}badge-padding-x: #{$badge-padding-x}; + --#{$prefix}badge-padding-y: #{$badge-padding-y}; + @include rfs($badge-font-size, --#{$prefix}badge-font-size); + --#{$prefix}badge-font-weight: #{$badge-font-weight}; + --#{$prefix}badge-color: #{$badge-color}; + --#{$prefix}badge-border-radius: #{$badge-border-radius}; // scss-docs-end badge-css-vars display: inline-block; - padding: var(--#{$variable-prefix}badge-padding-y) var(--#{$variable-prefix}badge-padding-x); - font-size: var(--#{$variable-prefix}badge-font-size); - font-weight: var(--#{$variable-prefix}badge-font-weight); + padding: var(--#{$prefix}badge-padding-y) var(--#{$prefix}badge-padding-x); + font-size: var(--#{$prefix}badge-font-size); + font-weight: var(--#{$prefix}badge-font-weight); line-height: 1; - color: var(--#{$variable-prefix}badge-color); + color: var(--#{$prefix}badge-color); text-align: center; white-space: nowrap; vertical-align: baseline; - border-radius: var(--#{$variable-prefix}badge-border-radius, 0); // stylelint-disable-line property-disallowed-list + border-radius: var(--#{$prefix}badge-border-radius, 0); // stylelint-disable-line property-disallowed-list @include gradient-bg(); // Empty badges collapse automatically diff --git a/scss/_breadcrumb.scss b/scss/_breadcrumb.scss index 86890dc61a..7168fdb565 100644 --- a/scss/_breadcrumb.scss +++ b/scss/_breadcrumb.scss @@ -2,42 +2,42 @@ .breadcrumb { // scss-docs-start breadcrumb-css-vars - --#{$variable-prefix}breadcrumb-padding-x: #{$breadcrumb-padding-x}; - --#{$variable-prefix}breadcrumb-padding-y: #{$breadcrumb-padding-y}; - --#{$variable-prefix}breadcrumb-margin-bottom: #{$breadcrumb-margin-bottom}; - @include rfs($breadcrumb-font-size, --#{$variable-prefix}breadcrumb-font-size); - --#{$variable-prefix}breadcrumb-bg: #{$breadcrumb-bg}; - --#{$variable-prefix}breadcrumb-border-radius: #{$breadcrumb-border-radius}; - --#{$variable-prefix}breadcrumb-divider-color: #{$breadcrumb-divider-color}; - --#{$variable-prefix}breadcrumb-item-padding-x: #{$breadcrumb-item-padding-x}; - --#{$variable-prefix}breadcrumb-item-active-color: #{$breadcrumb-active-color}; + --#{$prefix}breadcrumb-padding-x: #{$breadcrumb-padding-x}; + --#{$prefix}breadcrumb-padding-y: #{$breadcrumb-padding-y}; + --#{$prefix}breadcrumb-margin-bottom: #{$breadcrumb-margin-bottom}; + @include rfs($breadcrumb-font-size, --#{$prefix}breadcrumb-font-size); + --#{$prefix}breadcrumb-bg: #{$breadcrumb-bg}; + --#{$prefix}breadcrumb-border-radius: #{$breadcrumb-border-radius}; + --#{$prefix}breadcrumb-divider-color: #{$breadcrumb-divider-color}; + --#{$prefix}breadcrumb-item-padding-x: #{$breadcrumb-item-padding-x}; + --#{$prefix}breadcrumb-item-active-color: #{$breadcrumb-active-color}; // scss-docs-end breadcrumb-css-vars display: flex; flex-wrap: wrap; - padding: var(--#{$variable-prefix}breadcrumb-padding-y) var(--#{$variable-prefix}breadcrumb-padding-x); - margin-bottom: var(--#{$variable-prefix}breadcrumb-margin-bottom); + padding: var(--#{$prefix}breadcrumb-padding-y) var(--#{$prefix}breadcrumb-padding-x); + margin-bottom: var(--#{$prefix}breadcrumb-margin-bottom); @include font-size($breadcrumb-font-size); - font-size: var(--#{$variable-prefix}breadcrumb-font-size); + font-size: var(--#{$prefix}breadcrumb-font-size); list-style: none; - background-color: var(--#{$variable-prefix}breadcrumb-bg); - @include border-radius(var(--#{$variable-prefix}breadcrumb-border-radius)); + background-color: var(--#{$prefix}breadcrumb-bg); + @include border-radius(var(--#{$prefix}breadcrumb-border-radius)); } .breadcrumb-item { // The separator between breadcrumbs (by default, a forward-slash: "/") + .breadcrumb-item { - padding-left: var(--#{$variable-prefix}breadcrumb-item-padding-x); + padding-left: var(--#{$prefix}breadcrumb-item-padding-x); &::before { float: left; // Suppress inline spacings and underlining of the separator - padding-right: var(--#{$variable-prefix}breadcrumb-item-padding-x); - color: var(--#{$variable-prefix}breadcrumb-divider-color); - content: var(--#{$variable-prefix}breadcrumb-divider, escape-svg($breadcrumb-divider)) #{"/* rtl:"} var(--#{$variable-prefix}breadcrumb-divider, escape-svg($breadcrumb-divider-flipped)) #{"*/"}; + padding-right: $breadcrumb-item-padding-x; + color: $breadcrumb-divider-color; + content: var(--#{$prefix}breadcrumb-divider, escape-svg($breadcrumb-divider)) #{"/* rtl:"} var(--#{$prefix}breadcrumb-divider, escape-svg($breadcrumb-divider-flipped)) #{"*/"}; } } &.active { - color: var(--#{$variable-prefix}breadcrumb-item-active-color); + color: var(--#{$prefix}breadcrumb-item-active-color); } } diff --git a/scss/_buttons.scss b/scss/_buttons.scss index 56c5b9f876..2caa36d5b3 100644 --- a/scss/_buttons.scss +++ b/scss/_buttons.scss @@ -6,59 +6,59 @@ .btn { // scss-docs-start btn-css-vars - --#{$variable-prefix}btn-padding-x: #{$btn-padding-x}; - --#{$variable-prefix}btn-padding-y: #{$btn-padding-y}; - --#{$variable-prefix}btn-font-family: #{$btn-font-family}; - @include rfs($btn-font-size, --#{$variable-prefix}btn-font-size); - --#{$variable-prefix}btn-font-weight: #{$btn-font-weight}; - --#{$variable-prefix}btn-line-height: #{$btn-line-height}; - --#{$variable-prefix}btn-color: #{$body-color}; - --#{$variable-prefix}btn-bg: transparent; - --#{$variable-prefix}btn-border-width: #{$btn-border-width}; - --#{$variable-prefix}btn-border-color: transparent; - --#{$variable-prefix}btn-border-radius: #{$btn-border-radius}; - --#{$variable-prefix}btn-box-shadow: #{$btn-box-shadow}; - --#{$variable-prefix}btn-disabled-opacity: #{$btn-disabled-opacity}; - --#{$variable-prefix}btn-focus-box-shadow: 0 0 0 #{$btn-focus-width} rgba(var(--#{$variable-prefix}btn-focus-shadow-rgb), .5); + --#{$prefix}btn-padding-x: #{$btn-padding-x}; + --#{$prefix}btn-padding-y: #{$btn-padding-y}; + --#{$prefix}btn-font-family: #{$btn-font-family}; + @include rfs($btn-font-size, --#{$prefix}btn-font-size); + --#{$prefix}btn-font-weight: #{$btn-font-weight}; + --#{$prefix}btn-line-height: #{$btn-line-height}; + --#{$prefix}btn-color: #{$body-color}; + --#{$prefix}btn-bg: transparent; + --#{$prefix}btn-border-width: #{$btn-border-width}; + --#{$prefix}btn-border-color: transparent; + --#{$prefix}btn-border-radius: #{$btn-border-radius}; + --#{$prefix}btn-box-shadow: #{$btn-box-shadow}; + --#{$prefix}btn-disabled-opacity: #{$btn-disabled-opacity}; + --#{$prefix}btn-focus-box-shadow: 0 0 0 #{$btn-focus-width} rgba(var(--#{$prefix}btn-focus-shadow-rgb), .5); // scss-docs-end btn-css-vars display: inline-block; - padding: var(--#{$variable-prefix}btn-padding-y) var(--#{$variable-prefix}btn-padding-x); - font-family: var(--#{$variable-prefix}btn-font-family); - font-size: var(--#{$variable-prefix}btn-font-size); - font-weight: var(--#{$variable-prefix}btn-font-weight); - line-height: var(--#{$variable-prefix}btn-line-height); - color: var(--#{$variable-prefix}btn-color); + padding: var(--#{$prefix}btn-padding-y) var(--#{$prefix}btn-padding-x); + font-family: var(--#{$prefix}btn-font-family); + font-size: var(--#{$prefix}btn-font-size); + font-weight: var(--#{$prefix}btn-font-weight); + line-height: var(--#{$prefix}btn-line-height); + color: var(--#{$prefix}btn-color); text-align: center; text-decoration: if($link-decoration == none, null, none); white-space: $btn-white-space; vertical-align: middle; cursor: if($enable-button-pointers, pointer, null); user-select: none; - border: var(--#{$variable-prefix}btn-border-width) solid var(--#{$variable-prefix}btn-border-color); - @include border-radius(var(--#{$variable-prefix}btn-border-radius)); - @include gradient-bg(var(--#{$variable-prefix}btn-bg)); - @include box-shadow(var(--#{$variable-prefix}btn-box-shadow)); + border: var(--#{$prefix}btn-border-width) solid var(--#{$prefix}btn-border-color); + @include border-radius(var(--#{$prefix}btn-border-radius)); + @include gradient-bg(var(--#{$prefix}btn-bg)); + @include box-shadow(var(--#{$prefix}btn-box-shadow)); @include transition($btn-transition); &:hover { - color: var(--#{$variable-prefix}btn-hover-color); + color: var(--#{$prefix}btn-hover-color); text-decoration: if($link-hover-decoration == underline, none, null); - background-color: var(--#{$variable-prefix}btn-hover-bg); - border-color: var(--#{$variable-prefix}btn-hover-border-color); + background-color: var(--#{$prefix}btn-hover-bg); + border-color: var(--#{$prefix}btn-hover-border-color); } .btn-check:focus + &, &:focus { - color: var(--#{$variable-prefix}btn-hover-color); - @include gradient-bg(var(--#{$variable-prefix}btn-hover-bg)); - border-color: var(--#{$variable-prefix}btn-hover-border-color); + color: var(--#{$prefix}btn-hover-color); + @include gradient-bg(var(--#{$prefix}btn-hover-bg)); + border-color: var(--#{$prefix}btn-hover-border-color); outline: 0; // Avoid using mixin so we can pass custom focus shadow properly @if $enable-shadows { - box-shadow: var(--#{$variable-prefix}btn-box-shadow), var(--#{$variable-prefix}btn-focus-box-shadow); + box-shadow: var(--#{$prefix}btn-box-shadow), var(--#{$prefix}btn-focus-box-shadow); } @else { - box-shadow: var(--#{$variable-prefix}btn-focus-box-shadow); + box-shadow: var(--#{$prefix}btn-focus-box-shadow); } } @@ -67,19 +67,19 @@ &:active, &.active, &.show { - color: var(--#{$variable-prefix}btn-active-color); - background-color: var(--#{$variable-prefix}btn-active-bg); + color: var(--#{$prefix}btn-active-color); + background-color: var(--#{$prefix}btn-active-bg); // Remove CSS gradients if they're enabled background-image: if($enable-gradients, none, null); - border-color: var(--#{$variable-prefix}btn-active-border-color); - @include box-shadow(var(--#{$variable-prefix}btn-active-shadow)); + border-color: var(--#{$prefix}btn-active-border-color); + @include box-shadow(var(--#{$prefix}btn-active-shadow)); &:focus { // Avoid using mixin so we can pass custom focus shadow properly @if $enable-shadows { - box-shadow: var(--#{$variable-prefix}btn-active-shadow), var(--#{$variable-prefix}btn-focus-box-shadow); + box-shadow: var(--#{$prefix}btn-active-shadow), var(--#{$prefix}btn-focus-box-shadow); } @else { - box-shadow: var(--#{$variable-prefix}btn-focus-box-shadow); + box-shadow: var(--#{$prefix}btn-focus-box-shadow); } } } @@ -87,12 +87,12 @@ &:disabled, &.disabled, fieldset:disabled & { - color: var(--#{$variable-prefix}btn-disabled-color); + color: var(--#{$prefix}btn-disabled-color); pointer-events: none; - background-color: var(--#{$variable-prefix}btn-disabled-bg); + background-color: var(--#{$prefix}btn-disabled-bg); background-image: if($enable-gradients, none, null); - border-color: var(--#{$variable-prefix}btn-disabled-border-color); - opacity: var(--#{$variable-prefix}btn-disabled-opacity); + border-color: var(--#{$prefix}btn-disabled-border-color); + opacity: var(--#{$prefix}btn-disabled-opacity); @include box-shadow(none); } } @@ -123,16 +123,16 @@ // Make a button look and behave like a link .btn-link { - --#{$variable-prefix}btn-font-weight: #{$font-weight-normal}; - --#{$variable-prefix}btn-color: #{$btn-link-color}; - --#{$variable-prefix}btn-bg: transparent; - --#{$variable-prefix}btn-border-color: transparent; - --#{$variable-prefix}btn-hover-color: #{$btn-link-hover-color}; - --#{$variable-prefix}btn-hover-border-color: transparent; - --#{$variable-prefix}btn-active-border-color: transparent; - --#{$variable-prefix}btn-disabled-color: #{$btn-link-disabled-color}; - --#{$variable-prefix}btn-disabled-border-color: transparent; - --#{$variable-prefix}btn-box-shadow: none; + --#{$prefix}btn-font-weight: #{$font-weight-normal}; + --#{$prefix}btn-color: #{$btn-link-color}; + --#{$prefix}btn-bg: transparent; + --#{$prefix}btn-border-color: transparent; + --#{$prefix}btn-hover-color: #{$btn-link-hover-color}; + --#{$prefix}btn-hover-border-color: transparent; + --#{$prefix}btn-active-border-color: transparent; + --#{$prefix}btn-disabled-color: #{$btn-link-disabled-color}; + --#{$prefix}btn-disabled-border-color: transparent; + --#{$prefix}btn-box-shadow: none; text-decoration: $link-decoration; diff --git a/scss/_dropdown.scss b/scss/_dropdown.scss index cbbe78cb34..1b25a22001 100644 --- a/scss/_dropdown.scss +++ b/scss/_dropdown.scss @@ -18,53 +18,53 @@ // The dropdown menu .dropdown-menu { // scss-docs-start dropdown-css-vars - --#{$variable-prefix}dropdown-min-width: #{$dropdown-min-width}; - --#{$variable-prefix}dropdown-padding-x: #{$dropdown-padding-x}; - --#{$variable-prefix}dropdown-padding-y: #{$dropdown-padding-y}; - --#{$variable-prefix}dropdown-spacer: #{$dropdown-spacer}; - @include rfs($dropdown-font-size, --#{$variable-prefix}dropdown-font-size); - --#{$variable-prefix}dropdown-color: #{$dropdown-color}; // stylelint-disable-line custom-property-empty-line-before - --#{$variable-prefix}dropdown-bg: #{$dropdown-bg}; - --#{$variable-prefix}dropdown-border-color: #{$dropdown-border-color}; - --#{$variable-prefix}dropdown-border-radius: #{$dropdown-border-radius}; - --#{$variable-prefix}dropdown-border-width: #{$dropdown-border-width}; - --#{$variable-prefix}dropdown-inner-border-radius: #{$dropdown-inner-border-radius}; - --#{$variable-prefix}dropdown-divider-bg: #{$dropdown-divider-bg}; - --#{$variable-prefix}dropdown-divider-margin-y: #{$dropdown-divider-margin-y}; - --#{$variable-prefix}dropdown-box-shadow: #{$dropdown-box-shadow}; - --#{$variable-prefix}dropdown-link-color: #{$dropdown-link-color}; - --#{$variable-prefix}dropdown-link-hover-color: #{$dropdown-link-hover-color}; - --#{$variable-prefix}dropdown-link-hover-bg: #{$dropdown-link-hover-bg}; - --#{$variable-prefix}dropdown-link-active-color: #{$dropdown-link-active-color}; - --#{$variable-prefix}dropdown-link-active-bg: #{$dropdown-link-active-bg}; - --#{$variable-prefix}dropdown-link-disabled-color: #{$dropdown-link-disabled-color}; - --#{$variable-prefix}dropdown-item-padding-x: #{$dropdown-item-padding-x}; - --#{$variable-prefix}dropdown-item-padding-y: #{$dropdown-item-padding-y}; - --#{$variable-prefix}dropdown-header-color: #{$dropdown-header-color}; - --#{$variable-prefix}dropdown-header-padding-x: #{$dropdown-header-padding-x}; - --#{$variable-prefix}dropdown-header-padding-y: #{$dropdown-header-padding-y}; + --#{$prefix}dropdown-min-width: #{$dropdown-min-width}; + --#{$prefix}dropdown-padding-x: #{$dropdown-padding-x}; + --#{$prefix}dropdown-padding-y: #{$dropdown-padding-y}; + --#{$prefix}dropdown-spacer: #{$dropdown-spacer}; + @include rfs($dropdown-font-size, --#{$prefix}dropdown-font-size); + --#{$prefix}dropdown-color: #{$dropdown-color}; // stylelint-disable-line custom-property-empty-line-before + --#{$prefix}dropdown-bg: #{$dropdown-bg}; + --#{$prefix}dropdown-border-color: #{$dropdown-border-color}; + --#{$prefix}dropdown-border-radius: #{$dropdown-border-radius}; + --#{$prefix}dropdown-border-width: #{$dropdown-border-width}; + --#{$prefix}dropdown-inner-border-radius: #{$dropdown-inner-border-radius}; + --#{$prefix}dropdown-divider-bg: #{$dropdown-divider-bg}; + --#{$prefix}dropdown-divider-margin-y: #{$dropdown-divider-margin-y}; + --#{$prefix}dropdown-box-shadow: #{$dropdown-box-shadow}; + --#{$prefix}dropdown-link-color: #{$dropdown-link-color}; + --#{$prefix}dropdown-link-hover-color: #{$dropdown-link-hover-color}; + --#{$prefix}dropdown-link-hover-bg: #{$dropdown-link-hover-bg}; + --#{$prefix}dropdown-link-active-color: #{$dropdown-link-active-color}; + --#{$prefix}dropdown-link-active-bg: #{$dropdown-link-active-bg}; + --#{$prefix}dropdown-link-disabled-color: #{$dropdown-link-disabled-color}; + --#{$prefix}dropdown-item-padding-x: #{$dropdown-item-padding-x}; + --#{$prefix}dropdown-item-padding-y: #{$dropdown-item-padding-y}; + --#{$prefix}dropdown-header-color: #{$dropdown-header-color}; + --#{$prefix}dropdown-header-padding-x: #{$dropdown-header-padding-x}; + --#{$prefix}dropdown-header-padding-y: #{$dropdown-header-padding-y}; // scss-docs-end dropdown-css-vars position: absolute; z-index: $zindex-dropdown; display: none; // none by default, but block on "open" of the menu - min-width: var(--#{$variable-prefix}dropdown-min-width); - padding: var(--#{$variable-prefix}dropdown-padding-y) var(--#{$variable-prefix}dropdown-padding-x); + min-width: var(--#{$prefix}dropdown-min-width); + padding: var(--#{$prefix}dropdown-padding-y) var(--#{$prefix}dropdown-padding-x); margin: 0; // Override default margin of ul - @include font-size(var(--#{$variable-prefix}dropdown-font-size)); - color: var(--#{$variable-prefix}dropdown-color); + @include font-size(var(--#{$prefix}dropdown-font-size)); + color: var(--#{$prefix}dropdown-color); text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer) list-style: none; - background-color: var(--#{$variable-prefix}dropdown-bg); + background-color: var(--#{$prefix}dropdown-bg); background-clip: padding-box; - border: var(--#{$variable-prefix}dropdown-border-width) solid var(--#{$variable-prefix}dropdown-border-color); - @include border-radius(var(--#{$variable-prefix}dropdown-border-radius)); - @include box-shadow(var(--#{$variable-prefix}dropdown-box-shadow)); + border: var(--#{$prefix}dropdown-border-width) solid var(--#{$prefix}dropdown-border-color); + @include border-radius(var(--#{$prefix}dropdown-border-radius)); + @include box-shadow(var(--#{$prefix}dropdown-box-shadow)); &[data-bs-popper] { top: 100%; left: 0; - margin-top: var(--#{$variable-prefix}dropdown-spacer); + margin-top: var(--#{$prefix}dropdown-spacer); } } @@ -104,7 +104,7 @@ top: auto; bottom: 100%; margin-top: 0; - margin-bottom: var(--#{$variable-prefix}dropdown-spacer); + margin-bottom: var(--#{$prefix}dropdown-spacer); } .dropdown-toggle { @@ -118,7 +118,7 @@ right: auto; left: 100%; margin-top: 0; - margin-left: var(--#{$variable-prefix}dropdown-spacer); + margin-left: var(--#{$prefix}dropdown-spacer); } .dropdown-toggle { @@ -135,7 +135,7 @@ right: 100%; left: auto; margin-top: 0; - margin-right: var(--#{$variable-prefix}dropdown-spacer); + margin-right: var(--#{$prefix}dropdown-spacer); } .dropdown-toggle { @@ -150,9 +150,9 @@ // Dividers (basically an `<hr>`) within the dropdown .dropdown-divider { height: 0; - margin: var(--#{$variable-prefix}dropdown-divider-margin-y) 0; + margin: var(--#{$prefix}dropdown-divider-margin-y) 0; overflow: hidden; - border-top: 1px solid var(--#{$variable-prefix}dropdown-divider-bg); + border-top: 1px solid var(--#{$prefix}dropdown-divider-bg); opacity: 1; // Revisit in v6 to de-dupe styles that conflict with <hr> element } @@ -162,10 +162,10 @@ .dropdown-item { display: block; width: 100%; // For `<button>`s - padding: var(--#{$variable-prefix}dropdown-item-padding-y) var(--#{$variable-prefix}dropdown-item-padding-x); + padding: var(--#{$prefix}dropdown-item-padding-y) var(--#{$prefix}dropdown-item-padding-x); clear: both; font-weight: $font-weight-normal; - color: var(--#{$variable-prefix}dropdown-link-color); + color: var(--#{$prefix}dropdown-link-color); text-align: inherit; // For `<button>`s text-decoration: if($link-decoration == none, null, none); white-space: nowrap; // prevent links from randomly breaking onto new lines @@ -176,31 +176,31 @@ // See https://github.com/twbs/bootstrap/pull/27703 @if $dropdown-padding-y == 0 { &:first-child { - @include border-top-radius(var(--#{$variable-prefix}dropdown-inner-border-radius)); + @include border-top-radius(var(--#{$prefix}dropdown-inner-border-radius)); } &:last-child { - @include border-bottom-radius(var(--#{$variable-prefix}dropdown-inner-border-radius)); + @include border-bottom-radius(var(--#{$prefix}dropdown-inner-border-radius)); } } &:hover, &:focus { - color: var(--#{$variable-prefix}dropdown-link-hover-color); + color: var(--#{$prefix}dropdown-link-hover-color); text-decoration: if($link-hover-decoration == underline, none, null); - @include gradient-bg(var(--#{$variable-prefix}dropdown-link-hover-bg)); + @include gradient-bg(var(--#{$prefix}dropdown-link-hover-bg)); } &.active, &:active { - color: var(--#{$variable-prefix}dropdown-link-active-color); + color: var(--#{$prefix}dropdown-link-active-color); text-decoration: none; - @include gradient-bg(var(--#{$variable-prefix}dropdown-link-active-bg)); + @include gradient-bg(var(--#{$prefix}dropdown-link-active-bg)); } &.disabled, &:disabled { - color: var(--#{$variable-prefix}dropdown-link-disabled-color); + color: var(--#{$prefix}dropdown-link-disabled-color); pointer-events: none; background-color: transparent; // Remove CSS gradients if they're enabled @@ -215,34 +215,34 @@ // Dropdown section headers .dropdown-header { display: block; - padding: var(--#{$variable-prefix}dropdown-header-padding-y) var(--#{$variable-prefix}dropdown-header-padding-x); + padding: var(--#{$prefix}dropdown-header-padding-y) var(--#{$prefix}dropdown-header-padding-x); margin-bottom: 0; // for use with heading elements @include font-size($font-size-sm); - color: var(--#{$variable-prefix}dropdown-header-color); + color: var(--#{$prefix}dropdown-header-color); white-space: nowrap; // as with > li > a } // Dropdown text .dropdown-item-text { display: block; - padding: var(--#{$variable-prefix}dropdown-item-padding); - color: var(--#{$variable-prefix}dropdown-link-color); + padding: var(--#{$prefix}dropdown-item-padding); + color: var(--#{$prefix}dropdown-link-color); } // Dark dropdowns .dropdown-menu-dark { // scss-docs-start dropdown-dark-css-vars - --#{$variable-prefix}dropdown-color: #{$dropdown-dark-color}; - --#{$variable-prefix}dropdown-bg: #{$dropdown-dark-bg}; - --#{$variable-prefix}dropdown-border-color: #{$dropdown-dark-border-color}; - --#{$variable-prefix}dropdown-box-shadow: #{$dropdown-dark-box-shadow}; - --#{$variable-prefix}dropdown-link-color: #{$dropdown-dark-link-color}; - --#{$variable-prefix}dropdown-link-hover-color: #{$dropdown-dark-link-hover-color}; - --#{$variable-prefix}dropdown-divider-bg: #{$dropdown-dark-divider-bg}; - --#{$variable-prefix}dropdown-link-hover-bg: #{$dropdown-dark-link-hover-bg}; - --#{$variable-prefix}dropdown-link-active-color: #{$dropdown-dark-link-active-color}; - --#{$variable-prefix}dropdown-link-active-bg: #{$dropdown-dark-link-active-bg}; - --#{$variable-prefix}dropdown-link-disabled-color: #{$dropdown-dark-link-disabled-color}; - --#{$variable-prefix}dropdown-header-color: #{$dropdown-dark-header-color}; + --#{$prefix}dropdown-color: #{$dropdown-dark-color}; + --#{$prefix}dropdown-bg: #{$dropdown-dark-bg}; + --#{$prefix}dropdown-border-color: #{$dropdown-dark-border-color}; + --#{$prefix}dropdown-box-shadow: #{$dropdown-dark-box-shadow}; + --#{$prefix}dropdown-link-color: #{$dropdown-dark-link-color}; + --#{$prefix}dropdown-link-hover-color: #{$dropdown-dark-link-hover-color}; + --#{$prefix}dropdown-divider-bg: #{$dropdown-dark-divider-bg}; + --#{$prefix}dropdown-link-hover-bg: #{$dropdown-dark-link-hover-bg}; + --#{$prefix}dropdown-link-active-color: #{$dropdown-dark-link-active-color}; + --#{$prefix}dropdown-link-active-bg: #{$dropdown-dark-link-active-bg}; + --#{$prefix}dropdown-link-disabled-color: #{$dropdown-dark-link-disabled-color}; + --#{$prefix}dropdown-header-color: #{$dropdown-dark-header-color}; // scss-docs-end dropdown-dark-css-vars } diff --git a/scss/_functions.scss b/scss/_functions.scss index 30539b3930..883375bf81 100644 --- a/scss/_functions.scss +++ b/scss/_functions.scss @@ -40,11 +40,11 @@ // stylelint-disable scss/dollar-variable-pattern @function rgba-css-var($identifier, $target) { @if $identifier == "body" and $target == "bg" { - @return rgba(var(--#{$variable-prefix}#{$identifier}-bg-rgb), var(--#{$variable-prefix}#{$target}-opacity)); + @return rgba(var(--#{$prefix}#{$identifier}-bg-rgb), var(--#{$prefix}#{$target}-opacity)); } @if $identifier == "body" and $target == "text" { - @return rgba(var(--#{$variable-prefix}#{$identifier}-color-rgb), var(--#{$variable-prefix}#{$target}-opacity)); + @return rgba(var(--#{$prefix}#{$identifier}-color-rgb), var(--#{$prefix}#{$target}-opacity)); } @else { - @return rgba(var(--#{$variable-prefix}#{$identifier}-rgb), var(--#{$variable-prefix}#{$target}-opacity)); + @return rgba(var(--#{$prefix}#{$identifier}-rgb), var(--#{$prefix}#{$target}-opacity)); } } @@ -68,7 +68,7 @@ @function varify($list) { $result: null; @each $entry in $list { - $result: append($result, var(--#{$variable-prefix}#{$entry}), space); + $result: append($result, var(--#{$prefix}#{$entry}), space); } @return $result; } diff --git a/scss/_grid.scss b/scss/_grid.scss index 27fd558472..0e0ba210ab 100644 --- a/scss/_grid.scss +++ b/scss/_grid.scss @@ -15,9 +15,9 @@ @if $enable-cssgrid { .grid { display: grid; - grid-template-rows: repeat(var(--#{$variable-prefix}rows, 1), 1fr); - grid-template-columns: repeat(var(--#{$variable-prefix}columns, #{$grid-columns}), 1fr); - gap: var(--#{$variable-prefix}gap, #{$grid-gutter-width}); + grid-template-rows: repeat(var(--#{$prefix}rows, 1), 1fr); + grid-template-columns: repeat(var(--#{$prefix}columns, #{$grid-columns}), 1fr); + gap: var(--#{$prefix}gap, #{$grid-gutter-width}); @include make-cssgrid(); } diff --git a/scss/_navbar.scss b/scss/_navbar.scss index 71711bf566..8fbdab71d6 100644 --- a/scss/_navbar.scss +++ b/scss/_navbar.scss @@ -5,26 +5,26 @@ .navbar { // scss-docs-start navbar-css-vars - --#{$variable-prefix}navbar-padding-x: #{if($navbar-padding-x == null, 0, $navbar-padding-x)}; - --#{$variable-prefix}navbar-padding-y: #{$navbar-padding-y}; - --#{$variable-prefix}navbar-color: #{$navbar-light-color}; - --#{$variable-prefix}navbar-hover-color: #{$navbar-light-hover-color}; - --#{$variable-prefix}navbar-disabled-color: #{$navbar-light-disabled-color}; - --#{$variable-prefix}navbar-active-color: #{$navbar-light-active-color}; - --#{$variable-prefix}navbar-brand-padding-y: #{$navbar-brand-padding-y}; - --#{$variable-prefix}navbar-brand-margin-end: #{$navbar-brand-margin-end}; - --#{$variable-prefix}navbar-brand-font-size: #{$navbar-brand-font-size}; - --#{$variable-prefix}navbar-brand-color: #{$navbar-light-brand-color}; - --#{$variable-prefix}navbar-brand-hover-color: #{$navbar-light-brand-hover-color}; - --#{$variable-prefix}navbar-nav-link-padding-x: #{$navbar-nav-link-padding-x}; - --#{$variable-prefix}navbar-toggler-padding-y: #{$navbar-toggler-padding-y}; - --#{$variable-prefix}navbar-toggler-padding-x: #{$navbar-toggler-padding-x}; - --#{$variable-prefix}navbar-toggler-font-size: #{$navbar-toggler-font-size}; - --#{$variable-prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-light-toggler-icon-bg)}; - --#{$variable-prefix}navbar-toggler-border-color: #{$navbar-light-toggler-border-color}; - --#{$variable-prefix}navbar-toggler-border-radius: #{$navbar-toggler-border-radius}; - --#{$variable-prefix}navbar-toggler-focus-width: #{$navbar-toggler-focus-width}; - --#{$variable-prefix}navbar-toggler-transition: #{$navbar-toggler-transition}; + --#{$prefix}navbar-padding-x: #{if($navbar-padding-x == null, 0, $navbar-padding-x)}; + --#{$prefix}navbar-padding-y: #{$navbar-padding-y}; + --#{$prefix}navbar-color: #{$navbar-light-color}; + --#{$prefix}navbar-hover-color: #{$navbar-light-hover-color}; + --#{$prefix}navbar-disabled-color: #{$navbar-light-disabled-color}; + --#{$prefix}navbar-active-color: #{$navbar-light-active-color}; + --#{$prefix}navbar-brand-padding-y: #{$navbar-brand-padding-y}; + --#{$prefix}navbar-brand-margin-end: #{$navbar-brand-margin-end}; + --#{$prefix}navbar-brand-font-size: #{$navbar-brand-font-size}; + --#{$prefix}navbar-brand-color: #{$navbar-light-brand-color}; + --#{$prefix}navbar-brand-hover-color: #{$navbar-light-brand-hover-color}; + --#{$prefix}navbar-nav-link-padding-x: #{$navbar-nav-link-padding-x}; + --#{$prefix}navbar-toggler-padding-y: #{$navbar-toggler-padding-y}; + --#{$prefix}navbar-toggler-padding-x: #{$navbar-toggler-padding-x}; + --#{$prefix}navbar-toggler-font-size: #{$navbar-toggler-font-size}; + --#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-light-toggler-icon-bg)}; + --#{$prefix}navbar-toggler-border-color: #{$navbar-light-toggler-border-color}; + --#{$prefix}navbar-toggler-border-radius: #{$navbar-toggler-border-radius}; + --#{$prefix}navbar-toggler-focus-width: #{$navbar-toggler-focus-width}; + --#{$prefix}navbar-toggler-transition: #{$navbar-toggler-transition}; // scss-docs-end navbar-css-vars position: relative; @@ -32,7 +32,7 @@ flex-wrap: wrap; // allow us to do the line break for collapsing content align-items: center; justify-content: space-between; // space out brand from logo - padding: var(--#{$variable-prefix}navbar-padding-y) var(--#{$variable-prefix}navbar-padding-x); + padding: var(--#{$prefix}navbar-padding-y) var(--#{$prefix}navbar-padding-x); @include gradient-bg(); // Because flex properties aren't inherited, we need to redeclare these first @@ -63,17 +63,17 @@ // Used for brand, project, or site names. .navbar-brand { - padding-top: var(--#{$variable-prefix}navbar-brand-padding-y); - padding-bottom: var(--#{$variable-prefix}navbar-brand-padding-y); - margin-right: var(--#{$variable-prefix}navbar-brand-margin-end); - @include font-size(var(--#{$variable-prefix}navbar-brand-font-size)); - color: var(--#{$variable-prefix}navbar-brand-color); + padding-top: var(--#{$prefix}navbar-brand-padding-y); + padding-bottom: var(--#{$prefix}navbar-brand-padding-y); + margin-right: var(--#{$prefix}navbar-brand-margin-end); + @include font-size(var(--#{$prefix}navbar-brand-font-size)); + color: var(--#{$prefix}navbar-brand-color); text-decoration: if($link-decoration == none, null, none); white-space: nowrap; &:hover, &:focus { - color: var(--#{$variable-prefix}navbar-brand-hover-color); + color: var(--#{$prefix}navbar-brand-hover-color); text-decoration: if($link-hover-decoration == underline, none, null); } } @@ -93,21 +93,21 @@ .nav-link { padding-right: 0; padding-left: 0; - color: var(--#{$variable-prefix}navbar-color); + color: var(--#{$prefix}navbar-color); &:hover, &:focus { - color: var(--#{$variable-prefix}navbar-hover-color); + color: var(--#{$prefix}navbar-hover-color); } &.disabled { - color: var(--#{$variable-prefix}navbar-disabled-color); + color: var(--#{$prefix}navbar-disabled-color); } } .show > .nav-link, .nav-link.active { - color: var(--#{$variable-prefix}navbar-active-color); + color: var(--#{$prefix}navbar-active-color); } .dropdown-menu { @@ -123,12 +123,12 @@ .navbar-text { padding-top: $nav-link-padding-y; padding-bottom: $nav-link-padding-y; - color: var(--#{$variable-prefix}navbar-color); + color: var(--#{$prefix}navbar-color); a, a:hover, a:focus { - color: var(--#{$variable-prefix}navbar-active-color); + color: var(--#{$prefix}navbar-active-color); } } @@ -151,14 +151,14 @@ // Button for toggling the navbar when in its collapsed state .navbar-toggler { - padding: var(--#{$variable-prefix}navbar-toggler-padding-y) var(--#{$variable-prefix}navbar-toggler-padding-x); - @include font-size(var(--#{$variable-prefix}navbar-toggler-font-size)); + padding: var(--#{$prefix}navbar-toggler-padding-y) var(--#{$prefix}navbar-toggler-padding-x); + @include font-size(var(--#{$prefix}navbar-toggler-font-size)); line-height: 1; - color: var(--#{$variable-prefix}navbar-color); + color: var(--#{$prefix}navbar-color); background-color: transparent; // remove default button style - border: var(--#{$variable-prefix}border-width) solid var(--#{$variable-prefix}navbar-toggler-border-color); // remove default button style - @include border-radius(var(--#{$variable-prefix}navbar-toggler-border-radius)); - @include transition(var(--#{$variable-prefix}navbar-toggler-transition)); + border: var(--#{$prefix}border-width) solid var(--#{$prefix}navbar-toggler-border-color); // remove default button style + @include border-radius(var(--#{$prefix}navbar-toggler-border-radius)); + @include transition(var(--#{$prefix}navbar-toggler-transition)); &:hover { text-decoration: none; @@ -167,7 +167,7 @@ &:focus { text-decoration: none; outline: 0; - box-shadow: 0 0 0 var(--#{$variable-prefix}navbar-toggler-focus-width); + box-shadow: 0 0 0 var(--#{$prefix}navbar-toggler-focus-width); } } @@ -178,14 +178,14 @@ width: 1.5em; height: 1.5em; vertical-align: middle; - background-image: var(--#{$variable-prefix}navbar-toggler-icon-bg); + background-image: var(--#{$prefix}navbar-toggler-icon-bg); background-repeat: no-repeat; background-position: center; background-size: 100%; } .navbar-nav-scroll { - max-height: var(--#{$variable-prefix}scroll-height, 75vh); + max-height: var(--#{$prefix}scroll-height, 75vh); overflow-y: auto; } @@ -211,8 +211,8 @@ } .nav-link { - padding-right: var(--#{$variable-prefix}navbar-nav-link-padding-x); - padding-left: var(--#{$variable-prefix}navbar-nav-link-padding-x); + padding-right: var(--#{$prefix}navbar-nav-link-padding-x); + padding-left: var(--#{$prefix}navbar-nav-link-padding-x); } } @@ -280,12 +280,12 @@ } .navbar-dark { - --#{$variable-prefix}navbar-color: #{$navbar-dark-color}; - --#{$variable-prefix}navbar-hover-color: #{$navbar-dark-hover-color}; - --#{$variable-prefix}navbar-disabled-color: #{$navbar-dark-disabled-color}; - --#{$variable-prefix}navbar-active-color: #{$navbar-dark-active-color}; - --#{$variable-prefix}navbar-brand-color: #{$navbar-dark-brand-color}; - --#{$variable-prefix}navbar-brand-hover-color: #{$navbar-dark-brand-hover-color}; - --#{$variable-prefix}navbar-toggler-border-color: #{$navbar-dark-toggler-border-color}; - --#{$variable-prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-dark-toggler-icon-bg)}; + --#{$prefix}navbar-color: #{$navbar-dark-color}; + --#{$prefix}navbar-hover-color: #{$navbar-dark-hover-color}; + --#{$prefix}navbar-disabled-color: #{$navbar-dark-disabled-color}; + --#{$prefix}navbar-active-color: #{$navbar-dark-active-color}; + --#{$prefix}navbar-brand-color: #{$navbar-dark-brand-color}; + --#{$prefix}navbar-brand-hover-color: #{$navbar-dark-brand-hover-color}; + --#{$prefix}navbar-toggler-border-color: #{$navbar-dark-toggler-border-color}; + --#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-dark-toggler-icon-bg)}; } diff --git a/scss/_pagination.scss b/scss/_pagination.scss index 7f182922a3..9d9ad89c2b 100644 --- a/scss/_pagination.scss +++ b/scss/_pagination.scss @@ -1,24 +1,24 @@ .pagination { // scss-docs-start pagination-css-vars - --#{$variable-prefix}pagination-padding-x: #{$pagination-padding-x}; - --#{$variable-prefix}pagination-padding-y: #{$pagination-padding-y}; - --#{$variable-prefix}pagination-color: #{$pagination-color}; - --#{$variable-prefix}pagination-bg: #{$pagination-bg}; - --#{$variable-prefix}pagination-border-width: #{$pagination-border-width}; - --#{$variable-prefix}pagination-border-color: #{$pagination-border-color}; - --#{$variable-prefix}pagination-border-radius: #{$pagination-border-radius}; - --#{$variable-prefix}pagination-hover-color: #{$pagination-hover-color}; - --#{$variable-prefix}pagination-hover-bg: #{$pagination-hover-bg}; - --#{$variable-prefix}pagination-hover-border-color: #{$pagination-hover-border-color}; - --#{$variable-prefix}pagination-focus-color: #{$pagination-focus-color}; - --#{$variable-prefix}pagination-focus-bg: #{$pagination-focus-bg}; - --#{$variable-prefix}pagination-focus-box-shadow: #{$pagination-focus-box-shadow}; - --#{$variable-prefix}pagination-active-color: #{$pagination-active-color}; - --#{$variable-prefix}pagination-active-bg: #{$pagination-active-bg}; - --#{$variable-prefix}pagination-active-border-color: #{$pagination-active-border-color}; - --#{$variable-prefix}pagination-disabled-color: #{$pagination-disabled-color}; - --#{$variable-prefix}pagination-disabled-bg: #{$pagination-disabled-bg}; - --#{$variable-prefix}pagination-disabled-border-color: #{$pagination-disabled-border-color}; + --#{$prefix}pagination-padding-x: #{$pagination-padding-x}; + --#{$prefix}pagination-padding-y: #{$pagination-padding-y}; + --#{$prefix}pagination-color: #{$pagination-color}; + --#{$prefix}pagination-bg: #{$pagination-bg}; + --#{$prefix}pagination-border-width: #{$pagination-border-width}; + --#{$prefix}pagination-border-color: #{$pagination-border-color}; + --#{$prefix}pagination-border-radius: #{$pagination-border-radius}; + --#{$prefix}pagination-hover-color: #{$pagination-hover-color}; + --#{$prefix}pagination-hover-bg: #{$pagination-hover-bg}; + --#{$prefix}pagination-hover-border-color: #{$pagination-hover-border-color}; + --#{$prefix}pagination-focus-color: #{$pagination-focus-color}; + --#{$prefix}pagination-focus-bg: #{$pagination-focus-bg}; + --#{$prefix}pagination-focus-box-shadow: #{$pagination-focus-box-shadow}; + --#{$prefix}pagination-active-color: #{$pagination-active-color}; + --#{$prefix}pagination-active-bg: #{$pagination-active-bg}; + --#{$prefix}pagination-active-border-color: #{$pagination-active-border-color}; + --#{$prefix}pagination-disabled-color: #{$pagination-disabled-color}; + --#{$prefix}pagination-disabled-bg: #{$pagination-disabled-bg}; + --#{$prefix}pagination-disabled-border-color: #{$pagination-disabled-border-color}; // scss-docs-end pagination-css-vars display: flex; @@ -28,44 +28,44 @@ .page-link { position: relative; display: block; - padding: var(--#{$variable-prefix}pagination-padding-y) var(--#{$variable-prefix}pagination-padding-x); - font-size: var(--#{$variable-prefix}pagination-font-size); - color: var(--#{$variable-prefix}pagination-color); + padding: var(--#{$prefix}pagination-padding-y) var(--#{$prefix}pagination-padding-x); + font-size: var(--#{$prefix}pagination-font-size); + color: var(--#{$prefix}pagination-color); text-decoration: if($link-decoration == none, null, none); - background-color: var(--#{$variable-prefix}pagination-bg); - border: var(--#{$variable-prefix}pagination-border-width) solid var(--#{$variable-prefix}pagination-border-color); + background-color: var(--#{$prefix}pagination-bg); + border: var(--#{$prefix}pagination-border-width) solid var(--#{$prefix}pagination-border-color); @include transition($pagination-transition); &:hover { z-index: 2; - color: var(--#{$variable-prefix}pagination-hover-color); + color: var(--#{$prefix}pagination-hover-color); text-decoration: if($link-hover-decoration == underline, none, null); - background-color: var(--#{$variable-prefix}pagination-hover-bg); - border-color: var(--#{$variable-prefix}pagination-hover-border-color); + background-color: var(--#{$prefix}pagination-hover-bg); + border-color: var(--#{$prefix}pagination-hover-border-color); } &:focus { z-index: 3; - color: var(--#{$variable-prefix}pagination-focus-color); - background-color: var(--#{$variable-prefix}pagination-focus-bg); + color: var(--#{$prefix}pagination-focus-color); + background-color: var(--#{$prefix}pagination-focus-bg); outline: $pagination-focus-outline; - box-shadow: var(--#{$variable-prefix}pagination-focus-box-shadow); + box-shadow: var(--#{$prefix}pagination-focus-box-shadow); } &.active, .active > & { z-index: 3; - color: var(--#{$variable-prefix}pagination-active-color); - @include gradient-bg(var(--#{$variable-prefix}pagination-active-bg)); - border-color: var(--#{$variable-prefix}pagination-active-border-color); + color: var(--#{$prefix}pagination-active-color); + @include gradient-bg(var(--#{$prefix}pagination-active-bg)); + border-color: var(--#{$prefix}pagination-active-border-color); } &.disabled, .disabled > & { - color: var(--#{$variable-prefix}pagination-disabled-color); + color: var(--#{$prefix}pagination-disabled-color); pointer-events: none; - background-color: var(--#{$variable-prefix}pagination-disabled-bg); - border-color: var(--#{$variable-prefix}pagination-disabled-border-color); + background-color: var(--#{$prefix}pagination-disabled-bg); + border-color: var(--#{$prefix}pagination-disabled-border-color); } } @@ -77,19 +77,19 @@ @if $pagination-margin-start == (-$pagination-border-width) { &:first-child { .page-link { - @include border-start-radius(var(--#{$variable-prefix}pagination-border-radius)); + @include border-start-radius(var(--#{$prefix}pagination-border-radius)); } } &:last-child { .page-link { - @include border-end-radius(var(--#{$variable-prefix}pagination-border-radius)); + @include border-end-radius(var(--#{$prefix}pagination-border-radius)); } } } @else { // Add border-radius to all pageLinks in case they have left margin .page-link { - @include border-radius(var(--#{$variable-prefix}pagination-border-radius)); + @include border-radius(var(--#{$prefix}pagination-border-radius)); } } } diff --git a/scss/_popover.scss b/scss/_popover.scss index 476a76816c..abe58d7b91 100644 --- a/scss/_popover.scss +++ b/scss/_popover.scss @@ -2,49 +2,49 @@ .popover { // scss-docs-start popover-css-vars - --#{$variable-prefix}popover-zindex: #{$zindex-popover}; - --#{$variable-prefix}popover-max-width: #{$popover-max-width}; - @include rfs($popover-font-size, --#{$variable-prefix}popover-font-size); - --#{$variable-prefix}popover-bg: #{$popover-bg}; - --#{$variable-prefix}popover-border-width: #{$popover-border-width}; - --#{$variable-prefix}popover-border-color: #{$popover-border-color}; - --#{$variable-prefix}popover-border-radius: #{$popover-border-radius}; - --#{$variable-prefix}popover-box-shadow: #{$popover-box-shadow}; - --#{$variable-prefix}popover-header-padding-x: #{$popover-header-padding-x}; - --#{$variable-prefix}popover-header-padding-y: #{$popover-header-padding-y}; - --#{$variable-prefix}popover-header-color: #{$popover-header-color}; - --#{$variable-prefix}popover-header-bg: #{$popover-header-bg}; - --#{$variable-prefix}popover-body-padding-x: #{$popover-body-padding-x}; - --#{$variable-prefix}popover-body-padding-y: #{$popover-body-padding-y}; - --#{$variable-prefix}popover-body-color: #{$popover-body-color}; - --#{$variable-prefix}popover-arrow-width: #{$popover-arrow-width}; - --#{$variable-prefix}popover-arrow-height: #{$popover-arrow-height}; - --#{$variable-prefix}popover-arrow-border: var(--#{$variable-prefix}popover-border-color); + --#{$prefix}popover-zindex: #{$zindex-popover}; + --#{$prefix}popover-max-width: #{$popover-max-width}; + @include rfs($popover-font-size, --#{$prefix}popover-font-size); + --#{$prefix}popover-bg: #{$popover-bg}; + --#{$prefix}popover-border-width: #{$popover-border-width}; + --#{$prefix}popover-border-color: #{$popover-border-color}; + --#{$prefix}popover-border-radius: #{$popover-border-radius}; + --#{$prefix}popover-box-shadow: #{$popover-box-shadow}; + --#{$prefix}popover-header-padding-x: #{$popover-header-padding-x}; + --#{$prefix}popover-header-padding-y: #{$popover-header-padding-y}; + --#{$prefix}popover-header-color: #{$popover-header-color}; + --#{$prefix}popover-header-bg: #{$popover-header-bg}; + --#{$prefix}popover-body-padding-x: #{$popover-body-padding-x}; + --#{$prefix}popover-body-padding-y: #{$popover-body-padding-y}; + --#{$prefix}popover-body-color: #{$popover-body-color}; + --#{$prefix}popover-arrow-width: #{$popover-arrow-width}; + --#{$prefix}popover-arrow-height: #{$popover-arrow-height}; + --#{$prefix}popover-arrow-border: var(--#{$prefix}popover-border-color); // scss-docs-end popover-css-vars position: absolute; top: 0; left: 0 #{"/* rtl:ignore */"}; - z-index: var(--#{$variable-prefix}popover-zindex); + z-index: var(--#{$prefix}popover-zindex); display: block; - max-width: var(--#{$variable-prefix}popover-max-width); + max-width: var(--#{$prefix}popover-max-width); // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element. // So reset our font and text properties to avoid inheriting weird values. @include reset-text(); - font-size: var(--#{$variable-prefix}popover-font-size); + font-size: var(--#{$prefix}popover-font-size); // Allow breaking very long words so they don't overflow the popover's bounds word-wrap: break-word; - background-color: var(--#{$variable-prefix}popover-bg); + background-color: var(--#{$prefix}popover-bg); background-clip: padding-box; - border: var(--#{$variable-prefix}popover-border-width) solid var(--#{$variable-prefix}popover-border-color); - @include border-radius(var(--#{$variable-prefix}popover-border-radius)); - @include box-shadow(var(--#{$variable-prefix}popover-box-shadow)); + border: var(--#{$prefix}popover-border-width) solid var(--#{$prefix}popover-border-color); + @include border-radius(var(--#{$prefix}popover-border-radius)); + @include box-shadow(var(--#{$prefix}popover-box-shadow)); .popover-arrow { position: absolute; display: block; - width: var(--#{$variable-prefix}popover-arrow-width); - height: var(--#{$variable-prefix}popover-arrow-height); + width: var(--#{$prefix}popover-arrow-width); + height: var(--#{$prefix}popover-arrow-height); &::before, &::after { @@ -60,21 +60,21 @@ .bs-popover-top { > .popover-arrow { - bottom: calc((var(--#{$variable-prefix}popover-arrow-height)) * -1); // stylelint-disable-line function-disallowed-list + bottom: calc((var(--#{$prefix}popover-arrow-height)) * -1); // stylelint-disable-line function-disallowed-list &::before, &::after { - border-width: var(--#{$variable-prefix}popover-arrow-height) calc(var(--#{$variable-prefix}popover-arrow-width) * .5) 0; // stylelint-disable-line function-disallowed-list + border-width: var(--#{$prefix}popover-arrow-height) calc(var(--#{$prefix}popover-arrow-width) * .5) 0; // stylelint-disable-line function-disallowed-list } &::before { bottom: 0; - border-top-color: var(--#{$variable-prefix}popover-arrow-border); + border-top-color: var(--#{$prefix}popover-arrow-border); } &::after { - bottom: var(--#{$variable-prefix}popover-border-width); - border-top-color: var(--#{$variable-prefix}popover-bg); + bottom: var(--#{$prefix}popover-border-width); + border-top-color: var(--#{$prefix}popover-bg); } } } @@ -82,23 +82,23 @@ /* rtl:begin:ignore */ .bs-popover-end { > .popover-arrow { - left: calc((var(--#{$variable-prefix}popover-arrow-height)) * -1); // stylelint-disable-line function-disallowed-list - width: var(--#{$variable-prefix}popover-arrow-height); - height: var(--#{$variable-prefix}popover-arrow-width); + left: calc((var(--#{$prefix}popover-arrow-height)) * -1); // stylelint-disable-line function-disallowed-list + width: var(--#{$prefix}popover-arrow-height); + height: var(--#{$prefix}popover-arrow-width); &::before, &::after { - border-width: calc(var(--#{$variable-prefix}popover-arrow-width) * .5) var(--#{$variable-prefix}popover-arrow-height) calc(var(--#{$variable-prefix}popover-arrow-width) * .5) 0; // stylelint-disable-line function-disallowed-list + border-width: calc(var(--#{$prefix}popover-arrow-width) * .5) var(--#{$prefix}popover-arrow-height) calc(var(--#{$prefix}popover-arrow-width) * .5) 0; // stylelint-disable-line function-disallowed-list } &::before { left: 0; - border-right-color: var(--#{$variable-prefix}popover-arrow-border); + border-right-color: var(--#{$prefix}popover-arrow-border); } &::after { - left: var(--#{$variable-prefix}popover-border-width); - border-right-color: var(--#{$variable-prefix}popover-bg); + left: var(--#{$prefix}popover-border-width); + border-right-color: var(--#{$prefix}popover-bg); } } } @@ -107,21 +107,21 @@ .bs-popover-bottom { > .popover-arrow { - top: calc((var(--#{$variable-prefix}popover-arrow-height)) * -1); // stylelint-disable-line function-disallowed-list + top: calc((var(--#{$prefix}popover-arrow-height)) * -1); // stylelint-disable-line function-disallowed-list &::before, &::after { - border-width: 0 calc(var(--#{$variable-prefix}popover-arrow-width) * .5) var(--#{$variable-prefix}popover-arrow-height); // stylelint-disable-line function-disallowed-list + border-width: 0 calc(var(--#{$prefix}popover-arrow-width) * .5) var(--#{$prefix}popover-arrow-height); // stylelint-disable-line function-disallowed-list } &::before { top: 0; - border-bottom-color: var(--#{$variable-prefix}popover-arrow-border); + border-bottom-color: var(--#{$prefix}popover-arrow-border); } &::after { - top: var(--#{$variable-prefix}popover-border-width); - border-bottom-color: var(--#{$variable-prefix}popover-bg); + top: var(--#{$prefix}popover-border-width); + border-bottom-color: var(--#{$prefix}popover-bg); } } @@ -131,33 +131,33 @@ top: 0; left: 50%; display: block; - width: var(--#{$variable-prefix}popover-arrow-width); - margin-left: calc(var(--#{$variable-prefix}popover-arrow-width) * -.5); // stylelint-disable-line function-disallowed-list + width: var(--#{$prefix}popover-arrow-width); + margin-left: calc(var(--#{$prefix}popover-arrow-width) * -.5); // stylelint-disable-line function-disallowed-list content: ""; - border-bottom: var(--#{$variable-prefix}popover-border-width) solid var(--#{$variable-prefix}popover-header-bg); + border-bottom: var(--#{$prefix}popover-border-width) solid var(--#{$prefix}popover-header-bg); } } /* rtl:begin:ignore */ .bs-popover-start { > .popover-arrow { - right: calc((var(--#{$variable-prefix}popover-arrow-height)) * -1); // stylelint-disable-line function-disallowed-list - width: var(--#{$variable-prefix}popover-arrow-height); - height: var(--#{$variable-prefix}popover-arrow-width); + right: calc((var(--#{$prefix}popover-arrow-height)) * -1); // stylelint-disable-line function-disallowed-list + width: var(--#{$prefix}popover-arrow-height); + height: var(--#{$prefix}popover-arrow-width); &::before, &::after { - border-width: calc(var(--#{$variable-prefix}popover-arrow-width) * .5) 0 calc(var(--#{$variable-prefix}popover-arrow-width) * .5) var(--#{$variable-prefix}popover-arrow-height); // stylelint-disable-line function-disallowed-list + border-width: calc(var(--#{$prefix}popover-arrow-width) * .5) 0 calc(var(--#{$prefix}popover-arrow-width) * .5) var(--#{$prefix}popover-arrow-height); // stylelint-disable-line function-disallowed-list } &::before { right: 0; - border-left-color: var(--#{$variable-prefix}popover-arrow-border); + border-left-color: var(--#{$prefix}popover-arrow-border); } &::after { - right: var(--#{$variable-prefix}popover-border-width); - border-left-color: var(--#{$variable-prefix}popover-bg); + right: var(--#{$prefix}popover-border-width); + border-left-color: var(--#{$prefix}popover-bg); } } } @@ -181,12 +181,12 @@ // Offset the popover to account for the popover arrow .popover-header { - padding: var(--#{$variable-prefix}popover-header-padding-y) var(--#{$variable-prefix}popover-header-padding-x); + padding: var(--#{$prefix}popover-header-padding-y) var(--#{$prefix}popover-header-padding-x); margin-bottom: 0; // Reset the default from Reboot @include font-size($font-size-base); - color: var(--#{$variable-prefix}popover-header-color); - background-color: var(--#{$variable-prefix}popover-header-bg); - border-bottom: var(--#{$variable-prefix}popover-border-width) solid var(--#{$variable-prefix}popover-border-color); + color: var(--#{$prefix}popover-header-color); + background-color: var(--#{$prefix}popover-header-bg); + border-bottom: var(--#{$prefix}popover-border-width) solid var(--#{$prefix}popover-border-color); @include border-top-radius($popover-inner-border-radius); &:empty { @@ -195,6 +195,6 @@ } .popover-body { - padding: var(--#{$variable-prefix}popover-body-padding-y) var(--#{$variable-prefix}popover-body-padding-x); - color: var(--#{$variable-prefix}popover-body-color); + padding: var(--#{$prefix}popover-body-padding-y) var(--#{$prefix}popover-body-padding-x); + color: var(--#{$prefix}popover-body-color); } diff --git a/scss/_reboot.scss b/scss/_reboot.scss index 259f59eb45..0f05de7424 100644 --- a/scss/_reboot.scss +++ b/scss/_reboot.scss @@ -27,7 +27,7 @@ :root { @if $font-size-root != null { - font-size: var(--#{$variable-prefix}root-font-size); + font-size: var(--#{$prefix}root-font-size); } @if $enable-smooth-scroll { @@ -48,13 +48,13 @@ // scss-docs-start reboot-body-rules body { margin: 0; // 1 - font-family: var(--#{$variable-prefix}body-font-family); - font-size: var(--#{$variable-prefix}body-font-size); - font-weight: var(--#{$variable-prefix}body-font-weight); - line-height: var(--#{$variable-prefix}body-line-height); - color: var(--#{$variable-prefix}body-color); - text-align: var(--#{$variable-prefix}body-text-align); - background-color: var(--#{$variable-prefix}body-bg); // 2 + font-family: var(--#{$prefix}body-font-family); + font-size: var(--#{$prefix}body-font-size); + font-weight: var(--#{$prefix}body-font-weight); + line-height: var(--#{$prefix}body-line-height); + color: var(--#{$prefix}body-color); + text-align: var(--#{$prefix}body-text-align); + background-color: var(--#{$prefix}body-bg); // 2 -webkit-text-size-adjust: 100%; // 3 -webkit-tap-highlight-color: rgba($black, 0); // 4 } @@ -87,7 +87,7 @@ hr { font-style: $headings-font-style; font-weight: $headings-font-weight; line-height: $headings-line-height; - color: $headings-color; + color: var(--#{$prefix}heading-color); } h1 { @@ -219,7 +219,7 @@ small { mark { padding: $mark-padding; - background-color: $mark-bg; + background-color: var(--#{$prefix}highlight-bg); } @@ -243,11 +243,11 @@ sup { top: -.5em; } // Links a { - color: $link-color; + color: var(--#{$prefix}link-color); text-decoration: $link-decoration; &:hover { - color: $link-hover-color; + color: var(--#{$prefix}link-hover-color); text-decoration: $link-hover-decoration; } } @@ -298,7 +298,7 @@ pre { code { @include font-size($code-font-size); - color: $code-color; + color: var(--#{$prefix}code-color); word-wrap: break-word; // Streamline the style when inside anchors to avoid broken underline and more diff --git a/scss/_root.scss b/scss/_root.scss index 4d5f3d198e..f0f89800f8 100644 --- a/scss/_root.scss +++ b/scss/_root.scss @@ -1,3 +1,5 @@ +// stylelint-disable custom-property-empty-line-before + :root { // Note: Custom variable values only support SassScript inside `#{}`. @@ -6,57 +8,70 @@ // Generate palettes for full colors, grays, and theme colors. @each $color, $value in $colors { - --#{$variable-prefix}#{$color}: #{$value}; + --#{$prefix}#{$color}: #{$value}; } @each $color, $value in $grays { - --#{$variable-prefix}gray-#{$color}: #{$value}; + --#{$prefix}gray-#{$color}: #{$value}; } @each $color, $value in $theme-colors { - --#{$variable-prefix}#{$color}: #{$value}; + --#{$prefix}#{$color}: #{$value}; } @each $color, $value in $theme-colors-rgb { - --#{$variable-prefix}#{$color}-rgb: #{$value}; + --#{$prefix}#{$color}-rgb: #{$value}; } - --#{$variable-prefix}white-rgb: #{to-rgb($white)}; - --#{$variable-prefix}black-rgb: #{to-rgb($black)}; - --#{$variable-prefix}body-color-rgb: #{to-rgb($body-color)}; - --#{$variable-prefix}body-bg-rgb: #{to-rgb($body-bg)}; + --#{$prefix}white-rgb: #{to-rgb($white)}; + --#{$prefix}black-rgb: #{to-rgb($black)}; + --#{$prefix}body-color-rgb: #{to-rgb($body-color)}; + --#{$prefix}body-bg-rgb: #{to-rgb($body-bg)}; // Fonts // Note: Use `inspect` for lists so that quoted items keep the quotes. // See https://github.com/sass/sass/issues/2383#issuecomment-336349172 - --#{$variable-prefix}font-sans-serif: #{inspect($font-family-sans-serif)}; - --#{$variable-prefix}font-monospace: #{inspect($font-family-monospace)}; - --#{$variable-prefix}gradient: #{$gradient}; + --#{$prefix}font-sans-serif: #{inspect($font-family-sans-serif)}; + --#{$prefix}font-monospace: #{inspect($font-family-monospace)}; + --#{$prefix}gradient: #{$gradient}; // Root and body - // stylelint-disable custom-property-empty-line-before // scss-docs-start root-body-variables @if $font-size-root != null { - --#{$variable-prefix}root-font-size: #{$font-size-root}; + --#{$prefix}root-font-size: #{$font-size-root}; } - --#{$variable-prefix}body-font-family: #{$font-family-base}; - @include rfs($font-size-base, --#{$variable-prefix}body-font-size); - --#{$variable-prefix}body-font-weight: #{$font-weight-base}; - --#{$variable-prefix}body-line-height: #{$line-height-base}; - --#{$variable-prefix}body-color: #{$body-color}; + --#{$prefix}body-font-family: #{$font-family-base}; + @include rfs($font-size-base, --#{$prefix}body-font-size); + --#{$prefix}body-font-weight: #{$font-weight-base}; + --#{$prefix}body-line-height: #{$line-height-base}; + --#{$prefix}body-color: #{$body-color}; @if $body-text-align != null { - --#{$variable-prefix}body-text-align: #{$body-text-align}; + --#{$prefix}body-text-align: #{$body-text-align}; } - --#{$variable-prefix}body-bg: #{$body-bg}; + --#{$prefix}body-bg: #{$body-bg}; // scss-docs-end root-body-variables // scss-docs-start root-border-var - --#{$variable-prefix}border-width: #{$border-width}; - --#{$variable-prefix}border-style: solid; - --#{$variable-prefix}border-color: #{$border-color}; - --#{$variable-prefix}border-radius: #{$border-radius}; - --#{$variable-prefix}border-opacity: 1; + --#{$prefix}border-width: #{$border-width}; + --#{$prefix}border-style: #{$border-style}; + --#{$prefix}border-color: #{$border-color}; + --#{$prefix}border-radius: #{$border-radius}; + --#{$prefix}border-opacity: 1; + + --#{$prefix}border-radius: #{$border-radius}; + --#{$prefix}border-radius-sm: #{$border-radius-sm}; + --#{$prefix}border-radius-lg: #{$border-radius-lg}; + --#{$prefix}border-radius-xl: #{$border-radius-xl}; + --#{$prefix}border-radius-2xl: #{$border-radius-2xl}; + --#{$prefix}border-radius-pill: #{$border-radius-pill}; // scss-docs-end root-border-var - // stylelint-enable custom-property-empty-line-before + + --#{$prefix}heading-color: #{$headings-color}; + --#{$prefix}link-color: #{$link-color}; + --#{$prefix}link-hover-color: #{$link-hover-color}; + + --#{$prefix}code-color: #{$code-color}; + + --#{$prefix}highlight-bg: #{$mark-bg}; } diff --git a/scss/_tables.scss b/scss/_tables.scss index c523e6677f..601d86cc9f 100644 --- a/scss/_tables.scss +++ b/scss/_tables.scss @@ -3,22 +3,22 @@ // .table { - --#{$variable-prefix}table-color: #{$table-color}; - --#{$variable-prefix}table-bg: #{$table-bg}; - --#{$variable-prefix}table-border-color: #{$table-border-color}; - --#{$variable-prefix}table-accent-bg: #{$table-accent-bg}; - --#{$variable-prefix}table-striped-color: #{$table-striped-color}; - --#{$variable-prefix}table-striped-bg: #{$table-striped-bg}; - --#{$variable-prefix}table-active-color: #{$table-active-color}; - --#{$variable-prefix}table-active-bg: #{$table-active-bg}; - --#{$variable-prefix}table-hover-color: #{$table-hover-color}; - --#{$variable-prefix}table-hover-bg: #{$table-hover-bg}; + --#{$prefix}table-color: #{$table-color}; + --#{$prefix}table-bg: #{$table-bg}; + --#{$prefix}table-border-color: #{$table-border-color}; + --#{$prefix}table-accent-bg: #{$table-accent-bg}; + --#{$prefix}table-striped-color: #{$table-striped-color}; + --#{$prefix}table-striped-bg: #{$table-striped-bg}; + --#{$prefix}table-active-color: #{$table-active-color}; + --#{$prefix}table-active-bg: #{$table-active-bg}; + --#{$prefix}table-hover-color: #{$table-hover-color}; + --#{$prefix}table-hover-bg: #{$table-hover-bg}; width: 100%; margin-bottom: $spacer; - color: var(--#{$variable-prefix}table-color); + color: var(--#{$prefix}table-color); vertical-align: $table-cell-vertical-align; - border-color: var(--#{$variable-prefix}table-border-color); + border-color: var(--#{$prefix}table-border-color); // Target th & td // We need the child combinator to prevent styles leaking to nested tables which doesn't have a `.table` class. @@ -27,9 +27,9 @@ // stylelint-disable-next-line selector-max-universal > :not(caption) > * > * { padding: $table-cell-padding-y $table-cell-padding-x; - background-color: var(--#{$variable-prefix}table-bg); + background-color: var(--#{$prefix}table-bg); border-bottom-width: $table-border-width; - box-shadow: inset 0 0 0 9999px var(--#{$variable-prefix}table-accent-bg); + box-shadow: inset 0 0 0 9999px var(--#{$prefix}table-accent-bg); } > tbody { @@ -104,16 +104,16 @@ // For rows .table-striped { > tbody > tr:nth-of-type(#{$table-striped-order}) > * { - --#{$variable-prefix}table-accent-bg: var(--#{$variable-prefix}table-striped-bg); - color: var(--#{$variable-prefix}table-striped-color); + --#{$prefix}table-accent-bg: var(--#{$prefix}table-striped-bg); + color: var(--#{$prefix}table-striped-color); } } // For columns .table-striped-columns { > :not(caption) > tr > :nth-child(#{$table-striped-columns-order}) { - --#{$variable-prefix}table-accent-bg: var(--#{$variable-prefix}table-striped-bg); - color: var(--#{$variable-prefix}table-striped-color); + --#{$prefix}table-accent-bg: var(--#{$prefix}table-striped-bg); + color: var(--#{$prefix}table-striped-color); } } @@ -122,8 +122,8 @@ // The `.table-active` class can be added to highlight rows or cells .table-active { - --#{$variable-prefix}table-accent-bg: var(--#{$variable-prefix}table-active-bg); - color: var(--#{$variable-prefix}table-active-color); + --#{$prefix}table-accent-bg: var(--#{$prefix}table-active-bg); + color: var(--#{$prefix}table-active-color); } // Hover effect @@ -132,8 +132,8 @@ .table-hover { > tbody > tr:hover > * { - --#{$variable-prefix}table-accent-bg: var(--#{$variable-prefix}table-hover-bg); - color: var(--#{$variable-prefix}table-hover-color); + --#{$prefix}table-accent-bg: var(--#{$prefix}table-hover-bg); + color: var(--#{$prefix}table-hover-color); } } diff --git a/scss/_tooltip.scss b/scss/_tooltip.scss index 5c92b55496..a3343596b8 100644 --- a/scss/_tooltip.scss +++ b/scss/_tooltip.scss @@ -3,39 +3,39 @@ // Base class .tooltip { // scss-docs-start tooltip-css-vars - --#{$variable-prefix}tooltip-zindex: #{$zindex-tooltip}; - --#{$variable-prefix}tooltip-max-width: #{$tooltip-max-width}; - --#{$variable-prefix}tooltip-padding-x: #{$tooltip-padding-x}; - --#{$variable-prefix}tooltip-padding-y: #{$tooltip-padding-y}; - --#{$variable-prefix}tooltip-margin: #{$tooltip-margin}; - @include rfs($tooltip-font-size, --#{$variable-prefix}tooltip-font-size); - --#{$variable-prefix}tooltip-color: #{$tooltip-color}; - --#{$variable-prefix}tooltip-bg: #{$tooltip-bg}; - --#{$variable-prefix}tooltip-border-radius: #{$tooltip-border-radius}; - --#{$variable-prefix}tooltip-opacity: #{$tooltip-opacity}; - --#{$variable-prefix}tooltip-arrow-width: #{$tooltip-arrow-width}; - --#{$variable-prefix}tooltip-arrow-height: #{$tooltip-arrow-height}; + --#{$prefix}tooltip-zindex: #{$zindex-tooltip}; + --#{$prefix}tooltip-max-width: #{$tooltip-max-width}; + --#{$prefix}tooltip-padding-x: #{$tooltip-padding-x}; + --#{$prefix}tooltip-padding-y: #{$tooltip-padding-y}; + --#{$prefix}tooltip-margin: #{$tooltip-margin}; + @include rfs($tooltip-font-size, --#{$prefix}tooltip-font-size); + --#{$prefix}tooltip-color: #{$tooltip-color}; + --#{$prefix}tooltip-bg: #{$tooltip-bg}; + --#{$prefix}tooltip-border-radius: #{$tooltip-border-radius}; + --#{$prefix}tooltip-opacity: #{$tooltip-opacity}; + --#{$prefix}tooltip-arrow-width: #{$tooltip-arrow-width}; + --#{$prefix}tooltip-arrow-height: #{$tooltip-arrow-height}; // scss-docs-end tooltip-css-vars position: absolute; - z-index: var(--#{$variable-prefix}tooltip-zindex); + z-index: var(--#{$prefix}tooltip-zindex); display: block; - margin: var(--#{$variable-prefix}tooltip-margin); + margin: var(--#{$prefix}tooltip-margin); // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element. // So reset our font and text properties to avoid inheriting weird values. @include reset-text(); - @include font-size(var(--#{$variable-prefix}tooltip-font-size)); + @include font-size(var(--#{$prefix}tooltip-font-size)); // Allow breaking very long words so they don't overflow the tooltip's bounds word-wrap: break-word; opacity: 0; - &.show { opacity: var(--#{$variable-prefix}tooltip-opacity); } + &.show { opacity: var(--#{$prefix}tooltip-opacity); } .tooltip-arrow { position: absolute; display: block; - width: var(--#{$variable-prefix}tooltip-arrow-width); - height: var(--#{$variable-prefix}tooltip-arrow-height); + width: var(--#{$prefix}tooltip-arrow-width); + height: var(--#{$prefix}tooltip-arrow-height); &::before { position: absolute; @@ -47,32 +47,32 @@ } .bs-tooltip-top { - padding: var(--#{$variable-prefix}tooltip-arrow-height) 0; + padding: var(--#{$prefix}tooltip-arrow-height) 0; .tooltip-arrow { bottom: 0; &::before { top: -1px; - border-width: var(--#{$variable-prefix}tooltip-arrow-height) calc(var(--#{$variable-prefix}tooltip-arrow-width) * .5) 0; // stylelint-disable-line function-disallowed-list - border-top-color: var(--#{$variable-prefix}tooltip-bg); + border-width: var(--#{$prefix}tooltip-arrow-height) calc(var(--#{$prefix}tooltip-arrow-width) * .5) 0; // stylelint-disable-line function-disallowed-list + border-top-color: var(--#{$prefix}tooltip-bg); } } } /* rtl:begin:ignore */ .bs-tooltip-end { - padding: 0 var(--#{$variable-prefix}tooltip-arrow-height); + padding: 0 var(--#{$prefix}tooltip-arrow-height); .tooltip-arrow { left: 0; - width: var(--#{$variable-prefix}tooltip-arrow-height); - height: var(--#{$variable-prefix}tooltip-arrow-width); + width: var(--#{$prefix}tooltip-arrow-height); + height: var(--#{$prefix}tooltip-arrow-width); &::before { right: -1px; - border-width: calc(var(--#{$variable-prefix}tooltip-arrow-width) * .5) var(--#{$variable-prefix}tooltip-arrow-height) calc(var(--#{$variable-prefix}tooltip-arrow-width) * .5) 0; // stylelint-disable-line function-disallowed-list - border-right-color: var(--#{$variable-prefix}tooltip-bg); + border-width: calc(var(--#{$prefix}tooltip-arrow-width) * .5) var(--#{$prefix}tooltip-arrow-height) calc(var(--#{$prefix}tooltip-arrow-width) * .5) 0; // stylelint-disable-line function-disallowed-list + border-right-color: var(--#{$prefix}tooltip-bg); } } } @@ -80,32 +80,32 @@ /* rtl:end:ignore */ .bs-tooltip-bottom { - padding: var(--#{$variable-prefix}tooltip-arrow-height) 0; + padding: var(--#{$prefix}tooltip-arrow-height) 0; .tooltip-arrow { top: 0; &::before { bottom: -1px; - border-width: 0 calc(var(--#{$variable-prefix}tooltip-arrow-width) * .5) var(--#{$variable-prefix}tooltip-arrow-height); // stylelint-disable-line function-disallowed-list - border-bottom-color: var(--#{$variable-prefix}tooltip-bg); + border-width: 0 calc(var(--#{$prefix}tooltip-arrow-width) * .5) var(--#{$prefix}tooltip-arrow-height); // stylelint-disable-line function-disallowed-list + border-bottom-color: var(--#{$prefix}tooltip-bg); } } } /* rtl:begin:ignore */ .bs-tooltip-start { - padding: 0 var(--#{$variable-prefix}tooltip-arrow-height); + padding: 0 var(--#{$prefix}tooltip-arrow-height); .tooltip-arrow { right: 0; - width: var(--#{$variable-prefix}tooltip-arrow-height); - height: var(--#{$variable-prefix}tooltip-arrow-width); + width: var(--#{$prefix}tooltip-arrow-height); + height: var(--#{$prefix}tooltip-arrow-width); &::before { left: -1px; - border-width: calc(var(--#{$variable-prefix}tooltip-arrow-width) * .5) 0 calc(var(--#{$variable-prefix}tooltip-arrow-width) * .5) var(--#{$variable-prefix}tooltip-arrow-height); // stylelint-disable-line function-disallowed-list - border-left-color: var(--#{$variable-prefix}tooltip-bg); + border-width: calc(var(--#{$prefix}tooltip-arrow-width) * .5) 0 calc(var(--#{$prefix}tooltip-arrow-width) * .5) var(--#{$prefix}tooltip-arrow-height); // stylelint-disable-line function-disallowed-list + border-left-color: var(--#{$prefix}tooltip-bg); } } } @@ -129,10 +129,10 @@ // Wrapper for the tooltip content .tooltip-inner { - max-width: var(--#{$variable-prefix}tooltip-max-width); - padding: var(--#{$variable-prefix}tooltip-padding-y) var(--#{$variable-prefix}tooltip-padding-x); - color: var(--#{$variable-prefix}tooltip-color); + max-width: var(--#{$prefix}tooltip-max-width); + padding: var(--#{$prefix}tooltip-padding-y) var(--#{$prefix}tooltip-padding-x); + color: var(--#{$prefix}tooltip-color); text-align: center; - background-color: var(--#{$variable-prefix}tooltip-bg); - border-radius: var(--#{$variable-prefix}tooltip-border-radius, 0); // stylelint-disable-line property-disallowed-list + background-color: var(--#{$prefix}tooltip-bg); + border-radius: var(--#{$prefix}tooltip-border-radius, 0); // stylelint-disable-line property-disallowed-list } diff --git a/scss/_utilities.scss b/scss/_utilities.scss index 49fac65081..3705f92ab3 100644 --- a/scss/_utilities.scss +++ b/scss/_utilities.scss @@ -102,7 +102,7 @@ $utilities: map-merge( "border-opacity": 1 ), values: ( - null: var(--#{$variable-prefix}border-width) var(--#{$variable-prefix}border-style) var(--#{$variable-prefix}border-color), + null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color), 0: 0, ) ), @@ -120,7 +120,7 @@ $utilities: map-merge( "border-top": ( property: border-top, values: ( - null: var(--#{$variable-prefix}border-width) var(--#{$variable-prefix}border-style) var(--#{$variable-prefix}border-color), + null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color), 0: 0, ) ), @@ -128,14 +128,14 @@ $utilities: map-merge( property: border-right, class: border-end, values: ( - null: var(--#{$variable-prefix}border-width) var(--#{$variable-prefix}border-style) var(--#{$variable-prefix}border-color), + null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color), 0: 0, ) ), "border-bottom": ( property: border-bottom, values: ( - null: var(--#{$variable-prefix}border-width) var(--#{$variable-prefix}border-style) var(--#{$variable-prefix}border-color), + null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color), 0: 0, ) ), @@ -143,7 +143,7 @@ $utilities: map-merge( property: border-left, class: border-start, values: ( - null: var(--#{$variable-prefix}border-width) var(--#{$variable-prefix}border-style) var(--#{$variable-prefix}border-color), + null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color), 0: 0, ) ), @@ -457,7 +457,7 @@ $utilities: map-merge( "font-family": ( property: font-family, class: font, - values: (monospace: var(--#{$variable-prefix}font-monospace)) + values: (monospace: var(--#{$prefix}font-monospace)) ), "font-size": ( rfs: true, @@ -583,7 +583,7 @@ $utilities: map-merge( "gradient": ( property: background-image, class: bg, - values: (gradient: var(--#{$variable-prefix}gradient)) + values: (gradient: var(--#{$prefix}gradient)) ), // scss-docs-start utils-interaction "user-select": ( @@ -601,36 +601,36 @@ $utilities: map-merge( property: border-radius, class: rounded, values: ( - null: $border-radius, + null: var(--#{$prefix}border-radius), 0: 0, - 1: $border-radius-sm, - 2: $border-radius, - 3: $border-radius-lg, - 4: $border-radius-xl, - 5: $border-radius-2xl, + 1: var(--#{$prefix}border-radius-sm), + 2: var(--#{$prefix}border-radius), + 3: var(--#{$prefix}border-radius-lg), + 4: var(--#{$prefix}border-radius-xl), + 5: var(--#{$prefix}border-radius-2xl), circle: 50%, - pill: $border-radius-pill + pill: var(--#{$prefix}border-radius-pill) ) ), "rounded-top": ( property: border-top-left-radius border-top-right-radius, class: rounded-top, - values: (null: $border-radius) + values: (null: var(--#{$prefix}border-radius)) ), "rounded-end": ( property: border-top-right-radius border-bottom-right-radius, class: rounded-end, - values: (null: $border-radius) + values: (null: var(--#{$prefix}border-radius)) ), "rounded-bottom": ( property: border-bottom-right-radius border-bottom-left-radius, class: rounded-bottom, - values: (null: $border-radius) + values: (null: var(--#{$prefix}border-radius)) ), "rounded-start": ( property: border-bottom-left-radius border-top-left-radius, class: rounded-start, - values: (null: $border-radius) + values: (null: var(--#{$prefix}border-radius)) ), // scss-docs-end utils-border-radius // scss-docs-start utils-visibility diff --git a/scss/_variables.scss b/scss/_variables.scss index 101905c22c..dc491087e4 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -352,7 +352,8 @@ $enable-important-utilities: true !default; // Prefix for :root CSS variables -$variable-prefix: bs- !default; +$variable-prefix: bs- !default; // Deprecated in v5.2.0 for the shorter `$prefix` +$prefix: $variable-prefix !default; // Gradient // @@ -484,6 +485,7 @@ $border-widths: ( 5: 5px ) !default; +$border-style: solid !default; $border-color: rgba($black, .15) !default; // scss-docs-end border-variables @@ -539,8 +541,8 @@ $aspect-ratios: ( $font-family-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default; $font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default; // stylelint-enable value-keyword-case -$font-family-base: var(--#{$variable-prefix}font-sans-serif) !default; -$font-family-code: var(--#{$variable-prefix}font-monospace) !default; +$font-family-base: var(--#{$prefix}font-sans-serif) !default; +$font-family-code: var(--#{$prefix}font-monospace) !default; // $font-size-root affects the value of `rem`, which is used for as well font sizes, paddings, and margins // $font-size-base affects the font size of the body text @@ -612,7 +614,7 @@ $small-font-size: .875em !default; $sub-sup-font-size: .75em !default; -$text-muted: rgba(var(--#{$variable-prefix}body-color-rgb), .75) !default; +$text-muted: rgba(var(--#{$prefix}body-color-rgb), .75) !default; $initialism-font-size: $small-font-size !default; @@ -630,22 +632,19 @@ $hr-height: null !default; // Deprecated in v5.2.0 // fusv-enable $hr-border-color: null !default; // Allows for inherited colors -$hr-border-width: var(--#{$variable-prefix}border-width) !default; +$hr-border-width: var(--#{$prefix}border-width) !default; $hr-opacity: .25 !default; $legend-margin-bottom: .5rem !default; $legend-font-size: 1.5rem !default; $legend-font-weight: null !default; -$mark-padding: .2em !default; - $dt-font-weight: $font-weight-bold !default; -$nested-kbd-font-weight: $font-weight-bold !default; - $list-inline-padding: .5rem !default; -$mark-bg: #fcf8e3 !default; +$mark-padding: .1875em !default; +$mark-bg: $yellow-100 !default; // scss-docs-end type-variables @@ -661,7 +660,7 @@ $table-cell-padding-x-sm: .25rem !default; $table-cell-vertical-align: top !default; -$table-color: $body-color !default; +$table-color: var(--#{$prefix}body-color) !default; $table-bg: transparent !default; $table-accent-bg: transparent !default; @@ -680,8 +679,8 @@ $table-hover-bg-factor: .075 !default; $table-hover-bg: rgba($black, $table-hover-bg-factor) !default; $table-border-factor: .1 !default; -$table-border-width: $border-width !default; -$table-border-color: $border-color !default; +$table-border-width: var(--#{$prefix}border-width) !default; +$table-border-color: var(--#{$prefix}border-color) !default; $table-striped-order: odd !default; $table-striped-columns-order: even !default; @@ -1062,14 +1061,14 @@ $nav-link-transition: color .15s ease-in-out, background-color .15 $nav-link-disabled-color: $gray-600 !default; $nav-tabs-border-color: $gray-300 !default; -$nav-tabs-border-radius: $border-radius !default; -$nav-tabs-border-width: var(--#{$variable-prefix}border-width) !default; +$nav-tabs-border-width: var(--#{$prefix}border-width) !default; +$nav-tabs-border-radius: var(--#{$prefix}border-radius) !default; $nav-tabs-link-hover-border-color: $gray-200 $gray-200 $nav-tabs-border-color !default; $nav-tabs-link-active-color: $gray-700 !default; $nav-tabs-link-active-bg: $body-bg !default; $nav-tabs-link-active-border-color: $gray-300 $gray-300 $nav-tabs-link-active-bg !default; -$nav-pills-border-radius: $border-radius !default; +$nav-pills-border-radius: var(--#{$prefix}border-radius) !default; $nav-pills-link-active-color: $component-active-color !default; $nav-pills-link-active-bg: $component-active-bg !default; // scss-docs-end nav-variables @@ -1133,8 +1132,8 @@ $dropdown-font-size: $font-size-base !default; $dropdown-color: $body-color !default; $dropdown-bg: $white !default; $dropdown-border-color: rgba($black, .15) !default; -$dropdown-border-radius: $border-radius !default; -$dropdown-border-width: var(--#{$variable-prefix}border-width) !default; +$dropdown-border-radius: var(--#{$prefix}border-radius) !default; +$dropdown-border-width: var(--#{$prefix}border-width) !default; $dropdown-inner-border-radius: subtract($dropdown-border-radius, $dropdown-border-width) !default; $dropdown-divider-bg: $dropdown-border-color !default; $dropdown-divider-margin-y: $spacer * .5 !default; @@ -1189,7 +1188,7 @@ $pagination-padding-x-lg: 1.5rem !default; $pagination-color: $link-color !default; $pagination-bg: $white !default; $pagination-border-radius: $border-radius !default; -$pagination-border-width: var(--#{$variable-prefix}border-width) !default; +$pagination-border-width: var(--#{$prefix}border-width) !default; $pagination-margin-start: calc($pagination-border-width * -1) !default; // stylelint-disable-line function-disallowed-list $pagination-border-color: $gray-300 !default; @@ -1212,8 +1211,8 @@ $pagination-disabled-border-color: $gray-300 !default; $pagination-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default; -$pagination-border-radius-sm: $border-radius-sm !default; -$pagination-border-radius-lg: $border-radius-lg !default; +$pagination-border-radius-sm: var(--#{$prefix}border-radius-sm) !default; +$pagination-border-radius-lg: var(--#{$prefix}border-radius-lg) !default; // scss-docs-end pagination-variables @@ -1230,9 +1229,9 @@ $placeholder-opacity-min: .2 !default; $card-spacer-y: $spacer !default; $card-spacer-x: $spacer !default; $card-title-spacer-y: $spacer * .5 !default; -$card-border-radius: $border-radius !default; -$card-border-width: var(--#{$variable-prefix}border-width) !default; -$card-border-color: var(--#{$variable-prefix}border-color) !default; +$card-border-width: var(--#{$prefix}border-width) !default; +$card-border-color: var(--#{$prefix}border-color) !default; +$card-border-radius: var(--#{$prefix}border-radius) !default; $card-box-shadow: null !default; $card-inner-border-radius: subtract($card-border-radius, $card-border-width) !default; $card-cap-padding-y: $card-spacer-y * .5 !default; @@ -1253,9 +1252,9 @@ $accordion-padding-y: 1rem !default; $accordion-padding-x: 1.25rem !default; $accordion-color: $body-color !default; $accordion-bg: $body-bg !default; -$accordion-border-radius: $border-radius !default; -$accordion-border-width: var(--#{$variable-prefix}border-width) !default; -$accordion-border-color: var(--#{$variable-prefix}border-color) !default; +$accordion-border-width: var(--#{$prefix}border-width) !default; +$accordion-border-color: var(--#{$prefix}border-color) !default; +$accordion-border-radius: var(--#{$prefix}border-radius) !default; $accordion-inner-border-radius: subtract($accordion-border-radius, $accordion-border-width) !default; $accordion-body-padding-y: $accordion-padding-y !default; @@ -1289,7 +1288,7 @@ $tooltip-font-size: $font-size-sm !default; $tooltip-max-width: 200px !default; $tooltip-color: $white !default; $tooltip-bg: $black !default; -$tooltip-border-radius: $border-radius !default; +$tooltip-border-radius: var(--#{$prefix}border-radius) !default; $tooltip-opacity: .9 !default; $tooltip-padding-y: $spacer * .25 !default; $tooltip-padding-x: $spacer * .5 !default; @@ -1319,9 +1318,9 @@ $form-feedback-tooltip-border-radius: $tooltip-border-radius !default; $popover-font-size: $font-size-sm !default; $popover-bg: $white !default; $popover-max-width: 276px !default; -$popover-border-width: var(--#{$variable-prefix}border-width) !default; +$popover-border-width: var(--#{$prefix}border-width) !default; $popover-border-color: rgba($black, .2) !default; -$popover-border-radius: $border-radius-lg !default; +$popover-border-radius: var(--#{$prefix}border-radius-lg) !default; $popover-inner-border-radius: subtract($popover-border-radius, $popover-border-width) !default; $popover-box-shadow: $box-shadow !default; @@ -1354,9 +1353,9 @@ $toast-padding-y: .5rem !default; $toast-font-size: .875rem !default; $toast-color: null !default; $toast-background-color: rgba($white, .85) !default; -$toast-border-radius: $border-radius !default; -$toast-border-width: var(--#{$variable-prefix}border-width) !default; -$toast-border-color: var(--#{$variable-prefix}border-color) !default; +$toast-border-width: var(--#{$prefix}border-width) !default; +$toast-border-color: var(--#{$prefix}border-color) !default; +$toast-border-radius: var(--#{$prefix}border-radius) !default; $toast-box-shadow: $box-shadow !default; $toast-spacing: $container-padding-x !default; @@ -1374,7 +1373,7 @@ $badge-font-weight: $font-weight-bold !default; $badge-color: $white !default; $badge-padding-y: .35em !default; $badge-padding-x: .65em !default; -$badge-border-radius: $border-radius !default; +$badge-border-radius: var(--#{$prefix}border-radius) !default; // scss-docs-end badge-variables @@ -1392,16 +1391,16 @@ $modal-title-line-height: $line-height-base !default; $modal-content-color: null !default; $modal-content-bg: $white !default; -$modal-content-border-radius: $border-radius-lg !default; -$modal-content-border-color: var(--#{$variable-prefix}border-color) !default; -$modal-content-border-width: var(--#{$variable-prefix}border-width) !default; +$modal-content-border-color: var(--#{$prefix}border-color) !default; +$modal-content-border-width: var(--#{$prefix}border-width) !default; +$modal-content-border-radius: var(--#{$prefix}border-radius-lg) !default; $modal-content-inner-border-radius: subtract($modal-content-border-radius, $modal-content-border-width) !default; $modal-content-box-shadow-xs: $box-shadow-sm !default; $modal-content-box-shadow-sm-up: $box-shadow !default; $modal-backdrop-bg: $black !default; $modal-backdrop-opacity: .5 !default; -$modal-header-border-color: var(--#{$variable-prefix}border-color) !default; +$modal-header-border-color: var(--#{$prefix}border-color) !default; $modal-footer-border-color: $modal-header-border-color !default; $modal-header-border-width: $modal-content-border-width !default; $modal-footer-border-width: $modal-header-border-width !default; @@ -1430,7 +1429,7 @@ $modal-scale-transform: scale(1.02) !default; $alert-padding-y: $spacer !default; $alert-padding-x: $spacer !default; $alert-margin-bottom: 1rem !default; -$alert-border-radius: $border-radius !default; +$alert-border-radius: var(--#{$prefix}border-radius) !default; $alert-link-font-weight: $font-weight-bold !default; $alert-border-width: $border-width !default; $alert-bg-scale: -80% !default; @@ -1446,7 +1445,7 @@ $alert-dismissible-padding-r: $alert-padding-x * 3 !default; // 3x covers widt $progress-height: 1rem !default; $progress-font-size: $font-size-base * .75 !default; $progress-bg: $gray-200 !default; -$progress-border-radius: $border-radius !default; +$progress-border-radius: var(--#{$prefix}border-radius) !default; $progress-box-shadow: $box-shadow-inset !default; $progress-bar-color: $white !default; $progress-bar-bg: $primary !default; @@ -1461,8 +1460,8 @@ $progress-bar-transition: width .6s ease !default; $list-group-color: $gray-900 !default; $list-group-bg: $white !default; $list-group-border-color: rgba($black, .125) !default; -$list-group-border-radius: $border-radius !default; -$list-group-border-width: var(--#{$variable-prefix}border-width) !default; +$list-group-border-width: var(--#{$prefix}border-width) !default; +$list-group-border-radius: var(--#{$prefix}border-radius) !default; $list-group-item-padding-y: $spacer * .5 !default; $list-group-item-padding-x: $spacer !default; @@ -1490,9 +1489,9 @@ $list-group-action-active-bg: $gray-200 !default; // scss-docs-start thumbnail-variables $thumbnail-padding: .25rem !default; $thumbnail-bg: $body-bg !default; -$thumbnail-border-radius: $border-radius !default; -$thumbnail-border-width: var(--#{$variable-prefix}border-width) !default; -$thumbnail-border-color: var(--#{$variable-prefix}border-color) !default; +$thumbnail-border-width: var(--#{$prefix}border-width) !default; +$thumbnail-border-color: var(--#{$prefix}border-color) !default; +$thumbnail-border-radius: var(--#{$prefix}border-radius) !default; $thumbnail-box-shadow: $box-shadow-sm !default; // scss-docs-end thumbnail-variables @@ -1614,10 +1613,11 @@ $offcanvas-backdrop-opacity: $modal-backdrop-opacity !default; $code-font-size: $small-font-size !default; $code-color: $pink !default; -$kbd-padding-y: .2rem !default; -$kbd-padding-x: .4rem !default; +$kbd-padding-y: .1875rem !default; +$kbd-padding-x: .375rem !default; $kbd-font-size: $code-font-size !default; -$kbd-color: $white !default; -$kbd-bg: $gray-900 !default; +$kbd-color: var(--#{$prefix}body-bg) !default; +$kbd-bg: var(--#{$prefix}body-color) !default; +$nested-kbd-font-weight: null !default; // Deprecated in v5.2.0, removing in v6 $pre-color: null !default; diff --git a/scss/forms/_form-check.scss b/scss/forms/_form-check.scss index 8e7cbed43c..90bc561177 100644 --- a/scss/forms/_form-check.scss +++ b/scss/forms/_form-check.scss @@ -65,7 +65,7 @@ &[type="checkbox"] { @if $enable-gradients { - background-image: escape-svg($form-check-input-checked-bg-image), var(--#{$variable-prefix}gradient); + background-image: escape-svg($form-check-input-checked-bg-image), var(--#{$prefix}gradient); } @else { background-image: escape-svg($form-check-input-checked-bg-image); } @@ -73,7 +73,7 @@ &[type="radio"] { @if $enable-gradients { - background-image: escape-svg($form-check-radio-checked-bg-image), var(--#{$variable-prefix}gradient); + background-image: escape-svg($form-check-radio-checked-bg-image), var(--#{$prefix}gradient); } @else { background-image: escape-svg($form-check-radio-checked-bg-image); } @@ -85,7 +85,7 @@ border-color: $form-check-input-indeterminate-border-color; @if $enable-gradients { - background-image: escape-svg($form-check-input-indeterminate-bg-image), var(--#{$variable-prefix}gradient); + background-image: escape-svg($form-check-input-indeterminate-bg-image), var(--#{$prefix}gradient); } @else { background-image: escape-svg($form-check-input-indeterminate-bg-image); } @@ -136,7 +136,7 @@ background-position: $form-switch-checked-bg-position; @if $enable-gradients { - background-image: escape-svg($form-switch-checked-bg-image), var(--#{$variable-prefix}gradient); + background-image: escape-svg($form-switch-checked-bg-image), var(--#{$prefix}gradient); } @else { background-image: escape-svg($form-switch-checked-bg-image); } diff --git a/scss/helpers/_ratio.scss b/scss/helpers/_ratio.scss index 2390ee3394..b6a7654c52 100644 --- a/scss/helpers/_ratio.scss +++ b/scss/helpers/_ratio.scss @@ -6,7 +6,7 @@ &::before { display: block; - padding-top: var(--#{$variable-prefix}aspect-ratio); + padding-top: var(--#{$prefix}aspect-ratio); content: ""; } @@ -21,6 +21,6 @@ @each $key, $ratio in $aspect-ratios { .ratio-#{$key} { - --#{$variable-prefix}aspect-ratio: #{$ratio}; + --#{$prefix}aspect-ratio: #{$ratio}; } } diff --git a/scss/mixins/_alert.scss b/scss/mixins/_alert.scss index eb84af1289..231f068ec4 100644 --- a/scss/mixins/_alert.scss +++ b/scss/mixins/_alert.scss @@ -1,11 +1,11 @@ // scss-docs-start alert-variant-mixin @mixin alert-variant($background, $border, $color) { - --#{$variable-prefix}alert-color: #{$color}; - --#{$variable-prefix}alert-bg: #{$background}; - --#{$variable-prefix}alert-border-color: #{$border}; + --#{$prefix}alert-color: #{$color}; + --#{$prefix}alert-bg: #{$background}; + --#{$prefix}alert-border-color: #{$border}; @if $enable-gradients { - background-image: var(--#{$variable-prefix}gradient); + background-image: var(--#{$prefix}gradient); } .alert-link { diff --git a/scss/mixins/_buttons.scss b/scss/mixins/_buttons.scss index 9a78dddad6..5da4d22324 100644 --- a/scss/mixins/_buttons.scss +++ b/scss/mixins/_buttons.scss @@ -20,20 +20,20 @@ $disabled-border: $border, $disabled-color: color-contrast($disabled-background) ) { - --#{$variable-prefix}btn-color: #{$color}; - --#{$variable-prefix}btn-bg: #{$background}; - --#{$variable-prefix}btn-border-color: #{$border}; - --#{$variable-prefix}btn-hover-color: #{$hover-color}; - --#{$variable-prefix}btn-hover-bg: #{$hover-background}; - --#{$variable-prefix}btn-hover-border-color: #{$hover-border}; - --#{$variable-prefix}btn-focus-shadow-rgb: #{to-rgb(mix($color, $border, 15%))}; - --#{$variable-prefix}btn-active-color: #{$active-color}; - --#{$variable-prefix}btn-active-bg: #{$active-background}; - --#{$variable-prefix}btn-active-border-color: #{$active-border}; - --#{$variable-prefix}btn-active-shadow: #{$btn-active-box-shadow}; - --#{$variable-prefix}btn-disabled-color: #{$disabled-color}; - --#{$variable-prefix}btn-disabled-bg: #{$disabled-background}; - --#{$variable-prefix}btn-disabled-border-color: #{$disabled-border}; + --#{$prefix}btn-color: #{$color}; + --#{$prefix}btn-bg: #{$background}; + --#{$prefix}btn-border-color: #{$border}; + --#{$prefix}btn-hover-color: #{$hover-color}; + --#{$prefix}btn-hover-bg: #{$hover-background}; + --#{$prefix}btn-hover-border-color: #{$hover-border}; + --#{$prefix}btn-focus-shadow-rgb: #{to-rgb(mix($color, $border, 15%))}; + --#{$prefix}btn-active-color: #{$active-color}; + --#{$prefix}btn-active-bg: #{$active-background}; + --#{$prefix}btn-active-border-color: #{$active-border}; + --#{$prefix}btn-active-shadow: #{$btn-active-box-shadow}; + --#{$prefix}btn-disabled-color: #{$disabled-color}; + --#{$prefix}btn-disabled-bg: #{$disabled-background}; + --#{$prefix}btn-disabled-border-color: #{$disabled-border}; } // scss-docs-end btn-variant-mixin @@ -45,27 +45,27 @@ $active-border: $color, $active-color: color-contrast($active-background) ) { - --#{$variable-prefix}btn-color: #{$color}; - --#{$variable-prefix}btn-border-color: #{$color}; - --#{$variable-prefix}btn-hover-color: #{$color-hover}; - --#{$variable-prefix}btn-hover-bg: #{$active-background}; - --#{$variable-prefix}btn-hover-border-color: #{$active-border}; - --#{$variable-prefix}btn-focus-shadow-rgb: #{to-rgb($color)}; - --#{$variable-prefix}btn-active-color: #{$active-color}; - --#{$variable-prefix}btn-active-bg: #{$active-background}; - --#{$variable-prefix}btn-active-border-color: #{$active-border}; - --#{$variable-prefix}btn-active-shadow: #{$btn-active-box-shadow}; - --#{$variable-prefix}btn-disabled-color: #{$color}; - --#{$variable-prefix}btn-disabled-bg: transparent; - --#{$variable-prefix}gradient: none; + --#{$prefix}btn-color: #{$color}; + --#{$prefix}btn-border-color: #{$color}; + --#{$prefix}btn-hover-color: #{$color-hover}; + --#{$prefix}btn-hover-bg: #{$active-background}; + --#{$prefix}btn-hover-border-color: #{$active-border}; + --#{$prefix}btn-focus-shadow-rgb: #{to-rgb($color)}; + --#{$prefix}btn-active-color: #{$active-color}; + --#{$prefix}btn-active-bg: #{$active-background}; + --#{$prefix}btn-active-border-color: #{$active-border}; + --#{$prefix}btn-active-shadow: #{$btn-active-box-shadow}; + --#{$prefix}btn-disabled-color: #{$color}; + --#{$prefix}btn-disabled-bg: transparent; + --#{$prefix}gradient: none; } // scss-docs-end btn-outline-variant-mixin // scss-docs-start btn-size-mixin @mixin button-size($padding-y, $padding-x, $font-size, $border-radius) { - --#{$variable-prefix}btn-padding-y: #{$padding-y}; - --#{$variable-prefix}btn-padding-x: #{$padding-x}; - @include rfs($font-size, --#{$variable-prefix}btn-font-size); - --#{$variable-prefix}btn-border-radius: #{$border-radius}; + --#{$prefix}btn-padding-y: #{$padding-y}; + --#{$prefix}btn-padding-x: #{$padding-x}; + @include rfs($font-size, --#{$prefix}btn-font-size); + --#{$prefix}btn-border-radius: #{$border-radius}; } // scss-docs-end btn-size-mixin diff --git a/scss/mixins/_container.scss b/scss/mixins/_container.scss index 63fddfc1d0..b9f33519e2 100644 --- a/scss/mixins/_container.scss +++ b/scss/mixins/_container.scss @@ -1,11 +1,11 @@ // Container mixins @mixin make-container($gutter: $container-padding-x) { - --#{$variable-prefix}gutter-x: #{$gutter}; - --#{$variable-prefix}gutter-y: 0; + --#{$prefix}gutter-x: #{$gutter}; + --#{$prefix}gutter-y: 0; width: 100%; - padding-right: calc(var(--#{$variable-prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list - padding-left: calc(var(--#{$variable-prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list + padding-right: calc(var(--#{$prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list + padding-left: calc(var(--#{$prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list margin-right: auto; margin-left: auto; } diff --git a/scss/mixins/_gradients.scss b/scss/mixins/_gradients.scss index 44167d1b8b..608e18df2e 100644 --- a/scss/mixins/_gradients.scss +++ b/scss/mixins/_gradients.scss @@ -5,7 +5,7 @@ background-color: $color; @if $enable-gradients { - background-image: var(--#{$variable-prefix}gradient); + background-image: var(--#{$prefix}gradient); } } // scss-docs-end gradient-bg-mixin diff --git a/scss/mixins/_grid.scss b/scss/mixins/_grid.scss index d6ac306b23..e4cebae7cc 100644 --- a/scss/mixins/_grid.scss +++ b/scss/mixins/_grid.scss @@ -3,14 +3,14 @@ // Generate semantic grid columns with these mixins. @mixin make-row($gutter: $grid-gutter-width) { - --#{$variable-prefix}gutter-x: #{$gutter}; - --#{$variable-prefix}gutter-y: 0; + --#{$prefix}gutter-x: #{$gutter}; + --#{$prefix}gutter-y: 0; display: flex; flex-wrap: wrap; // TODO: Revisit calc order after https://github.com/react-bootstrap/react-bootstrap/issues/6039 is fixed - margin-top: calc(-1 * var(--#{$variable-prefix}gutter-y)); // stylelint-disable-line function-disallowed-list - margin-right: calc(-.5 * var(--#{$variable-prefix}gutter-x)); // stylelint-disable-line function-disallowed-list - margin-left: calc(-.5 * var(--#{$variable-prefix}gutter-x)); // stylelint-disable-line function-disallowed-list + margin-top: calc(-1 * var(--#{$prefix}gutter-y)); // stylelint-disable-line function-disallowed-list + margin-right: calc(-.5 * var(--#{$prefix}gutter-x)); // stylelint-disable-line function-disallowed-list + margin-left: calc(-.5 * var(--#{$prefix}gutter-x)); // stylelint-disable-line function-disallowed-list } @mixin make-col-ready() { @@ -22,9 +22,9 @@ flex-shrink: 0; width: 100%; max-width: 100%; // Prevent `.col-auto`, `.col` (& responsive variants) from breaking out the grid - padding-right: calc(var(--#{$variable-prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list - padding-left: calc(var(--#{$variable-prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list - margin-top: var(--#{$variable-prefix}gutter-y); + padding-right: calc(var(--#{$prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list + padding-left: calc(var(--#{$prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list + margin-top: var(--#{$prefix}gutter-y); } @mixin make-col($size: false, $columns: $grid-columns) { @@ -114,12 +114,12 @@ @each $key, $value in $gutters { .g#{$infix}-#{$key}, .gx#{$infix}-#{$key} { - --#{$variable-prefix}gutter-x: #{$value}; + --#{$prefix}gutter-x: #{$value}; } .g#{$infix}-#{$key}, .gy#{$infix}-#{$key} { - --#{$variable-prefix}gutter-y: #{$value}; + --#{$prefix}gutter-y: #{$value}; } } } diff --git a/scss/mixins/_pagination.scss b/scss/mixins/_pagination.scss index 6738dc2a8b..4c178ffad8 100644 --- a/scss/mixins/_pagination.scss +++ b/scss/mixins/_pagination.scss @@ -2,9 +2,9 @@ // scss-docs-start pagination-mixin @mixin pagination-size($padding-y, $padding-x, $font-size, $border-radius) { - --#{$variable-prefix}pagination-padding-x: #{$padding-x}; - --#{$variable-prefix}pagination-padding-y: #{$padding-y}; - @include rfs($font-size, --#{$variable-prefix}pagination-font-size); - --#{$variable-prefix}pagination-border-radius: #{$border-radius}; // stylelint-disable-line custom-property-empty-line-before + --#{$prefix}pagination-padding-x: #{$padding-x}; + --#{$prefix}pagination-padding-y: #{$padding-y}; + @include rfs($font-size, --#{$prefix}pagination-font-size); + --#{$prefix}pagination-border-radius: #{$border-radius}; // stylelint-disable-line custom-property-empty-line-before } // scss-docs-end pagination-mixin diff --git a/scss/mixins/_table-variants.scss b/scss/mixins/_table-variants.scss index cad70a19b1..ae43ec63d9 100644 --- a/scss/mixins/_table-variants.scss +++ b/scss/mixins/_table-variants.scss @@ -7,18 +7,18 @@ $active-bg: mix($color, $background, percentage($table-active-bg-factor)); $border-color: mix($color, $background, percentage($table-border-factor)); - --#{$variable-prefix}table-color: #{$color}; - --#{$variable-prefix}table-bg: #{$background}; - --#{$variable-prefix}table-border-color: #{$border-color}; - --#{$variable-prefix}table-striped-bg: #{$striped-bg}; - --#{$variable-prefix}table-striped-color: #{color-contrast($striped-bg)}; - --#{$variable-prefix}table-active-bg: #{$active-bg}; - --#{$variable-prefix}table-active-color: #{color-contrast($active-bg)}; - --#{$variable-prefix}table-hover-bg: #{$hover-bg}; - --#{$variable-prefix}table-hover-color: #{color-contrast($hover-bg)}; + --#{$prefix}table-color: #{$color}; + --#{$prefix}table-bg: #{$background}; + --#{$prefix}table-border-color: #{$border-color}; + --#{$prefix}table-striped-bg: #{$striped-bg}; + --#{$prefix}table-striped-color: #{color-contrast($striped-bg)}; + --#{$prefix}table-active-bg: #{$active-bg}; + --#{$prefix}table-active-color: #{color-contrast($active-bg)}; + --#{$prefix}table-hover-bg: #{$hover-bg}; + --#{$prefix}table-hover-color: #{color-contrast($hover-bg)}; - color: var(--#{$variable-prefix}table-color); - border-color: var(--#{$variable-prefix}table-border-color); + color: var(--#{$prefix}table-color); + border-color: var(--#{$prefix}table-border-color); } } // scss-docs-end table-variant diff --git a/scss/mixins/_utilities.scss b/scss/mixins/_utilities.scss index b2c6683d7d..b02013709a 100644 --- a/scss/mixins/_utilities.scss +++ b/scss/mixins/_utilities.scss @@ -55,12 +55,12 @@ @if $is-css-var { .#{$property-class + $infix + $property-class-modifier} { - --#{$variable-prefix}#{$css-variable-name}: #{$value}; + --#{$prefix}#{$css-variable-name}: #{$value}; } @each $pseudo in $state { .#{$property-class + $infix + $property-class-modifier}-#{$pseudo}:#{$pseudo} { - --#{$variable-prefix}#{$css-variable-name}: #{$value}; + --#{$prefix}#{$css-variable-name}: #{$value}; } } } @else { @@ -68,7 +68,7 @@ @each $property in $properties { @if $is-local-vars { @each $local-var, $variable in $is-local-vars { - --#{$variable-prefix}#{$local-var}: #{$variable}; + --#{$prefix}#{$local-var}: #{$variable}; } } #{$property}: $value if($enable-important-utilities, !important, null); diff --git a/site/assets/scss/_component-examples.scss b/site/assets/scss/_component-examples.scss index 31a5063a7c..1c789a8ff9 100644 --- a/site/assets/scss/_component-examples.scss +++ b/site/assets/scss/_component-examples.scss @@ -194,7 +194,7 @@ width: 10rem; color: $gray-600; background-color: $gray-100; - border: var(--#{$variable-prefix}border-width) solid var(--#{$variable-prefix}border-color); + border: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color); > div { display: flex; @@ -280,7 +280,7 @@ .bd-example-border-utils-0 { [class^="border"] { - border: var(--#{$variable-prefix}border-width) solid var(--#{$variable-prefix}border-color); + border: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color); } } diff --git a/site/content/docs/5.1/customize/css-variables.md b/site/content/docs/5.1/customize/css-variables.md index 06a4cbdb98..13142f6ad7 100644 --- a/site/content/docs/5.1/customize/css-variables.md +++ b/site/content/docs/5.1/customize/css-variables.md @@ -40,7 +40,7 @@ Whenever possible, we'll assign CSS variables at the base component level (e.g., Most CSS variables use a prefix to avoid collisions with your own codebase. This prefix is in addition to the `--` that's required on every CSS variable. -Customize the prefix via the `$variable-prefix` Sass variable. By default, it's set to `bs-` (note the trailing dash). +Customize the prefix via the `$prefix` Sass variable. By default, it's set to `bs-` (note the trailing dash). ## Examples |