@craftsjs/alert 5.0.0 → 6.0.0

package/_craftsjs-alert.theme.scss

@@ -1,297 +1,415 @@
-@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, $theme) {
+    $foreground: map-get($theme, foreground);
+
+    .alert {
+        &-icon {
+            width: 80px;
+            height: 80px;
+            border-width: 4px;
+            border-style: solid;
+            border-radius: 50%;
+            padding: 0;
+            position: relative;
+            box-sizing: content-box;
+            margin: 20px auto;
+
+            &-custom {
+                width: auto;
+                height: auto;
+                max-width: 100%;
+                border: none;
+                border-radius: 0;
+            }
+
+            & img {
+                max-width: 100%;
+                max-height: 100%;
+            }
+        }
+
+        &-title {
+            color: map-get($foreground, 'text');
+            font-weight: 600;
+            text-transform: none;
+            position: relative;
+            display: block;
+            font-size: 27px;
+            line-height: normal;
+            text-align: center;
+            margin-bottom: 0px;
+
+            &:first-child {
+                margin-top: 26px;
+            }
+
+            &:not(:first-child) {
+                padding-bottom: 0;
+            }
+
+            &:not(:last-child) {
+                margin-bottom: 13px;
+            }
+        }
+
+        &-text {
+            font-size: 16px;
+            position: relative;
+            float: none;
+            line-height: normal;
+            vertical-align: top;
+            text-align: center;
+            display: inline-block;
+            margin: 0;
+            padding: 0 10px;
+            font-weight: 400;
+            color: map-get($foreground, 'text');
+            overflow-wrap: break-word;
+            box-sizing: border-box;
+            width: 100%;
+
+            &:first-child {
+                margin-top: 45px;
+            }
+
+            &:last-child {
+                margin-bottom: 45px;
+            }
+        }
+
+        &-footer {
+            text-align: right;
+            padding-top: 13px;
+            margin-top: 13px;
+            padding: 13px 16px;
+            border-radius: inherit;
+            border-top-left-radius: 0;
+            border-top-right-radius: 0;
+
+            &-button-container {
+                margin: 5px;
+                display: inline-block;
+                position: relative;
+            }
+
+            &>* {
+                display: inline-block;
+                margin-right: 0.5em;
+            }
+
+            &>:last-child {
+                margin-right: inherit;
+            }
+        }
+    }
+    @include alert-error($variables);
+    @include alert-warning($variables);
+    @include alert-info($variables);
+    @include alert-success($variables);
+}
+
+@mixin alert-color($theme) {
+    $foreground: map-get($theme, foreground);
+    color: map-get($foreground, 'text');
+
+    .alert {
+        // change color title
+        &-title {
+            color: map-get($foreground, 'text');
+        }
+        // change color text
+        &-text {
+            color: map-get($foreground, 'text');
+        }
+    }
 }