Update styles to match design system nav

alphagov · Oct 24, 2023 · bc5c7b2 · bc5c7b2
1 parent 039af1d
commit bc5c7b2
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 52 deletions.
diff --git a/app/assets/stylesheets/components/_sub-navigation.scss b/app/assets/stylesheets/components/_sub-navigation.scss
@@ -12,19 +12,13 @@
 .app-c-sub-navigation__list-item {
   @include govuk-font($size: 19);
   display: inline-block;
-  margin-right: govuk-spacing(4);
+  font-weight: bold;
   margin-top: 0;
-
-  &:last-child {
-    margin-right: 0;
-  }
+  padding: 0 govuk-spacing(3);
 }
 
 .app-c-sub-navigation__list-item--current {
-  color: $govuk-link-colour;
   position: relative;
-  text-decoration: none;
-  font-weight: bold;
 
   &::before {
     background-color: $govuk-link-colour;
@@ -36,51 +30,10 @@
     left: 0;
     width: 100%;
   }
-
-  &:focus {
-    color: govuk-colour("black"); // Focus colour on yellow should really be black.
-    position: relative; // Ensure focus sits above everything else.
-    border: none;
-
-    &::before {
-      background-color: govuk-colour("black");
-    }
-  }
 }
 
 .app-c-sub-navigation__list-item-link {
-  @include govuk-link-common;
-  @include govuk-link-style-default;
   display: block;
-  padding-bottom: 15px;
-  padding-top: 15px;
-  text-decoration: none;
-  font-weight: bold;
-
-  &:link,
-  &:visited {
-    color: $govuk-link-colour;
-  }
-
-  &:hover {
-    color: govuk-tint($govuk-link-colour, 25);
-  }
-
-  &:focus {
-    color: govuk-colour("black"); // Focus colour on yellow should really be black.
-    position: relative; // Ensure focus sits above everything else.
-    z-index: 1;
-    box-shadow: none;
-  }
-
-  &:focus::before {
-    background-color: govuk-colour("black");
-    content: "";
-    display: block;
-    height: 5px;
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-  }
+  @include govuk-responsive-margin(3, "bottom");
+  @include govuk-responsive-margin(3, "top");
 }
diff --git a/app/views/components/_sub_navigation.html.erb b/app/views/components/_sub_navigation.html.erb
@@ -12,7 +12,7 @@
             item_aria_attributes = { current: "page" } if item[:current]
           %>
           <%= tag.li class: item_classes do %>
-            <%= link_to item[:label], item[:href], class: "govuk-link govuk-link--no-visited-state app-c-sub-navigation__list-item-link", data: item[:data_attributes], aria: item_aria_attributes %>
+            <%= link_to item[:label], item[:href], class: "govuk-link govuk-link--no-visited-state govuk-link--no-underline app-c-sub-navigation__list-item-link", data: item[:data_attributes], aria: item_aria_attributes %>
           <% end %>
         <% end %>
       <% end %>