Placeholder for transitions reset to prevent code duplication… (#29870)

Co-authored-by: Martijn Cuppens <martijn.cuppens@gmail.com>
Co-authored-by: XhmikosR <xhmikosr@gmail.com>

diff --git a/scss/_reboot.scss b/scss/_reboot.scss
index e6be84e40f1a20becfd8b62d74254e3c659d1d22..e05b541fd4fddec8d740fca7bf84458968ea198d 100644 (file)
--- 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 c32c634de2ddbd580e848b2a55cb21da31e45d6e..5c24269e2b0eb6ae3b3b16ce1ebce55c68668405 100644 (file)
--- 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 8ce35a6b836cb212af9cc5045796fcc0adce419b..43843e3f243d3ae147aab2fe9dedca1123b41566 100644 (file)
--- 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 53622b9c2c83491db6f070a64ad1739bd21485fd..67e8413bd08ca12f582c4de122f16e70c6bc496e 100644 (file)
--- 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 4a5d43ede5b3b7fc83b2d4f1fec237e0cb32296f..6517b664d31dc5c0ef57323494da110334cc65ea 100644 (file)
--- 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