@qsxy/element-plus-react 1.0.3 → 2.0.0

package/theme-chalk/time-range-picker.scss

@@ -27,6 +27,6 @@
 
     &__body {
         border-radius: 2px;
-        border: 1px solid #e4e7ed;
+        border: 1px solid var(--#{$namespace}-border-color-light);
     }
 }

package/theme-chalk/tooltip.scss

@@ -3,10 +3,10 @@
 .#{$namespace}-tooltip__popper {
     position: absolute;
     border-radius: 4px;
-    padding: 10px;
+    // padding: 10px;
     z-index: 2000;
     font-size: 12px;
-    line-height: 1.2;
+    // line-height: 1.2;
     min-width: 10px;
     word-wrap: break-word;
     cursor: text !important;

package/theme-chalk/tour.scss

@@ -0,0 +1,170 @@
+@use 'sass:map';
+
+@use 'mixins/mixins' as *;
+@use 'mixins/var' as *;
+@use 'common/var' as *;
+
+@include b(tour) {
+    @include set-component-css-var('tour', $tour);
+
+    @include e(hollow) {
+        transition: all getCssVar('transition-duration') ease;
+    }
+
+    @include e(content) {
+        border-radius: getCssVar('tour-border-radius');
+        width: var(#{getCssVarName('tour-width')});
+        padding: getCssVar('tour-padding-primary');
+        background: getCssVar('tour-bg-color');
+        box-shadow: getCssVar('box-shadow-light');
+        box-sizing: border-box;
+        overflow-wrap: break-word;
+        outline: none;
+
+        $content-selector: &;
+
+        $sides: (
+            'top': 'bottom',
+            'bottom': 'top',
+            'left': 'right',
+            'right': 'left',
+        );
+
+        @include e(arrow) {
+            position: absolute;
+            background: getCssVar('tour-bg-color');
+            width: 10px;
+            height: 10px;
+            pointer-events: none;
+            transform: rotate(45deg);
+            box-sizing: border-box;
+
+            @each $side, $adjacency in ('top': 'left', 'bottom': 'right', 'left': 'bottom', 'right': 'top') {
+                #{$content-selector}[data-side^='#{$side}'] & {
+                    border-#{$side}-color: transparent;
+                    border-#{$adjacency}-color: transparent;
+                }
+            }
+
+            @each $side, $opposite in $sides {
+                #{$content-selector}[data-side^='#{$side}'] & {
+                    #{$opposite}: -5px;
+                }
+            }
+        }
+
+        @include e(closebtn) {
+            position: absolute;
+            top: 0;
+            right: 0;
+            padding: 0;
+            width: 40px;
+            height: 40px;
+            background: transparent;
+            border: none;
+            outline: none;
+            cursor: pointer;
+            font-size: var(#{getCssVarName('message-close-size')}, map.get($message, 'close-size'));
+
+            .#{$namespace}-tour__close {
+                color: getCssVar('tour-close-color');
+                font-size: inherit;
+            }
+
+            &:focus,
+            &:hover {
+                .#{$namespace}-tour__close {
+                    color: getCssVar('color', 'primary');
+                }
+            }
+        }
+
+        @include e(header) {
+            padding-bottom: getCssVar('tour-padding-primary');
+
+            &.show-close {
+                padding-right: calc(getCssVar('tour-padding-primary') + var(#{getCssVarName('message-close-size')}, map.get($message, 'close-size')));
+            }
+        }
+
+        @include e(title) {
+            line-height: getCssVar('tour-font-line-height');
+            font-size: getCssVar('tour-title-font-size');
+            color: getCssVar('tour-title-text-color');
+            font-weight: getCssVar('tour-title-font-weight');
+        }
+
+        @include e(body) {
+            color: getCssVar('tour-text-color');
+            font-size: getCssVar('tour-font-size');
+            img,
+            video {
+                max-width: 100%;
+            }
+        }
+
+        @include e(footer) {
+            padding-top: getCssVar('tour-padding-primary');
+            box-sizing: border-box;
+            display: flex;
+            justify-content: space-between;
+        }
+
+        @include b(tour-indicators) {
+            display: inline-block;
+            flex: 1;
+        }
+
+        @include b(tour-indicator) {
+            width: 6px;
+            height: 6px;
+            display: inline-block;
+            border-radius: 50%;
+            background: getCssVar('color', 'info-light-9');
+            margin-right: 6px;
+
+            @include when(active) {
+                background: getCssVar('color', 'primary');
+            }
+        }
+    }
+
+    &.#{$namespace}-tour--primary {
+        @include set-css-var-value('tour-title-text-color', #fff);
+        @include set-css-var-value('tour-text-color', #fff);
+        @include set-css-var-value('tour-bg-color', getCssVar('color', 'primary'));
+        @include set-css-var-value('tour-close-color', #fff);
+
+        .#{$namespace}-tour__closebtn {
+            &:focus,
+            &:hover {
+                .#{$namespace}-tour__close {
+                    color: getCssVar('tour-title-text-color');
+                }
+            }
+        }
+
+        .#{$namespace}-button--default {
+            color: getCssVar('color', 'primary');
+            border-color: getCssVar('color', 'primary');
+            background: #fff;
+        }
+
+        .#{$namespace}-button--primary {
+            border-color: #fff;
+        }
+
+        @include b(tour-indicator) {
+            background: rgba(255, 255, 255, 0.15);
+            @include when(active) {
+                background: #fff;
+            }
+        }
+    }
+}
+
+@include b(tour-parent) {
+    @include m(hidden) {
+        overflow: hidden;
+    }
+}

package/theme-chalk/transfer.scss

@@ -1,7 +1,7 @@
 @use './mixins/config' as *;
 
 .#{$namespace}-transfer {
-    --#{$namespace}-transfer-border-color: var(--#{$namespace}-border-color);
+    --#{$namespace}-transfer-border-color: var(--#{$namespace}-border-color-lighter);
     --#{$namespace}-transfer-border-radius: 4px;
     --#{$namespace}-transfer-panel-width: 200px;
     --#{$namespace}-transfer-panel-header-height: 40px;
@@ -36,7 +36,6 @@
         display: flex;
         flex-direction: column;
         width: var(--#{$namespace}-transfer-panel-width);
-        height: var(--#{$namespace}-transfer-panel-body-height);
         border: 1px solid var(--#{$namespace}-transfer-border-color);
         border-radius: 4px;
 
@@ -56,7 +55,7 @@
             flex: none;
             align-items: center;
             height: var(--#{$namespace}-transfer-panel-header-height);
-            padding: 8px 12px 9px;
+            padding-left: 15px;
             color: var(--#{$namespace}-text-color-regular);
             background: var(--#{$namespace}-transfer-panel-header-bg-color);
             border-bottom: 1px solid;
@@ -64,19 +63,43 @@
             border-radius: var(--#{$namespace}-transfer-border-radius) var(--#{$namespace}-transfer-border-radius) 0 0;
 
             & > *:not(:last-child) {
-                margin-right: 4px;
+                display: flex;
+                flex: 1;
+                align-items: center;
+                min-width: 0;
+                font-size: 16px;
+                color: var(--#{$namespace}-text-color-primary);
+                font-weight: 400;
             }
 
             & > * {
                 flex: none;
             }
 
-            .#{$namespace}-transfer-list-header-title {
-                flex: auto;
+            .#{$namespace}-checkbox .#{$namespace}-checkbox__label {
+                display: flex;
+                flex: 1;
+                align-items: center;
+                min-width: 0;
+                font-size: 16px;
+                color: var(--#{$namespace}-text-color-primary);
+                font-weight: 400;
+            }
+
+            .#{$namespace}-transfer-list__header-title {
                 overflow: hidden;
-                white-space: nowrap;
-                text-align: right;
                 text-overflow: ellipsis;
+                white-space: nowrap;
+                flex: 1;
+                min-width: 0;
+            }
+
+            .#{$namespace}-transfer-list__header-count {
+                flex-shrink: 0;
+                margin-left: 8px;
+                margin-right: 15px;
+                color: var(--#{$namespace}-text-color-secondary);
+                font-size: 12px;
             }
 
             .#{$namespace}-transfer-list-header-dropdown {
@@ -96,6 +119,7 @@
             flex-direction: column;
             overflow: hidden;
             font-size: 14px;
+            height: var(--#{$namespace}-transfer-panel-body-height);
 
             .#{$namespace}-transfer-list-body-search-wrapper {
                 position: relative;
@@ -205,26 +229,28 @@
             flex: none;
             width: 100%;
             margin: auto 0;
-            color: fade(#000, 25%);
+            color: var(--#{$namespace}-text-color-secondary);
             text-align: center;
         }
 
         .#{$namespace}-transfer-list-footer {
             border-top: 1px solid #e4e7ed;
+            height: var(--#{$namespace}-transfer-panel-footer-height);
+            line-height: var(--#{$namespace}-transfer-panel-footer-height);
         }
     }
 
     .#{$namespace}-transfer-operation {
         display: flex;
         flex: none;
-        flex-direction: column;
+        // flex-direction: column;
         align-self: center;
-        margin: 0 8px;
+        margin: 0 30px;
         vertical-align: middle;
 
         .#{$namespace}-button {
             display: block;
-            margin-left: 0;
+            // margin-left: 0;
 
             &:first-child {
                 margin-bottom: 4px;

package/theme-chalk/tree-select.scss

@@ -1,41 +1,41 @@
-@use 'mixins/mixins' as *;
-@use 'mixins/var' as *;
-@use 'common/var' as *;
-
-@include b(tree-select) {
-  @include set-component-css-var('tree', $tree);
-}
-
-@include b(tree-select) {
-  @include e(popper) {
-    // padding-left same with select option
-    .#{$namespace}-tree-node__expand-icon {
-      margin-left: 8px;
-    }
-
-    // remove icon when show checkbox
-    .#{$namespace}-tree-node.is-checked
-      > .#{$namespace}-tree-node__content
-      .#{$namespace}-select-dropdown__item.selected::after {
-      content: none;
-    }
-
-    .#{$namespace}-select-dropdown__list
-      > .#{$namespace}-select-dropdown__item {
-      padding-left: 32px;
-    }
-
-    .#{$namespace}-select-dropdown__item {
-      flex: 1;
-      background: transparent !important;
-
-      // padding-left move to `el-tree-node__expand-icon`
-      padding-left: 0;
-
-      // fix: select height > tree node height
-      // https://github.com/yujinpan/el-select-tree/pull/33
-      height: 20px;
-      line-height: 20px;
-    }
-  }
-}
+@use 'mixins/mixins' as *;
+@use 'mixins/var' as *;
+@use 'common/var' as *;
+
+@include b(tree-select) {
+  @include set-component-css-var('tree', $tree);
+}
+
+@include b(tree-select) {
+  @include e(popper) {
+    // padding-left same with select option
+    .#{$namespace}-tree-node__expand-icon {
+      margin-left: 8px;
+    }
+
+    // remove icon when show checkbox
+    .#{$namespace}-tree-node.is-checked
+      > .#{$namespace}-tree-node__content
+      .#{$namespace}-select-dropdown__item.selected::after {
+      content: none;
+    }
+
+    .#{$namespace}-select-dropdown__list
+      > .#{$namespace}-select-dropdown__item {
+      padding-left: 32px;
+    }
+
+    .#{$namespace}-select-dropdown__item {
+      flex: 1;
+      background: transparent !important;
+
+      // padding-left move to `el-tree-node__expand-icon`
+      padding-left: 0;
+
+      // fix: select height > tree node height
+      // https://github.com/yujinpan/el-select-tree/pull/33
+      height: 20px;
+      line-height: 20px;
+    }
+  }
+}

package/theme-chalk/virtual-list.scss

@@ -0,0 +1,40 @@
+@use 'mixins/mixins' as *;
+@use 'common/var' as *;
+
+@mixin showScrollbar {
+    @include b(virtual-scrollbar) {
+        opacity: 1;
+    }
+}
+
+@include b(vl) {
+    @include e(wrapper) {
+        position: relative;
+        &:hover {
+            @include showScrollbar();
+        }
+        &.always-on {
+            @include showScrollbar();
+        }
+    }
+}
+
+.#{$namespace}-vl__window {
+    scrollbar-width: none;
+    &::-webkit-scrollbar {
+        display: none;
+    }
+}
+@include b(virtual-scrollbar) {
+    opacity: 0;
+    transition: opacity 340ms ease-out;
+    &.always-on {
+        opacity: 1;
+    }
+}
+
+@include b(vg) {
+    @include e(wrapper) {
+        position: relative;
+    }
+}