Improve styling

eea · Sep 21, 2022 · 2b509a6 · 2b509a6
1 parent 05ef47a
commit 2b509a6
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 87 deletions.
diff --git a/src/SearchBlock/less/answersbox.less b/src/SearchBlock/less/answersbox.less
@@ -13,22 +13,6 @@
     }
   }
 
-  .ui.warning.message {
-    padding-top: 0;
-    margin: 0;
-
-    > .icon {
-      padding-top: 3px;
-    }
-
-    .ui.button {
-      padding: 5px 10px;
-      margin: 0 5px;
-      font-size: 14px;
-      font-weight: 400;
-    }
-  }
-
   .buttons {
     .button {
       background-color: @secondaryColor !important;
@@ -50,11 +34,9 @@
 .answer-header {
   display: flex;
   align-items: center;
-  margin-bottom: 0.5em;
+  gap: 1.5em;
 
   .answer-header-title {
-    margin-right: 1.5em;
-    font-size: 16px;
     font-weight: 700;
   }
 
@@ -90,40 +72,11 @@
   }
 }
 
-.answer__primary {
-  .source {
-    margin-top: 0.5em;
-
-    a {
-      color: @mediumPersianBlue;
-      font-weight: normal;
-
-      span {
-        color: @linkColor;
-      }
-    }
-
-    .label {
-      margin-right: 0.5em !important;
-    }
-  }
-}
-
 .answer__highlighted {
   background-color: #e8d2fd;
   color: black;
 }
 
-.answer__primarylink,
-.answer__primarylink a {
-  color: @deepBlue;
-  font-size: 20px;
-
-  &:hover {
-    color: @deepBlue;
-  }
-}
-
 .answers-feedback {
   display: flex;
   justify-content: flex-end;
@@ -164,22 +117,10 @@
   }
 }
 
-@media only screen and (max-width: @tabletBreakpoint) {
-  .answers-list .answer__primarylink,
-  .answers-list .answer__primarylink a {
-    color: @deepBlue;
-    font-size: 16px;
-  }
-
-  .answers-list .answer__primary span {
-    font-size: 16px !important;
-  }
-
-  .results-layout .answers-list .answer__primary {
-    .result__source span,
-    .result__source strong {
-      font-size: 14px !important;
-    }
+.answerCard {
+  .listing-item a {
+    display: inline-flex;
+    width: auto;
   }
 }
 

diff --git a/src/SearchBlock/less/dropdown-filterlist.less b/src/SearchBlock/less/dropdown-filterlist.less
@@ -36,6 +36,10 @@
       .ui.dropdown {
         position: relative;
 
+        .menu > * {
+          white-space: normal;
+        }
+
         &.active {
           > span {
             z-index: 99999 !important;
@@ -56,7 +60,8 @@
 
         .menu {
           bottom: auto !important;
-          min-width: 368px;
+          min-width: 350px;
+          max-width: 400px;
           padding: 1em;
           border: none;
           border-bottom: 0.5px solid #4c677f;
@@ -194,6 +199,7 @@
 
     .card-header {
       flex-direction: row;
+      text-align: left !important;
     }
   }
 
@@ -291,23 +297,25 @@
   }
 
   .sui-multi-checkbox-facet__option-label {
-    justify-content: initial;
+    align-items: flex-start;
+    justify-content: space-between;
+    // justify-content: initial;
     margin: 0.5em 0;
   }
 
   .sui-multi-checkbox-facet__option-count {
     display: flex;
     align-items: center;
-    margin: 0;
-    margin-left: 0.5em;
+    // margin: 0;
+    margin: 0 0.5em;
     color: @blue-grey-5;
-    font-size: 16px;
+    font-size: 14px;
     font-weight: 300;
   }
 
   .sui-multi-checkbox-facet__option-input-wrapper {
     position: relative;
-    flex: none;
+    // flex: none;
 
     input.sui-multi-checkbox-facet__checkbox {
       position: absolute;
@@ -326,16 +334,16 @@
     }
 
     .sui-multi-checkbox-facet__input-text {
-      padding-left: 30px;
-      font-size: 16px;
+      padding-left: 25px;
+      font-size: 14px;
     }
 
     .checkmark {
       position: absolute;
       top: 2px;
       left: 0;
-      width: 20px;
-      height: 20px;
+      width: 15px;
+      height: 15px;
       border: 1px solid @blue-5;
       background-color: @white;
     }
@@ -344,8 +352,8 @@
       position: absolute;
       top: 4px;
       left: 0;
-      width: 16px;
-      height: 16px;
+      width: 14px;
+      height: 14px;
       border: 2px solid @blue-5;
       background-color: @white;
       border-radius: 50%;
@@ -354,8 +362,8 @@
     .radio-checkmark:after {
       top: 2px;
       left: 2px;
-      width: 8px;
-      height: 8px;
+      width: 6px;
+      height: 6px;
       background: @blue-5;
       border-radius: 50%;
     }
@@ -381,10 +389,10 @@
     }
 
     .checkmark:after {
-      top: 3px;
-      left: 7px;
-      width: 5px;
-      height: 10px;
+      top: 1px;
+      left: 5px;
+      width: 4px;
+      height: 9px;
       border: solid white;
       border-width: 0 2px 2px 0;
       -webkit-transform: rotate(45deg);
@@ -422,7 +430,7 @@
     }
 
     .sui-multi-checkbox-facet__option-label {
-      justify-content: space-between;
+      // justify-content: space-between;
     }
 
     .match-select {
@@ -440,3 +448,8 @@
     }
   }
 }
+
+.sidebar-content .sui-multi-checkbox-facet__option-label {
+  align-items: flex-start;
+  justify-content: space-between;
+}
diff --git a/src/SearchBlock/less/landingpage.less b/src/SearchBlock/less/landingpage.less
@@ -2,7 +2,7 @@
   margin-top: 5em;
 
   .search-tab {
-    margin-top: 4em;
+    margin-top: 2em;
 
     .ui.tab {
       padding-right: 0;

diff --git a/src/SearchBlock/less/searchresult.less b/src/SearchBlock/less/searchresult.less
@@ -443,6 +443,11 @@ div#page-document div.searchapp div.cards div.search-result {
 }
 
 .result-item {
+  .slot-head {
+    display: flex;
+    flex-direction: row;
+  }
+
   .listing-header {
     display: flex;
 
@@ -491,7 +496,6 @@ div#page-document div.searchapp div.cards div.search-result {
 .tags-wrapper {
   display: flex;
   flex-direction: row;
-  margin-bottom: 1rem;
 
   .tags {
     justify-content: flex-start;

diff --git a/src/SearchBlock/less/searchview.less b/src/SearchBlock/less/searchview.less
@@ -396,9 +396,10 @@ body.searchlib-page {
   font-weight: 400;
 }
 
-p.highlight-description,
-p.highlight-description\.highlight {
+span.highlight-description,
+span.highlight-description\.highlight {
   em {
+    // &:extend(.answer__highlighted);
     font-style: normal !important;
     font-weight: bold;
   }