diff --git a/js/index.js b/js/index.js index 520dea03..0539e266 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 VueSticky from 'vue-sticky' import dodlogin from './components/dodlogin' import levelofwarrant from './components/levelofwarrant' @@ -113,4 +114,6 @@ const app = new Vue({ }) }, delimiters: ['!{', '}'], + + directives: {'sticky': VueSticky} }) diff --git a/package.json b/package.json index 9da64e8a..3d69dbed 100644 --- a/package.json +++ b/package.json @@ -24,6 +24,7 @@ "uswds": "^1.6.9", "v-tooltip": "^2.0.0-rc.33", "vue": "2.5.15", + "vue-sticky": "^3.3.4", "vue-text-mask": "^6.1.2" }, "devDependencies": { 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..773f2955 --- /dev/null +++ b/styles/components/_sticky_cta.scss @@ -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; + } +} 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..6d47a32a --- /dev/null +++ b/templates/components/sticky_cta.html @@ -0,0 +1,12 @@ +{% macro StickyCTA(text) -%} +