Skip to content

Commit

Permalink
feat(menu): simpler equal width
Browse files Browse the repository at this point in the history
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
  • Loading branch information
lubber-de committed Mar 19, 2023
1 parent ef4ce34 commit edf4286
Showing 1 changed file with 27 additions and 20 deletions.
47 changes: 27 additions & 20 deletions src/definitions/collections/menu.less
Expand Up @@ -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%;
}
Expand Down

0 comments on commit edf4286

Please sign in to comment.