Make navbar focus states match hover states

This commit is contained in:
benjamin melançon 2018-12-26 22:26:40 -05:00
parent 27da326d6a
commit 93525f799a

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;
@include tablet {
color: $white;
@ -215,7 +216,8 @@ a.navbar-link.is-active {
bottom: -3px;
border-top: 3px solid currentColor;
}
&:hover {
&:hover,
&:focus {
color: $white;
background-color: $dark;
&::before {
@ -226,6 +228,7 @@ a.navbar-link.is-active {
}
.navbar-item.has-dropdown:hover .navbar-link,
.navbar-item.has-dropdown:focus .navbar-link,
.navbar-item.has-dropdown.is-active .navbar-link {
@include tablet {
color: $white;
@ -235,7 +238,10 @@ a.navbar-link.is-active {
a.navbar-item: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;
background-color: $white;