mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-29 08:10:47 +02:00
Code Issues Releases Wiki Activity

Add Sass variable for prefers-reduced-motion, add callout to affected components (#27581)

Browse Source 
* 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
This commit is contained in:
Patrick H. Lauke
2018-11-03 19:23:26 +01:00
committed by GitHub
parent f7a4b39767
commit 8b20bce873
11 changed files with 32 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
scss/_variables.scss
View File

@@ -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

6
scss/mixins/_transition.scss
View File

@@ -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;
}
}
}