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

package/theme-chalk/calendar/date-table.scss--bak

@@ -0,0 +1,156 @@
+@use '../mixins/config' as *;
+
+.#{$namespace}-date-table {
+    font-size: 12px;
+    user-select: none;
+
+    &.is-week-mode {
+        .#{$namespace}-date-table__row {
+            &:hover {
+                .#{$namespace}-date-table-cell {
+                    background-color: #f2f6fc;
+                }
+                td.available:hover {
+                    color: #606266;
+                }
+                td:first-child .#{$namespace}-date-table-cell {
+                    margin-left: 5px;
+                    border-top-left-radius: 15px;
+                    border-bottom-left-radius: 15px;
+                }
+                td:last-child .#{$namespace}-date-table-cell {
+                    margin-right: 5px;
+                    border-top-right-radius: 15px;
+                    border-bottom-right-radius: 15px;
+                }
+            }
+
+            &.current .#{$namespace}-date-table-cell {
+                background-color: #f2f6fc;
+            }
+        }
+    }
+
+    td {
+        width: 32px;
+        height: 30px;
+        padding: 4px 0;
+        box-sizing: border-box;
+        text-align: center;
+        cursor: pointer;
+        position: relative;
+
+        .#{$namespace}-date-table-cell {
+            height: 30px;
+            padding: 3px 0;
+            box-sizing: border-box;
+            .#{$namespace}-date-table-cell__text {
+                width: 24px;
+                height: 24px;
+                display: block;
+                margin: 0 auto;
+                line-height: 24px;
+                position: absolute;
+                left: 50%;
+                transform: translateX(-50%);
+                border-radius: 50%;
+                font-size: 14px;
+            }
+        }
+
+        &.next-month,
+        &.prev-month {
+            color: var(--#{$namespace}-datepicker-off-text-color);
+
+            &:hover .#{$namespace}-date-table-cell__text {
+                background: var(--#{$namespace}-fill-color-light);
+            }
+        }
+
+        &.today {
+            position: relative;
+
+            .#{$namespace}-date-table-cell__text {
+                color: var(--#{$namespace}-color-primary);
+                font-weight: bold;
+            }
+            &.start-date .#{$namespace}-date-table-cell__text,
+            &.end-date .#{$namespace}-date-table-cell__text {
+                color: #ffffff;
+            }
+        }
+
+        &.available:hover .#{$namespace}-date-table-cell__text {
+            color: var(--#{$namespace}-datepicker-hover-text-color);
+            background: var(--#{$namespace}-fill-color-light);
+        }
+
+        &.in-range .#{$namespace}-date-table-cell {
+            background-color: var(--#{$namespace}-datepicker-inrange-bg-color);
+            &:hover {
+                background-color: var(--#{$namespace}-datepicker-inrange-bg-color);
+                color: var(--#{$namespace}-datepicker-hover-text-color);
+            }
+        }
+
+        &.current:not(.disabled) .#{$namespace}-date-table-cell__text {
+            color: #ffffff;
+            background: var(--#{$namespace}-bg-color-primary, var(--#{$namespace}-color-primary));
+        }
+
+        &.start-date .#{$namespace}-date-table-cell__text,
+        &.end-date .#{$namespace}-date-table-cell__text {
+            background: var(--#{$namespace}-bg-color-primary, var(--#{$namespace}-color-primary)) !important;
+            color: #ffffff !important;
+        }
+
+        &.start-date .#{$namespace}-date-table-cell {
+            margin-left: 5px;
+            border-top-left-radius: 15px;
+            border-bottom-left-radius: 15px;
+        }
+
+        &.end-date .#{$namespace}-date-table-cell {
+            margin-right: 5px;
+            border-top-right-radius: 15px;
+            border-bottom-right-radius: 15px;
+        }
+
+        &.disabled .#{$namespace}-date-table-cell {
+            background-color: var(--#{$namespace}-fill-color-light);
+            opacity: 1;
+            cursor: not-allowed;
+            color: var(--#{$namespace}-datepicker-off-text-color);
+        }
+
+        &.selected .#{$namespace}-date-table-cell {
+            margin-left: 5px;
+            margin-right: 5px;
+            background-color: #f2f6fc;
+            border-radius: 15px;
+            &:hover {
+                background-color: #f2f6fc;
+            }
+        }
+
+        &.selected .#{$namespace}-date-table-cell__text {
+            background: var(--#{$namespace}-bg-color-primary, var(--#{$namespace}-color-primary));
+            color: #ffffff;
+            border-radius: 15px;
+        }
+
+        &.week {
+            font-size: 80%;
+            color: #606266;
+        }
+    }
+
+    th {
+        padding: 5px;
+        color: var(--#{$namespace}-datepicker-header-text-color);
+        font-size: 14px;
+        font-weight: 600;
+        border-bottom: solid 1px var(--#{$namespace}-border-color-light);
+        text-align: center;
+    }
+}

package/theme-chalk/calendar/index.scss

@@ -1,6 +1,6 @@
-@import './date-picker';
-@import './picker-panel';
-@import './year-table';
-@import './month-table';
-@import './date-table';
-@import './date-range-picker';
+@use './date-picker';
+@use './picker-panel';
+@use './year-table';
+@use './month-table';
+@use './date-table';
+@use './date-range-picker';

package/theme-chalk/calendar/month-table.scss

@@ -1,4 +1,4 @@
-@use '../common/var';
+@use '../mixins/config' as *;
 
 .#{$namespace}-month-table {
     font-size: 12px;

package/theme-chalk/calendar/picker-panel.scss

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

package/theme-chalk/calendar/year-table.scss

@@ -1,4 +1,4 @@
-@use '../common/var';
+@use '../mixins/config' as *;
 
 .#{$namespace}-year-table {
     font-size: 12px;

package/theme-chalk/{card/index.scss → card.scss}

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

package/theme-chalk/{carousel/index.scss → carousel.scss}

@@ -1,4 +1,4 @@
-@use '../common/var';
+@use './mixins/config' as *;
 
 .#{$namespace}-carousel__item {
     position: absolute;

package/theme-chalk/{cascader/cascader-panel.scss → 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/theme-chalk/{cascader/cascader.scss → cascader.scss}

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

package/theme-chalk/{checkbox-button/index.scss → 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/theme-chalk/{checkbox-group/index.scss → checkbox-group.scss}

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

package/theme-chalk/{checkbox/index.scss → 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);

package/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/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/theme-chalk/{collapse/index.scss → 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/theme-chalk/{color-picker/index.scss → 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);
             }
         }
     }