diff options
| author | Patrick H. Lauke <redux@splintered.co.uk> | 2018-11-03 21:23:26 +0300 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2018-11-03 21:23:26 +0300 |
| commit | 8b20bce873c6dce6a34fa5965481da92121bdc37 (patch) | |
| tree | c2418af1318d9b6212d64a7af3fe1b058c8e643a /scss | |
| parent | f7a4b3976789f1e96bad43ca561ef461f22d6be4 (diff) | |
Add Sass variable for prefers-reduced-motion, add callout to affected components (#27581)
* Tweak the accessibility/reduced motion text
include mention of carousel slides, remove the (now inaccurate, as Firefox 63 includes it too) mention that support is limited to Safari/macOS
xref https://github.com/twbs/bootstrap/issues/27525
* Add new callout for reduced motion
* Add variable to control prefers-reduced-motion media query support
* Add callout about prefers-reduced-motion to all components currently using animation which are affected
Diffstat (limited to 'scss')
| -rw-r--r-- | scss/_variables.scss | 19 | ||||
| -rw-r--r-- | scss/mixins/_transition.scss | 6 |
2 files changed, 14 insertions, 11 deletions
diff --git a/scss/_variables.scss b/scss/_variables.scss index 157ddbab23..eb9bdc6821 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -107,15 +107,16 @@ $yiq-text-light: $white !default; // // Quickly modify global styling by enabling or disabling optional features. -$enable-caret: true !default; -$enable-rounded: true !default; -$enable-shadows: false !default; -$enable-gradients: false !default; -$enable-transitions: true !default; -$enable-hover-media-query: false !default; // Deprecated, no longer affects any compiled CSS -$enable-grid-classes: true !default; -$enable-print-styles: true !default; -$enable-validation-icons: true !default; +$enable-caret: true !default; +$enable-rounded: true !default; +$enable-shadows: false !default; +$enable-gradients: false !default; +$enable-transitions: true !default; +$enable-prefers-reduced-motion-media-query: true !default; +$enable-hover-media-query: false !default; // Deprecated, no longer affects any compiled CSS +$enable-grid-classes: true !default; +$enable-print-styles: true !default; +$enable-validation-icons: true !default; // Spacing diff --git a/scss/mixins/_transition.scss b/scss/mixins/_transition.scss index a457b6bdb4..485f76c768 100644 --- a/scss/mixins/_transition.scss +++ b/scss/mixins/_transition.scss @@ -8,7 +8,9 @@ } } - @media screen and (prefers-reduced-motion: reduce) { - transition: none; + @if $enable-prefers-reduced-motion-media-query { + @media screen and (prefers-reduced-motion: reduce) { + transition: none; + } } } |