From bbdc766000c27fc8fc04cf2067299edb3a8561f9 Mon Sep 17 00:00:00 2001
From: kreafox <krisztina.n.elekes@gmail.com>
Date: Wed, 8 Jun 2022 09:20:09 +0300
Subject: [PATCH] WIP filter section

---
 src/SearchBlock/less/facets.less     | 150 ++++++++--------
 src/SearchBlock/less/filterlist.less | 247 +++++++++++++++++++--------
 src/SearchBlock/less/searchbox.less  |   4 +-
 3 files changed, 262 insertions(+), 139 deletions(-)

diff --git a/src/SearchBlock/less/facets.less b/src/SearchBlock/less/facets.less
index 6cdd4b083..348ebe86b 100644
--- a/src/SearchBlock/less/facets.less
+++ b/src/SearchBlock/less/facets.less
@@ -433,8 +433,8 @@ div#page-document .searchlib-block {
   }
 }
 
-div.ui.modal.facet {
-  background: @sf-light-gray;
+.ui.modal.facet {
+  // background: @sf-light-gray;
 
   img.facet-option-icon {
     display: inline;
@@ -444,29 +444,24 @@ div.ui.modal.facet {
     filter: grayscale(100%);
   }
 
-  div.content .searchlib-multiterm-facet.facet-sources {
+  > .header {
+    padding: 1em 1.5em;
+  }
+
+  .content {
+    padding: 2em;
+  }
+
+  .content .searchlib-multiterm-facet.facet-sources {
     img.facet-option-icon {
+      display: block;
       height: 28px;
-      margin-top: -10px;
-      margin-bottom: -10px;
-      margin-left: -5px;
       background: white;
       -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
       filter: grayscale(100%);
     }
   }
 
-  div.content .searchlib-multiterm-facet.facet-content-types {
-    i.icon {
-      position: relative;
-      top: 0.22em;
-      margin-top: -5px;
-      margin-right: 3px;
-      margin-bottom: -5px;
-      font-size: 2em;
-    }
-  }
-
   fieldset.sui-facet.searchlib-fixedrange-facet {
     padding: 20px;
 
@@ -497,6 +492,7 @@ div.ui.modal.facet {
       display: flex;
       align-items: center;
       margin-top: 1.5em;
+      margin-bottom: 1em;
       --text-divider-gap: 0.5em;
     }
 
@@ -521,11 +517,11 @@ div.ui.modal.facet {
   }
 
   div.header {
-    border: none;
+    border-bottom: 1px solid @midGray;
     background-color: initial;
 
     .facet-title {
-      margin-bottom: 1em;
+      color: @lightBlack;
 
       h3 {
         font-size: calc(10px + 4 * ((100vw - 320px) / 680));
@@ -541,20 +537,20 @@ div.ui.modal.facet {
     }
 
     div.multitermlist__facet__header {
-      .search-wrapper {
-        display: flex;
-        align-items: center;
-      }
+      // .search-wrapper {
+      //   display: flex;
+      //   align-items: center;
+      // }
 
       div.search {
         display: flex;
         // width: 100%;
         align-items: center;
-        margin-right: 0px;
+        margin-top: 1em;
       }
 
       input.multitermlist__search__text-input {
-        width: 100%;
+        width: 40%;
         padding: 0.2em;
         border: 1px solid @sf-medium-gray;
         margin-right: 1em;
@@ -567,6 +563,12 @@ div.ui.modal.facet {
         }
       }
 
+      span.label {
+        color: @deepBlue;
+        font-size: 16px;
+        font-weight: 400;
+      }
+
       div.order-controls {
         display: flex;
         flex-wrap: wrap;
@@ -574,10 +576,6 @@ div.ui.modal.facet {
         justify-content: space-between;
         margin-left: auto;
 
-        span.label {
-          font-size: 14px;
-        }
-
         div.toggle-label {
           cursor: pointer;
         }
@@ -586,11 +584,12 @@ div.ui.modal.facet {
           padding-left: 0.3em;
 
           div.toggle-label {
-            padding: 0.3em 0.7em 0.3em 0.7em;
+            margin-left: 10px;
             background: white;
             border-radius: 8px;
-            color: @sf-dark-gray;
-            font-size: 14px;
+            color: @deepBlue;
+            font-size: 16px;
+            font-weight: 400;
 
             i.icon {
               margin-left: 3px;
@@ -598,13 +597,14 @@ div.ui.modal.facet {
 
             &.active {
               color: @secondaryColor;
+              font-weight: 700;
             }
           }
         }
       }
 
       div.ui.toggle.checkbox {
-        padding-right: 0.5em;
+        padding-left: 0.5em;
         color: @sf-dark-gray !important;
         font-size: 14px;
 
@@ -615,10 +615,10 @@ div.ui.modal.facet {
           &:before {
             position: absolute;
             top: 5px;
-            width: 2rem;
+            width: 1.6rem;
             height: 0.8rem !important;
-            background: @sf-medium-gray2 !important;
-            box-shadow: 0px 0px 0px 2px @sf-medium-gray2 !important;
+            background: #bdbdbd !important;
+            box-shadow: 0px 0px 0px 2px #bdbdbd !important;
           }
 
           &:after {
@@ -646,58 +646,72 @@ div.ui.modal.facet {
     }
   }
 
-  button.term {
-    padding: 12px 10px 12px 10px;
-    border: 1px solid @sf-light-gray2;
-    margin: 5px;
-    background: white;
-    border-radius: 2px;
-    color: @sf-dark-gray;
-    font-size: 12px;
-    font-weight: 600;
+  .ui.card.term.active-term {
+    width: auto !important;
+    min-width: auto;
+    margin: 5px 1.5em 5px 0 !important;
 
-    span.title {
-      margin-right: 5px;
+    .header,
+    span.count {
+      color: @secondaryColor;
+      font-weight: 700;
     }
+  }
 
-    span.count {
-      color: @sf-medium-gray2;
-      font-size: 10px;
+  .ui.card.term {
+    min-width: 100px;
+    margin-top: 2em;
+
+    &.disabled {
+      .header,
+      span.count {
+        color: #bfbfbf;
+      }
+    }
+
+    .header {
+      border: none;
+      color: @deepBlue;
+      font-size: 16px;
       font-weight: 400;
     }
 
-    &.active {
-      border-color: @sf-medium-blue;
-      background: @sf-medium-blue !important;
-      box-shadow: none;
+    .content {
+      flex-grow: initial;
+      padding: 0;
+      padding-bottom: 0.5em;
+    }
 
+    &.active {
+      .header,
       span.count {
-        color: white;
+        color: @darkCerulean;
+        font-weight: 700;
       }
 
       &:hover {
-        background: @sf-medium-blue !important;
+        background: transparent !important;
       }
     }
 
     &:hover {
-      background: @sf-light-gray;
+      border: none;
+      background: transparent !important;
+      box-shadow: none;
     }
-  }
 
-  div.actions {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: baseline;
-    border: none;
-    text-align: left;
+    .title {
+      margin-right: 5px;
+    }
 
-    button {
-      padding: 12px 10px 12px 10px;
-      border-radius: 2px;
-      font-size: 12px;
+    .count {
+      color: @deepBlue;
+      font-size: 16px;
+      font-weight: 400;
     }
+  }
 
+  div.actions {
     a.clear-filters {
       margin-left: auto;
       color: @secondaryColor;
diff --git a/src/SearchBlock/less/filterlist.less b/src/SearchBlock/less/filterlist.less
index c9733c386..d54ea6bc2 100644
--- a/src/SearchBlock/less/filterlist.less
+++ b/src/SearchBlock/less/filterlist.less
@@ -206,85 +206,194 @@ div#page-document .searchlib-block {
   .card .meta {
     color: @s-medium-gray2 !important;
   }
+}
 
-  .facetslist-wrapper {
-    .facet-btn {
-      margin: 0 0.6em 0.6em 0;
-      background: @midGray;
-      color: @lightBlack;
-      font-size: 16px;
-    }
+.facets-wrapper {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: center;
+  margin: 1em 0;
+}
 
-    .card {
-      // width: 100% !important;
-      border: 1px solid @sf-light-gray2;
-      // margin: 3px 0px 3px 0px;
-      border-radius: 3px;
-      box-shadow: none;
+.ui.modal.filters-modal {
+  color: @lightBlack;
 
-      .content {
-        padding: 0.5em;
-
-        .header {
-          padding: 0px;
-          margin: 0px;
-          color: @sf-dark-gray;
-          font-size: 16px;
-          font-weight: 400;
-
-          .text {
-            display: block;
-            overflow: hidden;
-            max-width: calc(100% - 35px);
-            float: left;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-          }
+  .header {
+    border-bottom: 1px solid @midGray;
+    color: @lightBlack;
+  }
 
-          .clear-filters {
-            button {
-              padding: 3px;
-              background: @sf-light-gray !important;
-              color: @secondaryColor;
-              float: right;
-              font-size: 10px;
-            }
-          }
-        }
+  .modal-content-section {
+    margin-bottom: 2em;
+    font-size: 24px !important;
+  }
+
+  .filter-buttons {
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+  .ui.button.add-filter {
+    margin: 1em 2em 1em 0 !important;
+    background: #f9f9f9;
+    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
+    color: @lightBlack;
+    font-weight: 700;
+  }
+}
+
+.modal-section-title {
+  // margin-bottom: 1em;
+  color: @lightBlack;
+  font-size: 20px;
+  font-weight: 700;
+}
+
+.facet-list-header {
+  display: flex;
+  align-items: center;
+  margin-bottom: 1.5em;
+
+  h4 {
+    margin: 0;
+  }
+}
+
+.ui.basic.button.clear-btn {
+  padding: 0.8em;
+  color: @secondaryColor !important;
+  font-size: 14px;
+  font-weight: 500;
+
+  &:hover {
+    border: none;
+    box-shadow: none;
+  }
+}
+
+.ui.card.facet {
+  width: auto !important;
+  // min-width: 180px;
+  border: none !important;
+  margin: 5px 10px 5px 0 !important;
+  background: @midGray !important;
+  border-radius: 0 !important;
+  // margin: 3px 0px 3px 0px;
+  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25) !important;
+  color: @lightBlack !important;
+
+  .content {
+    padding: 0.5em 1em 0.5em;
+  }
+
+  .filter.description {
+    display: flex;
+
+    .ui.label {
+      padding: 5px;
+      margin-top: 4px;
+      margin-bottom: 0px;
+      background: @sf-blue;
+      color: white;
+      font-size: 12px;
+
+      .text {
+        min-height: 13px !important;
+      }
+    }
+  }
+
+  &.active {
+    .label {
+      max-width: 100%;
+      color: @secondaryColor;
+      font-weight: 600;
+
+      .text {
+        display: block;
+        overflow: hidden;
+        max-width: calc(100% - 14px);
+        float: left;
+        text-overflow: hidden;
+        white-space: nowrap;
       }
+    }
+  }
+}
 
-      .filter.description {
-        display: flex;
+.ui.card .card-header {
+  display: flex !important;
+  align-items: center;
+  padding: 0px !important;
+  margin: 0px !important;
+  color: @lightBlack;
+  font-size: 16px;
+  font-weight: 700;
+  text-align: center !important;
+
+  .text {
+    display: flex;
+    align-items: center;
+  }
 
-        .ui.label {
-          padding: 5px;
-          margin-top: 4px;
-          margin-bottom: 0px;
-          background: @sf-blue;
-          color: white;
-          font-size: 12px;
+  .clear-filters {
+    position: relative;
+    width: 16px;
+    height: 16px;
+    padding: 3px;
+    border: 1px solid @lightBlack !important;
+    margin-left: 20px;
+    background: none !important;
+    border-radius: 2px;
+    box-shadow: none;
+    color: @lightBlack;
+    opacity: 1;
 
-          .text {
-            min-height: 13px !important;
-          }
-        }
+    &:hover {
+      border: none;
+      box-shadow: none;
+      outline: none;
+    }
+
+    i.close.icon {
+      position: absolute;
+      top: 3px;
+      left: -4px;
+      margin: 0 !important;
+      color: @lightBlack;
+      opacity: 1;
+
+      &:before,
+      &:after {
+        position: absolute;
+        top: 0;
+        left: 11px;
+        width: 1px;
+        height: 9px;
+        background-color: @lightBlack !important;
+        content: ' ';
       }
 
-      &.active {
-        .label {
-          max-width: 100%;
-          color: @secondaryColor;
-          font-weight: 600;
-
-          .text {
-            display: block;
-            overflow: hidden;
-            max-width: calc(100% - 14px);
-            float: left;
-            text-overflow: hidden;
-            white-space: nowrap;
-          }
-        }
+      &:before {
+        transform: rotate(45deg);
+      }
+
+      &:after {
+        transform: rotate(-45deg);
+      }
+    }
+  }
+}
+
+.ui.card.active-term {
+  .clear-filters {
+    border: 1px solid @secondaryColor !important;
+
+    i.close.icon {
+      &:before,
+      &:after {
+        background-color: @secondaryColor !important;
       }
     }
   }
diff --git a/src/SearchBlock/less/searchbox.less b/src/SearchBlock/less/searchbox.less
index 457c73601..897f96961 100644
--- a/src/SearchBlock/less/searchbox.less
+++ b/src/SearchBlock/less/searchbox.less
@@ -387,7 +387,7 @@
 
 .sui-search-box__autocomplete-container li {
   padding: 8px 40px;
-  color: @darkCerulean;
+  color: @primaryColor;
   cursor: pointer;
   font-size: 18px;
 }
@@ -409,7 +409,7 @@
 }
 
 .sui-search-box__autocomplete-container li[aria-selected='true'] {
-  background: @darkCerulean;
+  background: @primaryColor;
   color: #ffffff;
 }