change: add style for tab icons

eea · Jan 30, 2024 · 90ccda7 · 90ccda7
1 parent 9e51a5b
commit 90ccda7
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 3 deletions.
diff --git a/searchlib/components/Facets/Connected/SectionTabs.jsx b/searchlib/components/Facets/Connected/SectionTabs.jsx
@@ -102,9 +102,17 @@ const SectionTabs = (props) => {
                 }
               }}
             >
-              {showIcons && <Icon type={value} family="Content types" />}
-              <span className="title">{value}&nbsp;</span>
-              <span className="count">({count})</span>
+              {showIcons ? (
+                <div className="tab-icon" title={value}>
+                  <Icon className="small" type={value} family="Content types" />
+                  <span className="count">{count}</span>
+                </div>
+              ) : (
+                <>
+                  <span className="title">{value}&nbsp;</span>
+                  <span className="count">({count})</span>
+                </>
+              )}
             </Menu.Item>
           ))}
         </Menu>

diff --git a/src/SearchBlock/less/searchview.less b/src/SearchBlock/less/searchview.less
@@ -35,6 +35,40 @@ body.searchlib-page {
       &::-webkit-scrollbar {
         height: 0.3rem !important;
       }
+
+      .active.item {
+        .tab-icon {
+          .count {
+            border: none;
+            color: @white;
+            background-color: @primaryColor;
+            border: 2px solid @primaryColor;
+          }
+        }
+      }
+
+      .tab-icon {
+        position: relative;
+      }
+
+      .tab-icon .count {
+        font-size: 10px;
+        font-weight: bold;
+        border-radius: 50%;
+        height: 26px;
+        width: 26px;
+        line-height: 23px;
+        background-color: @white;
+        color: #3d5265; // TODO: replace with @blue-grey-5 from volto-design-tokens
+        border: 2px solid #3d5265;
+        top: auto;
+        bottom: -0.6em;
+        text-align: center;
+        position: absolute;
+        z-index: 100;
+        left: 100%;
+        margin-left: -1.5em;
+      }
     }
 
     .sorting {