@import "variables"

.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


/*
 * Profile

.profile
  width: 100%
  float: left
  padding: 15px 10px
  position: relative
  background: #2d3945
  .profile-image
    float: left
    width: 100%
    margin: 0 0 10px
    text-align: center
    img
      width: 100px
      border: 3px solid #FFF
      border-radius: 50%
  .profile-data
    width: 100%
    float: left
    text-align: center
    .profile-data-name
      width: 100%
      float: left
      font-size: 14px
      font-weight: 500
      color: #FFF
    .profile-data-title
      width: 100%
      float: left
      font-size: 11px
      font-weight: 400
      color: $gray-dark
  .profile-controls a
    width: 30px
    height: 30px
    font-size: 14px
    color: #DDD
    border: 2px solid #DDD
    line-height: 25px
    position: absolute
    border-radius: 50%
    padding: 0
    transition: all 200ms ease
    &.profile-control-left
      left: 15px
      top: 53px
      text-align: center
    &.profile-control-right
      right: 15px
      top: 53px
      text-align: center
    .fa, .glyphicon
      width: auto
      margin-right: auto
    &:hover
      border-color: #FFF
      color: #FFF