@qsxy/element-plus-react 1.0.0-next.7 → 1.0.1

package/theme-chalk/common/index.scss

@@ -0,0 +1,171 @@
+@use 'sass:math';
+@use 'sass:map';
+@use 'sass:color';
+@use './var' as *;
+@use '../mixins/var' as *;
+@use '../mixins/mixins' as *;
+
+:root {
+    color-scheme: light;
+    --el-color-white: #ffffff;
+    --el-color-black: #000000;
+
+    @each $type in $types {
+        --el-color-#{$type}: #{map.get($colors, $type, 'base')};
+
+        @each $i in (3, 5, 7, 8, 9) {
+            @include set-color-mix-level($type, $i, 'light', $color-white);
+        }
+    }
+
+    // --el-color-primary-dark-2
+    @each $type in $types {
+        @include set-color-mix-level($type, 2, 'dark', $color-black);
+    }
+
+    --el-bg-color: #ffffff;
+    --el-bg-color-page: #f2f3f5;
+    --el-bg-color-overlay: #ffffff;
+    --el-text-color-primary: #303133;
+    --el-text-color-regular: #606266;
+    --el-text-color-secondary: #909399;
+    --el-text-color-placeholder: #a8abb2;
+    --el-text-color-disabled: #c0c4cc;
+
+    // 我是边框色
+    --el-border-color: #dcdfe6;
+    // 我是鼠标悬浮边框色
+    --el-border-color-hover: var(--el-text-color-disabled);
+    --el-border: 1px solid var(--el-border-color);
+    --el-border-color-light: #e4e7ed;
+    --el-border-color-lighter: #ebeef5;
+    --el-border-color-extra-light: #f2f6fc;
+    --el-border-color-dark: #d4d7de;
+    --el-border-color-darker: #cdd0d6;
+
+    --el-fill-color: #f0f2f5;
+    --el-fill-color-light: #f5f7fa;
+    --el-fill-color-lighter: #fafafa;
+    --el-fill-color-extra-light: #fafcff;
+    --el-fill-color-dark: #ebedf0;
+    --el-fill-color-darker: #e6e8eb;
+    --el-fill-color-blank: #ffffff;
+
+    --el-box-shadow: 0px 12px 32px 4px rgba(0, 0, 0, 0.04), 0px 8px 20px rgba(0, 0, 0, 0.08);
+    --el-box-shadow-light: 0px 0px 12px rgba(0, 0, 0, 0.12);
+    // 右侧阴影
+    --el-box-shadow-lighter: rgb(101 119 134 / 20%) 0px 10px 15px, rgb(101 119 134 / 15%) 0px 25px 3px 0px;
+    // --el-box-shadow-dark: 0px 16px 48px 16px rgba(0, 0, 0, 0.08), 0px 12px 32px rgba(0, 0, 0, 0.12), 0px 8px 16px -8px rgba(0, 0, 0, 0.16);
+    --el-disabled-bg-color: var(--el-fill-color-light);
+    --el-disabled-text-color: var(--el-text-color-placeholder);
+    --el-disabled-border-color: var(--el-border-color-light);
+
+    --el-overlay-color: rgba(0, 0, 0, 0.8);
+    --el-overlay-color-light: rgba(0, 0, 0, 0.7);
+    --el-overlay-color-lighter: rgba(0, 0, 0, 0.5);
+
+    --el-mask-color: rgba(255, 255, 255, 0.9);
+    --el-mask-color-extra-light: rgba(255, 255, 255, 0.3);
+
+    --el-svg-monochrome-grey: var(--el-border-color); //todo
+
+    --el-color-primary-rgb: 64, 158, 255;
+    --el-color-success-rgb: 103, 194, 58;
+    --el-color-warning-rgb: 230, 162, 60;
+    --el-color-danger-rgb: 245, 108, 108;
+    --el-color-error-rgb: 245, 108, 108;
+    --el-color-info-rgb: 144, 147, 153;
+
+    --el-font-size-extra-large: 20px;
+    --el-font-size-large: 18px;
+    --el-font-size-medium: 16px;
+    --el-font-size-base: 14px;
+    --el-font-size-small: 13px;
+    --el-font-size-extra-small: 12px;
+
+    --el-font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
+    --el-font-weight-primary: 500;
+    --el-font-line-height-primary: 24px;
+    --el-index-normal: 1;
+    --el-index-top: 1000;
+    --el-index-popper: 2000;
+    --el-border-radius-base: 4px;
+    --el-border-radius-small: 2px;
+    --el-border-radius-round: 20px;
+    --el-border-radius-circle: 100%;
+
+    --el-transition-duration: 0.3s;
+    --el-transition-duration-fast: 0.2s;
+    --el-transition-function-ease-in-out-bezier: cubic-bezier(0.645, 0.045, 0.355, 1);
+    --el-transition-function-fast-bezier: cubic-bezier(0.23, 1, 0.32, 1);
+    --el-transition-all: all var(--el-transition-duration) var(--el-transition-function-ease-in-out-bezier);
+    --el-transition-fade: opacity var(--el-transition-duration) var(--el-transition-function-fast-bezier);
+    --el-transition-md-fade: transform var(--el-transition-duration) var(--el-transition-function-fast-bezier),
+        opacity var(--el-transition-duration) var(--el-transition-function-fast-bezier);
+    --el-transition-fade-linear: opacity var(--el-transition-duration-fast) linear;
+    --el-transition-border: border-color var(--el-transition-duration-fast) var(--el-transition-function-ease-in-out-bezier);
+    --el-transition-box-shadow: box-shadow var(--el-transition-duration-fast) var(--el-transition-function-ease-in-out-bezier);
+    --el-transition-color: color var(--el-transition-duration-fast) var(--el-transition-function-ease-in-out-bezier);
+
+    --el-component-size-large: 40px;
+    --el-component-size: 32px;
+    --el-component-size-small: 24px;
+}
+
+.is-dark {
+    color-scheme: dark;
+    @each $type in $types {
+        --el-color-#{$type}: #{map.get($colors, $type, 'base')};
+
+        @each $i in (3, 5, 7, 8, 9) {
+            @include set-color-mix-level($type, $i, 'light', map.get($bg-color, ''));
+        }
+    }
+    @each $type in $types {
+        @include set-color-mix-level($type, 2, 'dark', $color-white);
+    }
+
+    --el-box-shadow: 0 6px 12px rgba(162, 162, 162, 0.175);
+    --el-box-shadow-light: 0px 0px 12px rgba(0, 0, 0, 0.72);
+    // --el-box-shadow-lighter: 0px 0px 6px rgba(0, 0, 0, 0.72);
+    // --el-box-shadow-dark: 0px 16px 48px 16px rgba(0, 0, 0, 0.72), 0px 12px 32px #000000, 0px 8px 16px -8px #000000;
+    // --el-bg-color-page: #0a0a0a;
+    --el-bg-color: #15202b;
+    --el-bg-color-overlay: rgb(25, 39, 52);
+    --el-text-color-primary: #cfd3dc;
+    // 我是正常文本颜色
+    --el-text-color-regular: #cfd3dc;
+    --el-text-color-secondary: #a3a6ad;
+    --el-text-color-placeholder: #8d9095;
+    --el-text-color-disabled: #adbdca;
+
+    // 我是边框色
+    --el-border-color: rgb(56, 68, 77);
+    // 我是鼠标悬浮边框色
+    --el-border-color-hover: #6c6e72;
+    --el-border-color-light: #414243;
+    --el-border-color-lighter: rgb(56, 68, 77);
+    --el-border-color-darker: #636466;
+    --el-border-color-dark: #58585b;
+    --el-border-color-extra-light: rgba(107, 125, 140, 0.1);
+
+    --el-fill-color-darker: #424243;
+    --el-fill-color-dark: #39393a;
+    --el-fill-color: #303030;
+    --el-fill-color-light: rgba(107, 125, 140, 0.1);
+    --el-fill-color-lighter: #253341;
+    --el-fill-color-extra-light: #191919;
+    --el-fill-color-blank: var(--el-bg-color);
+
+    --el-disabled-bg-color: var(--el-fill-color-lighter);
+    --el-disabled-text-color: var(--el-text-color-placeholder);
+    --el-disabled-border-color: var(--el-border-color-lighter);
+
+    --el-mask-color: rgba(0, 0, 0, 0.8);
+    --el-mask-color-extra-light: rgba(0, 0, 0, 0.3);
+
+    @for $i from 0 through 9 {
+        // @include set-color-mix-level($i, 'light', $--el-color-primary, #141414);
+        --el-empty-fill-color-#{$i}: #{color.mix(#141414, #000000, math.percentage(math.div($i, 10)))};
+    }
+}

package/theme-chalk/common/transition.scss

@@ -0,0 +1,142 @@
+@use '../mixins/config' as *;
+@use '../mixins/mixins' as *;
+
+.fade-in-linear-enter-active,
+.fade-in-linear-leave-active {
+    transition: getCssVar('transition-fade', 'linear');
+}
+
+.fade-in-linear-enter-from,
+.fade-in-linear-leave-to {
+    opacity: 0;
+}
+
+.#{$namespace}-fade-in-linear-enter-active,
+.#{$namespace}-fade-in-linear-leave-active {
+    transition: getCssVar('transition-fade', 'linear');
+}
+.#{$namespace}-fade-in-linear-enter-from,
+.#{$namespace}-fade-in-linear-leave-to {
+    opacity: 0;
+}
+
+.#{$namespace}-fade-in-enter-active,
+.#{$namespace}-fade-in-leave-active {
+    transition: all getCssVar('transition-duration') cubic-bezier(0.55, 0, 0.1, 1);
+}
+.#{$namespace}-fade-in-enter-from,
+.#{$namespace}-fade-in-leave-active {
+    opacity: 0;
+}
+
+.#{$namespace}-zoom-in-center-enter-active,
+.#{$namespace}-zoom-in-center-leave-active {
+    transition: all getCssVar('transition-duration') cubic-bezier(0.55, 0, 0.1, 1);
+}
+.#{$namespace}-zoom-in-center-enter-from,
+.#{$namespace}-zoom-in-center-leave-active {
+    opacity: 0;
+    transform: scaleX(0);
+}
+
+.#{$namespace}-zoom-in-top-enter-active,
+.#{$namespace}-zoom-in-top-leave-active {
+    opacity: 1;
+    transform: scaleY(1);
+    transition: getCssVar('transition-md-fade');
+    transform-origin: center top;
+
+    &[data-popper-placement^='top'] {
+        transform-origin: center bottom;
+    }
+}
+.#{$namespace}-zoom-in-top-enter-from,
+.#{$namespace}-zoom-in-top-leave-active {
+    opacity: 0;
+    transform: scaleY(0);
+}
+
+.#{$namespace}-zoom-in-bottom-enter-active,
+.#{$namespace}-zoom-in-bottom-leave-active {
+    opacity: 1;
+    transform: scaleY(1);
+    transition: getCssVar('transition-md-fade');
+    transform-origin: center bottom;
+}
+.#{$namespace}-zoom-in-bottom-enter-from,
+.#{$namespace}-zoom-in-bottom-leave-active {
+    opacity: 0;
+    transform: scaleY(0);
+}
+
+.#{$namespace}-zoom-in-left-enter-active,
+.#{$namespace}-zoom-in-left-leave-active {
+    opacity: 1;
+    transform: scale(1, 1);
+    transition: getCssVar('transition-md-fade');
+    transform-origin: top left;
+}
+.#{$namespace}-zoom-in-left-enter-from,
+.#{$namespace}-zoom-in-left-leave-active {
+    opacity: 0;
+    transform: scale(0.45, 0.45);
+}
+
+.collapse-transition {
+    transition: getCssVar('transition-duration') height ease-in-out, getCssVar('transition-duration') padding-top ease-in-out,
+        getCssVar('transition-duration') padding-bottom ease-in-out;
+}
+
+.#{$namespace}-collapse-transition-leave-active,
+.#{$namespace}-collapse-transition-enter-active {
+    transition: getCssVar('transition-duration') max-height ease-in-out, getCssVar('transition-duration') padding-top ease-in-out,
+        getCssVar('transition-duration') padding-bottom ease-in-out;
+}
+
+.#{$namespace}-menu-collapse-enter-active,
+.#{$namespace}-menu-collapse-leave-active {
+    animation-duration: 0.3s;
+    animation-fill-mode: both;
+    animation-play-state: paused;
+}
+
+.#{$namespace}-menu-collapse-enter-from {
+    // opacity: 0;
+    animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
+    animation-name: rSlideUpIn;
+    animation-play-state: running;
+}
+
+.#{$namespace}-menu-collapse-leave-active {
+    animation-name: treeNodeLeave;
+    animation-play-state: running;
+    pointer-events: none;
+}
+
+.#{$namespace}-menu-collapse-leave-to {
+    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+}
+
+.horizontal-collapse-transition {
+    transition: getCssVar('transition-duration') width ease-in-out, getCssVar('transition-duration') padding-left ease-in-out,
+        getCssVar('transition-duration') padding-right ease-in-out;
+}
+
+.#{$namespace}-list-enter-active,
+.#{$namespace}-list-leave-active {
+    transition: all 1s;
+}
+
+.#{$namespace}-list-enter-from,
+.#{$namespace}-list-leave-to {
+    opacity: 0;
+    transform: translateY(-30px);
+}
+
+.#{$namespace}-list-leave-active {
+    position: absolute !important;
+}
+
+.#{$namespace}-opacity-transition {
+    transition: opacity getCssVar('transition-duration') cubic-bezier(0.55, 0, 0.1, 1);
+}