diff options
| -rw-r--r-- | scss/_reboot.scss | 11 | ||||
| -rw-r--r-- | scss/_variables.scss | 8 | ||||
| -rw-r--r-- | scss/mixins/_transition.scss | 15 | ||||
| -rw-r--r-- | site/assets/scss/docs.scss | 9 | ||||
| -rw-r--r-- | site/content/docs/4.3/migration.md | 1 |
5 files changed, 42 insertions, 2 deletions
diff --git a/scss/_reboot.scss b/scss/_reboot.scss index e6be84e40..e05b541fd 100644 --- a/scss/_reboot.scss +++ b/scss/_reboot.scss @@ -583,3 +583,14 @@ main { [hidden] { display: none !important; } + +// Placeholder used to reset transitions, when user prefers reduced motion + +@if $enable-prefers-reduced-motion-media-query { + @media (prefers-reduced-motion: reduce) { + %no-transition { + // stylelint-disable-next-line property-blacklist + transition: none !important; + } + } +} diff --git a/scss/_variables.scss b/scss/_variables.scss index c32c634de..5c24269e2 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -212,6 +212,14 @@ $escaped-characters: ( (")","%29"), ) !default; +// Selectors which are isolated in the transition mixin to prevent invalid selector stack +$pseudo-vendor-prefixes: ( + "::-webkit-", + "::-moz-", + "::-ms-" +) !default; + + // Options // // Quickly modify global styling by enabling or disabling optional features. diff --git a/scss/mixins/_transition.scss b/scss/mixins/_transition.scss index 8ce35a6b8..43843e3f2 100644 --- a/scss/mixins/_transition.scss +++ b/scss/mixins/_transition.scss @@ -9,8 +9,19 @@ } @if $enable-prefers-reduced-motion-media-query { - @media (prefers-reduced-motion: reduce) { - transition: none; + $isolate: false; + @each $selector in $pseudo-vendor-prefixes { + @if str-index(quote(#{&}), $selector) { + $isolate: true; + } + } + + @if $isolate { + @media (prefers-reduced-motion: reduce) { + transition: none; + } + } @else { + @extend %no-transition; } } } diff --git a/site/assets/scss/docs.scss b/site/assets/scss/docs.scss index 53622b9c2..67e8413bd 100644 --- a/site/assets/scss/docs.scss +++ b/site/assets/scss/docs.scss @@ -51,3 +51,12 @@ @import "syntax"; @import "anchor"; @import "algolia"; + +@if $enable-prefers-reduced-motion-media-query { + @media (prefers-reduced-motion: reduce) { + %no-transition { + // stylelint-disable-next-line property-blacklist, declaration-no-important + transition: none !important; + } + } +} diff --git a/site/content/docs/4.3/migration.md b/site/content/docs/4.3/migration.md index 4a5d43ede..6517b664d 100644 --- a/site/content/docs/4.3/migration.md +++ b/site/content/docs/4.3/migration.md @@ -41,6 +41,7 @@ Changes to our source Sass files and compiled CSS. - Line heights are dropped from several components to simplify our codebase. The `button-size()` and `pagination-size()` do not accept line height parameters anymore. [See #29271](https://github.com/twbs/bootstrap/pull/29271) - The `button-variant()` mixin now accepts 3 optional color parameters, for each button state, to override the color provided by `color-yiq()`. By default, these parameters will find which color provides more contrast against the button state's background color with `color-yiq()`. - The `button-outline-variant()` mixin now accepts an additional argument, `$active-color`, for setting the button's active state text color. By default, this parameter will find which color provides more contrast against the button's active background color with `color-yiq()`. +- The `transition()` mixin now extends `%no-transition` placeholder to handle `prefers-reduced-motion` media query-except vendor prefixes listed in new `$pseudo-vendor-prefixes` variable. [See #29870](https://github.com/twbs/bootstrap/pull/29870/) ## JavaScript |