294 lines
6.0 KiB
SCSS
294 lines
6.0 KiB
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;
|
|
}
|