@code-coaching/vuetiful 0.2.0 → 0.3.0

package/dist/styles/all.css

@@ -3020,6 +3020,129 @@ input[type='file']:not(.file-dropzone-input)::file-selector-button {
 
 /* A canned set of reusabled variant styles. */
 
+/* Imports all Transitions */
+
+.fade-150-enter-active,
+.fade-150-leave-active {
+  transition: opacity 150ms;
+}
+
+.fade-300-enter-active,
+.fade-300-leave-active {
+  transition: opacity 300ms;
+}
+
+.fade-150-enter-from,
+.fade-150-leave-to,
+.fade-300-enter-from,
+.fade-300-leave-to {
+  opacity: 0;
+}
+
+.slide-left-150-enter-active {
+  animation: slide-left 150ms;
+}
+
+.slide-left-150-leave-active {
+  animation: slide-left 150ms reverse;
+}
+
+.slide-left-300-enter-active {
+  animation: slide-left 300ms;
+}
+
+.slide-left-300-leave-active {
+  animation: slide-left 300ms reverse;
+}
+
+@keyframes slide-left {
+  0% {
+    transform: translateX(-100%);
+  }
+
+  100% {
+    transform: translateX(0);
+  }
+}
+
+.slide-top-150-enter-active {
+  animation: slide-top 150ms;
+}
+
+.slide-top-150-leave-active {
+  animation: slide-top 150ms reverse;
+}
+
+.slide-top-300-enter-active {
+  animation: slide-top 300ms;
+}
+
+.slide-top-300-leave-active {
+  animation: slide-top 300ms reverse;
+}
+
+@keyframes slide-top {
+  0% {
+    transform: translateY(-100%);
+  }
+
+  100% {
+    transform: translateY(0);
+  }
+}
+
+.slide-right-150-enter-active {
+  animation: slide-right 150ms;
+}
+
+.slide-right-150-leave-active {
+  animation: slide-right 150ms reverse;
+}
+
+.slide-right-300-enter-active {
+  animation: slide-right 300ms;
+}
+
+.slide-right-300-leave-active {
+  animation: slide-right 300ms reverse;
+}
+
+@keyframes slide-right {
+  0% {
+    transform: translateX(100%);
+  }
+
+  100% {
+    transform: translateX(0);
+  }
+}
+
+.slide-bottom-150-enter-active {
+  animation: slide-bottom 150ms;
+}
+
+.slide-bottom-150-leave-active {
+  animation: slide-bottom 150ms reverse;
+}
+
+.slide-bottom-300-enter-active {
+  animation: slide-bottom 300ms;
+}
+
+.slide-bottom-300-leave-active {
+  animation: slide-bottom 300ms reverse;
+}
+
+@keyframes slide-bottom {
+  0% {
+    transform: translateY(100%);
+  }
+
+  100% {
+    transform: translateY(0);
+  }
+}
+
 /* Imports all Component Styles */
 
 @font-face{
@@ -4947,4 +5070,4 @@ code.hljs{
   position:absolute;
   z-index:1;
   margin-top:.25rem
-}
+}

package/dist/types/directives/index.d.ts

@@ -1,2 +1,2 @@
-import vClipboard from './clipboard';
+import vClipboard from "./clipboard";
 export { vClipboard };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@code-coaching/vuetiful",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "scripts": {
     "dev": "onchange 'src/**/*.vue' 'src/**/*.ts' 'src/**/*.css' -- npm run build",
     "prebuild": "node 'scripts/intellisense.js'",

package/src/directives/index.ts

@@ -1,5 +1,3 @@
-import vClipboard from './clipboard'
+import vClipboard from "./clipboard";
 
-export {
-  vClipboard
-}
+export { vClipboard };

package/src/styles/all.css

@@ -3,19 +3,22 @@
 /* NOTE: The order shown below is required */
 
 /* Tailwind Directives */
-@import 'tailwind.css';
+@import "tailwind.css";
 
 /* Global Styles */
-@import 'core.css';
+@import "core.css";
 
 /* Typographical Settings */
-@import 'typography.css';
+@import "typography.css";
 
 /* Imports all Tailwind Elements */
-@import 'elements.css';
+@import "elements.css";
 
 /* Imports all Variant Styles */
-@import 'variants.css';
+@import "variants.css";
+
+/* Imports all Transitions */
+@import "transitions.css";
 
 /* Imports all Component Styles */
-@import '../../dist/style.css'
+@import "../../dist/style.css";

package/src/styles/transitions/fade.css

@@ -0,0 +1,14 @@
+.fade-150-enter-active,
+.fade-150-leave-active {
+  transition: opacity 150ms;
+}
+.fade-300-enter-active,
+.fade-300-leave-active {
+  transition: opacity 300ms;
+}
+.fade-150-enter-from,
+.fade-150-leave-to,
+.fade-300-enter-from,
+.fade-300-leave-to {
+  opacity: 0;
+}

package/src/styles/transitions/slide.css

@@ -0,0 +1,83 @@
+.slide-left-150-enter-active {
+  animation: slide-left 150ms;
+}
+.slide-left-150-leave-active {
+  animation: slide-left 150ms reverse;
+}
+.slide-left-300-enter-active {
+  animation: slide-left 300ms;
+}
+.slide-left-300-leave-active {
+  animation: slide-left 300ms reverse;
+}
+@keyframes slide-left {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
+
+.slide-top-150-enter-active {
+  animation: slide-top 150ms;
+}
+.slide-top-150-leave-active {
+  animation: slide-top 150ms reverse;
+}
+.slide-top-300-enter-active {
+  animation: slide-top 300ms;
+}
+.slide-top-300-leave-active {
+  animation: slide-top 300ms reverse;
+}
+@keyframes slide-top {
+  0% {
+    transform: translateY(-100%);
+  }
+  100% {
+    transform: translateY(0);
+  }
+}
+
+.slide-right-150-enter-active {
+  animation: slide-right 150ms;
+}
+.slide-right-150-leave-active {
+  animation: slide-right 150ms reverse;
+}
+.slide-right-300-enter-active {
+  animation: slide-right 300ms;
+}
+.slide-right-300-leave-active {
+  animation: slide-right 300ms reverse;
+}
+@keyframes slide-right {
+  0% {
+    transform: translateX(100%);
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
+
+.slide-bottom-150-enter-active {
+  animation: slide-bottom 150ms;
+}
+.slide-bottom-150-leave-active {
+  animation: slide-bottom 150ms reverse;
+}
+.slide-bottom-300-enter-active {
+  animation: slide-bottom 300ms;
+}
+.slide-bottom-300-leave-active {
+  animation: slide-bottom 300ms reverse;
+}
+@keyframes slide-bottom {
+  0% {
+    transform: translateY(100%);
+  }
+  100% {
+    transform: translateY(0);
+  }
+}

package/src/styles/transitions.css

@@ -0,0 +1,2 @@
+@import "transitions/fade.css";
+@import "transitions/slide.css";