feat(menu): simpler equal width

lubber-de · web-flow · commit edf4286b3e3c · 2023-03-19T16:03:25.000+01:00
This PR unifies the equal width logic for menu as we already have in fields, grid and segment

I left the old approach ("x item menu") to avoid being a breaking change.
I will investigate if we can remove the old approach for 2.10.0 as , at the moment, i could not detect if there is a technical reason equal width menu items were done differently than in the other components
diff --git a/src/definitions/collections/menu.less b/src/definitions/collections/menu.less
@@ -1623,29 +1623,36 @@ Floated Menu / Item
     }
 }
 
-/* -------------------
-      Evenly Sized
--------------------- */
+& when (@variationMenuEqualWidth) {
+    /* -------------------
+          Evenly Sized
+    -------------------- */
 
-.ui.item.menu,
-.ui.item.menu .item {
-    width: 100%;
-    padding-left: 0 !important;
-    padding-right: 0 !important;
-    margin-left: 0 !important;
-    margin-right: 0 !important;
-    text-align: center;
-    justify-content: center;
-}
-.ui.attached.item.menu:not(.tabular) {
-    margin: 0 @attachedHorizontalOffset !important;
-}
+    .ui[class*="equal width"].menu > .item {
+        flex: 1;
+    }
 
-.ui.item.menu .item:last-child::before {
-    display: none;
-}
+    .ui[class*="equal width"].menu > .item,
+    .ui.item.menu,
+    .ui.item.menu .item {
+        width: 100%;
+        padding-left: 0 !important;
+        padding-right: 0 !important;
+        margin-left: 0 !important;
+        margin-right: 0 !important;
+        text-align: center;
+        justify-content: center;
+    }
+    .ui.attached[class*="equal width"].menu:not(.tabular),
+    .ui.attached.item.menu:not(.tabular) {
+        margin: 0 @attachedHorizontalOffset !important;
+    }
+
+    .ui[class*="equal width"].menu > .item:last-child::before,
+    .ui.item.menu .item:last-child::before {
+        display: none;
+    }
 
-& when (@variationMenuEqualWidth) {
     .ui.menu.two.item .item {
         width: 50%;
     }
