@ldmjs/ui 1.0.61 → 1.0.62

package/dist/scss/_toasted.scss

@@ -1,411 +1,411 @@
-@charset "UTF-8";
-
-@use "sass:math";
-
-$vt-namespace: "Vue-Toastification" !default;
-$vt-toast-min-width: 326px !default;
-$vt-toast-max-width: 600px !default;
-$vt-toast-background: #ffffff !default;
-
-$vt-toast-min-height: 64px !default;
-$vt-toast-max-height: 800px !default;
-
-$vt-color-default: #1976d2 !default;
-$vt-text-color-default: #fff !default;
-// $vt-color-info: #2196f3 !default;
-$vt-color-info: var(--primary-l-4);
-$vt-text-color-info: #fff !default;
-// $vt-color-success: #4caf50 !default;
-$vt-color-success: var(--success);
-$vt-text-color-success: #fff !default;
-// $vt-color-warning: #ffc107 !default;
-$vt-color-warning: var(--warning-l-2);
-$vt-text-color-warning: #fff !default;
-// $vt-color-error: #ff5252 !default;
-$vt-color-error: var(--error-l-2);
-$vt-text-color-error: #fff !default;
-
-$vt-color-progress-default: linear-gradient(
-  to right,
-  #4cd964,
-  #5ac8fa,
-  #007aff,
-  #34aadc,
-  #5856d6,
-  #ff2d55
-) !default;
-
-$vt-mobile: "only screen and (max-width : 600px)" !default;
-$vt-not-mobile: "only screen and (min-width : 600px)" !default;
-$vt-font-family: "Lato", Helvetica, "Roboto", Arial, sans-serif !default;
-$vt-z-index: 9999 !default;
-
-.#{$vt-namespace}__container {
-  z-index: $vt-z-index;
-  position: fixed;
-  padding: 4px;
-  width: $vt-toast-max-width;
-  box-sizing: border-box;
-  display: flex;
-  min-height: 100%;
-  color: #fff;
-  flex-direction: column;
-  pointer-events: none;
-
-  @media #{$vt-not-mobile} {
-    &.top-left,
-    &.top-right,
-    &.top-center {
-      top: 1em;
-    }
-
-    &.bottom-left,
-    &.bottom-right,
-    &.bottom-center {
-      bottom: 1em;
-      flex-direction: column-reverse;
-    }
-
-    &.top-left,
-    &.bottom-left {
-      left: 1em;
-      .#{$vt-namespace}__toast {
-        margin-right: auto;
-      }
-      // Firefox does not apply rtl rules to containers and margins, it appears.
-      // See https://github.com/Maronato/vue-toastification/issues/179
-      @supports not (-moz-appearance:none) {
-        .#{$vt-namespace}__toast--rtl {
-          margin-right: unset;
-          margin-left: auto;
-        }
-      }
-    }
-
-    &.top-right,
-    &.bottom-right {
-      right: 1em;
-      .#{$vt-namespace}__toast {
-        margin-left: auto;
-      }
-      // Firefox does not apply rtl rules to containers and margins, it appears.
-      // See https://github.com/Maronato/vue-toastification/issues/179
-      @supports not (-moz-appearance:none) {
-        .#{$vt-namespace}__toast--rtl {
-          margin-left: unset;
-          margin-right: auto;
-        }
-      }
-    }
-
-    &.top-center,
-    &.bottom-center {
-      left: 50%;
-      margin-left: - math.div($vt-toast-max-width, 2);
-      .#{$vt-namespace}__toast {
-        margin-left: auto;
-        margin-right: auto;
-      }
-    }
-  }
-
-  @media #{$vt-mobile} {
-    width: 100vw;
-    padding: 0;
-    left: 0;
-    margin: 0;
-    .#{$vt-namespace}__toast {
-      width: 100%;
-    }
-    &.top-left,
-    &.top-right,
-    &.top-center {
-      top: 0;
-    }
-    &.bottom-left,
-    &.bottom-right,
-    &.bottom-center {
-      bottom: 0;
-      flex-direction: column-reverse;
-    }
-  }
-}
-
-.#{$vt-namespace}__toast {
-  display: inline-flex;
-  position: relative;
-  max-height: $vt-toast-max-height;
-  min-height: $vt-toast-min-height;
-  box-sizing: border-box;
-  margin-bottom: 1rem;
-  padding: 22px 24px;
-  border-radius: 8px;
-  box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.1), 0 2px 15px 0 rgba(0, 0, 0, 0.05);
-  justify-content: space-between;
-  font-family: $vt-font-family;
-  max-width: $vt-toast-max-width;
-  min-width: $vt-toast-min-width;
-  pointer-events: auto;
-  overflow: hidden;
-  // overflow: hidden + border-radius does not work properly on Safari
-  // The following magic line fixes it
-  // https://stackoverflow.com/a/58283449
-  transform: translateZ(0);
-  direction: ltr;
-  &--rtl {
-    direction: rtl;
-  }
-
-  &--default {
-    background-color: $vt-color-default;
-    color: $vt-text-color-default;
-  }
-  &--info {
-    background-color: $vt-color-info;
-    color: $vt-text-color-info;
-  }
-  &--success {
-    background-color: $vt-color-success;
-    color: $vt-text-color-success;
-  }
-  &--error {
-    background-color: $vt-color-error;
-    color: $vt-text-color-error;
-  }
-  &--warning {
-    background-color: $vt-color-warning;
-    color: $vt-text-color-warning;
-  }
-
-  @media #{$vt-mobile} {
-    border-radius: 0px;
-    margin-bottom: 0.5rem;
-  }
-
-  &-body {
-    flex: 1;
-    line-height: 24px;
-    font-size: 16px;
-    word-break: break-word;
-    white-space: pre-wrap;
-  }
-
-  &-component-body {
-    flex: 1;
-  }
-
-  &.disable-transition {
-    animation: none !important;
-  }
-}
-
-.#{$vt-namespace}__close-button {
-  font-weight: bold;
-  font-size: 24px;
-  line-height: 24px;
-  background: transparent;
-  outline: none;
-  border: none;
-  padding: 0;
-  padding-left: 10px;
-  cursor: pointer;
-  transition: 0.3s ease;
-  align-items: center;
-  color: #fff;
-  opacity: 0.3;
-  transition: visibility 0s, opacity 0.2s linear;
-  &:hover,
-  &:focus {
-    opacity: 1;
-  }
-  .#{$vt-namespace}__toast:not(:hover) &.show-on-hover {
-    opacity: 0;
-  }
-  .#{$vt-namespace}__toast--rtl & {
-    padding-left: unset;
-    padding-right: 10px;
-  }
-}
-
-@keyframes scale-x-frames {
-  0% {
-    transform: scaleX(1);
-  }
-  100% {
-    transform: scaleX(0);
-  }
-}
-
-.#{$vt-namespace}__progress-bar {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  height: 5px;
-  z-index: ($vt-z-index + 1);
-  background-color: rgba(255, 255, 255, 0.7);
-  transform-origin: left;
-  animation: scale-x-frames linear 1 forwards;
-  .#{$vt-namespace}__toast--rtl & {
-    right: 0;
-    left: unset;
-    transform-origin: right;
-  }
-}
-
-.#{$vt-namespace}__icon {
-  margin: auto 18px auto 0px;
-  background: transparent;
-  outline: none;
-  border: none;
-  padding: 0;
-  transition: 0.3s ease;
-  align-items: center;
-  width: 20px;
-  height: 100%;
-  .#{$vt-namespace}__toast--rtl & {
-    margin: auto 0px auto 18px;
-  }
-}
-
-/* ----------------------------------------------
-/* Animations
-/* ---------------------------------------------- */
-
-.#{$vt-namespace}__bounce-enter-active {
-  &.top-left,
-  &.bottom-left {
-    animation-name: bounceInLeft;
-  }
-  &.top-right,
-  &.bottom-right {
-    animation-name: bounceInRight;
-  }
-  &.top-center {
-    animation-name: bounceInDown;
-  }
-  &.bottom-center {
-    animation-name: bounceInUp;
-  }
-}
-
-.#{$vt-namespace}__bounce-leave-active:not(.disable-transition) {
-  &.top-left,
-  &.bottom-left {
-    animation-name: bounceOutLeft;
-  }
-  &.top-right,
-  &.bottom-right {
-    animation-name: bounceOutRight;
-  }
-  &.top-center {
-    animation-name: bounceOutUp;
-  }
-  &.bottom-center {
-    animation-name: bounceOutDown;
-  }
-}
-
-.#{$vt-namespace}__bounce-leave-active,
-.#{$vt-namespace}__bounce-enter-active {
-  animation-duration: 750ms;
-  animation-fill-mode: both;
-}
-
-.#{$vt-namespace}__bounce-move {
-  transition-timing-function: ease-in-out;
-  transition-property: all;
-  transition-duration: 400ms;
-}
-
-.#{$vt-namespace}__fade-enter-active {
-  &.top-left,
-  &.bottom-left {
-    animation-name: fadeInLeft;
-  }
-  &.top-right,
-  &.bottom-right {
-    animation-name: fadeInRight;
-  }
-  &.top-center {
-    animation-name: fadeInTop;
-  }
-  &.bottom-center {
-    animation-name: fadeInBottom;
-  }
-}
-
-.#{$vt-namespace}__fade-leave-active:not(.disable-transition) {
-  &.top-left,
-  &.bottom-left {
-    animation-name: fadeOutLeft;
-  }
-  &.top-right,
-  &.bottom-right {
-    animation-name: fadeOutRight;
-  }
-  &.top-center {
-    animation-name: fadeOutTop;
-  }
-  &.bottom-center {
-    animation-name: fadeOutBottom;
-  }
-}
-
-.#{$vt-namespace}__fade-leave-active,
-.#{$vt-namespace}__fade-enter-active {
-  animation-duration: 750ms;
-  animation-fill-mode: both;
-}
-
-.#{$vt-namespace}__fade-move {
-  transition-timing-function: ease-in-out;
-  transition-property: all;
-  transition-duration: 400ms;
-}
-
-.#{$vt-namespace}__slideBlurred-enter-active {
-  &.top-left,
-  &.bottom-left {
-    animation-name: slideInBlurredLeft;
-  }
-  &.top-right,
-  &.bottom-right {
-    animation-name: slideInBlurredRight;
-  }
-  &.top-center {
-    animation-name: slideInBlurredTop;
-  }
-  &.bottom-center {
-    animation-name: slideInBlurredBottom;
-  }
-}
-
-.#{$vt-namespace}__slideBlurred-leave-active:not(.disable-transition) {
-  &.top-left,
-  &.bottom-left {
-    animation-name: slideOutBlurredLeft;
-  }
-  &.top-right,
-  &.bottom-right {
-    animation-name: slideOutBlurredRight;
-  }
-  &.top-center {
-    animation-name: slideOutBlurredTop;
-  }
-  &.bottom-center {
-    animation-name: slideOutBlurredBottom;
-  }
-}
-
-.#{$vt-namespace}__slideBlurred-leave-active,
-.#{$vt-namespace}__slideBlurred-enter-active {
-  animation-duration: 750ms;
-  animation-fill-mode: both;
-}
-
-.#{$vt-namespace}__slideBlurred-move {
-  transition-timing-function: ease-in-out;
-  transition-property: all;
-  transition-duration: 400ms;
-}
+@charset "UTF-8";
+
+@use "sass:math";
+
+$vt-namespace: "Vue-Toastification" !default;
+$vt-toast-min-width: 326px !default;
+$vt-toast-max-width: 600px !default;
+$vt-toast-background: #ffffff !default;
+
+$vt-toast-min-height: 64px !default;
+$vt-toast-max-height: 800px !default;
+
+$vt-color-default: #1976d2 !default;
+$vt-text-color-default: #fff !default;
+// $vt-color-info: #2196f3 !default;
+$vt-color-info: var(--primary-l-4);
+$vt-text-color-info: #fff !default;
+// $vt-color-success: #4caf50 !default;
+$vt-color-success: var(--success);
+$vt-text-color-success: #fff !default;
+// $vt-color-warning: #ffc107 !default;
+$vt-color-warning: var(--warning-l-2);
+$vt-text-color-warning: #fff !default;
+// $vt-color-error: #ff5252 !default;
+$vt-color-error: var(--error-l-2);
+$vt-text-color-error: #fff !default;
+
+$vt-color-progress-default: linear-gradient(
+  to right,
+  #4cd964,
+  #5ac8fa,
+  #007aff,
+  #34aadc,
+  #5856d6,
+  #ff2d55
+) !default;
+
+$vt-mobile: "only screen and (max-width : 600px)" !default;
+$vt-not-mobile: "only screen and (min-width : 600px)" !default;
+$vt-font-family: "Lato", Helvetica, "Roboto", Arial, sans-serif !default;
+$vt-z-index: 9999 !default;
+
+.#{$vt-namespace}__container {
+  z-index: $vt-z-index;
+  position: fixed;
+  padding: 4px;
+  width: $vt-toast-max-width;
+  box-sizing: border-box;
+  display: flex;
+  min-height: 100%;
+  color: #fff;
+  flex-direction: column;
+  pointer-events: none;
+
+  @media #{$vt-not-mobile} {
+    &.top-left,
+    &.top-right,
+    &.top-center {
+      top: 1em;
+    }
+
+    &.bottom-left,
+    &.bottom-right,
+    &.bottom-center {
+      bottom: 1em;
+      flex-direction: column-reverse;
+    }
+
+    &.top-left,
+    &.bottom-left {
+      left: 1em;
+      .#{$vt-namespace}__toast {
+        margin-right: auto;
+      }
+      // Firefox does not apply rtl rules to containers and margins, it appears.
+      // See https://github.com/Maronato/vue-toastification/issues/179
+      @supports not (-moz-appearance:none) {
+        .#{$vt-namespace}__toast--rtl {
+          margin-right: unset;
+          margin-left: auto;
+        }
+      }
+    }
+
+    &.top-right,
+    &.bottom-right {
+      right: 1em;
+      .#{$vt-namespace}__toast {
+        margin-left: auto;
+      }
+      // Firefox does not apply rtl rules to containers and margins, it appears.
+      // See https://github.com/Maronato/vue-toastification/issues/179
+      @supports not (-moz-appearance:none) {
+        .#{$vt-namespace}__toast--rtl {
+          margin-left: unset;
+          margin-right: auto;
+        }
+      }
+    }
+
+    &.top-center,
+    &.bottom-center {
+      left: 50%;
+      margin-left: - math.div($vt-toast-max-width, 2);
+      .#{$vt-namespace}__toast {
+        margin-left: auto;
+        margin-right: auto;
+      }
+    }
+  }
+
+  @media #{$vt-mobile} {
+    width: 100vw;
+    padding: 0;
+    left: 0;
+    margin: 0;
+    .#{$vt-namespace}__toast {
+      width: 100%;
+    }
+    &.top-left,
+    &.top-right,
+    &.top-center {
+      top: 0;
+    }
+    &.bottom-left,
+    &.bottom-right,
+    &.bottom-center {
+      bottom: 0;
+      flex-direction: column-reverse;
+    }
+  }
+}
+
+.#{$vt-namespace}__toast {
+  display: inline-flex;
+  position: relative;
+  max-height: $vt-toast-max-height;
+  min-height: $vt-toast-min-height;
+  box-sizing: border-box;
+  margin-bottom: 1rem;
+  padding: 22px 24px;
+  border-radius: 8px;
+  box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.1), 0 2px 15px 0 rgba(0, 0, 0, 0.05);
+  justify-content: space-between;
+  font-family: $vt-font-family;
+  max-width: $vt-toast-max-width;
+  min-width: $vt-toast-min-width;
+  pointer-events: auto;
+  overflow: hidden;
+  // overflow: hidden + border-radius does not work properly on Safari
+  // The following magic line fixes it
+  // https://stackoverflow.com/a/58283449
+  transform: translateZ(0);
+  direction: ltr;
+  &--rtl {
+    direction: rtl;
+  }
+
+  &--default {
+    background-color: $vt-color-default;
+    color: $vt-text-color-default;
+  }
+  &--info {
+    background-color: $vt-color-info;
+    color: $vt-text-color-info;
+  }
+  &--success {
+    background-color: $vt-color-success;
+    color: $vt-text-color-success;
+  }
+  &--error {
+    background-color: $vt-color-error;
+    color: $vt-text-color-error;
+  }
+  &--warning {
+    background-color: $vt-color-warning;
+    color: $vt-text-color-warning;
+  }
+
+  @media #{$vt-mobile} {
+    border-radius: 0px;
+    margin-bottom: 0.5rem;
+  }
+
+  &-body {
+    flex: 1;
+    line-height: 24px;
+    font-size: 16px;
+    word-break: break-word;
+    white-space: pre-wrap;
+  }
+
+  &-component-body {
+    flex: 1;
+  }
+
+  &.disable-transition {
+    animation: none !important;
+  }
+}
+
+.#{$vt-namespace}__close-button {
+  font-weight: bold;
+  font-size: 24px;
+  line-height: 24px;
+  background: transparent;
+  outline: none;
+  border: none;
+  padding: 0;
+  padding-left: 10px;
+  cursor: pointer;
+  transition: 0.3s ease;
+  align-items: center;
+  color: #fff;
+  opacity: 0.3;
+  transition: visibility 0s, opacity 0.2s linear;
+  &:hover,
+  &:focus {
+    opacity: 1;
+  }
+  .#{$vt-namespace}__toast:not(:hover) &.show-on-hover {
+    opacity: 0;
+  }
+  .#{$vt-namespace}__toast--rtl & {
+    padding-left: unset;
+    padding-right: 10px;
+  }
+}
+
+@keyframes scale-x-frames {
+  0% {
+    transform: scaleX(1);
+  }
+  100% {
+    transform: scaleX(0);
+  }
+}
+
+.#{$vt-namespace}__progress-bar {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 5px;
+  z-index: ($vt-z-index + 1);
+  background-color: rgba(255, 255, 255, 0.7);
+  transform-origin: left;
+  animation: scale-x-frames linear 1 forwards;
+  .#{$vt-namespace}__toast--rtl & {
+    right: 0;
+    left: unset;
+    transform-origin: right;
+  }
+}
+
+.#{$vt-namespace}__icon {
+  margin: auto 18px auto 0px;
+  background: transparent;
+  outline: none;
+  border: none;
+  padding: 0;
+  transition: 0.3s ease;
+  align-items: center;
+  width: 20px;
+  height: 100%;
+  .#{$vt-namespace}__toast--rtl & {
+    margin: auto 0px auto 18px;
+  }
+}
+
+/* ----------------------------------------------
+/* Animations
+/* ---------------------------------------------- */
+
+.#{$vt-namespace}__bounce-enter-active {
+  &.top-left,
+  &.bottom-left {
+    animation-name: bounceInLeft;
+  }
+  &.top-right,
+  &.bottom-right {
+    animation-name: bounceInRight;
+  }
+  &.top-center {
+    animation-name: bounceInDown;
+  }
+  &.bottom-center {
+    animation-name: bounceInUp;
+  }
+}
+
+.#{$vt-namespace}__bounce-leave-active:not(.disable-transition) {
+  &.top-left,
+  &.bottom-left {
+    animation-name: bounceOutLeft;
+  }
+  &.top-right,
+  &.bottom-right {
+    animation-name: bounceOutRight;
+  }
+  &.top-center {
+    animation-name: bounceOutUp;
+  }
+  &.bottom-center {
+    animation-name: bounceOutDown;
+  }
+}
+
+.#{$vt-namespace}__bounce-leave-active,
+.#{$vt-namespace}__bounce-enter-active {
+  animation-duration: 750ms;
+  animation-fill-mode: both;
+}
+
+.#{$vt-namespace}__bounce-move {
+  transition-timing-function: ease-in-out;
+  transition-property: all;
+  transition-duration: 400ms;
+}
+
+.#{$vt-namespace}__fade-enter-active {
+  &.top-left,
+  &.bottom-left {
+    animation-name: fadeInLeft;
+  }
+  &.top-right,
+  &.bottom-right {
+    animation-name: fadeInRight;
+  }
+  &.top-center {
+    animation-name: fadeInTop;
+  }
+  &.bottom-center {
+    animation-name: fadeInBottom;
+  }
+}
+
+.#{$vt-namespace}__fade-leave-active:not(.disable-transition) {
+  &.top-left,
+  &.bottom-left {
+    animation-name: fadeOutLeft;
+  }
+  &.top-right,
+  &.bottom-right {
+    animation-name: fadeOutRight;
+  }
+  &.top-center {
+    animation-name: fadeOutTop;
+  }
+  &.bottom-center {
+    animation-name: fadeOutBottom;
+  }
+}
+
+.#{$vt-namespace}__fade-leave-active,
+.#{$vt-namespace}__fade-enter-active {
+  animation-duration: 750ms;
+  animation-fill-mode: both;
+}
+
+.#{$vt-namespace}__fade-move {
+  transition-timing-function: ease-in-out;
+  transition-property: all;
+  transition-duration: 400ms;
+}
+
+.#{$vt-namespace}__slideBlurred-enter-active {
+  &.top-left,
+  &.bottom-left {
+    animation-name: slideInBlurredLeft;
+  }
+  &.top-right,
+  &.bottom-right {
+    animation-name: slideInBlurredRight;
+  }
+  &.top-center {
+    animation-name: slideInBlurredTop;
+  }
+  &.bottom-center {
+    animation-name: slideInBlurredBottom;
+  }
+}
+
+.#{$vt-namespace}__slideBlurred-leave-active:not(.disable-transition) {
+  &.top-left,
+  &.bottom-left {
+    animation-name: slideOutBlurredLeft;
+  }
+  &.top-right,
+  &.bottom-right {
+    animation-name: slideOutBlurredRight;
+  }
+  &.top-center {
+    animation-name: slideOutBlurredTop;
+  }
+  &.bottom-center {
+    animation-name: slideOutBlurredBottom;
+  }
+}
+
+.#{$vt-namespace}__slideBlurred-leave-active,
+.#{$vt-namespace}__slideBlurred-enter-active {
+  animation-duration: 750ms;
+  animation-fill-mode: both;
+}
+
+.#{$vt-namespace}__slideBlurred-move {
+  transition-timing-function: ease-in-out;
+  transition-property: all;
+  transition-duration: 400ms;
+}