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

Navbar colors docs

Browse Source
This commit is contained in:
Jeremy Thomas
2017-09-09 23:56:54 +02:00
parent 8091c23fae
commit 83892a21e3
7 changed files with 455 additions and 190 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
sass/components/navbar.sass
View File

@@ -43,26 +43,33 @@ $navbar-divider-background-color: $border !default
&.is-#{$name}
background-color: $color
color: $color-invert
.navbar-item,
.navbar-link
color: $color-invert
a.navbar-item,
.navbar-link
&:hover,
&.is-active
background-color: darken($color, 2.5%)
color: $color-invert
+desktop
.navbar-link
&::after
border-color: $color-invert
.navbar-dropdown a.navbar-item:not(.is-active):not(:hover),
.navbar-dropdown .navbar-item:not(a)
color: $color
.navbar-brand,
.navbar-start,
.navbar-end
& > .navbar-item,
& > .navbar-link
color: $color-invert
& > a.navbar-item,
& > .navbar-link
&:hover,
&.is-active
background-color: darken($color, 2.5%)
color: $color-invert
.navbar-link
&::after
border-color: $color-invert
// .navbar-dropdown a.navbar-item:not(.is-active):not(:hover),
// .navbar-dropdown .navbar-item:not(a)
// color: $color
.navbar-item.has-dropdown:hover .navbar-link,
.navbar-item.has-dropdown.is-active .navbar-link
background-color: darken($color, 2.5%)
color: $color-invert
.navbar-dropdown
a.navbar-item
&.is-active
color: $color
& > .container
align-items: stretch
display: flex
@@ -159,6 +166,7 @@ a.navbar-item,
align-items: center
display: flex
.navbar-menu
background-color: $white
box-shadow: 0 8px 16px rgba($black, 0.1)
padding: 0.5rem 0
&.is-active