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

Replace uses of $yellow for focus

Browse Source 
There are a few places where we missed updating to the new focus styles
because they were using the `$yellow` SASS variable and not the
`$focus-colour` variable.

This commit updates them to the new colour, and where needed adds the
black lower border to match.
This commit is contained in:
Chris Hill-Scott
2020-09-23 10:50:43 +01:00
parent 6ab85c4c78
commit b20ba2349e
5 changed files with 17 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
app/assets/stylesheets/components/banner.scss
View File

@@ -56,7 +56,7 @@
text-align: left; text-align: left;
&:focus { &:focus {
outline: 3px solid $yellow; outline: 3px solid $govuk-focus-colour;
} }
.list { .list {
@@ -134,16 +134,17 @@
color: $white; color: $white;
} }
&:focus,
&:active {
color: $govuk-focus-text-colour;
outline: 10px solid $yellow;
}
&:hover { &:hover {
color: $white; color: $white;
background-color: $link-hover-colour; background-color: $link-hover-colour;
outline: 10px solid $link-hover-colour; box-shadow: 0 0 0 10px solid $link-hover-colour;
}
&:focus,
&:active {
color: $govuk-focus-text-colour;
background-color: $govuk-focus-colour;
box-shadow: 0 0 0 10px $govuk-focus-colour, 0 4px 0 10px $govuk-focus-text-colour;
} }
} }

3
app/assets/stylesheets/components/file-upload.scss
View File

@@ -23,7 +23,8 @@
z-index: -1; z-index: -1;
&:focus + .file-upload-button { &:focus + .file-upload-button {
outline: 3px solid $yellow; background: $govuk-focus-colour;
color: $govuk-focus-text-colour;
} }
} }

7
app/assets/stylesheets/components/message.scss
View File

@@ -41,13 +41,6 @@ $message-type-bottom-spacing: govuk-spacing(4);
border-color: $link-hover-colour; border-color: $link-hover-colour;
} }
&:focus {
// Use box shadow instead of outline to avoid buggy outline
// rendering in Firefox
outline: none;
box-shadow: 0 0 0 3px $yellow;
}
.message-name-separator { .message-name-separator {
margin-right: -2px; margin-right: -2px;

4
app/assets/stylesheets/components/placeholder.scss
View File

@@ -2,7 +2,7 @@
.placeholder { .placeholder {
display: inline; display: inline;
background: $yellow; background: $govuk-focus-colour;
color: $text-colour; color: $text-colour;
overflow-wrap: break-word; overflow-wrap: break-word;
word-wrap: break-word; word-wrap: break-word;
@@ -53,7 +53,7 @@
} }
*:focus + p & { *:focus + p & {
box-shadow: inset 0 -0.35em 0 0 $yellow; box-shadow: inset 0 -0.35em 0 0 $govuk-focus-colour;
} }
} }

5
app/assets/stylesheets/components/table.scss
View File

@@ -272,8 +272,11 @@
&:focus { &:focus {
box-shadow: none;
&:before { &:before {
background: $yellow; background: $govuk-focus-colour;
box-shadow: inset 0 -4px 0 0 $govuk-focus-text-colour;
z-index: -1; z-index: -1;
} }