WordPress.org
Get WordPress

Make WordPress Core

Ticket #54174: 54174.1.patch

File 54174.1.patch, 10.6 KB (added by sabernhardt, 3 years ago)

switching social link transition to SVG instead of a element

  • src/wp-content/themes/twentytwentyone/assets/css/ie.css

     
    59645964        padding-right: 20px;
    59655965        padding-bottom: 25px;
    59665966        background-color: #d1e4dd;
    5967         transition: all 0.15s ease-in-out;
    59685967        transform: translateY(30px);
    59695968}
     5969@media (prefers-reduced-motion: no-preference) {
     5970
     5971        .primary-navigation > .primary-menu-container {
     5972                transition: all 0.15s ease-in-out;
     5973        }
     5974}
    59705975@media only screen and (max-width: 481px) {
    59715976
    59725977        .primary-navigation > .primary-menu-container {
    … …  
    61486153.primary-navigation > div > .menu-wrapper > li > .sub-menu {
    61496154        position: relative;
    61506155}
     6156@media only screen and (min-width: 482px) and (prefers-reduced-motion: no-preference) {
     6157
     6158        .primary-navigation > div > .menu-wrapper > li > .sub-menu {
     6159                transition: all 0.5s ease;
     6160        }
     6161}
    61516162@media only screen and (min-width: 482px) {
    61526163
    61536164        .primary-navigation > div > .menu-wrapper > li > .sub-menu {
    … …  
    61576168                position: absolute;
    61586169                top: 100%;
    61596170                padding-top: 3px;
    6160                 transition: all 0.5s ease;
    61616171                z-index: 88888;
    61626172        }
    61636173
    … …  
    64386448
    64396449.footer-navigation-wrapper li a {
    64406450        padding: 17px 13px;
    6441         transition: transform 0.1s ease;
    64426451        color: #28303d;
    64436452}
    64446453
    … …  
    64776486.footer-navigation-wrapper li .svg-icon:hover {
    64786487        transform: scale(1.1);
    64796488}
     6489@media (prefers-reduced-motion: no-preference) {
    64806490
     6491        .footer-navigation-wrapper li .svg-icon {
     6492                transition: transform 0.1s ease;
     6493        }
     6494}
     6495
    64816496.footer-navigation-wrapper .sub-menu-toggle,
    64826497.footer-navigation-wrapper .menu-item-description {
    64836498        display: none;
    … …  
    69867001        outline: 0;
    69877002}
    69887003
    6989 @media (prefers-reduced-motion) {
    6990 
    6991         * {
    6992                 transition-delay: 0s !important;
    6993                 transition-duration: 0s !important;
    6994         }
    6995 }
    6996 
    69977004.has-black-color[class] {
    69987005        color: #000;
    69997006}

  • src/wp-content/themes/twentytwentyone/assets/css/style-dark-mode-rtl.css

     
    4949                position: fixed;
    5050                bottom: 5px;
    5151                left: 5px;
    52                 transition: bottom 0.5s;
    5352        }
    5453
    5554        #dark-mode-toggler.fixed-bottom.hide:not(:focus) {
    … …  
    106105                display: none;
    107106        }
    108107}
     108@media only screen and (prefers-reduced-motion: no-preference) {
     109
     110        #dark-mode-toggler.fixed-bottom {
     111                transition: bottom 0.5s;
     112        }
     113}

  • src/wp-content/themes/twentytwentyone/assets/css/style-dark-mode.css

     
    4949                position: fixed;
    5050                bottom: 5px;
    5151                right: 5px;
    52                 transition: bottom 0.5s;
    5352        }
    5453
    5554        #dark-mode-toggler.fixed-bottom.hide:not(:focus) {
    … …  
    106105                display: none;
    107106        }
    108107}
     108@media only screen and (prefers-reduced-motion: no-preference) {
     109
     110        #dark-mode-toggler.fixed-bottom {
     111                transition: bottom 0.5s;
     112        }
     113}

  • src/wp-content/themes/twentytwentyone/assets/sass/06-components/footer-navigation.scss

     
    2121
    2222                a {
    2323                        padding: calc(1.25 * var(--primary-nav--padding)) var(--primary-nav--padding);
    24                         transition: transform 0.1s ease;
    2524                        color: var(--footer--color-link);
    2625
    2726                        &:link,
    … …  
    6362                        &:hover {
    6463                                transform: scale(1.1);
    6564                        }
     65
     66                        @media (prefers-reduced-motion: no-preference) {
     67                                transition: transform 0.1s ease;
     68                        }
    6669                }
    6770        }
    6871

  • src/wp-content/themes/twentytwentyone/assets/sass/06-components/navigation.scss

     
    101101                padding-right: var(--global--spacing-unit);
    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));
    106105
     106                @media (prefers-reduced-motion: no-preference) {
     107                        transition: all .15s ease-in-out;
     108                }
     109
    107110                @include media(mobile-only) {
    108111                        height: 100vh;
    109112                        z-index: 499;
    … …  
    279282                        position: relative;
    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;
    284293                                min-width: max-content;
    … …  
    285294                                position: absolute;
    286295                                top: 100%;
    287296                                padding-top: 3px;
    288                                 transition: all 0.5s ease;
    289297                                z-index: 88888;
    290298
    291299                                &:before,

  • src/wp-content/themes/twentytwentyone/assets/sass/07-utilities/a11y.scss

     
    3838#content[tabindex="-1"]:focus {
    3939        outline: 0;
    4040}
    41 
    42 @media (prefers-reduced-motion) {
    43 
    44         * {
    45                 transition-delay: 0s !important;
    46                 transition-duration: 0s !important;
    47         }
    48 }

  • src/wp-content/themes/twentytwentyone/assets/sass/style-dark-mode.scss

     
    4646
    4747                &.fixed-bottom {
    4848                        position: fixed;
    49                         bottom: 5px;
     49                        bottom: 5px; // The bottom property has transition (see below).
    5050                        right: 5px;
    51                         transition: bottom 0.5s;
    5251
    5352                        &.hide:not(:focus) {
    5453                                bottom: -80px;
    … …  
    9796                .is-IE & {
    9897                        display: none;
    9998                }
     99
     100                &.fixed-bottom {
     101                        @media (prefers-reduced-motion: no-preference) {
     102                                transition: bottom 0.5s;
     103                        }
     104                }
    100105        }
    101106}

  • src/wp-content/themes/twentytwentyone/style-rtl.css

     
    46924692        padding-left: var(--global--spacing-unit);
    46934693        padding-bottom: var(--global--spacing-horizontal);
    46944694        background-color: var(--global--color-background);
    4695         transition: all 0.15s ease-in-out;
    46964695        transform: translateY(var(--global--spacing-vertical));
    46974696}
     4697@media (prefers-reduced-motion: no-preference) {
     4698
     4699        .primary-navigation > .primary-menu-container {
     4700                transition: all 0.15s ease-in-out;
     4701        }
     4702}
    46984703@media only screen and (max-width: 481px) {
    46994704
    47004705        .primary-navigation > .primary-menu-container {
    … …  
    48644869.primary-navigation > div > .menu-wrapper > li > .sub-menu {
    48654870        position: relative;
    48664871}
     4872@media only screen and (min-width: 482px) and (prefers-reduced-motion: no-preference) {
     4873
     4874        .primary-navigation > div > .menu-wrapper > li > .sub-menu {
     4875                transition: all 0.5s ease;
     4876        }
     4877}
    48674878@media only screen and (min-width: 482px) {
    48684879
    48694880        .primary-navigation > div > .menu-wrapper > li > .sub-menu {
    … …  
    48734884                position: absolute;
    48744885                top: 100%;
    48754886                padding-top: 3px;
    4876                 transition: all 0.5s ease;
    48774887                z-index: 88888;
    48784888        }
    48794889
    … …  
    51055115
    51065116.footer-navigation-wrapper li a {
    51075117        padding: calc(1.25 * var(--primary-nav--padding)) var(--primary-nav--padding);
    5108         transition: transform 0.1s ease;
    51095118        color: var(--footer--color-link);
    51105119}
    51115120
    … …  
    51385147.footer-navigation-wrapper li .svg-icon:hover {
    51395148        transform: scale(1.1);
    51405149}
     5150@media (prefers-reduced-motion: no-preference) {
    51415151
     5152        .footer-navigation-wrapper li .svg-icon {
     5153                transition: transform 0.1s ease;
     5154        }
     5155}
     5156
    51425157.footer-navigation-wrapper .sub-menu-toggle,
    51435158.footer-navigation-wrapper .menu-item-description {
    51445159        display: none;
    … …  
    55945609        outline: 0;
    55955610}
    55965611
    5597 @media (prefers-reduced-motion) {
    5598 
    5599         * {
    5600                 transition-delay: 0s !important;
    5601                 transition-duration: 0s !important;
    5602         }
    5603 }
    5604 
    56055612.has-black-color[class] {
    56065613        color: var(--global--color-black);
    56075614}

  • src/wp-content/themes/twentytwentyone/style.css

     
    47124712        padding-right: var(--global--spacing-unit);
    47134713        padding-bottom: var(--global--spacing-horizontal);
    47144714        background-color: var(--global--color-background);
    4715         transition: all 0.15s ease-in-out;
    47164715        transform: translateY(var(--global--spacing-vertical));
    47174716}
     4717@media (prefers-reduced-motion: no-preference) {
     4718
     4719        .primary-navigation > .primary-menu-container {
     4720                transition: all 0.15s ease-in-out;
     4721        }
     4722}
    47184723@media only screen and (max-width: 481px) {
    47194724
    47204725        .primary-navigation > .primary-menu-container {
    … …  
    48844889.primary-navigation > div > .menu-wrapper > li > .sub-menu {
    48854890        position: relative;
    48864891}
     4892@media only screen and (min-width: 482px) and (prefers-reduced-motion: no-preference) {
     4893
     4894        .primary-navigation > div > .menu-wrapper > li > .sub-menu {
     4895                transition: all 0.5s ease;
     4896        }
     4897}
    48874898@media only screen and (min-width: 482px) {
    48884899
    48894900        .primary-navigation > div > .menu-wrapper > li > .sub-menu {
    … …  
    48934904                position: absolute;
    48944905                top: 100%;
    48954906                padding-top: 3px;
    4896                 transition: all 0.5s ease;
    48974907                z-index: 88888;
    48984908        }
    48994909
    … …  
    51415151
    51425152.footer-navigation-wrapper li a {
    51435153        padding: calc(1.25 * var(--primary-nav--padding)) var(--primary-nav--padding);
    5144         transition: transform 0.1s ease;
    51455154        color: var(--footer--color-link);
    51465155}
    51475156
    … …  
    51745183.footer-navigation-wrapper li .svg-icon:hover {
    51755184        transform: scale(1.1);
    51765185}
     5186@media (prefers-reduced-motion: no-preference) {
    51775187
     5188        .footer-navigation-wrapper li .svg-icon {
     5189                transition: transform 0.1s ease;
     5190        }
     5191}
     5192
    51785193.footer-navigation-wrapper .sub-menu-toggle,
    51795194.footer-navigation-wrapper .menu-item-description {
    51805195        display: none;
    … …  
    56305645        outline: 0;
    56315646}
    56325647
    5633 @media (prefers-reduced-motion) {
    5634 
    5635         * {
    5636                 transition-delay: 0s !important;
    5637                 transition-duration: 0s !important;
    5638         }
    5639 }
    5640 
    56415648.has-black-color[class] {
    56425649        color: var(--global--color-black);
    56435650}