From b2d4ff20944b264b6aa0d205ae9e5da7635c1d94 Mon Sep 17 00:00:00 2001 From: Stephen Cameron Date: Tue, 19 Nov 2019 21:03:26 +0100 Subject: [PATCH] WIP #3053 --- .../CCV/resources/assets/scripts/menu.js | 28 ++++++------ .../assets/styles/components/buttons.styl | 5 +++ .../assets/styles/components/header.styl | 4 ++ .../assets/styles/components/mmenu.styl | 45 +++++++------------ .../assets/styles/components/navigation.styl | 2 +- 5 files changed, 40 insertions(+), 44 deletions(-) diff --git a/wp-content/themes/CCV/resources/assets/scripts/menu.js b/wp-content/themes/CCV/resources/assets/scripts/menu.js index 7814c51..9e31a44 100644 --- a/wp-content/themes/CCV/resources/assets/scripts/menu.js +++ b/wp-content/themes/CCV/resources/assets/scripts/menu.js @@ -5,6 +5,7 @@ import offcanvas from 'mmenu-light/bin/js/mmlight.offcanvas'; MmenuLight.prototype.offcanvas = offcanvas; const menuID = 'mobile-menu'; +let menuOpen = false; document.addEventListener( 'DOMContentLoaded', () => { @@ -23,22 +24,23 @@ document.addEventListener( // Open / Close Menu handlers document.querySelector(`a[href="#menu"]`) .addEventListener('click', (event) => { - mmenu.open(); - event.preventDefault(); - event.stopPropagation(); - - if (null === document.querySelector('#close-menu')) { - - //nav.innerHTML = '' + nav.innerHTML; - - nav.innerHTML = '' + nav.innerHTML; - - document.querySelector('#close-menu').addEventListener('click', (event) => { - mmenu.close(); - }); + if (menuOpen) { + mmenu.close(); + menuOpen = false; + } else { + mmenu.open(); + menuOpen = true; } + + event.preventDefault(); + event.stopPropagation(); }); + + // Menu can be closed by clicking outside so we can't rely on the menu button setting the closed state + document.getElementById(menuID).addEventListener('mm:close', (event) => { + menuOpen = false; + }); }); function buildMobileMenu() { diff --git a/wp-content/themes/CCV/resources/assets/styles/components/buttons.styl b/wp-content/themes/CCV/resources/assets/styles/components/buttons.styl index 416c291..b3ce76f 100644 --- a/wp-content/themes/CCV/resources/assets/styles/components/buttons.styl +++ b/wp-content/themes/CCV/resources/assets/styles/components/buttons.styl @@ -12,6 +12,7 @@ &:hover @apply bg-teal-light + // Button sizes &.elementor-size-sm @apply text-sm &.elementor-size-md @@ -21,6 +22,10 @@ &.elementor-size-xl @apply text-xl +// Button styles +.elementor-element.elementor-button-info .elementor-button + @apply bg-teal + //&-text // @apply z-10 relative diff --git a/wp-content/themes/CCV/resources/assets/styles/components/header.styl b/wp-content/themes/CCV/resources/assets/styles/components/header.styl index 9d84420..b14713b 100644 --- a/wp-content/themes/CCV/resources/assets/styles/components/header.styl +++ b/wp-content/themes/CCV/resources/assets/styles/components/header.styl @@ -10,3 +10,7 @@ header.site width: 100% background-color: transparent z-index: 20 + +.header-cta + padding: 1em 1.8em + line-height: 1.1 diff --git a/wp-content/themes/CCV/resources/assets/styles/components/mmenu.styl b/wp-content/themes/CCV/resources/assets/styles/components/mmenu.styl index a9c2942..88aa462 100644 --- a/wp-content/themes/CCV/resources/assets/styles/components/mmenu.styl +++ b/wp-content/themes/CCV/resources/assets/styles/components/mmenu.styl @@ -1,3 +1,5 @@ +$menu-header-height = 90px + :root --mm-width: 90% --mm-max-width: 308px @@ -9,9 +11,13 @@ @apply bg-purple-dark text-white antialiased font-size: 16px fixed - // Submenu header + // < Submenu header arrow + &:before + top: ($menu-header-height / 2) + // Submenu header content &:after - @apply font-display uppercase + @apply flex items-center font-display uppercase + height: $menu-header-height opacity: 0.7 box-shadow: none border-bottom: 1px solid rgba(#fff, 0.2) @@ -24,9 +30,9 @@ .menu-item margin-left: 36px - .menu-list + .menu-list, .mm--open @apply bg-purple-dark - top: 90px // Space for close button + padding + top: $menu-header-height // Space for close button + padding .menu-item @apply bg-purple-dark text-white font-display uppercase @@ -52,8 +58,10 @@ // Buttons .cta-button a + @apply font-display font-medium subpixel-antialiased display: flex - padding-left: 16px + padding-left: 1em + font-size: inherit //img // height: 20px @@ -89,30 +97,6 @@ @apply text-pink -// Close button -#close-menu - padding: 0 - position: absolute - top: 30px - right: @top - width: 30px - height: @width - z-index: 1 - cursor: pointer - outline: none - display: none - transition: color 0.2s - - &:after - display: none - - &:hover - @apply text-pink - - // Only display at the top level of the menu - .mm--main & - display: block - //================== // Burger menu icon + animation @@ -127,12 +111,13 @@ flex-direction: column justify-content: space-between z-index: 10000 // Needs to sit above MMenu + pointer-events: auto // MMenu disables pointer events outside the menu when it's open +above($breakpoint-menu) display: none &:hover - @apply text-pink + @apply text-pink !important &:after, &:before, div // 3 lines in burger icon content: '' diff --git a/wp-content/themes/CCV/resources/assets/styles/components/navigation.styl b/wp-content/themes/CCV/resources/assets/styles/components/navigation.styl index 039ab50..8ec0f59 100644 --- a/wp-content/themes/CCV/resources/assets/styles/components/navigation.styl +++ b/wp-content/themes/CCV/resources/assets/styles/components/navigation.styl @@ -7,7 +7,7 @@ @apply flex .menu-item - @apply block mx-5 relative + @apply block mx-5 relative cursor-pointer @apply border-b-2 border-transparent // Reserve space for active border @apply py-1 leading-tight // Adjust active border spacing -- 2.39.5