Improve dropdown filters styling

eea · Jul 11, 2022 · e444c31 · e444c31
1 parent 28008ec
commit e444c31
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 4 deletions.
diff --git a/src/SearchBlock/less/dropdown-filterlist.less b/src/SearchBlock/less/dropdown-filterlist.less
@@ -1,14 +1,72 @@
-div#page-document .searchlib-block {
+.searchlib-block {
   .dropdown-facets-list {
+    display: flex;
+    margin-bottom: 3em;
+
+    .dropdown-facet {
+      .ui.dropdown .divider {
+        padding: 3px 13px;
+        border: 1px solid #eee;
+        color: #3d5265;
+        font-size: 16px;
+      }
+    }
+
     .horizontal-dropdown-facets {
       display: flex;
-      gap: 1em;
+      gap: 1.5em;
+    }
+
+    .ui.right.sidebar {
+      box-shadow: 0 0 20px rgba(175, 175, 175, 0.8) !important;
     }
 
     .sidebar-content {
       height: 100%;
       padding: 1em;
       background-color: white;
+
+      .ui.card.term .header {
+        border: none;
+        color: #3d5265;
+        font-size: 16px;
+        font-weight: 400;
+      }
+
+      .ui.card.term span.count {
+        color: #3d5265;
+        font-weight: 400;
+      }
+
+      .ui.card.term:hover {
+        background: #fff !important;
+        box-shadow: none;
+      }
+
+      .ui.card.term.active .header,
+      .ui.card.term.active span.count {
+        color: #004b7f;
+        font-weight: 700;
+      }
+
+      .ui.accordion .title i:before {
+        font-size: 2rem;
+      }
+    }
+
+    .ui.button.sui-button {
+      padding: 0;
+      margin-left: 1.5em;
+      color: #007b6c !important;
+      font-weight: 600;
+
+      &:hover,
+      &:active,
+      &:focus {
+        border: none;
+        background: none !important;
+        box-shadow: none;
+      }
     }
   }
 }
diff --git a/src/SearchBlock/less/searchview.less b/src/SearchBlock/less/searchview.less
@@ -160,7 +160,7 @@ div#page-document {
 
       .view-selector {
         width: auto !important;
-        padding-bottom: 1em;
+        // padding-bottom: 1em;
         padding-left: 0px !important;
         margin-left: 10px;
         font-size: 16px;
@@ -207,7 +207,7 @@ div#page-document {
 
       .sorting {
         width: auto;
-        margin-bottom: 0.5em;
+        // margin-bottom: 0.5em;
         font-size: 16px;
 
         .inline.dropdown > span {