Merge branch 'master' into script_documents

1 files changed, 255 insertions, 8 deletions

diff --git a/src/client/views/search/SearchBox.scss b/src/client/views/search/SearchBox.scss
index f492ea773..f0223ca76 100644
--- a/src/client/views/search/SearchBox.scss
+++ b/src/client/views/search/SearchBox.scss
@@ -4,20 +4,21 @@
 .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;
+    overflow: auto;
+    background: lightgrey,
 }
+
 .searchBox-bar {
     height: 32px;
     display: flex;
     justify-content: flex-end;
     align-items: center;
     padding-left: 2px;
-    padding-right: 2px;
 
     .searchBox-barChild {
 
@@ -33,8 +34,7 @@
             -webkit-transition: width 0.4s;
             transition: width 0.4s;
             align-self: stretch;
-            margin-left: 2px;
-            margin-right: 2px
+
         }
 
         .searchBox-input:focus {
@@ -44,6 +44,10 @@
 
         &.searchBox-filter {
             align-self: stretch;
+            button:hover{
+                transform:scale(1.0);
+                background:"#121721";
+            }
         }
 
         &.searchBox-submit {
@@ -65,7 +69,7 @@
 }
 
 .searchBox-results {
-    display:flex;
+    display: flex;
     flex-direction: column;
     top: 300px;
     display: flex;
@@ -83,6 +87,249 @@
         text-transform: uppercase;
         text-align: left;
         font-weight: bold;
-        margin-left: 28px;
+    }
+}
+
+.filter-form {
+    position: relative;
+    background: #121721;
+    flex-direction: column;
+    transform-origin: top;
+    transition: height 0.3s ease, display 0.6s ease;
+    height:0px;
+    overflow:hidden;
+
+
+    .filter-header {
+        display: flex;
+        position: relative;
+        flex-wrap:wrap;
+        right: 1px;
+        color: grey;
+        flex-direction: row-reverse;
+        transform-origin: top;
+        justify-content: space-evenly;
+        margin-bottom: 5px;
+        overflow:hidden;
+        transition:height 0.3s ease-out;
+
+
+
+        .filter-item {
+            position: relative;
+            border:1px solid grey;
+            border-radius: 16px;
+
+        }
+    }
+
+    .filter-body {
+        position: relative;
+        right: 1px;
+        color: grey;
+        transform-origin: top;
+        border-top: 0px;
+        //padding-top: 5px;
+        margin-left: 10px;
+        margin-right: 10px;
+        overflow:hidden;
+        transition:height 0.3s ease-out;
+        height:0px;
+
+    }
+    .filter-key {
+        position: relative;
+        right: 1px;
+        color: grey;
+        transform-origin: top;
+        border-top: 0px;
+        //padding-top: 5px;
+        margin-left: 10px;
+        margin-right: 10px;
+        overflow:hidden;
+        transition:height 0.3s ease-out;
+        height:0px;
+        .filter-keybar {
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: space-evenly;
+            height: auto;
+            width: 100%;
+            flex-direction: row-reverse;
+            margin-top:5px;
+            
+            .filter-item {
+                position: relative;
+                border:1px solid grey;
+                border-radius: 16px;
+    
+            }
+        }
+
+
+    }
+}
+
+// .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