element-plus-secondary 0.1.2 → 0.1.4

package/theme-chalk/src/checkbox.scss

@@ -51,6 +51,15 @@ $checkbox-bordered-input-width: map.merge(
   margin-right: 30px;
   height: map.get($checkbox-height, 'default');
 
+  @include m(dark) {
+    color: #fff;
+    @include when(disabled) {
+      @include e(label) {
+        color: #5F5F5F !important;
+      }
+    }
+  }
+
   @include when(bordered) {
     padding: 0 map.get($checkbox-bordered-padding-right, 'default')-$border-width
       0 map.get($checkbox-bordered-padding-left, 'default')-$border-width;

package/theme-chalk/src/collapse.scss

@@ -17,6 +17,27 @@
       cursor: not-allowed;
     }
   }
+
+  &.#{$namespace}-collapse--dark {
+    @include e(header) {
+      background-color: #1a1a1a;
+      border-top: 1px solid rgba(255, 255, 255, 0.15);;
+      color: #ffffff;
+        @include e(arrow) {
+        color: #A6A6A6;
+      }
+    }
+
+    @include e(wrap) {
+      background-color: #292929;
+    }
+
+    @include e(content) {
+      color: #ffffff;
+      padding: 16px 8px;
+    }
+  }
+
   @include e(header) {
     display: flex;
     align-items: center;
@@ -31,7 +52,7 @@
     transition: border-bottom-color getCssVar('transition-duration');
     outline: none;
     @include e(arrow) {
-      margin: 0 8px 0 auto;
+      margin: 0 6px 0 10px;
       transition: transform getCssVar('transition-duration');
       font-weight: 300;
       @include when(active) {
@@ -63,5 +84,10 @@
 
   &:last-child {
     margin-bottom: -1px;
+    &.#{$namespace}-collapse--dark {
+      @include e(header) {
+        border-bottom: 1px solid rgba(255, 255, 255, 0.15);;
+      }
+    }
   }
 }

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

@@ -1112,7 +1112,7 @@ $collapse: () !default;
 $collapse: map.merge(
   (
     'border-color': getCssVar('border-color-lighter'),
-    'header-height': 48px,
+    'header-height': 36px,
     'header-bg-color': getCssVar('fill-color', 'blank'),
     'header-text-color': getCssVar('text-color-primary'),
     'header-font-size': 13px,

package/theme-chalk/src/dropdown.scss

@@ -58,6 +58,7 @@ $dropdown-divider-width: 1px !default;
     @include set-component-css-var('dropdown', $dropdown);
 
     // using attributes selector to override
+    
 
     @include picker-popper(
       getCssVar('bg-color', 'overlay'),
@@ -65,6 +66,14 @@ $dropdown-divider-width: 1px !default;
       getCssVar('dropdown-menu-box-shadow')
     );
 
+    @include when(dark) {
+      @include picker-popper(
+        #292929,
+        1px solid rgba(255, 255, 255, 0.15),
+        getCssVar('dropdown-menu-box-shadow')
+      );
+    }
+
     .#{$namespace}-dropdown-menu {
       border: none;
     }
@@ -189,6 +198,21 @@ $dropdown-menu-padding-vertical: map.merge(
     }
   }
 
+
+  &.#{$namespace}-dropdown--dark {
+    background-color: #292929;
+    @include e(item) {
+      color: #A6A6A6;
+      &:not(.is-disabled):focus {
+        background-color: rgba(255, 255, 255, 0.1);;
+        color: #A6A6A6;;
+      }
+      @include m(divided) {
+        border-top: 1px solid rgba(255, 255, 255, 0.15);
+      }
+    }
+  }
+
   @each $size in (large, small) {
     @include m($size) {
       padding: map.get($dropdown-menu-padding-vertical, $size)-$border-width 0;

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

@@ -92,6 +92,62 @@
     }
   }
 
+  @include m(dark) {
+    .#{$namespace}-input-number__decrease,
+    .#{$namespace}-input-number__increase {
+      background: #292929;
+      color: #fff;
+      border-color: #5f5f5f;
+      &:hover {
+        color: getCssVar('color-primary');
+        background-color: rgba(#3370FF, 0.2);
+      }
+    }
+    &.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__increase:not(.is-disabled) {
+        &:hover {
+          color: getCssVar('color-primary');
+          background-color: rgba(#3370FF, 0.2);
+    
+          & ~ .#{$namespace}-input:not(.is-disabled) .#{$namespace}-input__wrapper {
+            box-shadow: 0 0 0 1px
+              var(
+                #{getCssVarName('input', 'focus-border-color')},
+                map.get($input, 'focus-border-color')
+              )
+              inset !important;
+          }
+        }
+      }
+    }
+
+    @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;
+        }
+      }
+    }
+  }
+
   @each $size in (large, small) {
     @include m($size) {
       width: map.get($input-number-width, $size);

package/theme-chalk/src/input.scss

@@ -250,6 +250,12 @@
     }
   }
 
+  .#{$namespace}-select__prefix--dark {
+    color: #757575;
+    border-right: 1px solid #5f5f5f;
+    padding-right: 11px;
+  }
+
   @each $slot in (prefix, suffix) {
     @include e($slot) {
       display: inline-flex;
@@ -337,6 +343,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')});
@@ -388,7 +437,7 @@
     justify-content: center;
     min-height: 100%;
     border-radius: getCssVar('input-border-radius');
-    padding: 0 20px;
+    padding: 0 11px;
     white-space: nowrap;
 
     &:focus {

package/theme-chalk/src/option.scss

@@ -33,4 +33,18 @@
       font-weight: bold;
     }
   }
+
+  &.#{$namespace}-select--dark {
+    @include e(item) {
+      color: #fff;
+      &.hover,
+      &:hover {
+        background-color: rgba(255, 255, 255, 0.1);
+      }
+
+      &.selected {
+        background-color: rgba(255, 255, 255, 0.1);
+      }
+    }
+  }
 }

package/theme-chalk/src/popper.scss

@@ -25,8 +25,8 @@
     border: 1px solid getCssVar('text-color', 'primary');
 
     #{$arrow-selector}::before {
-      border: 1px solid getCssVar('text-color', 'primary');
-      background: getCssVar('text-color', 'primary');
+      border: 1px solid rgba(255, 255, 255, 0.15);
+      background: #292929;
       right: 0;
     }
 

package/theme-chalk/src/radio.scss

@@ -39,6 +39,32 @@ $radio-font-size: 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;

package/theme-chalk/src/select.scss

@@ -60,8 +60,18 @@
       map.get($select-dropdown, 'border'),
       map.get($select-dropdown, 'shadow')
     );
+
+    @include when(dark) {
+      background: #292929;
+      border: 1px solid rgba(255, 255, 255, 0.15);
+      .#{$namespace}-popper__arrow::before {
+        border: 1px solid rgba(255, 255, 255, 0.15);
+      }
+    }
   }
 
+  
+
   .#{$namespace}-select-tags-wrapper {
     &.has-prefix {
       margin-left: map.get($select-tags-prefix-padding, 'default');
@@ -144,7 +154,7 @@
       }
     }
 
-    &.is-disabled {
+    &.is-disabled:not(.#{$namespace}-input--dark) {
       & .#{$namespace}-input__wrapper {
         cursor: not-allowed;