feat: mobile styles

emulsify-ds · Sep 13, 2024 · 90f471f · 90f471f
1 parent cf92c21
commit 90f471f
Show file tree

Hide file tree

Showing 11 changed files with 181 additions and 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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,71 +41,34 @@
     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;
 
     &--active::after {
       @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);
       }
     }
 
     &--active::before {
       @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
@@ -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') {