fixed-vuesax/dist/style/components/vsNavbar.styl

Framework Components for Vue js

.vs-navbar
  clear both
  display: flex
  align-items: center
  // padding: 0 7px
  justify-content: space-between
  box-shadow: 0 4px 20px 0 rgba(0, 0, 0, .05)
  width: 100%
  z-index: 10000
  position: relative

  .vs-button
    margin: 0

.vs-navbar--btn-responsive
  display: none
  width: 40px
  height: 40px
  position: relative
  border: 0
  background: transparent
  flex-direction: column
  justify-content: space-around
  align-items: center
  padding: 10px 0
  margin-left: 5px
  cursor: pointer
  transition: all .25s ease
  overflow: hidden

  &:hover
    background: rgba(0, 0, 0, .08)
    padding: 12px 0

  &.active-menu
    padding: 10px 0 !important

    .line--1
      transform: rotate(45deg) translate(5px, 5px)

    .line--2
      opacity: 0
      transform: translate(-10px)

    .line--3
      transform: rotate(-45deg) translate(5px, -5px)

  .btn-responsive-line
    width: 20px
    height: 2px
    background: rgba(0, 0, 0, .6)
    position: relative
    display: block
    transition: all .2s ease


.vs-con-items
  display flex
  align-items: center
  justify-content: center

.vs-navbar--item
  display block
  position relative
  transition: all .25s ease
  z-index: 1000

  &.is-active-item
    .vs-navbar-after
      width: 100%

  &:hover
    .vs-navbar-submenu
      opacity: 1
      visibility: visible

  a
    font-size: .8rem
    padding: 10px 12px
    display: block
    color inherit
    text-decoration: none !important
    position relative
    z-index: 100

    &:hover
      ~ .vs-navbar-after
        width: 100%

  .vs-navbar-after
    width: 0
    height 2px
    left 50%
    bottom: 0
    transform: translate(-50%)
    background: $vs-primary
    position: absolute
    transition: all .25s ease
    z-index: 10


.vs-navbar--title
  font-size: 1.1rem
  padding: 0
  padding-left: 10px
  padding-right: 10px
  color: inherit

.vs-navbar--items
  position relative

.vs-navbar-submenu
  position: absolute
  visibility: hidden
  opacity: 0
  background: rgb(255, 255, 255)
  z-index: 1000
  padding-left 0
  width: 200px

  .vs-navbar-after
    display: none

  .vs-navbar--items
    a
      text-align: left


// TYPE: FLAT

.vs-navbar-flat
  box-shadow: none

  .vs-navbar-after
    display: none

// TYPE: FUND

.vs-navbar-fund
  box-shadow: none

  .vs-navbar-after
    width 100%
    height 0
    opacity: .1

  a
    &:hover
      ~ .vs-navbar-after
        height: 100%

  .vs-navbar--item
    &.is-active-item
      .vs-navbar-after
        height: 100%

// TYPE: BORDER

.vs-navbar-border
  box-shadow: none
  border 1px solid rgba(0, 0, 0, .05)

  .vs-navbar--item
    border-left 1px solid rgba(0, 0, 0, .05)

  .vs-navbar-after
    height: 1px
    bottom: -1px

// TYPE: GRADIENT
.vs-navbar-gradient
  .vs-navbar--item
    margin: 4px 3px

    a
      padding: 6px 12px

  .vs-navbar-after
    display: none

// TYPE: SHADOW
.vs-navbar-shadow
  box-shadow: none

  .vs-navbar--item
    background: rgba(0, 0, 0, .05)

    &.is-active-item
      background: rgb(255, 255, 255)
      border-radius: 4px
      box-shadow: 0 5px 20px 0 rgba(0, 0, 0, .07)

  .vs-navbar-after
    display: none


for colorx in $vs-colors
  .vs-navbar-color-{color}
    background: $vs-colors[colorx]

  .vs-navbar
    .vs-navbar-item-{colorx}
      &.is-active-item
        color: $vs-colors[colorx]

      &:hover
        > a
          color: $vs-colors[colorx]

  .vs-navbar-submenu
    .vs-navbar-item-{colorx}
      &.is-active-item
        color: $vs-colors[colorx]

      &:hover
        color: $vs-colors[colorx]

  &.vs-navbar-gradient
    .vs-navbar-item-{colorx}
      border-radius: 4px

      &.is-active-item
        border-radius: 6px
        color rgb(255, 255, 255)
        background: rgb(100, 0, 100)
        if colorx == 'danger' {
          background-image: linear-gradient(30deg, getColor(colorx, 1) 0%, getColor(colorx, .5) 100%)
        }
        else if colorx == 'dark' {
          background-image: linear-gradient(30deg, getColor(colorx, 1) 0%, getColor(colorx, .5) 100%)
        }
        else {
          background-image: linear-gradient(30deg, getColor(colorx, 1) 0%, getColor(colorx, .5) 100%)
        }
        text-shadow: 1px 2px 4px rgba(0, 0, 0, 0.3)


// RESPONSIVE
.collapse
  display: block

  .vs-navbar--btn-responsive
    display: flex

  .vs-navbar--header
    display: flex
    align-items: center
    justify-content: space-between

  .vs-con-items
    display: none
    width: 100%

    &.activeMenuResponsive
      display: block

    .vs-spacer
      display: none

  .vs-navbar--item
    width: 100%

@media screen and (max-width: 800px)
  .vs-navbar--btn-responsive
    display: flex

  .vs-navbar
    display: block

  .vs-navbar--header
    display: flex
    align-items: center
    justify-content: space-between

  .vs-con-items
    display: none
    width: 100%

    &.activeMenuResponsive
      display: block

    .vs-spacer
      display: none

  .vs-navbar--item
    width: 100%