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;
flex-grow: 1;
-ms-flex-negative: 1;
top: 68px;
top: $usa-banner-height + $topbar-height;
position: relative;
@include media($medium-screen) {
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 {
width: calc(100% - 25rem);
top: $usa-banner-height + $topbar-height;
}
.sticky-cta-container {

4
styles/components/_topbar.scss
View File

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

2
styles/components/_usa_banner.scss
View File

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

3
styles/core/_variables.scss
View File

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

16
styles/elements/_sidenav.scss
View File

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