ui etc

1 files changed, 181 insertions, 5 deletions

diff --git a/src/client/views/search/SearchBox.scss b/src/client/views/search/SearchBox.scss
index 11714748a..70b9ef75e 100644
--- a/src/client/views/search/SearchBox.scss
+++ b/src/client/views/search/SearchBox.scss
@@ -4,13 +4,14 @@
 .searchBox-container {
     display: flex;
     flex-direction: column;
-    width:100%;
-    height:100%;
+    width: 100%;
+    height: 100%;
     position: absolute;
     font-size: 10px;
     line-height: 1;
     overflow: hidden;
 }
+
 .searchBox-bar {
     height: 32px;
     display: flex;
@@ -19,7 +20,7 @@
     padding-left: 2px;
     padding-right: 2px;
 
-.searchBox-barChild {
+    .searchBox-barChild {
 
         &.searchBox-collection {
             flex: 0 1 auto;
@@ -65,7 +66,7 @@
 }
 
 .searchBox-results {
-    display:flex;
+    display: flex;
     flex-direction: column;
     top: 300px;
     display: flex;
@@ -83,6 +84,181 @@
         text-transform: uppercase;
         text-align: left;
         font-weight: bold;
-        margin-left: 28px;
+    }
+}
+
+.filter-form {
+    padding: 25px;
+    width: 440px;
+    position: relative;
+    right: 1px;
+    color: grey;
+    flex-direction: column;
+    display: inline-block;
+    transform-origin: top;
+    overflow: auto;
+    border-bottom: solid black 3px;
+
+    .top-filter-header {
+
+        #header {
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            font-size: 13;
+            width: 80%;
+        }
+
+        .close-icon {
+            width: 20%;
+            opacity: .6;
+            position: relative;
+            display: block;
+
+            .line {
+                display: block;
+                background: $alt-accent;
+                width: 20;
+                height: 3;
+                position: absolute;
+                right: 0;
+                border-radius: ($height-line / 2);
+
+                &.line-1 {
+                    transform: rotate(45deg);
+                    top: 45%;
+                }
+
+                &.line-2 {
+                    transform: rotate(-45deg);
+                    top: 45%;
+                }
+            }
+        }
+
+        .close-icon:hover {
+            opacity: 1;
+        }
+
+    }
+
+    .filter-options {
+
+        .filter-div {
+            margin-top: 10px;
+            margin-bottom: 10px;
+            display: inline-block;
+            width: 100%;
+            border-color: rgba(178, 206, 248, .2); // $darker-alt-accent
+            border-top-style: solid;
+
+            .filter-header {
+                display: flex;
+                align-items: center;
+                margin-bottom: 10px;
+                letter-spacing: 2px;
+
+                .filter-title {
+                    font-size: 13;
+                    text-transform: uppercase;
+                    margin-top: 10px;
+                    margin-bottom: 10px;
+                    -webkit-transition: all 0.2s ease-in-out;
+                    -moz-transition: all 0.2s ease-in-out;
+                    -o-transition: all 0.2s ease-in-out;
+                    transition: all 0.2s ease-in-out;
+                }
+            }
+
+            .filter-header:hover .filter-title {
+                transform: scale(1.05);
+            }
+
+            .filter-panel {
+                max-height: 0px;
+                width: 100%;
+                overflow: hidden;
+                opacity: 0;
+                transform-origin: top;
+                -webkit-transition: all 0.2s ease-in-out;
+                -moz-transition: all 0.2s ease-in-out;
+                -o-transition: all 0.2s ease-in-out;
+                transition: all 0.2s ease-in-out;
+                text-align: center;
+            }
+        }
+    }
+
+    .filter-buttons {
+        border-color: rgba(178, 206, 248, .2); // $darker-alt-accent
+        border-top-style: solid;
+        padding-top: 10px;
+    }
+}
+
+.active-filters {
+    display: flex;
+    flex-direction: row-reverse;
+    justify-content: flex-end;
+    width: 100%;
+    margin-right: 30px;
+    position: relative;
+
+    .active-icon {
+        max-width: 40px;
+        flex: initial;
+
+        &.icon {
+            width: 40px;
+            text-align: center;
+            margin-bottom: 5px;
+            position: absolute;
+        }
+
+        &.container {
+            display: flex;
+            flex-direction: column;
+            width: 40px;
+        }
+
+        &.description {
+            text-align: center;
+            top: 40px;
+            position: absolute;
+            width: 40px;
+            font-size: 9px;
+            opacity: 0;
+            -webkit-transition: all 0.2s ease-in-out;
+            -moz-transition: all 0.2s ease-in-out;
+            -o-transition: all 0.2s ease-in-out;
+            transition: all 0.2s ease-in-out;
+        }
+
+        &.icon:hover+.description {
+            opacity: 1;
+        }
+    }
+
+    .col-icon {
+        height: 35px;
+        margin-left: 5px;
+        width: 35px;
+        background-color: black;
+        color: white;
+        border-radius: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        .save-filter,
+        .reset-filter,
+        .all-filter {
+            background-color: gray;
+        }
+
+        .save-filter:hover,
+        .reset-filter:hover,
+        .all-filter:hover {
+            background-color: $darker-alt-accent;
+        }
     }
 }
\ No newline at end of file