feat(button): support stackable buttons

This PR support stackable buttons group variation to automatic stack a button group on mobile devices
fomantic · Oct 16, 2020 · 943961b · 943961b
1 parent 62dcda8
commit 943961b
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 0 deletions.
diff --git a/src/definitions/elements/button.less b/src/definitions/elements/button.less
@@ -635,6 +635,33 @@
            Variations
 *******************************/
 
+& when (@variationButtonStackable) {
+  /*--------------
+     Stackable
+  ---------------*/
+
+  /* Tablet Or Below */
+  @media only screen and (max-width: @largestMobileScreen) {
+
+    .ui.stackable.buttons {
+      flex-direction: column;
+      width: 100%;
+      & .button:first-child {
+        border-bottom-left-radius: 0;
+        border-top-right-radius: @borderRadius;
+      }
+      & .button:last-child {
+        border-bottom-left-radius: @borderRadius;
+        border-top-right-radius: 0;
+      }
+      & .button:only-child {
+        border-radius: @borderRadius;
+      }
+    }
+
+  }
+}
+
 & when (@variationButtonFloated) {
   /*-------------------
          Floated

diff --git a/src/themes/default/globals/variation.variables b/src/themes/default/globals/variation.variables
@@ -26,6 +26,7 @@
 @variationButtonFluid: true;
 @variationButtonCircular: true;
 @variationButtonGroups: true;
+@variationButtonStackable: true;
 @variationButtonSizes: @variationAllSizes;
 
 /* Container */