Fine tune styling

torchbox · Feb 10, 2025 · 70ba3dd · 70ba3dd
1 parent 1ffadb9
commit 70ba3dd
Show file tree

Hide file tree

Showing 8 changed files with 51 additions and 29 deletions.
diff --git a/...oject_styleguide/templates/patterns/navigation/components/includes/subnav-child-menu.html b/...oject_styleguide/templates/patterns/navigation/components/includes/subnav-child-menu.html
@@ -8,8 +8,8 @@
                     <span class="sub-nav-desktop__link-text">{{ gchild.value.text }}</span><span class="link-columns__tail">&nbsp;{% include "patterns/atoms/icons/icon.html" with name="arrow" classname="sub-nav-desktop__arrow" %}</span>
                 </a>
                 {% if gchild.value.description %}
-                        <span class="sub-nav-desktop__description">{{ gchild.value.description }}</span>
-                    {% endif %}
+                    <span class="sub-nav-desktop__description">{{ gchild.value.description }}</span>
+                {% endif %}
             </li>
         {% endfor %}
         {% if child.value.section_link %}

diff --git a/tbx/project_styleguide/templates/patterns/navigation/components/includes/subnav-menu.html b/tbx/project_styleguide/templates/patterns/navigation/components/includes/subnav-menu.html
@@ -9,17 +9,17 @@
                         {{ child.value.text }}
                     </a>
                     {% if child.value.description %}
-                            <span class="sub-nav-desktop__description">{{ child.value.description }}</span>
-                        {% endif %}
+                        <span class="sub-nav-desktop__description">{{ child.value.description }}</span>
+                    {% endif %}
                 </li>
             {% elif child.block_type == "menu" %}
                 <li class="sub-nav-desktop__item">
-                        <span class="sub-nav-desktop__heading">
-                            {{ child.value.section_heading }}
-                        </span>
-                        {% if child.value.child_links %}
-                            {% include "patterns/navigation/components/includes/subnav-child-menu.html" with child=child %}
-                        {% endif %}
+                    <span class="sub-nav-desktop__heading">
+                        {{ child.value.section_heading }}
+                    </span>
+                    {% if child.value.child_links %}
+                        {% include "patterns/navigation/components/includes/subnav-child-menu.html" with child=child %}
+                    {% endif %}
                 </li>
             {% endif %}
         {% endfor %}

diff --git a/tbx/project_styleguide/templates/patterns/navigation/components/secondary-nav.html b/tbx/project_styleguide/templates/patterns/navigation/components/secondary-nav.html
@@ -12,10 +12,10 @@
             {% elif block.block_type == "menu" %}
                 <li class="secondary-nav-desktop__item" data-has-subnav>
                     <button
-                       class="secondary-nav-desktop__link"
-                       data-open-subnav
-                       aria-haspopup="true"
-                       aria-expanded="false">
+                        class="secondary-nav-desktop__link"
+                        data-open-subnav
+                        aria-haspopup="true"
+                        aria-expanded="false">
                         {{ block.value.section_heading }}
                         <div class="secondary-nav-desktop__icon-wrapper">
                             {% include "patterns/atoms/icons/icon.html" with name="chevron" classname="secondary-nav-desktop__icon-closed" only %}

diff --git a/tbx/project_styleguide/templates/patterns/organisms/header/header.html b/tbx/project_styleguide/templates/patterns/organisms/header/header.html
@@ -47,10 +47,10 @@
         <div class="header__bottom grid__header-nav">
             <div class="header__logo">
                 {% include "patterns/atoms/icons/icon.html" with name="logo" classname="logo" %}
-            <span class="logo__label">
-                {% if page.label %}{{ page.label }}{% endif %}
-                {% if page.final_division and page.final_division.label %}{{ page.final_division.label }}{% endif %}
-            </span>
+                <span class="logo__label">
+                    {% if page.label %}{{ page.label }}{% endif %}
+                    {% if page.final_division and page.final_division.label %}{{ page.final_division.label }}{% endif %}
+                </span>
             </div>
 
             {# Secondary desktop navigation #}

diff --git a/tbx/static_src/sass/components/navigation/_secondary-nav-mobile.scss b/tbx/static_src/sass/components/navigation/_secondary-nav-mobile.scss
@@ -45,23 +45,27 @@ Styles for the top level of the navigation at mobile
         align-items: center;
         width: 100%;
         padding: $spacer-small;
-        border-bottom: 2px solid var(--color--border);
-
-        &:focus {
-            @include focus-style();
-        }
+        border-bottom: 2px solid var(--color--light-border);
+        color: var(--color--link);
 
         &--has-children {
             justify-content: space-between;
-            color: var(--color--link);
         }
 
         &--no-children {
             @include link-styles(
                 $color: var(--color--link),
-                $interaction-color: var(--color--link),
+                $interaction-color: var(--color--theme-primary),
                 $underline-color: var(--color--link)
             );
+
+            &:hover {
+                transition: color $transition-quick;
+
+                @include reduced-motion() {
+                    transition: none;
+                }
+            }
         }
     }
 

diff --git a/tbx/static_src/sass/components/navigation/_sub-nav-desktop.scss b/tbx/static_src/sass/components/navigation/_sub-nav-desktop.scss
@@ -107,9 +107,17 @@ Styles for the lower levels of the navigation at desktop
         @include font-size('size-five-b');
         @include link-styles(
             $color: var(--color--link),
-            $interaction-color: var(--color--link),
-            $offset: 5px
+            $interaction-color: var(--color--theme-primary),
+            $underline-color: var(--color--link)
         );
+
+        &:hover {
+            transition: color $transition-quick;
+
+            @include reduced-motion() {
+                transition: none;
+            }
+        }
     }
 
     &__tail {

diff --git a/tbx/static_src/sass/components/navigation/_sub-nav-mobile.scss b/tbx/static_src/sass/components/navigation/_sub-nav-mobile.scss
@@ -46,7 +46,7 @@ Styles for the lower levels of the navigation at mobile
         align-items: center;
         width: 100%;
         padding: $spacer-small;
-        border-bottom: 2px solid var(--color--border);
+        border-bottom: 2px solid var(--color--light-border);
         color: var(--color--link);
 
         &:focus {
@@ -60,9 +60,17 @@ Styles for the lower levels of the navigation at mobile
         &--no-children {
             @include link-styles(
                 $color: var(--color--link),
-                $interaction-color: var(--color--link),
+                $interaction-color: var(--color--theme-primary),
                 $underline-color: var(--color--link)
             );
+
+            &:hover {
+                transition: color $transition-quick;
+
+                @include reduced-motion() {
+                    transition: none;
+                }
+            }
         }
 
         &--parent {

diff --git a/tbx/static_src/sass/config/_variables.scss b/tbx/static_src/sass/config/_variables.scss
@@ -55,6 +55,7 @@ $color--black: #000;
     --color--streamfield-background: #{$color--mid-grey};
     --color--decoration: #{$color--grey-50};
     --color--border: #{color.adjust($color--grey-50, $alpha: -0.5)};
+    --color--light-border: #{$color--mid-grey};
     --color--overlay: #{color.adjust($color--black, $alpha: -0.6)};
     --color--background--overlay: #{color.adjust($color--eclipse, $alpha: -1)};
     --color--background-swirls-one: #{$color--black};
@@ -132,6 +133,7 @@ $color--black: #000;
     --color--heading: #{$color--eclipse};
     --color--text: #{$color--grey-70};
     --color--decoration: #{$color--eclipse};
+    --color--light-border: #{$color--grey-5};
     --color--link: #{$color--eclipse};
     --color--link-underline: #{color.adjust($color--eclipse, $alpha: -0.5)};
     --color--link-interaction: #{$color--eclipse};