Make navbar focus states match hover states
This commit is contained in:
parent
27da326d6a
commit
93525f799a
1 changed files with 9 additions and 3 deletions
|
@ -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;
|
||||
|
|
Loading…
Reference in a new issue