element-plus-secondary 0.4.3 → 0.4.5

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

@@ -328,6 +328,15 @@ $color-picker-size: map.merge($common-component-size, $color-picker-size);
     
   }
 
+  &.is-disabled {
+    .#{$namespace}-color-picker__color-inner {
+      opacity: 0.5;
+    }
+    .#{$namespace}-color-picker__color{
+      background-image: none
+    }
+  }
+
   @include when(effect) {
 
     @include e(trigger) {
@@ -339,6 +348,9 @@ $color-picker-size: map.merge($common-component-size, $color-picker-size);
     .#{$namespace}-color-picker__color {
       border: none;
     }
+    .#{$namespace}-color-picker__icon{
+      color: #A6A6A6 !important;
+     }
     &.is-disabled {
       .#{$namespace}-color-picker__color-inner {
         position: relative;
@@ -347,6 +359,7 @@ $color-picker-size: map.merge($common-component-size, $color-picker-size);
       .#{$namespace}-color-picker__icon {
         position: relative;
         z-index: 2;
+        color: #5F5F5F !important;
       }
       @include e(mask) {
         background:  #373737;
@@ -442,8 +455,6 @@ $color-picker-size: map.merge($common-component-size, $color-picker-size);
         margin-left: 39px;
         display: inline-flex !important;
       }
-
-      
     }
 
     @include when(disabled) {
@@ -453,6 +464,9 @@ $color-picker-size: map.merge($common-component-size, $color-picker-size);
           border-color:  getCssVar('disabled-border-color');
         }
       }
+      .#{$namespace}-color-picker__icon {
+        color: #BBBFC4;
+      }
     }
 
     &.#{$namespace}-color-picker--large {

package/theme-chalk/src/common/var.scss

@@ -757,7 +757,7 @@ $table: map.merge(
     'border': 1px solid getCssVar('table-border-color'),
     'text-color': getCssVar('text-color-regular'),
     'header-text-color': getCssVar('text-color-secondary'),
-    'row-hover-bg-color': getCssVar('fill-color', 'light'),
+    'row-hover-bg-color': #1f23291a,
     'current-row-bg-color': getCssVar('color-primary-light-9'),
     'header-bg-color': getCssVar('bg-color'),
     'fixed-box-shadow': getCssVar('box-shadow', 'light'),

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

@@ -42,7 +42,7 @@
 
     width: map.get($input-height, 'default');
     background: getCssVar('fill-color', 'light');
-    color: getCssVar('text-color', 'regular');
+    color: #A6A6A6;
     cursor: pointer;
     font-size: 13px;
     user-select: none;
@@ -118,8 +118,12 @@
     .#{$namespace}-input-number__decrease,
     .#{$namespace}-input-number__increase {
       background: #373737;
-      color: #fff;
       border-color: #5f5f5f;
+      &.is-disabled {
+        .#{$namespace}-icon {
+          color: #5F5F5F;
+        }
+      }
     }
     &.is-controls-right {
       .#{$namespace}-input-number__decrease,
@@ -206,6 +210,24 @@
   }
 
   @include m(light) {
+    @include when(disabled) {
+      .#{$namespace}-input-number__decrease,
+      .#{$namespace}-input-number__increase {
+        background-color: #EFF0F1;
+        .#{$namespace}-icon {
+          color: #BBBFC4;
+        }
+      }
+    }
+    .#{$namespace}-input-number__increase,
+    .#{$namespace}-input-number__decrease {
+      @include when(disabled) {
+        background-color: #EFF0F1;
+        .#{$namespace}-icon {
+          color: #BBBFC4;
+        }
+      }
+    }
     &:not(.is-disabled) {
       &:not(.is-controls-right) {
         .#{$namespace}-input-number__decrease:not(.is-disabled) {

package/theme-chalk/src/input.scss

@@ -174,6 +174,8 @@
     align-items: center;
     justify-content: center;
     padding: $border-width map.get($input-padding-horizontal, 'default')-$border-width;
+    padding-left: 8px;
+    padding-right: 8px;
     background-color: var(
       #{getCssVarName('input-bg-color')},
       map.get($input, 'bg-color')
@@ -374,7 +376,10 @@
       }
     }
     .#{$namespace}-input__inner {
-      color: #FFFFFF
+      color: #FFFFFF;
+      &::placeholder {
+        color: #757575;
+      }
     }
 
     .#{$namespace}-input-group__prepend {
@@ -455,7 +460,7 @@
     justify-content: center;
     min-height: 100%;
     border-radius: getCssVar('input-border-radius');
-    padding: 0 11px;
+    padding: 0 20px;
     white-space: nowrap;
 
     &:focus {
@@ -603,7 +608,7 @@
   @include m(dark) {
     .#{$namespace}-input-group__append {
       .#{$namespace}-select {
-        margin: 0 -11px;
+        margin: 0 20px;
         .#{$namespace}-input__wrapper {
           background: #373737 !important;
           box-shadow: 0 1px 0 0  #5f5f5f inset, 0 -1px 0 0  #5f5f5f inset, -1px 0 0 0  #5f5f5f inset !important;
@@ -611,7 +616,7 @@
       }
       .#{$namespace}-select:not(.#{$namespace}-select--disabled) {
         .#{$namespace}-input__wrapper {
-          background: #292929 !important;
+          background: #373737 !important;
         }
       }
     }

package/theme-chalk/src/option.scss

@@ -39,7 +39,7 @@ $checked-icon: "data:image/svg+xml;utf8,%3Csvg class='icon' width='200' height='
     cursor: pointer;
 
     @include when(disabled) {
-      color: map.get($select-option, 'disabled-color');
+      color: getCssVar('border-color-extra', 'light');
       cursor: not-allowed;
     }
 
@@ -50,7 +50,6 @@ $checked-icon: "data:image/svg+xml;utf8,%3Csvg class='icon' width='200' height='
 
     &.selected {
       color: map.get($select-option, 'selected-text-color');
-      font-weight: bold;
 
       &::after {
         @include checked-icon;
@@ -67,8 +66,12 @@ $checked-icon: "data:image/svg+xml;utf8,%3Csvg class='icon' width='200' height='
       }
 
       &.selected {
+        color: #3370ff;
         background-color: rgba(255, 255, 255, 0.1);
       }
+      @include when(disabled) {
+        color: #5F5F5F;
+      }
     }
   }
 }

package/theme-chalk/src/pagination.scss

@@ -60,7 +60,7 @@
 
 @include b(pagination) {
   @include set-component-css-var('pagination', $pagination);
-
+  font-size: 14px;
   white-space: nowrap;
   color: getCssVar('pagination-text-color');
   font-weight: normal;

package/theme-chalk/src/select.scss

@@ -124,7 +124,6 @@
     display: flex;
 
     & .#{$namespace}-select__caret {
-      color: #646A73;
       font-size: 14px;
       transition: transform getCssVar('transition-duration');
       transform: rotateZ(0deg);
@@ -171,6 +170,19 @@
       }
     }
 
+    @include m(light) {
+      & .#{$namespace}-select__caret {
+        color: #BBBFC4;
+        &:hover {
+          cursor: not-allowed;
+          color: #BBBFC4;
+        }
+      }
+      &:not(.is-disabled) .#{$namespace}-select__caret {
+        color: #646A73;
+      }
+    }
+
     &.is-disabled:not(.#{$namespace}-input--dark) {
       & .#{$namespace}-input__wrapper {
         cursor: not-allowed;

package/theme-chalk/src/tabs.scss

@@ -35,7 +35,7 @@
     border-radius: 3px;
     text-align: center;
     font-size: 12px;
-    color: getCssVar('text-color', 'primary');
+    color: getCssVar('text-color', 'regular');
     cursor: pointer;
     transition: all 0.15s;
 
@@ -115,7 +115,7 @@
     line-height: getCssVar('tabs', 'header-height');
     display: inline-block;
     list-style: none;
-    color: getCssVar('text-color', 'primary');
+    color: getCssVar('text-color', 'regular');
     position: relative;
     font-family: PingFang SC;
     font-size: 16px;

package/theme-chalk/src/var.scss

@@ -90,6 +90,11 @@
     '#8D9199'
   );
 
+  @include set-css-var-value(
+    ('disabled', 'text', 'color'),
+    '#8D9199'
+  );
+
   
 
   // overlay & mask