Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

SCSS: remove $boosted-prefix in favor of $prefix #2129

Merged
merged 6 commits into from
Jul 11, 2023
Merged

SCSS: remove $boosted-prefix in favor of $prefix #2129

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
78778c5
wip
louismaximepiton Jul 5, 2023
3157b71
wip
louismaximepiton Jul 5, 2023
a6c394c
Update migration guide
louismaximepiton Jul 5, 2023
e56fa6f
Merge branch 'main' into main-lmp-homogenize-prefix
julien-deramond Jul 11, 2023
b283fd5
Change some --o-* to --bs-*
julien-deramond Jul 11, 2023
5f961d1
fix(review)
louismaximepiton Jul 11, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion js/src/carousel.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,7 @@ const SELECTOR_CAROUSEL_PAUSE_TEXT = 'data-bs-pause-text' // Boosted mod
const SELECTOR_CAROUSEL_DEFAULT_PLAY_TEXT = 'Play Carousel' // Boosted mod
const SELECTOR_CAROUSEL_DEFAULT_PAUSE_TEXT = 'Pause Carousel' // Boosted mod

const PREFIX_CUSTOM_PROPS = 'o-' // Boosted mod: should match `$boosted-prefix` in scss/_variables.scss
const PREFIX_CUSTOM_PROPS = 'bs-' // Boosted mod: should match `$prefix` in scss/_variables.scss

const KEY_TO_DIRECTION = {
[ARROW_LEFT_KEY]: DIRECTION_RIGHT,
Expand Down
6 changes: 3 additions & 3 deletions js/tests/unit/carousel.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1619,7 +1619,7 @@ describe('Carousel', () => {
})

// Boosted mod
it('should set --o-carousel-interval custom property on indicator if data-bs-interval is provided', () => {
it('should set --bs-carousel-interval custom property on indicator if data-bs-interval is provided', () => {
fixtureEl.innerHTML = [
'<div id="myCarousel" class="carousel slide">',
' <ol class="carousel-indicators">',
Expand All @@ -1642,12 +1642,12 @@ describe('Carousel', () => {
const carousel = new Carousel(carouselEl)
carousel.cycle()

expect(firstIndicator.style.getPropertyValue('--o-carousel-interval')).toEqual('7ms')
expect(firstIndicator.style.getPropertyValue('--bs-carousel-interval')).toEqual('7ms')

carousel._activeElement = secondItemEl
carousel.cycle()

expect(secondIndicator.style.getPropertyValue('--o-carousel-interval')).toEqual('9385ms')
expect(secondIndicator.style.getPropertyValue('--bs-carousel-interval')).toEqual('9385ms')
})
// End mod
})
Expand Down
2 changes: 1 addition & 1 deletion scss/_alert.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -141,7 +141,7 @@
--#{$prefix}alert-icon-size: #{$alert-icon-size-sm};
--#{$prefix}alert-btn-close-offset: #{$alert-btn-close-offset-sm};
// scss-docs-end alert-sm-css-vars
--#{$boosted-prefix}icon-spacing: #{$btn-close-padding-sm};
--#{$prefix}icon-spacing: #{$btn-close-padding-sm};
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
--#{$prefix}icon-spacing: #{$btn-close-padding-sm};
--#{$prefix}btn-icon-spacing: #{$btn-close-padding-sm};


.alert-icon {
margin: var(--#{$prefix}alert-icon-margin-y) 0;
Expand Down
14 changes: 7 additions & 7 deletions scss/_buttons.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
--#{$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} var(--#{$prefix}btn-focus-shadow-rgb); // Boosted mod
--#{$boosted-prefix}icon-spacing: #{$btn-icon-padding-x}; // Boosted mod
--#{$prefix}icon-spacing: #{$btn-icon-padding-x}; // Boosted mod
// scss-docs-end btn-css-vars

display: inline-flex; // Boosted mod
Expand Down Expand Up @@ -222,23 +222,23 @@

// Boosted mod: icon button
.btn-icon {
padding: var(--#{$boosted-prefix}icon-spacing);
padding: var(--#{$prefix}icon-spacing);
}
// End mod

// Boosted mod: social button
.btn-social {
--#{$prefix}btn-border-color: currentcolor;
--#{$prefix}btn-hover-color: #{$white};
--#{$prefix}btn-hover-bg: var(--#{$boosted-prefix}network-color, #{$black});
--#{$prefix}btn-hover-border-color: var(--#{$boosted-prefix}network-color, #{$black});
--#{$prefix}btn-hover-bg: var(--#{$prefix}network-color, #{$black});
--#{$prefix}btn-hover-border-color: var(--#{$prefix}network-color, #{$black});
--#{$prefix}btn-active-color: #{$white};
--#{$prefix}btn-active-bg: #{$black};
--#{$prefix}btn-active-border-color: #{$black};
--#{$prefix}btn-disabled-color: #{$gray-500};
--#{$prefix}btn-disabled-bg: transparent;
@include border-radius(50%, 50%);
@include button-icon(var(--#{$boosted-prefix}network-logo));
@include button-icon(var(--#{$prefix}network-logo));

&.btn-inverse {
--#{$prefix}btn-color: #{$white};
Expand All @@ -253,8 +253,8 @@
$network: map-get($btn-social-networks, $name);

.btn-#{$name} {
--#{$boosted-prefix}network-color: #{map-get($network, "color")};
--#{$boosted-prefix}network-logo: #{escape-svg(url("data:image/svg+xml,#{map-get($network, "icon")}"))};
--#{$prefix}network-color: #{map-get($network, "color")};
--#{$prefix}network-logo: #{escape-svg(url("data:image/svg+xml,#{map-get($network, "icon")}"))};

&::before {
mask-size: if(map-has-key($network, "size"), map-get($network, "size"), null);
Expand Down
8 changes: 4 additions & 4 deletions scss/_carousel.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,7 +86,7 @@

.carousel-control-prev,
.carousel-control-next {
--#{$boosted-prefix}control-bg: #{rgba($carousel-indicator-active-bg, .5)}; // Boosted mod
--#{$prefix}control-bg: #{rgba($carousel-indicator-active-bg, .5)}; // Boosted mod
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
--#{$prefix}control-bg: #{rgba($carousel-indicator-active-bg, .5)}; // Boosted mod
--#{$prefix}carousel-control-bg: #{rgba($carousel-indicator-active-bg, .5)}; // Boosted mod

position: absolute;
top: 0;
bottom: 0;
Expand All @@ -108,7 +108,7 @@

// Hover state - Boosted mod: no focus state
&:hover {
--#{$boosted-prefix}control-bg: #{color-contrast($carousel-indicator-active-bg)}; // Boosted mod
--#{$prefix}control-bg: #{color-contrast($carousel-indicator-active-bg)}; // Boosted mod
color: color-contrast($carousel-control-color);
text-decoration: none;
opacity: $carousel-control-hover-opacity;
Expand All @@ -122,7 +122,7 @@
}

&:active {
--#{$boosted-prefix}control-bg: #{$carousel-control-icon-active-bg};
--#{$prefix}control-bg: #{$carousel-control-icon-active-bg};
color: $carousel-control-color;
}

Expand Down Expand Up @@ -151,7 +151,7 @@
.carousel-control-prev-icon,
.carousel-control-next-icon {
display: inline-block;
background-color: var(--#{$boosted-prefix}control-bg); // Boosted mod
background-color: var(--#{$prefix}control-bg); // Boosted mod
@include button-icon($carousel-control-icon-bg, $carousel-control-icon-width, $size: $carousel-control-icon-size, $position: subtract(50%, $spacer * .1) 50%); // Boosted mod
@include border-radius(50%, 50%);
}
Expand Down
18 changes: 9 additions & 9 deletions scss/_root.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@

// Boosted mod
@each $icon, $svg in $svg-as-custom-props {
--#{$boosted-prefix}#{$icon}-icon: #{escape-svg($svg)};
--#{$prefix}#{$icon}-icon: #{escape-svg($svg)};
}
// End mod

Expand Down Expand Up @@ -151,13 +151,13 @@
--#{$prefix}link-hover-color-rgb: #{to-rgb($link-hover-color-inverted)};
--#{$prefix}focus-visible-inner-color: #{$focus-visible-inner-color-inverted};
--#{$prefix}focus-visible-outer-color: #{$focus-visible-outer-color-inverted};
--#{$boosted-prefix}caption-color: #{$table-caption-color-inverted};
--#{$prefix}caption-color: #{$table-caption-color-inverted};
--#{$prefix}code-color: #{$code-color-inverted};
--#{$prefix}highlight-color: #{$mark-color-inverted};
--#{$prefix}highlight-bg: #{$mark-bg-inverted};
--#{$boosted-prefix}kbd-color: #{$kbd-color-inverted};
--#{$boosted-prefix}kbd-bg: #{$kbd-bg-inverted};
--#{$boosted-prefix}pre-color: #{$pre-color-inverted};
--#{$prefix}kbd-color: #{$kbd-color-inverted};
--#{$prefix}kbd-bg: #{$kbd-bg-inverted};
--#{$prefix}pre-color: #{$pre-color-inverted};

// stylelint-disable-next-line scss/selector-no-redundant-nesting-selector
[class*="bg-"]:not(&):not(.bg-transparent) {
Expand All @@ -168,13 +168,13 @@
--#{$prefix}link-hover-color-rgb: #{to-rgb($link-hover-color)};
--#{$prefix}focus-visible-inner-color: #{$focus-visible-inner-color};
--#{$prefix}focus-visible-outer-color: #{$focus-visible-outer-color};
--#{$boosted-prefix}caption-color: #{$table-caption-color};
--#{$prefix}caption-color: #{$table-caption-color};
--#{$prefix}code-color: #{$code-color};
--#{$prefix}highlight-color: #{$mark-color};
--#{$prefix}highlight-bg: #{$mark-bg};
--#{$boosted-prefix}kbd-color: #{$kbd-color};
--#{$boosted-prefix}kbd-bg: #{$kbd-bg};
--#{$boosted-prefix}pre-color: #{$pre-color};
--#{$prefix}kbd-color: #{$kbd-color};
--#{$prefix}kbd-bg: #{$kbd-bg};
--#{$prefix}pre-color: #{$pre-color};
}
}
// End mod
Expand Down
3 changes: 1 addition & 2 deletions scss/_tags.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,8 +69,7 @@
min-height: subtract(var(--#{$prefix}tag-close-size), .625rem);
content: "";
background-color: currentcolor;
-webkit-mask: escape-svg(var(--#{$boosted-prefix}close-icon)) no-repeat 50% / subtract(var(--#{$prefix}tag-close-size), .625rem); // stylelint-disable-line property-no-vendor-prefix
mask: escape-svg(var(--#{$boosted-prefix}close-icon)) no-repeat 50% / subtract(var(--#{$prefix}tag-close-size), .625rem);
mask: escape-svg(var(--#{$prefix}close-icon)) no-repeat 50% / subtract(var(--#{$prefix}tag-close-size), .625rem);
}

&:hover,
Expand Down
2 changes: 1 addition & 1 deletion scss/_toasts.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@
@include border-top-radius(calc(var(--#{$prefix}toast-border-radius) - var(--#{$prefix}toast-border-width)));

.btn-close {
--#{$boosted-prefix}icon-spacing: #{$btn-close-padding-sm}; // Boosted mod
--#{$prefix}icon-spacing: #{$btn-close-padding-sm}; // Boosted mod
margin-right: calc(-.5 * var(--#{$prefix}toast-padding-x)); // stylelint-disable-line function-disallowed-list
margin-left: var(--#{$prefix}toast-padding-x);
}
Expand Down
36 changes: 19 additions & 17 deletions scss/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -447,8 +447,10 @@ $color-mode-type: data !default; // `data` or `media-query`

$variable-prefix: bs- !default; // Deprecated in v5.2.0 for the shorter `$prefix`
$prefix: $variable-prefix !default;
$boosted-variable-prefix: o- !default; // Deprecated in v5.2.0 for the shorter `$boosted-prefix`
$boosted-prefix: $boosted-variable-prefix !default;
// fusv-disable
$boosted-variable-prefix: o- !default; // Deprecated in v5.2.0 for the shorter `$prefix`
$boosted-prefix: $boosted-variable-prefix !default; // Deprecated in v5.3.0 for the shorter `$prefix`
// fusv-enable

// Gradient
//
Expand Down Expand Up @@ -911,7 +913,7 @@ $table-striped-columns-order: even !default;

$table-group-separator-color: currentcolor !default;

$table-caption-color: var(--#{$boosted-prefix}caption-color, var(--#{$prefix}emphasis-color)) !default; // Boosted mod: instead of `var(--#{$prefix}secondary-color)`
$table-caption-color: var(--#{$prefix}caption-color, var(--#{$prefix}emphasis-color)) !default; // Boosted mod: instead of `var(--#{$prefix}secondary-color)`
$table-caption-color-inverted: var(--#{$prefix}body-bg) !default; // Boosted mod
$table-caption-padding-y: .75rem !default; // Boosted mod

Expand Down Expand Up @@ -1158,7 +1160,7 @@ $form-check-input-focus-box-shadow: $focus-ring-box-shadow !default;
$form-check-input-checked-color: $component-active-color !default;
$form-check-input-checked-bg-color: $component-active-bg !default;
$form-check-input-checked-border-color: $form-check-input-checked-bg-color !default;
$form-check-input-checked-bg-image: var(--#{$boosted-prefix}check-icon) !default;
$form-check-input-checked-bg-image: var(--#{$prefix}check-icon) !default;
$form-check-input-disabled-color: $gray-900 !default; // Boosted mod
$form-check-radio-checked-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='2' fill='#{$form-check-input-checked-color}'/></svg>") !default;

Expand Down Expand Up @@ -1192,7 +1194,7 @@ $form-star-focus-box-shadow: $input-btn-focus-box-shadow !default; // Depre
// Boosted mod: no $form-switch-color
$form-switch-width: $spacer * 3 !default; // Boosted mod
$form-switch-padding-start: $form-switch-width + .625rem !default; // Boosted mod
$form-switch-bg-image: var(--#{$boosted-prefix}close-icon) !default; // Boosted mod
$form-switch-bg-image: var(--#{$prefix}close-icon) !default; // Boosted mod
$form-switch-bg-position: right .5rem top 50% !default; // Boosted mod
$form-switch-bg-size: .75rem !default; // Boosted mod
$form-switch-bg-square-size: add(1rem, $spacer * .5) !default; // Boosted mod
Expand Down Expand Up @@ -1305,8 +1307,8 @@ $form-feedback-valid-color: $success !default; // Boosted mod: deprecate
$form-feedback-invalid-color: $danger !default; // Boosted mod: deprecated in v5.3.0
// fusv-enable

$form-feedback-icon-valid: var(--#{$boosted-prefix}success-icon) !default;
$form-feedback-icon-invalid: var(--#{$boosted-prefix}error-icon) !default;
$form-feedback-icon-valid: var(--#{$prefix}success-icon) !default;
$form-feedback-icon-invalid: var(--#{$prefix}error-icon) !default;
$form-feedback-icon-size: add($spacer * .25, $spacer * .5) !default; // Boosted mod
$form-feedback-line-height: $line-height-sm !default; // Boosted mod
// scss-docs-end form-feedback-variables
Expand Down Expand Up @@ -1608,7 +1610,7 @@ $pagination-transition: $transition-focus !default;

// Boosted mod
$pagination-padding-end: 1.125rem !default;
$pagination-icon: var(--#{$boosted-prefix}chevron-icon) !default;
$pagination-icon: var(--#{$prefix}chevron-icon) !default;
$pagination-icon-size: subtract($spacer * 2, calc(var(--#{$prefix}border-width) * 2)) !default; // stylelint-disable-line function-disallowed-list
$pagination-icon-width: add(.5rem, 1px) !default;
$pagination-icon-height: subtract(1rem, 1px) !default;
Expand Down Expand Up @@ -1927,10 +1929,10 @@ $alert-border-width: var(--#{$prefix}border-width) !default;
// Boosted mod
$alert-padding-sm: $spacer * .5 !default;
$alert-icons: (
"success": var(--#{$boosted-prefix}success-icon),
"success": var(--#{$prefix}success-icon),
"info": escape-svg($info-icon),
"warning": escape-svg($warning-icon),
"danger": var(--#{$boosted-prefix}error-icon)
"danger": var(--#{$prefix}error-icon)
) !default;
$alert-logo-size: add($spacer * .5, 1rem) !default;
$alert-logo-size-sm: add(1rem, 1px) !default;
Expand Down Expand Up @@ -2112,7 +2114,7 @@ $carousel-caption-spacer: $spacer * 3 !default;
$carousel-control-icon-width: 2.5rem !default;
// Boosted mod
$carousel-control-icon-size: 1rem 1.5rem !default;
$carousel-control-icon-bg: var(--#{$boosted-prefix}chevron-icon) !default;
$carousel-control-icon-bg: var(--#{$prefix}chevron-icon) !default;
$carousel-control-icon-active-bg: $component-active-bg !default;

$carousel-control-pause-indicators-spacing: 10px !default;
Expand Down Expand Up @@ -2156,11 +2158,11 @@ $spinner-border-width-lg: calc(var(--#{$prefix}border-width) * 4) !default; // B
// scss-docs-start close-variables
$btn-close-width: $spacer !default; // Boosted mod
$btn-close-height: $btn-close-width !default;
$btn-close-padding: var(--#{$boosted-prefix}icon-spacing, #{$btn-icon-padding-x}) !default; // Boosted mod
$btn-close-padding: var(--#{$prefix}icon-spacing, #{$btn-icon-padding-x}) !default; // Boosted mod
$btn-close-border-width: var(--#{$prefix}border-width) !default; // Boosted mod
$btn-close-border-color: transparent !default; // Boosted mod
$btn-close-color: var(--#{$prefix}emphasis-color) !default;
$btn-close-bg: var(--#{$boosted-prefix}close-icon) !default; // Boosted mod
$btn-close-bg: var(--#{$prefix}close-icon) !default; // Boosted mod
// Boosted mod
// fusv-disable
$btn-close-focus-shadow: $btn-focus-box-shadow !default; // Deprecated in v5.3.0
Expand Down Expand Up @@ -2217,13 +2219,13 @@ $code-color-inverted: $gray-600 !default;
$kbd-padding-y: $spacer * .05 !default;
$kbd-padding-x: $spacer * .05 !default;
$kbd-font-size: $code-font-size !default;
$kbd-color: var(--#{$boosted-prefix}kbd-color, $black) !default;
$kbd-color: var(--#{$prefix}kbd-color, $black) !default;
$kbd-color-inverted: $white !default;
$kbd-bg: var(--#{$boosted-prefix}kbd-bg, $gray-300) !default;
$kbd-bg: var(--#{$prefix}kbd-bg, $gray-300) !default;
$kbd-bg-inverted: $gray-900 !default;
$nested-kbd-font-weight: null !default; // Deprecated in v5.2.0, removing in v6

$pre-color: var(--#{$boosted-prefix}pre-color, $gray-900) !default;
$pre-color: var(--#{$prefix}pre-color, $gray-900) !default;
$pre-color-inverted: $gray-300 !default;
$pre-line-height: 1.25 !default;
// End mod
Expand All @@ -2248,7 +2250,7 @@ $back-to-top-link-offset-top-xl: subtract(100vh, $spacer * 5) !default;
$back-to-top-title-offset-right: add(100%, var(--#{$prefix}border-width)) !default;
$back-to-top-title-padding: subtract($btn-padding-y, 1px) $btn-padding-x add($btn-padding-y, 1px) !default;
$back-to-top-title-bg-color: $white !default;
$back-to-top-icon: var(--#{$boosted-prefix}chevron-icon) !default;
$back-to-top-icon: var(--#{$prefix}chevron-icon) !default;
$back-to-top-icon-width: add(.5rem, 1px) !default;
$back-to-top-icon-height: subtract(1rem, 1px) !default;
// scss-docs-end back-to-top
Expand Down
6 changes: 3 additions & 3 deletions scss/forms/_form-check.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -153,7 +153,7 @@

.form-switch {
// Boosted mod
--#{$boosted-prefix}switch-gradient: #{linear-gradient(to right, $black $form-switch-bg-square-size, transparent)};
--#{$prefix}switch-gradient: #{linear-gradient(to right, $black $form-switch-bg-square-size, transparent)};

min-height: $form-switch-width * .5;
padding-left: $form-switch-padding-start;
Expand All @@ -166,7 +166,7 @@
height: $form-switch-width * .5;
margin-left: $form-switch-padding-start * -1;
background-color: $white; // Boosted mod
background-image: var(--#{$prefix}form-switch-bg), var(--#{$boosted-prefix}switch-gradient); // Boosted mod: extra param `var(--#{$boosted-prefix}switch-gradient)`
background-image: var(--#{$prefix}form-switch-bg), var(--#{$prefix}switch-gradient); // Boosted mod: extra param `var(--#{$prefix}switch-gradient)`
filter: $invert-filter; // Boosted mod
background-position: $form-switch-bg-position, 0 0;
background-size: $form-switch-bg-size, $form-switch-bg-square-size 100%; // Get a 1px separation
Expand Down Expand Up @@ -202,7 +202,7 @@
}

&:not(:disabled) {
--#{$boosted-prefix}switch-gradient: #{linear-gradient(to right, $white $form-switch-bg-square-size, transparent)};
--#{$prefix}switch-gradient: #{linear-gradient(to right, $white $form-switch-bg-square-size, transparent)};
}
}

Expand Down
2 changes: 1 addition & 1 deletion scss/helpers/_chevron-link.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
margin-left: $linked-chevron-margin-left;
vertical-align: middle;
content: "";
background-image: var(--#{$boosted-prefix}chevron-icon);
background-image: var(--#{$prefix}chevron-icon);
background-repeat: no-repeat;
transform: $linked-chevron-transform;
}
Expand Down
3 changes: 1 addition & 2 deletions scss/mixins/_buttons.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@

// scss-docs-start btn-size-mixin
@mixin button-size($padding-y, $padding-x, $font-size, $border-radius, $line-height: null, $icon-spacing: $btn-icon-padding-x, $letter-spacing: $letter-spacing-base) {
--#{$boosted-prefix}icon-spacing: #{$icon-spacing}; // Boosted mod: used for icons
--#{$prefix}icon-spacing: #{$icon-spacing}; // Boosted mod: used for icons
--#{$prefix}btn-padding-y: #{$padding-y};
--#{$prefix}btn-padding-x: #{$padding-x};
@include rfs($font-size, --#{$prefix}btn-font-size);
Expand Down Expand Up @@ -73,7 +73,6 @@
min-height: inherit;
content: "";
background-color: currentcolor;
-webkit-mask: #{$icon} no-repeat #{$position} / #{$size}; // stylelint-disable-line property-no-vendor-prefix
julien-deramond marked this conversation as resolved.
Show resolved Hide resolved
mask: #{$icon} no-repeat #{$position} / #{$size};
}
}
Expand Down
2 changes: 1 addition & 1 deletion site/content/docs/5.3/components/carousel.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@ You can add indicators to the carousel, alongside the previous/next controls. Th

<!-- Boosted mod -->

Indicators are animated to show the active slide progress, based on its interval. It adapts to [any interval you set](#individual-carousel-item-interval) thanks to the `--o-carousel-interval` CSS custom property.
Indicators are animated to show the active slide progress, based on its interval. It adapts to [any interval you set](#individual-carousel-item-interval) thanks to the `--bs-carousel-interval` CSS custom property.
Carousel progress indicator is paused under multiple conditions:

* when the `prefers-reduced-motion` media query equals `reduce` [to improve accessibility]({{< docsref "/getting-started/accessibility#reduced-motion" >}}).
Expand Down
Loading