From ed2177596c520b10e03e6f3062321d4036974d3f Mon Sep 17 00:00:00 2001
From: Razvan Stoenescu <razvan.stoenescu@gmail.com>
Date: Sun, 18 Dec 2016 13:24:56 +0200
Subject: [PATCH] feat: #224 Dialog - styling buttons

When defining buttons you can use "classes" and "style" props
---
 dev/components/global/dialog.vue        | 21 +++++++++++++++++++++
 src/components/dialog/Dialog.vue        |  5 +++--
 src/vue-components/modal/modal.ios.styl |  3 ---
 3 files changed, 24 insertions(+), 5 deletions(-)

diff --git a/dev/components/global/dialog.vue b/dev/components/global/dialog.vue
index 4c45fa29f05..39bcf87f2c4 100644
--- a/dev/components/global/dialog.vue
+++ b/dev/components/global/dialog.vue
@@ -80,6 +80,27 @@ export default {
             })
           }
         },
+        {
+          label: 'Custom CSS classes & style to buttons',
+          icon: 'format_color_fill',
+          handler () {
+            Dialog.create({
+              title: 'Confirm',
+              message: 'Custom button classes.',
+              buttons: [
+                {
+                  label: 'Disagree',
+                  classes: 'negative clear',
+                  style: 'text-decoration: underline'
+                },
+                {
+                  label: 'Agree',
+                  classes: 'positive'
+                }
+              ]
+            })
+          }
+        },
         {
           label: 'Stacked Buttons Example',
           icon: 'reorder',
diff --git a/src/components/dialog/Dialog.vue b/src/components/dialog/Dialog.vue
index 9bb7bf24737..f9e2b7fefe1 100644
--- a/src/components/dialog/Dialog.vue
+++ b/src/components/dialog/Dialog.vue
@@ -17,7 +17,7 @@
           <input type="text" class="full-width" v-model="el.model" :placeholder="el.placeholder" required>
           <label v-html="el.label"></label>
         </div>
-        
+
         <div v-if="el.type === 'password'" class="floating-label" style="margin-bottom: 10px">
           <input type="password" class="full-width" v-model="el.model" :placeholder="el.placeholder" required>
           <label v-html="el.label"></label>
@@ -99,8 +99,9 @@
     >
       <button
         v-for="button in buttons"
-        class="primary clear"
         @click="trigger(button.handler)"
+        :class="button.classes || 'primary clear'"
+        :style="button.style"
         v-html="typeof button === 'string' ? button : button.label"
       ></button>
     </div>
diff --git a/src/vue-components/modal/modal.ios.styl b/src/vue-components/modal/modal.ios.styl
index 4603505fb50..1209232e392 100644
--- a/src/vue-components/modal/modal.ios.styl
+++ b/src/vue-components/modal/modal.ios.styl
@@ -120,9 +120,6 @@ maximized-modal()
     border-radius 0
     &:last-child
       font-weight bold
-    &:hover, &:active
-      color white !important
-      background rgba(0, 0, 0, .3) !important
   &.row
     button + button
       border-left 1px solid $form-darker-color