From 895c1bdce8d7c788fd759d9ba5eac312aef6b3d6 Mon Sep 17 00:00:00 2001 From: adjeiessel <essel.adjei-mensah@zeppelin.com> Date: Tue, 31 Mar 2020 16:28:54 +0200 Subject: [PATCH 1/5] style(component): 1 . added a new class modifier searchfield #146 --- src/elements/search/SearchPage.jsx | 2 +- src/elements/search/_search.scss | 36 ++++++++++++++++++++---------- 2 files changed, 25 insertions(+), 13 deletions(-) diff --git a/src/elements/search/SearchPage.jsx b/src/elements/search/SearchPage.jsx index d4a3743..d9dc322 100644 --- a/src/elements/search/SearchPage.jsx +++ b/src/elements/search/SearchPage.jsx @@ -13,7 +13,7 @@ function SearchPage() { > <input type="text" - className="zep-search__input" + className="zep-search__input zep-search__input--searchfield zep-search__input--rounded-left" placeholder="Search" id={`search-${elem}`} /> diff --git a/src/elements/search/_search.scss b/src/elements/search/_search.scss index ecb0ddd..5b86a73 100644 --- a/src/elements/search/_search.scss +++ b/src/elements/search/_search.scss @@ -10,20 +10,32 @@ color: map-deep-get($guidelines, 'color', 'font'); width: 100%; height: 3rem; - border: none; background-color: white; - padding-left: 1.25rem; + padding-left: 3.25rem; padding-top: 0.25rem; - border-bottom: 3px solid; - border-bottom-color: map-deep-get( - $guidelines, - 'color', - 'global', - lightGray - ); + border: 1px solid map-deep-get($guidelines, 'color', 'global', lightGray); + &--rounded-left { + background: rgb(255, 255, 255); + border-radius: 30px 0px 0px 30px; + } + &--searchfield { + border: none; + padding-left: 1.25rem; + border-bottom: 1px solid + map-deep-get($guidelines, 'color', 'global', lightGray); + @include themify($color_themes) { + &:focus { + border-bottom-color: themed('primary'); + } + } + + .#{$prefix}search__icon { + right: 0; + left: unset; + } + } @include themify($color_themes) { &:focus { - border-bottom-color: themed('primary'); + border-color: themed('primary'); @extend %typo-bold-body1; outline: none; } @@ -35,8 +47,8 @@ .#{$prefix}search__icon { position: absolute; - top: 11px; - right: 0; + top: 15px; + left: 20px; width: 24px; height: 24px; color: black; From d3b4a9ed7064cd6d061e1513eb2dd8bcf3b74e27 Mon Sep 17 00:00:00 2001 From: Alyssa <ca.butler10@gmail.com> Date: Wed, 1 Apr 2020 08:43:10 +0200 Subject: [PATCH 2/5] fix(searchbar): added different views --- src/elements/search/SearchPage.jsx | 25 ++++++++++++++++++++++++- 1 file changed, 24 insertions(+), 1 deletion(-) diff --git a/src/elements/search/SearchPage.jsx b/src/elements/search/SearchPage.jsx index d9dc322..2b7fdf8 100644 --- a/src/elements/search/SearchPage.jsx +++ b/src/elements/search/SearchPage.jsx @@ -5,6 +5,29 @@ function SearchPage() { const themes = ['indigo', 'yellow', 'red']; return ( <> + <div style={{ padding: 30, background: '#000', marginBottom: 15 }}> + <p style={{ color: '#FFF' }}>Search Default</p> + {themes.map(elem => ( + <div + className={`theme-${elem} zep-search`} + style={{ marginBottom: 15 }} + key={elem} + > + <input + type="text" + className="zep-search__input zep-search__input--rounded-left" + placeholder="Search" + id={`search-${elem}`} + /> + <Icon icon="zepicons-search" className="zep-search__icon" /> + <label className="zep-visually-hidden" htmlFor={`search-${elem}`}> + Search {elem} + </label> + </div> + ))} + </div> + + <p>Header Default</p> {themes.map(elem => ( <div className={`theme-${elem} zep-search`} @@ -13,7 +36,7 @@ function SearchPage() { > <input type="text" - className="zep-search__input zep-search__input--searchfield zep-search__input--rounded-left" + className="zep-search__input zep-search__input--searchfield" placeholder="Search" id={`search-${elem}`} /> From 4eddc3b3cadc61b5da838165c497370f2b4e5d84 Mon Sep 17 00:00:00 2001 From: adjeiessel <essel.adjei-mensah@zeppelin.com> Date: Wed, 1 Apr 2020 08:45:31 +0200 Subject: [PATCH 3/5] fix: liniting --- src/elements/search/SearchPage.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/elements/search/SearchPage.jsx b/src/elements/search/SearchPage.jsx index d9dc322..3c3cfc7 100644 --- a/src/elements/search/SearchPage.jsx +++ b/src/elements/search/SearchPage.jsx @@ -13,7 +13,7 @@ function SearchPage() { > <input type="text" - className="zep-search__input zep-search__input--searchfield zep-search__input--rounded-left" + className="zep-search__input zep-search__input--rounded-left" placeholder="Search" id={`search-${elem}`} /> From 80abdae34e1b62f78e2203515c6beb5ee24b56e5 Mon Sep 17 00:00:00 2001 From: adjeiessel <essel.adjei-mensah@zeppelin.com> Date: Thu, 2 Apr 2020 09:15:22 +0200 Subject: [PATCH 4/5] style: border size change #146 --- src/elements/search/_search.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/elements/search/_search.scss b/src/elements/search/_search.scss index 35fdb87..9dbf46f 100644 --- a/src/elements/search/_search.scss +++ b/src/elements/search/_search.scss @@ -21,7 +21,7 @@ &--searchfield { border: none; padding-left: 1.25rem; - border-bottom: 1px solid + border-bottom: 2px solid map-deep-get($guidelines, 'color', 'global', lightGray); @include themify($color_themes) { &:focus { @@ -50,7 +50,7 @@ left: 20px; width: 24px; height: 24px; - color: rgba($color: #000000, $alpha: 0.5); + color: rgba($color: #000000, $alpha: 0.8); } } From e300cf3f1ac9cec3e4edddfa56f3f8c865132022 Mon Sep 17 00:00:00 2001 From: adjeiessel <essel.adjei-mensah@zeppelin.com> Date: Thu, 2 Apr 2020 13:25:17 +0200 Subject: [PATCH 5/5] style: update search UI and remove theming style #146 --- src/elements/search/SearchPage.jsx | 2 +- src/elements/search/_search.scss | 34 ++++++++++++++---------------- 2 files changed, 17 insertions(+), 19 deletions(-) diff --git a/src/elements/search/SearchPage.jsx b/src/elements/search/SearchPage.jsx index 2b7fdf8..eb337ad 100644 --- a/src/elements/search/SearchPage.jsx +++ b/src/elements/search/SearchPage.jsx @@ -5,7 +5,7 @@ function SearchPage() { const themes = ['indigo', 'yellow', 'red']; return ( <> - <div style={{ padding: 30, background: '#000', marginBottom: 15 }}> + <div style={{ padding: 30, background: '#fff', marginBottom: 15 }}> <p style={{ color: '#FFF' }}>Search Default</p> {themes.map(elem => ( <div diff --git a/src/elements/search/_search.scss b/src/elements/search/_search.scss index 9dbf46f..001efb8 100644 --- a/src/elements/search/_search.scss +++ b/src/elements/search/_search.scss @@ -7,25 +7,33 @@ .#{$prefix}search__input { @extend %typo-normal-body1; - color: map-deep-get($guidelines, 'color', 'font'); + color: rgba($color: #000000, $alpha: 0.6); width: 100%; height: 3rem; background-color: white; padding-left: 3.25rem; padding-top: 0.25rem; - border: 1px solid map-deep-get($guidelines, 'color', 'global', lightGray); + border: 1px solid rgba($color: #000000, $alpha: 0.6); &--rounded-left { background: rgb(255, 255, 255); border-radius: 30px 0px 0px 30px; + &:focus { + border: 2px solid rgba($color: #000000, $alpha: 0.8); + outline: none; + + .#{$prefix}search__icon { + color: rgba($color: #000000, $alpha: 0.8); + } + } } &--searchfield { border: none; padding-left: 1.25rem; - border-bottom: 2px solid - map-deep-get($guidelines, 'color', 'global', lightGray); - @include themify($color_themes) { - &:focus { - border-bottom-color: themed('primary'); + border-bottom: 1px solid rgba($color: #000000, $alpha: 0.6); + &:focus { + border-bottom: 2px solid rgba($color: #000000, $alpha: 0.8); + outline: none; + + .#{$prefix}search__icon { + color: rgba($color: #000000, $alpha: 0.8); } } + .#{$prefix}search__icon { @@ -33,24 +41,14 @@ left: unset; } } - @include themify($color_themes) { - &:focus { - border-color: themed('primary'); - outline: none; - } - &:focus + .#{$prefix}search__icon { - color: themed('primary'); - } - } } - .#{$prefix}search__icon { position: absolute; top: 15px; left: 20px; width: 24px; height: 24px; - color: rgba($color: #000000, $alpha: 0.8); + color: rgba($color: #000000, $alpha: 0.6); } }