From 90f471fbc2bf0403d43ec1fab1961f01c2af7afe Mon Sep 17 00:00:00 2001
From: Callin Mullaney <57088-callinmullaney@users.noreply.drupalcode.org>
Date: Fri, 13 Sep 2024 14:10:56 -0500
Subject: [PATCH] feat: mobile styles

---
 .../menus/main-menu/_01-main-menu-item.scss   |  17 ---
 .../navigation/base/_menu-item.twig           |   2 +-
 .../base/menu-toggle/_menu-toggle.scss        |   9 +-
 .../base/menu-toggle/menu-toggle.twig         |   3 +-
 src/components/navigation/base/menu.twig      |   1 +
 .../navigation/main/_main-item.scss           |  29 +----
 .../navigation/main/_main-link.scss           |  87 ++++----------
 .../navigation/main/_main-list.scss           |   4 +-
 .../navigation/main/_main-toggle.scss         | 112 +++++++++++++-----
 .../navigation/main/_main-wrapper.scss        |  90 +++++++++-----
 src/foundation/utility/cl-base.scss           |   4 -
 11 files changed, 181 insertions(+), 177 deletions(-)

diff --git a/src/components/menus/main-menu/_01-main-menu-item.scss b/src/components/menus/main-menu/_01-main-menu-item.scss
index 7f649fb..263bd5a 100644
--- a/src/components/menus/main-menu/_01-main-menu-item.scss
+++ b/src/components/menus/main-menu/_01-main-menu-item.scss
@@ -53,8 +53,6 @@
     border-right: 12px solid transparent;
     content: '';
     display: block;
-    margin-right: -12px;
-    margin-top: -6px;
     position: absolute;
     right: 50%;
     top: 50%;
@@ -73,18 +71,3 @@
     }
   }
 }
-
-/*
- * Sub Navigation
- */
-
-/* LI (Nested) */
-.main-menu__item--sub {
-  @include breakpoint('medium') {
-    display: block;
-
-    &:not(:first-child) {
-      border-top: 1px solid clr(highlight);
-    }
-  }
-}
diff --git a/src/components/navigation/base/_menu-item.twig b/src/components/navigation/base/_menu-item.twig
index ab0ab08..22d834d 100644
--- a/src/components/navigation/base/_menu-item.twig
+++ b/src/components/navigation/base/_menu-item.twig
@@ -1,4 +1,4 @@
-{% set item__modifiers = item__modifiers|default([]) %}
+{% set item__modifiers = [] %}
 {% set item__modifiers = item__modifiers|merge(['level-' ~ menu__level]) %}
 {% set item__attributes = item__attributes|default({}) %}
 {% set item__parent = item__parent|default([]) %}
diff --git a/src/components/navigation/base/menu-toggle/_menu-toggle.scss b/src/components/navigation/base/menu-toggle/_menu-toggle.scss
index dcc99d7..b52b8af 100644
--- a/src/components/navigation/base/menu-toggle/_menu-toggle.scss
+++ b/src/components/navigation/base/menu-toggle/_menu-toggle.scss
@@ -24,9 +24,8 @@ nav > [class$='__toggle'] {
 [class$='__toggle__bars'] {
   position: relative;
   display: block;
-  margin-right: space(0.75);
-  height: space(1);
-  width: space(1.5);
+  height: var(--size-lg);
+  width: var(--size-xl);
 }
 
 [class$='__toggle__bar'] {
@@ -35,9 +34,9 @@ nav > [class$='__toggle'] {
   & {
     position: absolute;
     display: block;
-    height: space(0.125);
+    height: var(--size-xs);
     width: 100%;
-    background: clr(text);
+    background: var(--button-color-label);
   }
 
   &:nth-child(1) {
diff --git a/src/components/navigation/base/menu-toggle/menu-toggle.twig b/src/components/navigation/base/menu-toggle/menu-toggle.twig
index 27052ec..20745a7 100644
--- a/src/components/navigation/base/menu-toggle/menu-toggle.twig
+++ b/src/components/navigation/base/menu-toggle/menu-toggle.twig
@@ -1,5 +1,6 @@
 {% set menu_toggle__base_class = menu__base_class ~ '__toggle' %}
 {% set menu_toggle__menu__label = menu_toggle__menu__label|default('Menu') %}
+{% set menu_toggle__style = menu_toggle__style|default('clean') %}
 {% set menu_toggle__attributes = menu_toggle__attributes|default([]) %}
 {% set menu_toggle__attributes = menu_toggle__attributes|merge({
   'data-menu-level': menu_toggle__menu__level,
@@ -20,7 +21,7 @@
 {% embed "@components/button/button.twig" with {
   button__content: true,
   button__additional_classes: [menu_toggle__base_class],
-  button__style: 'clean',
+  button__style: menu_toggle__style,
   button__icon: menu_toggle__icon,
   aria_expanded: 'false',
   button__attributes: menu_toggle__attributes,
diff --git a/src/components/navigation/base/menu.twig b/src/components/navigation/base/menu.twig
index 9a34aa9..f4ea26f 100644
--- a/src/components/navigation/base/menu.twig
+++ b/src/components/navigation/base/menu.twig
@@ -57,6 +57,7 @@
 {% block menu_toggle__toggle %}
 	{% include "@components/navigation/base/menu-toggle/menu-toggle.twig" with {
 			menu_toggle__menu__level: 'level-' ~ menu__level,
+			menu_toggle__style: 'primary',
 			menu_toggle__attributes: {
 				'aria-controls': menu__toggle__id,
 			},
diff --git a/src/components/navigation/main/_main-item.scss b/src/components/navigation/main/_main-item.scss
index d827e93..2d3429c 100644
--- a/src/components/navigation/main/_main-item.scss
+++ b/src/components/navigation/main/_main-item.scss
@@ -7,34 +7,11 @@
   display: flex;
   flex-flow: row wrap;
 
-  &:hover,
-  &:focus,
-  &:focus-within {
-    > * {
-      color: clr(primary);
-    }
-
-    > .main-nav__placeholder {
-      text-decoration: none;
-      color: clr(text);
-    }
-
-    .main-nav__toggle {
-      @include animate-show;
-
-      & {
-        color: clr(primary);
-      }
-    }
-
-    .icon {
-      fill: clr(primary);
-    }
-  }
+  &:not(:last-child) {
+    border-bottom: 1px solid var(--button-color-bkg);
 
-  &--level-1:not(:last-child) {
     @include breakpoint('medium') {
-      border-bottom: 1px solid clr(neutral, n200);
+      border-bottom: 0;
     }
   }
 }
diff --git a/src/components/navigation/main/_main-link.scss b/src/components/navigation/main/_main-link.scss
index f780334..484188d 100644
--- a/src/components/navigation/main/_main-link.scss
+++ b/src/components/navigation/main/_main-link.scss
@@ -8,9 +8,9 @@
   @include link('no-underline');
 
   & {
-    background: var(--main-menu-color-link-bg);
     color: var(--main-menu-color-link-label);
     display: block;
+    flex: 1 1 auto;
     font-size: var(--font-size-h5);
     line-height: var(--line-heights-none);
     padding: var(--spacing-md) var(--spacing-lg);
@@ -26,6 +26,10 @@
     width: auto;
   }
 
+  &.main-nav__link--with-sub {
+    padding-right: var(--spacing-xl);
+  }
+
   &.active,
   &:hover,
   &:focus {
@@ -37,26 +41,7 @@
     outline-offset: -2px;
   }
 
-  .sub--open > &,
-  .sub--open:focus-within > &,
-  .main-nav__item:hover & {
-    color: clr(neutral, n400);
-    margin: 0;
-
-    @include breakpoint('medium') {
-      border-color: clr(accent, bright, 'green');
-    }
-
-    ~ .main-nav__toggle {
-      @include animate-show;
-
-      & {
-        color: clr(neutral, n400);
-      }
-    }
-  }
-
-  .main-nav__item--level-0:not(.main-nav__item--level-1) > & {
+  .main-nav__item--level-1 > & {
     cursor: pointer;
     overflow: visible;
 
@@ -64,11 +49,7 @@
       @include breakpoint('medium') {
         content: '';
         display: block;
-        width: calc(100% - #{space(3)});
-        height: space(0.125);
-        background-color: clr(primary);
         position: absolute;
-        bottom: space(0.5);
       }
     }
 
@@ -76,32 +57,18 @@
       @include breakpoint('small-down') {
         content: '';
         display: block;
-        background-color: clr(primary, dark);
-        width: space(3);
-        height: space(2);
-        top: space(1);
         position: absolute;
-        left: calc(#{space(3)} * -1);
-        border-radius: 0 space(2) space(2) 0;
-      }
-    }
-
-    &--with-sub {
-      @include breakpoint('large') {
-        padding: space(1) space(2) space(1) space(1);
       }
     }
   }
 
-  .main-nav__item:last-child & {
-    @include breakpoint('medium') {
-      padding-right: space(1);
-    }
+  .sub--open > &,
+  .sub--open:focus-within > &,
+  .main-nav__item:hover & {
+    margin: 0;
 
-    .stuck & {
-      @include breakpoint('medium') {
-        padding-right: space(1);
-      }
+    ~ .main-nav__toggle {
+      @include animate-show;
     }
   }
 }
@@ -111,10 +78,9 @@
   border-left: 0;
   border-radius: 0;
   white-space: nowrap;
-  color: clr(text);
   width: auto;
   margin: 0;
-  padding: space(0.75);
+  padding: var(--spacing-md);
   display: flex;
   align-content: center;
   overflow: visible;
@@ -133,26 +99,6 @@
   &[aria-current='page'],
   &.main-nav__link--active {
     padding-left: space(1.5);
-
-    &::before {
-      content: '';
-      display: block;
-      background-color: clr(primary, dark);
-      height: space(2);
-      width: space(2) + space(1.5);
-      top: 0.45rem;
-      left: calc(#{space(3)} * -1);
-      position: absolute;
-      border-radius: 0 space(2) space(2) 0;
-
-      @include breakpoint('medium') {
-        background-color: clr(primary, bright);
-        height: 100%;
-        top: 0;
-        left: calc(#{space(1.5)} * -1);
-        width: space(2);
-      }
-    }
   }
 
   .main-nav__item:last-child > & {
@@ -162,3 +108,10 @@
     }
   }
 }
+
+.main-nav__link--level-1,
+.main-nav__link--level-2 {
+  @include breakpoint('small-down') {
+    padding-left: var(--spacing-xl);
+  }
+}
diff --git a/src/components/navigation/main/_main-list.scss b/src/components/navigation/main/_main-list.scss
index 5d0738e..e249419 100644
--- a/src/components/navigation/main/_main-list.scss
+++ b/src/components/navigation/main/_main-list.scss
@@ -8,8 +8,8 @@
   & {
     display: flex;
     flex-flow: column nowrap;
-    width: var(--content-width-wide);
-    margin: space(1) auto 0;
+    width: 100%;
+    margin: 0 auto;
   }
 
   @include breakpoint('medium') {
diff --git a/src/components/navigation/main/_main-toggle.scss b/src/components/navigation/main/_main-toggle.scss
index 8aa700b..cb6207d 100644
--- a/src/components/navigation/main/_main-toggle.scss
+++ b/src/components/navigation/main/_main-toggle.scss
@@ -5,10 +5,14 @@
 @use '../../../foundation/utility/utility' as *;
 
 .main-nav__toggle {
-  padding: (space(1) + space(0.33)) 0 (space(1) + space(0.33)) space(1);
   font-size: 0;
   z-index: 2;
 
+  &:not([data-menu-level='level-0']) {
+    padding: 0;
+    border: 0;
+  }
+
   &:not([data-menu-level='level-1']) {
     @include breakpoint('medium') {
       @include animate-hidden;
@@ -20,6 +24,8 @@
   }
 
   &[data-menu-level='level-0'] {
+    padding: var(--button-padding-x);
+
     @include breakpoint('medium') {
       display: none;
     }
@@ -31,13 +37,7 @@
 
   &:focus,
   &:focus-visible {
-    fill: clr(primary);
     outline-offset: 0;
-    border-radius: 0;
-  }
-
-  .icon {
-    fill: clr(text);
   }
 
   .main-nav__item:focus-within & {
@@ -46,44 +46,102 @@
 
   .main-nav__item & {
     display: inline-flex;
-    padding: space(1) space(3) space(1) space(0.5);
+    height: auto;
     z-index: 1;
 
     @include breakpoint('medium') {
       position: absolute;
-      right: 0;
-      top: 0;
-      padding: space(1) 0 space(1) space(0.25);
     }
 
-    @include breakpoint('large') {
-      padding: space(1) space(0.25);
+    .icon {
+      height: calc(var(--size-lg) + var(--size-md));
+      width: calc(var(--size-lg) + var(--size-md));
     }
+  }
 
+  .sub--open > &,
+  &[aria-expanded='true'] {
     .icon {
-      width: space(2);
-      max-height: space(2);
-      fill: clr(primary, dark);
-
-      @include breakpoint('medium') {
-        width: space(1.5);
-        max-height: space(1.5);
-        fill: clr(primary);
+      transform: rotate(180deg);
+    }
+  }
+
+  &[data-menu-level='level-1'] {
+    top: 0;
+    right: 0;
+
+    @include breakpoint('medium') {
+      top: var(--spacing-md);
+    }
+
+    @include breakpoint('small-down') {
+      border-radius: 0;
+      background-color: var(--button-color-bkg);
+      padding: calc(var(--button-padding-x) / 4);
+
+      .sub--open > & {
+        border-radius: var(--button-radius) var(--button-radius) 0 0;
+      }
+
+      .icon {
+        fill: var(--button-color-label);
+      }
+    }
+
+    &:focus,
+    &:hover {
+      @include breakpoint('small-down') {
+        background-color: var(--button-color-bkg);
+
+        .icon {
+          fill: var(--button-color-label);
+        }
       }
     }
   }
 
-  .sub--open &,
-  .main-nav__item:hover & {
+  &[data-menu-level='level-2'],
+  &[data-menu-level='level-3'] {
+    top: 0;
+    right: 0;
+    background-color: var(--button-color-bkg);
+    padding: calc(var(--button-padding-x) / 4);
+
+    @include breakpoint('medium') {
+      top: var(--spacing-sm);
+      right: var(--spacing-sm);
+    }
+
+    @include breakpoint('small-down') {
+      border-radius: 0;
+    }
+
+    .sub--open > & {
+      @include breakpoint('small-down') {
+        border-radius: var(--button-radius) var(--button-radius) 0 0;
+      }
+    }
+
     .icon {
-      fill: clr(neutral, n400);
-      transform: rotate(180deg);
+      fill: var(--button-color-label);
+    }
+
+    &:focus,
+    &:hover {
+      background-color: var(--button-color-bkg);
+      padding: calc(var(--button-padding-x) / 4);
+
+      .icon {
+        fill: var(--button-color-label);
+      }
     }
   }
 
-  .main-nav__item:last-child & {
+  .main-nav__item.main-nav__item--level-0:hover > & {
     @include breakpoint('medium') {
-      right: space(1) * -1;
+      .icon {
+        transform: rotate(180deg);
+      }
     }
   }
 }
diff --git a/src/components/navigation/main/_main-wrapper.scss b/src/components/navigation/main/_main-wrapper.scss
index e10fe9f..0b302a1 100644
--- a/src/components/navigation/main/_main-wrapper.scss
+++ b/src/components/navigation/main/_main-wrapper.scss
@@ -8,31 +8,35 @@
   @include transition;
 
   & {
-    position: absolute;
-    top: 100%;
-    left: 0;
-    width: 100vw;
-    background-color: clr(background);
-    border-top: 1px solid clr(neutral, n200);
-    overflow: auto;
+    @include animate-hidden;
+
+    & {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      background-color: var(--main-menu-color-bg);
+      overflow: auto;
+    }
   }
 
   @include breakpoint('medium') {
-    position: relative;
-    top: auto;
-    width: auto;
-    left: auto;
-    border: none;
-    overflow: visible;
-    min-height: auto;
-  }
+    @include animate-show;
 
-  .menu--open & {
-    background-color: clr(neutral, n50);
+    & {
+      position: relative;
+      top: auto;
+      width: auto;
+      left: auto;
+      border: none;
+      overflow: visible;
+      min-height: auto;
+    }
   }
 
-  .sub--open &,
-  .main-nav__item--with-sub:hover & {
+  // Open subnav on click.
+  .menu--open > &,
+  .sub--open > & {
     @include animate-show;
 
     & {
@@ -40,6 +44,17 @@
     }
   }
 
+  // Open subnav on hover.
+  .main-nav__item--with-sub.main-nav__item--level-0:hover > & {
+    @include breakpoint('medium') {
+      @include animate-show;
+
+      & {
+        max-height: 100vh;
+      }
+    }
+  }
+
   &--level-0 {
     .menu--open & {
       height: 100vh;
@@ -59,12 +74,13 @@
       position: relative;
       overflow: hidden;
       top: auto;
-      margin: 0 space(1);
-      border: none;
+      margin: 0;
       max-height: 0;
     }
 
     @include breakpoint('small-down') {
+      border-top: 1px solid var(--button-color-bkg);
+
       .sub--open & {
         overflow: visible;
       }
@@ -72,14 +88,34 @@
 
     @include breakpoint('medium') {
       position: absolute;
-      background-color: clr(background);
-      min-width: rem-calc(230);
-      border-left: space(0.25) solid clr(accent, bright, 'green');
-      box-shadow: 1px 3px 3px clr(text, 0.15);
-      border-radius: 0 space(0.25) space(0.25);
-      padding: 0 (space(1) + space(0.25));
+      background-color: var(--main-menu-color-dropdown-bg);
       margin: 0;
       top: 100%;
     }
   }
+
+  &--level-2 {
+    @include animate-hidden;
+    @include transition($transition-duration: 500ms);
+
+    & {
+      position: relative;
+      overflow: hidden;
+      top: auto;
+      padding: 0;
+      margin: 0;
+      background-color: var(--main-menu-color-dropdown-bg);
+      border-top: 1px solid var(--button-color-bkg);
+      border-bottom: 1px solid var(--button-color-bkg);
+      max-height: 0;
+    }
+
+    @include breakpoint('small-down') {
+      border-bottom: 0;
+
+      .sub--open & {
+        overflow: visible;
+      }
+    }
+  }
 }
diff --git a/src/foundation/utility/cl-base.scss b/src/foundation/utility/cl-base.scss
index bc4ce07..aaa5b23 100644
--- a/src/foundation/utility/cl-base.scss
+++ b/src/foundation/utility/cl-base.scss
@@ -16,10 +16,6 @@
 
   // color: var(--colors-sb-text-body);
   font-family: var(--font-family-body), serif !important;
-
-  > * {
-    height: 100vh;
-  }
 }
 
 .sb-title {