open-vault/website/source/assets/stylesheets/_sidebar.scss

// Base variables
// --------------------------------------------------
$screen-tablet:          768px;

$gray-darker:            #212121; // #212121 - text
$gray-dark:              #757575; // #757575 - secondary text, icons
$gray:                   #bdbdbd; // #bdbdbd - hint text
$gray-light:             #e0e0e0; // #e0e0e0 - divider
$gray-lighter:           #f5f5f5; // #f5f5f5 - background

/* -- Sidebar style ------------------------------- */

// Sidebar variables
// --------------------------------------------------
$zindex-sidebar-fixed: 1035;

$sidebar-desktop-width: 280px;
$sidebar-width: 240px;


$sidebar-padding: 16px;
$sidebar-divider: $sidebar-padding/2;

$sidebar-nav-height: 48px;

$sidebar-icon-width: 40px;
$sidebar-icon-height: 20px;

$sidebar-badge-size: $sidebar-nav-height/2;
$sidebar-badge-font-size: 10px;

$sidebar-brand-color: $gray-dark;
$sidebar-icon-color: $gray-dark;
$sidebar-menu-color: $gray-darker;


$sidebar-font-weight: 300;

// Sidebar mixins
// --------------------------------------------------

// Sidebar horizontal block
//
// This settings will extended by .sidebar-text, .sidebar-brand and .sidebar-nav>li>a
@mixin sidebar-block()
{
  display: block;
  line-height: $sidebar-nav-height;
  padding: 0;
  //padding-left: ($sidebar-padding + $sidebar-badge-size) + $sidebar-padding;
  //padding-right: ($sidebar-padding + $sidebar-badge-size) + $sidebar-padding;
  text-decoration: none;
  clear: both;
  @include lato-light();
  font-weight: $sidebar-font-weight;
  //@include text-overflow();
  @include transition(all .2s ease-in-out);

  &:hover, &:focus {
    @include box-shadow(none);
    outline: none;
  }

  // positioning caret in sidebar block
  .caret {
    position: absolute;
    right: $sidebar-padding + $sidebar-badge-size/2 - 4px; // caret centered by badge position; 4px - caret width
    top: $sidebar-nav-height/2;
  }
  // positioning badge in sidebar block
  .sidebar-badge {
    position: absolute;
    right: $sidebar-padding;
    top: ($sidebar-nav-height - $sidebar-badge-size)/2 ;
  }
}

// Sidebar design template
//
// You can make own sidebar style with this template
@mixin sidebar-template(
  $color,
  $bg,
  $header-bg,
  $brand-color,
  $brand-bg,
  $brand-hover-color,
  $brand-hover-bg,
  $divider,
  $badge-color,
  $badge-bg,
  $icon-color,
  $icon-hover-color,
  $link-color,
  $link-bg,
  $link-hover-color,
  $link-hover-bg,
  $link-active-color,
  $link-active-bg,
  $link-disabled-color,
  $link-disabled-bg
) {

  background-color: $bg;

  ul{
    padding-left: 0;
    list-style-type: none;
  }

  .sidebar-header {
    background-color: $header-bg;
    margin-bottom: 15px;
  }

  .sidebar-divider, .sidebar-nav .divider {
    background-color: $divider;
  }

  .sidebar-text {
    color: $color;
  }

  .buttons-nav{
    margin-top: 10px;
    text-align: center;
    a{
      min-width: 148px;
      margin-bottom: 10px;
    }
  }

  .sidebar-nav {
    text-align: center;
    //border-bottom: 1px solid $faint-gray;
    padding-bottom: 8px;

    &:last-child{
      border-bottom: none;
    }

    li > a {
      color: $link-color;
      background-color: $link-bg;

      i {
        color: $icon-color;
      }
    }
    li:hover > a, li > a:hover {
      color: $link-hover-color;
      background-color: $link-hover-bg;

      i {
        color: $icon-hover-color;
      }
    }
    li:focus > a, li > a:focus {
      color: $link-color;
      background-color: $link-bg;

      i {
        color: $icon-hover-color;
      }
    }

    > .open > a {
      &,
      &:hover,
      &:focus {
        color: $link-hover-color;
        background-color: $link-hover-bg;
      }
    }

    > .active > a {
      &,
      &:hover,
      &:focus {
        color: $link-active-color;
        background-color: $link-active-bg;
      }
    }
    > .disabled > a {
      &,
      &:hover,
      &:focus {
        color: $link-disabled-color;
        background-color: $link-disabled-bg;
      }
    }
    > li > .ink {
      //background: #80d8ff;
      //opacity: 0.5;
    }

    // Dropdown menu items
    > .dropdown {
      // Remove background color from open dropdown
      > .dropdown-menu {

        background-color: $link-hover-bg;

        > li > a {
          &:focus {
            background-color: $link-hover-bg;
            color: $link-hover-color;
          }
          &:hover {
            background-color: darken($link-hover-bg, 7%);
            color: $link-hover-color;
          }
        }

        > .active > a {
          &,
          &:hover,
          &:focus {
            color: $link-active-color;
            background-color: $link-active-bg;
          }
        }
      }
    }
  }
}

//
// Sidebars
// --------------------------------------------------

// Wrapper and base class
//
// Provide a static sidebar from which we expand to create other sidebar variations.
.sidebar {
  position: relative;
  display: block;
  min-height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  border: none;
  @include transition(all 0.5s cubic-bezier(0.55, 0, 0.1, 1));
  @include clearfix();
}

// Sidebar Elements
//
// Basic style of sidebar elements
.sidebar {

  // Sidebar heading
  //----------------
  .sidebar-header {
    position: relative;
    margin-bottom: $sidebar-divider;
    @include transition(all .2s ease-in-out);
    //border-bottom: 1px solid $faint-gray;

    .buttons{
      text-align: center;
      padding: $xsmall-pad 0 $small-pad;
      a{
        &.outline-btn{
          margin-right: 10px;
        }
      }
    }
  }

 .sidebar-image {
    padding-top: 24px;
    img {
      display: block;
      margin: 0 auto;
    }
  }

  // Brand/project name
  //
  // In google guideline used for email dropdown
  .sidebar-brand {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    @include sidebar-block();

    &:hover,
    &:focus {
      text-decoration: none;
    }
  }

  // Sidebar text
  //----------------
  .sidebar-text {
    @include sidebar-block();
  }

  // Sidebar icons
  //----------------
  .sidebar-icon {
    display: inline-block;
    height: $sidebar-icon-height;
    margin-right: $sidebar-divider;
    text-align: left;
    font-size: $sidebar-icon-height;
    vertical-align: middle;

    &:before, &:after {
      vertical-align: middle;
    }

    // This values only for this icons and only for this example
    // Idea is that icons must be equal width
    &.icon-development {
      width: 22px;
      @include img-ret-rails-png('runtime-develop-icon-color', 22px, $sidebar-icon-height );
    }
    &.icon-operations {
      width: 21px;
      @include img-ret-rails-png('runtime-deploy-icon-color', 21px, $sidebar-icon-height );
    }
    &.icon-runtime {
      width: 20px;
      @include img-ret-rails-png('runtime-maintain-icon-color', 20px, $sidebar-icon-height );
    }
  }
}



// Sidebar navigation class
// ------------------------
.sidebar .sidebar-nav {
  margin: 0;
  padding: 0;

  // Links
  //----------------
  li {
    position: relative;
    list-style-type: none;

    a {
      position: relative;
      cursor: pointer;
      user-select: none;
      @include sidebar-block();

      &:hover {
        background: transparent;
      }
    }
  }
}

// Sidebar color theme variations
//
// ------------------------
.sidebar-default {
  @include sidebar-template(
  $color: $gray-darker,
  $bg: #fff,
  $header-bg: $white,
  $brand-color: $gray-dark,
  $brand-bg: transparent,
  $brand-hover-color: $gray-darker,
  $brand-hover-bg: rgba(0, 0, 0, 0.10),
  $divider: $gray,
  $badge-color: #fff,
  $badge-bg: $gray,
  $icon-color: $gray-dark,
  $icon-hover-color: $gray-dark,
  $link-color: $gray-darker,
  $link-bg: transparent,
  $link-hover-color: $gray-darker,
  $link-hover-bg: lighten($faint-gray, 6%),
  $link-active-color: $gray-darker,
  $link-active-bg: $gray-light,
  $link-disabled-color: $gray-light,
  $link-disabled-bg: transparent
  );
}


// Sidebar toggling
//
// Hide sidebar
.sidebar {
  width: 0;
  @include translate3d(-$sidebar-desktop-width, 0, 0);

  &.open {
    min-width: $sidebar-desktop-width;
    width: $sidebar-desktop-width;
    @include translate3d(0, 0, 0);
  }
}

// Sidebar positions: fix the left/right sidebars
.sidebar-fixed-left,
.sidebar-fixed-right,
.sidebar-stacked {
  position: fixed;
  top: 0;
  bottom: 0;
  z-index: $zindex-sidebar-fixed;
}
.sidebar-stacked {
  left: 0;
}
.sidebar-fixed-left {
  left: 0;
  box-shadow: 2px 0px 25px rgba(0,0,0,0.15);
  -webkit-box-shadow: 2px 0px 25px rgba(0,0,0,0.15);
}
.sidebar-fixed-right {
  right: 0;
  box-shadow: 0px 2px 25px rgba(0,0,0,0.15);
  -webkit-box-shadow: 0px 2px 25px rgba(0,0,0,0.15);

  @include translate3d($sidebar-desktop-width, 0, 0);
  &.open {
    @include translate3d(0, 0, 0);
  }
  .icon-material-sidebar-arrow:before {
    content: "\e614"; // icon-material-arrow-forward
  }
}

// Sidebar size
//
// Change size of sidebar and sidebar elements on small screens
@media (max-width: $screen-tablet) {
  .sidebar.open {
    min-width: $sidebar-width;
    width: $sidebar-width;
  }

  .sidebar .sidebar-header {
    //height: $sidebar-width * 9/16; // 16:9 header dimension
  }

  .sidebar .sidebar-image {
    /* img {
      width: $sidebar-width/4 - $sidebar-padding;
      height: $sidebar-width/4 - $sidebar-padding;
    } */
  }
}

.sidebar-overlay {
  visibility: hidden;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  background: $white;
  z-index: 2;

  -webkit-transition: visibility 0 linear .4s,opacity .4s cubic-bezier(.4,0,.2,1);
  -moz-transition: visibility 0 linear .4s,opacity .4s cubic-bezier(.4,0,.2,1);
  transition: visibility 0 linear .4s,opacity .4s cubic-bezier(.4,0,.2,1);
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
}

.sidebar-overlay.active {
  opacity: 0.3;
  visibility: visible;
  -webkit-transition-delay: 0;
  -moz-transition-delay: 0;
  transition-delay: 0;
}