Refs #139198 - Improve styles for multi term facet.

eea · Oct 8, 2021 · 72dfb85 · 72dfb85
1 parent 8331dc9
commit 72dfb85
Showing 1 changed file with 48 additions and 28 deletions.
diff --git a/src/SearchBlock/styles.less b/src/SearchBlock/styles.less
@@ -553,46 +553,66 @@ div.ui.modal {
     }
   }
 
-  div.multitermlist__facet__header {
-    display: flex; // TODO improve
-  }
+  div.header {
+    border: none;
 
-  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;
+    div.multitermlist__facet__header {
+      h3 {
+        width: 30%;
+        float: left;
+        font-weight: 600;
+      }
 
-    span.title {
-      margin-right: 5px;
-    }
+      div.search {
+        width: 40%;
+        float: left;
+      }
 
-    span.count {
-      color: @sf-medium-gray2;
-      font-size: 10px;
-      font-weight: 400;
+      div.toggleSort {
+        width: 15%;
+        float: left;
+      }
     }
+  }
 
-    &.active {
-      border-color: @sf-medium-blue;
-      background: @sf-medium-blue !important;
-      box-shadow: none;
+  div.content {
+    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;
+
+      span.title {
+        margin-right: 5px;
+      }
 
       span.count {
-        color: white;
+        color: @sf-medium-gray2;
+        font-size: 10px;
+        font-weight: 400;
       }
 
-      &:hover {
+      &.active {
+        border-color: @sf-medium-blue;
         background: @sf-medium-blue !important;
+        box-shadow: none;
+
+        span.count {
+          color: white;
+        }
+
+        &:hover {
+          background: @sf-medium-blue !important;
+        }
       }
-    }
 
-    &:hover {
-      background: @sf-light-gray;
+      &:hover {
+        background: @sf-light-gray;
+      }
     }
   }