Refs #142953 - Dimmer - add styles.

eea · Dec 16, 2021 · 3529497 · 3529497
1 parent 92b027f
commit 3529497
Showing 1 changed file with 178 additions and 0 deletions.
diff --git a/src/SearchBlock/less/styles.less b/src/SearchBlock/less/styles.less
@@ -73,6 +73,183 @@ body.searchlib-page {
   font-size: 0.8em;
 }
 
+div.ui.dimmer.facet-dimmer {
+  padding: 10px;
+  // background-color: @sf-medium-gray2;
+  background-color: rgba(140, 140, 140, 0.9);
+
+  button.show-filters {
+    margin-top: 0.3em;
+    margin-right: 0px;
+    background: @sf-light-gray !important;
+    border-radius: 2px;
+    color: @sf-azure !important;
+    float: right;
+    font-size: 12px;
+  }
+
+  div.filter-list-item {
+    max-width: 100%;
+
+    .ui.label {
+      display: flex;
+    }
+
+    img.facet-option-icon {
+      display: inline;
+      width: auto;
+      max-height: 12px !important;
+      margin-right: 0.5em;
+    }
+  }
+
+  div.filter-list-item.more-like-this {
+    margin-bottom: 1em;
+
+    div.ui.label {
+      width: 100%;
+    }
+
+    i.icon.delete {
+      position: absolute;
+      top: 10px;
+      right: 10px;
+      color: @sf-azure;
+    }
+
+    div.meta {
+      line-height: normal;
+
+      i.icon {
+        margin-right: 0.5em;
+      }
+    }
+
+    a.centered {
+      img {
+        width: 100%;
+        height: auto;
+        max-height: 200px;
+        margin-top: 0.5em;
+        margin-bottom: 0.5em;
+        object-fit: cover;
+        object-position: top;
+      }
+    }
+
+    h4 {
+      margin-top: 0.5em;
+      line-height: inherit;
+    }
+  }
+
+  div.filter-list-item.more-like-this > .labels > .label {
+    overflow: hidden;
+    max-width: 100%;
+    padding: 0px;
+    margin: 0px;
+  }
+
+  div.mlt-filter {
+    img {
+      width: 100%;
+      height: auto;
+    }
+
+    a {
+      font-size: 12px;
+    }
+
+    .meta {
+      font-size: 12px;
+      font-weight: 400;
+    }
+  }
+
+  .card .meta {
+    color: @s-medium-gray2 !important;
+  }
+
+  .card {
+    width: 80% !important;
+    border: none;
+    margin: 3px 0px 3px 10%;
+    border-radius: 3px;
+    box-shadow: none;
+
+    &:hover {
+      box-shadow: none !important;
+    }
+
+    div.content {
+      padding: 0.5em;
+
+      div.header {
+        padding: 0px;
+        margin: 0px;
+        color: @sf-dark-gray;
+        font-size: 16px !important;
+        font-weight: 400 !important;
+
+        span.text {
+          display: block;
+          overflow: hidden;
+          max-width: calc(100% - 35px);
+          float: left;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+
+        span.clear-filters {
+          button {
+            padding: 3px;
+            background: @sf-light-gray !important;
+            color: @sf-azure;
+            float: right;
+            font-size: 10px;
+          }
+        }
+      }
+    }
+
+    div.filter.description {
+      display: flex;
+
+      div.ui.label {
+        padding: 5px;
+        margin-top: 4px;
+        margin-bottom: 0px;
+        background: white;
+        font-size: 12px;
+
+        span.text {
+          min-height: 13px !important;
+        }
+      }
+    }
+
+    &.active {
+      background: white;
+
+      div.label {
+        max-width: 100%;
+        background: @sf-light-gray !important;
+        color: @sf-azure;
+        font-weight: 600;
+
+        span.text {
+          display: block;
+          overflow: hidden;
+          max-width: calc(100% - 14px);
+          float: left;
+          text-overflow: hidden;
+          white-space: nowrap;
+        }
+      }
+    }
+  }
+}
+
 // results
 div.label.new-item {
   display: inline-block;
@@ -266,6 +443,7 @@ div#page-document {
 
         &.active {
           border-bottom: 4px solid @sf-azure;
+
           .icon {
             color: @sf-azure !important;
           }