diff --git a/scss/_variables.scss b/scss/_variables.scss index 157ddbab23b0..eb9bdc68218e 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 a457b6bdb490..485f76c76826 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; + } } } diff --git a/site/_includes/callout-info-prefersreducedmotion.md b/site/_includes/callout-info-prefersreducedmotion.md new file mode 100644 index 000000000000..9c30903769e1 --- /dev/null +++ b/site/_includes/callout-info-prefersreducedmotion.md @@ -0,0 +1,4 @@ +{% capture callout %} +The animation effect of this component is dependent on the `prefers-reduced-motion` media query. See the [reduced motion section of our accessibility documentation]({{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/accessibility/#reduced-motion). +{% endcapture %} +{% include callout.html content=callout type="info" %} diff --git a/site/docs/4.1/components/carousel.md b/site/docs/4.1/components/carousel.md index b568a02cd585..8ba5c07eaf26 100644 --- a/site/docs/4.1/components/carousel.md +++ b/site/docs/4.1/components/carousel.md @@ -12,6 +12,8 @@ The carousel is a slideshow for cycling through a series of content, built with In browsers where the [Page Visibility API](https://www.w3.org/TR/page-visibility/) is supported, the carousel will avoid sliding when the webpage is not visible to the user (such as when the browser tab is inactive, the browser window is minimized, etc.). +{% include callout-info-prefersreducedmotion.md %} + Please be aware that nested carousels are not supported, and carousels are generally not compliant with accessibility standards. Lastly, if you're building our JavaScript from source, it [requires `util.js`]({{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/javascript/#util). diff --git a/site/docs/4.1/components/collapse.md b/site/docs/4.1/components/collapse.md index 6ede6e4b5d32..59faa7331a0d 100644 --- a/site/docs/4.1/components/collapse.md +++ b/site/docs/4.1/components/collapse.md @@ -10,6 +10,8 @@ toc: true The collapse JavaScript plugin is used to show and hide content. Buttons or anchors are used as triggers that are mapped to specific elements you toggle. Collapsing an element will animate the `height` from its current value to `0`. Given how CSS handles animations, you cannot use `padding` on a `.collapse` element. Instead, use the class as an independent wrapping element. +{% include callout-info-prefersreducedmotion.md %} + ## Example Click the buttons below to show and hide another element via class changes: diff --git a/site/docs/4.1/components/modal.md b/site/docs/4.1/components/modal.md index a29347b6f35e..86996ecda431 100644 --- a/site/docs/4.1/components/modal.md +++ b/site/docs/4.1/components/modal.md @@ -23,6 +23,8 @@ $('#myModal').on('shown.bs.modal', function () { }) {% endhighlight %} +{% include callout-info-prefersreducedmotion.md %} + Keep reading for demos and usage guidelines. ## Examples diff --git a/site/docs/4.1/components/navbar.md b/site/docs/4.1/components/navbar.md index d5684369133c..61c807114690 100644 --- a/site/docs/4.1/components/navbar.md +++ b/site/docs/4.1/components/navbar.md @@ -17,6 +17,8 @@ Here's what you need to know before getting started with the navbar: - Navbars are hidden by default when printing. Force them to be printed by adding `.d-print` to the `.navbar`. See the [display]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/display/) utility class. - Ensure accessibility by using a `