feat(menu): wrapping variant

Added a wrapping variant for menu just like we already implemented for a button group Optional wrapped class adjusts border radius (just as in button group) enhanced centered to work together with fluid to allow centered menu items which stay inside a full width fluid menu (works great with wrapping :)
fomantic · Feb 2, 2023 · cf51e1c · cf51e1c
1 parent 3b0a796
commit cf51e1c
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 3 deletions.
diff --git a/src/definitions/collections/menu.less b/src/definitions/collections/menu.less
@@ -795,7 +795,7 @@ Floated Menu / Item
     .ui.compact.menu .item:last-child {
         border-radius: 0 @borderRadius @borderRadius 0;
     }
-    .ui.pagination.menu .item:last-child::before {
+    .ui.pagination.menu:not(.wrapping) .item:last-child::before {
         display: none;
     }
 
@@ -1489,12 +1489,17 @@ Floated Menu / Item
 }
 
 & when (@variationMenuCentered) {
-    .ui.center.aligned.menu,
-    .ui.centered.menu {
+    .ui.center.aligned.menu:not(.fluid),
+    .ui.centered.menu:not(.fluid) {
         display: inline-flex;
         transform: translateX(-50%);
         margin-left: 50%;
     }
+    .ui.center.aligned.menu .item,
+    .ui.centered.menu .item {
+        flex: 1 0 auto;
+        justify-content: center;
+    }
 }
 
 & when (@variationMenuInverted) {
@@ -1914,6 +1919,35 @@ Floated Menu / Item
     }
 }
 
+& when (@variationMenuWrapping) {
+    .ui.wrapping.menu {
+        flex-wrap: wrap;
+        & .item::before {
+            right: auto;
+            left: 0;
+        }
+        & .item:first-child::before {
+            display: none;
+        }
+        &:not(.tabular) .item {
+            &:last-of-type,
+            &:last-child {
+                border-right: @dividerSize solid @dividerBackground;
+            }
+        }
+    }
+    & when (@variationMenuWrapped) {
+        .ui.wrapped.menu:not(.tabular) .item {
+            &:first-child {
+                border-bottom-left-radius: 0;
+            }
+            &:last-child {
+                border-top-right-radius: 0;
+            }
+        }
+    }
+}
+
 /* --------------
      Sizes
 --------------- */

diff --git a/src/themes/default/globals/variation.variables b/src/themes/default/globals/variation.variables
@@ -325,6 +325,8 @@
 @variationMenuAttached: true;
 @variationMenuIcon: true;
 @variationMenuEqualWidth: true;
+@variationMenuWrapping: true;
+@variationMenuWrapped: true;
 @variationMenuSizes: @variationAllSizes;
 @variationMenuColors: @variationAllColors;