Skip to content

Commit

Permalink
[WIP] Refactor navigation CSS
Browse files Browse the repository at this point in the history
  • Loading branch information
@querkmachine
querkmachine committed Aug 8, 2024
1 parent 7026715 commit 3cdb499
Show file tree
Hide file tree
Showing 2 changed files with 81 additions and 87 deletions.
150 changes: 71 additions & 79 deletions packages/govuk-frontend/src/govuk/components/service-navigation/_index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,17 +14,54 @@

.govuk-service-navigation__container {
display: flex;
padding-top: $govuk-service-navigation-active-link-border-width;
flex-direction: column;
align-items: start;

@include govuk-media-query($from: tablet) {
flex-direction: row;
flex-wrap: wrap;
}
}

// These styles are shared between nav items and the service name, they
// ensure that both of them remain vertically aligned with one another
.govuk-service-navigation__item,
.govuk-service-navigation__service-name {
margin: govuk-spacing(2) 0;

@include govuk-media-query($from: tablet) {
margin-top: 0;
margin-bottom: 0;

&:not(:last-child) {
@include govuk-responsive-margin(6, $direction: right);
}
}
}

// These styles are shared by links and non-linked text items
.govuk-service-navigation__link,
.govuk-service-navigation__text {
display: inline-block;
border: 0 solid currentcolor;

@include govuk-media-query($until: tablet) {
flex-direction: column;
align-items: start;
margin-bottom: govuk-spacing(1);
&[aria-current] {
// Negative offset the left margin so we can place a current page indicator
// to the left without misaligning the list item text.
margin-left: ((govuk-spacing(2) + $govuk-service-navigation-active-link-border-width) * -1);
padding-left: govuk-spacing(2);
border-left-width: $govuk-service-navigation-active-link-border-width;
}
}

@include govuk-media-query($from: tablet) {
flex-direction: row;
flex-wrap: wrap;
padding: govuk-spacing(4) 0;

&[aria-current] {
padding-bottom: govuk-spacing(4) - $govuk-service-navigation-active-link-border-width;
border-bottom-width: $govuk-service-navigation-active-link-border-width;
}
}
}

Expand All @@ -33,62 +70,45 @@
@include govuk-link-style-default;
@include govuk-link-style-no-visited-state;

&:not(:hover) {
// We set the colour here as we don't want to override the hover colour
&:not(:hover):not(:focus) {
// We set the colour here as we don't want to override the hover or
// focus colours
color: $govuk-service-navigation-link-colour;

// Don't show underlines on navigation links (on hover only)
text-decoration: none;
}

// Extend the clickable area of the link to fill the entire
// list item container.
&::after {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
}

.govuk-service-navigation__link--service-name {
@include govuk-link-style-text;
}

// Shared styles between service name container and nav items
.govuk-service-navigation__service-name,
.govuk-service-navigation__navigation-item {
position: relative;

@include govuk-media-query($from: tablet) {
display: inline-block;
padding: govuk-spacing(3) 0;
}
}
//
// Service name specific code
//

.govuk-service-navigation__service-name {
@include govuk-font($size: 19, $weight: bold);
margin: govuk-spacing(1) 0;
}

@include govuk-media-query($from: tablet) {
@include govuk-responsive-margin(5, "right");
margin-top: 0;
// Annoyingly this requires a compound selector in order to overcome the
// specificity of the other link colour override we're doing
.govuk-service-navigation__service-name .govuk-service-navigation__link {
@include govuk-link-style-text;
}

// Add a little extra space to the bottom of the service name so that it
// has the same visual height as navigation items.
margin-bottom: $govuk-service-navigation-active-link-border-width;
}
//
// Navigation list specific code
//

.govuk-service-navigation__wrapper {
// <nav> element
}

.govuk-service-navigation__toggle {
@include govuk-font($size: 19, $weight: bold);
display: inline-flex;
margin: govuk-spacing(1) 0;
margin: govuk-spacing(2) 0;
padding: 0;
border: 0;
color: $govuk-link-colour;
color: $govuk-service-navigation-link-colour;
background: none;
word-break: break-all;
cursor: pointer;
Expand All @@ -110,69 +130,41 @@
}
}

.govuk-service-navigation__navigation-list {
.govuk-service-navigation__list {
@include govuk-font($size: 19);
margin: 0;
margin-bottom: govuk-spacing(3);
padding: 0;
list-style: none;

// Make the navigation list a flexbox. Doing so resolves a couple of
// accessibility problems caused by the list items being inline-blocks:
//
// - Removes the extra whitespace from between each list item that screen
// readers would pointlessly announce.
// - Fixes an NVDA issue in Firefox and Chrome <= 124 where it would read
// all of the links as a run-on sentence.
@include govuk-media-query($from: tablet) {
display: flex;
flex-wrap: wrap;
margin-bottom: 0;

// However... IE11 totally trips over flexbox and doesn't wrap anything,
// making all of the items into a single, horizontally scrolling row,
// which is no good. This CSS hack removes the flexbox definition for
// IE 10 & 11, reverting it back to the non-flexbox version.
// IE 10 & 11, reverting it to the flawed, but OK, non-flexbox version.
//
// Solution taken from https://stackoverflow.com/questions/11173106/apply-style-only-on-ie#answer-36448860
// CSS hack taken from https://stackoverflow.com/questions/11173106/apply-style-only-on-ie#answer-36448860
// which also includes an explanation of why this works
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
display: block;
}
}
}

.govuk-service-navigation__navigation-item {
margin: govuk-spacing(2) 0;
border: 0 solid;

@include govuk-media-query($from: tablet) {
margin: 0 govuk-spacing(6) 0 0;

&:last-of-type {
margin: 0;
}
}
}

.govuk-service-navigation__navigation-item--active {
border-color: $govuk-link-colour;

@include govuk-media-query($until: tablet) {
// Negative offset the left margin so we can place a current page indicator
// to the left without misaligning the list item text.
margin-left: ((govuk-spacing(2) + $govuk-service-navigation-active-link-border-width) * -1);
padding-left: govuk-spacing(2);
border-left-width: $govuk-service-navigation-active-link-border-width;
}

@include govuk-media-query($from: tablet) {
border-bottom-width: $govuk-service-navigation-active-link-border-width;
}
}

// This is a <strong> element that is used as a fallback mechanism for
// visually indicating the current page in scenarios where CSS is unavailable
// or colours may have been overridden. We don't actually want it to be bold
// normally, so set it to inherit the parent font-weight.
// visually indicating the current page in scenarios where CSS isn't
// available. We don't actually want it to be bold normally, so set it to
// inherit the parent font-weight.
.govuk-service-navigation__active-fallback {
font-weight: inherit;
}
Expand Down
18 changes: 10 additions & 8 deletions packages/govuk-frontend/src/govuk/components/service-navigation/template.njk
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,23 +20,25 @@ data-module="govuk-service-navigation"
{% if params.serviceName %}
<span class="govuk-service-navigation__service-name">
{% if params.serviceUrl %}
<a href="{{ params.serviceUrl }}" class="govuk-service-navigation__link govuk-service-navigation__link--service-name">
{{ params.serviceName }}
</a>
<a href="{{ params.serviceUrl }}" class="govuk-service-navigation__link">
{{ params.serviceName }}
</a>
{% else %}
{{- params.serviceName -}}
<span class="govuk-service-navigation__text">
{{- params.serviceName -}}
</span>
{% endif %}
</span>
{% endif %}

{# Navigation #}
{% if params.navigation | length %}
<nav aria-label="{{ params.navigationLabel | default(menuButtonText, true) }}" class="govuk-service-navigation__navigation {%- if params.navigationClasses %} {{ params.navigationClasses }}{% endif %}">
<nav aria-label="{{ params.navigationLabel | default(menuButtonText, true) }}" class="govuk-service-navigation__wrapper {%- if params.navigationClasses %} {{ params.navigationClasses }}{% endif %}">
<button type="button" class="govuk-service-navigation__toggle govuk-js-service-navigation-toggle" aria-controls="{{ navigationId }}" {%- if params.menuButtonLabel and params.menuButtonLabel != menuButtonText %} aria-label="{{ params.menuButtonLabel }}"{% endif %} hidden>
{{ menuButtonText }}
</button>

<ul class="govuk-service-navigation__navigation-list" id="{{ navigationId }}" >
<ul class="govuk-service-navigation__list" id="{{ navigationId }}" >

{# Slot: navigationStart #}
{%- if params.slots.navigationStart %}{{ params.slots.navigationStart | safe }}{% endif -%}
Expand All @@ -53,15 +55,15 @@ data-module="govuk-service-navigation"
{% endif %}
{% endset %}

<li class="govuk-service-navigation__navigation-item {%- if item.active or item.current %} govuk-service-navigation__navigation-item--active{% endif %}">
<li class="govuk-service-navigation__item">
{% if item.href %}
<a class="govuk-service-navigation__link" href="{{ item.href }}"
{%- if item.active or item.current %} aria-current="{{ 'page' if item.current else 'true' }}"{% endif %}
{{- govukAttributes(item.attributes) -}}>
{{ linkInnerContent | safe }}
</a>
{% elif item.html or item.text %}
<span class="govuk-service-navigation__navigation-text"
<span class="govuk-service-navigation__text"
{%- if item.active or item.current %} aria-current="{{ 'page' if item.current else 'true' }}"{% endif %}>
{{ linkInnerContent | safe }}
</span>
Expand Down

0 comments on commit 3cdb499

Please sign in to comment.