darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-08-25 00:33:58 -04:00
Code Issues Packages Projects Releases Wiki Activity

Make the selected pill item a link

Browse Source 
All other navigations have their selected item as
a link so we should match this.

Includes changes to the pill CSS so:
1. it doesn't use elements in the selectors
2. all the selectors use BEM

I did 2. because I had to change the
classes/selectors anyway, they might as well match
the style GOVUK Design System uses.
This commit is contained in:
Tom Byers
2020-09-04 13:32:34 +01:00
parent c6711a113c
commit 452e253e2c
2 changed files with 26 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
app/assets/stylesheets/components/pill.scss
View File

@@ -2,7 +2,7 @@
display: flex; display: flex;
li { &-item__container {
width: 25%; width: 25%;
flex-grow: 1; flex-grow: 1;
text-align: left; text-align: left;
@@ -23,8 +23,8 @@
display: flex; display: flex;
} }
a, &-item,
&-selected-item { &-item--selected {
display: flex; // float causes display: block in browsers without flexbox display: flex; // float causes display: block in browsers without flexbox
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
@@ -34,7 +34,7 @@
padding: 10px 0; padding: 10px 0;
} }
a { &-item {
$background: $link-colour; $background: $link-colour;
background: $background; background: $background;
color: $white; color: $white;
@@ -43,10 +43,6 @@
text-decoration: none; text-decoration: none;
cursor: pointer; cursor: pointer;
.pill-label {
text-decoration: underline;
}
&:link, &:link,
&:visited { &:visited {
color: $white; color: $white;
@@ -62,13 +58,23 @@
} }
} }
&-selected-item { &-item--selected {
background: inherit;
border: 2px solid $black; border: 2px solid $black;
outline: 1px solid rgba($white, 0.1); outline: 1px solid rgba($white, 0.1);
position: relative; position: relative;
z-index: 10; z-index: 10;
color: $text-colour;
&:link,
&:visited {
color: $govuk-text-colour;
}
&:hover {
color: govuk-tint($govuk-text-colour, 25%);
}
&:active,
&:focus { &:focus {
z-index: 1000; z-index: 1000;
outline: 3px solid $yellow; outline: 3px solid $yellow;
@@ -76,8 +82,9 @@
} }
&-label { &-item__label {
text-decoration: underline;
// reduce padding until screen is above 420px / zoomed below 300% // reduce padding until screen is above 420px / zoomed below 300%
padding-left: govuk-spacing(1); padding-left: govuk-spacing(1);
@@ -87,7 +94,7 @@
} }
&-centered-item { &-item--centered {
text-align: center; text-align: center;
padding-left: 0; padding-left: 0;
} }

19
app/templates/components/pill.html
View File

@@ -9,23 +9,18 @@
<nav aria-labelledby='page-header'> <nav aria-labelledby='page-header'>
<ul class='pill'> <ul class='pill'>
{% for label, option, link, count in items %} {% for label, option, link, count in items %}
<li class="pill-item__container">
{% if current_value == option %} {% if current_value == option %}
<li> <a class="pill-item pill-item--selected govuk-link govuk-link--no-visited-state{% if not show_count %} pill-item--centered{% endif %}" href="{{ link }}" aria-current="page">
<div class='pill-selected-item{% if not show_count %} pill-centered-item{% endif %}' tabindex='0' aria-current='page'>
{% else %} {% else %}
<li> <a class="pill-item govuk-link govuk-link--no-visited-state" href="{{ link }}">
<a class="govuk-link govuk-link--no-visited-state" href="{{ link }}">
{% endif %} {% endif %}
{% if show_count %} {% if show_count %}
{{ big_number(count, **big_number_args) }} {{ big_number(count, **big_number_args) }}
{% endif %} {% endif %}
<div class="pill-label{% if not show_count %} pill-centered-item{% endif %}">{{ label }}</div> <div class="pill-item__label{% if current_value == option %} pill-item__label--selected{% endif %}{% if not show_count %} pill-item--centered{% endif %}">{{ label }}</div>
{% if current_value == option %} </a>
</div> </li>
{% else %}
</a>
{% endif %}
</li>
{% endfor %} {% endfor %}
</ul> </ul>
</nav> </nav>