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:

• assets/css/ie.css (modified) (2 diffs)
• assets/sass/06-components/navigation.scss (modified) (1 diff)
• style-rtl.css (modified) (2 diffs)
• style.css (modified) (2 diffs)

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

@@ -6342 +6342 @@
     padding-bottom: 8px;
 }
+@media only screen and (max-width: 481px) {
+
+    .menu-button-container {
+        display: flex;
+    }
+}
 
 .menu-button-container #primary-mobile-menu {
+    display: flex;
     margin-left: auto;
     padding: 10px 15px;
-}
-@media only screen and (max-width: 481px) {
-
-    .menu-button-container {
-        display: flex;
-    }
-}
-
-.menu-button-container .button.button {
-    display: flex;
     font-size: 1rem;
     font-weight: 500;
@@ -6363 +6360 @@
 }
 
-.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;

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

@@ -11 +11 @@
     padding-bottom: calc(0.25 * var(--global--spacing-vertical));
 
+    @include media(mobile-only) {
+        display: flex;
+    }
+
+    // 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));
-    }
-
-    @include media(mobile-only) {
-        display: flex;
-    }
-
-    // Override specificty from default button styles.
-    .button.button {
-        display: flex;
         font-size: var(--primary-nav--font-size-button);
         font-weight: var(--primary-nav--font-weight-button);

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

@@ -4568 +4568 @@
     padding-bottom: calc(0.25 * var(--global--spacing-vertical));
 }
+@media only screen and (max-width: 481px) {
+
+    .menu-button-container {
+        display: flex;
+    }
+}
 
 .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));
-}
-@media only screen and (max-width: 481px) {
-
-    .menu-button-container {
-        display: flex;
-    }
-}
-
-.menu-button-container .button.button {
-    display: flex;
     font-size: var(--primary-nav--font-size-button);
     font-weight: var(--primary-nav--font-weight-button);
@@ -4589 +4586 @@
 }
 
-.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;

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

@@ -4588 +4588 @@
     padding-bottom: calc(0.25 * var(--global--spacing-vertical));
 }
+@media only screen and (max-width: 481px) {
+
+    .menu-button-container {
+        display: flex;
+    }
+}
 
 .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));
-}
-@media only screen and (max-width: 481px) {
-
-    .menu-button-container {
-        display: flex;
-    }
-}
-
-.menu-button-container .button.button {
-    display: flex;
     font-size: var(--primary-nav--font-size-button);
     font-weight: var(--primary-nav--font-weight-button);
@@ -4609 +4606 @@
 }
 
-.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;