Merge branch 'monika-search' of github-tsch-brown:browngraphicslab/Dash-Web into new_search

1 files changed, 99 insertions, 0 deletions

diff --git a/src/client/views/SearchBox.scss b/src/client/views/SearchBox.scss
new file mode 100644
index 000000000..f4fc0029e
--- /dev/null
+++ b/src/client/views/SearchBox.scss
@@ -0,0 +1,99 @@
+@import "globalCssVariables";
+
+.searchBox {
+    height: 32px;
+    //display: flex;
+    //padding: 4px;
+    -webkit-transition: width 0.4s ease-in-out;
+    transition: width 0.4s ease-in-out;
+    align-items: center;
+
+
+
+    input[type=text] {
+        width: 130px;
+        -webkit-transition: width 0.4s;
+        transition: width 0.4s;
+        position: absolute;
+        right: 100px;
+    }
+
+    input[type=text]:focus {
+        width: 500px;
+        outline: 3px solid lightblue;
+    }
+
+    .filter-button {
+        position: absolute;
+        right: 30px;
+    }
+
+    .submit-search {
+        text-align: right;
+        color: $dark-color;
+        -webkit-transition: right 0.4s;
+        transition: right 0.4s;
+    }
+
+    .submit-search:hover {
+        color: $main-accent;
+        transform: scale(1.05);
+        cursor: pointer;
+    }
+}
+
+.filter-form {
+    background: $dark-color;
+    height: 400px;
+    width: 400px;
+    position: relative;
+    right: 1px;
+    color: $light-color;
+    padding: 10px;
+    flex-direction: column;
+}
+
+#header {
+    text-transform: uppercase;
+    letter-spacing: 2px;
+    font-size: 100%;
+    height: 40px;
+}
+
+#option {
+    height: 20px;
+}
+
+.results {
+    top: 300px;
+    display: flex;
+    flex-direction: column;
+}
+
+.search-item {
+    width: 500px;
+    height: 50px;
+    background: $light-color-secondary;
+    display: flex;
+    justify-content: left;
+    align-items: center;
+    transition: all 0.1s;
+    border-width: 0.11px;
+    border-style: none;
+    border-color: $intermediate-color;
+    border-bottom-style: solid;
+    padding: 10px;
+    white-space: nowrap;
+    font-size: 13px;
+}
+
+.search-item:hover {
+    transition: all 0.1s;
+    background: $lighter-alt-accent;
+}
+
+.search-title {
+    text-transform: uppercase;
+    text-align: left;
+    width: 8vw;
+}
\ No newline at end of file