vue-nt-toast 0.1.1 → 0.1.3

package/README.md

@@ -1,5 +1,16 @@
 vue-nt-toast
 ================
+![Static Badge](https://img.shields.io/badge/vue_3-only-%234FC08D?style=for-the-badge)
+![Static Badge](https://img.shields.io/badge/javascript-%23F7DF1E?style=for-the-badge)
+![Static Badge](https://img.shields.io/badge/html-%23E34F26?style=for-the-badge&logo=html)
+![Static Badge](https://img.shields.io/badge/sass-%23CC6699?style=for-the-badge)
+![Static Badge](https://img.shields.io/badge/vite-bundler-%23646CFF?style=for-the-badge)
+![Static Badge](https://img.shields.io/badge/icon-font_awesome_4.7.0-%23528DD7?style=for-the-badge)
+![Static Badge](https://img.shields.io/badge/vue_plugin-user_custom_with_vue_3-%234FC08D?style=for-the-badge)
+
+![preview](https://github.com/noistommy/vue-nt-toast/assets/6008185/991fe4fc-1144-440d-8b20-de1ede57f0b7)
+
+
 `vue-nt-toast` is a JavaScript notification system library. It is made available through the installation of the plugin in the Vue project.
 
 It is designed to operate outside the application (the top layer) so as not to affect the application's layer system as much as possible, and provides status indications of "success", "risk", "information", "attention", and "important" depending on the type of content.
@@ -11,6 +22,12 @@ You can set multiple options across the system, including theme, location, and s
 
 테마, 위치, 스낵바 모드 등 여러 옵션을 전역에서 설정 하여 전체 시스템에 반영 하도록 할수있고, 사용자가 실행 할때 마다 변경 가능한 옵션을 적용 할수도 있습니다. 
 
+---
+
+## Demo
+
+[vue-nt-toast](https://noistommy.github.io/vue-nt-toast) demo page.
+
 ---
 ## Installation
 
@@ -24,8 +41,8 @@ You can set multiple options across the system, including theme, location, and s
 Import { createApp } from “vue”;
 // import module
 import NtToast from “vue-nt-toast”;
-# import  style css or use yours
-import “vue-nt-toast/toasr.css”;
+// import  style css or use yours
+import “vue-nt-toast/toast.css”;
  
 const app = createApp(App)
 

package/dist/toast.css

@@ -1 +1 @@
-button{border:0 none;background-color:transparent;cursor:pointer}.toast.success,.toast .success{background-color:#528e64!important;color:#fff!important;border-color:#3f6e4d!important}.toast.success:hover,.toast .success:hover{background-color:#3f6e4d}.toast.success-text,.toast .success-text{color:#528e64!important}.toast.success-bg,.toast .success-bg{background-color:#528e64!important}.toast.success-border,.toast .success-border{border-color:#3f6e4d!important}.toast.success.light,.toast .success.light{background-color:#cbe1d2!important;color:#528e64!important;border-color:#3f6e4d!important}.toast.info,.toast .info{background-color:#62b0bc!important;color:#fff!important;border-color:#4698a5!important}.toast.info:hover,.toast .info:hover{background-color:#4698a5}.toast.info-text,.toast .info-text{color:#62b0bc!important}.toast.info-bg,.toast .info-bg{background-color:#62b0bc!important}.toast.info-border,.toast .info-border{border-color:#4698a5!important}.toast.info.light,.toast .info.light{background-color:#d4e9ed!important;color:#62b0bc!important;border-color:#4698a5!important}.toast.danger,.toast .danger{background-color:#d53012!important;color:#fff!important;border-color:#a6250e!important}.toast.danger:hover,.toast .danger:hover{background-color:#a6250e}.toast.danger-text,.toast .danger-text{color:#d53012!important}.toast.danger-bg,.toast .danger-bg{background-color:#d53012!important}.toast.danger-border,.toast .danger-border{border-color:#a6250e!important}.toast.danger.light,.toast .danger.light{background-color:#fbe0da!important;color:#d53012!important;border-color:#a6250e!important}.toast.attention,.toast .attention{background-color:#ec6e00!important;color:#fff!important;border-color:#b95600!important}.toast.attention:hover,.toast .attention:hover{background-color:#b95600}.toast.attention-text,.toast .attention-text{color:#ec6e00!important}.toast.attention-bg,.toast .attention-bg{background-color:#ec6e00!important}.toast.attention-border,.toast .attention-border{border-color:#b95600!important}.toast.attention.light,.toast .attention.light{background-color:#ffe9d6!important;color:#ec6e00!important;border-color:#b95600!important}.toast.importance,.toast .importance{background-color:#fdc036!important;color:#fff!important;border-color:#fcb004!important}.toast.importance:hover,.toast .importance:hover{background-color:#fcb004}.toast.importance-text,.toast .importance-text{color:#fdc036!important}.toast.importance-bg,.toast .importance-bg{background-color:#fdc036!important}.toast.importance-border,.toast .importance-border{border-color:#fcb004!important}.toast.importance.light,.toast .importance.light{background-color:#fff3d7!important;color:#fdc036!important;border-color:#fcb004!important}.toast.red,.toast .red{background-color:#d93b3b!important;color:#fff!important;border-color:#bc2525!important}.toast.red:hover,.toast .red:hover{background-color:#bc2525}.toast.red-text,.toast .red-text{color:#d93b3b!important}.toast.red-bg,.toast .red-bg{background-color:#d93b3b!important}.toast.red-border,.toast .red-border{border-color:#d93b3b!important}.toast.red.light,.toast .red.light{background-color:#f6d1d1!important;color:#d93b3b!important;border-color:#bc2525!important}.toast.sunset,.toast .sunset{background-color:#d44d32!important;color:#fff!important;border-color:#ae3c25!important}.toast.sunset:hover,.toast .sunset:hover{background-color:#ae3c25}.toast.sunset-text,.toast .sunset-text{color:#d44d32!important}.toast.sunset-bg,.toast .sunset-bg{background-color:#d44d32!important}.toast.sunset-border,.toast .sunset-border{border-color:#d44d32!important}.toast.sunset.light,.toast .sunset.light{background-color:#f3cdc6!important;color:#d44d32!important;border-color:#ae3c25!important}.toast.orange,.toast .orange{background-color:#d95b2c!important;color:#fff!important;border-color:#b24820!important}.toast.orange:hover,.toast .orange:hover{background-color:#b24820}.toast.orange-text,.toast .orange-text{color:#d95b2c!important}.toast.orange-bg,.toast .orange-bg{background-color:#d95b2c!important}.toast.orange-border,.toast .orange-border{border-color:#d95b2c!important}.toast.orange.light,.toast .orange.light{background-color:#f4d1c3!important;color:#d95b2c!important;border-color:#b24820!important}.toast.amber,.toast .amber{background-color:#d3873f!important;color:#fff!important;border-color:#b56e2a!important}.toast.amber:hover,.toast .amber:hover{background-color:#b56e2a}.toast.amber-text,.toast .amber-text{color:#d3873f!important}.toast.amber-bg,.toast .amber-bg{background-color:#d3873f!important}.toast.amber-border,.toast .amber-border{border-color:#d3873f!important}.toast.amber.light,.toast .amber.light{background-color:#f4e2d0!important;color:#d3873f!important;border-color:#b56e2a!important}.toast.yellow,.toast .yellow{background-color:#f5b54d!important;color:#fff!important;border-color:#f2a11d!important}.toast.yellow:hover,.toast .yellow:hover{background-color:#f2a11d}.toast.yellow-text,.toast .yellow-text{color:#f5b54d!important}.toast.yellow-bg,.toast .yellow-bg{background-color:#f5b54d!important}.toast.yellow-border,.toast .yellow-border{border-color:#f5b54d!important}.toast.yellow.light,.toast .yellow.light{background-color:#fefbf6!important;color:#f5b54d!important;border-color:#f2a11d!important}.toast.citron,.toast .citron{background-color:#cac747!important;color:#fff!important;border-color:#acaa32!important}.toast.citron:hover,.toast .citron:hover{background-color:#acaa32}.toast.citron-text,.toast .citron-text{color:#cac747!important}.toast.citron-bg,.toast .citron-bg{background-color:#cac747!important}.toast.citron-border,.toast .citron-border{border-color:#cac747!important}.toast.citron.light,.toast .citron.light{background-color:#f2f1d2!important;color:#cac747!important;border-color:#acaa32!important}.toast.lime,.toast .lime{background-color:#85ab39!important;color:#fff!important;border-color:#67852c!important}.toast.lime:hover,.toast .lime:hover{background-color:#67852c}.toast.lime-text,.toast .lime-text{color:#85ab39!important}.toast.lime-bg,.toast .lime-bg{background-color:#85ab39!important}.toast.lime-border,.toast .lime-border{border-color:#85ab39!important}.toast.lime.light,.toast .lime.light{background-color:#d4e5b1!important;color:#85ab39!important;border-color:#67852c!important}.toast.green,.toast .green{background-color:#48992f!important;color:#fff!important;border-color:#367223!important}.toast.green:hover,.toast .green:hover{background-color:#367223}.toast.green-text,.toast .green-text{color:#48992f!important}.toast.green-bg,.toast .green-bg{background-color:#48992f!important}.toast.green-border,.toast .green-border{border-color:#48992f!important}.toast.green.light,.toast .green.light{background-color:#abe09a!important;color:#48992f!important;border-color:#367223!important}.toast.mint,.toast .mint{background-color:#3a874f!important;color:#fff!important;border-color:#2b633a!important}.toast.mint:hover,.toast .mint:hover{background-color:#2b633a}.toast.mint-text,.toast .mint-text{color:#3a874f!important}.toast.mint-bg,.toast .mint-bg{background-color:#3a874f!important}.toast.mint-border,.toast .mint-border{border-color:#3a874f!important}.toast.mint.light,.toast .mint.light{background-color:#9ed5ad!important;color:#3a874f!important;border-color:#2b633a!important}.toast.teal,.toast .teal{background-color:#449698!important;color:#fff!important;border-color:#347375!important}.toast.teal:hover,.toast .teal:hover{background-color:#347375}.toast.teal-text,.toast .teal-text{color:#449698!important}.toast.teal-bg,.toast .teal-bg{background-color:#449698!important}.toast.teal-border,.toast .teal-border{border-color:#449698!important}.toast.teal.light,.toast .teal.light{background-color:#b2dcdd!important;color:#449698!important;border-color:#347375!important}.toast.cyan,.toast .cyan{background-color:#4d9bcc!important;color:#fff!important;border-color:#3382b3!important}.toast.cyan:hover,.toast .cyan:hover{background-color:#3382b3}.toast.cyan-text,.toast .cyan-text{color:#4d9bcc!important}.toast.cyan-bg,.toast .cyan-bg{background-color:#4d9bcc!important}.toast.cyan-border,.toast .cyan-border{border-color:#4d9bcc!important}.toast.cyan.light,.toast .cyan.light{background-color:#d8e9f4!important;color:#4d9bcc!important;border-color:#3382b3!important}.toast.blue,.toast .blue{background-color:#4e7af8!important;color:#fff!important;border-color:#1d55f6!important}.toast.blue:hover,.toast .blue:hover{background-color:#1d55f6}.toast.blue-text,.toast .blue-text{color:#4e7af8!important}.toast.blue-bg,.toast .blue-bg{background-color:#4e7af8!important}.toast.blue-border,.toast .blue-border{border-color:#4e7af8!important}.toast.blue.light,.toast .blue.light{background-color:#fafbff!important;color:#4e7af8!important;border-color:#1d55f6!important}.toast.indigo,.toast .indigo{background-color:#5642ed!important;color:#fff!important;border-color:#2e16e6!important}.toast.indigo:hover,.toast .indigo:hover{background-color:#2e16e6}.toast.indigo-text,.toast .indigo-text{color:#5642ed!important}.toast.indigo-bg,.toast .indigo-bg{background-color:#5642ed!important}.toast.indigo-border,.toast .indigo-border{border-color:#5642ed!important}.toast.indigo.light,.toast .indigo.light{background-color:#e8e5fd!important;color:#5642ed!important;border-color:#2e16e6!important}.toast.purple,.toast .purple{background-color:#8756f3!important;color:#fff!important;border-color:#6526f0!important}.toast.purple:hover,.toast .purple:hover{background-color:#6526f0}.toast.purple-text,.toast .purple-text{color:#8756f3!important}.toast.purple-bg,.toast .purple-bg{background-color:#8756f3!important}.toast.purple-border,.toast .purple-border{border-color:#8756f3!important}.toast.purple.light,.toast .purple.light{background-color:#fdfdff!important;color:#8756f3!important;border-color:#6526f0!important}.toast.pink,.toast .pink{background-color:#bf3da0!important;color:#fff!important;border-color:#983180!important}.toast.pink:hover,.toast .pink:hover{background-color:#983180}.toast.pink-text,.toast .pink-text{color:#bf3da0!important}.toast.pink-bg,.toast .pink-bg{background-color:#bf3da0!important}.toast.pink-border,.toast .pink-border{border-color:#bf3da0!important}.toast.pink.light,.toast .pink.light{background-color:#ecc3e2!important;color:#bf3da0!important;border-color:#983180!important}.toast.rose,.toast .rose{background-color:#bb3a62!important;color:#fff!important;border-color:#942e4e!important}.toast.rose:hover,.toast .rose:hover{background-color:#942e4e}.toast.rose-text,.toast .rose-text{color:#bb3a62!important}.toast.rose-bg,.toast .rose-bg{background-color:#bb3a62!important}.toast.rose-border,.toast .rose-border{border-color:#bb3a62!important}.toast.rose.light,.toast .rose.light{background-color:#ebbdcb!important;color:#bb3a62!important;border-color:#942e4e!important}.toast-board{position:fixed;display:flex;flex-direction:column;z-index:9999;top:0}.toast-board.on-top{flex-direction:column-reverse}.toast-board.top-left{top:0;left:0}.toast-board.top-center{top:0;left:50%;transform:translate(-50%)}.toast-board.top-right{top:0;right:0}.toast-board.top-full-width{top:0;left:50%;transform:translate(-50%);width:80%}.toast-board.top-full-width .toast{width:100%}.toast-board.bottom-left{bottom:0;left:0}.toast-board.bottom-center{bottom:0;left:50%;transform:translate(-50%)}.toast-board.bottom-right{bottom:0;right:0}.toast-board.bottom-full-width{bottom:0;left:50%;transform:translate(-50%);width:80%}.toast-board.bottom-full-width .toast{width:100%}.toast-board .toast{position:relative;display:flex;justify-content:flex-start;width:400px;margin:5px;color:#333;border-radius:4px;box-shadow:2px 5px 5px #00000029;background-color:#fff;transition-property:opacity,transform;transition-duration:.5s,1s;line-height:1em;vertical-align:baseline;opacity:0;font-size:1.2em;overflow:hidden;animation:swing-off .5s ease}.toast-board .toast.fade{opacity:.95;transform:translate(0)}.toast-board .toast.swing{animation:swing .5s ease;opacity:.95}.toast-board .toast.round{border-radius:2em}.toast-board .toast .toast-contents{flex-grow:1;padding:10px 25px 10px 10px;max-width:calc(100% - 50px);font-size:.8em;overflow-wrap:break-word}.toast-board .toast .toast-contents h5{font-weight:700;font-size:1.2em;margin-bottom:10px}.toast-board .toast .toast-close{flex-shrink:1;cursor:pointer;padding:20px;line-height:1em;position:absolute;top:50%;right:0;transform:translateY(-50%);font-size:1em;color:inherit}.toast-board .toast .toast-icon{flex-shrink:1;padding:10px}.toast-board .toast.line-left .toast-contents{border-left:5px solid}.toast-board .toast.line-top .toast-contents{border-top:5px solid}@keyframes swing{0%{transform:translate(300px);opacity:0}25%{transform:translate(20px)}75%{transform:translate(-10px);opacity:.95}to{transform:translate(0)}}@keyframes swing-off{0%{transform:translate(0)}25%{transform:translate(-10px)}75%{transform:translate(20px)}to{transform:translate(300px)}}
+button{border:0 none;background-color:transparent;cursor:pointer}.toast.success,.toast .success{background-color:#528e64!important;color:#fff!important;border-color:#3f6e4d!important}.toast.success:hover,.toast .success:hover{background-color:#3f6e4d}.toast.success-text,.toast .success-text{color:#528e64!important}.toast.success-bg,.toast .success-bg{background-color:#528e64!important}.toast.success-border,.toast .success-border{border-color:#3f6e4d!important}.toast.success.light,.toast .success.light{background-color:#cbe1d2!important;color:#528e64!important;border-color:#3f6e4d!important}.toast.info,.toast .info{background-color:#62b0bc!important;color:#fff!important;border-color:#4698a5!important}.toast.info:hover,.toast .info:hover{background-color:#4698a5}.toast.info-text,.toast .info-text{color:#62b0bc!important}.toast.info-bg,.toast .info-bg{background-color:#62b0bc!important}.toast.info-border,.toast .info-border{border-color:#4698a5!important}.toast.info.light,.toast .info.light{background-color:#d4e9ed!important;color:#62b0bc!important;border-color:#4698a5!important}.toast.danger,.toast .danger{background-color:#d53012!important;color:#fff!important;border-color:#a6250e!important}.toast.danger:hover,.toast .danger:hover{background-color:#a6250e}.toast.danger-text,.toast .danger-text{color:#d53012!important}.toast.danger-bg,.toast .danger-bg{background-color:#d53012!important}.toast.danger-border,.toast .danger-border{border-color:#a6250e!important}.toast.danger.light,.toast .danger.light{background-color:#fbe0da!important;color:#d53012!important;border-color:#a6250e!important}.toast.attention,.toast .attention{background-color:#ec6e00!important;color:#fff!important;border-color:#b95600!important}.toast.attention:hover,.toast .attention:hover{background-color:#b95600}.toast.attention-text,.toast .attention-text{color:#ec6e00!important}.toast.attention-bg,.toast .attention-bg{background-color:#ec6e00!important}.toast.attention-border,.toast .attention-border{border-color:#b95600!important}.toast.attention.light,.toast .attention.light{background-color:#ffe9d6!important;color:#ec6e00!important;border-color:#b95600!important}.toast.importance,.toast .importance{background-color:#fdc036!important;color:#fff!important;border-color:#fcb004!important}.toast.importance:hover,.toast .importance:hover{background-color:#fcb004}.toast.importance-text,.toast .importance-text{color:#fdc036!important}.toast.importance-bg,.toast .importance-bg{background-color:#fdc036!important}.toast.importance-border,.toast .importance-border{border-color:#fcb004!important}.toast.importance.light,.toast .importance.light{background-color:#fff3d7!important;color:#fdc036!important;border-color:#fcb004!important}.toast.red,.toast .red{background-color:#d93b3b!important;color:#fff!important;border-color:#bc2525!important}.toast.red:hover,.toast .red:hover{background-color:#bc2525}.toast.red-text,.toast .red-text{color:#d93b3b!important}.toast.red-bg,.toast .red-bg{background-color:#d93b3b!important}.toast.red-border,.toast .red-border{border-color:#d93b3b!important}.toast.red.light,.toast .red.light{background-color:#f6d1d1!important;color:#d93b3b!important;border-color:#bc2525!important}.toast.sunset,.toast .sunset{background-color:#d44d32!important;color:#fff!important;border-color:#ae3c25!important}.toast.sunset:hover,.toast .sunset:hover{background-color:#ae3c25}.toast.sunset-text,.toast .sunset-text{color:#d44d32!important}.toast.sunset-bg,.toast .sunset-bg{background-color:#d44d32!important}.toast.sunset-border,.toast .sunset-border{border-color:#d44d32!important}.toast.sunset.light,.toast .sunset.light{background-color:#f3cdc6!important;color:#d44d32!important;border-color:#ae3c25!important}.toast.orange,.toast .orange{background-color:#d95b2c!important;color:#fff!important;border-color:#b24820!important}.toast.orange:hover,.toast .orange:hover{background-color:#b24820}.toast.orange-text,.toast .orange-text{color:#d95b2c!important}.toast.orange-bg,.toast .orange-bg{background-color:#d95b2c!important}.toast.orange-border,.toast .orange-border{border-color:#d95b2c!important}.toast.orange.light,.toast .orange.light{background-color:#f4d1c3!important;color:#d95b2c!important;border-color:#b24820!important}.toast.amber,.toast .amber{background-color:#d3873f!important;color:#fff!important;border-color:#b56e2a!important}.toast.amber:hover,.toast .amber:hover{background-color:#b56e2a}.toast.amber-text,.toast .amber-text{color:#d3873f!important}.toast.amber-bg,.toast .amber-bg{background-color:#d3873f!important}.toast.amber-border,.toast .amber-border{border-color:#d3873f!important}.toast.amber.light,.toast .amber.light{background-color:#f4e2d0!important;color:#d3873f!important;border-color:#b56e2a!important}.toast.yellow,.toast .yellow{background-color:#f5b54d!important;color:#fff!important;border-color:#f2a11d!important}.toast.yellow:hover,.toast .yellow:hover{background-color:#f2a11d}.toast.yellow-text,.toast .yellow-text{color:#f5b54d!important}.toast.yellow-bg,.toast .yellow-bg{background-color:#f5b54d!important}.toast.yellow-border,.toast .yellow-border{border-color:#f5b54d!important}.toast.yellow.light,.toast .yellow.light{background-color:#fefbf6!important;color:#f5b54d!important;border-color:#f2a11d!important}.toast.citron,.toast .citron{background-color:#cac747!important;color:#fff!important;border-color:#acaa32!important}.toast.citron:hover,.toast .citron:hover{background-color:#acaa32}.toast.citron-text,.toast .citron-text{color:#cac747!important}.toast.citron-bg,.toast .citron-bg{background-color:#cac747!important}.toast.citron-border,.toast .citron-border{border-color:#cac747!important}.toast.citron.light,.toast .citron.light{background-color:#f2f1d2!important;color:#cac747!important;border-color:#acaa32!important}.toast.lime,.toast .lime{background-color:#85ab39!important;color:#fff!important;border-color:#67852c!important}.toast.lime:hover,.toast .lime:hover{background-color:#67852c}.toast.lime-text,.toast .lime-text{color:#85ab39!important}.toast.lime-bg,.toast .lime-bg{background-color:#85ab39!important}.toast.lime-border,.toast .lime-border{border-color:#85ab39!important}.toast.lime.light,.toast .lime.light{background-color:#d4e5b1!important;color:#85ab39!important;border-color:#67852c!important}.toast.green,.toast .green{background-color:#48992f!important;color:#fff!important;border-color:#367223!important}.toast.green:hover,.toast .green:hover{background-color:#367223}.toast.green-text,.toast .green-text{color:#48992f!important}.toast.green-bg,.toast .green-bg{background-color:#48992f!important}.toast.green-border,.toast .green-border{border-color:#48992f!important}.toast.green.light,.toast .green.light{background-color:#abe09a!important;color:#48992f!important;border-color:#367223!important}.toast.mint,.toast .mint{background-color:#3a874f!important;color:#fff!important;border-color:#2b633a!important}.toast.mint:hover,.toast .mint:hover{background-color:#2b633a}.toast.mint-text,.toast .mint-text{color:#3a874f!important}.toast.mint-bg,.toast .mint-bg{background-color:#3a874f!important}.toast.mint-border,.toast .mint-border{border-color:#3a874f!important}.toast.mint.light,.toast .mint.light{background-color:#9ed5ad!important;color:#3a874f!important;border-color:#2b633a!important}.toast.teal,.toast .teal{background-color:#449698!important;color:#fff!important;border-color:#347375!important}.toast.teal:hover,.toast .teal:hover{background-color:#347375}.toast.teal-text,.toast .teal-text{color:#449698!important}.toast.teal-bg,.toast .teal-bg{background-color:#449698!important}.toast.teal-border,.toast .teal-border{border-color:#449698!important}.toast.teal.light,.toast .teal.light{background-color:#b2dcdd!important;color:#449698!important;border-color:#347375!important}.toast.cyan,.toast .cyan{background-color:#4d9bcc!important;color:#fff!important;border-color:#3382b3!important}.toast.cyan:hover,.toast .cyan:hover{background-color:#3382b3}.toast.cyan-text,.toast .cyan-text{color:#4d9bcc!important}.toast.cyan-bg,.toast .cyan-bg{background-color:#4d9bcc!important}.toast.cyan-border,.toast .cyan-border{border-color:#4d9bcc!important}.toast.cyan.light,.toast .cyan.light{background-color:#d8e9f4!important;color:#4d9bcc!important;border-color:#3382b3!important}.toast.blue,.toast .blue{background-color:#4e7af8!important;color:#fff!important;border-color:#1d55f6!important}.toast.blue:hover,.toast .blue:hover{background-color:#1d55f6}.toast.blue-text,.toast .blue-text{color:#4e7af8!important}.toast.blue-bg,.toast .blue-bg{background-color:#4e7af8!important}.toast.blue-border,.toast .blue-border{border-color:#4e7af8!important}.toast.blue.light,.toast .blue.light{background-color:#fafbff!important;color:#4e7af8!important;border-color:#1d55f6!important}.toast.indigo,.toast .indigo{background-color:#5642ed!important;color:#fff!important;border-color:#2e16e6!important}.toast.indigo:hover,.toast .indigo:hover{background-color:#2e16e6}.toast.indigo-text,.toast .indigo-text{color:#5642ed!important}.toast.indigo-bg,.toast .indigo-bg{background-color:#5642ed!important}.toast.indigo-border,.toast .indigo-border{border-color:#5642ed!important}.toast.indigo.light,.toast .indigo.light{background-color:#e8e5fd!important;color:#5642ed!important;border-color:#2e16e6!important}.toast.purple,.toast .purple{background-color:#8756f3!important;color:#fff!important;border-color:#6526f0!important}.toast.purple:hover,.toast .purple:hover{background-color:#6526f0}.toast.purple-text,.toast .purple-text{color:#8756f3!important}.toast.purple-bg,.toast .purple-bg{background-color:#8756f3!important}.toast.purple-border,.toast .purple-border{border-color:#8756f3!important}.toast.purple.light,.toast .purple.light{background-color:#fdfdff!important;color:#8756f3!important;border-color:#6526f0!important}.toast.pink,.toast .pink{background-color:#bf3da0!important;color:#fff!important;border-color:#983180!important}.toast.pink:hover,.toast .pink:hover{background-color:#983180}.toast.pink-text,.toast .pink-text{color:#bf3da0!important}.toast.pink-bg,.toast .pink-bg{background-color:#bf3da0!important}.toast.pink-border,.toast .pink-border{border-color:#bf3da0!important}.toast.pink.light,.toast .pink.light{background-color:#ecc3e2!important;color:#bf3da0!important;border-color:#983180!important}.toast.rose,.toast .rose{background-color:#bb3a62!important;color:#fff!important;border-color:#942e4e!important}.toast.rose:hover,.toast .rose:hover{background-color:#942e4e}.toast.rose-text,.toast .rose-text{color:#bb3a62!important}.toast.rose-bg,.toast .rose-bg{background-color:#bb3a62!important}.toast.rose-border,.toast .rose-border{border-color:#bb3a62!important}.toast.rose.light,.toast .rose.light{background-color:#ebbdcb!important;color:#bb3a62!important;border-color:#942e4e!important}.toast-board{position:fixed;display:flex;flex-direction:column;z-index:9999}.toast-board.on-top{flex-direction:column-reverse}.toast-board.top-left{top:0;left:0}.toast-board.top-center{top:0;left:50%;transform:translate(-50%)}.toast-board.top-right{top:0;right:0}.toast-board.top-full-width{top:0;left:50%;transform:translate(-50%);width:80%}.toast-board.top-full-width .toast{width:100%}.toast-board.bottom-left{bottom:0;left:0}.toast-board.bottom-center{bottom:0;left:50%;transform:translate(-50%)}.toast-board.bottom-right{bottom:0;right:0}.toast-board.bottom-full-width{bottom:0;left:50%;transform:translate(-50%);width:80%}.toast-board.bottom-full-width .toast{width:100%}.toast-board .toast{position:relative;display:flex;justify-content:flex-start;width:400px;margin:5px;color:#333;border-radius:4px;box-shadow:2px 5px 5px #00000029;background-color:#fff;transition-property:opacity,transform;transition-duration:.5s,1s;line-height:1em;vertical-align:baseline;opacity:0;font-size:1.2em;overflow:hidden;animation:swing-off .5s ease}.toast-board .toast.fade{opacity:.95;transform:translate(0)}.toast-board .toast.swing{animation:swing .5s ease;opacity:.95}.toast-board .toast.round{border-radius:2em}.toast-board .toast .toast-contents{flex-grow:1;padding:10px 25px 10px 10px;max-width:calc(100% - 50px);font-size:.8em;overflow-wrap:break-word}.toast-board .toast .toast-contents h5{font-weight:700;font-size:1.2em;margin-bottom:10px}.toast-board .toast .toast-close{flex-shrink:1;cursor:pointer;padding:20px;line-height:1em;position:absolute;top:50%;right:0;transform:translateY(-50%);font-size:1em;color:inherit}.toast-board .toast .toast-icon{flex-shrink:1;padding:10px}.toast-board .toast.line-left .toast-contents{border-left:5px solid}.toast-board .toast.line-top .toast-contents{border-top:5px solid}@keyframes swing{0%{transform:translate(300px);opacity:0}25%{transform:translate(20px)}75%{transform:translate(-10px);opacity:.95}to{transform:translate(0)}}@keyframes swing-off{0%{transform:translate(0)}25%{transform:translate(-10px)}75%{transform:translate(20px)}to{transform:translate(300px)}}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-nt-toast",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "description": "Toast system plugin with vue3",
   "author": "Minyoung Tommy Kim",
   "private": false,

package/src/toast.scss

@@ -100,7 +100,6 @@ $colors: (
     display: flex;
     flex-direction: column;
     z-index: 9999;
-    top: 0;
     &.on-top {
       flex-direction: column-reverse;
     }