@craftsjs/alert 4.0.0 → 5.0.0

package/_craftsjs-alert.theme.scss

@@ -1,297 +1,297 @@
-@mixin alert-info($variables) {
-    .alert-icon-info {
-      display: block;
-      border-color: map-get($variables, color-info) ;
-
-      &::before {
-        content: "";
-        position: absolute;
-        width: 5px;
-        height: 29px;
-        left: 50%;
-        bottom: 17px;
-        border-radius: 2px;
-        margin-left: -2px;
-        background-color: map-get($variables, color-info);
-      }
-      &::after {
-        content: "";
-        position: absolute;
-        width: 7px;
-        height: 7px;
-        border-radius: 50%;
-        margin-left: -3px;
-        top: 19px;
-        background-color: map-get($variables, color-info);
-        left: 50%;
-      }
-    }
-}
-@mixin alert-success($variables) {
-
-    $green-light: rgba(165, 220, 134, 0.2);
-
-    .alert-icon-success {
-      border-color: map-get($variables, color-success);
-      display: block;
-      margin: 30px auto;
-
-      &::before,
-      &::after {
-        content: '';
-        border-radius: 50%;
-        position: absolute;
-        width: 65px;
-        height: 120px;
-        background: white;
-        transform: rotate(45deg);
-      }
-
-      &::before {
-        border-radius: 120px 0 0 120px;
-        top: -7px;
-        left: -33px;
-        transform: rotate(-45deg);
-        transform-origin: 60px 60px;
-      }
-
-      &::after {
-        border-radius: 0 120px 120px 0;
-        top: -11px;
-        left: 30px;
-        transform: rotate(-45deg);
-        transform-origin: 0px 60px;
-        animation: rotatePlaceholder 4.25s ease-in;
-      }
-
-      &-ring {
-        width: 80px;
-        height: 80px;
-        border: 4px solid $green-light;
-        border-radius: 50%;
-        box-sizing: content-box;
-        position: absolute;
-        left: -4px;
-        top: -4px;
-        z-index: 2;
-      }
-
-      &-hide-corners {
-        width: 5px;
-        height: 90px;
-        background-color: map-get($variables, text);
-        padding: 1px;
-        position: absolute;
-        left: 28px;
-        top: 8px;
-        z-index: 1;
-        transform: rotate(-45deg);
-      }
-
-      &-line {
-        height: 5px;
-        background-color: map-get($variables, color-success);
-        display: block;
-        border-radius: 2px;
-        position: absolute;
-        z-index: 2;
-
-        &-tip {
-          width: 25px;
-          left: 14px;
-          top: 46px;
-          transform: rotate(45deg);
-          animation: animateSuccessTip 0.75s;
-        }
-        &-long {
-          width: 47px;
-          right: 8px;
-          top: 38px;
-          transform: rotate(-45deg);
-          animation: animateSuccessLong 0.75s;
-        }
-      }
-    }
-
-    @keyframes rotatePlaceholder {
-      0% {
-        transform: rotate(-45deg);
-      }
-      5% {
-        transform: rotate(-45deg);
-      }
-      12% {
-        transform: rotate(-405deg);
-      }
-      100% {
-        transform: rotate(-405deg);
-      }
-    }
-
-    @keyframes animateSuccessTip {
-      0% {
-        width: 0;
-        left: 1px;
-        top: 19px;
-      }
-      54% {
-        width: 0;
-        left: 1px;
-        top: 19px;
-      }
-      70% {
-        width: 50px;
-        left: -8px;
-        top: 37px;
-      }
-      84% {
-        width: 17px;
-        left: 21px;
-        top: 48px;
-      }
-      100% {
-        width: 25px;
-        left: 14px;
-        top: 45px;
-      }
-    }
-
-    @keyframes animateSuccessLong {
-      0% {
-        width: 0;
-        right: 46px;
-        top: 54px;
-      }
-      65% {
-        width: 0;
-        right: 46px;
-        top: 54px;
-      }
-      84% {
-        width: 55px;
-        right: 0px;
-        top: 35px;
-      }
-      100% {
-        width: 47px;
-        right: 8px;
-        top: 38px;
-      }
-    }
-}
-
-@mixin alert-error($variables) {
-
-    .alert-icon-error {
-      border-color: map-get($variables, color-danger);
-      animation: animateErrorIcon 0.5s;
-      display: block;
-
-      &-x-mark {
-        position: relative;
-        display: block;
-        animation: animateXMark 0.5s;
-      }
-
-      &-line {
-        position: absolute;
-        height: 5px;
-        width: 47px;
-        background-color: map-get($variables, color-danger);
-        display: block;
-        top: 37px;
-        border-radius: 2px;
-
-        &-left {
-          transform: rotate(45deg);
-          left: 17px;
-        }
-
-        &-right {
-          transform: rotate(-45deg);
-          transform: rotate(-45deg);
-          right: 16px;
-        }
-      }
-    }
-
-    @keyframes animateErrorIcon {
-      from {
-        transform: rotateX(100deg);
-        opacity: 0;
-      }
-      to {
-        transform: rotateX(0deg);
-        opacity: 1;
-      }
-    }
-
-    @keyframes animateXMark {
-      0% {
-        transform: scale(0.4);
-        margin-top: 26px;
-        opacity: 0;
-      }
-      50% {
-        transform: scale(0.4);
-        margin-top: 26px;
-        opacity: 0;
-      }
-      80% {
-        transform: scale(1.15);
-        margin-top: -6px;
-      }
-      100% {
-        transform: scale(1);
-        margin-top: 0;
-        opacity: 1;
-      }
-    }
-}
-
-@mixin alert-warning($variables) {
-    .alert-icon-warning {
-      border-color: map-get($variables, color-warning);
-      animation: pulseWarning 0.75s infinite alternate;
-      display: block;
-
-      &-body {
-        position: absolute;
-        width: 5px;
-        height: 47px;
-        left: 50%;
-        top: 10px;
-        border-radius: 2px;
-        margin-left: -2px;
-        background-color: map-get($variables, color-warning);
-      }
-
-      &-dot {
-        position: absolute;
-        width: 7px;
-        height: 7px;
-        border-radius: 50%;
-        margin-left: -4px;
-        left: 50%;
-        bottom: -11px;
-        background-color: map-get($variables, color-warning);
-      }
-    }
-
-    @keyframes pulseWarning {
-      from {
-        border-color: map-get($variables, color-warning);
-      }
-      to {
-        border-color: map-get($variables, color-warning);
-      }
-    }
-}
-
-
-@mixin alert($variables) {
-    @include alert-error($variables);
-    @include alert-warning($variables);
-    @include alert-info($variables);
-    @include alert-success($variables);
+@mixin alert-info($variables) {
+    .alert-icon-info {
+      display: block;
+      border-color: map-get($variables, color-info) ;
+
+      &::before {
+        content: "";
+        position: absolute;
+        width: 5px;
+        height: 29px;
+        left: 50%;
+        bottom: 17px;
+        border-radius: 2px;
+        margin-left: -2px;
+        background-color: map-get($variables, color-info);
+      }
+      &::after {
+        content: "";
+        position: absolute;
+        width: 7px;
+        height: 7px;
+        border-radius: 50%;
+        margin-left: -3px;
+        top: 19px;
+        background-color: map-get($variables, color-info);
+        left: 50%;
+      }
+    }
+}
+@mixin alert-success($variables) {
+
+    $green-light: rgba(165, 220, 134, 0.2);
+
+    .alert-icon-success {
+      border-color: map-get($variables, color-success);
+      display: block;
+      margin: 30px auto;
+
+      &::before,
+      &::after {
+        content: '';
+        border-radius: 50%;
+        position: absolute;
+        width: 65px;
+        height: 120px;
+        background: white;
+        transform: rotate(45deg);
+      }
+
+      &::before {
+        border-radius: 120px 0 0 120px;
+        top: -7px;
+        left: -33px;
+        transform: rotate(-45deg);
+        transform-origin: 60px 60px;
+      }
+
+      &::after {
+        border-radius: 0 120px 120px 0;
+        top: -11px;
+        left: 30px;
+        transform: rotate(-45deg);
+        transform-origin: 0px 60px;
+        animation: rotatePlaceholder 4.25s ease-in;
+      }
+
+      &-ring {
+        width: 80px;
+        height: 80px;
+        border: 4px solid $green-light;
+        border-radius: 50%;
+        box-sizing: content-box;
+        position: absolute;
+        left: -4px;
+        top: -4px;
+        z-index: 2;
+      }
+
+      &-hide-corners {
+        width: 5px;
+        height: 90px;
+        background-color: map-get($variables, text);
+        padding: 1px;
+        position: absolute;
+        left: 28px;
+        top: 8px;
+        z-index: 1;
+        transform: rotate(-45deg);
+      }
+
+      &-line {
+        height: 5px;
+        background-color: map-get($variables, color-success);
+        display: block;
+        border-radius: 2px;
+        position: absolute;
+        z-index: 2;
+
+        &-tip {
+          width: 25px;
+          left: 14px;
+          top: 46px;
+          transform: rotate(45deg);
+          animation: animateSuccessTip 0.75s;
+        }
+        &-long {
+          width: 47px;
+          right: 8px;
+          top: 38px;
+          transform: rotate(-45deg);
+          animation: animateSuccessLong 0.75s;
+        }
+      }
+    }
+
+    @keyframes rotatePlaceholder {
+      0% {
+        transform: rotate(-45deg);
+      }
+      5% {
+        transform: rotate(-45deg);
+      }
+      12% {
+        transform: rotate(-405deg);
+      }
+      100% {
+        transform: rotate(-405deg);
+      }
+    }
+
+    @keyframes animateSuccessTip {
+      0% {
+        width: 0;
+        left: 1px;
+        top: 19px;
+      }
+      54% {
+        width: 0;
+        left: 1px;
+        top: 19px;
+      }
+      70% {
+        width: 50px;
+        left: -8px;
+        top: 37px;
+      }
+      84% {
+        width: 17px;
+        left: 21px;
+        top: 48px;
+      }
+      100% {
+        width: 25px;
+        left: 14px;
+        top: 45px;
+      }
+    }
+
+    @keyframes animateSuccessLong {
+      0% {
+        width: 0;
+        right: 46px;
+        top: 54px;
+      }
+      65% {
+        width: 0;
+        right: 46px;
+        top: 54px;
+      }
+      84% {
+        width: 55px;
+        right: 0px;
+        top: 35px;
+      }
+      100% {
+        width: 47px;
+        right: 8px;
+        top: 38px;
+      }
+    }
+}
+
+@mixin alert-error($variables) {
+
+    .alert-icon-error {
+      border-color: map-get($variables, color-danger);
+      animation: animateErrorIcon 0.5s;
+      display: block;
+
+      &-x-mark {
+        position: relative;
+        display: block;
+        animation: animateXMark 0.5s;
+      }
+
+      &-line {
+        position: absolute;
+        height: 5px;
+        width: 47px;
+        background-color: map-get($variables, color-danger);
+        display: block;
+        top: 37px;
+        border-radius: 2px;
+
+        &-left {
+          transform: rotate(45deg);
+          left: 17px;
+        }
+
+        &-right {
+          transform: rotate(-45deg);
+          transform: rotate(-45deg);
+          right: 16px;
+        }
+      }
+    }
+
+    @keyframes animateErrorIcon {
+      from {
+        transform: rotateX(100deg);
+        opacity: 0;
+      }
+      to {
+        transform: rotateX(0deg);
+        opacity: 1;
+      }
+    }
+
+    @keyframes animateXMark {
+      0% {
+        transform: scale(0.4);
+        margin-top: 26px;
+        opacity: 0;
+      }
+      50% {
+        transform: scale(0.4);
+        margin-top: 26px;
+        opacity: 0;
+      }
+      80% {
+        transform: scale(1.15);
+        margin-top: -6px;
+      }
+      100% {
+        transform: scale(1);
+        margin-top: 0;
+        opacity: 1;
+      }
+    }
+}
+
+@mixin alert-warning($variables) {
+    .alert-icon-warning {
+      border-color: map-get($variables, color-warning);
+      animation: pulseWarning 0.75s infinite alternate;
+      display: block;
+
+      &-body {
+        position: absolute;
+        width: 5px;
+        height: 47px;
+        left: 50%;
+        top: 10px;
+        border-radius: 2px;
+        margin-left: -2px;
+        background-color: map-get($variables, color-warning);
+      }
+
+      &-dot {
+        position: absolute;
+        width: 7px;
+        height: 7px;
+        border-radius: 50%;
+        margin-left: -4px;
+        left: 50%;
+        bottom: -11px;
+        background-color: map-get($variables, color-warning);
+      }
+    }
+
+    @keyframes pulseWarning {
+      from {
+        border-color: map-get($variables, color-warning);
+      }
+      to {
+        border-color: map-get($variables, color-warning);
+      }
+    }
+}
+
+
+@mixin alert($variables) {
+    @include alert-error($variables);
+    @include alert-warning($variables);
+    @include alert-info($variables);
+    @include alert-success($variables);
 }

package/esm2020/craftsjs-alert.mjs

@@ -1,5 +1,5 @@
-/**
- * Generated bundle index. Do not edit.
- */
-export * from './public-api';
+/**
+ * Generated bundle index. Do not edit.
+ */
+export * from './public-api';
 //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY3JhZnRzanMtYWxlcnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9wcm9qZWN0cy9jcmFmdHNqcy9hbGVydC9zcmMvY3JhZnRzanMtYWxlcnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7O0dBRUc7QUFFSCxjQUFjLGNBQWMsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogR2VuZXJhdGVkIGJ1bmRsZSBpbmRleC4gRG8gbm90IGVkaXQuXG4gKi9cblxuZXhwb3J0ICogZnJvbSAnLi9wdWJsaWMtYXBpJztcbiJdfQ==