tweak arrow colours on mobile

DFE-Digital · May 8, 2024 · 2893d33 · 2893d33
1 parent 19e9621
commit 2893d33
Showing 1 changed file with 17 additions and 1 deletion.
diff --git a/app/webpacker/styles/header/navigation.scss b/app/webpacker/styles/header/navigation.scss
@@ -123,7 +123,7 @@ body > header {
         ol.category-links-list > li > .menu-link {
           > .nav-icon {
             &__contracted {
-              background-image: url("../images/navigation/arrow-down-black.svg");
+              background-image: url("../images/navigation/arrow-down-pink.svg");
             }
 
             &__expanded {
@@ -144,6 +144,20 @@ body > header {
           }
         }
 
+        ol.category-links-list > li.selected > .menu-link {
+          &:focus {
+            .nav-icon {
+              &__contracted {
+                background-image: url("../images/navigation/arrow-down-pink.svg");
+              }
+
+              &__expanded {
+                background-image: url("../images/navigation/arrow-up-black.svg");
+              }
+            }
+          }
+        }
+
         // all mobile menu links
         .menu-link {
           display: flex;
@@ -221,6 +235,7 @@ body > header {
     } // ol.primary
 
     ol.category-links-list {
+      // mobile and tablet
       @include mq($until: desktop) {
         padding-top: 6px;
         padding-left: 0;
@@ -231,6 +246,7 @@ body > header {
 
           > a, button.btn-as-link {
             font-weight: bold;
+            background: transparent;
           }
         }