feat(modal): stack modal buttons in small viewports

carbon-design-system · Aug 4, 2020 · 6d24a35 · 6d24a35
1 parent 59bd5d3
commit 6d24a35
Showing 1 changed file with 15 additions and 0 deletions.
diff --git a/packages/components/src/components/modal/_modal.scss b/packages/components/src/components/modal/_modal.scss
@@ -295,20 +295,35 @@
 
   .#{$prefix}--modal-footer {
     display: flex;
+    flex-direction: column;
 
     grid-row: -1/-1;
     grid-column: 1/-1;
     justify-content: flex-end;
     height: 4rem;
     margin-top: auto;
 
+    @include carbon--breakpoint(md) {
+      flex-direction: row;
+    }
+
     button.#{$prefix}--btn {
       flex: 0 1 50%;
       max-width: none;
       height: 4rem;
       margin: 0;
       padding-top: $spacing-05;
       padding-bottom: $spacing-07;
+      border-bottom: $button-separator;
+
+      @include carbon--breakpoint(md) {
+        border-right: $button-separator;
+        border-bottom: 0;
+      }
+
+      &:last-of-type {
+        border: 0;
+      }
     }
   }