|
@@ -1,4 +1,4 @@
|
|
|
-// See https://github.com/WordPress/gutenberg/issues/34648
|
|
|
+// See https://github.com/WordPress/gutenberg/issues/39052
|
|
|
.wp-block-navigation {
|
|
|
// See https://github.com/WordPress/gutenberg/issues/34648
|
|
|
.has-child .wp-block-navigation__submenu-container {
|
|
@@ -9,18 +9,22 @@
|
|
|
color: var(--wp--custom--navigation--submenu--color--text);
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
&.is-responsive {
|
|
|
+
|
|
|
&:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open {
|
|
|
background-color: var(--wp--custom--color--background);
|
|
|
color: var(--wp--custom--color--foreground);
|
|
|
padding-left: var(--wp--custom--gap--horizontal);
|
|
|
padding-right: var(--wp--custom--gap--horizontal);
|
|
|
}
|
|
|
+
|
|
|
ul.wp-block-social-links {
|
|
|
margin: 0;
|
|
|
gap: var(--wp--custom--gap--baseline);
|
|
|
}
|
|
|
- .wp-block-navigation__responsive-container-close{
|
|
|
+
|
|
|
+ .wp-block-navigation__responsive-container-close {
|
|
|
right: var(--wp--custom--gap--horizontal);
|
|
|
top: var(--wp--custom--gap--vertical);
|
|
|
}
|
|
@@ -64,6 +68,7 @@
|
|
|
|
|
|
/* Additional styling for header-minimal */
|
|
|
.wp-block-navigation.blockbase-responsive-navigation-minimal {
|
|
|
+
|
|
|
&.is-responsive .is-menu-open.wp-block-navigation__responsive-container {
|
|
|
font-size: var(--wp--preset--font-size--large);
|
|
|
font-weight: 200;
|
|
@@ -77,8 +82,9 @@
|
|
|
margin: 0 auto;
|
|
|
max-width: 800px; // This should match the content width
|
|
|
flex-wrap: nowrap;
|
|
|
+
|
|
|
.wp-block-navigation-item {
|
|
|
- row-gap: 0rem;
|
|
|
+ row-gap: 0;
|
|
|
|
|
|
> a:hover {
|
|
|
text-decoration-line: underline;
|
|
@@ -88,13 +94,15 @@
|
|
|
text-decoration: underline;
|
|
|
}
|
|
|
}
|
|
|
- .wp-block-navigation__container{
|
|
|
+
|
|
|
+ .wp-block-navigation__container {
|
|
|
flex-grow: 1;
|
|
|
justify-content: center;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
ul.wp-block-social-links {
|
|
|
- padding-bottom: calc( var(--wp--custom--gap--vertical) * 2 );
|
|
|
+ padding-bottom: calc(var(--wp--custom--gap--vertical) * 2);
|
|
|
}
|
|
|
|
|
|
.wp-block-navigation__responsive-container-content .has-child { // Needed for specificity to beat the navigation block CSS
|
|
@@ -107,17 +115,22 @@
|
|
|
|
|
|
/* Additional Styling for header-linear */
|
|
|
.wp-block-navigation.blockbase-responsive-navigation-linear {
|
|
|
+
|
|
|
.wp-block-navigation-link a:hover {
|
|
|
background: transparent;
|
|
|
}
|
|
|
+
|
|
|
.wp-block-pages-list__item .wp-block-pages-list__item__link,
|
|
|
.wp-block-navigation-link__content {
|
|
|
color: var(--wp--custom--color--foreground);
|
|
|
+
|
|
|
&:hover {
|
|
|
text-decoration: underline;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
&:not(.has-background) {
|
|
|
+
|
|
|
.wp-block-navigation__submenu-container {
|
|
|
background-color: var(--wp--custom--color--background);
|
|
|
border-color: var(--wp--custom--color--tertiary);
|
|
@@ -130,22 +143,28 @@
|
|
|
|
|
|
&.is-responsive .wp-block-navigation__responsive-container.is-menu-open {
|
|
|
background-color: var(--wp--custom--color--tertiary);
|
|
|
+
|
|
|
&.has-modal-open {
|
|
|
+
|
|
|
.wp-block-pages-list__item,
|
|
|
.wp-block-navigation-item {
|
|
|
font-size: var(--wp--custom--font-sizes--normal);
|
|
|
line-height: 50px;
|
|
|
margin: 0;
|
|
|
align-items: flex-end;
|
|
|
+
|
|
|
&.has-child {
|
|
|
+
|
|
|
.wp-block-pages-list__item__link,
|
|
|
.wp-block-navigation-link__content {
|
|
|
margin-right: 0;
|
|
|
}
|
|
|
- .wp-block-navigation__submenu-container{
|
|
|
+
|
|
|
+ .wp-block-navigation__submenu-container {
|
|
|
gap: 0;
|
|
|
padding: 0 19px 0 0;
|
|
|
border-right: 1px solid var(--wp--custom--color--foreground);
|
|
|
+
|
|
|
.wp-block-pages-list__item__link,
|
|
|
.wp-block-navigation-item__content {
|
|
|
padding: 0;
|
|
@@ -159,13 +178,15 @@
|
|
|
.wp-block-navigation__container {
|
|
|
align-items: flex-end;
|
|
|
}
|
|
|
+
|
|
|
.wp-block-navigation__responsive-container-content {
|
|
|
flex-direction: row-reverse;
|
|
|
}
|
|
|
|
|
|
}
|
|
|
+
|
|
|
.wp-block-social-links {
|
|
|
- flex-direction:column;
|
|
|
+ flex-direction: column;
|
|
|
}
|
|
|
}
|
|
|
}
|