atst/styles/elements/_sidenav.scss
2018-08-03 09:09:07 -04:00

88 lines
1.5 KiB
SCSS

.sidenav {
ul {
list-style: none;
margin: 0;
padding: 0;
li {
margin: 0;
display: block;
}
}
.sidenav__link {
display: block;
border-top: 1px solid $color-black;
padding: $gap ($gap * 2);
color: $color-black;
text-decoration: none;
white-space: nowrap;
.sidenav__link-icon {
margin-left: - ($gap * .5);
}
&.sidenav__link--disabled {
color: $color-shadow;
pointer-events: none;
}
&.sidenav__link--active {
@include h4;
background-color: $color-white;
color: $color-primary;
box-shadow: inset ($gap / 2) 0 0 0 $color-primary;
.sidenav__link-icon {
@include icon-style-active;
}
+ ul {
background-color: $color-white;
.sidenav__link {
&--active {
@include h5;
color: $color-primary;
box-shadow: none;
}
}
}
}
+ ul {
padding-bottom: $gap / 2;
li {
.sidenav__link {
@include h5;
padding: $gap * .75;
padding-left: 4.5rem;
border: 0;
font-weight: normal;
.sidenav__link-icon {
@include icon-size(12);
flex-shrink: 0;
margin-right: 1.5rem;
margin-left: -3rem
}
.sidenav__link-label {
padding-left: 0;
}
}
}
}
&:hover {
color: $color-primary;
.sidenav__link-icon {
@include icon-style-active;
}
}
}
}