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;
|
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;
|
||||||
|
|
Loading…
Reference in a new issue