Skip to content

Commit 943961b

Browse files
authored
feat(button): support stackable buttons
This PR support stackable buttons group variation to automatic stack a button group on mobile devices
1 parent 62dcda8 commit 943961b

File tree

2 files changed

+28
-0
lines changed

2 files changed

+28
-0
lines changed

src/definitions/elements/button.less

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -635,6 +635,33 @@
635635
Variations
636636
*******************************/
637637

638+
& when (@variationButtonStackable) {
639+
/*--------------
640+
Stackable
641+
---------------*/
642+
643+
/* Tablet Or Below */
644+
@media only screen and (max-width: @largestMobileScreen) {
645+
646+
.ui.stackable.buttons {
647+
flex-direction: column;
648+
width: 100%;
649+
& .button:first-child {
650+
border-bottom-left-radius: 0;
651+
border-top-right-radius: @borderRadius;
652+
}
653+
& .button:last-child {
654+
border-bottom-left-radius: @borderRadius;
655+
border-top-right-radius: 0;
656+
}
657+
& .button:only-child {
658+
border-radius: @borderRadius;
659+
}
660+
}
661+
662+
}
663+
}
664+
638665
& when (@variationButtonFloated) {
639666
/*-------------------
640667
Floated

src/themes/default/globals/variation.variables

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@
2626
@variationButtonFluid: true;
2727
@variationButtonCircular: true;
2828
@variationButtonGroups: true;
29+
@variationButtonStackable: true;
2930
@variationButtonSizes: @variationAllSizes;
3031

3132
/* Container */

0 commit comments

Comments
 (0)