Make WordPress Core


Ignore:
Timestamp:
03/10/2022 05:19:50 AM (2 years ago)
Author:
peterwilsoncc
Message:

Twenty Twenty-One: Reverse logic for prefers-reduced-motion media query.

Reverse the logic of the prefers-reduced-motion to enable transitions based on no-preference rather than disable them based on the reduce preference. This removes the need to disable transitions with the ! important tag and unintended interactions with plugins as a result.

Props gregoiresailland, sabernhardt, ryokuhi.
Fixes #54174.

File:
1 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-content/themes/twentytwentyone/assets/sass/06-components/navigation.scss

    r50026 r52835  
    102102        padding-bottom: var(--global--spacing-horizontal);
    103103        background-color: var(--global--color-background);
    104         transition: all .15s ease-in-out;
    105104        transform: translateY(var(--global--spacing-vertical));
     105
     106        @media (prefers-reduced-motion: no-preference) {
     107            transition: all .15s ease-in-out;
     108        }
    106109
    107110        @include media(mobile-only) {
     
    280283
    281284            @include media(mobile) {
     285                @media (prefers-reduced-motion: no-preference) {
     286                    transition: all 0.5s ease;
     287                }
     288            }
     289
     290            @include media(mobile) {
    282291                left: 0;
    283292                margin: 0;
     
    286295                top: 100%;
    287296                padding-top: 3px;
    288                 transition: all 0.5s ease;
    289297                z-index: 88888;
    290298
Note: See TracChangeset for help on using the changeset viewer.