konsento/konsento

// ========================================================================
//   Component: sidebar.less
// ========================================================================
 
$sidebar-bg:                      $aside-bg;

$sidebar-item-color:              #515253;
$sidebar-item-color-active:       $nav-top-bg;
$sidebar-item-bg-active:          darken($sidebar-bg, 1%);

$sidebar-icon-color:              inherits;
$sidebar-icon-color-active:       $nav-top-bg;

$sidebar-bullet-color:            rgba(0,0,0,.25);
$sidebar-bullet-color-active:     $sidebar-icon-color-active;

$sidebar-heading-color:           #919DA8;
$sidebar-label-color:             $sidebar-item-color;

$submenu-header-hg:               40px;   // Submenu header when hover collapse sidebar
$sidebar-item-border-wd:          3px;
$scrollbar-wd:                    17px;

.sidebar {
  height: 100%;
  padding-bottom: 20px;
  background-color: $sidebar-bg; 
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  
  // draw a divider for the sidebar
  &:after {
    content:"";
    background: rgba(0,0,0,.15);
    position: absolute;
    display: block;
    top:0;
    bottom: 0;
    right: 0;
    width: 1px;
    -webkit-transform: translateZ(0px);
  }

  .nav-heading {
    padding: 12px 15px;
    color: $sidebar-heading-color;
    font-size: 13px;
    letter-spacing: .035em;
    pointer-events: none;
    cursor: default;
  }

  // Items
  // First main level
  > .nav {
    position: relative;

    // Only the first item in sidebar
    > .nav-heading:first-child {
      padding-top: 20px;
    }

    > li {
      border-left: $sidebar-item-border-wd solid transparent;
      @include transition(border-left-color 0.4s ease);
      
      > a,
      > .nav-item {
        padding: 12px 24px;
        color: $sidebar-item-color;
        letter-spacing: .025em;
        font-weight: normal;

        &:focus, &:hover {
          text-decoration: none;
          outline: none;
          color: $sidebar-item-color-active;
        }
        // Item icon
        > em {
          width: 1.8em;
          display: inline-block;
          font-style: normal;
          font-weight: normal;
          line-height: 1;
          -webkit-font-smoothing: antialiased;
          color: $sidebar-icon-color;
        }
      }

      // Active item state
      &.active,
      &.open {
        &,
        > a,
        .nav {
          background-color: $sidebar-item-bg-active;
          color: $sidebar-item-color-active;
        }
        > a > em {
          color: $sidebar-icon-color-active;
        }  
      }

      &.active {
        border-left-color: $sidebar-item-color-active;
      }
    }
    .label {
      display: block;
    }
  }
}

// Hides the scrollbar only on desktops
$tablet-landscape: 1025px;
@media only screen and (min-width: $tablet-landscape) {
  .sidebar {
    margin-right: -$scrollbar-wd;
    overflow-y: scroll;
  }
}

// Sub Levels
.sidebar-subnav {
  background-color: $sidebar-bg;
  
  > .sidebar-subnav-header {
    color: $sidebar-item-color;
    display: none;
    padding: 10px 20px;
    font-weight: bold;
  }
  
  > li  {
    border-left: 0 !important;
    > a,
    > .nav-item {
      display: block;
      position: relative;
      padding: 10px 20px;
      padding-left: 53px;
      font-weight: normal;
      background-color: transparent !important;
      color: $sidebar-item-color;
      &:focus, &:hover {
        color: $sidebar-item-color-active;
      }
      // submenu icons
      > em {
        display: inline-block;
        width: 1.8em;
        margin: 0 0 0 -2em;
      }
    }

    &.active {
      > a,
      > .nav-item {
        color: $sidebar-icon-color-active;
        &:after {
          border-color: $sidebar-bullet-color-active;
          background-color: $sidebar-bullet-color-active;
        }
      }
    }

    // Nested levels
    .nav > li {
      padding-left: 5px;
    }

  } // li

  // This only happend when sidebar is collapsed and the submenu
  // visibility is toggled via js
  &.nav-floating {
    border: 1px solid rgba(0,0,0,0.15);
    margin-left: -1px;
    // we resuse the collapse element so we need to override
    &, .collapse {
      height: auto !important;
      display: block !important;
      visibility: visible !important;
    }
    > .sidebar-subnav-header {
      display: block;
    }
    // reduce padding when item is on sidebar collapsed
    li > a {
      padding-left: 20px;
      // submenu icons
      em {
        margin-left: 0;
      }
    }
  }
}

// Desktop styles
// ---------------------------------

@media only screen and (min-width: $mq-tablet) {
  
  .sidebar > .nav {

    .label {
      margin: 2px 0 0 0;
    }
  }
  
} // @media @desktop

// Collapsed state styles
.aside-collapsed {

  .sidebar {
    overflow-x: hidden;
    // Applies to first level items
    > .nav {
      
      .nav, 
      > .nav-heading,
      > li > a > span {
        display: none !important;
      }

      > li {
        width: $aside-wd-collapsed - 1;
        > a, > .nav-item {
          text-indent: -$sidebar-item-border-wd;
          padding: 20px 0;
          text-align: center;
          > em {
            font-size: 1.6em; // increase icons size
            width: auto;
          }
          &:focus { // accessibility
            background-color: transparent;
            > em { 
              color: inherit; 
            }
          }
        }
      }
    }

    // labels in menu items
    .nav {
      .label {
        position: absolute;
        top: 10px; 
        right: 5px;
        text-indent: 0;
      }
    }

  } // .sidebar
} // .aside-collapsed