Use css variables for banner heights
This commit is contained in:
parent
ef3654e014
commit
55b12ba633
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -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 {
|
||||||
|
@ -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;
|
||||||
|
|
||||||
|
@ -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 {
|
||||||
|
@ -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
|
||||||
|
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user