WordPress.org
Get WordPress

Make WordPress Core

Ticket #52374: 52374.patch

File 52374.patch, 8.4 KB (added by poena, 6 years ago)

Override specificity from default button styles by using the button ID.

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

     
    63416341        padding-top: 15px;
    63426342        padding-bottom: 8px;
    63436343}
    6344 
    6345 .menu-button-container #primary-mobile-menu {
    6346         margin-left: auto;
    6347         padding: 10px 15px;
    6348 }
    63496344@media only screen and (max-width: 481px) {
    63506345
    63516346        .menu-button-container {
    … …  
    63536348        }
    63546349}
    63556350
    6356 .menu-button-container .button.button {
     6351.menu-button-container #primary-mobile-menu {
    63576352        display: flex;
     6353        margin-left: auto;
     6354        padding: 10px 15px;
    63586355        font-size: 1rem;
    63596356        font-weight: 500;
    63606357        background-color: transparent;
    … …  
    63626359        color: #28303d;
    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;
    63946391}

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

     
    1010        padding-top: calc(0.5 * var(--global--spacing-vertical));
    1111        padding-bottom: calc(0.25 * var(--global--spacing-vertical));
    1212
    13         #primary-mobile-menu {
    14                 margin-left: auto;
    15                 padding: calc(var(--button--padding-vertical) - (0.25 * var(--global--spacing-unit))) calc(0.5 * var(--button--padding-horizontal));
    16         }
    17 
    1813        @include media(mobile-only) {
    1914                display: flex;
    2015        }
    2116
    22         // Override specificty from default button styles.
    23         .button.button {
     17        // Override specificity from default button styles.
     18        #primary-mobile-menu {
    2419                display: flex;
     20                margin-left: auto;
     21                padding: calc(var(--button--padding-vertical) - (0.25 * var(--global--spacing-unit))) calc(0.5 * var(--button--padding-horizontal));
    2522                font-size: var(--primary-nav--font-size-button);
    2623                font-weight: var(--primary-nav--font-weight-button);
    2724                background-color: transparent;

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

     
    45674567        padding-top: calc(0.5 * var(--global--spacing-vertical));
    45684568        padding-bottom: calc(0.25 * var(--global--spacing-vertical));
    45694569}
    4570 
    4571 .menu-button-container #primary-mobile-menu {
    4572         margin-right: auto;
    4573         padding: calc(var(--button--padding-vertical) - (0.25 * var(--global--spacing-unit))) calc(0.5 * var(--button--padding-horizontal));
    4574 }
    45754570@media only screen and (max-width: 481px) {
    45764571
    45774572        .menu-button-container {
    … …  
    45794574        }
    45804575}
    45814576
    4582 .menu-button-container .button.button {
     4577.menu-button-container #primary-mobile-menu {
    45834578        display: flex;
     4579        margin-right: auto;
     4580        padding: calc(var(--button--padding-vertical) - (0.25 * var(--global--spacing-unit))) calc(0.5 * var(--button--padding-horizontal));
    45844581        font-size: var(--primary-nav--font-size-button);
    45854582        font-weight: var(--primary-nav--font-weight-button);
    45864583        background-color: transparent;
    … …  
    45884585        color: var(--primary-nav--color-link);
    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;
    46204617}

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

     
    45874587        padding-top: calc(0.5 * var(--global--spacing-vertical));
    45884588        padding-bottom: calc(0.25 * var(--global--spacing-vertical));
    45894589}
    4590 
    4591 .menu-button-container #primary-mobile-menu {
    4592         margin-left: auto;
    4593         padding: calc(var(--button--padding-vertical) - (0.25 * var(--global--spacing-unit))) calc(0.5 * var(--button--padding-horizontal));
    4594 }
    45954590@media only screen and (max-width: 481px) {
    45964591
    45974592        .menu-button-container {
    … …  
    45994594        }
    46004595}
    46014596
    4602 .menu-button-container .button.button {
     4597.menu-button-container #primary-mobile-menu {
    46034598        display: flex;
     4599        margin-left: auto;
     4600        padding: calc(var(--button--padding-vertical) - (0.25 * var(--global--spacing-unit))) calc(0.5 * var(--button--padding-horizontal));
    46044601        font-size: var(--primary-nav--font-size-button);
    46054602        font-weight: var(--primary-nav--font-weight-button);
    46064603        background-color: transparent;
    … …  
    46084605        color: var(--primary-nav--color-link);
    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;
    46404637}