@qsxy/element-plus-react 1.0.1 → 1.0.3

package/theme-chalk/common/transition.scss

@@ -1,142 +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);
-}
+@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);
+}

package/theme-chalk/common/var.scss

@@ -436,7 +436,7 @@ $select-dropdown: map.merge(
         'empty-color': getCssVar('text-color-secondary'),
         'max-height': 274px,
         'padding': 6px 0,
-        'empty-padding': 10px 0,
+        'empty-padding': 4px 0,
         'header-padding': 10px,
         'footer-padding': 10px,
         'border': 1px solid getCssVar('border-color-light'),

package/theme-chalk/container.scss

@@ -1,14 +1,14 @@
-@use 'mixins/mixins' as *;
-
-@include b(container) {
-  display: flex;
-  flex-direction: row;
-  flex: 1;
-  flex-basis: auto;
-  box-sizing: border-box;
-  min-width: 0;
-
-  @include when(vertical) {
-    flex-direction: column;
-  }
-}
+@use 'mixins/mixins' as *;
+
+@include b(container) {
+  display: flex;
+  flex-direction: row;
+  flex: 1;
+  flex-basis: auto;
+  box-sizing: border-box;
+  min-width: 0;
+
+  @include when(vertical) {
+    flex-direction: column;
+  }
+}

package/theme-chalk/dark/css-vars.scss

@@ -1,39 +1,39 @@
-// CSS3 var
-@use './var' as *;
-@use '../mixins/_var.scss' as *;
-@use '../mixins/mixins.scss' as *;
-
-html.dark {
-  color-scheme: dark;
-
-  // hex colors
-  @each $type in (primary, success, warning, danger, error, info) {
-    @include set-css-color-type($colors, $type);
-  }
-
-  // --el-box-shadow-#{$type}
-  @include set-component-css-var('box-shadow', $box-shadow);
-
-  // color-scheme
-  // Background --el-bg-color-#{$type}
-  @include set-component-css-var('bg-color', $bg-color);
-  // --el-text-color-#{$type}
-  @include set-component-css-var('text-color', $text-color);
-  // --el-border-color-#{$type}
-  @include set-component-css-var('border-color', $border-color);
-  // Fill --el-fill-color-#{$type}
-  @include set-component-css-var('fill-color', $fill-color);
-  @include set-component-css-var('mask-color', $mask-color);
-}
-
-@include dark(button) {
-  @include set-component-css-var('button', $button);
-}
-
-@include dark(card) {
-  @include set-component-css-var('card', $card);
-}
-
-@include dark(empty) {
-  @include set-component-css-var('empty', $empty);
-}
+// CSS3 var
+@use './var' as *;
+@use '../mixins/_var.scss' as *;
+@use '../mixins/mixins.scss' as *;
+
+html.dark {
+  color-scheme: dark;
+
+  // hex colors
+  @each $type in (primary, success, warning, danger, error, info) {
+    @include set-css-color-type($colors, $type);
+  }
+
+  // --el-box-shadow-#{$type}
+  @include set-component-css-var('box-shadow', $box-shadow);
+
+  // color-scheme
+  // Background --el-bg-color-#{$type}
+  @include set-component-css-var('bg-color', $bg-color);
+  // --el-text-color-#{$type}
+  @include set-component-css-var('text-color', $text-color);
+  // --el-border-color-#{$type}
+  @include set-component-css-var('border-color', $border-color);
+  // Fill --el-fill-color-#{$type}
+  @include set-component-css-var('fill-color', $fill-color);
+  @include set-component-css-var('mask-color', $mask-color);
+}
+
+@include dark(button) {
+  @include set-component-css-var('button', $button);
+}
+
+@include dark(card) {
+  @include set-component-css-var('card', $card);
+}
+
+@include dark(empty) {
+  @include set-component-css-var('empty', $empty);
+}