src/styles/components/sidebar.scss
.sidebar {
position: relative;
float: left;
width: 180px;
height: calc(100% - 41px);
}
.sidebar-navigation-spacer {
height: 20px;
}
.sidebar-navigation-label {
padding: 10px 20px 5px 20px;
color: $onblack-mouseprint;
font-size: ms(0);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.65px;
}
.sidebar-navigation-link {
display: block;
& span {
display: inline-block;
vertical-align: middle;
padding-right: 5px;
font-size: 16px;
font-weight: normal;
-webkit-font-smoothing: none;
text-rendering: none;
}
}
.sidebar-navigation-link a {
@extend .opensans;
outline: none;
cursor: pointer;
margin-top: 10px;
padding: 0 20px;
display: inline-block;
color: $onblack-byline;
background: transparent;
text-decoration: none;
border-top-right-radius: 2px;
border-bottom-right-radius: 2px;
box-shadow: 0 0 0 transparent;
&:hover {
color: mix($onblack-byline, #fff, 30%);
}
&.active {
color: mix($onblack-byline, #fff, 30%);
}
}
.sidebar-bottom {
position: absolute;
bottom: 0;
padding: 20px;
color: $onblack-byline;
font-size: 10px;
text-align: center;
}