feat(modals): close icon, resolves epicmaxco#207

wsenfuma · May 10, 2018 · d39c9b6 · d39c9b6
1 parent 86b03a6
commit d39c9b6
Showing 1 changed file with 17 additions and 0 deletions.
diff --git a/src/vuestic-theme/vuestic-components/vuestic-modal/VuesticModal.vue b/src/vuestic-theme/vuestic-components/vuestic-modal/VuesticModal.vue
@@ -11,6 +11,12 @@
                   <div class="modal-title">
                     <slot name="title"></slot>
                   </div>
+
+                  <i
+                    class="ion ion-md-close close-modal"
+                    v-if="closeIconShown"
+                    @click.prevent="cancel"
+                  />
                 </slot>
               </div>
               <!--Container-->
@@ -69,6 +75,10 @@
         type: String,
         default: 'btn btn-secondary'
       },
+      closeIconShown: {
+        type: Boolean,
+        default: true
+      },
       okDisabled: {
         type: Boolean,
         default: false
@@ -182,6 +192,13 @@
       align-items: center;
     }
 
+    .close-modal {
+      margin-left: 1rem;
+      font-size: $font-size-large;
+      line-height: $font-size-large;
+      cursor: pointer;
+    }
+
     .modal-content {
       border-radius: $modal-content-border-radius;
     }