diff --git a/src/wp-content/themes/twentytwentyone/assets/css/ie.css b/src/wp-content/themes/twentytwentyone/assets/css/ie.css index b3fba7c145..33946c7100 100644 --- a/src/wp-content/themes/twentytwentyone/assets/css/ie.css +++ b/src/wp-content/themes/twentytwentyone/assets/css/ie.css @@ -6341,11 +6341,6 @@ h1.page-title { padding-top: 15px; padding-bottom: 8px; } - -.menu-button-container #primary-mobile-menu { - margin-left: auto; - padding: 10px 15px; -} @media only screen and (max-width: 481px) { .menu-button-container { @@ -6353,8 +6348,10 @@ h1.page-title { } } -.menu-button-container .button.button { +.menu-button-container #primary-mobile-menu { display: flex; + margin-left: auto; + padding: 10px 15px; font-size: 1rem; font-weight: 500; background-color: transparent; @@ -6362,33 +6359,33 @@ h1.page-title { color: #28303d; } -.menu-button-container .button.button .dropdown-icon { +.menu-button-container #primary-mobile-menu .dropdown-icon { display: flex; align-items: center; } -.menu-button-container .button.button .dropdown-icon .svg-icon { +.menu-button-container #primary-mobile-menu .dropdown-icon .svg-icon { margin-left: 5px; } -.menu-button-container .button.button .dropdown-icon.open .svg-icon { +.menu-button-container #primary-mobile-menu .dropdown-icon.open .svg-icon { position: relative; top: -1px; } -.menu-button-container .button.button .dropdown-icon.close { +.menu-button-container #primary-mobile-menu .dropdown-icon.close { display: none; } -.menu-button-container .button.button[aria-expanded*=true] .dropdown-icon.open { +.menu-button-container #primary-mobile-menu[aria-expanded*=true] .dropdown-icon.open { display: none; } -.menu-button-container .button.button[aria-expanded*=true] .dropdown-icon.close { +.menu-button-container #primary-mobile-menu[aria-expanded*=true] .dropdown-icon.close { display: flex; } -.has-logo.has-title-and-tagline .menu-button-container .button.button[aria-expanded*=true] .dropdown-icon.close { +.has-logo.has-title-and-tagline .menu-button-container #primary-mobile-menu[aria-expanded*=true] .dropdown-icon.close { animation-name: twentytwentyone-close-button-transition; animation-duration: 0.3s; } diff --git a/src/wp-content/themes/twentytwentyone/assets/sass/06-components/navigation.scss b/src/wp-content/themes/twentytwentyone/assets/sass/06-components/navigation.scss index c62ef26bd8..11329cf82a 100644 --- a/src/wp-content/themes/twentytwentyone/assets/sass/06-components/navigation.scss +++ b/src/wp-content/themes/twentytwentyone/assets/sass/06-components/navigation.scss @@ -10,18 +10,15 @@ padding-top: calc(0.5 * var(--global--spacing-vertical)); padding-bottom: calc(0.25 * var(--global--spacing-vertical)); - #primary-mobile-menu { - margin-left: auto; - padding: calc(var(--button--padding-vertical) - (0.25 * var(--global--spacing-unit))) calc(0.5 * var(--button--padding-horizontal)); - } - @include media(mobile-only) { display: flex; } - // Override specificty from default button styles. - .button.button { + // Override specificity from default button styles. + #primary-mobile-menu { display: flex; + margin-left: auto; + padding: calc(var(--button--padding-vertical) - (0.25 * var(--global--spacing-unit))) calc(0.5 * var(--button--padding-horizontal)); font-size: var(--primary-nav--font-size-button); font-weight: var(--primary-nav--font-weight-button); background-color: transparent; diff --git a/src/wp-content/themes/twentytwentyone/style-rtl.css b/src/wp-content/themes/twentytwentyone/style-rtl.css index 0b828ab587..167391639d 100644 --- a/src/wp-content/themes/twentytwentyone/style-rtl.css +++ b/src/wp-content/themes/twentytwentyone/style-rtl.css @@ -4567,11 +4567,6 @@ h1.page-title { padding-top: calc(0.5 * var(--global--spacing-vertical)); padding-bottom: calc(0.25 * var(--global--spacing-vertical)); } - -.menu-button-container #primary-mobile-menu { - margin-right: auto; - padding: calc(var(--button--padding-vertical) - (0.25 * var(--global--spacing-unit))) calc(0.5 * var(--button--padding-horizontal)); -} @media only screen and (max-width: 481px) { .menu-button-container { @@ -4579,8 +4574,10 @@ h1.page-title { } } -.menu-button-container .button.button { +.menu-button-container #primary-mobile-menu { display: flex; + margin-right: auto; + padding: calc(var(--button--padding-vertical) - (0.25 * var(--global--spacing-unit))) calc(0.5 * var(--button--padding-horizontal)); font-size: var(--primary-nav--font-size-button); font-weight: var(--primary-nav--font-weight-button); background-color: transparent; @@ -4588,33 +4585,33 @@ h1.page-title { color: var(--primary-nav--color-link); } -.menu-button-container .button.button .dropdown-icon { +.menu-button-container #primary-mobile-menu .dropdown-icon { display: flex; align-items: center; } -.menu-button-container .button.button .dropdown-icon .svg-icon { +.menu-button-container #primary-mobile-menu .dropdown-icon .svg-icon { margin-right: calc(0.25 * var(--global--spacing-unit)); } -.menu-button-container .button.button .dropdown-icon.open .svg-icon { +.menu-button-container #primary-mobile-menu .dropdown-icon.open .svg-icon { position: relative; top: -1px; } -.menu-button-container .button.button .dropdown-icon.close { +.menu-button-container #primary-mobile-menu .dropdown-icon.close { display: none; } -.menu-button-container .button.button[aria-expanded*=true] .dropdown-icon.open { +.menu-button-container #primary-mobile-menu[aria-expanded*=true] .dropdown-icon.open { display: none; } -.menu-button-container .button.button[aria-expanded*=true] .dropdown-icon.close { +.menu-button-container #primary-mobile-menu[aria-expanded*=true] .dropdown-icon.close { display: flex; } -.has-logo.has-title-and-tagline .menu-button-container .button.button[aria-expanded*=true] .dropdown-icon.close { +.has-logo.has-title-and-tagline .menu-button-container #primary-mobile-menu[aria-expanded*=true] .dropdown-icon.close { animation-name: twentytwentyone-close-button-transition; animation-duration: 0.3s; } diff --git a/src/wp-content/themes/twentytwentyone/style.css b/src/wp-content/themes/twentytwentyone/style.css index cdc10fe8ea..815fbf7226 100644 --- a/src/wp-content/themes/twentytwentyone/style.css +++ b/src/wp-content/themes/twentytwentyone/style.css @@ -4587,11 +4587,6 @@ h1.page-title { padding-top: calc(0.5 * var(--global--spacing-vertical)); padding-bottom: calc(0.25 * var(--global--spacing-vertical)); } - -.menu-button-container #primary-mobile-menu { - margin-left: auto; - padding: calc(var(--button--padding-vertical) - (0.25 * var(--global--spacing-unit))) calc(0.5 * var(--button--padding-horizontal)); -} @media only screen and (max-width: 481px) { .menu-button-container { @@ -4599,8 +4594,10 @@ h1.page-title { } } -.menu-button-container .button.button { +.menu-button-container #primary-mobile-menu { display: flex; + margin-left: auto; + padding: calc(var(--button--padding-vertical) - (0.25 * var(--global--spacing-unit))) calc(0.5 * var(--button--padding-horizontal)); font-size: var(--primary-nav--font-size-button); font-weight: var(--primary-nav--font-weight-button); background-color: transparent; @@ -4608,33 +4605,33 @@ h1.page-title { color: var(--primary-nav--color-link); } -.menu-button-container .button.button .dropdown-icon { +.menu-button-container #primary-mobile-menu .dropdown-icon { display: flex; align-items: center; } -.menu-button-container .button.button .dropdown-icon .svg-icon { +.menu-button-container #primary-mobile-menu .dropdown-icon .svg-icon { margin-left: calc(0.25 * var(--global--spacing-unit)); } -.menu-button-container .button.button .dropdown-icon.open .svg-icon { +.menu-button-container #primary-mobile-menu .dropdown-icon.open .svg-icon { position: relative; top: -1px; } -.menu-button-container .button.button .dropdown-icon.close { +.menu-button-container #primary-mobile-menu .dropdown-icon.close { display: none; } -.menu-button-container .button.button[aria-expanded*=true] .dropdown-icon.open { +.menu-button-container #primary-mobile-menu[aria-expanded*=true] .dropdown-icon.open { display: none; } -.menu-button-container .button.button[aria-expanded*=true] .dropdown-icon.close { +.menu-button-container #primary-mobile-menu[aria-expanded*=true] .dropdown-icon.close { display: flex; } -.has-logo.has-title-and-tagline .menu-button-container .button.button[aria-expanded*=true] .dropdown-icon.close { +.has-logo.has-title-and-tagline .menu-button-container #primary-mobile-menu[aria-expanded*=true] .dropdown-icon.close { animation-name: twentytwentyone-close-button-transition; animation-duration: 0.3s; }