terraform/website/source/assets/stylesheets/hashicorp-shared/_hashicorp-sidebar.scss

//
// Hashicorp Sidebar
// - Shared throughout projects
// - Edits should not be made here
// --------------------------------------------------

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

$gray-darker:               #212121; // #212121 - text
$gray-secondary:            #757575; // #757575 - secondary text, icons
$gray:                      #bdbdbd; // #bdbdbd - hint text
$gray-light:                #e0e0e0; // #e0e0e0 - divider
$gray-lighter:              #f5f5f5; // #f5f5f5 - background
$link-color:                $gray-darker;
$link-bg:                   transparent;
$link-hover-color:          $gray-lighter;
$link-hover-bg:             $gray-lighter;
$link-active-color:         $gray-darker;
$link-active-bg:            $gray-light;
$link-disabled-color:       $gray-light;
$link-disabled-bg:          transparent;

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

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

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

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

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

@mixin sidebar-nav-base {
  text-align: center;

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

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

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

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

  // 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;
        }
        &:hover {
          background-color: $link-hover-bg;
        }
      }

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

//
// Sidebar
// --------------------------------------------------

// Sidebar Elements
//
// Basic style of sidebar elements
.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();
  background-color: $white;

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

  .sidebar-divider, .divider {
    width: 80%;
    height: 1px;
    margin: 8px auto;
    background-color: lighten($gray, 20%);
  }

  // Sidebar heading
  //----------------
  .sidebar-header {
    position: relative;
    margin-bottom: $sidebar-padding;
    @include transition(all .2s ease-in-out);
  }

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


  // 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;
    }
  }

  .sidebar-nav {
    margin: 0;
    padding: 0;

    @include sidebar-nav-base();

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

      a {
        position: relative;
        cursor: pointer;
        user-select: none;
        @include hashi-a-style-core();

        svg{
          top: 2px;
          width: 14px;
          height: 14px;
          margin-bottom: -2px;
          margin-right: 4px;
        }
      }
    }
  }
}

// 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: $zindex-sidebar-fixed - 1;

  -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;
}