feat(vuestic modal): using .vuestic-modal class instead of scoped sty…

…les for better slots styling
feedju · Apr 13, 2018 · b0ed984 · b0ed984
1 parent 3c8321e
commit b0ed984
Showing 1 changed file with 73 additions and 66 deletions.
diff --git a/src/vuestic-theme/vuestic-components/vuestic-modal/VuesticModal.vue b/src/vuestic-theme/vuestic-components/vuestic-modal/VuesticModal.vue
@@ -1,34 +1,36 @@
 <template>
-  <transition name="modal" :duration="duration">
-    <div v-show="show" class="modal-container">
-      <div class="modal" @click.self="clickMask">
-        <div class="modal-dialog" :class="modalClass">
-          <div class="modal-content">
-            <!--Header-->
-            <div class="modal-header">
-              <slot name="header">
-                <div class="modal-title">
-                  <slot name="title"></slot>
-                </div>
-              </slot>
-            </div>
-            <!--Container-->
-            <div class="modal-body">
-              <slot></slot>
-            </div>
-            <!--Footer-->
-            <div class="modal-footer">
-              <slot name="footer">
-                <button type="button" :class="okClass" @click="ok" :disabled="okDisabled">{{okText}}</button>
-                <button type="button" :class="cancelClass" @click="cancel" :disabled="cancelDisabled">{{cancelText}}</button>
-              </slot>
+  <div class="vuestic-modal">
+    <transition name="modal" :duration="duration">
+      <div v-show="show" class="modal-container">
+        <div class="modal" @click.self="clickMask">
+          <div class="modal-dialog" :class="modalClass">
+            <div class="modal-content">
+              <!--Header-->
+              <div class="modal-header">
+                <slot name="header">
+                  <div class="modal-title">
+                    <slot name="title"></slot>
+                  </div>
+                </slot>
+              </div>
+              <!--Container-->
+              <div class="modal-body">
+                <slot></slot>
+              </div>
+              <!--Footer-->
+              <div class="modal-footer">
+                <slot name="footer">
+                  <button type="button" :class="okClass" @click="ok" :disabled="okDisabled">{{okText}}</button>
+                  <button type="button" :class="cancelClass" @click="cancel" :disabled="cancelDisabled">{{cancelText}}</button>
+                </slot>
+              </div>
             </div>
           </div>
         </div>
+        <div class="modal-backdrop"></div>
       </div>
-      <div class="modal-backdrop"></div>
-    </div>
-  </transition>
+    </transition>
+  </div>
 </template>
 
 <script>
@@ -138,59 +140,64 @@
   }
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
   @import "../../../sass/_variables.scss";
   @import "~bootstrap/scss/functions";
   @import "~bootstrap/scss/variables";
 
-  // For Transitioning
-  .modal {
-    display: block;
-  }
+  .vuestic-modal {
+    height: 0;
+    width: 0;
 
-  .modal-dialog, .modal-backdrop {
-    transition: all .5s ease;
-  }
+    // For Transitioning
+    .modal {
+      display: block;
+    }
 
-  .modal-enter .modal-dialog, .modal-leave-active .modal-dialog {
-    opacity: 0;
-    transform: translateY(-30%);
-  }
+    .modal-dialog, .modal-backdrop {
+      transition: all .5s ease;
+    }
 
-  .modal-enter .modal-backdrop, .modal-leave-active .modal-backdrop {
-    opacity: 0;
-  }
+    .modal-enter .modal-dialog, .modal-leave-active .modal-dialog {
+      opacity: 0;
+      transform: translateY(-30%);
+    }
 
-  .modal-backdrop {
-    opacity: 0.5;
-  }
+    .modal-enter .modal-backdrop, .modal-leave-active .modal-backdrop {
+      opacity: 0;
+    }
 
-  //Modal styles
+    .modal-backdrop {
+      opacity: 0.5;
+    }
 
-  .modal-header {
-    height: $modal-header-height;
-    padding: $modal-header-padding-y $modal-header-padding-x;
-    border-bottom: $modal-header-border;
-    font-size: $font-size-larger;
-    display: flex;
-    align-items: center;
-  }
+    //Modal styles
 
-  .modal-content {
-    border-radius: $modal-content-border-radius;
-  }
+    .modal-header {
+      height: $modal-header-height;
+      padding: $modal-header-padding-y $modal-header-padding-x;
+      border-bottom: $modal-header-border;
+      font-size: $font-size-larger;
+      display: flex;
+      align-items: center;
+    }
 
-  .modal-footer {
-    justify-content: center;
-    padding: 0 $modal-inner-padding;
-    padding-bottom: calc(#{$modal-inner-padding} - #{$modal-footer-btns-padding-bottom});
-    flex-wrap: wrap;
-    .btn {
-      margin: 0 $modal-footer-btns-margin-x $modal-footer-btns-padding-bottom $modal-footer-btns-margin-x;
+    .modal-content {
+      border-radius: $modal-content-border-radius;
     }
-  }
 
-  .modal-dialog {
-    box-shadow: $modal-content-box-shadow-sm-up;
+    .modal-footer {
+      justify-content: center;
+      padding: 0 $modal-inner-padding;
+      padding-bottom: calc(#{$modal-inner-padding} - #{$modal-footer-btns-padding-bottom});
+      flex-wrap: wrap;
+      .btn {
+        margin: 0 $modal-footer-btns-margin-x $modal-footer-btns-padding-bottom $modal-footer-btns-margin-x;
+      }
+    }
+
+    .modal-dialog {
+      box-shadow: $modal-content-box-shadow-sm-up;
+    }
   }
 </style>