@blexar/framework/src/components/navbar.styl

CSS framework to establish your favorite websites in mints, with user experience in mind.

.navbar
  display: flex
  margin: 0
  width: 100%
  padding: 0 ($padding  * 2)
  background-color: $white
  font-weight: $font-weight-semi-bold
  @extend $normal

  &.is-gradient
    background-image: linear-gradient(90deg, $grad-primary)
    color: $white

  &.is-fixed
    position: fixed
    z-index: 9999
    top: 0
    left: 0
    right: 0
    transition: 0.4s

  &.is-inverse
    background-color: $black

  &.is-hidden
    transform: translate3d(0, -100%, 0)
  // reset nested elements


.navbar-brand
  display: flex
  align-items: center
.navbar-start,
.navbar-end
  display: flex

.navbar-brand
  margin-{$dir-end}: $margin
  img
    max-height: 40px
    display: block
  &.is-white
    filter: brightness(0) invert(1)
    fill: $white

.navbar-start,
.navbar-end
  flex: 1
.navbar-end
  justify-content: flex-end
.navbar-item
  display: flex
  justify-content: center
  align-items: center
  padding: 0 (2 * $padding)
  min-height: 50px
  color: $black
  text-decoration: none
  white-space: nowrap
  cursor: pointer
  _icon-color: $black
  @extends $normal
  .navbar-item
    padding: 0

  &.dropdown
    height: auto

  &:hover, &:focus
    color: $primary
    _icon-color: $primary

  .navbar.is-inverse &,
  .navbar.is-gradient &
    color: $white
    _icon-color: $white

  &:hover, &:focus
    color: $primary
    _icon-color: $primary

  &.is-active
    background-color: alpha($black, 8%)

  &:hover
    background-color: alpha($white, 8%)

  .button
    margin-bottom: 0