diff --git a/package.json b/package.json index 0a3b71f2..0d39c2e8 100644 --- a/package.json +++ b/package.json @@ -53,6 +53,8 @@ }, "homepage": "https://github.com/18F/cg-style#readme", "dependencies": { + "lodash.debounce": "^4.0.8", + "politespace": "^0.1.20", "uswds": "~0.12.1" }, "devDependencies": { diff --git a/src/css/components/all.scss b/src/css/components/all.scss index 261340bd..6c7ff6f7 100644 --- a/src/css/components/all.scss +++ b/src/css/components/all.scss @@ -17,6 +17,7 @@ @import 'nav_toggle.scss'; @import 'panel.scss'; @import 'sidenav.scss'; +@import 'search.scss'; @import 'section.scss'; @import 'title_bar.scss'; -@import 'three_up.scss'; +@import 'three_up.scss'; \ No newline at end of file diff --git a/src/css/components/header.scss b/src/css/components/header.scss index 83a49aea..80d18550 100644 --- a/src/css/components/header.scss +++ b/src/css/components/header.scss @@ -10,7 +10,6 @@ @include clearfix; margin: 0 auto; max-width: $site-max-width; - padding-bottom: 1rem; padding-left: 1rem; padding-right: 1rem; padding-top: 1.875rem; @@ -22,10 +21,14 @@ } .header-side { + float: left; - width: 60%; + width: 100%; + position: relative; @include media($medium-screen) { + float: right; + width: 60%; } } diff --git a/src/css/components/search.scss b/src/css/components/search.scss new file mode 100644 index 00000000..5dc04b9a --- /dev/null +++ b/src/css/components/search.scss @@ -0,0 +1,44 @@ +@import '../core.scss'; + +.js-search-button { + display: none; + + @include media(950px) { + + background-image: url('#{$static-img-path}/i-search.png'); + background-image: url('#{$static-img-path}/i-search.svg'); + background-position: center center; + background-repeat: no-repeat; + background-size: auto $hit-area / 2; + display: inline-block; + height: 3rem; + left: -1rem; + position: relative; + text-align: center; + top: -11px; + width: $hit-area; + + &:hover { + + background-image: url('#{$static-img-path}/i-search-hover.svg'); + background-image: url('#{$static-img-path}/i-search-hover.png'); + cursor: pointer; + } + + &.is-hidden { + background-image: none; + + &:after { + content: 'X'; + clear: both; + font-size: 30px; + font-weight: 300; + } + } + + span { + @include sr-only(); + } + + } +} diff --git a/src/css/override_components.scss b/src/css/override_components.scss index 9fc459dd..e8a1d41b 100644 --- a/src/css/override_components.scss +++ b/src/css/override_components.scss @@ -1,3 +1,8 @@ +.usa-nav-secondary { + @include media($medium-screen) { + position: static; + } +} .usa-grid { padding-left: 2rem; @@ -110,3 +115,56 @@ input:focus { box-shadow: 0 0 0 4 rgba(255, 221, 0, 0.55); outline: none; } + +.usa-search { + + background-color: #ffffff; + width: 90%; + z-index: 1; + position: static; + + @include media($large-screen) { + position: absolute; + top: -5px; + } + + @include media($medium-screen) { + position: absolute; + top: 5px; + } + + [type='search'] { + + border-top: none; + border-left: none; + border-radius: 0; + border-color: $color-primary; + color: $color-gray; + font-weight: 300; + font-size: 1rem; + width: 100%; + + &:focus { + box-shadow: none; + color: $color-primary; + outline: unset; + } + } + + [type='submit'] { + + background-color: #ffffff; + background-image: url('#{$static-img-path}/search.png'); + background-image: url('#{$static-img-path}/search.svg'); + height: 2.2rem; + position: absolute; + right: 15px; + top: 55px; + width: 3rem; + + @include media($medium-screen) { + top: 10px; + } + + } +} diff --git a/src/img/i-search-hover.png b/src/img/i-search-hover.png new file mode 100644 index 00000000..affe44b6 Binary files /dev/null and b/src/img/i-search-hover.png differ diff --git a/src/img/i-search-hover.svg b/src/img/i-search-hover.svg new file mode 100644 index 00000000..d1980b2d --- /dev/null +++ b/src/img/i-search-hover.svg @@ -0,0 +1,10 @@ + + + + i-search-hover + Created with Sketch. + + + + + \ No newline at end of file diff --git a/src/img/i-search.png b/src/img/i-search.png new file mode 100644 index 00000000..a373452c Binary files /dev/null and b/src/img/i-search.png differ diff --git a/src/img/i-search.svg b/src/img/i-search.svg new file mode 100644 index 00000000..fb557066 --- /dev/null +++ b/src/img/i-search.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/img/search.png b/src/img/search.png new file mode 100644 index 00000000..f0b01195 Binary files /dev/null and b/src/img/search.png differ diff --git a/src/img/search.svg b/src/img/search.svg new file mode 100644 index 00000000..f8422638 --- /dev/null +++ b/src/img/search.svg @@ -0,0 +1,18 @@ + + + + + Created with Sketch. + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/js/main.js b/src/js/main.js index f54d071e..3992b75f 100644 --- a/src/js/main.js +++ b/src/js/main.js @@ -1,2 +1,3 @@ require('./analytics.js'); +require('uswds'); \ No newline at end of file