From b9dd6c9c47d1c58314986e313f5f040fa14225a9 Mon Sep 17 00:00:00 2001 From: "James C. Scott" Date: Mon, 9 May 2016 17:48:43 -0400 Subject: [PATCH 1/9] First commit of adding search component --- src/css/components/all.scss | 1 + src/css/components/header.scss | 1 + src/css/components/search.scss | 52 ++++++++++++++++++++++++++++++++++ src/img/i-search.svg | 1 + 4 files changed, 55 insertions(+) create mode 100644 src/css/components/search.scss create mode 100644 src/img/i-search.svg diff --git a/src/css/components/all.scss b/src/css/components/all.scss index c6747dea..a4e7c2cc 100644 --- a/src/css/components/all.scss +++ b/src/css/components/all.scss @@ -12,6 +12,7 @@ @import "nav.scss"; @import "nav_toggle.scss"; @import "sidenav.scss"; +@import "search.scss"; @import "section.scss"; @import "title_bar.scss"; @import "three_up.scss"; diff --git a/src/css/components/header.scss b/src/css/components/header.scss index d5e07b6e..98e39da7 100644 --- a/src/css/components/header.scss +++ b/src/css/components/header.scss @@ -24,6 +24,7 @@ .header-side { float: left; width: 60%; + position: relative; @include media($medium-screen) { float: right; diff --git a/src/css/components/search.scss b/src/css/components/search.scss new file mode 100644 index 00000000..415932f2 --- /dev/null +++ b/src/css/components/search.scss @@ -0,0 +1,52 @@ +@import "../core.scss"; + +$search-btn-width: 4.5rem; +$search-btn-height: 2.0rem; + +@mixin search-icon { + background-image: url('../img/i-search.svg'); + background-position: 50%; + background-repeat: no-repeat; +} + +.search-bar { + @include clearfix; + max-width: none; + position: relative; + $width: $search-btn-width; + + [type="search"], + .search-field { + -webkit-appearance: none; + border-bottom-right-radius: 0; + border-right: none; + border-top-right-radius: 0; + float: left; + height: $search-btn-height; + margin: 0; + padding-bottom: 0; + padding-top: 0; + width: calc(100% - #{$width}); + + @include media($small-screen) { + width: calc(100% - #{width}); + } + } + + [type="submit"], + .search-submit { + @include search-icon; + border-bottom-left-radius: 0; + border-top-left-radius: 0; + height: $search-btn-height; + margin: 0; + padding: 0; + width: $width; + background-color: $color-primary-darkest; + + @include media($small-screen) { + @include search-icon; + width: $width; + } + } +} diff --git a/src/img/i-search.svg b/src/img/i-search.svg new file mode 100644 index 00000000..a50fa62f --- /dev/null +++ b/src/img/i-search.svg @@ -0,0 +1 @@ + \ No newline at end of file From b8715b1bd22cf48a35a18faa8e85e07d26796daa Mon Sep 17 00:00:00 2001 From: "James C. Scott" Date: Mon, 9 May 2016 17:56:14 -0400 Subject: [PATCH 2/9] Add spacing on top. This will allow for room between the search bar and the nav words --- src/css/components/search.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/css/components/search.scss b/src/css/components/search.scss index 415932f2..8fcc759c 100644 --- a/src/css/components/search.scss +++ b/src/css/components/search.scss @@ -14,6 +14,10 @@ $search-btn-height: 2.0rem; max-width: none; position: relative; $width: $search-btn-width; + margin-left: 0; + margin-top: 0.5rem; + margin-right: 0; + margin-bottom: 0; [type="search"], .search-field { From 631550bd722ac4d6b73de919d6209629e9da5f7c Mon Sep 17 00:00:00 2001 From: Julia Elman Date: Fri, 2 Sep 2016 11:09:38 -0400 Subject: [PATCH 3/9] Fix linting errors in/around search.scss --- src/css/components/all.scss | 2 +- src/css/components/search.scss | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/css/components/all.scss b/src/css/components/all.scss index fd5e2245..d35f4f50 100644 --- a/src/css/components/all.scss +++ b/src/css/components/all.scss @@ -15,7 +15,7 @@ @import 'nav.scss'; @import 'nav_toggle.scss'; @import 'sidenav.scss'; -@import "search.scss"; +@import 'search.scss'; @import 'section.scss'; @import 'title_bar.scss'; @import 'three_up.scss'; \ No newline at end of file diff --git a/src/css/components/search.scss b/src/css/components/search.scss index 8fcc759c..840eed41 100644 --- a/src/css/components/search.scss +++ b/src/css/components/search.scss @@ -1,7 +1,7 @@ -@import "../core.scss"; +@import '../core.scss'; $search-btn-width: 4.5rem; -$search-btn-height: 2.0rem; +$search-btn-height: 2rem; @mixin search-icon { background-image: url('../img/i-search.svg'); @@ -19,7 +19,7 @@ $search-btn-height: 2.0rem; margin-right: 0; margin-bottom: 0; - [type="search"], + [type='search'], .search-field { -webkit-appearance: none; border-bottom-right-radius: 0; @@ -37,7 +37,7 @@ $search-btn-height: 2.0rem; } } - [type="submit"], + [type='submit'], .search-submit { @include search-icon; border-bottom-left-radius: 0; From 0734aa8aad96b3ae0d2cca8b9032b5fbcc3564be Mon Sep 17 00:00:00 2001 From: Julia Elman Date: Mon, 26 Sep 2016 10:15:05 -0400 Subject: [PATCH 4/9] Require uswds js for browserify compilation. --- src/js/main.js | 1 + 1 file changed, 1 insertion(+) 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 From 196f71c6fa2b1aacbffe642d2801d5d653dbb4c2 Mon Sep 17 00:00:00 2001 From: Julia Elman Date: Tue, 27 Sep 2016 15:58:08 -0400 Subject: [PATCH 5/9] Adding politespace dependency to package.json. --- package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/package.json b/package.json index 0a3b71f2..242b3782 100644 --- a/package.json +++ b/package.json @@ -68,6 +68,7 @@ "gulp-sass": "^2.3.1", "gulp-svg-sprite": "^1.2.19", "node-sass": "^3.4.2", + "politespace": "^0.1.19", "postcss": "^5.0.14", "postcss-cli": "^2.3.3", "postcss-copy-assets": "^0.3.0", From 7dc2b5d63fc555c8d3660f1c96db9716ed6b0d43 Mon Sep 17 00:00:00 2001 From: Julia Elman Date: Tue, 27 Sep 2016 15:58:53 -0400 Subject: [PATCH 6/9] Adding updated images for search. --- src/css/components/header.scss | 6 +- src/css/components/search.scss | 133 ++++++++++++++++++++----------- src/css/override_components.scss | 7 ++ src/img/i-search-hover.png | Bin 0 -> 844 bytes src/img/i-search-hover.svg | 10 +++ src/img/i-search.png | Bin 0 -> 801 bytes src/img/i-search.svg | 23 +++++- src/img/search.png | Bin 0 -> 634 bytes src/img/search.svg | 18 +++++ 9 files changed, 149 insertions(+), 48 deletions(-) create mode 100644 src/img/i-search-hover.png create mode 100644 src/img/i-search-hover.svg create mode 100644 src/img/i-search.png create mode 100644 src/img/search.png create mode 100644 src/img/search.svg diff --git a/src/css/components/header.scss b/src/css/components/header.scss index dd844708..f87fb316 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,11 +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 index 840eed41..326c9ebd 100644 --- a/src/css/components/search.scss +++ b/src/css/components/search.scss @@ -1,56 +1,99 @@ @import '../core.scss'; -$search-btn-width: 4.5rem; -$search-btn-height: 2rem; +.js-search-button { -@mixin search-icon { - background-image: url('../img/i-search.svg'); - background-position: 50%; - background-repeat: no-repeat; + 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; + + span { + @include sr-only(); + } + + &: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; + } + } + + } } -.search-bar { - @include clearfix; - max-width: none; - position: relative; - $width: $search-btn-width; - margin-left: 0; - margin-top: 0.5rem; - margin-right: 0; - margin-bottom: 0; - - [type='search'], - .search-field { - -webkit-appearance: none; - border-bottom-right-radius: 0; - border-right: none; - border-top-right-radius: 0; - float: left; - height: $search-btn-height; - margin: 0; - padding-bottom: 0; - padding-top: 0; - width: calc(100% - #{$width}); - - @include media($small-screen) { - width: calc(100% - #{width}); +.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; + } + + input[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'], - .search-submit { - @include search-icon; - border-bottom-left-radius: 0; - border-top-left-radius: 0; - height: $search-btn-height; - margin: 0; - padding: 0; - width: $width; - background-color: $color-primary-darkest; - - @include media($small-screen) { - @include search-icon; - width: $width; + [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/css/override_components.scss b/src/css/override_components.scss index 78e635f8..b4b753b8 100644 --- a/src/css/override_components.scss +++ b/src/css/override_components.scss @@ -1,4 +1,11 @@ +.usa-nav-secondary { + + @include media($medium-screen) { + position: static; + } +} + .usa-grid { padding-left: 2rem; padding-right: 2rem; diff --git a/src/img/i-search-hover.png b/src/img/i-search-hover.png new file mode 100644 index 0000000000000000000000000000000000000000..affe44b64ef71eee60253b117ab8bb73050d4578 GIT binary patch literal 844 zcmV-S1GD^zP)rfAP6$7 zB&3J%t-y$$Dt$;Oh?2NQHP45I|;Mp3#+WLOrV=At{h?(D2P+c`7NhPuO)-A+_*v4i9ERrY9#fNLO# z>gI{4wau#pl#olXaCrAa#?wI=!RZJtb$V5uGh6LZUDgegfM+U#3$2r?9fys_^#e;$ zQItB%Ztswc(}dtpZx~mfh}gTp9gE zS4f_i6(#{1TPk^(DLA$v&Co6-v2(Scu6KV9nywBef#C`5^u@VWLvVeeI9DS;6Z4l} zs}g<9Xk-%LXEbDzWGs=xe{|BV=1PG{AU~75Ef9J0J;ZeDt8cQZyWDAk!rw{|NzVxFFlYj6c;&cnGM`cw~{l!h3*zrFOV|@q{fQx-NoAvAKo*JpT<~ Wg?EI~@@9qr0000 + + + 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 0000000000000000000000000000000000000000..a373452c24a6b393bae52925176fdfd6570f5220 GIT binary patch literal 801 zcmV++1K#|JP)Px%+et)0R9Fe^SItW*Q4~Lu52ZN)aqY_ffxZ^K z7JWf~KnRKjnjjJ=YFOJKrB$dPf(SbAo&#g=Y2zL7y&~wqI5YSB&c{9H-k*1brKKes z0Q?d~QP1ulCW0W8S+JkL5-8>Kc^3a;C6~*I7<-I`)h{e8eAvvTKxVTUF!q=<@LBio z1io$sYPA}?zP>`I(-~>`{20a>10Eb4!0qiV)a!LJ9UmWum6a9n`Ft=tJ3EX!!YXb- zBoYCq(+S~lxEmZjG@DI`$K&93yW!&E0=L#sNhqp7B9VY#FxYjByfHsN4{Eg<9v&Xx z?(Pm+trqO=?h?l1@pQ4=hsDLkffQJ+Rz<7TDk5%mbyd8+zV5?kvsuw*vk`{1LwtIA z>chM@fIhh`I6ps!N~J;*2?PSLv9ZxNDT~DdJ3BkT_?;?oczD={ksIJ9kV>V9peA!A;=h<%OKi&CSUMmlOtrfgW*TN>!6|a(8Y5DwT?Cagp)l zPt3%`1P@MnZUR$NQv@s)i`=r_-`^8fr_+H(qxm-ptgo+=BP5}-vol$zH#av>C=^J) zwzejV>s4?ofCMu=Jxz8;M@MjSa?)3ctE(#rg+heEmU+G2-Z--F0`A33CL;?#1(tSe zYYW=#HsP?uMx&94=<)Fp%4IxVy@}uNht18+w*i?ab|M091<)2*@A&w*TM29jvSTb3 z>juX~H#s>;q4xIn0Qp0SD57F?gh^apUebl!Un-S|cxGm1X#cxhE_i-^hVAWbXfzst zNuY2m!K32$D0I*mYnR9tA<;7Wjz*)ha79#1(-`8%WHQ12{yu26TC!rN-+|VOTQJZ| zj}ntOJw1hFG6{COy+`}^>wifAL*U^AFP \ No newline at end of file + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/img/search.png b/src/img/search.png new file mode 100644 index 0000000000000000000000000000000000000000..f0b011953a37b83118692f669eb77b81489875dd GIT binary patch literal 634 zcmV-=0)_pFP)yRUPg4lNL$lE}Bv!fXhTuumx zjK>%A1WFb*{Wl)*Sric=D!D#g%N8+M;4uv_^S8FGKgcGtwh}SPtJT<%({tjbc>`mo zI;ikL^}j^e#2B1@vLx}v;@Bp{Me`VHb>rN^PrMVxu@Q~q1a^%+;^|J)pG{*ii8=|9dkAw( z{k$-77q<^S*{C`AL!u#xCITyE7qu=$LZ`4jkVypa7cBjC(Uk8D=+|y^`~vY!S)vgV zP5e))jrIXy5Q%J7tYLFTk8NGjY1ZDdn4{=4{$gP{xb9BUih*6;GjRRm;(3pL13%*4 Un4eZ`g8%>k07*qoM6N<$f)ZO8`v3p{ literal 0 HcmV?d00001 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 From 5138698adbca2e597a9415c79da74158b29b8426 Mon Sep 17 00:00:00 2001 From: Julia Elman Date: Tue, 27 Sep 2016 16:00:48 -0400 Subject: [PATCH 7/9] Adding more search specific styles and component overrides. --- src/css/components/search.scss | 55 -------------------------------- src/css/override_components.scss | 55 ++++++++++++++++++++++++++++++++ 2 files changed, 55 insertions(+), 55 deletions(-) diff --git a/src/css/components/search.scss b/src/css/components/search.scss index 326c9ebd..afff9152 100644 --- a/src/css/components/search.scss +++ b/src/css/components/search.scss @@ -42,58 +42,3 @@ } } - -.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; - } - - input[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/css/override_components.scss b/src/css/override_components.scss index b4b753b8..07b52f76 100644 --- a/src/css/override_components.scss +++ b/src/css/override_components.scss @@ -120,3 +120,58 @@ 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; + } + + input[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; + } + } +} From e478192510f771ce393d7433516a668257e1ecf3 Mon Sep 17 00:00:00 2001 From: Julia Elman Date: Tue, 27 Sep 2016 16:27:26 -0400 Subject: [PATCH 8/9] Fix linting errors - boo. --- src/css/components/header.scss | 4 ++-- src/css/components/search.scss | 14 +++++++------- src/css/override_components.scss | 30 +++++++++++++----------------- 3 files changed, 22 insertions(+), 26 deletions(-) diff --git a/src/css/components/header.scss b/src/css/components/header.scss index f87fb316..80d18550 100644 --- a/src/css/components/header.scss +++ b/src/css/components/header.scss @@ -21,13 +21,13 @@ } .header-side { - + float: left; 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 index afff9152..5dc04b9a 100644 --- a/src/css/components/search.scss +++ b/src/css/components/search.scss @@ -1,10 +1,9 @@ @import '../core.scss'; .js-search-button { - display: none; - @include media(950px) { + @include media(950px) { background-image: url('#{$static-img-path}/i-search.png'); background-image: url('#{$static-img-path}/i-search.svg'); @@ -19,11 +18,8 @@ top: -11px; width: $hit-area; - span { - @include sr-only(); - } - &:hover { + background-image: url('#{$static-img-path}/i-search-hover.svg'); background-image: url('#{$static-img-path}/i-search-hover.png'); cursor: pointer; @@ -33,12 +29,16 @@ background-image: none; &:after { - content: "X"; + 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 07b52f76..e50765e5 100644 --- a/src/css/override_components.scss +++ b/src/css/override_components.scss @@ -1,6 +1,4 @@ - .usa-nav-secondary { - @include media($medium-screen) { position: static; } @@ -123,25 +121,23 @@ input:focus { .usa-search { - background-color: #FFFFFF; + background-color: #ffffff; width: 90%; z-index: 1; position: static; - @include media($large-screen) { - + @include media($large-screen) { position: absolute; top: -5px; } - @include media($medium-screen) { - + @include media($medium-screen) { position: absolute; top: 5px; } - input[type="search"] { - + [type='search'] { + border-top: none; border-left: none; border-radius: 0; @@ -152,16 +148,15 @@ input:focus { width: 100%; &:focus { - - box-shadow: none; - color: $color-primary; - outline: unset; + box-shadow: none; + color: $color-primary; + outline: unset; } } - [type="submit"] { + [type='submit'] { - background-color: #FFFFFF; + background-color: #ffffff; background-image: url('#{$static-img-path}/search.png'); background-image: url('#{$static-img-path}/search.svg'); height: 2.2rem; @@ -170,8 +165,9 @@ input:focus { top: 55px; width: 3rem; - @include media($medium-screen) { - top: 10px; + @include media($medium-screen) { + top: 10px; } + } } From b8f614c9f8aea6aae145b266fdc630fc4b703b69 Mon Sep 17 00:00:00 2001 From: Julia Elman Date: Tue, 27 Sep 2016 16:45:33 -0400 Subject: [PATCH 9/9] Adding politespace and lodash.debounce to dependency list. --- package.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index 242b3782..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": { @@ -68,7 +70,6 @@ "gulp-sass": "^2.3.1", "gulp-svg-sprite": "^1.2.19", "node-sass": "^3.4.2", - "politespace": "^0.1.19", "postcss": "^5.0.14", "postcss-cli": "^2.3.3", "postcss-copy-assets": "^0.3.0",