vue-nt-toast 0.2.1 → 0.3.0

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}.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}.toast-board:is(.top-left,.bottom-left) .toast{animation-name:swing-reverse-off}.toast-board:is(.top-left,.bottom-left) .toast.swing{animation-name:swing-reverse}.toast-board:is(.top-center,.top-full) .toast{animation-name:pull-down-off}.toast-board:is(.top-center,.top-full) .toast.swing{animation-name:pull-down}.toast-board:is(.bottom-center,.bottom-full) .toast{animation-name:pull-up-off}.toast-board:is(.bottom-center,.bottom-full) .toast.swing{animation-name:pull-up}@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)}}@keyframes swing-reverse{0%{transform:translate(-300px);opacity:0}25%{transform:translate(-20px)}75%{transform:translate(10px);opacity:.95}to{transform:translate(0)}}@keyframes swing-reverse-off{0%{transform:translate(0)}25%{transform:translate(10px)}75%{transform:translate(-20px)}to{transform:translate(-300px)}}@keyframes pull-up{0%{transform:translateY(30px);opacity:0}25%{transform:translateY(10px)}75%{transform:translateY(-5px);opacity:.95}to{transform:translateY(0)}}@keyframes pull-up-off{0%{transform:translateY(0)}25%{transform:translateY(5px)}75%{transform:translateY(-10px)}to{transform:translateY(-30px)}}@keyframes pull-down{0%{transform:translateY(-30px);opacity:0}25%{transform:translateY(-10px)}75%{transform:translateY(5px);opacity:.95}to{transform:translateY(0)}}@keyframes pull-down-off{0%{transform:translateY(0)}25%{transform:translateY(-5px)}75%{transform:translateY(10px)}to{transform:translateY(30px)}}
+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 .toast-icon>svg{height:1em}.toast-board .toast.line-left .toast-contents{border-left:5px solid}.toast-board .toast.line-top .toast-contents{border-top:5px solid}.toast-board:is(.top-left,.bottom-left) .toast{animation-name:swing-reverse-off}.toast-board:is(.top-left,.bottom-left) .toast.swing{animation-name:swing-reverse}.toast-board:is(.top-center,.top-full) .toast{animation-name:pull-down-off}.toast-board:is(.top-center,.top-full) .toast.swing{animation-name:pull-down}.toast-board:is(.bottom-center,.bottom-full) .toast{animation-name:pull-up-off}.toast-board:is(.bottom-center,.bottom-full) .toast.swing{animation-name:pull-up}@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)}}@keyframes swing-reverse{0%{transform:translate(-300px);opacity:0}25%{transform:translate(-20px)}75%{transform:translate(10px);opacity:.95}to{transform:translate(0)}}@keyframes swing-reverse-off{0%{transform:translate(0)}25%{transform:translate(10px)}75%{transform:translate(-20px)}to{transform:translate(-300px)}}@keyframes pull-up{0%{transform:translateY(30px);opacity:0}25%{transform:translateY(10px)}75%{transform:translateY(-5px);opacity:.95}to{transform:translateY(0)}}@keyframes pull-up-off{0%{transform:translateY(0)}25%{transform:translateY(5px)}75%{transform:translateY(-10px)}to{transform:translateY(-30px)}}@keyframes pull-down{0%{transform:translateY(-30px);opacity:0}25%{transform:translateY(-10px)}75%{transform:translateY(5px);opacity:.95}to{transform:translateY(0)}}@keyframes pull-down-off{0%{transform:translateY(0)}25%{transform:translateY(-5px)}75%{transform:translateY(10px)}to{transform:translateY(30px)}}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-nt-toast",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "description": "Toast system plugin with vue3",
   "author": "Minyoung Tommy Kim",
   "private": false,
@@ -36,7 +36,6 @@
   ],
   "style": "./dist/toast.css",
   "peerDependencies": {
-    "@fortawesome/fontawesome-free": "^6.4.2",
     "vue": "^3.3.4"
   },
   "devDependencies": {
@@ -45,7 +44,6 @@
     "@vue/eslint-config-prettier": "^8.0.0",
     "eslint": "^8.46.0",
     "eslint-plugin-vue": "^9.16.1",
-    "font-awesome": "^4.7.0",
     "prettier": "^3.0.0",
     "sass": "^1.66.1",
     "vite": "^4.4.9"

package/src/index.js

@@ -1,6 +1,6 @@
 import ToastBoard from './toastBoard'
 import './toast.scss'
-import '@fortawesome/fontawesome-free/js/all.js'
+// import '@fortawesome/fontawesome-free/js/all.js'
 
 const defaultOptions = {
   useTitle: true,

package/src/toast.js

@@ -1,10 +1,12 @@
-const statusIcon = {
-  success: 'check-circle',
-  info: 'info-circle',
-  danger: 'exclamation-circle',
-  attention: 'exclamation-triangle',
-  importance: 'star'
-}
+// const statusIcon = {
+//   success: 'check-circle',
+//   info: 'info-circle',
+//   danger: 'exclamation-circle',
+//   attention: 'exclamation-triangle',
+//   importance: 'star'
+// }
+
+import { statusIconSolid } from './toastIcons'
 
 class Toast {
   constructor(type, msg, options) {
@@ -59,8 +61,9 @@ class Toast {
     if (!this.options.useIcon || this.options.theme === 'line') return
     this.icon = document.createElement('div')
     this.icon.classList.add('toast-icon')
-    const iconClass = statusIcon[this.type] || 'exclamation-circle'
-    this.icon.innerHTML = `<i class="fa fa-${iconClass}" />`
+    const iconClass = statusIconSolid[this.type] || statusIconSolid['info']
+    this.icon.innerHTML = iconClass
+    // this.icon.innerHTML = `<i class="fa fa-${iconClass}" />`
     // this.icon.innerHTML = `<img src="./icons/success.svg" />`
     // this.toast.appendChild(this.icon)
     this.toast.appendChild(this.icon)

package/src/toast.scss

@@ -216,6 +216,9 @@ $colors: (
       .toast-icon {
         flex-shrink: 1;
         padding: 10px;
+        > svg {
+          height: 1em;
+        }
       }
       &.line-left {
         .toast-contents {

package/src/toastBoard.js

@@ -25,14 +25,14 @@ class ToastBoard {
       ? null
       : setTimeout(() => this.hideToast(toastEl, interval), extendOption.timeout)
     if (extendOption.clickToClose) {
-      toastEl.onclick = () => {
+      toastEl.addEventListener('click', () => {
         this.hideToast(toastEl, interval)
-      }
+      })
     }
     if (extendOption.closeButton) {
-      closeEl.onClick = () => {
+      closeEl.addEventListener('click', () => {
         this.hideToast(toastEl, interval)
-      }
+      })
     }
   }
   getBoard(options) {
@@ -77,9 +77,11 @@ class ToastBoard {
     })
   }
   clear() {
-    if (this.board) {
+    if (this.board && this.board.parentNode) {
       this.board.remove()
+      this.board = null
     }
+    this.toastId = 0
   }
 }
 

package/src/toastIcons.js

@@ -0,0 +1,94 @@
+// toastIcons.js - SVG 아이콘 모음
+export const statusIcon = {
+  success: `
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" fill="none"/>
+      <path d="M8 12.5L10.5 15L16 9.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+    </svg>
+  `,
+  
+  info: `
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" fill="none"/>
+      <path d="M12 16V12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+      <circle cx="12" cy="8" r="1" fill="currentColor"/>
+    </svg>
+  `,
+  
+  danger: `
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" fill="none"/>
+      <path d="M12 8V12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+      <circle cx="12" cy="16" r="1" fill="currentColor"/>
+    </svg>
+  `,
+  
+  attention: `
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M12 2L2 20H22L12 2Z" stroke="currentColor" stroke-width="2" stroke-linejoin="round" fill="none"/>
+      <path d="M12 9V13" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+      <circle cx="12" cy="17" r="1" fill="currentColor"/>
+    </svg>
+  `,
+  
+  importance: `
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z" stroke="currentColor" stroke-width="2" stroke-linejoin="round" fill="none"/>
+    </svg>
+  `
+}
+
+export const statusIconSolid = {
+  success: `
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <defs>
+        <mask id="tick-cut-check" maskUnits="userSpaceOnUse">
+          <rect width="24" height="24" fill="white" />
+          <path d="M8 12.5L10.5 15L16 9.5" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+        </mask>
+      </defs>
+      <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" fill="currentColor" mask="url(#tick-cut-check)" />
+    </svg>
+  `,
+  info: `
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <defs>
+        <mask id="tick-cut-info" maskUnits="userSpaceOnUse">
+          <rect width="24" height="24" fill="white" />
+          <path d="M12 16V12" stroke="black" stroke-width="2" stroke-linecap="round"/>
+          <circle cx="12" cy="8" r="1" fill="black"/>
+        </mask>
+      </defs>
+      <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" fill="currentColor" mask="url(#tick-cut-info)"/>
+    </svg>
+  `,
+  danger: `
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <defs>
+        <mask id="tick-cut-err" maskUnits="userSpaceOnUse">
+          <rect width="24" height="24" fill="white" />
+          <path d="M12 8V12" stroke="black" stroke-width="2" stroke-linecap="round"/>
+          <circle cx="12" cy="16" r="1" fill="black"/>
+        </mask>
+      </defs>
+      <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" fill="currentColor" mask="url(#tick-cut-err)"/>
+    </svg>
+  `,
+  attention: `
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <defs>
+        <mask id="tick-cut-warning" maskUnits="userSpaceOnUse">
+          <rect width="24" height="24" fill="white" />
+          <path d="M12 8V12" stroke="black" stroke-width="2" stroke-linecap="round"/>
+          <circle cx="12" cy="16" r="1" fill="black"/>
+        </mask>
+      </defs>
+      <path d="M12 2L2 20H22L12 2Z" stroke="currentColor" stroke-width="2" stroke-linejoin="round" fill="currentColor" mask="url(#tick-cut-warning)" />
+    </svg>
+  `,
+  importance: `
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z" stroke="currentColor" stroke-width="2" stroke-linejoin="round" fill="currentColor"/>
+    </svg>
+  `
+}