Create reusable StickyCTA component

This commit is contained in:
richard-dds
2019-05-30 16:47:42 -04:00
parent 4e0cc26b5f
commit 37ca94df42
11 changed files with 72 additions and 2 deletions

View File

@@ -43,6 +43,7 @@
@import "components/usa_banner";
@import "components/checklist";
@import "components/dod_login_notice.scss";
@import "components/sticky_cta.scss";
@import "sections/login";
@import "sections/home";

View File

@@ -24,7 +24,6 @@ body {
.global-panel-container {
margin: $gap;
max-width: $site-max-width;
overflow-x: auto;
flex-grow: 1;
-ms-flex-negative: 1;

View File

@@ -0,0 +1,40 @@
.sticky-cta {
@include media($small-screen) {
margin-left: -$gap * 4;
}
@include media($medium-screen) {
margin-left: -$gap * 5;
}
background-color: $color-gray-lightest;
border-top: 1px solid $color-gray-lighter;
border-bottom: 1px solid $color-gray-lighter;
padding: 0 40px 0 40px;
box-shadow: $box-shadow;
margin-bottom: 20px;
}
.sticky-cta-container {
display: flex;
justify-content: center;
}
.sticky-cta-text {
flex-grow: 1;
}
.sticky-cta-buttons {
display: flex;
justify-content: center;
button {
margin-top: auto;
margin-bottom: auto;
width: 144px;
margin-left: 33px;
}
}

View File

@@ -42,6 +42,5 @@
&.col--grow {
flex: 1;
flex-grow: 1;
overflow: auto;
}
}