src/scss/navigation.scss
/**
* http://www.google.com/design/spec/layout/structure.html#structure-app-bar
*/
.mdc-Navigation-sidebar {
border-right: 1px solid rgba(0, 0, 0, 0.14);
position: fixed;
top: 0;
left: 0;
bottom: 0;
width: $navigation-width;
background: #fff;
font-size: 13px;
font-weight: 500;
visibility: hidden;
transform: translateX(-$navigation-width);
transition-duration: 0.2s;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
z-index: 104;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
@include xlarge {
visibility: visible;
transform: translateX(0);
}
}
.mdc-Navigation-sidebar.is-visible {
visibility: visible;
transform: translateX(0);
/**
* Show overlay first and then slide in navigation
*/
transition-delay: 0.1s;
}
.mdc-Navigation-logo {
height: 48px;
padding: 12px 24px 10px 2px;
border-bottom: 1px solid #e0e0e0;
@include medium {
height: 64px;
padding-left: 11px;
}
}
.mdc-Navigation-links {
list-style: none;
margin: 0;
padding: 12px 0 10px;
}
$nav-link-height: 44px;
.mdc-Navigation-group-title {
cursor: pointer;
}
.mdc-Navigation-links a,
.mdc-Navigation-group-title {
display: flex;
align-items: center;
justify-content: space-between;
text-decoration: none;
padding-left: 22px;
padding-right: 16px;
height: $nav-link-height;
font-size: 14px;
color: rgba(0, 0, 0, 0.87);
}
.mdc-Navigation-group-icon {
transform: rotate(90deg);
transition: transform 0.15s ease-in-out;
}
.mdc-Navigation-group--opened .mdc-Navigation-group-icon {
transform: rotate(-90deg);
}
.mdc-Navigation-group-links {
transition: max-height 0.15s ease-in-out;
overflow: hidden;
padding-left: 22px;
}
.mdc-Navigation-group a {
color: rgba(0, 0, 0, 0.54);
}
.mdc-Navigation a:focus {
outline: none;
color: #7986cb;
}
.mdc-Navigation-links a.active {
color: $color-primary--dark;
}
.mdc-Navigation-hamburger {
fill: #fff;
position: fixed;
z-index: 102;
top: 0;
left: 4px;
@include medium {
top: 8px;
}
@include xlarge {
display: none;
}
}
.mdc-Navigation-overlay {
background-color: rgba(0, 0, 0, 0.5);
position: fixed;
z-index: 103;
top: 0;
right: 0;
bottom: 0;
left: 0;
visibility: hidden;
opacity: 0;
}
.mdc-Navigation-overlay.is-visible {
opacity: 1;
visibility: visible;
}