Ark/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma synced 2026-03-21 20:54:30 -07:00
Code Issues Packages Projects Releases Wiki Activity

make focus behave like hover for the navigation. Using :focus-within for dropdown menu.

Browse Source
This commit is contained in:
Alexander Schwartz
2019-01-17 23:58:48 +01:00
committed by Jeremy Thomas
parent 3d0fab3a4e
commit 4d3aad5467
1 changed files with 16 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
sass/components/navbar.sass
View File

@@ -69,6 +69,7 @@ $navbar-breakpoint: $desktop !default
color: $color-invert color: $color-invert
& > a.navbar-item, & > a.navbar-item,
.navbar-link .navbar-link
&:focus,
&:hover, &:hover,
&.is-active &.is-active
background-color: darken($color, 5%) background-color: darken($color, 5%)
@@ -86,6 +87,7 @@ $navbar-breakpoint: $desktop !default
color: $color-invert color: $color-invert
& > a.navbar-item, & > a.navbar-item,
.navbar-link .navbar-link
&:focus,
&:hover, &:hover,
&.is-active &.is-active
background-color: darken($color, 5%) background-color: darken($color, 5%)
@@ -93,6 +95,7 @@ $navbar-breakpoint: $desktop !default
.navbar-link .navbar-link
&::after &::after
border-color: $color-invert border-color: $color-invert
.navbar-item.has-dropdown:focus .navbar-link,
.navbar-item.has-dropdown:hover .navbar-link, .navbar-item.has-dropdown:hover .navbar-link,
.navbar-item.has-dropdown.is-active .navbar-link .navbar-item.has-dropdown.is-active .navbar-link
background-color: darken($color, 5%) background-color: darken($color, 5%)
@@ -135,6 +138,7 @@ body
.navbar-brand .navbar-brand
a.navbar-item a.navbar-item
&:focus,
&:hover &:hover
background-color: transparent background-color: transparent
@@ -167,6 +171,8 @@ body
a.navbar-item, a.navbar-item,
.navbar-link .navbar-link
cursor: pointer cursor: pointer
&:focus,
&:focus-within,
&:hover, &:hover,
&.is-active &.is-active
background-color: $navbar-item-hover-background-color background-color: $navbar-item-hover-background-color
@@ -187,6 +193,7 @@ a.navbar-item,
border-bottom: 1px solid transparent border-bottom: 1px solid transparent
min-height: $navbar-height min-height: $navbar-height
padding-bottom: calc(0.5rem - 1px) padding-bottom: calc(0.5rem - 1px)
&:focus,
&:hover &:hover
background-color: $navbar-tab-hover-background-color background-color: $navbar-tab-hover-background-color
border-bottom-color: $navbar-tab-hover-border-bottom-color border-bottom-color: $navbar-tab-hover-border-bottom-color
@@ -286,16 +293,20 @@ a.navbar-item,
&.is-transparent &.is-transparent
a.navbar-item, a.navbar-item,
.navbar-link .navbar-link
&:focus,
&:hover, &:hover,
&.is-active &.is-active
background-color: transparent !important background-color: transparent !important
.navbar-item.has-dropdown .navbar-item.has-dropdown
&.is-active, &.is-active,
&.is-hoverable:focus,
&.is-hoverable:focus-within,
&.is-hoverable:hover &.is-hoverable:hover
.navbar-link .navbar-link
background-color: transparent !important background-color: transparent !important
.navbar-dropdown .navbar-dropdown
a.navbar-item a.navbar-item
&:focus,
&:hover &:hover
background-color: $navbar-dropdown-item-hover-background-color background-color: $navbar-dropdown-item-hover-background-color
color: $navbar-dropdown-item-hover-color color: $navbar-dropdown-item-hover-color
@@ -323,6 +334,8 @@ a.navbar-item,
box-shadow: 0 -8px 8px rgba($black, 0.1) box-shadow: 0 -8px 8px rgba($black, 0.1)
top: auto top: auto
&.is-active, &.is-active,
&.is-hoverable:focus,
&.is-hoverable:focus-within,
&.is-hoverable:hover &.is-hoverable:hover
.navbar-dropdown .navbar-dropdown
display: block display: block
@@ -358,6 +371,7 @@ a.navbar-item,
white-space: nowrap white-space: nowrap
a.navbar-item a.navbar-item
padding-right: 3rem padding-right: 3rem
&:focus,
&:hover &:hover
background-color: $navbar-dropdown-item-hover-background-color background-color: $navbar-dropdown-item-hover-background-color
color: $navbar-dropdown-item-hover-color color: $navbar-dropdown-item-hover-color
@@ -413,9 +427,10 @@ a.navbar-item,
.navbar-link .navbar-link
&.is-active &.is-active
color: $navbar-item-active-color color: $navbar-item-active-color
&.is-active:not(:hover) &.is-active:not(:focus):not(:hover)
background-color: $navbar-item-active-background-color background-color: $navbar-item-active-background-color
.navbar-item.has-dropdown .navbar-item.has-dropdown
&:focus,
&:hover, &:hover,
&.is-active &.is-active
.navbar-link .navbar-link