style: update notyf !

src/styles/_notyf-colors.scss

@@ -1,3 +0,0 @@
-// sass-lint:disable final-newline empty-line-between-blocks class-name-format no-url-protocols no-url-domains nesting-depth
-$red-notyf: #ed3d3d;
-$green-notyf: #3dc763;

src/styles/index.scss

@@ -4,7 +4,6 @@
 @import './variables';
 @import '~bulma';
 @import '~bulma-pricingtable';
-@import './notyf';
 @import './transitions';
 
 :root {

src/styles/notyf.scss

@@ -1,196 +0,0 @@
-// sass-lint:disable final-newline empty-line-between-blocks class-name-format no-url-protocols no-url-domains nesting-depth
-@import './notyf-colors';
-@import './variables';
-@keyframes fadeinup {
-  0% {
-    bottom: -15px;
-    margin-top: 0;
-    max-height: 0;
-    max-width: 0;
-    opacity: 0;
-  }
-  30% {
-    bottom: -3px;
-    opacity: .8;
-  }
-  100% {
-    bottom: 0;
-    margin-top: 12px;
-    max-height: 200px;
-    max-width: 420px;
-    opacity: 1;
-  }
-}
-
-@keyframes fadeoutdown {
-  0% {
-    bottom: 0;
-    opacity: 1;
-  }
-  30% {
-    bottom: -3px;
-    opacity: .2;
-  }
-  100% {
-    bottom: -15px;
-    opacity: 0;
-  }
-}
-
-@keyframes appear {
-  0% {
-    opacity: 0;
-  }
-  30% {
-    opacity: .5;
-  }
-  100% {
-    opacity: .6;
-  }
-}
-
-@keyframes disappear {
-  0% {
-    opacity: .6;
-  }
-  30% {
-    opacity: .1;
-  }
-  100% {
-    opacity: 0;
-  }
-}
-
-.notyf__icon--alert,
-.notyf__icon--confirm {
-  background: white;
-  border-radius: 50%;
-  display: block;
-  height: 21px;
-  margin: 0 auto;
-  position: relative;
-  width: 21px;
-}
-
-.notyf__icon--alert {
-  &::after,
-  &::before {
-    background: $red-notyf;
-    border-radius: 3px;
-    content: '';
-    display: block;
-    left: 9px;
-    position: absolute;
-    width: 3px;
-  }
-  &::after {
-    height: 3px;
-    top: 14px;
-  }
-  &::before {
-    height: 8px;
-    top: 4px;
-  }
-}
-
-.notyf__icon--confirm {
-  &::after,
-  &::before {
-    background: $primary;
-    border-radius: 3px;
-    content: '';
-    display: block;
-    position: absolute;
-    width: 3px;
-  }
-  &::after {
-    height: 6px;
-    left: 6px;
-    top: 9px;
-    transform: rotate(-45deg);
-  }
-  &::before {
-    height: 11px;
-    left: 10px;
-    top: 5px;
-    transform: rotate(45deg);
-  }
-}
-
-.notyf__toast {
-  animation: fadeinup .3s forwards;
-  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .45);
-  display: block;
-  overflow: hidden;
-  padding-right: 13px;
-  position: relative;
-  &.notyf--alert {
-    background: $red-notyf;
-  }
-  &.notyf--confirm {
-    background: $primary;
-  }
-  &.notyf--disappear {
-    animation: fadeoutdown .3s 1 forwards;
-    animation-delay: .25s;
-    .notyf__message {
-      animation: fadeoutdown .3s 1 forwards;
-      animation-delay: .1s;
-      opacity: 1;
-    }
-    .notyf__icon {
-      animation: disappear .3s 1 forwards;
-      opacity: 1;
-    }
-  }
-}
-
-.notyf__wrapper {
-  border-radius: 3px;
-  display: table;
-  padding-bottom: 20px;
-  padding-right: 15px;
-  padding-top: 20px;
-  width: 100%;
-}
-
-.notyf__icon {
-  animation: appear .5s forwards;
-  animation-delay: .25s;
-  display: table-cell;
-  font-size: 1.3em;
-  opacity: 0;
-  text-align: center;
-  vertical-align: middle;
-  width: 20%;
-}
-
-.notyf__message {
-  animation: fadeinup .3s forwards;
-  animation-delay: .15s;
-  display: table-cell;
-  opacity: 0;
-  position: relative;
-  vertical-align: middle;
-  width: 80%;
-}
-
-.notyf {
-  bottom: 20px;
-  color: white;
-  position: fixed;
-  right: 30px;
-  width: 20%;
-  z-index: 9999;
-}
-
-// Small screens
-@media only screen and (max-width: 736px) {
-  .notyf__container {
-    display: block;
-    left: 0;
-    margin: 0 auto;
-    right: 0;
-    width: 90%;
-  }
-}