@import "variables"

@import "compass/css3/box-shadow"
@import "compass/css3/transition"
@import "compass/css3/text-shadow"
@import "compass/css3/border-radius"

.page-sidebar 
  position: fixed
  height: 100%
  bottom: 0
  overflow: auto
  background-color: $navbar-default-bg
  width: $left-menu-width-open
  float: left
  z-index: 3
  +box-shadow(2px 0 5px #fafafa)
  &.navbar-collapse
    padding: 0

.navbar-toggle  
  border-color: $navbar-default-toggle-border-color
  margin-left: 10px
  .icon-bar
    background-color: $navbar-default-toggle-icon-bar-bg
  &:hover,
  &:focus
    background-color: $navbar-default-toggle-hover-bg  

.brand-logo
  width: 100%
  text-align: center
  padding: 0
  border-bottom: 0
  height: $navbar-height
  a
    color: #fff !important
    font-size: 1.4em
    font-weight: 400
    display: block
    height: $navbar-height
    background-color: $navbar-default-brand-color
    padding: 15px
    line-height: 20px
    .fa
      color: $navbar-icon-brand-color !important
    &:hover,
    &:focus,
    &:active
      background-color: $navbar-default-brand-hover-bg !important 
      text-decoration: none

.sidebar-navigation,
.sidebar-navigation ul,
.navigation-horizontal
  width: 100%
  padding: 0
  margin: 0
  float: left
  list-style: none
  display: block
  z-index: 3
  background-color: $navbar-default-bg
  +box-shadow(0 2px 5px #fafafa)
  .ul-navbar li
    float: left
    display: block
    width: 100%
    padding: 0
    margin: 0
    position: relative

  .component-section-item
    border-bottom: 1px solid $navbar-default-border

  .component-section-title 
    display: block
    float: left
    width: 100%
    font-weight: bold
    text-transform: uppercase
    background-color: $gray-lighter
    color: $gray-darker
    padding: 15px
    line-height: 19px
    &:hover,
    &:focus 
      background-color: $gray-lighter
      color: $gray-darker 
      cursor: default
      text-decoration: none


  .component-item
    a, button
      display: block
      float: left
      width: 100%
      line-height: 19px
      color: $navbar-default-link-color
      font-weight: 400
      padding: 10px 15px
      text-decoration: none
      transition: all 200ms ease
      &:hover,
      &:focus
        color: $navbar-default-link-hover-color
        background-color: $navbar-default-link-hover-bg
        padding-left: 25px

    &.active    
      a, button
        color: $navbar-default-link-active-color
        background-color: $navbar-default-link-active-bg
        border-right: 4px solid $navbar-default-link-active-color
        &:hover,
        &:focus
          padding-left: 15px


// Horizontal Navbar
.navigation-horizontal
  height: $navbar-height
  background: $navbar-default-bg
  .ul-navbar
    &.list-inline
      margin-left: 0

    .brand-logo a
      border-bottom: 0
      width: $left-menu-width-open
    li
      background-color: #fff
      > a, button
        padding: 10px 15px
        border-bottom: 0
        line-height: 19px
        color: $navbar-default-link-color
        +text-shadow(none)
        display: block
        
        &:hover
          background: $navbar-default-link-hover-bg
          text-decoration: none
          .fa, .glyphicon
            color: $navbar-icon-color
        .fa, .glyphicon
          color: $navbar-default-link-color
        &.navbar-toggle  
          padding: 9px 10px
          border-bottom: 1px solid $navbar-default-toggle-border-color
          display: none
      .brand-logo a
        background-color: $navbar-default-brand-color
      &.active > a,
      &.active > button
        background: $navbar-default-link-active-bg
        .fa, .glyphicon
          color: $navbar-icon-color
      ul
        width: $left-menu-width-open
        position: absolute
        overflow: visible
        +border-radius(3px)
        +box-shadow(0 2px 1px 0 rgba(0, 0, 0, 0.1))
        z-index: 3
        li
          width: 100%
        
    li
      width: auto
      position: relative
      &.active > ul
        display: block
    
    .xn-icon-button > a,
    .xn-icon-button > button
      padding: 15px 10px
      text-align: center
      width: 50px
      .fa, .glyphicon
        margin: 0
    
    > li
      
      &.xn-profile
        padding: 0
        border-bottom: 1px solid #273541
        .profile-mini
          display: none
          width: 50px
          padding: 7px
          img
            width: 36px
            border: 2px solid #FFF
            +border-radius(50%)
    .informer
      font-size: 11px
      position: absolute
      line-height: 20px
      text-align: center
      padding: 0 5px
      background: #BBB
      right: 10px
      top: 15px
      color: #FFF
      +border-radius(3px)
      &.pulsate
        animation: pulsate 1s ease-out
        animation-iteration-count: infinite
      &.informer-primary
        background: $brand-primary
      &.informer-success
        background: $brand-success
      &.informer-info
        background: $brand-info
      &.informer-warning
        background: $brand-warning
      &.informer-danger
        background: $brand-danger
    li li .informer
      top: 12px
    .xn-icon-button .informer
      left: auto
      bottom: auto
      right: 1px
      top: 5px