element-plus-secondary 0.3.7 → 0.3.8

package/theme-chalk/src/checkbox.scss

@@ -66,7 +66,7 @@ $checkbox-bordered-input-width: map.merge(
     color: #fff;
     @include when(disabled) {
       @include e(label) {
-        color: #5F5F5F !important;
+        color: #5F5F5F;
       }
     }
   }
@@ -327,4 +327,79 @@ $checkbox-bordered-input-width: map.merge(
   &:last-of-type {
     margin-right: 0;
   }
+
+  @include m(dark) {
+    @include e(input) {
+      .#{$namespace}-checkbox__inner {
+        background-color: #1a1a1a;
+        border-color: #757575;
+        &:hover {
+          border-color: #3370FF;
+        }
+      }
+      @include when(disabled) {
+        
+        .#{$namespace}-checkbox__inner {
+          background-color: #373737;
+          border-color: #5F5F5F;
+  
+          &::after {
+            border-color: #373737;
+          }
+        }
+  
+        &.is-checked {
+          .#{$namespace}-checkbox__inner {
+            background-color: #5F5F5F;
+            border-color: #5F5F5F;
+  
+            &::after {
+              border-color: #373737;
+            }
+          }
+        }
+  
+        &.is-indeterminate {
+          .#{$namespace}-checkbox__inner {
+            background-color: #373737;
+            border-color: #5F5F5F;
+  
+            &::before {
+              background-color: #5F5F5F;
+              border-color: #373737;
+            }
+          }
+        }
+  
+        & + span.#{$namespace}-checkbox__label {
+          color: #BBBFC4;
+        }
+      }
+  
+      @include when(checked) {
+        .#{$namespace}-checkbox__inner {
+          background-color: #3370FF;
+          border-color: #3370FF;
+        }
+  
+      }
+      @include when(focus) {
+        // Visually distinguish when focus
+        &:not(.is-checked) {
+          .#{$namespace}-checkbox__original:not(:focus-visible) {
+            border-color: #3370FF;
+          }
+        }
+      }
+      @include when(indeterminate) {
+        .#{$namespace}-checkbox__inner {
+          background-color: #3370FF;
+          border-color: #3370FF;
+          &::before {
+            background-color: #fff;
+          }
+        }
+      }
+    }
+  }
 }

package/theme-chalk/src/color-picker.scss

@@ -3,7 +3,7 @@
 @use 'mixins/mixins' as *;
 @use 'common/var' as *;
 
-$color-picker-size: () !default;
+$color-picker-size: ('large': 32px) !default;
 $color-picker-size: map.merge($common-component-size, $color-picker-size);
 
 @mixin color-picker-thumb {
@@ -297,8 +297,8 @@ $color-picker-size: map.merge($common-component-size, $color-picker-size);
 
   @include e(mask) {
     height: 30px;
-    width: calc(100% - 5px) !important;
-    border-radius: 4px;
+    width: calc(100% - 2px) !important;
+    border-radius: 3px;
     position: absolute;
     top: 1px;
     left: 1px;
@@ -328,6 +328,35 @@ $color-picker-size: map.merge($common-component-size, $color-picker-size);
     
   }
 
+  @include when(effect) {
+    @include e(trigger) {
+      border-color: #5F5F5F;
+      &:not(.is-disabled):hover {
+        border-color: #3370FF;
+      }
+    }
+    .#{$namespace}-color-picker__color {
+      border: none;
+    }
+    &.is-disabled {
+      .#{$namespace}-color-picker__color-inner {
+        position: relative;
+        z-index: 2;
+      }
+      .#{$namespace}-color-picker__icon {
+        position: relative;
+        z-index: 2;
+      }
+      @include e(mask) {
+        background:  #373737;
+      }
+      @include e(trigger) {
+        border-color: #5F5F5F !important;
+        background-color: #5F5F5F;
+      }
+    }
+  }
+
   @include e(color) {
     position: relative;
     display: block;
@@ -382,7 +411,7 @@ $color-picker-size: map.merge($common-component-size, $color-picker-size);
 
   @include when(custom) {
     .#{$namespace}-color-picker__mask {
-      height: 24px;
+      height: 26px;
     }
     .#{$namespace}-color-picker__trigger {
       justify-content: flex-start;
@@ -395,6 +424,7 @@ $color-picker-size: map.merge($common-component-size, $color-picker-size);
       .#{$namespace}-color-picker__color {
         width: 16px;
         height: 16px;
+        border: none;
       }
 
       .#{$namespace}-color-picker__empty {
@@ -418,6 +448,25 @@ $color-picker-size: map.merge($common-component-size, $color-picker-size);
         }
       }
     }
+
+    &.#{$namespace}-color-picker--large {
+      .#{$namespace}-color-picker__mask {
+        height: 30px;
+      }
+      .#{$namespace}-color-picker__trigger {
+        height: 32px;
+        min-width: 68px;
+        padding: 6px 8px;
+  
+        .#{$namespace}-color-picker__color {
+          width: 20px;
+          height: 20px;
+        }
+        .#{$namespace}-color-picker__icon {
+          margin-left: 68px;
+        }
+      }
+    }
   }
 }
 

package/theme-chalk/src/dropdown.scss

@@ -178,9 +178,8 @@ $dropdown-menu-padding-vertical: map.merge(
     color: getCssVar('text-color', 'regular');
     cursor: pointer;
     outline: none;
-    &:not(.is-disabled):focus {
-      background-color: getCssVar('dropdown-menuItem-hover-fill');
-      color: getCssVar('dropdown-menuItem-hover-color');
+    &:not(.is-disabled):hover {
+      background-color: rgba(31, 35, 41, 0.10);
     }
 
     i {

package/theme-chalk/src/radio.scss

@@ -48,32 +48,6 @@ $radio-font-size-de: map.merge(
     }
   }
 
-  @include m(dark) {
-    @include e(label) {
-      color: #fff;
-    }
-    @include e(input) {
-      @include when(checked) {
-        & + .#{$namespace}-radio__label {
-          color: #fff;
-        }
-      }
-    }
-
-    @include when(disabled) {
-      @include e(label) {
-        color: #5F5F5F !important;
-      }
-      @include e(input) {
-        @include when(checked) {
-          & + .#{$namespace}-radio__label {
-            color: #5F5F5F;
-          }
-        }
-      }
-    }
-  }
-
   @include when(bordered) {
     padding: 0 map.get($checkbox-bordered-padding-right, 'default')-$border-width
       0 map.get($checkbox-bordered-padding-left, 'default')-$border-width;
@@ -247,4 +221,65 @@ $radio-font-size-de: map.merge(
       }
     }
   }
+
+  @include m(dark) {
+    @include e(inner) {
+      background-color: #1a1a1a;
+      border-color: #757575;
+  
+      &:hover {
+        border-color: #3370FF;
+      }
+  
+      &::after {
+        background-color: #fff;
+      }
+    }
+    @include e(input) {
+      & + span.#{$namespace}-radio__label {
+        color: #fff;
+      }
+      @include when(disabled) {
+        .#{$namespace}-radio__inner {
+          background-color: #373737;
+          border-color: #5F5F5F;
+  
+          &::after {
+            background-color: #373737;
+          }
+
+        }
+        &.is-checked {
+          .#{$namespace}-radio__inner {
+            background-color: #5F5F5F;
+            border-color: #5F5F5F;
+  
+            &::after {
+              background-color: #373737;
+            }
+          }
+        }
+        & + span.#{$namespace}-radio__label {
+          color: #BBBFC4;
+        }
+      }
+  
+      @include when(checked) {
+        .#{$namespace}-radio__inner {
+          background-color: #3370FF;
+          border-color: #3370FF;
+        }
+  
+        & + .#{$namespace}-radio__label {
+          color: #fff;
+        }
+      }
+  
+      @include when(focus) {
+        .#{$namespace}-radio__inner {
+          border-color: #3370FF;
+        }
+      }
+    }
+  }
 }