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-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;
}

View File

@ -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;

View File

@ -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;
}

View File

@ -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;
}

View File

@ -13,7 +13,7 @@
*
* @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.