feat(search): horizontal category variant

Added a horizontal category search variant, which moves the category headers to the top of each results instead of the left
fomantic · Apr 17, 2023 · 446d89e · 446d89e
1 parent 3222bcd
commit 446d89e
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 0 deletions.
diff --git a/src/definitions/modules/search.less b/src/definitions/modules/search.less
@@ -367,6 +367,19 @@
         transition: @categoryResultTransition;
         padding: @categoryResultPadding;
     }
+
+    & when (@variationSearchHorizontalCategory) {
+        .ui.horizontal.category.search > .results .category,
+        .ui.horizontal.category.search > .results .category > .name,
+        .ui.horizontal.category.search > .results .category > .results {
+            display: block;
+        }
+
+        .ui.horizontal.category.search > .results .category > .results {
+            width: 100%;
+            border-left: 0;
+        }
+    }
 }
 
 /*******************************

diff --git a/src/themes/default/globals/variation.variables b/src/themes/default/globals/variation.variables
@@ -651,6 +651,7 @@
 @variationSearchDisabled: true;
 @variationSearchSelection: true;
 @variationSearchCategory: true;
+@variationSearchHorizontalCategory: true;
 @variationSearchLoading: true;
 @variationSearchAligned: true;
 @variationSearchFluid: true;