diff options
Diffstat (limited to 'scss')
| -rw-r--r-- | scss/_reboot.scss | 11 | ||||
| -rw-r--r-- | scss/_variables.scss | 8 | ||||
| -rw-r--r-- | scss/mixins/_transition.scss | 15 |
3 files changed, 32 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; } } } |