diff --git a/js/index.js b/js/index.js index 65973973..9446814f 100644 --- a/js/index.js +++ b/js/index.js @@ -5,6 +5,7 @@ import ally from 'ally.js' import classes from '../styles/atat.scss' import Vue from 'vue/dist/vue' import VTooltip from 'v-tooltip' +import stickybits from 'stickybits' import dodlogin from './components/dodlogin' import levelofwarrant from './components/levelofwarrant' @@ -124,4 +125,12 @@ const app = new Vue({ }) }, delimiters: ['!{', '}'], + + directives: { + sticky: { + inserted: el => { + stickybits(el) + }, + }, + }, }) diff --git a/package.json b/package.json index 9da64e8a..8fb0ae7b 100644 --- a/package.json +++ b/package.json @@ -19,6 +19,7 @@ "date-fns": "^1.29.0", "npm": "^6.0.1", "ramda": "^0.25.0", + "stickybits": "^3.6.6", "svg-innerhtml": "^1.1.0", "text-mask-addons": "^3.8.0", "uswds": "^1.6.9", diff --git a/styles/atat.scss b/styles/atat.scss index 22757667..3f745e78 100644 --- a/styles/atat.scss +++ b/styles/atat.scss @@ -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"; diff --git a/styles/components/_global_layout.scss b/styles/components/_global_layout.scss index 4e5023f6..27d1c4eb 100644 --- a/styles/components/_global_layout.scss +++ b/styles/components/_global_layout.scss @@ -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; diff --git a/styles/components/_sticky_cta.scss b/styles/components/_sticky_cta.scss new file mode 100644 index 00000000..d4619c76 --- /dev/null +++ b/styles/components/_sticky_cta.scss @@ -0,0 +1,41 @@ +.sticky-cta { + @include media($small-screen) { + margin-left: -$gap * 4; + } + + @include media($medium-screen) { + margin-left: -$gap * 7; + } +} + +.sticky-cta.js-is-sticky { + width: 78.5%; +} + +.sticky-cta-container { + display: flex; + justify-content: center; + + 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-text { + flex-grow: 1; +} + +.sticky-cta-buttons { + display: flex; + justify-content: center; + + button { + margin-top: auto; + margin-bottom: auto; + width: 144px; + margin-left: 33px; + } +} diff --git a/styles/core/_grid.scss b/styles/core/_grid.scss index f926b0d8..17aa81a6 100644 --- a/styles/core/_grid.scss +++ b/styles/core/_grid.scss @@ -42,6 +42,5 @@ &.col--grow { flex: 1; flex-grow: 1; - overflow: auto; } } diff --git a/templates/components/sticky_cta.html b/templates/components/sticky_cta.html new file mode 100644 index 00000000..b4c37d5a --- /dev/null +++ b/templates/components/sticky_cta.html @@ -0,0 +1,12 @@ +{% macro StickyCTA(text) -%} +