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:
parent
fed21a9863
commit
11ea669f7f
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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.
|
||||
|
|
Loading…
Reference in New Issue