@qsxy/element-plus-react 1.0.2 → 2.0.0

package/theme-chalk/dialog.scss

@@ -1,190 +1,198 @@
-@use './mixins/config' as *;
+@use 'sass:map';
 
-// Kill the scroll on the body
-.#{$namespace}-popup-parent--hidden {
-    overflow: hidden !important;
-}
+@use 'mixins/mixins' as *;
+@use 'mixins/var' as *;
+@use 'common/var' as *;
+@use 'common/popup' as *;
 
-.#{$namespace}-overlay {
-    position: fixed;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    z-index: 2000;
-    height: 100%;
-    background-color: var(--#{$namespace}-overlay-color-lighter);
-    overflow: auto;
+@include b(dialog) {
+    @include set-component-css-var('dialog', $dialog);
 
-    &.is-message-box .el-overlay-message-box {
-        text-align: center;
+    position: relative;
+    margin: var(#{getCssVarName('dialog-margin-top')}, 15vh) auto 50px;
+    background: getCssVar('dialog', 'bg-color');
+    border-radius: getCssVar('dialog', 'border-radius');
+    box-shadow: getCssVar('dialog', 'box-shadow');
+    box-sizing: border-box;
+    padding: getCssVar('dialog', 'padding-primary');
+    width: var(#{getCssVarName('dialog-width')}, 50%);
+    overflow-wrap: break-word;
+
+    &:focus {
+        outline: none !important;
+    }
+
+    @include when(align-center) {
+        margin: auto;
+    }
+
+    @include when(fullscreen) {
+        @include set-css-var-value('dialog-width', 100%);
+        @include set-css-var-value('dialog-margin-top', 0);
+
+        margin-bottom: 0;
+        height: 100%;
+        overflow: auto;
+        border-radius: 0px;
+    }
+
+    @include e(wrapper) {
         position: fixed;
         top: 0;
         right: 0;
         bottom: 0;
         left: 0;
-        padding: 16px;
         overflow: auto;
+        margin: 0;
     }
 
-    &.is-message-box .el-overlay-message-box:after {
-        content: '';
-        display: inline-block;
-        height: 100%;
-        width: 0;
-        vertical-align: middle;
+    @include when(draggable) {
+        @include e(header) {
+            cursor: move;
+            user-select: none;
+        }
     }
-}
 
-.#{$namespace}-overlay-dialog {
-    position: fixed;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    overflow: auto;
-}
+    @include e(header) {
+        padding-bottom: getCssVar('dialog', 'padding-primary');
 
-// Container that the dialog scrolls within
-.#{$namespace}-dialog {
-    --#{$namespace}-dialog-width: 50%;
-    --#{$namespace}-dialog-margin-top: 15vh;
-    --#{$namespace}-dialog-bg-color: var(--#{$namespace}-bg-color);
-    --#{$namespace}-dialog-box-shadow: var(--#{$namespace}-box-shadow);
-    --#{$namespace}-dialog-title-font-size: var(--#{$namespace}-font-size-large);
-    --#{$namespace}-dialog-content-font-size: 14px;
-    --#{$namespace}-dialog-font-line-height: var(--#{$namespace}-font-line-height-primary);
-    --#{$namespace}-dialog-padding-primary: 16px;
-    --#{$namespace}-dialog-border-radius: var(--#{$namespace}-border-radius-base);
-    position: relative;
-    margin: var(--#{$namespace}-dialog-margin-top, 15vh) auto 50px;
-    background: var(--#{$namespace}-dialog-bg-color);
-    border-radius: var(--#{$namespace}-dialog-border-radius);
-    box-shadow: var(--#{$namespace}-dialog-box-shadow);
-    box-sizing: border-box;
-    padding: var(--#{$namespace}-dialog-padding-primary);
-    width: var(--#{$namespace}-dialog-width, 50%);
+        &.show-close {
+            padding-right: calc(getCssVar('dialog', 'padding-primary') + var(#{getCssVarName('message-close-size')}, map.get($message, 'close-size')));
+        }
+    }
 
-    &:focus {
-        outline: none !important;
+    @include e(headerbtn) {
+        position: absolute;
+        top: 0;
+        right: 0;
+        padding: 0;
+        width: 48px;
+        height: 48px;
+        background: transparent;
+        border: none;
+        outline: none;
+        cursor: pointer;
+        font-size: var(#{getCssVarName('message-close-size')}, map.get($message, 'close-size'));
+
+        .#{$namespace}-dialog__close {
+            color: getCssVar('color', 'info');
+            font-size: inherit;
+        }
+
+        &:focus,
+        &:hover {
+            .#{$namespace}-dialog__close {
+                color: getCssVar('color', 'primary');
+            }
+        }
     }
 
-    &.is-align-center {
-        margin: auto;
+    @include e(title) {
+        line-height: getCssVar('dialog-font-line-height');
+        font-size: getCssVar('dialog-title-font-size');
+        color: getCssVar('text-color', 'primary');
     }
 
-    &.is-fullscreen {
-        --#{$namespace}-dialog-width: 100%;
-        --#{$namespace}-dialog-margin-top: 0;
-        margin-bottom: 0;
-        height: 100%;
-        overflow: auto;
-        border-radius: 0;
+    @include e(body) {
+        color: getCssVar('text-color', 'regular');
+        font-size: getCssVar('dialog-content-font-size');
     }
 
-    &.is-draggable .#{$namespace}-dialog__header {
-        cursor: move;
-        -webkit-user-select: none;
-        user-select: none;
+    @include e(footer) {
+        padding-top: getCssVar('dialog', 'padding-primary');
+        text-align: right;
+        box-sizing: border-box;
     }
 
-    &.#{$namespace}-dialog-shake {
-        animation: 0.3s linear rShakeHead;
+    // 内容居中布局
+    @include m(center) {
+        text-align: center;
+
+        @include e(body) {
+            text-align: initial;
+        }
+
+        @include e(footer) {
+            text-align: inherit;
+        }
     }
 }
 
-.#{$namespace}-dialog--center {
-    text-align: center;
+.#{$namespace}-modal-dialog {
+    &.is-penetrable {
+        pointer-events: none;
+
+        .#{$namespace}-dialog {
+            pointer-events: auto;
+        }
+    }
 }
 
-.#{$namespace}-dialog__wrapper {
+.#{$namespace}-overlay-dialog {
     position: fixed;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
     overflow: auto;
-    margin: 0;
-}
-
-.#{$namespace}-dialog__header {
-    padding-bottom: var(--#{$namespace}-dialog-padding-primary);
-}
-
-.#{$namespace}-dialog__header.show-close {
-    padding-right: calc(var(--#{$namespace}-dialog-padding-primary) + var(--#{$namespace}-message-close-size, 16px));
-}
-
-.#{$namespace}-dialog__headerbtn {
-    position: absolute;
-    top: 0;
-    right: 0;
-    padding: 0;
-    width: 48px;
-    height: 48px;
-    background: transparent;
-    border: none;
-    outline: none;
-    cursor: pointer;
-    font-size: var(--#{$namespace}-message-close-size, 16px);
-
-    & .#{$namespace}-dialog__close {
-        color: var(--#{$namespace}-color-info);
-        font-size: inherit;
-    }
 
-    &:focus .#{$namespace}-dialog__close,
-    &:hover .#{$namespace}-dialog__close {
-        color: var(--#{$namespace}-color-primary);
+    @include when(closing) {
+        @include b(dialog) {
+            pointer-events: none;
+        }
     }
 }
 
-.#{$namespace}-dialog__title {
-    line-height: var(--#{$namespace}-dialog-font-line-height);
-    font-size: var(--#{$namespace}-dialog-title-font-size);
-    color: var(--#{$namespace}-text-color-primary);
+.dialog-fade-enter-active {
+    animation: modal-fade-in getCssVar('transition-duration');
+    .#{$namespace}-overlay-dialog {
+        animation: dialog-fade-in getCssVar('transition-duration');
+    }
 }
 
-.#{$namespace}-dialog__body {
-    color: var(--#{$namespace}-text-color-regular);
-    font-size: var(--#{$namespace}-dialog-content-font-size);
+.dialog-fade-leave-active {
+    animation: modal-fade-out getCssVar('transition-duration');
+    .#{$namespace}-overlay-dialog {
+        animation: dialog-fade-out getCssVar('transition-duration');
+    }
 }
 
-.#{$namespace}-dialog__footer {
-    padding-top: var(--#{$namespace}-dialog-padding-primary);
-    text-align: right;
-    box-sizing: border-box;
-
-    &.is-left {
-        text-align: left;
+@keyframes dialog-fade-in {
+    0% {
+        transform: translate3d(0, -20px, 0);
+        opacity: 0;
     }
-
-    &.is-center {
-        text-align: center;
+    100% {
+        transform: translate3d(0, 0, 0);
+        opacity: 1;
     }
+}
 
-    &.is-right {
-        text-align: right;
+@keyframes dialog-fade-out {
+    0% {
+        transform: translate3d(0, 0, 0);
+        opacity: 1;
+    }
+    100% {
+        transform: translate3d(0, -20px, 0);
+        opacity: 0;
     }
 }
 
-.#{$namespace}-dialog--center {
-    text-align: center;
-
-    & .#{$namespace}-dialog__body {
-        text-align: initial;
+@keyframes modal-fade-in {
+    0% {
+        opacity: 0;
     }
-
-    & .#{$namespace}-dialog__footer {
-        text-align: inherit;
+    100% {
+        opacity: 1;
     }
 }
 
-.#{$namespace}-overlay-dialog {
-    position: fixed;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    overflow: auto;
+@keyframes modal-fade-out {
+    0% {
+        opacity: 1;
+    }
+    100% {
+        opacity: 0;
+    }
 }