Skip to content

Commit cf51e1c

Browse files
authored
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 :)
1 parent 3b0a796 commit cf51e1c

File tree

2 files changed

+39
-3
lines changed

2 files changed

+39
-3
lines changed

src/definitions/collections/menu.less

Lines changed: 37 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -795,7 +795,7 @@ Floated Menu / Item
795795
.ui.compact.menu .item:last-child {
796796
border-radius: 0 @borderRadius @borderRadius 0;
797797
}
798-
.ui.pagination.menu .item:last-child::before {
798+
.ui.pagination.menu:not(.wrapping) .item:last-child::before {
799799
display: none;
800800
}
801801

@@ -1489,12 +1489,17 @@ Floated Menu / Item
14891489
}
14901490

14911491
& when (@variationMenuCentered) {
1492-
.ui.center.aligned.menu,
1493-
.ui.centered.menu {
1492+
.ui.center.aligned.menu:not(.fluid),
1493+
.ui.centered.menu:not(.fluid) {
14941494
display: inline-flex;
14951495
transform: translateX(-50%);
14961496
margin-left: 50%;
14971497
}
1498+
.ui.center.aligned.menu .item,
1499+
.ui.centered.menu .item {
1500+
flex: 1 0 auto;
1501+
justify-content: center;
1502+
}
14981503
}
14991504

15001505
& when (@variationMenuInverted) {
@@ -1914,6 +1919,35 @@ Floated Menu / Item
19141919
}
19151920
}
19161921

1922+
& when (@variationMenuWrapping) {
1923+
.ui.wrapping.menu {
1924+
flex-wrap: wrap;
1925+
& .item::before {
1926+
right: auto;
1927+
left: 0;
1928+
}
1929+
& .item:first-child::before {
1930+
display: none;
1931+
}
1932+
&:not(.tabular) .item {
1933+
&:last-of-type,
1934+
&:last-child {
1935+
border-right: @dividerSize solid @dividerBackground;
1936+
}
1937+
}
1938+
}
1939+
& when (@variationMenuWrapped) {
1940+
.ui.wrapped.menu:not(.tabular) .item {
1941+
&:first-child {
1942+
border-bottom-left-radius: 0;
1943+
}
1944+
&:last-child {
1945+
border-top-right-radius: 0;
1946+
}
1947+
}
1948+
}
1949+
}
1950+
19171951
/* --------------
19181952
Sizes
19191953
--------------- */

src/themes/default/globals/variation.variables

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -325,6 +325,8 @@
325325
@variationMenuAttached: true;
326326
@variationMenuIcon: true;
327327
@variationMenuEqualWidth: true;
328+
@variationMenuWrapping: true;
329+
@variationMenuWrapped: true;
328330
@variationMenuSizes: @variationAllSizes;
329331
@variationMenuColors: @variationAllColors;
330332

0 commit comments

Comments
 (0)