Merge pull request #28 from mesqueeb/fix/prevent-css-polution

fix: prevent global CSS pollution

Author: jprodrigues70

src/Toaster.vue

@@ -5,7 +5,7 @@
   >
     <div
       v-show="isActive"
-      :class="['c-toast', `c-toast--${type}`, `c-toast--${position}`]"
+      :class="['vue-toaster', `vue-toaster--${type}`, `vue-toaster--${position}`]"
       @mouseover="toggleTimer(true)"
       @mouseleave="toggleTimer(false)"
       @click="click"
@@ -92,20 +92,20 @@ export default {
   },
   methods: {
     createParents() {
-      this.parentTop = document.querySelector('.c-toast-container--top')
-      this.parentBottom = document.querySelector('.c-toast-container--bottom')
+      this.parentTop = document.querySelector('.vue-toaster-container--top')
+      this.parentBottom = document.querySelector('.vue-toaster-container--bottom')
 
       if (this.parentTop && this.parentBottom) return
 
       if (!this.parentTop) {
         this.parentTop = document.createElement('div')
-        this.parentTop.className = 'c-toast-container c-toast-container--top'
+        this.parentTop.className = 'vue-toaster-container vue-toaster-container--top'
       }
 
       if (!this.parentBottom) {
         this.parentBottom = document.createElement('div')
         this.parentBottom.className =
-          'c-toast-container c-toast-container--bottom'
+          'vue-toaster-container vue-toaster-container--bottom'
       }
     },
     setDefaultCss() {
@@ -180,12 +180,12 @@ export default {
       return definePosition(
         this.position,
         {
-          enter: 'fadeInDown',
-          leave: 'fadeOut'
+          enter: 'vue-toaster-fade-in-down',
+          leave: 'vue-toaster-fade-out'
         },
         {
-          enter: 'fadeInUp',
-          leave: 'fadeOut'
+          enter: 'vue-toaster-fade-in-up',
+          leave: 'vue-toaster-fade-out'
         }
       )
     }
@@ -195,6 +195,7 @@ export default {
   }
 }
 </script>
+
 <style lang="stylus">
 @import './themes/default/index.styl'
 .v--default-css

src/themes/default/animations.styl

@@ -1,44 +1,44 @@
 // Animations are taken from animate.css
 // https://daneden.github.io/animate.css
 
-@keyframes fadeOut
+@keyframes vue-toaster-fade-out
   from
     opacity 1
   to
     opacity 0
 
-.fadeOut
-  animation-name fadeOut
+.vue-toaster-fade-out
+  animation-name vue-toaster-fade-out
 
-@keyframes fadeInDown
+@keyframes vue-toaster-fade-in-down
   from
     opacity .5
     transform translate3d(0, -100%, 0)
   to
     opacity 1
     transform none
 
-.fadeInDown
-  animation-name fadeInDown
+.vue-toaster-fade-in-down
+  animation-name vue-toaster-fade-in-down
 
-@keyframes fadeInUp
+@keyframes vue-toaster-fade-in-up
   from
     opacity .5
     transform translate3d(0, 100%, 0)
   to
     opacity 1
     transform none
 
-.fadeInUp
-  animation-name fadeInUp
+.vue-toaster-fade-in-up
+  animation-name vue-toaster-fade-in-up
 
 // VUE
 
-.fade-enter-active
+.vue-toaster-fade-enter-active
   transition opacity 300ms ease-in
-.fade-leave-active
+.vue-toaster-fade-leave-active
   transition opacity 150ms ease-out
 
-.fade-enter,
-.fade-leave-to
+.vue-toaster-fade-enter,
+.vue-toaster-fade-leave-to
   opacity 0

src/themes/default/colors.styl

@@ -1,3 +1,3 @@
 for key, value in $toast-colors
-  .c-toast--{key}
+  .vue-toaster--{key}
     background-color value

src/themes/default/toast-container.styl

@@ -1,4 +1,4 @@
-.c-toast-container
+.vue-toaster-container
   position fixed
   display flex
   top 0

src/themes/default/toast-positions.styl

@@ -1,4 +1,4 @@
-.c-toast
+.vue-toaster
   &--top, &--bottom
     align-self center
 

src/themes/default/toast.styl

@@ -1,4 +1,4 @@
-.c-toast
+.vue-toaster
   display grid
   align-items center
   animation-duration 150ms