library-mirrors/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma.git synced 2024-11-14 11:14:24 +00:00
Code Issues Actions 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
Show Stats 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
& > a.navbar-item,
.navbar-link
&:focus,
&:hover,
&.is-active
background-color: darken($color, 5%)
@ -86,6 +87,7 @@ $navbar-breakpoint: $desktop !default
color: $color-invert
& > a.navbar-item,
.navbar-link
&:focus,
&:hover,
&.is-active
background-color: darken($color, 5%)
@ -93,6 +95,7 @@ $navbar-breakpoint: $desktop !default
.navbar-link
&::after
border-color: $color-invert
.navbar-item.has-dropdown:focus .navbar-link,
.navbar-item.has-dropdown:hover .navbar-link,
.navbar-item.has-dropdown.is-active .navbar-link
background-color: darken($color, 5%)
@ -135,6 +138,7 @@ body
.navbar-brand
a.navbar-item
&:focus,
&:hover
background-color: transparent
@ -167,6 +171,8 @@ body
a.navbar-item,
.navbar-link
cursor: pointer
&:focus,
&:focus-within,
&:hover,
&.is-active
background-color: $navbar-item-hover-background-color
@ -187,6 +193,7 @@ a.navbar-item,
border-bottom: 1px solid transparent
min-height: $navbar-height
padding-bottom: calc(0.5rem - 1px)
&:focus,
&:hover
background-color: $navbar-tab-hover-background-color
border-bottom-color: $navbar-tab-hover-border-bottom-color
@ -286,16 +293,20 @@ a.navbar-item,
&.is-transparent
a.navbar-item,
.navbar-link
&:focus,
&:hover,
&.is-active
background-color: transparent !important
.navbar-item.has-dropdown
&.is-active,
&.is-hoverable:focus,
&.is-hoverable:focus-within,
&.is-hoverable:hover
.navbar-link
background-color: transparent !important
.navbar-dropdown
a.navbar-item
&:focus,
&:hover
background-color: $navbar-dropdown-item-hover-background-color
color: $navbar-dropdown-item-hover-color
@ -323,6 +334,8 @@ a.navbar-item,
box-shadow: 0 -8px 8px rgba($black, 0.1)
top: auto
&.is-active,
&.is-hoverable:focus,
&.is-hoverable:focus-within,
&.is-hoverable:hover
.navbar-dropdown
display: block
@ -358,6 +371,7 @@ a.navbar-item,
white-space: nowrap
a.navbar-item
padding-right: 3rem
&:focus,
&:hover
background-color: $navbar-dropdown-item-hover-background-color
color: $navbar-dropdown-item-hover-color
@ -413,9 +427,10 @@ a.navbar-item,
.navbar-link
&.is-active
color: $navbar-item-active-color
&.is-active:not(:hover)
&.is-active:not(:focus):not(:hover)
background-color: $navbar-item-active-background-color
.navbar-item.has-dropdown
&:focus,
&:hover,
&.is-active
.navbar-link