Adjusted menu CSS to match recent changes in the block (#4822)
* Adjusted menu CSS to match recent changes in the block * Adjusted mobile menu styling to fit recent changes to navigation block * Style social nav on mobile only * Made the same menu changes in Geologist as in Quadrat * Corrected blockbase classes due to recent changes to navigation block * Adjusted skatepark's navigation classes * corrected videomaker classes * Improved mobile navigation alignment for Seedlet Blocks * Further addressed Seedlet's mobile stylings. Better addressed Blockbase mobile submenu spacing. * Remove the margins on the social links block when in the nav * Add a block style for 'clean mobile navigation block' and cleaned up base navigation block styles polyfill * moved social menu location of styled mobile menu * Renamed block style to improved responsive navigation Co-authored-by: Ben Dwyer <ben@scruffian.com>
This commit is contained in:
parent
5a04d5706a
commit
0d08de6d60
20 changed files with 188 additions and 114 deletions
|
@ -460,17 +460,46 @@ ol {
|
|||
padding-left: var(--wp--custom--list--spacing--padding--left);
|
||||
}
|
||||
|
||||
.wp-block-navigation.is-responsive .wp-block-navigation__responsive-container.is-menu-open {
|
||||
.wp-block-navigation .has-child .wp-block-navigation__submenu-container {
|
||||
background-color: var(--wp--custom--color--background);
|
||||
border: var(--wp--custom--form--border--width) var(--wp--custom--form--border--style) var(--wp--preset--color--primary);
|
||||
}
|
||||
|
||||
.wp-block-navigation.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);
|
||||
}
|
||||
|
||||
.wp-block-navigation.is-responsive .wp-block-navigation-link__content {
|
||||
color: var(--wp--custom--color--foreground) !important;
|
||||
.wp-block-navigation.is-responsive ul.wp-block-social-links {
|
||||
margin: 0;
|
||||
gap: var(--wp--custom--gap--baseline);
|
||||
}
|
||||
|
||||
.wp-block-navigation.is-responsive .has-child .wp-block-navigation-link__container {
|
||||
display: revert;
|
||||
.wp-block-navigation.is-style-blockbase-navigation-improved-responsive.is-responsive .is-menu-open {
|
||||
font-size: var(--wp--preset--font-size--medium) !important;
|
||||
}
|
||||
|
||||
.wp-block-navigation.is-style-blockbase-navigation-improved-responsive.is-responsive .is-menu-open .wp-block-navigation__container {
|
||||
row-gap: 0.5rem !important;
|
||||
align-items: flex-start !important;
|
||||
flex: unset;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.wp-block-navigation.is-style-blockbase-navigation-improved-responsive.is-responsive .is-menu-open .wp-block-navigation-item {
|
||||
align-items: flex-start !important;
|
||||
}
|
||||
|
||||
.wp-block-navigation.is-style-blockbase-navigation-improved-responsive.is-responsive .is-menu-open .wp-block-navigation__submenu-container {
|
||||
font-size: var(--wp--preset--font-size--normal) !important;
|
||||
padding-bottom: 0;
|
||||
padding-left: var(--wp--custom--gap--horizontal) !important;
|
||||
padding-top: 0.5rem;
|
||||
row-gap: 0.5rem !important;
|
||||
}
|
||||
|
||||
.wp-block-navigation.is-style-blockbase-navigation-improved-responsive.is-responsive .is-menu-open ul.wp-block-social-links {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
p.has-drop-cap:not(:focus):first-letter {
|
||||
|
|
|
@ -159,3 +159,8 @@ add_action(
|
|||
);
|
||||
}
|
||||
);
|
||||
|
||||
/**
|
||||
* Block Styles.
|
||||
*/
|
||||
require get_template_directory() . '/inc/block-styles.php';
|
||||
|
|
31
blockbase/inc/block-styles.php
Normal file
31
blockbase/inc/block-styles.php
Normal file
|
@ -0,0 +1,31 @@
|
|||
<?php
|
||||
/**
|
||||
* Blockbase Theme: Block Styles
|
||||
*
|
||||
* @package Blockbase
|
||||
* @since 1.2.8
|
||||
*/
|
||||
|
||||
if ( ! function_exists( 'blockbase_register_block_styles' ) ) :
|
||||
|
||||
function blockbase_register_block_styles() {
|
||||
|
||||
if ( function_exists( 'register_block_style' ) ) {
|
||||
|
||||
/**
|
||||
* Register block styles
|
||||
*/
|
||||
register_block_style(
|
||||
'core/navigation',
|
||||
array(
|
||||
'name' => 'blockbase-navigation-improved-responsive',
|
||||
'label' => __( 'Improved Responsive Navigation', 'blockbase' ),
|
||||
'style_handle' => 'blockbase-navigation-improved-responsive',
|
||||
)
|
||||
);
|
||||
|
||||
}
|
||||
}
|
||||
endif;
|
||||
|
||||
add_action( 'after_setup_theme', 'blockbase_register_block_styles' );
|
|
@ -1,13 +1,43 @@
|
|||
// See https://github.com/WordPress/gutenberg/issues/34648
|
||||
.wp-block-navigation.is-responsive {
|
||||
.wp-block-navigation__responsive-container.is-menu-open {
|
||||
.wp-block-navigation {
|
||||
// See https://github.com/WordPress/gutenberg/issues/34648
|
||||
.has-child .wp-block-navigation__submenu-container {
|
||||
background-color: var(--wp--custom--color--background);
|
||||
color: var(--wp--custom--color--foreground);
|
||||
border: var(--wp--custom--form--border--width) var(--wp--custom--form--border--style) var(--wp--preset--color--primary);
|
||||
}
|
||||
.wp-block-navigation-link__content {
|
||||
color: var(--wp--custom--color--foreground) !important;
|
||||
}
|
||||
.has-child .wp-block-navigation-link__container{
|
||||
display: revert;
|
||||
&.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);
|
||||
}
|
||||
ul.wp-block-social-links {
|
||||
margin: 0;
|
||||
gap: var(--wp--custom--gap--baseline);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.wp-block-navigation.is-style-blockbase-navigation-improved-responsive {
|
||||
&.is-responsive .is-menu-open {
|
||||
font-size: var(--wp--preset--font-size--medium) !important;
|
||||
.wp-block-navigation__container {
|
||||
row-gap: 0.5rem !important;
|
||||
align-items: flex-start !important;
|
||||
flex: unset;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
.wp-block-navigation-item {
|
||||
align-items: flex-start !important;
|
||||
}
|
||||
.wp-block-navigation__submenu-container {
|
||||
font-size: var(--wp--preset--font-size--normal) !important;
|
||||
padding-bottom: 0;
|
||||
padding-left: var(--wp--custom--gap--horizontal) !important;
|
||||
padding-top: 0.5rem;
|
||||
row-gap: 0.5rem !important;
|
||||
}
|
||||
ul.wp-block-social-links {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -118,8 +118,7 @@ ul ul {
|
|||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.wp-block-navigation:not(.has-background) .wp-block-navigation__container .submenu-container,
|
||||
.wp-block-navigation:not(.has-background) .wp-block-navigation__container .wp-block-navigation-link__container {
|
||||
.wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container {
|
||||
background-color: var(--wp--custom--color--background);
|
||||
border-color: var(--wp--custom--color--tertiary);
|
||||
}
|
||||
|
@ -147,31 +146,31 @@ ul ul {
|
|||
margin-right: 0;
|
||||
}
|
||||
|
||||
.wp-block-navigation.is-responsive .wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-pages-list__item.has-child .submenu-container,
|
||||
.wp-block-navigation.is-responsive .wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-pages-list__item.has-child .wp-block-navigation-link__container,
|
||||
.wp-block-navigation.is-responsive .wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-navigation-link.has-child .submenu-container,
|
||||
.wp-block-navigation.is-responsive .wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-navigation-link.has-child .wp-block-navigation-link__container {
|
||||
margin-right: -19px;
|
||||
.wp-block-navigation.is-responsive .wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-pages-list__item.has-child .wp-block-navigation__submenu-container,
|
||||
.wp-block-navigation.is-responsive .wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-navigation-link.has-child .wp-block-navigation__submenu-container {
|
||||
gap: 0;
|
||||
padding: 0 19px 0 0;
|
||||
border-right: 1px solid var(--wp--custom--color--foreground);
|
||||
}
|
||||
|
||||
.wp-block-navigation.is-responsive .wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-pages-list__item.has-child .submenu-container .wp-block-pages-list__item__link,
|
||||
.wp-block-navigation.is-responsive .wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-pages-list__item.has-child .submenu-container .wp-block-navigation-link__content,
|
||||
.wp-block-navigation.is-responsive .wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-pages-list__item.has-child .wp-block-navigation-link__container .wp-block-pages-list__item__link,
|
||||
.wp-block-navigation.is-responsive .wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-pages-list__item.has-child .wp-block-navigation-link__container .wp-block-navigation-link__content,
|
||||
.wp-block-navigation.is-responsive .wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-navigation-link.has-child .submenu-container .wp-block-pages-list__item__link,
|
||||
.wp-block-navigation.is-responsive .wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-navigation-link.has-child .submenu-container .wp-block-navigation-link__content,
|
||||
.wp-block-navigation.is-responsive .wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-navigation-link.has-child .wp-block-navigation-link__container .wp-block-pages-list__item__link,
|
||||
.wp-block-navigation.is-responsive .wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-navigation-link.has-child .wp-block-navigation-link__container .wp-block-navigation-link__content {
|
||||
.wp-block-navigation.is-responsive .wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-pages-list__item.has-child .wp-block-navigation__submenu-container .wp-block-pages-list__item__link,
|
||||
.wp-block-navigation.is-responsive .wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-pages-list__item.has-child .wp-block-navigation__submenu-container .wp-block-navigation-item__content,
|
||||
.wp-block-navigation.is-responsive .wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-navigation-link.has-child .wp-block-navigation__submenu-container .wp-block-pages-list__item__link,
|
||||
.wp-block-navigation.is-responsive .wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-navigation-link.has-child .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
|
||||
padding: 0;
|
||||
font-size: var(--wp--custom--font-sizes--tiny);
|
||||
line-height: 40px;
|
||||
}
|
||||
|
||||
.wp-block-navigation.is-responsive .wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-navigation__container {
|
||||
padding-top: 50px;
|
||||
align-items: flex-end;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.wp-block-navigation.is-responsive .wp-block-navigation__responsive-container.is-menu-open .wp-block-social-links {
|
||||
position: absolute;
|
||||
flex-direction: column;
|
||||
padding-top: 36px;
|
||||
}
|
||||
|
||||
.wp-block-post-comments form input:not([type=submit]):not([type=checkbox]),
|
||||
|
|
|
@ -10,12 +10,9 @@
|
|||
}
|
||||
}
|
||||
&:not(.has-background) {
|
||||
.wp-block-navigation__container {
|
||||
.submenu-container,
|
||||
.wp-block-navigation-link__container {
|
||||
background-color: var(--wp--custom--color--background);
|
||||
border-color: var(--wp--custom--color--tertiary);
|
||||
}
|
||||
.wp-block-navigation__submenu-container {
|
||||
background-color: var(--wp--custom--color--background);
|
||||
border-color: var(--wp--custom--color--tertiary);
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -37,13 +34,12 @@
|
|||
.wp-block-navigation-link__content {
|
||||
margin-right: 0;
|
||||
}
|
||||
.submenu-container,
|
||||
.wp-block-navigation-link__container{
|
||||
margin-right: -19px;
|
||||
.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-link__content {
|
||||
.wp-block-navigation-item__content {
|
||||
padding: 0;
|
||||
font-size: var(--wp--custom--font-sizes--tiny);
|
||||
line-height: 40px;
|
||||
|
@ -52,9 +48,14 @@
|
|||
}
|
||||
}
|
||||
.wp-block-navigation__container{
|
||||
padding-top: 50px;
|
||||
align-items: flex-end;
|
||||
gap: 0;
|
||||
}
|
||||
}
|
||||
.wp-block-social-links {
|
||||
position: absolute;
|
||||
flex-direction: column;
|
||||
padding-top: 36px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -3,6 +3,6 @@
|
|||
<!-- wp:site-logo /-->
|
||||
<!-- wp:site-title /-->
|
||||
<!-- wp:site-tagline {"style":{"typography":{"fontSize":"var(--wp--custom--font-sizes--tiny)"}}} /-->
|
||||
<!-- wp:navigation {"textColor":"foreground-light","fontSize":"small","itemsJustification":"right","isResponsive":true,"__unstableLocation":"primary","__unstableSocialLinks":"social"} /-->
|
||||
<!-- wp:navigation {"className":"is-style-blockbase-navigation-improved-responsive","itemsJustification":"right","isResponsive":true,"__unstableLocation":"primary","__unstableSocialLinks":"social"} /-->
|
||||
</div>
|
||||
<!-- /wp:group -->
|
||||
|
|
|
@ -307,8 +307,7 @@ ul ul {
|
|||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.wp-block-navigation:not(.has-background) .wp-block-navigation__container .submenu-container,
|
||||
.wp-block-navigation:not(.has-background) .wp-block-navigation__container .wp-block-navigation-link__container {
|
||||
.wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container {
|
||||
background-color: var(--wp--custom--color--background);
|
||||
border-color: var(--wp--custom--color--tertiary);
|
||||
}
|
||||
|
@ -336,31 +335,31 @@ ul ul {
|
|||
margin-right: 0;
|
||||
}
|
||||
|
||||
.wp-block-navigation.is-responsive .wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-pages-list__item.has-child .submenu-container,
|
||||
.wp-block-navigation.is-responsive .wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-pages-list__item.has-child .wp-block-navigation-link__container,
|
||||
.wp-block-navigation.is-responsive .wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-navigation-link.has-child .submenu-container,
|
||||
.wp-block-navigation.is-responsive .wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-navigation-link.has-child .wp-block-navigation-link__container {
|
||||
margin-right: -19px;
|
||||
.wp-block-navigation.is-responsive .wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-pages-list__item.has-child .wp-block-navigation__submenu-container,
|
||||
.wp-block-navigation.is-responsive .wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-navigation-link.has-child .wp-block-navigation__submenu-container {
|
||||
gap: 0;
|
||||
padding: 0 19px 0 0;
|
||||
border-right: 1px solid var(--wp--custom--color--foreground);
|
||||
}
|
||||
|
||||
.wp-block-navigation.is-responsive .wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-pages-list__item.has-child .submenu-container .wp-block-pages-list__item__link,
|
||||
.wp-block-navigation.is-responsive .wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-pages-list__item.has-child .submenu-container .wp-block-navigation-link__content,
|
||||
.wp-block-navigation.is-responsive .wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-pages-list__item.has-child .wp-block-navigation-link__container .wp-block-pages-list__item__link,
|
||||
.wp-block-navigation.is-responsive .wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-pages-list__item.has-child .wp-block-navigation-link__container .wp-block-navigation-link__content,
|
||||
.wp-block-navigation.is-responsive .wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-navigation-link.has-child .submenu-container .wp-block-pages-list__item__link,
|
||||
.wp-block-navigation.is-responsive .wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-navigation-link.has-child .submenu-container .wp-block-navigation-link__content,
|
||||
.wp-block-navigation.is-responsive .wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-navigation-link.has-child .wp-block-navigation-link__container .wp-block-pages-list__item__link,
|
||||
.wp-block-navigation.is-responsive .wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-navigation-link.has-child .wp-block-navigation-link__container .wp-block-navigation-link__content {
|
||||
.wp-block-navigation.is-responsive .wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-pages-list__item.has-child .wp-block-navigation__submenu-container .wp-block-pages-list__item__link,
|
||||
.wp-block-navigation.is-responsive .wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-pages-list__item.has-child .wp-block-navigation__submenu-container .wp-block-navigation-item__content,
|
||||
.wp-block-navigation.is-responsive .wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-navigation-link.has-child .wp-block-navigation__submenu-container .wp-block-pages-list__item__link,
|
||||
.wp-block-navigation.is-responsive .wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-navigation-link.has-child .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
|
||||
padding: 0;
|
||||
font-size: var(--wp--custom--font-sizes--tiny);
|
||||
line-height: 40px;
|
||||
}
|
||||
|
||||
.wp-block-navigation.is-responsive .wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-navigation__container {
|
||||
padding-top: 50px;
|
||||
align-items: flex-end;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.wp-block-navigation.is-responsive .wp-block-navigation__responsive-container.is-menu-open .wp-block-social-links {
|
||||
position: absolute;
|
||||
flex-direction: column;
|
||||
padding-top: 36px;
|
||||
}
|
||||
|
||||
.wp-block-post-comments form input:not([type=submit]):not([type=checkbox]),
|
||||
|
|
|
@ -10,12 +10,9 @@
|
|||
}
|
||||
}
|
||||
&:not(.has-background) {
|
||||
.wp-block-navigation__container {
|
||||
.submenu-container,
|
||||
.wp-block-navigation-link__container {
|
||||
background-color: var(--wp--custom--color--background);
|
||||
border-color: var(--wp--custom--color--tertiary);
|
||||
}
|
||||
.wp-block-navigation__submenu-container {
|
||||
background-color: var(--wp--custom--color--background);
|
||||
border-color: var(--wp--custom--color--tertiary);
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -37,13 +34,12 @@
|
|||
.wp-block-navigation-link__content {
|
||||
margin-right: 0;
|
||||
}
|
||||
.submenu-container,
|
||||
.wp-block-navigation-link__container{
|
||||
margin-right: -19px;
|
||||
.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-link__content {
|
||||
.wp-block-navigation-item__content {
|
||||
padding: 0;
|
||||
font-size: var(--wp--custom--font-sizes--tiny);
|
||||
line-height: 40px;
|
||||
|
@ -52,9 +48,14 @@
|
|||
}
|
||||
}
|
||||
.wp-block-navigation__container{
|
||||
padding-top: 50px;
|
||||
align-items: flex-end;
|
||||
gap: 0;
|
||||
}
|
||||
}
|
||||
.wp-block-social-links {
|
||||
position: absolute;
|
||||
flex-direction: column;
|
||||
padding-top: 36px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -158,7 +158,7 @@
|
|||
}
|
||||
|
||||
.wp-block-navigation__responsive-container.has-modal-open .wp-block-navigation-link {
|
||||
font-family: var(--wp--preset--font-family--headings);
|
||||
font-family: var(--wp--preset--font-family--playfair-display);
|
||||
font-size: 32px;
|
||||
font-weight: 400;
|
||||
line-height: 60px;
|
||||
|
@ -170,16 +170,6 @@
|
|||
line-height: 30px;
|
||||
}
|
||||
|
||||
.wp-block-navigation__responsive-container:not(.has-modal-open) .wp-block-social-links {
|
||||
flex-basis: 100%;
|
||||
}
|
||||
|
||||
/* NOTE: This can be removed when the rendering of the Navigation block, rendered with a Classic data source (by way of __unstableLocation),
|
||||
is passed all of the block attributes on the block definition in the template. */
|
||||
.wp-block-navigation__container {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.wp-block-post-comments #comments,
|
||||
.wp-block-post-comments #reply-title {
|
||||
font-style: italic;
|
||||
|
|
|
@ -8,7 +8,7 @@
|
|||
|
||||
<!-- wp:site-tagline {"textAlign":"center","fontSize":"small"} /-->
|
||||
|
||||
<!-- wp:navigation {"itemsJustification":"center","isResponsive":true,"__unstableLocation":"primary","__unstableSocialLinks":"social"} /-->
|
||||
<!-- wp:navigation {"className":"is-style-blockbase-navigation-improved-responsive","itemsJustification":"center","isResponsive":true,"__unstableLocation":"primary","__unstableSocialLinks":"social"} /-->
|
||||
|
||||
<!-- wp:spacer {"height":60} -->
|
||||
<div style="height:60px" aria-hidden="true" class="wp-block-spacer"></div>
|
||||
|
|
|
@ -1,9 +1,7 @@
|
|||
.wp-block-navigation__responsive-container {
|
||||
&.has-modal-open {
|
||||
.wp-block-navigation-link {
|
||||
//NOTE: For reasons I cannot explain... if I set this to use the --wp--preset--font-family--headings
|
||||
//these values (which are what are set) are not respected in the modal.
|
||||
font-family: var(--wp--preset--font-family--headings);
|
||||
font-family: var(--wp--preset--font-family--playfair-display);
|
||||
font-size: 32px;
|
||||
font-weight: 400;
|
||||
line-height: 60px;
|
||||
|
@ -16,14 +14,4 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.has-modal-open) .wp-block-social-links {
|
||||
flex-basis: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* NOTE: This can be removed when the rendering of the Navigation block, rendered with a Classic data source (by way of __unstableLocation),
|
||||
is passed all of the block attributes on the block definition in the template. */
|
||||
.wp-block-navigation__container {
|
||||
justify-content: center;
|
||||
}
|
||||
|
|
|
@ -126,9 +126,8 @@
|
|||
padding-left: calc( max( 0.5 * ( 100% - var(--wp--custom--layout--wide-size) ) + var(--wp--custom--gap--horizontal), var(--wp--custom--gap--horizontal) ));
|
||||
}
|
||||
|
||||
.wp-block-navigation.is-responsive .has-child .wp-block-navigation-link__container {
|
||||
background-color: var(--wp--custom--color--background);
|
||||
border: var(--wp--custom--form--border--width) var(--wp--custom--form--border--style) var(--wp--preset--color--primary);
|
||||
.wp-block-navigation {
|
||||
font-size: var(--wp--preset--font-size--small);
|
||||
}
|
||||
|
||||
.wp-block-post-comments .reply a {
|
||||
|
|
|
@ -9,7 +9,7 @@
|
|||
|
||||
<!-- wp:group {"className":"nav-links"} -->
|
||||
<div class="wp-block-group nav-links">
|
||||
<!-- wp:navigation {"orientation":"horizontal","itemsJustification":"right","isResponsive":true,"__unstableLocation":"primary","style":{"typography":{"fontStyle":"normal","fontWeight":"900","textTransform":"uppercase"}},"fontSize":"small","__unstableSocialLinks":"social"} /-->
|
||||
<!-- wp:navigation {"className":"is-style-blockbase-navigation-improved-responsive","orientation":"horizontal","itemsJustification":"right","isResponsive":true,"__unstableLocation":"primary","style":{"typography":{"fontStyle":"normal","fontWeight":"900","textTransform":"uppercase"}},"__unstableSocialLinks":"social"} /-->
|
||||
</div>
|
||||
<!-- /wp:group -->
|
||||
</div>
|
||||
|
|
|
@ -1,7 +1,5 @@
|
|||
// See https://github.com/WordPress/gutenberg/issues/34648
|
||||
.wp-block-navigation.is-responsive {
|
||||
.has-child .wp-block-navigation-link__container {
|
||||
background-color: var(--wp--custom--color--background);
|
||||
border: var(--wp--custom--form--border--width) var(--wp--custom--form--border--style) var(--wp--preset--color--primary);
|
||||
}
|
||||
//NOTE: Setting the font size as a block attributes forces ALL elements to have that font size
|
||||
//preventing mobile menu items (and sub-menu items) from having a different size value
|
||||
.wp-block-navigation {
|
||||
font-size: var(--wp--preset--font-size--small);
|
||||
}
|
||||
|
|
|
@ -64,7 +64,7 @@ div.post-meta a {
|
|||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.wp-block-navigation.is-responsive .has-child .wp-block-navigation-link__container {
|
||||
.wp-block-navigation.is-responsive .has-child .wp-block-navigation__submenu-container {
|
||||
background-color: var(--wp--custom--color--background);
|
||||
border: var(--wp--custom--form--border--width) var(--wp--custom--form--border--style) var(--wp--preset--color--primary);
|
||||
}
|
||||
|
|
|
@ -3,6 +3,6 @@
|
|||
<!-- wp:site-logo /-->
|
||||
<!-- wp:site-title /-->
|
||||
<!-- wp:site-tagline /-->
|
||||
<!-- wp:navigation {"itemsJustification":"right","isResponsive":true,"__unstableLocation":"primary","__unstableSocialLinks":"social"} /-->
|
||||
<!-- wp:navigation {"className":"is-style-blockbase-navigation-improved-responsive","itemsJustification":"right","isResponsive":true,"__unstableLocation":"primary","__unstableSocialLinks":"social"} /-->
|
||||
</header>
|
||||
<!-- /wp:group -->
|
||||
|
|
|
@ -160,6 +160,12 @@
|
|||
"textTransform": "uppercase"
|
||||
}
|
||||
},
|
||||
"core/navigation-link": {
|
||||
"color": {
|
||||
"background": "transparent",
|
||||
"text": "var(--wp--custom--color--foreground)"
|
||||
}
|
||||
},
|
||||
"core/post-date": {
|
||||
"typography": {
|
||||
"fontSize": "var(--wp--preset--font-size--small)"
|
||||
|
|
|
@ -1,12 +1,4 @@
|
|||
// Needed until this is merged: https://github.com/WordPress/gutenberg/issues/35040
|
||||
.is-vertical.items-justified-right ul.wp-block-navigation__container {
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
// See https://github.com/WordPress/gutenberg/issues/34648
|
||||
.wp-block-navigation.is-responsive {
|
||||
.has-child .wp-block-navigation-link__container {
|
||||
background-color: var(--wp--custom--color--background);
|
||||
border: var(--wp--custom--form--border--width) var(--wp--custom--form--border--style) var(--wp--preset--color--primary);
|
||||
}
|
||||
}
|
||||
}
|
|
@ -494,6 +494,12 @@
|
|||
"textTransform": "uppercase"
|
||||
}
|
||||
},
|
||||
"core/navigation-link": {
|
||||
"color": {
|
||||
"background": "transparent",
|
||||
"text": "var(--wp--custom--color--foreground)"
|
||||
}
|
||||
},
|
||||
"core/post-terms": {
|
||||
"typography": {
|
||||
"fontSize": "var(--wp--preset--font-size--small)"
|
||||
|
|
Loading…
Reference in a new issue