Always show side nav and update styling
This commit is contained in:
@@ -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;
|
||||
|
Reference in New Issue
Block a user