end of day 6/10 eek

1 files changed, 135 insertions, 0 deletions

diff --git a/src/client/views/search/SearchBox.scss b/src/client/views/search/SearchBox.scss
new file mode 100644
index 000000000..91d17d001
--- /dev/null
+++ b/src/client/views/search/SearchBox.scss
@@ -0,0 +1,135 @@
+@import "globalCssVariables";
+
+.searchBox-bar {
+    height: 32px;
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    padding-left: 2px;
+    padding-right: 2px;
+
+    .searchBox-input {
+        width: 130px;
+        -webkit-transition: width 0.4s;
+        transition: width 0.4s;
+        align-self: stretch;
+    }
+
+    .searchBox-input:focus {
+        width: 500px;
+        outline: 3px solid lightblue;
+    }
+
+    .searchBox-barChild {
+        flex: 0 1 auto;
+        margin-left: 2px;
+        margin-right: 2px;
+    }
+
+    .searchBox-filter {
+        align-self: stretch;
+    }
+
+}
+
+.searchBox-results {
+    margin-left: 27px; //Is there a better way to do this?
+}
+
+.filter-form {
+    background: $dark-color;
+    height: 400px;
+    position: relative;
+    right: 1px;
+    color: $light-color;
+    flex-direction: column;
+}
+
+#filter{
+    padding: 25px;
+    width: 600px;
+}
+
+#header {
+    text-transform: uppercase;
+    letter-spacing: 2px;
+    font-size: 25;
+    height: 40px;
+}
+
+#option {
+    height: 20px;
+}
+
+.searchBox-results {
+    top: 300px;
+    display: flex;
+    flex-direction: column;
+    margin-right: 72px;
+}
+
+.type-of-node{
+    height: 50px;
+
+    .icon-bar{
+        display: flex;
+        justify-content: space-evenly;
+        align-items: center;
+        height: 40px;
+        width: 100%;
+        flex-wrap: wrap;
+        font-size: 2em;
+    }
+
+    .type-icon{
+        height: 50px;
+        width: 50px;
+        color: $light-color;
+        border-radius: 50%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        background-color: "#121721";
+    }
+
+    .fontawesome-icon{
+        height: 28px;
+        width: 28px;
+    }
+
+    .type-icon:hover{
+        background-color: $alt-accent;
+    }
+    
+}
+
+.toggle-title{
+    display: flex;
+    align-items: center;
+    color: $light-color;
+    text-transform: uppercase;
+    flex-direction: row;
+    justify-content: space-around;
+    padding: 5px;
+
+    .toggle-option{
+        width: 100px;
+        text-align: center;
+    }
+}
+
+.toggle-bar{
+    height: 50px;
+    background-color: $alt-accent;
+    border-radius: 10px;
+    padding: 5px;
+    display: flex;
+    align-items: center;
+
+    .toggle-button{
+        width: 275px;
+        height: 100%;
+        border-radius: 10px;
+        background-color: $light-color;
+    }
+}
\ No newline at end of file