beenull/themes-wordpress
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Videomaker: Navigation styles (#4876)

Browse source 
* Videomaker: center nav items

* Videomaker: remove uppercase from nav block

* Videomaker: center social links

* Videomaker: add current-menu-item styles

* Videomaker: add underline to parent menu item

* Videomaker: increase nav spacing

* Videomaker: tweak spacing again

* Videomaker: style current menu item

* Videomaker: fix submenu centering

* Videomaker: make all pattern navs uppercase

* Blockbase: Remove ! important rules from navigation CSS

* Always show submenu items

* Remove another ! important

Co-authored-by: Ben Dwyer <ben@scruffian.com>
This commit is contained in:
Sarah Norris 2021-10-20 14:18:22 +01:00 committed by GitHub
parent abfcb36d0e
commit 46f1ed11a0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 91 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
blockbase/assets/ponyfill.css
View file

@ -476,26 +476,26 @@ ol {
}
.wp-block-navigation.is-style-blockbase-navigation-improved-responsive.is-responsive .is-menu-open {
font-size: var(--wp--preset--font-size--medium) !important;
font-size: var(--wp--preset--font-size--medium);
}
.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;
row-gap: 0.5rem;
align-items: flex-start;
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;
align-items: flex-start;
}
.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;
.wp-block-navigation.is-style-blockbase-navigation-improved-responsive.is-responsive .is-menu-open .wp-block-navigation__responsive-container-content .has-child .wp-block-navigation__submenu-container {
font-size: var(--wp--preset--font-size--normal);
padding-bottom: 0;
padding-left: var(--wp--custom--gap--horizontal) !important;
padding-left: var(--wp--custom--gap--horizontal);
padding-top: 0.5rem;
row-gap: 0.5rem !important;
row-gap: 0.5rem;
}
.wp-block-navigation.is-style-blockbase-navigation-improved-responsive.is-responsive .is-menu-open ul.wp-block-social-links {

2
blockbase/block-template-parts/header.html
View file

@ -3,6 +3,6 @@
<!-- wp:site-logo /-->
<!-- wp:site-title /-->
<!-- wp:site-tagline {"style":{"typography":{"fontSize":"var(--wp--custom--font-sizes--tiny)"}}} /-->
<!-- 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"} /-->
</div>
<!-- /wp:group -->

25
blockbase/sass/blocks/_navigation.scss
View file

@ -19,23 +19,28 @@
.wp-block-navigation.is-style-blockbase-navigation-improved-responsive {
&.is-responsive .is-menu-open {
font-size: var(--wp--preset--font-size--medium) !important;
font-size: var(--wp--preset--font-size--medium);
.wp-block-navigation__container {
row-gap: 0.5rem !important;
align-items: flex-start !important;
row-gap: 0.5rem;
align-items: flex-start;
flex: unset;
padding-bottom: 0;
}
.wp-block-navigation-item {
align-items: flex-start !important;
align-items: flex-start;
}
.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__responsive-container-content .has-child { // Needed for specificity to beat the navigation block CSS
.wp-block-navigation__submenu-container {
font-size: var(--wp--preset--font-size--normal);
padding-bottom: 0;
padding-left: var(--wp--custom--gap--horizontal);
padding-top: 0.5rem;
row-gap: 0.5rem;
}
}
ul.wp-block-social-links {
justify-content: flex-start;
}

28
videomaker/assets/theme.css
View file

@ -64,6 +64,34 @@ div.post-meta a {
align-items: flex-end;
}
.wp-block-navigation.is-style-blockbase-navigation-improved-responsive.is-responsive .is-menu-open.wp-block-navigation__responsive-container .wp-block-navigation__container {
align-items: center;
row-gap: 1rem;
}
.wp-block-navigation.is-style-blockbase-navigation-improved-responsive.is-responsive .is-menu-open.wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-content .wp-block-navigation-item {
align-items: center;
row-gap: 0.8rem;
}
.wp-block-navigation.is-style-blockbase-navigation-improved-responsive.is-responsive .is-menu-open.wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-content .wp-block-navigation-item.current-menu-item > a {
text-decoration: underline;
}
.wp-block-navigation.is-style-blockbase-navigation-improved-responsive.is-responsive .is-menu-open.wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-content .wp-block-navigation-item.has-child .wp-block-navigation__submenu-container {
padding-left: 0;
padding-right: 0;
}
.wp-block-navigation.is-style-blockbase-navigation-improved-responsive.is-responsive .is-menu-open.wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-content {
justify-content: space-between;
}
.wp-block-navigation.is-style-blockbase-navigation-improved-responsive.is-responsive .is-menu-open.wp-block-navigation__responsive-container ul.wp-block-social-links {
justify-content: center;
padding-bottom: calc( var(--wp--custom--gap--vertical) * 2);
}
footer > .wp-block-group {
align-items: center;
justify-content: space-between;

5
videomaker/child-theme.json
View file

@ -155,11 +155,6 @@
"fontFamily": "var(--wp--preset--font-family--inter)"
}
},
"core/navigation": {
"typography": {
"textTransform": "uppercase"
}
},
"core/navigation-link": {
"color": {
"background": "transparent",

2
videomaker/inc/patterns/background-video.php
View file

@ -17,7 +17,7 @@ return array(
<!-- wp:column {"verticalAlignment":"center"} -->
<div class="wp-block-column is-vertically-aligned-center">
<!-- wp:navigation {"itemsJustification":"right","isResponsive":true,"__unstableLocation":"primary"} /-->
<!-- wp:navigation {"itemsJustification":"right","isResponsive":true,"__unstableLocation":"primary","style":{"typography":{"textTransform":"uppercase"}}} /-->
</div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

2
videomaker/inc/patterns/full-width-homepage.php
View file

@ -15,7 +15,7 @@ return array(
<!-- /wp:column -->
<!-- wp:column {"verticalAlignment":"center"} -->
<div class="wp-block-column is-vertically-aligned-center"><!-- wp:navigation {"itemsJustification":"right","isResponsive":true,"__unstableLocation":"primary"} /--></div>
<div class="wp-block-column is-vertically-aligned-center"><!-- wp:navigation {"itemsJustification":"right","isResponsive":true,"__unstableLocation":"primary","style":{"typography":{"textTransform":"uppercase"}}} /--></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

2
videomaker/inc/patterns/header-description-and-grid-of-projects.php
View file

@ -19,7 +19,7 @@ return array(
<h3 style="font-weight:300">' . esc_html__( 'Jonah is Creative Director of Hano, a production studio that specializes in combining storytelling with visual design.', 'videomaker' ) . '</h3>
<!-- /wp:heading -->
<!-- wp:navigation {"orientation":"vertical","__unstableLocation":"primary"} /-->
<!-- wp:navigation {"orientation":"vertical","__unstableLocation":"primary","style":{"typography":{"textTransform":"uppercase"}}} /-->
</div>
<!-- /wp:column -->

36
videomaker/sass/_navigation.scss
View file

@ -1,4 +1,38 @@
// 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;
}
}
.wp-block-navigation.is-style-blockbase-navigation-improved-responsive {
&.is-responsive .is-menu-open.wp-block-navigation__responsive-container {
.wp-block-navigation__container {
align-items: center;
row-gap: 1rem;
}
.wp-block-navigation__responsive-container-content { // Needed for specificity to beat the navigation block CSS
.wp-block-navigation-item {
align-items: center;
row-gap: 0.8rem;
&.current-menu-item > a {
text-decoration: underline;
}
&.has-child {
.wp-block-navigation__submenu-container {
padding-left: 0;
padding-right: 0;
}
}
}
}
.wp-block-navigation__responsive-container-content {
justify-content: space-between;
}
ul.wp-block-social-links {
justify-content: center;
padding-bottom: calc( var(--wp--custom--gap--vertical) * 2 );
}
}
}

3
videomaker/theme.json
View file

@ -411,8 +411,7 @@
},
"core/navigation": {
"typography": {
"fontSize": "var(--wp--preset--font-size--normal)",
"textTransform": "uppercase"
"fontSize": "var(--wp--preset--font-size--normal)"
}
},
"core/post-title": {