Spearhead: Try a different approach for Spearhead

This commit is contained in:
Ben Dwyer 2020-10-28 14:44:24 +00:00
parent 33f7aff2e2
commit 65a70cf91e
14 changed files with 329 additions and 112 deletions

View file

@ -287,8 +287,8 @@
}
}
.primary-navigation > div > ul,
.woo-navigation > div > ul {
.primary-navigation div > ul,
.woo-navigation div > ul {
display: flex;
justify-content: var(--primary-nav--justify-content);
flex-wrap: wrap;
@ -300,55 +300,55 @@
/* Sub-menus Flyout */
}
.primary-navigation > div > ul ul,
.woo-navigation > div > ul ul {
.primary-navigation div > ul ul,
.woo-navigation div > ul ul {
padding-right: 0;
}
.primary-navigation > div > ul li,
.woo-navigation > div > ul li {
.primary-navigation div > ul li,
.woo-navigation div > ul li {
display: block;
position: relative;
width: 100%;
z-index: 1;
}
.primary-navigation > div > ul li:hover, .primary-navigation > div > ul li:focus-within,
.woo-navigation > div > ul li:hover,
.woo-navigation > div > ul li:focus-within {
.primary-navigation div > ul li:hover, .primary-navigation div > ul li:focus-within,
.woo-navigation div > ul li:hover,
.woo-navigation div > ul li:focus-within {
cursor: pointer;
z-index: 99999;
}
@media only screen and (min-width: 482px) {
.primary-navigation > div > ul li,
.woo-navigation > div > ul li {
.primary-navigation div > ul li,
.woo-navigation div > ul li {
display: inherit;
width: inherit;
/* Submenu display */
}
.primary-navigation > div > ul li:hover > ul,
.primary-navigation > div > ul li:focus-within > ul,
.primary-navigation > div > ul li ul:hover,
.primary-navigation > div > ul li ul:focus,
.woo-navigation > div > ul li:hover > ul,
.woo-navigation > div > ul li:focus-within > ul,
.woo-navigation > div > ul li ul:hover,
.woo-navigation > div > ul li ul:focus {
.primary-navigation div > ul li:hover > ul,
.primary-navigation div > ul li:focus-within > ul,
.primary-navigation div > ul li ul:hover,
.primary-navigation div > ul li ul:focus,
.woo-navigation div > ul li:hover > ul,
.woo-navigation div > ul li:focus-within > ul,
.woo-navigation div > ul li ul:hover,
.woo-navigation div > ul li ul:focus {
visibility: visible;
opacity: 1;
display: block;
}
}
.primary-navigation > div > ul > li > .sub-menu,
.woo-navigation > div > ul > li > .sub-menu {
.primary-navigation div > ul > li > .sub-menu,
.woo-navigation div > ul > li > .sub-menu {
position: relative;
}
@media only screen and (min-width: 482px) {
.primary-navigation > div > ul > li > .sub-menu,
.woo-navigation > div > ul > li > .sub-menu {
.primary-navigation div > ul > li > .sub-menu,
.woo-navigation div > ul > li > .sub-menu {
margin: 0;
background: var(--global--color-background);
box-shadow: var(--global--elevation);
@ -362,8 +362,8 @@
}
}
.primary-navigation > div > ul > li > .sub-menu .sub-menu,
.woo-navigation > div > ul > li > .sub-menu .sub-menu {
.primary-navigation div > ul > li > .sub-menu .sub-menu,
.woo-navigation div > ul > li > .sub-menu .sub-menu {
width: 100%;
}

View file

@ -287,8 +287,8 @@
}
}
.primary-navigation > div > ul,
.woo-navigation > div > ul {
.primary-navigation div > ul,
.woo-navigation div > ul {
display: flex;
justify-content: var(--primary-nav--justify-content);
flex-wrap: wrap;
@ -300,55 +300,55 @@
/* Sub-menus Flyout */
}
.primary-navigation > div > ul ul,
.woo-navigation > div > ul ul {
.primary-navigation div > ul ul,
.woo-navigation div > ul ul {
padding-left: 0;
}
.primary-navigation > div > ul li,
.woo-navigation > div > ul li {
.primary-navigation div > ul li,
.woo-navigation div > ul li {
display: block;
position: relative;
width: 100%;
z-index: 1;
}
.primary-navigation > div > ul li:hover, .primary-navigation > div > ul li:focus-within,
.woo-navigation > div > ul li:hover,
.woo-navigation > div > ul li:focus-within {
.primary-navigation div > ul li:hover, .primary-navigation div > ul li:focus-within,
.woo-navigation div > ul li:hover,
.woo-navigation div > ul li:focus-within {
cursor: pointer;
z-index: 99999;
}
@media only screen and (min-width: 482px) {
.primary-navigation > div > ul li,
.woo-navigation > div > ul li {
.primary-navigation div > ul li,
.woo-navigation div > ul li {
display: inherit;
width: inherit;
/* Submenu display */
}
.primary-navigation > div > ul li:hover > ul,
.primary-navigation > div > ul li:focus-within > ul,
.primary-navigation > div > ul li ul:hover,
.primary-navigation > div > ul li ul:focus,
.woo-navigation > div > ul li:hover > ul,
.woo-navigation > div > ul li:focus-within > ul,
.woo-navigation > div > ul li ul:hover,
.woo-navigation > div > ul li ul:focus {
.primary-navigation div > ul li:hover > ul,
.primary-navigation div > ul li:focus-within > ul,
.primary-navigation div > ul li ul:hover,
.primary-navigation div > ul li ul:focus,
.woo-navigation div > ul li:hover > ul,
.woo-navigation div > ul li:focus-within > ul,
.woo-navigation div > ul li ul:hover,
.woo-navigation div > ul li ul:focus {
visibility: visible;
opacity: 1;
display: block;
}
}
.primary-navigation > div > ul > li > .sub-menu,
.woo-navigation > div > ul > li > .sub-menu {
.primary-navigation div > ul > li > .sub-menu,
.woo-navigation div > ul > li > .sub-menu {
position: relative;
}
@media only screen and (min-width: 482px) {
.primary-navigation > div > ul > li > .sub-menu,
.woo-navigation > div > ul > li > .sub-menu {
.primary-navigation div > ul > li > .sub-menu,
.woo-navigation div > ul > li > .sub-menu {
margin: 0;
background: var(--global--color-background);
box-shadow: var(--global--elevation);
@ -362,8 +362,8 @@
}
}
.primary-navigation > div > ul > li > .sub-menu .sub-menu,
.woo-navigation > div > ul > li > .sub-menu .sub-menu {
.primary-navigation div > ul > li > .sub-menu .sub-menu,
.woo-navigation div > ul > li > .sub-menu .sub-menu {
width: 100%;
}

File diff suppressed because one or more lines are too long

View file

@ -239,7 +239,7 @@
}
// Menu list wrapper
& > div > ul {
& div > ul {
display: flex;
justify-content: var(--primary-nav--justify-content);
flex-wrap: wrap;

View file

@ -53,9 +53,9 @@ $site-branding-height: 68px;
@include media( laptop-only ){ // TODO - use $navigation-max-break-point variable
.primary-menu-container {
background: var(--primary-nav--color-background);
/*background: var(--primary-nav--color-background);
padding: var(--global--spacing-unit);
top: $site-branding-height;
top: $site-branding-height;*/
.admin-bar & {
top: $site-branding-height + $admin-bar-height;

View file

@ -7,5 +7,6 @@
--global--spacing-vertical: 35px;
--responsive--aligndefault-width: min(calc(100vw - 2 * var(--global--spacing-horizontal)), #{$default_width});
--responsive--alignwide-width: min(calc(100vw - 2 * var(--global--spacing-horizontal)), #{$alignwide_width});
--wpadmin-bar--height: 32px;
}
}

View file

@ -11,6 +11,20 @@ $navigation-max-break-point: 'laptop-only';
.primary-navigation,
.woo-navigation {
// Top-level Menu Item
.primary-menu-container > ul > .menu-item {
padding: 0;
@include media( $navigation-min-break-point ) {
padding: 0 var(--primary-nav--padding);
&:last-child {
padding-right: 0;
}
}
}
.sub-menu {
@include media( $navigation-min-break-point ) {
padding: calc(0.5 * var(--primary-nav--padding)) calc( 2 * var(--primary-nav--padding) );
@ -21,3 +35,20 @@ $navigation-max-break-point: 'laptop-only';
}
}
}
.social-navigation > div {
ul li {
width: auto;
}
}
.primary-navigation-open .extra-navigation-wrapper {
background: var(--primary-nav--color-background);
padding: var(--global--spacing-unit) var(--global--spacing-horizontal);
visibility: visible;
opacity: 1;
top: 50px; // TODO adjust with admin bad
right: 0;
bottom: 30px; //Not sure why this div is offset by 30px
left: 0;
}

121
spearhead/header.php Normal file
View file

@ -0,0 +1,121 @@
<?php
/**
* The header for our theme
*
* This is the template that displays all of the <head> section and everything up until <div id="content">
*
* @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
*
* @package Seedlet
* @since 1.0.0
*/
?><!doctype html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="profile" href="https://gmpg.org/xfn/11" />
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<?php wp_body_open(); ?>
<div id="page" class="site">
<a class="skip-link screen-reader-text" href="#content"><?php _e( 'Skip to content', 'seedlet' ); ?></a>
<header id="masthead" class="site-header default-max-width" role="banner">
<?php get_template_part( 'template-parts/header/site-branding' ); ?>
<?php if ( has_nav_menu( 'primary' ) ) : ?>
<nav id="site-navigation" class="primary-navigation" role="navigation" aria-label="<?php esc_attr_e( 'Main', 'seedlet' ); ?>">
<button id="primary-close-menu" class="button close">
<span class="dropdown-icon close"><?php _e( 'Close', 'seedlet' ); ?> <?php echo seedlet_get_icon_svg( 'close' ); ?></span>
<span class="hide-visually collapsed-text"><?php _e( 'collapsed', 'seedlet' ); ?></span>
</button>
<div class="extra-navigation-wrapper">
<?php
// Get menu slug
$location_name = 'primary';
$locations = get_nav_menu_locations();
$menu_id = $locations[ $location_name ];
$menu_obj = wp_get_nav_menu_object( $menu_id );
wp_nav_menu(
array(
'theme_location' => 'primary',
'menu_class' => 'menu-wrapper',
'container_class' => 'primary-menu-container',
'items_wrap' => '<ul id="%1$s" class="%2$s">%3$s</ul>',
)
);
?>
<?php if ( has_nav_menu( 'social' ) ) : ?>
<nav class="social-navigation" role="navigation" aria-label="<?php esc_attr_e( 'Social Links Menu', 'seedlet' ); ?>">
<?php
wp_nav_menu(
array(
'theme_location' => 'social',
'link_before' => '<span class="screen-reader-text">',
'link_after' => '</span>' . seedlet_get_icon_svg( 'link' ),
'depth' => 1,
)
);
?>
</nav><!-- .social-navigation -->
<?php endif; ?>
</div><!-- .extra-navigation-wrapper -->
</nav><!-- #site-navigation -->
<?php endif; ?>
<div class="menu-button-container">
<?php if ( has_nav_menu( 'primary' ) ) : ?>
<button id="primary-open-menu" class="button open">
<span class="dropdown-icon open"><?php _e( 'Menu', 'seedlet' ); ?> <?php echo seedlet_get_icon_svg( 'menu' ); ?></span>
<span class="hide-visually expanded-text"><?php _e( 'expanded', 'seedlet' ); ?></span>
</button>
<?php endif; ?>
</div>
<?php if ( class_exists( 'WooCommerce' ) ) : ?>
<nav class="woo-navigation" role="navigation" aria-label="<?php esc_attr_e( 'Woo Minicart', 'seedlet' ); ?>">
<?php
echo( sprintf(
'<button id="woo-close-menu" class="button close">
<span class="dropdown-icon close">%1$s %2$s</span>
<span class="hide-visually collapsed-text">%3$s</span>
</button>
<div class="woocommerce-menu-container">
<ul id="woocommerce-menu" class="menu-wrapper"">
<li class="menu-item woocommerce-menu-item %4$s" title="%5$s">
%6$s
<ul class="sub-menu">
<li class="woocommerce-cart-widget" title="%7$s">
%8$s
</li>
</ul>
</li>',
esc_html__( 'Close', 'seedlet' ),
seedlet_get_icon_svg( 'close' ),
esc_html__( 'collapsed', 'seedlet' ),
is_cart() ? 'current-menu-item' : '',
esc_attr__( 'View your shopping cart', 'seedlet' ),
seedlet_cart_link(),
esc_attr__( 'View your shopping list', 'seedlet' ),
seedlet_cart_widget()
) );
?>
</nav><!-- .woo-navigation -->
<?php endif; ?>
<div class="menu-button-container">
<?php if ( class_exists( 'WooCommerce' ) ) : ?>
<button id="woo-open-menu" class="button open">
<span class="dropdown-icon open"><?php echo seedlet_get_icon_svg( 'shopping_cart' ); ?> <?php _e( 'Cart', 'seedlet' ); ?></span>
<span class="hide-visually expanded-text"><?php esc_html__( 'expanded', 'seedlet' ); ?></span>
</button>
<?php endif; ?>
</div>
</header><!-- #masthead -->
<div id="content" class="site-content">

View file

@ -290,8 +290,8 @@
}
}
.primary-navigation > div > ul,
.woo-navigation > div > ul {
.primary-navigation div > ul,
.woo-navigation div > ul {
display: flex;
justify-content: var(--primary-nav--justify-content);
flex-wrap: wrap;
@ -303,55 +303,55 @@
/* Sub-menus Flyout */
}
.primary-navigation > div > ul ul,
.woo-navigation > div > ul ul {
.primary-navigation div > ul ul,
.woo-navigation div > ul ul {
padding-right: 0;
}
.primary-navigation > div > ul li,
.woo-navigation > div > ul li {
.primary-navigation div > ul li,
.woo-navigation div > ul li {
display: block;
position: relative;
width: 100%;
z-index: 1;
}
.primary-navigation > div > ul li:hover, .primary-navigation > div > ul li:focus-within,
.woo-navigation > div > ul li:hover,
.woo-navigation > div > ul li:focus-within {
.primary-navigation div > ul li:hover, .primary-navigation div > ul li:focus-within,
.woo-navigation div > ul li:hover,
.woo-navigation div > ul li:focus-within {
cursor: pointer;
z-index: 99999;
}
@media only screen and (min-width: 830px) {
.primary-navigation > div > ul li,
.woo-navigation > div > ul li {
.primary-navigation div > ul li,
.woo-navigation div > ul li {
display: inherit;
width: inherit;
/* Submenu display */
}
.primary-navigation > div > ul li:hover > ul,
.primary-navigation > div > ul li:focus-within > ul,
.primary-navigation > div > ul li ul:hover,
.primary-navigation > div > ul li ul:focus,
.woo-navigation > div > ul li:hover > ul,
.woo-navigation > div > ul li:focus-within > ul,
.woo-navigation > div > ul li ul:hover,
.woo-navigation > div > ul li ul:focus {
.primary-navigation div > ul li:hover > ul,
.primary-navigation div > ul li:focus-within > ul,
.primary-navigation div > ul li ul:hover,
.primary-navigation div > ul li ul:focus,
.woo-navigation div > ul li:hover > ul,
.woo-navigation div > ul li:focus-within > ul,
.woo-navigation div > ul li ul:hover,
.woo-navigation div > ul li ul:focus {
visibility: visible;
opacity: 1;
display: block;
}
}
.primary-navigation > div > ul > li > .sub-menu,
.woo-navigation > div > ul > li > .sub-menu {
.primary-navigation div > ul > li > .sub-menu,
.woo-navigation div > ul > li > .sub-menu {
position: relative;
}
@media only screen and (min-width: 830px) {
.primary-navigation > div > ul > li > .sub-menu,
.woo-navigation > div > ul > li > .sub-menu {
.primary-navigation div > ul > li > .sub-menu,
.woo-navigation div > ul > li > .sub-menu {
margin: 0;
background: var(--global--color-background);
box-shadow: var(--global--elevation);
@ -365,8 +365,8 @@
}
}
.primary-navigation > div > ul > li > .sub-menu .sub-menu,
.woo-navigation > div > ul > li > .sub-menu .sub-menu {
.primary-navigation div > ul > li > .sub-menu .sub-menu,
.woo-navigation div > ul > li > .sub-menu .sub-menu {
width: 100%;
}
@ -524,6 +524,22 @@
}
}
.primary-navigation .primary-menu-container > ul > .menu-item,
.woo-navigation .primary-menu-container > ul > .menu-item {
padding: 0;
}
@media only screen and (min-width: 830px) {
.primary-navigation .primary-menu-container > ul > .menu-item,
.woo-navigation .primary-menu-container > ul > .menu-item {
padding: 0 var(--primary-nav--padding);
}
.primary-navigation .primary-menu-container > ul > .menu-item:last-child,
.woo-navigation .primary-menu-container > ul > .menu-item:last-child {
padding-left: 0;
}
}
@media only screen and (min-width: 830px) {
.primary-navigation .sub-menu,
.woo-navigation .sub-menu {
@ -533,4 +549,19 @@
.woo-navigation .sub-menu > .menu-item.menu-item-has-children {
padding: calc(0.5 * var(--primary-nav--padding)) 0 0 calc( 2 * var(--primary-nav--padding));
}
}
.social-navigation > div ul li {
width: auto;
}
.primary-navigation-open .extra-navigation-wrapper {
background: var(--primary-nav--color-background);
padding: var(--global--spacing-unit) var(--global--spacing-horizontal);
visibility: visible;
opacity: 1;
top: 50px;
left: 0;
bottom: 30px;
right: 0;
}

View file

@ -290,8 +290,8 @@
}
}
.primary-navigation > div > ul,
.woo-navigation > div > ul {
.primary-navigation div > ul,
.woo-navigation div > ul {
display: flex;
justify-content: var(--primary-nav--justify-content);
flex-wrap: wrap;
@ -303,55 +303,55 @@
/* Sub-menus Flyout */
}
.primary-navigation > div > ul ul,
.woo-navigation > div > ul ul {
.primary-navigation div > ul ul,
.woo-navigation div > ul ul {
padding-left: 0;
}
.primary-navigation > div > ul li,
.woo-navigation > div > ul li {
.primary-navigation div > ul li,
.woo-navigation div > ul li {
display: block;
position: relative;
width: 100%;
z-index: 1;
}
.primary-navigation > div > ul li:hover, .primary-navigation > div > ul li:focus-within,
.woo-navigation > div > ul li:hover,
.woo-navigation > div > ul li:focus-within {
.primary-navigation div > ul li:hover, .primary-navigation div > ul li:focus-within,
.woo-navigation div > ul li:hover,
.woo-navigation div > ul li:focus-within {
cursor: pointer;
z-index: 99999;
}
@media only screen and (min-width: 830px) {
.primary-navigation > div > ul li,
.woo-navigation > div > ul li {
.primary-navigation div > ul li,
.woo-navigation div > ul li {
display: inherit;
width: inherit;
/* Submenu display */
}
.primary-navigation > div > ul li:hover > ul,
.primary-navigation > div > ul li:focus-within > ul,
.primary-navigation > div > ul li ul:hover,
.primary-navigation > div > ul li ul:focus,
.woo-navigation > div > ul li:hover > ul,
.woo-navigation > div > ul li:focus-within > ul,
.woo-navigation > div > ul li ul:hover,
.woo-navigation > div > ul li ul:focus {
.primary-navigation div > ul li:hover > ul,
.primary-navigation div > ul li:focus-within > ul,
.primary-navigation div > ul li ul:hover,
.primary-navigation div > ul li ul:focus,
.woo-navigation div > ul li:hover > ul,
.woo-navigation div > ul li:focus-within > ul,
.woo-navigation div > ul li ul:hover,
.woo-navigation div > ul li ul:focus {
visibility: visible;
opacity: 1;
display: block;
}
}
.primary-navigation > div > ul > li > .sub-menu,
.woo-navigation > div > ul > li > .sub-menu {
.primary-navigation div > ul > li > .sub-menu,
.woo-navigation div > ul > li > .sub-menu {
position: relative;
}
@media only screen and (min-width: 830px) {
.primary-navigation > div > ul > li > .sub-menu,
.woo-navigation > div > ul > li > .sub-menu {
.primary-navigation div > ul > li > .sub-menu,
.woo-navigation div > ul > li > .sub-menu {
margin: 0;
background: var(--global--color-background);
box-shadow: var(--global--elevation);
@ -365,8 +365,8 @@
}
}
.primary-navigation > div > ul > li > .sub-menu .sub-menu,
.woo-navigation > div > ul > li > .sub-menu .sub-menu {
.primary-navigation div > ul > li > .sub-menu .sub-menu,
.woo-navigation div > ul > li > .sub-menu .sub-menu {
width: 100%;
}
@ -524,6 +524,22 @@
}
}
.primary-navigation .primary-menu-container > ul > .menu-item,
.woo-navigation .primary-menu-container > ul > .menu-item {
padding: 0;
}
@media only screen and (min-width: 830px) {
.primary-navigation .primary-menu-container > ul > .menu-item,
.woo-navigation .primary-menu-container > ul > .menu-item {
padding: 0 var(--primary-nav--padding);
}
.primary-navigation .primary-menu-container > ul > .menu-item:last-child,
.woo-navigation .primary-menu-container > ul > .menu-item:last-child {
padding-right: 0;
}
}
@media only screen and (min-width: 830px) {
.primary-navigation .sub-menu,
.woo-navigation .sub-menu {
@ -535,4 +551,19 @@
}
}
.social-navigation > div ul li {
width: auto;
}
.primary-navigation-open .extra-navigation-wrapper {
background: var(--primary-nav--color-background);
padding: var(--global--spacing-unit) var(--global--spacing-horizontal);
visibility: visible;
opacity: 1;
top: 50px;
right: 0;
bottom: 30px;
left: 0;
}
/*# sourceMappingURL=navigation.css.map */

File diff suppressed because one or more lines are too long

View file

@ -52,6 +52,7 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
--global--spacing-vertical: 35px;
--responsive--aligndefault-width: min(calc(100vw - 2 * var(--global--spacing-horizontal)), 782px);
--responsive--alignwide-width: min(calc(100vw - 2 * var(--global--spacing-horizontal)), 1247px);
--wpadmin-bar--height: 32px;
}
}
@ -243,9 +244,9 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
@media only screen and (max-width: 829px) {
.site-header .primary-navigation .primary-menu-container {
background: var(--primary-nav--color-background);
padding: var(--global--spacing-unit);
top: 68px;
/*background: var(--primary-nav--color-background);
padding: var(--global--spacing-unit);
top: $site-branding-height;*/
}
.admin-bar .site-header .primary-navigation .primary-menu-container {
top: 114px;

View file

@ -52,6 +52,7 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
--global--spacing-vertical: 35px;
--responsive--aligndefault-width: min(calc(100vw - 2 * var(--global--spacing-horizontal)), 782px);
--responsive--alignwide-width: min(calc(100vw - 2 * var(--global--spacing-horizontal)), 1247px);
--wpadmin-bar--height: 32px;
}
}
@ -243,9 +244,9 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
@media only screen and (max-width: 829px) {
.site-header .primary-navigation .primary-menu-container {
background: var(--primary-nav--color-background);
padding: var(--global--spacing-unit);
top: 68px;
/*background: var(--primary-nav--color-background);
padding: var(--global--spacing-unit);
top: $site-branding-height;*/
}
.admin-bar .site-header .primary-navigation .primary-menu-container {
top: 114px;

File diff suppressed because one or more lines are too long