WordPress.org
Get WordPress

Make WordPress Core

Changeset 50026


Ignore:
Timestamp:
01/26/2021 06:58:08 PM (6 years ago)
Author:
SergeyBiryukov
Message:

Twenty Twenty-One: Correct colors for the Menu button.

As per design, the background should be transparent and the text should be dark grey, not vice versa.

Follow-up to [49987].

Props poena.
Fixes #52374. See #51927.

Location:
trunk/src/wp-content/themes/twentytwentyone
Files:
4 edited

Legend:

Unmodified
Added
Removed

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

    r49988 r50026  
    63426342        padding-bottom: 8px;
    63436343}
     6344@media only screen and (max-width: 481px) {
     6345
     6346        .menu-button-container {
     6347                display: flex;
     6348        }
     6349}
    63446350
    63456351.menu-button-container #primary-mobile-menu {
     6352        display: flex;
    63466353        margin-left: auto;
    63476354        padding: 10px 15px;
    6348 }
    6349 @media only screen and (max-width: 481px) {
    6350 
    6351         .menu-button-container {
    6352                 display: flex;
    6353         }
    6354 }
    6355 
    6356 .menu-button-container .button.button {
    6357         display: flex;
    63586355        font-size: 1rem;
    63596356        font-weight: 500;
    … …  
    63636360}
    63646361
    6365 .menu-button-container .button.button .dropdown-icon {
     6362.menu-button-container #primary-mobile-menu .dropdown-icon {
    63666363        display: flex;
    63676364        align-items: center;
    63686365}
    63696366
    6370 .menu-button-container .button.button .dropdown-icon .svg-icon {
     6367.menu-button-container #primary-mobile-menu .dropdown-icon .svg-icon {
    63716368        margin-left: 5px;
    63726369}
    63736370
    6374 .menu-button-container .button.button .dropdown-icon.open .svg-icon {
     6371.menu-button-container #primary-mobile-menu .dropdown-icon.open .svg-icon {
    63756372        position: relative;
    63766373        top: -1px;
    63776374}
    63786375
    6379 .menu-button-container .button.button .dropdown-icon.close {
     6376.menu-button-container #primary-mobile-menu .dropdown-icon.close {
    63806377        display: none;
    63816378}
    63826379
    6383 .menu-button-container .button.button[aria-expanded*=true] .dropdown-icon.open {
     6380.menu-button-container #primary-mobile-menu[aria-expanded*=true] .dropdown-icon.open {
    63846381        display: none;
    63856382}
    63866383
    6387 .menu-button-container .button.button[aria-expanded*=true] .dropdown-icon.close {
     6384.menu-button-container #primary-mobile-menu[aria-expanded*=true] .dropdown-icon.close {
    63886385        display: flex;
    63896386}
    63906387
    6391 .has-logo.has-title-and-tagline .menu-button-container .button.button[aria-expanded*=true] .dropdown-icon.close {
     6388.has-logo.has-title-and-tagline .menu-button-container #primary-mobile-menu[aria-expanded*=true] .dropdown-icon.close {
    63926389        animation-name: twentytwentyone-close-button-transition;
    63936390        animation-duration: 0.3s;

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

    r49914 r50026  
    1111        padding-bottom: calc(0.25 * var(--global--spacing-vertical));
    1212
     13        @include media(mobile-only) {
     14                display: flex;
     15        }
     16
     17        // Override specificity from default button styles.
    1318        #primary-mobile-menu {
     19                display: flex;
    1420                margin-left: auto;
    1521                padding: calc(var(--button--padding-vertical) - (0.25 * var(--global--spacing-unit))) calc(0.5 * var(--button--padding-horizontal));
    16         }
    17 
    18         @include media(mobile-only) {
    19                 display: flex;
    20         }
    21 
    22         // Override specificty from default button styles.
    23         .button.button {
    24                 display: flex;
    2522                font-size: var(--primary-nav--font-size-button);
    2623                font-weight: var(--primary-nav--font-weight-button);

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

    r49988 r50026  
    45684568        padding-bottom: calc(0.25 * var(--global--spacing-vertical));
    45694569}
     4570@media only screen and (max-width: 481px) {
     4571
     4572        .menu-button-container {
     4573                display: flex;
     4574        }
     4575}
    45704576
    45714577.menu-button-container #primary-mobile-menu {
     4578        display: flex;
    45724579        margin-right: auto;
    45734580        padding: calc(var(--button--padding-vertical) - (0.25 * var(--global--spacing-unit))) calc(0.5 * var(--button--padding-horizontal));
    4574 }
    4575 @media only screen and (max-width: 481px) {
    4576 
    4577         .menu-button-container {
    4578                 display: flex;
    4579         }
    4580 }
    4581 
    4582 .menu-button-container .button.button {
    4583         display: flex;
    45844581        font-size: var(--primary-nav--font-size-button);
    45854582        font-weight: var(--primary-nav--font-weight-button);
    … …  
    45894586}
    45904587
    4591 .menu-button-container .button.button .dropdown-icon {
     4588.menu-button-container #primary-mobile-menu .dropdown-icon {
    45924589        display: flex;
    45934590        align-items: center;
    45944591}
    45954592
    4596 .menu-button-container .button.button .dropdown-icon .svg-icon {
     4593.menu-button-container #primary-mobile-menu .dropdown-icon .svg-icon {
    45974594        margin-right: calc(0.25 * var(--global--spacing-unit));
    45984595}
    45994596
    4600 .menu-button-container .button.button .dropdown-icon.open .svg-icon {
     4597.menu-button-container #primary-mobile-menu .dropdown-icon.open .svg-icon {
    46014598        position: relative;
    46024599        top: -1px;
    46034600}
    46044601
    4605 .menu-button-container .button.button .dropdown-icon.close {
     4602.menu-button-container #primary-mobile-menu .dropdown-icon.close {
    46064603        display: none;
    46074604}
    46084605
    4609 .menu-button-container .button.button[aria-expanded*=true] .dropdown-icon.open {
     4606.menu-button-container #primary-mobile-menu[aria-expanded*=true] .dropdown-icon.open {
    46104607        display: none;
    46114608}
    46124609
    4613 .menu-button-container .button.button[aria-expanded*=true] .dropdown-icon.close {
     4610.menu-button-container #primary-mobile-menu[aria-expanded*=true] .dropdown-icon.close {
    46144611        display: flex;
    46154612}
    46164613
    4617 .has-logo.has-title-and-tagline .menu-button-container .button.button[aria-expanded*=true] .dropdown-icon.close {
     4614.has-logo.has-title-and-tagline .menu-button-container #primary-mobile-menu[aria-expanded*=true] .dropdown-icon.close {
    46184615        animation-name: twentytwentyone-close-button-transition;
    46194616        animation-duration: 0.3s;

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

    r49988 r50026  
    45884588        padding-bottom: calc(0.25 * var(--global--spacing-vertical));
    45894589}
     4590@media only screen and (max-width: 481px) {
     4591
     4592        .menu-button-container {
     4593                display: flex;
     4594        }
     4595}
    45904596
    45914597.menu-button-container #primary-mobile-menu {
     4598        display: flex;
    45924599        margin-left: auto;
    45934600        padding: calc(var(--button--padding-vertical) - (0.25 * var(--global--spacing-unit))) calc(0.5 * var(--button--padding-horizontal));
    4594 }
    4595 @media only screen and (max-width: 481px) {
    4596 
    4597         .menu-button-container {
    4598                 display: flex;
    4599         }
    4600 }
    4601 
    4602 .menu-button-container .button.button {
    4603         display: flex;
    46044601        font-size: var(--primary-nav--font-size-button);
    46054602        font-weight: var(--primary-nav--font-weight-button);
    … …  
    46094606}
    46104607
    4611 .menu-button-container .button.button .dropdown-icon {
     4608.menu-button-container #primary-mobile-menu .dropdown-icon {
    46124609        display: flex;
    46134610        align-items: center;
    46144611}
    46154612
    4616 .menu-button-container .button.button .dropdown-icon .svg-icon {
     4613.menu-button-container #primary-mobile-menu .dropdown-icon .svg-icon {
    46174614        margin-left: calc(0.25 * var(--global--spacing-unit));
    46184615}
    46194616
    4620 .menu-button-container .button.button .dropdown-icon.open .svg-icon {
     4617.menu-button-container #primary-mobile-menu .dropdown-icon.open .svg-icon {
    46214618        position: relative;
    46224619        top: -1px;
    46234620}
    46244621
    4625 .menu-button-container .button.button .dropdown-icon.close {
     4622.menu-button-container #primary-mobile-menu .dropdown-icon.close {
    46264623        display: none;
    46274624}
    46284625
    4629 .menu-button-container .button.button[aria-expanded*=true] .dropdown-icon.open {
     4626.menu-button-container #primary-mobile-menu[aria-expanded*=true] .dropdown-icon.open {
    46304627        display: none;
    46314628}
    46324629
    4633 .menu-button-container .button.button[aria-expanded*=true] .dropdown-icon.close {
     4630.menu-button-container #primary-mobile-menu[aria-expanded*=true] .dropdown-icon.close {
    46344631        display: flex;
    46354632}
    46364633
    4637 .has-logo.has-title-and-tagline .menu-button-container .button.button[aria-expanded*=true] .dropdown-icon.close {
     4634.has-logo.has-title-and-tagline .menu-button-container #primary-mobile-menu[aria-expanded*=true] .dropdown-icon.close {
    46384635        animation-name: twentytwentyone-close-button-transition;
    46394636        animation-duration: 0.3s;
Note: See TracChangeset for help on using the changeset viewer.