diff --git a/src/definitions/collections/menu.less b/src/definitions/collections/menu.less index 8a8c408cd9..f79bcde5b3 100755 --- 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 index cc079887e1..5013bbdd35 100644 --- 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;