From 3a0fd44a5c7f631915ca620db3ed50a3e1c3870b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20Gonz=C3=A1lez?= <mgogo@hey.com>
Date: Tue, 1 Jun 2021 07:46:59 -0500
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20(hd-modal):=20fix=20is-wide=20im?=
 =?UTF-8?q?plementation=20to=20follow=20DS=20(#741)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/HdModal.vue | 102 ++++++++++++++++++-------------------
 1 file changed, 51 insertions(+), 51 deletions(-)

diff --git a/src/components/HdModal.vue b/src/components/HdModal.vue
index 92e1063a3..ff7b80765 100644
--- a/src/components/HdModal.vue
+++ b/src/components/HdModal.vue
@@ -29,20 +29,20 @@
           }"
         >
           <slot name="footer">
-            <div
-              class="hd-modal__action"
+            <slot
               v-for="(button, name) in actions"
-              :key="`action-${name}`"
+              :name="name"
+              :value="button"
             >
-              <slot :name="name" :value="button">
-                <hd-button
-                  v-bind="button"
-                  @click="$emit('action', button)"
-                >
-                  {{ button.text }}
-                </hd-button>
-              </slot>
-            </div>
+              <hd-button
+                :key="`action-${name}`"
+                v-bind="button"
+                class="hd-modal__action"
+                @click="$emit('action', button)"
+              >
+                {{ button.text }}
+              </hd-button>
+            </slot>
           </slot>
         </footer>
 
@@ -207,7 +207,46 @@ $mobile-browser-footer-buffer: 75px;
 .hd-modal__footer {
   width: 100%;
   display: flex;
+
+  .hd-modal__action {
+    flex: 1;
+
+    &:not(:last-child) {
+      margin-right: $sp-s;
+    }
+  }
+
+  @media (min-width: $break-tablet) {
+    justify-content: flex-end;
+
+    .hd-modal__action {
+      flex: 0 1 auto;
+    }
+  }
+}
+
+.hd-modal__footer--wide {
   flex-direction: column;
+
+  .hd-modal__action {
+    &:not(:last-child) {
+      margin-right: 0;
+      margin-bottom: $sp-s;
+    }
+  }
+
+  @media (min-width: $break-tablet) {
+    flex-direction: row;
+
+    .hd-modal__action {
+      flex: 1;
+
+      &:not(:last-child) {
+        margin-right: $sp-s;
+        margin-bottom: 0;
+      }
+    }
+  }
 }
 
 .hd-modal__close-button {
@@ -242,43 +281,4 @@ $mobile-browser-footer-buffer: 75px;
     }
   }
 }
-
-.hd-modal__footer:not(.hd-modal__footer--wide) {
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-end;
-
-  @media (min-width: $break-tablet) {
-    flex-direction: row;
-    justify-content: flex-end;
-  }
-
-  .hd-modal__action {
-    display: flex;
-    flex-direction: column;
-    margin-top: $sp-s;
-
-    @media (min-width: $break-tablet) {
-      display: flex;
-      margin-top: 0;
-      margin-left: $sp-s;
-      flex-direction: column;
-    }
-  }
-}
-
-.hd-modal__footer--wide {
-  display: flex;
-  flex-direction: row;
-
-  .hd-modal__action {
-    display: flex;
-    flex: auto;
-    flex-direction: column;
-  }
-
-  .hd-modal__action:not(:first-child) {
-    margin-left: $sp-s;
-  }
-}
 </style>