Get WordPress

Make WordPress Core

Changeset 50026

Timestamp:
01/26/2021 06:58:08 PM (4 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
     6345
     6346
     6347
     6348
     6349
    63446350
    63456351.menu-button-container #primary-mobile-menu {
     6352
    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 .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 .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 .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 .dropdown-icon.close {
    63806377    display: none;
    63816378}
    63826379
    6383 .menu-button-container .button.button[aria-expanded*=true] .dropdown-icon.open {
     6380.menu-button-container [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 [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 [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
     14
     15
     16
     17
    1318    #primary-mobile-menu {
     19
    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
     4571
     4572
     4573
     4574
     4575
    45704576
    45714577.menu-button-container #primary-mobile-menu {
     4578
    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 .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 .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 .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 .dropdown-icon.close {
    46064603    display: none;
    46074604}
    46084605
    4609 .menu-button-container .button.button[aria-expanded*=true] .dropdown-icon.open {
     4606.menu-button-container [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 [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 [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
     4591
     4592
     4593
     4594
     4595
    45904596
    45914597.menu-button-container #primary-mobile-menu {
     4598
    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 .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 .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 .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 .dropdown-icon.close {
    46264623    display: none;
    46274624}
    46284625
    4629 .menu-button-container .button.button[aria-expanded*=true] .dropdown-icon.open {
     4626.menu-button-container [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 [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 [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.