119 lines
2.3 KiB
SCSS
119 lines
2.3 KiB
SCSS
.woocommerce-navigation {
|
|
display: grid;
|
|
grid-template-rows: min-content 1fr;
|
|
height: 100%;
|
|
}
|
|
|
|
.woocommerce-navigation .woocommerce-navigation__wrapper {
|
|
h2 > span {
|
|
width: 100%;
|
|
}
|
|
|
|
.components-navigation__menu {
|
|
overflow-y: auto;
|
|
margin-bottom: 0;
|
|
padding-bottom: $gap-large;
|
|
}
|
|
|
|
.components-navigation__group + .components-navigation__group {
|
|
margin-top: 24px;
|
|
}
|
|
|
|
.components-navigation__item {
|
|
margin-bottom: 0;
|
|
|
|
.components-button {
|
|
opacity: 1;
|
|
}
|
|
|
|
&:not(:hover) {
|
|
.components-button {
|
|
color: $gray-400;
|
|
}
|
|
}
|
|
&:hover {
|
|
.components-button {
|
|
color: $white;
|
|
}
|
|
}
|
|
&.is-active {
|
|
.components-button {
|
|
color: #fff;
|
|
}
|
|
}
|
|
|
|
/*
|
|
* <-------- Start Temporary Code -------->
|
|
*
|
|
* A change to Gutenberg base Navigation component in version 9.8.3
|
|
* requires these overrides. As of this comment, the problematic code
|
|
* was published to .org but not shipped as part of WP 5.7.
|
|
*
|
|
* A fix in Gutenberg is https://github.com/WordPress/gutenberg/pull/28619
|
|
*
|
|
* Criteria for removal
|
|
* 1. https://github.com/WordPress/gutenberg/pull/28619 is merged and deployed to .org
|
|
* 2. https://github.com/WordPress/gutenberg/pull/28619 is included in the Gutenberg version associated with WP 5.7
|
|
* 3. If not part of WP 5.7, this code will be required until WP 6.0 is released and WC Admin no longer supports 5.7
|
|
*/
|
|
a.components-button {
|
|
padding: 6px 16px;
|
|
}
|
|
&:not(:hover) {
|
|
a.components-button {
|
|
// ${ G2.lightGray.ui };
|
|
color: $gray-400;
|
|
}
|
|
}
|
|
&.is-active {
|
|
a.components-button {
|
|
// ${ UI.textDark };
|
|
color: #fff;
|
|
}
|
|
}
|
|
/*
|
|
* <-------- End Temporary Code -------->
|
|
*/
|
|
}
|
|
|
|
.components-navigation {
|
|
height: 100%;
|
|
}
|
|
|
|
.components-navigation > div {
|
|
height: 100%;
|
|
display: grid;
|
|
grid-template-rows: 1fr min-content;
|
|
}
|
|
|
|
&.is-root {
|
|
.components-navigation__menu-secondary {
|
|
border-top: 1px solid $studio-gray-80;
|
|
margin: 0 -#{$gap-smaller};
|
|
padding: $gap $gap-smaller $gap-small $gap-smaller;
|
|
}
|
|
}
|
|
|
|
.components-navigation__menu-title,
|
|
.components-navigation__group-title {
|
|
color: #f0f0f0;
|
|
opacity: 1;
|
|
}
|
|
|
|
.components-navigation__back-button {
|
|
color: $gray-400;
|
|
opacity: 1;
|
|
|
|
&,
|
|
span {
|
|
font-size: 13px;
|
|
line-height: normal;
|
|
}
|
|
|
|
&:hover,
|
|
&:hover:not(:disabled) {
|
|
color: #ddd;
|
|
}
|
|
}
|
|
}
|