houdini/app/assets/stylesheets/components/side_nav.css.scss

@import 'mixins';
@import 'components/side_nav_dimensions';

$sideNav-spacing: 8px 15px;


.sideNav {
	background: $charcoal;
	height: 100%;
	left: 0;
	top: 0;
	position: fixed;
	@include box-shadow(0 0 10px 0 rgba(black, 0.5));
	overflow-x: hidden;
	width: $sideNav-closed-width;
	@include transition(width 0.2s ease-out);
}
.sideNav * {
	@include no-select;
}
.sideNav-commitchangeLogo {
	white-space: nowrap;
	padding: 9px 14px;
	display: block;
	@include logo(18px, white, true, true);
	@include opacity(1);
	@include transition(opacity 0.2s ease-out);
}
.sideNav-commitchangeLogo img {
	max-width: none;
}
.sideNav-commitchangeLogo:hover {
	@include opacity(0.8);
}
.sideNav-commitchangeLogo .commitchangeLogo-text {
	margin-left: 15px;
}
.sideNav-section {
	padding: 6px 0;
	border-bottom: 1px solid rgba(white, 0.15);
}
.sideNav-link {
	position: relative;
	color: white;
	font-weight: bold;
	cursor: pointer;
	display: table;
	table-layout: fixed;
	@include transform(translateZ(0));
	@include transition(color 0.2s ease-out);
}
.sideNav-link:hover {
	color: $logo-blue;
}
.sideNav-icon {
	display: table-cell;
  text-align: center;
  font-size: 26px;
  padding: $sideNav-spacing;
}
.sideNav-text {
	@include ellipsis;
	max-width: 165px;
	font-size: 16px;
	position: absolute;
	top: 12px;
	left: 62px;
	height: 100%;
	@include transform(translateZ(0));
	@include opacity(0);
	@include transition(opacity 0.2s ease-out);
}
.sideNav-profile {
	width: 27px;
	@include border-radius(50%);
	margin: $sideNav-spacing;
	display: table-cell;
}
.sideNav-scrim {
	@include transition(opacity 0.2s ease-out);
	@include opacity(0);
	visibility: hidden;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	position: fixed;
	background-color: rgba(black, 0.6);
}
.sideNav-scrim.is-showing {
	visibility: visible;
	@include opacity(1);
}
.sideNav-toggle {
	@include transition(all 0.2s ease-out);
	position: fixed;
	display: none;
	top: 0;
	left: 0;
	width: 36px;
	height: 36px;
	background: rgba(black, 0.6);
	@include box-shadow(0 0 5px 0 rgba(black, 0.2));
	font-size: 20px;
	color: white;
	cursor: pointer;
}
.sideNav-toggle i {
	@include no-select;
	display: table-cell;
	vertical-align: middle;
	text-align: center;
}
.sideNav-toggle .fa-times {
	display: none;
}
.sideNav-toggle.is-togglingOpen{
	background: $trans;
	@include box-shadow(none);
	.fa-times {
		display: table-cell;
	}
	.fa-bars {
		display: none;
	}
}
@mixin open_side_nav {
	width: $sideNav-opened-width;
	.sideNav-text {
		@include opacity(1);
	}
}
@mixin close_side_nav {
	width: 0;
	padding-top: 34px;
}
.sideNav.is-open,
.sideNav.is-hamburgerStyle.is-open  {
	@include open_side_nav;
}
.sideNav.is-hamburgerStyle {
	@include close_side_nav;
}
.sideNav-toggle.is-hamburgerStyle {
	display: table;
}
@media screen and (min-width: 701px) {
	.sideNav:hover {
		@include open_side_nav;
	}
}
@media screen and (max-width: 700px) {
	.sideNav {
		@include close_side_nav;
	}
	.sideNav-toggle {
		display: table;
	}
}