mirror of
https://github.com/fooflington/selfdefined.git
synced 2025-01-22 09:20:00 +00:00
🎨 Enhance :focus style for a11y
* Adding link changes with text-decoration and background * Update assets/css/base/_a.scss Co-Authored-By: EJ Mason <eliasjmason@gmail.com> * Add SCSS variable Co-authored-by: Conlin Durbin <conlin@lessonly.com> Co-authored-by: EJ Mason <eliasjmason@gmail.com> Co-authored-by: Tatiana Mac <github@tatianamac.com>
This commit is contained in:
parent
40fd302d4c
commit
beb2f5db69
1
.tool-versions
Normal file
1
.tool-versions
Normal file
@ -0,0 +1 @@
|
||||
nodejs 12.16.1
|
@ -12,3 +12,5 @@ $light-grey: hsl(0, 0%, 93.3%); // for backgrounds only
|
||||
|
||||
$browser-context: 16;
|
||||
|
||||
$lt-background-color: $pink;
|
||||
|
||||
|
@ -1,16 +1,18 @@
|
||||
a {
|
||||
border-bottom: $dark-grey solid 0.1em;
|
||||
color: $black;
|
||||
font-family: $ext-sans;
|
||||
margin: 1rem 0;
|
||||
text-decoration: none;
|
||||
text-decoration-color: $dark-grey;
|
||||
text-decoration-line: underline;
|
||||
text-decoration-thickness: 0.1em;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
border-bottom: $primary-color solid 0.1rem;
|
||||
text-decoration-color: $primary-color;
|
||||
}
|
||||
&:focus {
|
||||
outline: pxToRem(3) solid $primary-color;
|
||||
outline-offset: pxToRem(5);
|
||||
background-color: $lt-background-color;
|
||||
color: $black;
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
|
@ -64,5 +64,10 @@
|
||||
|
||||
a {
|
||||
color: white;
|
||||
|
||||
&:focus {
|
||||
background-color: $lt-background-color;
|
||||
color: $black;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
Loading…
x
Reference in New Issue
Block a user