summaryrefslogtreecommitdiffstats
path: root/components/search-bar/_search-bar.scss
diff options
context:
space:
mode:
Diffstat (limited to 'components/search-bar/_search-bar.scss')
-rw-r--r--components/search-bar/_search-bar.scss61
1 files changed, 61 insertions, 0 deletions
diff --git a/components/search-bar/_search-bar.scss b/components/search-bar/_search-bar.scss
new file mode 100644
index 0000000..3e2dfad
--- /dev/null
+++ b/components/search-bar/_search-bar.scss
@@ -0,0 +1,61 @@
+$inputHeight: 38px;
+.sdc-search-bar{
+ .search-bar-container{
+ display: flex;
+ align-items: flex-end;
+ .sdc-input-wrapper{
+ flex-grow: 1;
+ .sdc-input{
+ margin: 0;
+ .sdc-input__input{
+ border-bottom-right-radius: 0;
+ border-top-right-radius: 0;
+ }
+ }
+ }
+ .search-button{
+ width: $inputHeight;
+ height: $inputHeight - 2;
+ border: solid 1px $light-gray;
+ border-left: none;
+ background-color: $light-silver;
+ cursor: auto;
+ border-top-right-radius: 2px;
+ border-bottom-right-radius: 2px;
+
+ svg{
+ height: 20px;
+ width: 20px;
+ position: relative;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%,-50% );
+ path{
+ fill: $gray;
+ }
+ }
+ }
+
+ &.not-empty{
+ .sdc-input__input {
+ border-color: $blue;
+ }
+ .search-button{
+ background-color: $lighter-blue;
+ border-color: $blue;
+ cursor: pointer;
+ svg path{
+ fill: $blue;
+ }
+ &:hover {
+ background-color: $light-blue;
+ svg{
+ path{
+ fill: $white;
+ }
+ }
+ }
+ }
+ }
+ }
+}