element-plus-secondary 0.1.3 → 0.1.5

package/theme-chalk/src/checkbox.scss

@@ -53,6 +53,11 @@ $checkbox-bordered-input-width: map.merge(
 
   @include m(dark) {
     color: #fff;
+    @include when(disabled) {
+      @include e(label) {
+        color: #5F5F5F !important;
+      }
+    }
   }
 
   @include when(bordered) {

package/theme-chalk/src/collapse.scss

@@ -21,7 +21,7 @@
   &.#{$namespace}-collapse--dark {
     @include e(header) {
       background-color: #1a1a1a;
-      border-top: 1px solid rgba(255, 255, 255, 0.15);;
+      border-top: 1px solid rgba(255, 255, 255, 0.15);
       color: #ffffff;
         @include e(arrow) {
         color: #A6A6A6;
@@ -38,6 +38,22 @@
     }
   }
 
+  &.#{$namespace}-collapse--light {
+    @include e(header) {
+      background-color: #f5f6f7;
+      @include e(arrow) {
+        color: #646A73;
+      }
+    }
+
+
+    @include e(content) {
+      border-top: 1px solid rgba(31, 35, 41, 0.15);
+      color: #646A73;
+      padding: 16px 8px;
+    }
+  }
+
   @include e(header) {
     display: flex;
     align-items: center;
@@ -86,7 +102,13 @@
     margin-bottom: -1px;
     &.#{$namespace}-collapse--dark {
       @include e(header) {
-        border-bottom: 1px solid rgba(255, 255, 255, 0.15);;
+        border-bottom: 1px solid rgba(255, 255, 255, 0.15);
+      }
+    }
+
+    &.#{$namespace}-collapse--light {
+      @include e(header) {
+        border-bottom: 1px solid (31, 35, 41, 0.15);
       }
     }
   }

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

@@ -294,8 +294,8 @@ $color-picker-size: map.merge($common-component-size, $color-picker-size);
   }
 
   @include e(mask) {
-    height: 38px;
-    width: 38px;
+    height: 30px;
+    width: 30px;
     border-radius: 4px;
     position: absolute;
     top: 1px;

package/theme-chalk/src/input-number.scss

@@ -80,29 +80,35 @@
     border-right: getCssVar('border');
   }
 
-  @include m(dark) {
-    .#{$namespace}-input-number__decrease,
-    .#{$namespace}-input-number__increase {
-      background: #292929;
-      color: #fff;
-      border-color: #5f5f5f;
+  @include when(disabled) {
+    @include e((increase, decrease)) {
+      border-color: getCssVar('disabled-border-color');
+      color: getCssVar('disabled-border-color');
+
       &:hover {
-        color: getCssVar('color-primary');
-        background-color: rgba(#3370FF, 0.2);
+        color: getCssVar('disabled-border-color');
+        cursor: not-allowed;
       }
     }
-    &.is-controls-right {
-      .#{$namespace}-input-number__decrease,
-      .#{$namespace}-input-number__increase {
-        border-color: #5f5f5f !important;
-      }
+  }
 
-      .#{$namespace}-input-number__decrease:not(.is-disabled),
+  .#{$namespace}-input-number__decrease:not(.is-disabled),
       .#{$namespace}-input-number__increase:not(.is-disabled) {
+        &::after {
+          content: '';
+          position: absolute;
+          top: 0;
+          left: -1px;
+          width: 100%;
+          display: none;
+          height: 100%;
+          pointer-events: none;
+        }
         &:hover {
-          color: getCssVar('color-primary');
-          background-color: rgba(#3370FF, 0.2);
-    
+          z-index: 10;
+          &::after {
+            display: block;
+          }
           & ~ .#{$namespace}-input:not(.is-disabled) .#{$namespace}-input__wrapper {
             box-shadow: 0 0 0 1px
               var(
@@ -113,17 +119,117 @@
           }
         }
       }
+
+
+  @include m(dark) {
+    .#{$namespace}-input-number__decrease:not(.is-disabled),
+      .#{$namespace}-input-number__increase:not(.is-disabled) {
+        &:hover {
+          color: getCssVar('color-primary');
+          background-color: rgba(#3370FF, 0.2);
+        }
+      }
+
+      &:not(.is-controls-right) {
+        .#{$namespace}-input-number__decrease:not(.is-disabled) {
+          &::after {
+            left: 0;
+            border-right: 1px solid getCssVar('color-primary');
+          }
+        }
+        .#{$namespace}-input-number__increase:not(.is-disabled) {
+          &::after {
+            border-left: 1px solid getCssVar('color-primary');
+          }
+        }
+      }
+    .#{$namespace}-input-number__decrease,
+    .#{$namespace}-input-number__increase {
+      background: #292929;
+      color: #fff;
+      border-color: #5f5f5f;
+    }
+    &.is-controls-right {
+      .#{$namespace}-input-number__decrease,
+      .#{$namespace}-input-number__increase {
+        border-color: #5f5f5f !important;
+      }
+      .#{$namespace}-input-number__decrease:not(.is-disabled) {
+        &::after {
+          border-left: 1px solid getCssVar('color-primary');
+          border-top: 1px solid getCssVar('color-primary');
+        }
+      }
+      .#{$namespace}-input-number__increase:not(.is-disabled) {
+        &::after {
+          border-left: 1px solid getCssVar('color-primary');
+          border-bottom: 1px solid getCssVar('color-primary');
+        }
+      }
+    }
+
+    @include when(disabled) {
+      @include e((increase, decrease)) {
+        border-color: #5F5F5F;
+        color: #5F5F5F;
+  
+        &:hover {
+          color: #5F5F5F;
+          background-color: #292929;
+          cursor: not-allowed;
+        }
+      }
+      .#{$namespace}-input-number__increase {
+        &:hover {
+          color: #5F5F5F !important;
+          background-color: #292929 !important;
+          cursor: not-allowed;
+        }
+      }
     }
   }
 
-  @include when(disabled) {
-    @include e((increase, decrease)) {
-      border-color: getCssVar('disabled-border-color');
-      color: getCssVar('disabled-border-color');
+  @include m(light) {
+    
+    &:not(.is-controls-right) {
+      .#{$namespace}-input-number__decrease:not(.is-disabled) {
+        &::after {
+          border-right: 1px solid getCssVar('color-primary');
+          left: 0;
+        }
+      }
+      .#{$namespace}-input-number__increase:not(.is-disabled) {
+        &::after {
+          border-left: 1px solid getCssVar('color-primary');
+        }
+      }
 
-      &:hover {
-        color: getCssVar('disabled-border-color');
-        cursor: not-allowed;
+      .#{$namespace}-input-number__decrease:not(.is-disabled),
+      .#{$namespace}-input-number__increase:not(.is-disabled) {
+        &:hover {
+          background-color: #fff;
+        }
+      }
+    }
+    &.is-controls-right {
+      .#{$namespace}-input-number__decrease:not(.is-disabled) {
+        &::after {
+          border-left: 1px solid getCssVar('color-primary');
+          border-top: 1px solid getCssVar('color-primary');
+        }
+      }
+      .#{$namespace}-input-number__increase:not(.is-disabled) {
+        &::after {
+          border-left: 1px solid getCssVar('color-primary');
+          border-bottom: 1px solid getCssVar('color-primary');
+        }
+      }
+      .#{$namespace}-input-number__decrease:not(.is-disabled),
+      .#{$namespace}-input-number__increase:not(.is-disabled) {
+        background-color: #fff;
+        &:hover {
+          background-color: #ebf1ff;
+        }
       }
     }
   }

package/theme-chalk/src/input.scss

@@ -200,32 +200,6 @@
     }
   }
 
-
-  @include m(dark) {
-    .#{$namespace}-input__wrapper {
-      background-color: #292929;
-      @include inset-input-border( #5f5f5f);
-      &:hover {
-        @include inset-input-border(#{getCssVar('input', 'focus-border-color')});
-      }
-  
-      @include when(focus) {
-        @include inset-input-border(#{getCssVar('input', 'focus-border-color')});
-      }
-    }
-    .#{$namespace}-input__inner {
-      color: #FFFFFF
-    }
-
-    .#{$namespace}-input-group__prepend {
-      box-shadow: 1px 0 0 0 #5f5f5f inset, 0 1px 0 0 #5f5f5f inset, 0 -1px 0 0 #5f5f5f inset;
-      color: #757575;
-      background-color: #292929;
-    }
-
-    
-  }
-
   @include e(inner) {
     // use map.get as default value for date picker range
     @include set-css-var-value(
@@ -282,6 +256,12 @@
     padding-right: 11px;
   }
 
+  .#{$namespace}-select__prefix--light {
+    color: #8d9199;
+    border-right: 1px solid #BBBFC4;
+    padding-right: 11px;
+  }
+
   @each $slot in (prefix, suffix) {
     @include e($slot) {
       display: inline-flex;
@@ -369,6 +349,49 @@
     }
   }
 
+  @include m(dark) {
+    .#{$namespace}-input__wrapper {
+      background-color: #292929;
+      @include inset-input-border( #5f5f5f);
+      &:hover {
+        @include inset-input-border(#{getCssVar('input', 'focus-border-color')});
+      }
+  
+      @include when(focus) {
+        @include inset-input-border(#{getCssVar('input', 'focus-border-color')});
+      }
+    }
+    .#{$namespace}-input__inner {
+      color: #FFFFFF
+    }
+
+    .#{$namespace}-input-group__prepend {
+      box-shadow: 1px 0 0 0 #5f5f5f inset, 0 1px 0 0 #5f5f5f inset, 0 -1px 0 0 #5f5f5f inset;
+      color: #757575;
+      background-color: #292929;
+    }
+
+    @include when(disabled)  {
+      .#{$namespace}-input__wrapper {
+        @include inset-input-border(#5F5F5F);
+        background-color: #373737;
+        &:hover {
+          @include inset-input-border(#5F5F5F);
+        }
+      }
+  
+      .#{$namespace}-input__inner {
+        color: #5F5F5F;
+        -webkit-text-fill-color: #5F5F5F;
+        cursor: not-allowed;
+  
+        &::placeholder {
+          color: #5F5F5F;
+        }
+      }
+    }
+  }
+
   @include when(exceed) {
     .#{$namespace}-input__wrapper {
       @include mixed-input-border(#{getCssVar('color-danger')});

package/theme-chalk/src/radio.scss

@@ -50,6 +50,19 @@ $radio-font-size: map.merge(
         }
       }
     }
+
+    @include when(disabled) {
+      @include e(label) {
+        color: #5F5F5F !important;
+      }
+      @include e(input) {
+        @include when(checked) {
+          & + .#{$namespace}-radio__label {
+            color: #5F5F5F;
+          }
+        }
+      }
+    }
   }
 
   @include when(bordered) {

package/theme-chalk/src/select.scss

@@ -154,7 +154,7 @@
       }
     }
 
-    &.is-disabled {
+    &.is-disabled:not(.#{$namespace}-input--dark) {
       & .#{$namespace}-input__wrapper {
         cursor: not-allowed;