feat:#47 updated primevue theme for sass

2025-08-07 20:29:16 +02:00 · 2024-03-30 14:43:21 +01:00
parent d58b633159
commit d93287d732
104 changed files with 14548 additions and 0 deletions
--- a/frontend/public/primevue-sass-theme/theme-base/components/messages/_toast.scss
+++ b/frontend/public/primevue-sass-theme/theme-base/components/messages/_toast.scss
@@ -0,0 +1,203 @@
+// core
+.p-toast {
+    width: 25rem;
+    white-space: pre-line;
+    word-break: break-word;
+}
+
+.p-toast-message-icon {
+    flex-shrink: 0;
+}
+
+.p-toast-message-content {
+    display: flex;
+    align-items: flex-start;
+}
+
+.p-toast-message-text {
+    flex: 1 1 auto;
+}
+
+.p-toast-top-center {
+    transform: translateX(-50%);
+}
+
+.p-toast-bottom-center {
+    transform: translateX(-50%);
+}
+
+.p-toast-center {
+    min-width: 20vw;
+    transform: translate(-50%, -50%);
+}
+
+.p-toast-icon-close {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    position: relative;
+}
+
+.p-toast-icon-close.p-link {
+    cursor: pointer;
+}
+
+/* Animations */
+.p-toast-message-enter-from {
+    opacity: 0;
+    -webkit-transform: translateY(50%);
+    -ms-transform: translateY(50%);
+    transform: translateY(50%);
+}
+
+.p-toast-message-leave-from {
+    max-height: 1000px;
+}
+
+.p-toast .p-toast-message.p-toast-message-leave-to {
+    max-height: 0;
+    opacity: 0;
+    margin-bottom: 0;
+    overflow: hidden;
+}
+
+.p-toast-message-enter-active {
+    -webkit-transition: transform 0.3s, opacity 0.3s;
+    transition: transform 0.3s, opacity 0.3s;
+}
+
+.p-toast-message-leave-active {
+    -webkit-transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s;
+    transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s;
+}
+
+// theme
+.p-toast {
+    opacity: $toastOpacity;
+
+    .p-toast-message {
+        margin: $toastMargin;
+        box-shadow: $toastShadow;
+        border-radius: $borderRadius;
+
+        .p-toast-message-content {
+            padding: $toastPadding;
+            border-width: $toastBorderWidth;
+
+            .p-toast-message-text {
+                margin: $toastMessageTextMargin;
+            }
+
+            .p-toast-message-icon {
+                font-size: $toastIconFontSize;
+
+                &.p-icon {
+                    width: $toastIconFontSize;
+                    height: $toastIconFontSize;
+                }
+            }
+
+            .p-toast-summary {
+                font-weight: $toastTitleFontWeight;
+            }
+
+            .p-toast-detail {
+                margin: $toastDetailMargin;
+            }
+        }
+
+        .p-toast-icon-close {
+            width: $toastIconFontSize;
+            height: $toastIconFontSize;
+            border-radius: $actionIconBorderRadius;
+            background: transparent;
+            transition: $actionIconTransition;
+            outline-color: transparent;
+
+            &:hover {
+                background: rgba(255, 255, 255, 0.5);
+            }
+
+            &:focus-visible {
+                @include focused();
+            }
+        }
+
+        &.p-toast-message-info {
+            background: $infoMessageBg;
+            border: $infoMessageBorder;
+            border-width: $messageBorderWidth;
+            color: $infoMessageTextColor;
+
+            .p-toast-message-icon,
+            .p-toast-icon-close {
+                color: $infoMessageIconColor;
+            }
+        }
+
+        &.p-toast-message-success {
+            background: $successMessageBg;
+            border: $successMessageBorder;
+            border-width: $messageBorderWidth;
+            color: $successMessageTextColor;
+
+            .p-toast-message-icon,
+            .p-toast-icon-close {
+                color: $successMessageIconColor;
+            }
+        }
+
+        &.p-toast-message-warn {
+            background: $warningMessageBg;
+            border: $warningMessageBorder;
+            border-width: $messageBorderWidth;
+            color: $warningMessageTextColor;
+
+            .p-toast-message-icon,
+            .p-toast-icon-close {
+                color: $warningMessageIconColor;
+            }
+        }
+
+        &.p-toast-message-error {
+            background: $errorMessageBg;
+            border: $errorMessageBorder;
+            border-width: $messageBorderWidth;
+            color: $errorMessageTextColor;
+
+            .p-toast-message-icon,
+            .p-toast-icon-close {
+                color: $errorMessageIconColor;
+            }
+        }
+
+        @if variable-exists(secondaryMessageBg) {
+            &.p-toast-message-secondary {
+                background: $secondaryMessageBg;
+                border: $secondaryMessageBorder;
+                border-width: $messageBorderWidth;
+                color: $secondaryMessageTextColor;
+
+                .p-toast-message-icon,
+                .p-toast-icon-close {
+                    color: $secondaryMessageIconColor;
+                }
+            }
+        }
+
+        @if variable-exists(contrastMessageBg) {
+            &.p-toast-message-contrast {
+                background: $contrastMessageBg;
+                border: $contrastMessageBorder;
+                border-width: $messageBorderWidth;
+                color: $contrastMessageTextColor;
+
+                .p-toast-message-icon,
+                .p-toast-icon-close {
+                    color: $contrastMessageIconColor;
+                }
+            }
+        }
+    }
+}