@qsxy/element-plus-react 1.0.0-next.2 → 1.0.0-next.21

package/theme-chalk/carousel.scss

@@ -0,0 +1,237 @@
+@use './mixins/config' as *;
+
+.#{$namespace}-carousel__item {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    display: inline-block;
+    overflow: hidden;
+    z-index: calc(var(--#{$namespace}-index-normal) - 1);
+
+    &.is-active {
+        z-index: calc(var(--#{$namespace}-index-normal) - 1);
+    }
+
+    &.is-animating {
+        transition: transform 0.4s ease-in-out;
+    }
+}
+
+.#{$namespace}-carousel__item--card {
+    width: 50%;
+    transition: transform 0.4s ease-in-out;
+
+    &.is-in-stage {
+        cursor: pointer;
+        z-index: var(--#{$namespace}-index-normal);
+    }
+
+    &.is-in-stage:hover .#{$namespace}-carousel__mask,
+    &.is-in-stage.is-hover .#{$namespace}-carousel__mask {
+        opacity: 0.12;
+    }
+
+    &.is-active {
+        z-index: calc(var(--#{$namespace}-index-normal) + 1);
+    }
+}
+
+.#{$namespace}-carousel__item--card-vertical {
+    width: 100%;
+    height: 50%;
+}
+
+.#{$namespace}-carousel__mask {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    background-color: var(--#{$namespace}-color-white);
+    opacity: 0.24;
+    transition: var(--#{$namespace}-transition-duration-fast);
+}
+
+.#{$namespace}-carousel {
+    --#{$namespace}-carousel-arrow-font-size: 12px;
+    --#{$namespace}-carousel-arrow-size: 36px;
+    --#{$namespace}-carousel-arrow-background: rgba(31, 45, 61, 0.11);
+    --#{$namespace}-carousel-arrow-hover-background: rgba(31, 45, 61, 0.23);
+    --#{$namespace}-carousel-indicator-width: 30px;
+    --#{$namespace}-carousel-indicator-height: 2px;
+    --#{$namespace}-carousel-indicator-padding-horizontal: 4px;
+    --#{$namespace}-carousel-indicator-padding-vertical: 12px;
+    --#{$namespace}-carousel-indicator-out-color: var(--#{$namespace}-border-color-hover);
+    position: relative;
+}
+
+.#{$namespace}-carousel--horizontal,
+.#{$namespace}-carousel--vertical {
+    overflow: hidden;
+}
+
+.#{$namespace}-carousel__container {
+    position: relative;
+    height: 300px;
+}
+
+.#{$namespace}-carousel__arrow {
+    border: none;
+    outline: none;
+    padding: 0;
+    margin: 0;
+    height: var(--#{$namespace}-carousel-arrow-size);
+    width: var(--#{$namespace}-carousel-arrow-size);
+    cursor: pointer;
+    transition: var(--#{$namespace}-transition-duration);
+    border-radius: 50%;
+    background-color: var(--#{$namespace}-carousel-arrow-background);
+    color: #fff;
+    position: absolute;
+    top: 50%;
+    z-index: 10;
+    transform: translateY(-50%);
+    text-align: center;
+    font-size: var(--#{$namespace}-carousel-arrow-font-size);
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+
+    &:hover {
+        background-color: var(--#{$namespace}-carousel-arrow-hover-background);
+    }
+
+    & i {
+        cursor: pointer;
+    }
+}
+
+.#{$namespace}-carousel__arrow--left {
+    left: 16px;
+}
+
+.#{$namespace}-carousel__arrow--right {
+    right: 16px;
+}
+
+.#{$namespace}-carousel__indicators {
+    position: absolute;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    z-index: calc(var(--#{$namespace}-index-normal) + 1);
+}
+
+.#{$namespace}-carousel__indicators--horizontal {
+    bottom: 0;
+    left: 50%;
+    transform: translate(-50%);
+}
+
+.#{$namespace}-carousel__indicators--vertical {
+    right: 0;
+    top: 50%;
+    transform: translateY(-50%);
+}
+
+.#{$namespace}-carousel__indicators--outside {
+    bottom: calc(var(--#{$namespace}-carousel-indicator-height) + var(--#{$namespace}-carousel-indicator-padding-vertical) * 2);
+    text-align: center;
+    position: static;
+    transform: none;
+
+    .#{$namespace}-carousel__indicator:hover button {
+        opacity: 0.64;
+    }
+
+    button {
+        background-color: var(--#{$namespace}-carousel-indicator-out-color);
+        opacity: 0.24;
+    }
+}
+
+.#{$namespace}-carousel__indicators--right {
+    right: 0;
+}
+
+.#{$namespace}-carousel__indicators--labels {
+    left: 0;
+    right: 0;
+    transform: none;
+    text-align: center;
+
+    .#{$namespace}-carousel__button {
+        height: auto;
+        width: auto;
+        padding: 2px 18px;
+        font-size: 12px;
+        color: #000;
+    }
+
+    .#{$namespace}-carousel__indicator {
+        padding: 6px 4px;
+    }
+}
+
+.#{$namespace}-carousel__indicator {
+    background-color: transparent;
+    cursor: pointer;
+
+    &:hover button {
+        opacity: 0.72;
+    }
+}
+
+.#{$namespace}-carousel__indicator--horizontal {
+    display: inline-block;
+    padding: var(--#{$namespace}-carousel-indicator-padding-vertical) var(--#{$namespace}-carousel-indicator-padding-horizontal);
+}
+
+.#{$namespace}-carousel__indicator--vertical {
+    padding: var(--#{$namespace}-carousel-indicator-padding-horizontal) var(--#{$namespace}-carousel-indicator-padding-vertical);
+
+    .#{$namespace}-carousel__button {
+        width: var(--#{$namespace}-carousel-indicator-height);
+        height: calc(var(--#{$namespace}-carousel-indicator-width) / 2);
+    }
+}
+
+.#{$namespace}-carousel__indicator.is-active button {
+    opacity: 1;
+}
+
+.#{$namespace}-carousel__button {
+    display: block;
+    opacity: 0.48;
+    width: var(--#{$namespace}-carousel-indicator-width);
+    height: var(--#{$namespace}-carousel-indicator-height);
+    background-color: #fff;
+    border: none;
+    outline: none;
+    padding: 0;
+    margin: 0;
+    cursor: pointer;
+    transition: var(--#{$namespace}-transition-duration);
+}
+
+.carousel-arrow-left-enter-from,
+.carousel-arrow-left-leave-active {
+    transform: translateY(-50%) translate(-10px);
+    opacity: 0;
+}
+
+.carousel-arrow-right-enter-from,
+.carousel-arrow-right-leave-active {
+    transform: translateY(-50%) translate(10px);
+    opacity: 0;
+}
+
+.#{$namespace}-transitioning {
+    filter: url(#elCarouselHorizontal);
+}
+
+.#{$namespace}-transitioning-vertical {
+    filter: url(#elCarouselVertical);
+}

package/{dist/theme-chalk/cascader → theme-chalk}/cascader-panel.scss

@@ -1,4 +1,4 @@
-@use '../common/var';
+@use './mixins/config' as *;
 
 .#{$namespace}-cascader-panel {
     --#{$namespace}-cascader-menu-text-color: var(--#{$namespace}-text-color-regular);

package/{dist/theme-chalk/cascader → theme-chalk}/cascader.scss

@@ -1,4 +1,4 @@
-@use '../common/var';
+@use './mixins/config' as *;
 
 .#{$namespace}-cascader {
     display: inline-block;

package/{dist/theme-chalk/checkbox-button/index.scss → theme-chalk/checkbox-button.scss}

@@ -1,4 +1,4 @@
-@use '../common/var';
+@use './mixins/config' as *;
 
 .#{$namespace}-checkbox-button {
     --#{$namespace}-checkbox-button-checked-bg-color: var(--#{$namespace}-color-primary);

package/{dist/theme-chalk/checkbox-group/index.scss → theme-chalk/checkbox-group.scss}

@@ -1,4 +1,4 @@
-@use '../common/var';
+@use './mixins/config' as *;
 
 .#{$namespace}-checkbox-group {
     font-size: 0;

package/{dist/theme-chalk/checkbox/index.scss → theme-chalk/checkbox.scss}

@@ -1,4 +1,5 @@
-@use '../common/var';
+@use './common/var' as *;
+@use './mixins/config' as *;
 
 .#{$namespace}-checkbox {
     --#{$namespace}-checkbox-text-color: var(--#{$namespace}-text-color-regular);
@@ -133,7 +134,7 @@
             color: var(--#{$namespace}-checkbox-checked-icon-color);
 
             &:after {
-                font-family: 'R Icons';
+                font-family: $fa-font-family;
                 content: '\f068';
                 font-weight: normal;
                 display: block;
@@ -152,7 +153,7 @@
         }
 
         &:checked + .#{$namespace}-checkbox__inner:after {
-            font-family: 'R Icons';
+            font-family: $fa-font-family;
             content: '\f00c';
             font-weight: normal;
             display: block;

package/{dist/theme-chalk → theme-chalk}/col/_mixins.scss

@@ -1,5 +1,7 @@
 @use 'sass:math';
-@use '../common/var';
+@use 'sass:map';
+@use 'sass:string';
+@use '../mixins/config' as *;
 
 // Break-point
 $sm: 768px !default;
@@ -18,8 +20,8 @@ $breakpoints: (
 // Break-points
 @mixin res($key, $map: $breakpoints) {
     // loop breakpoint Map, return if present
-    @if map-has-key($map, $key) {
-        @media only screen and #{unquote(map-get($map, $key))} {
+    @if map.has-key($map, $key) {
+        @media only screen and #{string.unquote(map.get($map, $key))} {
             @content;
         }
     } @else {

package/{dist/theme-chalk → theme-chalk}/col/index.scss

@@ -1,6 +1,6 @@
 @use 'sass:math';
-@use '../common/var';
-@import './mixins';
+@use '../mixins/config' as *;
+@use './mixins' as *;
 
 [class*='#{$namespace}-col-'] {
     box-sizing: border-box;

package/{dist/theme-chalk/collapse/index.scss → theme-chalk/collapse.scss}

@@ -1,4 +1,4 @@
-@use '../common/var';
+@use './mixins/config' as *;
 
 .#{$namespace}-collapse {
     --#{$namespace}-collapse-border-color: var(--#{$namespace}-border-color-lighter);

package/theme-chalk/color/index.scss

@@ -0,0 +1,20 @@
+@use 'sass:color';
+@use 'sass:string';
+
+@function rgb2hex($color) {
+  @return string.unquote('#' + #{string.slice(color.ie-hex-str($color), 4)});
+}
+
+// rgba color above solid color
+@function mix-overlay-color($upper, $lower) {
+  $opacity: color.alpha($upper);
+
+  $red: color.channel($upper, 'red') * $opacity + color.channel($lower, 'red') *
+    (1 - $opacity);
+  $green: color.channel($upper, 'green') * $opacity +
+    color.channel($lower, 'green') * (1 - $opacity);
+  $blue: color.channel($upper, 'blue') * $opacity +
+    color.channel($lower, 'blue') * (1 - $opacity);
+
+  @return rgb2hex(rgb($red, $green, $blue));
+}

package/{dist/theme-chalk/color-picker/index.scss → theme-chalk/color-picker.scss}

@@ -1,4 +1,4 @@
-@use '../common/var';
+@use './mixins/config' as *;
 @use 'sass:map';
 
 $color-picker-size: () !default;
@@ -233,8 +233,8 @@ $color-picker-size: (
             }
 
             .#{$namespace}-color-picker__mask {
-                height: map.get($color-picker-size, $size)-2px;
-                width: map.get($color-picker-size, $size)-2px;
+                height: calc(map.get($color-picker-size, $size) - 2px);
+                width: calc(map.get($color-picker-size, $size) - 2px);
             }
         }
     }

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)))};
+    }
+}