From cd7e5d111102e4422858aa6f255dc243b4cca1ca Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ga=C3=ABl=20Poupard?= <ffoodd@users.noreply.github.com>
Date: Fri, 14 Feb 2020 20:50:50 +0100
Subject: =?UTF-8?q?Placeholder=20for=20transitions=20reset=20to=20prevent?=
 =?UTF-8?q?=20code=20duplication=E2=80=A6=20(#29870)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Martijn Cuppens <martijn.cuppens@gmail.com>
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
---
 scss/_reboot.scss            | 11 +++++++++++
 scss/_variables.scss         |  8 ++++++++
 scss/mixins/_transition.scss | 15 +++++++++++++--
 3 files changed, 32 insertions(+), 2 deletions(-)

(limited to 'scss')

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;
     }
   }
 }
-- 
cgit v1.2.3