feat(button): support vertically stacked buttons in set

carbon-design-system · Aug 4, 2020 · 20b73c6 · 20b73c6
1 parent a7c062f
commit 20b73c6
Showing 1 changed file with 12 additions and 0 deletions.
diff --git a/packages/components/src/components/button/_button.scss b/packages/components/src/components/button/_button.scss
@@ -23,6 +23,10 @@
     display: flex;
   }
 
+  .#{$prefix}--btn-set--stacked {
+    flex-direction: column;
+  }
+
   .#{$prefix}--btn-set > .#{$prefix}--btn {
     width: 100%;
     // 196px from design kit
@@ -34,6 +38,14 @@
     }
   }
 
+  .#{$prefix}--btn-set--stacked > .#{$prefix}--btn {
+    border-bottom: $button-separator;
+
+    &:last-of-type {
+      border-right: 0;
+    }
+  }
+
   .#{$prefix}--btn--secondary.#{$prefix}--btn--disabled
     + .#{$prefix}--btn--primary.#{$prefix}--btn--disabled,
   .#{$prefix}--btn--tertiary.#{$prefix}--btn--disabled