Always show side nav and update styling

This commit is contained in:
leigh-mil
2019-12-18 14:17:03 -05:00
parent 070cfda32c
commit 8166c05ec2
3 changed files with 54 additions and 36 deletions

View File

@@ -1,8 +1,3 @@
@mixin sidenav__header {
padding: $gap ($gap * 2);
font-weight: bold;
}
.sidenav-container {
box-shadow: $box-shadow;
overflow: hidden;
@@ -26,34 +21,58 @@
margin: 0px;
}
&__title {
@include sidenav__header;
&__header {
padding: $gap ($gap * 2);
font-weight: bold;
border-bottom: 1px solid $color-gray-lighter;
font-size: $h3-font-size;
&--minimized {
@extend .sidenav__header;
padding: $gap;
width: $sidenav-collapsed-width;
}
}
&__title {
font-size: $h6-font-size;
text-transform: uppercase;
width: 50%;
color: $color-gray-dark;
opacity: 0.54;
white-space: nowrap;
padding: $gap;
display: inline-flex;
align-items: center;
}
&__toggle {
@include sidenav__header;
font-size: $small-font-size;
line-height: 2.8rem;
float: right;
color: $color-blue-darker;
color: $color-blue;
text-decoration: none;
padding: $gap;
display: inline-flex;
align-items: center;
.toggle-arrows {
vertical-align: middle;
@include icon-size(20);
&:first-child {
margin-left: 0;
}
&:last-child {
margin-right: 0;
}
}
}
ul {
&.sidenav__list--padded {
margin-top: 4 * $gap;
margin-top: 3 * $gap;
margin-bottom: $footer-height;
padding-bottom: $gap;
padding: 0 $gap ($gap * 2);
position: fixed;
overflow-y: scroll;
top: $topbar-height + $usa-banner-height + 4rem;
@@ -69,6 +88,7 @@
li {
margin: 0;
display: block;
color: $color-black-light;
}
}
@@ -90,7 +110,7 @@
display: block;
padding: $gap ($gap * 2);
color: $color-black;
text-decoration: underline;
text-decoration: none;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;