pk/atst
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Tidy sidenav

Browse Source
This commit is contained in:
graham-dds
2019-12-27 13:10:00 -05:00
parent 903edb8068
commit cdd4a4eee1
5 changed files with 156 additions and 197 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
styles/components/_global_navigation.scss
View File

@@ -4,18 +4,4 @@
height: auto;
box-shadow: $box-shadow;
margin-bottom: -$footer-height * 2.5;
.sidenav__link {
padding-right: $gap * 2;
@include media($large-screen) {
padding-right: $gap * 2;
}
}
&__context--portfolio {
.sidenav__link {
padding-right: $gap;
}
}
}

235
styles/elements/_sidenav.scss
View File

@@ -1,5 +1,4 @@
.sidenav-container {
box-shadow: $box-shadow;
overflow: hidden;
position: relative;
top: $topbar-height + $usa-banner-height;
@@ -9,131 +8,11 @@
@extend .sidenav-container;
width: $sidenav-collapsed-width;
}
}
&__fixed {
position: fixed;
}
.sidenav {
width: $sidenav-expanded-width;
@include media($large-screen) {
margin: 0px;
}
&__header {
padding: $gap ($gap * 2);
font-weight: bold;
border-bottom: 1px solid $color-gray-lighter;
&--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 {
font-size: $small-font-size;
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: 3 * $gap;
margin-bottom: $footer-height;
padding-bottom: ($gap * 2);
position: fixed;
overflow-y: scroll;
top: $topbar-height + $usa-banner-height + 4rem;
bottom: 0;
left: 0;
width: $sidenav-expanded-width;
background-color: $color-white;
}
list-style: none;
padding: 0;
li {
margin: 0;
display: block;
color: $color-black-light;
}
}
&__divider--small {
display: block;
width: 4 * $gap;
border: 1px solid #d6d7d9;
margin-left: 2 * $gap;
margin-bottom: $gap;
}
&__text {
margin: 2 * $gap;
color: $color-gray;
font-style: italic;
}
&__link {
display: block;
padding: $gap ($gap * 2);
white-space: nowrap;
overflow: hidden;
color: $color-black-light;
text-decoration: none;
text-overflow: ellipsis;
&--active {
@include h4;
background-color: $color-aqua-lightest;
box-shadow: inset ($gap / 2) 0 0 0 $color-primary-darker;
position: relative;
color: $color-primary-darker;
}
&:hover {
color: $color-primary;
background-color: $color-aqua-lightest;
.sidenav__link-icon {
@include icon-style-active;
}
}
}
}
.sidenav {
width: $sidenav-expanded-width;
position: fixed;
&--minimized {
@extend .sidenav;
@@ -141,4 +20,110 @@
width: $sidenav-collapsed-width;
margin: 0px;
}
@include media($large-screen) {
margin: 0px;
}
&__header {
padding: $gap ($gap * 2);
font-weight: bold;
border-bottom: 1px solid $color-gray-lighter;
&--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 {
font-size: $small-font-size;
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;
}
}
&__list {
margin-top: 3 * $gap;
margin-bottom: $footer-height;
padding-bottom: ($gap * 2);
position: fixed;
overflow-y: scroll;
top: $topbar-height + $usa-banner-height + 4rem;
bottom: 0;
left: 0;
width: $sidenav-expanded-width;
background-color: $color-white;
list-style: none;
padding: 0;
&--no-header {
top: $topbar-height + $usa-banner-height;
}
}
&__text {
margin: 2 * $gap;
color: $color-gray;
font-style: italic;
}
&__item {
margin: 0;
display: block;
color: $color-black-light !important;
}
&__link {
display: block;
padding: $gap ($gap * 2);
white-space: nowrap;
overflow: hidden;
color: $color-black-light !important;
text-decoration: none;
text-overflow: ellipsis;
&--active {
@include h4;
background-color: $color-aqua-lightest !important;
color: $color-primary-darker !important;
box-shadow: inset ($gap / 2) 0 0 0 $color-primary-darker;
position: relative;
}
&:hover {
color: $color-primary !important;
background-color: $color-aqua-lightest;
}
}
}