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

Use css variables for banner heights

Browse Source
This commit is contained in:
leigh-mil 2019-08-30 14:58:18 -04:00
parent ef3654e014
commit 55b12ba633
6 changed files with 17 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
styles/components/_global_layout.scss
View File

@ -25,12 +25,12 @@ body {
margin: $gap; margin: $gap;
flex-grow: 1; flex-grow: 1;
-ms-flex-negative: 1; -ms-flex-negative: 1;
top: 68px; top: $usa-banner-height + $topbar-height;
position: relative; position: relative;
@include media($medium-screen) { @include media($medium-screen) {
margin: $gap * 2; margin: $gap * 2;
top: 68px; top: $usa-banner-height + $topbar-height;
} }
} }
} }

1
styles/components/_sticky_cta.scss
View File

@ -10,6 +10,7 @@
&.js-is-sticky { &.js-is-sticky {
width: calc(100% - 25rem); width: calc(100% - 25rem);
top: $usa-banner-height + $topbar-height;
} }
.sticky-cta-container { .sticky-cta-container {

4
styles/components/_topbar.scss
View File

@ -1,9 +1,9 @@
.topbar { .topbar {
background-color: $color-blue-darkest; background-color: $color-blue-darkest;
border-bottom: 1px solid $color-black; border-bottom: 1px solid $color-black;
height: 48px; height: $topbar-height;
position: fixed; position: fixed;
top: 28px; top: $usa-banner-height;
width: 100%; width: 100%;
z-index: 10; z-index: 10;

2
styles/components/_usa_banner.scss
View File

@ -4,7 +4,7 @@
padding: ($gap / 2) $gap; padding: ($gap / 2) $gap;
z-index: 15; z-index: 15;
position: fixed; position: fixed;
height: 28px; height: $usa-banner-height;
width: 100%; width: 100%;
img { img {

3
styles/core/_variables.scss
View File

@ -13,6 +13,9 @@ $hover-transition-time: 0.2s;
$search-input-height: 4.4rem; $search-input-height: 4.4rem;
$search-button-width: 5rem; $search-button-width: 5rem;
$footer-height: 5rem; $footer-height: 5rem;
$usa-banner-height: 2.8rem;
$sidenav-expanded-width: 25rem;
$sidenav-collapsed-width: 10rem;
/* /*
* USWDS Variables * USWDS Variables

16
styles/elements/_sidenav.scss
View File

@ -7,12 +7,12 @@
box-shadow: $box-shadow; box-shadow: $box-shadow;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
top: 76px; top: $topbar-height + $usa-banner-height;
width: 25rem; width: $sidenav-expanded-width;
&--minimized { &--minimized {
@extend .sidenav-container; @extend .sidenav-container;
width: 10rem; width: $sidenav-collapsed-width;
} }
&__fixed { &__fixed {
@ -20,7 +20,7 @@
} }
.sidenav { .sidenav {
width: 25rem; width: $sidenav-expanded-width;
@include media($large-screen) { @include media($large-screen) {
margin: 0px; margin: 0px;
@ -54,10 +54,10 @@
margin: ( 4 * $gap) 0; margin: ( 4 * $gap) 0;
position: fixed; position: fixed;
overflow-y: scroll; overflow-y: scroll;
top: 106px; top: $topbar-height + $usa-banner-height + 4rem;
bottom: 35px; bottom: $footer-height;
left: 0; left: 0;
width: 25rem; width: $sidenav-expanded-width;
} }
list-style: none; list-style: none;
@ -196,7 +196,7 @@
&--minimized { &--minimized {
@extend .sidenav; @extend .sidenav;
width: 10rem; width: $sidenav-collapsed-width;
margin: 0px; margin: 0px;
} }
} }