app/assets/stylesheets/nav3.sass
$nav3-font-size: 1.1em
$nav3-text-color: $white
$nav3-background-color: $primary-darker
$nav3-background-color-hover: $primary
$nav3-dropdown-font-size: 0.85rem
$nav3-dropdown-submenu-font-size: 0.75rem
$nav3-dropdown-submenu-max-width: 120px
$nav3-dropdown-submenu-margin-left: calc( -100% + ( #{$nav3-dropdown-submenu-max-width} ) )
#nav3
background: $nav3-background-color
nav.navbar
background: transparent
.navbar-brand
font-size: calc(#{$nav3-font-size} - 0.1em)
.icon
margin: 0
a.navbar-item
span
color: #74a848
a.button
&:not(.is-textless)
width: 6rem !important
&:after
padding-left: .3rem
content: 'MenĂ¹'
a.navbar-item
white-space: nowrap
color: $nav3-text-color
font-size: $nav3-font-size
&:hover, &.is-active
transition: all 0.5s ease
background: $nav3-background-color-hover
&:focus, &:active
background: transparent
span.icon
margin-right: .5rem
&.is-right
margin-left: .5rem
margin-right: 0
&.is-hidden-menu
background: $nav3-background-color !important
div.navbar-dropdown
background: $nav3-background-color
border-top: .5rem
min-width: 12.2rem
a.navbar-item
font-size: $nav3-dropdown-font-size
hr.navbar-divider
background-color: $nav3-text-color
height: 1px
a.navbar-link
white-space: nowrap
color: $nav3-text-color
font-size: $nav3-font-size
background: $nav3-background-color
&:not(.is-arrowless)::after
border-color: $nav3-text-color
&:hover
background: transparent
&.is-active
background: $nav3-background-color-hover
.nested.dropdown
font-size: .75rem
&:hover
background: $nav3-background-color-hover
&:hover > .dropdown-menu
display: block
.dropdown-trigger
a, button
color: $nav3-text-color
font-size: $nav3-dropdown-font-size
&:not(.is-arrowless):hover::after
content: ' >'
.icon
margin-right: 0.3rem
.dropdown-menu
top: -15px
margin-left: 100%
max-width: $nav3-dropdown-submenu-max-width
.dropdown-content
background: $nav3-background-color
margin-top: 0.4rem
.dropdown-item
font-size: $nav3-dropdown-submenu-font-size
color: $nav3-text-color
background: $nav3-background-color
&:hover
background: $nav3-background-color-hover
&.has-menu-left
.dropdown-trigger
a, button
color: $nav3-text-color
font-size: $nav3-dropdown-font-size
&:not(.is-arrowless):hover
&::before
content: '< '
&::after
content: ''
.dropdown-menu
margin-left: $nav3-dropdown-submenu-margin-left