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.
Built from https://develop.svn.wordpress.org/trunk@50026


git-svn-id: http://core.svn.wordpress.org/trunk@49727 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Sergey Biryukov 2021-01-26 18:59:57 +00:00
parent fed21a9863
commit 11ea669f7f
5 changed files with 35 additions and 47 deletions

View File

@ -6341,11 +6341,6 @@ h1.page-title {
padding-top: 15px; padding-top: 15px;
padding-bottom: 8px; padding-bottom: 8px;
} }
.menu-button-container #primary-mobile-menu {
margin-left: auto;
padding: 10px 15px;
}
@media only screen and (max-width: 481px) { @media only screen and (max-width: 481px) {
.menu-button-container { .menu-button-container {
@ -6353,8 +6348,10 @@ h1.page-title {
} }
} }
.menu-button-container .button.button { .menu-button-container #primary-mobile-menu {
display: flex; display: flex;
margin-left: auto;
padding: 10px 15px;
font-size: 1rem; font-size: 1rem;
font-weight: 500; font-weight: 500;
background-color: transparent; background-color: transparent;
@ -6362,33 +6359,33 @@ h1.page-title {
color: #28303d; color: #28303d;
} }
.menu-button-container .button.button .dropdown-icon { .menu-button-container #primary-mobile-menu .dropdown-icon {
display: flex; display: flex;
align-items: center; 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; 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; position: relative;
top: -1px; top: -1px;
} }
.menu-button-container .button.button .dropdown-icon.close { .menu-button-container #primary-mobile-menu .dropdown-icon.close {
display: none; 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; 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; 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-name: twentytwentyone-close-button-transition;
animation-duration: 0.3s; animation-duration: 0.3s;
} }

View File

@ -10,18 +10,15 @@
padding-top: calc(0.5 * var(--global--spacing-vertical)); padding-top: calc(0.5 * var(--global--spacing-vertical));
padding-bottom: calc(0.25 * 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) { @include media(mobile-only) {
display: flex; display: flex;
} }
// Override specificty from default button styles. // Override specificity from default button styles.
.button.button { #primary-mobile-menu {
display: flex; 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-size: var(--primary-nav--font-size-button);
font-weight: var(--primary-nav--font-weight-button); font-weight: var(--primary-nav--font-weight-button);
background-color: transparent; background-color: transparent;

View File

@ -4567,11 +4567,6 @@ h1.page-title {
padding-top: calc(0.5 * var(--global--spacing-vertical)); padding-top: calc(0.5 * var(--global--spacing-vertical));
padding-bottom: calc(0.25 * 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) { @media only screen and (max-width: 481px) {
.menu-button-container { .menu-button-container {
@ -4579,8 +4574,10 @@ h1.page-title {
} }
} }
.menu-button-container .button.button { .menu-button-container #primary-mobile-menu {
display: flex; 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-size: var(--primary-nav--font-size-button);
font-weight: var(--primary-nav--font-weight-button); font-weight: var(--primary-nav--font-weight-button);
background-color: transparent; background-color: transparent;
@ -4588,33 +4585,33 @@ h1.page-title {
color: var(--primary-nav--color-link); color: var(--primary-nav--color-link);
} }
.menu-button-container .button.button .dropdown-icon { .menu-button-container #primary-mobile-menu .dropdown-icon {
display: flex; display: flex;
align-items: center; 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)); 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; position: relative;
top: -1px; top: -1px;
} }
.menu-button-container .button.button .dropdown-icon.close { .menu-button-container #primary-mobile-menu .dropdown-icon.close {
display: none; 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; 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; 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-name: twentytwentyone-close-button-transition;
animation-duration: 0.3s; animation-duration: 0.3s;
} }

View File

@ -4587,11 +4587,6 @@ h1.page-title {
padding-top: calc(0.5 * var(--global--spacing-vertical)); padding-top: calc(0.5 * var(--global--spacing-vertical));
padding-bottom: calc(0.25 * 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) { @media only screen and (max-width: 481px) {
.menu-button-container { .menu-button-container {
@ -4599,8 +4594,10 @@ h1.page-title {
} }
} }
.menu-button-container .button.button { .menu-button-container #primary-mobile-menu {
display: flex; 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-size: var(--primary-nav--font-size-button);
font-weight: var(--primary-nav--font-weight-button); font-weight: var(--primary-nav--font-weight-button);
background-color: transparent; background-color: transparent;
@ -4608,33 +4605,33 @@ h1.page-title {
color: var(--primary-nav--color-link); color: var(--primary-nav--color-link);
} }
.menu-button-container .button.button .dropdown-icon { .menu-button-container #primary-mobile-menu .dropdown-icon {
display: flex; display: flex;
align-items: center; 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)); 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; position: relative;
top: -1px; top: -1px;
} }
.menu-button-container .button.button .dropdown-icon.close { .menu-button-container #primary-mobile-menu .dropdown-icon.close {
display: none; 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; 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; 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-name: twentytwentyone-close-button-transition;
animation-duration: 0.3s; animation-duration: 0.3s;
} }

View File

@ -13,7 +13,7 @@
* *
* @global string $wp_version * @global string $wp_version
*/ */
$wp_version = '5.7-alpha-50025'; $wp_version = '5.7-alpha-50026';
/** /**
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema. * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.