Skip to content

Commit edf4286

Browse files
authored
feat(menu): simpler equal width
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
1 parent ef4ce34 commit edf4286

File tree

1 file changed

+27
-20
lines changed

1 file changed

+27
-20
lines changed

src/definitions/collections/menu.less

Lines changed: 27 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1623,29 +1623,36 @@ Floated Menu / Item
16231623
}
16241624
}
16251625

1626-
/* -------------------
1627-
Evenly Sized
1628-
-------------------- */
1626+
& when (@variationMenuEqualWidth) {
1627+
/* -------------------
1628+
Evenly Sized
1629+
-------------------- */
16291630

1630-
.ui.item.menu,
1631-
.ui.item.menu .item {
1632-
width: 100%;
1633-
padding-left: 0 !important;
1634-
padding-right: 0 !important;
1635-
margin-left: 0 !important;
1636-
margin-right: 0 !important;
1637-
text-align: center;
1638-
justify-content: center;
1639-
}
1640-
.ui.attached.item.menu:not(.tabular) {
1641-
margin: 0 @attachedHorizontalOffset !important;
1642-
}
1631+
.ui[class*="equal width"].menu > .item {
1632+
flex: 1;
1633+
}
16431634

1644-
.ui.item.menu .item:last-child::before {
1645-
display: none;
1646-
}
1635+
.ui[class*="equal width"].menu > .item,
1636+
.ui.item.menu,
1637+
.ui.item.menu .item {
1638+
width: 100%;
1639+
padding-left: 0 !important;
1640+
padding-right: 0 !important;
1641+
margin-left: 0 !important;
1642+
margin-right: 0 !important;
1643+
text-align: center;
1644+
justify-content: center;
1645+
}
1646+
.ui.attached[class*="equal width"].menu:not(.tabular),
1647+
.ui.attached.item.menu:not(.tabular) {
1648+
margin: 0 @attachedHorizontalOffset !important;
1649+
}
1650+
1651+
.ui[class*="equal width"].menu > .item:last-child::before,
1652+
.ui.item.menu .item:last-child::before {
1653+
display: none;
1654+
}
16471655

1648-
& when (@variationMenuEqualWidth) {
16491656
.ui.menu.two.item .item {
16501657
width: 50%;
16511658
}

0 commit comments

Comments
 (0)