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

Make navbar focus states match hover states

Browse source
This commit is contained in:
benjamin melançon 2018-12-26 22:26:40 -05:00
parent 27da326d6a
commit 93525f799a
1 changed files with 9 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
agaric/sass/agaric/_component.navbar.scss
View file

@ -158,7 +158,8 @@ a:target:hover {
} }
} }
.navbar-dropdown a:hover.navbar-item { .navbar-dropdown a:hover.navbar-item,
.navbar-dropdown a:focus.navbar-item {
border-color: $white; border-color: $white;
@include tablet { @include tablet {
color: $white; color: $white;
@ -215,7 +216,8 @@ a.navbar-link.is-active {
bottom: -3px; bottom: -3px;
border-top: 3px solid currentColor; border-top: 3px solid currentColor;
} }
&:hover { &:hover,
&:focus {
color: $white; color: $white;
background-color: $dark; background-color: $dark;
&::before { &::before {
@ -226,6 +228,7 @@ a.navbar-link.is-active {
} }
.navbar-item.has-dropdown:hover .navbar-link, .navbar-item.has-dropdown:hover .navbar-link,
.navbar-item.has-dropdown:focus .navbar-link,
.navbar-item.has-dropdown.is-active .navbar-link { .navbar-item.has-dropdown.is-active .navbar-link {
@include tablet { @include tablet {
color: $white; color: $white;
@ -235,7 +238,10 @@ a.navbar-link.is-active {
a.navbar-item:hover, a.navbar-item:hover,
a.navbar-link:hover, a.navbar-link:hover,
.hero.is-dark a.navbar-item:not(.button):not(.dropdown-item):not(.tag):hover a.navbar-item:focus,
a.navbar-link:focus,
.hero.is-dark a.navbar-item:not(.button):not(.dropdown-item):not(.tag):hover,
.hero.is-dark a.navbar-item:not(.button):not(.dropdown-item):not(.tag):focus
{ {
color: $dark; color: $dark;
background-color: $white; background-color: $white;