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-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;
|
||||||
}
|
}
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
|
@ -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.
|
||||||
|
|
Loading…
Reference in New Issue