agaric/patternlibrary
10
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Ensure additional hover states have matching focus states

Browse source
This commit is contained in:
benjamin melançon 2018-12-25 23:26:56 -05:00
parent c7031b4933
commit f890ebdb94
1 changed files with 11 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
agaric/sass/agaric/_component.hero.scss
View file

@ -32,9 +32,12 @@
a .icon { a .icon {
color: $dandelion; color: $dandelion;
} }
a:hover .icon { a:hover,
a:focus {
.icon {
color: $dandelion-light; color: $dandelion-light;
} }
}
} }
.hero.is-blue { .hero.is-blue {
@ -60,7 +63,8 @@
right: 0; right: 0;
box-shadow: inset 0 0 0 100vmax rgba($blue, .5); box-shadow: inset 0 0 0 100vmax rgba($blue, .5);
} }
&:hover { &:hover,
&:focus {
color: $white; color: $white;
background-color: darken($blue, 5%); background-color: darken($blue, 5%);
& > .container > .hero-image > .hero-image-shadow:before { & > .container > .hero-image > .hero-image-shadow:before {
@ -107,7 +111,8 @@
.hero.is-dandelion { .hero.is-dandelion {
a { a {
color: $text-light; color: $text-light;
&:hover { &:hover,
&:focus {
color: $blue-light; color: $blue-light;
background-color: $white; background-color: $white;
} }
@ -123,7 +128,8 @@
.hero.is-light, .hero.is-light,
.hero.is-grey { .hero.is-grey {
a:hover { a:hover,
a:focus {
color: $blue-light; color: $blue-light;
background-color: $white; background-color: $white;
} }