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

Fix focus style for pill links

Browse Source 
Includes changes for:
- pills as page navigation
- pills as separate items
- big number links
This commit is contained in:
Tom Byers
2020-09-14 23:31:13 +01:00
parent 2f5ecdb1fa
commit 9c55477512
2 changed files with 41 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
app/assets/stylesheets/components/big-number.scss
View File

@@ -97,7 +97,10 @@
color: $light-blue-25; color: $light-blue-25;
.big-number { .big-number,
.big-number-number,
.big-number-smaller,
.big-number-label {
color: $light-blue-25; color: $light-blue-25;
} }
@@ -105,7 +108,18 @@
&:active, &:active,
&:focus { &:focus {
outline: 3px solid $yellow; background: $govuk-focus-colour;
border: none;
padding: 2px; /* replace the spacing the border gave */
/* override the default focus style to inset the underline */
box-shadow: inset 0 -4px $govuk-focus-text-colour;
.big-number-number,
.big-number-smaller,
.big-number-label {
color: $govuk-focus-text-colour;
text-decoration: none;
}
} }
.big-number, .big-number,

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

@@ -55,6 +55,11 @@
&:active, &:active,
&:focus { &:focus {
z-index: 10; z-index: 10;
color: $govuk-focus-text-colour;
/* override default focus styles to inset bottom underline */
box-shadow: inset 0 -4px $govuk-focus-text-colour;
border: none;
padding: 12px 2px; /* compensate for lack of border with padding */
} }
} }
@@ -77,7 +82,10 @@
&:active, &:active,
&:focus { &:focus {
z-index: 1000; z-index: 1000;
outline: 3px solid $yellow; color: $govuk-focus-text-colour;
border: solid 2px $black;
padding: 10px 0px; /* reset padding to default */
box-shadow: inset 0 -2px $govuk-focus-text-colour; /* remove bottom border from underline */
} }
} }
@@ -94,6 +102,13 @@
} }
&-item,
&-item--selected {
&:focus .pill-item__label {
text-decoration: none;
}
}
&-item--centered { &-item--centered {
text-align: center; text-align: center;
padding-left: 0; padding-left: 0;
@@ -117,10 +132,17 @@
text-decoration: underline; text-decoration: underline;
} }
&:hover, &:hover {
color: $light-blue-25;
}
&:focus, &:focus,
&:link:focus { &:link:focus {
color: $light-blue-25; color: $govuk-focus-text-colour;
text-decoration: none;
background: $govuk-focus-colour;
/* override default focus style to inset bottom underline */
box-shadow: inset 0 -4px $govuk-focus-text-colour;
} }
} }