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