Merge pull request #136 from 18F/je-search_bar

Cloud.gov search bar styles

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": {

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';

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%;
   }
 }

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();
+    }
+
+  }
+}

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;
+    }
+
+  }
+}

src/js/main.js

@@ -1,2 +1,3 @@
 
 require('./analytics.js');
+require('uswds');