@qsxy/element-plus-react 1.0.2 → 2.0.0

package/theme-chalk/message-box.scss

@@ -1,32 +1,29 @@
-@use './mixins/config' as *;
-
-.#{$namespace}-message-box {
-    --#{$namespace}-messagebox-title-color: var(--#{$namespace}-text-color-primary);
-    --#{$namespace}-messagebox-width: 420px;
-    --#{$namespace}-messagebox-border-radius: 4px;
-    --#{$namespace}-messagebox-box-shadow: var(--#{$namespace}-box-shadow);
-    --#{$namespace}-messagebox-font-size: var(--#{$namespace}-font-size-large);
-    --#{$namespace}-messagebox-content-font-size: var(--#{$namespace}-font-size-base);
-    --#{$namespace}-messagebox-content-color: var(--#{$namespace}-text-color-regular);
-    --#{$namespace}-messagebox-error-font-size: 12px;
-    --#{$namespace}-messagebox-padding-primary: 12px;
-    --#{$namespace}-messagebox-font-line-height: var(--#{$namespace}-font-line-height-primary);
+@use 'sass:map';
+
+@use 'mixins/mixins' as *;
+@use 'mixins/var' as *;
+@use 'common/var' as *;
+@use 'common/popup' as *;
+
+@include b(message-box) {
+    @include set-component-css-var('messagebox', $messagebox);
 }
 
-.#{$namespace}-message-box {
+@include b(message-box) {
     display: inline-block;
     position: relative;
-    max-width: var(--#{$namespace}-messagebox-width);
+    max-width: getCssVar('messagebox-width');
     width: 100%;
-    padding: var(--#{$namespace}-messagebox-padding-primary);
+    padding: getCssVar('messagebox-padding-primary');
     vertical-align: middle;
-    background-color: var(--#{$namespace}-bg-color);
-    border-radius: var(--#{$namespace}-messagebox-border-radius);
-    font-size: var(--#{$namespace}-messagebox-font-size);
-    box-shadow: var(--#{$namespace}-messagebox-box-shadow);
+    background-color: getCssVar('bg-color');
+    border-radius: getCssVar('messagebox-border-radius');
+    font-size: getCssVar('messagebox-font-size');
+    box-shadow: getCssVar('messagebox-box-shadow');
     text-align: left;
     overflow: hidden;
     backface-visibility: hidden;
+    // To avoid small screen overflowing, see #11919
     box-sizing: border-box;
     overflow-wrap: break-word;
 
@@ -34,151 +31,181 @@
         outline: none !important;
     }
 
-    &.is-draggable .#{$namespace}-message-box__header {
-        cursor: move;
-        -webkit-user-select: none;
-        user-select: none;
+    @at-root .is-message-box {
+        .#{$namespace}-overlay-message-box {
+            text-align: center;
+            position: fixed;
+            top: 0;
+            right: 0;
+            bottom: 0;
+            left: 0;
+            padding: 16px;
+            overflow: auto;
+
+            &::after {
+                content: '';
+                display: inline-block;
+                height: 100%;
+                width: 0;
+                vertical-align: middle;
+            }
+        }
+    }
+
+    @include when(draggable) {
+        @include e(header) {
+            cursor: move;
+            user-select: none;
+        }
     }
-}
 
-.#{$namespace}-message-box__header {
-    padding-bottom: var(--#{$namespace}-messagebox-padding-primary);
+    @include e(header) {
+        padding-bottom: getCssVar('messagebox-padding-primary');
 
-    &.show-close {
-        padding-right: calc(var(--#{$namespace}-messagebox-padding-primary) + var(--#{$namespace}-message-close-size, 16px));
+        &.show-close {
+            padding-right: calc(getCssVar('messagebox-padding-primary') + var(#{getCssVarName('message-close-size')}, map.get($message, 'close-size')));
+        }
     }
-}
 
-.#{$namespace}-message-box__title {
-    font-size: var(--#{$namespace}-messagebox-font-size);
-    line-height: var(--#{$namespace}-messagebox-font-line-height);
-    color: var(--#{$namespace}-messagebox-title-color);
-}
+    @include e(title) {
+        font-size: getCssVar('messagebox-font-size');
+        line-height: getCssVar('messagebox-font-line-height');
+        color: getCssVar('messagebox-title-color');
+    }
 
-.#{$namespace}-message-box__headerbtn {
-    position: absolute;
-    top: 0;
-    right: 0;
-    padding: 0;
-    width: 40px;
-    height: 40px;
-    border: none;
-    outline: none;
-    background: transparent;
-    font-size: var(--#{$namespace}-message-close-size, 16px);
-    cursor: pointer;
+    @include e(headerbtn) {
+        position: absolute;
+        top: 0;
+        right: 0;
+        padding: 0;
+        width: 40px;
+        height: 40px;
+        border: none;
+        outline: none;
+        background: transparent;
+        font-size: var(#{getCssVarName('message-close-size')}, map.get($message, 'close-size'));
+        cursor: pointer;
+
+        .#{$namespace}-message-box__close {
+            color: getCssVar('color-info');
+            font-size: inherit;
+        }
 
-    .#{$namespace}-message-box__close {
-        color: var(--#{$namespace}-color-info);
-        font-size: inherit;
+        &:focus,
+        &:hover {
+            .#{$namespace}-message-box__close {
+                color: getCssVar('color-primary');
+            }
+        }
     }
 
-    &:focus .#{$namespace}-message-box__close,
-    &:hover .#{$namespace}-message-box__close {
-        color: var(--#{$namespace}-color-primary);
+    @include e(body) {
+        color: getCssVar('messagebox-content-color');
+        font-size: getCssVar('messagebox-content-font-size');
     }
-}
 
-.#{$namespace}-message-box__body {
-    color: var(--#{$namespace}-messagebox-content-color);
-    font-size: var(--#{$namespace}-messagebox-content-font-size);
-}
+    @include e(container) {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+    }
 
-.#{$namespace}-message-box__container {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-}
+    @include e(input) {
+        padding-top: 12px;
 
-.#{$namespace}-message-box__input {
-    padding-top: 12px;
+        & div.invalid > input {
+            border-color: getCssVar('color-error');
 
-    div.invalid > input {
-        border-color: var(--#{$namespace}-color-error);
+            &:focus {
+                border-color: getCssVar('color-error');
+            }
+        }
     }
 
-    div.invalid > input:focus {
-        border-color: var(--#{$namespace}-color-error);
-    }
-}
+    @include e(status) {
+        font-size: 24px;
 
-.#{$namespace}-message-box__status {
-    font-size: 24px;
-
-    // &::before {
-    //     // 防止图标切割
-    //     padding-left: 1px;
-    // }
-
-    // &.#{$namespace}-icon {
-    //     // 防止 #{$namespace}-icon 的position样式覆盖
-    //     position: absolute;
-    // }
-
-    // & + .#{$namespace}-message-box__message {
-    //     padding-left: 36px;
-    //     padding-right: 12px;
-    //     word-break: break-word;
-    // }
-
-    @each $type in (success, info, warning, error) {
-        &.#{$namespace}-message-box-icon--#{$type} {
-            --#{$namespace}-messagebox-color: var(--#{$namespace}-color-#{$type});
-            color: var(--#{$namespace}-messagebox-color);
+        @each $type in (primary, success, info, warning, error) {
+            &.#{$namespace}-message-box-icon--#{$type} {
+                @include css-var-from-global(('messagebox', 'color'), ('color', $type));
+                color: getCssVar('messagebox-color');
+            }
         }
     }
-}
-
-.#{$namespace}-message-box__message {
-    margin: 0;
 
-    & p {
+    @include e(message) {
         margin: 0;
-        line-height: var(--#{$namespace}-messagebox-font-line-height);
-    }
-}
+        min-width: 0;
 
-.#{$namespace}-message-box__errormsg {
-    color: var(--#{$namespace}-color-error);
-    font-size: var(--#{$namespace}-messagebox-error-font-size);
-    line-height: var(--#{$namespace}-messagebox-font-line-height);
-}
+        & p {
+            margin: 0;
+            line-height: getCssVar('messagebox-font-line-height');
+        }
+    }
 
-.#{$namespace}-message-box__footer {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: flex-end;
-    align-items: center;
-    padding-top: var(--#{$namespace}-messagebox-padding-primary);
-}
+    @include e(errormsg) {
+        color: getCssVar('color-error');
+        font-size: getCssVar('messagebox-error-font-size');
+        line-height: getCssVar('messagebox-font-line-height');
+    }
 
-.#{$namespace}-message-box--cente {
-    .#{$namespace}-message-box__title {
+    @include e(footer) {
         display: flex;
+        flex-wrap: wrap;
+        justify-content: flex-end;
         align-items: center;
-        justify-content: center;
-        gap: 6px;
+        padding-top: getCssVar('messagebox-padding-primary');
     }
 
-    .#{$namespace}-message-box__status {
-        font-size: inherit;
+    // centerAlign 布局
+    @include m(center) {
+        @include e(title) {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 6px;
+        }
+
+        @include e(status) {
+            font-size: inherit;
+        }
+
+        @include e(btns) {
+            justify-content: center;
+        }
+
+        @include e(container) {
+            justify-content: center;
+        }
     }
+}
 
-    .#{$namespace}-message-box__btns,
-    .#{$namespace}-message-box__container {
-        justify-content: center;
+@include b(message-box-parent) {
+    @include m(hidden) {
+        overflow: hidden;
     }
 }
 
-// .#{$namespace}-message-box__container {
-//     position: relative;
-// }
+.fade-in-linear-enter-active {
+    .#{$namespace}-overlay-message-box {
+        animation: msgbox-fade-in getCssVar('transition-duration');
+    }
+}
 
-// .#{$namespace}-message-box__message {
-//     margin: 0;
+.fade-in-linear-leave-active {
+    .#{$namespace}-overlay-message-box {
+        animation: msgbox-fade-in getCssVar('transition-duration') reverse;
+    }
+}
+
+@keyframes msgbox-fade-in {
+    0% {
+        transform: translate3d(0, -20px, 0);
+        opacity: 0;
+    }
 
-//     & p {
-//         margin: 0;
-//         line-height: 24px;
-//     }
-// }
+    100% {
+        transform: translate3d(0, 0, 0);
+        opacity: 1;
+    }
+}

package/theme-chalk/message.scss

@@ -1,93 +1,75 @@
-@use './common/var' as *;
-@use './mixins/config' as *;
-
-.#{$namespace}-message {
-    --#{$namespace}-message-bg-color: var(--#{$namespace}-color-info-light-9);
-    --#{$namespace}-message-border-color: var(--#{$namespace}-border-color-lighter);
-    --#{$namespace}-message-close-icon-color: var(--#{$namespace}-text-color-placeholder);
-    --#{$namespace}-message-close-hover-color: var(--#{$namespace}-text-color-secondary);
+@use 'mixins/mixins' as *;
+@use 'mixins/var' as *;
+@use 'common/var' as *;
+
+@include b(message) {
+    @include set-component-css-var('message', $message);
 }
 
-.#{$namespace}-message {
-    min-width: 380px;
+@include b(message) {
     width: fit-content;
     max-width: calc(100% - 32px);
     box-sizing: border-box;
-    border-radius: 4px;
-    border-width: 1px;
-    border-style: solid;
-    border-color: var(--#{$namespace}-message-border-color);
+    border-radius: getCssVar('border-radius-base');
+    border-width: getCssVar('border-width');
+    border-style: getCssVar('border-style');
+    border-color: getCssVar('message', 'border-color');
     position: fixed;
-    left: 50%;
-    top: 20px;
-    transform: translateX(-50%);
-    background-color: var(--#{$namespace}-message-bg-color);
-    color: var(--#{$namespace}-message-text-color);
-    transition: opacity 0.3s, transform 0.4s, top 0.4s;
-    // overflow: hidden;
-    padding: 15px 19px;
+    background-color: getCssVar('message', 'bg-color');
+    transition: opacity getCssVar('transition-duration'), transform 0.4s, top 0.4s, bottom 0.4s;
+    padding: getCssVar('message', 'padding');
     display: flex;
     align-items: center;
+    gap: 8px;
 
-    &.is-center {
-        justify-content: center;
+    &.is-left {
+        left: 16px;
     }
 
-    &.is-closable {
-        .#{$namespace}-message__content {
-            padding-right: 31px;
-        }
+    &.is-right {
+        right: 16px;
     }
 
-    p {
-        margin: 0;
+    &.is-center {
+        left: 0;
+        right: 0;
+        margin: 0 auto;
     }
 
-    &--info {
-        --#{$namespace}-message-bg-color: var(--#{$namespace}-color-info-light-9);
-        --#{$namespace}-message-border-color: var(--#{$namespace}-color-info-light-8);
-        --#{$namespace}-message-text-color: var(--#{$namespace}-color-info);
-
-        .#{$namespace}-message__content {
-            color: var(--#{$namespace}-message-text-color);
-        }
+    @include when(plain) {
+        background-color: getCssVar('bg-color', 'overlay');
+        border-color: getCssVar('bg-color', 'overlay');
+        box-shadow: getCssVar('box-shadow-light');
     }
 
-    &--success {
-        --#{$namespace}-message-bg-color: var(--#{$namespace}-color-success-light-9);
-        --#{$namespace}-message-border-color: var(--#{$namespace}-color-success-light-8);
-        --#{$namespace}-message-text-color: var(--#{$namespace}-color-success);
-
-        .#{$namespace}-message__content {
-            color: var(--#{$namespace}-message-text-color);
-        }
+    p {
+        margin: 0;
     }
 
-    &--warning {
-        --#{$namespace}-message-bg-color: var(--#{$namespace}-color-warning-light-9);
-        --#{$namespace}-message-border-color: var(--#{$namespace}-color-warning-light-8);
-        --#{$namespace}-message-text-color: var(--#{$namespace}-color-warning);
+    @each $type in (primary, success, info, warning, error) {
+        @include m($type) {
+            @include css-var-from-global(('message', 'bg-color'), ('color', $type, 'light-9'));
+            @include css-var-from-global(('message', 'border-color'), ('color', $type, 'light-8'));
+            @include css-var-from-global(('message', 'text-color'), ('color', $type));
 
-        .#{$namespace}-message__content {
-            color: var(--#{$namespace}-message-text-color);
+            .#{$namespace}-message__content {
+                color: getCssVar('message', 'text-color');
+                overflow-wrap: break-word;
+            }
         }
-    }
-
-    &--error {
-        --#{$namespace}-message-bg-color: var(--#{$namespace}-color-error-light-9);
-        --#{$namespace}-message-border-color: var(--#{$namespace}-color-error-light-8);
-        --#{$namespace}-message-text-color: var(--#{$namespace}-color-error);
 
-        .#{$namespace}-message__content {
-            color: var(--#{$namespace}-message-text-color);
+        & .#{$namespace}-message-icon--#{$type} {
+            color: getCssVar('message', 'text-color');
         }
     }
 
-    &__icon {
-        margin-right: 10px;
+    .#{$namespace}-message__badge {
+        position: absolute;
+        top: -8px;
+        right: -8px;
     }
 
-    &__content {
+    @include e(content) {
         padding: 0;
         font-size: 14px;
         line-height: 1;
@@ -96,83 +78,27 @@
         }
     }
 
-    &__closeBtn {
-        position: absolute;
-        top: 50%;
-        right: 15px;
-        transform: translateY(-50%);
+    & .#{$namespace}-message__closeBtn {
         cursor: pointer;
-        color: var(--#{$namespace}-message-close-icon-color);
-        font-size: 16px;
-
-        &::before {
-            font-family: $fa-font-family;
-            content: '\f00d';
-            font-weight: 400;
-        }
+        color: getCssVar('message', 'close-icon-color');
+        font-size: getCssVar('message', 'close-size');
 
         &:focus {
             outline-width: 0;
         }
         &:hover {
-            color: var(--#{$namespace}-message-close-hover-color);
+            color: getCssVar('message', 'close-hover-color');
         }
     }
-
-    & .#{$namespace}-icon-success {
-        color: var(--#{$namespace}-message-text-color);
-
-        &::before {
-            font-family: $fa-font-family;
-            content: '\f058';
-            font-style: normal;
-            font-weight: bold;
-        }
-    }
-
-    & .#{$namespace}-icon-error {
-        color: var(--#{$namespace}-message-text-color);
-
-        &::before {
-            font-family: $fa-font-family;
-            content: '\f057';
-            font-style: normal;
-            font-weight: bold;
-        }
-    }
-
-    & .#{$namespace}-icon-info {
-        color: var(--#{$namespace}-message-text-color);
-
-        &::before {
-            font-family: $fa-font-family;
-            content: '\f05a';
-            font-style: normal;
-            font-weight: bold;
-        }
-    }
-
-    & .#{$namespace}-icon-warning {
-        color: var(--#{$namespace}-message-text-color);
-
-        &::before {
-            font-family: $fa-font-family;
-            content: '\f06a';
-            font-style: normal;
-            font-weight: bold;
-        }
-    }
-
-    .#{$namespace}-message__badge {
-        position: absolute;
-        top: -8px;
-        right: -8px;
-    }
 }
 
 .#{$namespace}-fade-enter-from,
 .#{$namespace}-message-fade-enter-from,
 .#{$namespace}-message-fade-leave-active {
     opacity: 0;
-    transform: translate(-50%, -100%) !important;
+    transform: translateY(-100%);
+
+    &.is-bottom {
+        transform: translateY(100%);
+    }
 }