element-plus-secondary 0.2.1 → 0.2.3

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

@@ -373,7 +373,12 @@ $color-picker-size: map.merge($common-component-size, $color-picker-size);
     }
   }
 
+  
+
   @include when(custom) {
+    .#{$namespace}-color-picker__mask {
+      height: 24px;
+    }
     .#{$namespace}-color-picker__trigger {
       justify-content: flex-start;
       box-sizing: border-box !important;
@@ -396,6 +401,8 @@ $color-picker-size: map.merge($common-component-size, $color-picker-size);
         margin-left: 39px;
         display: inline-flex !important;
       }
+
+      
     }
   }
 }

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

@@ -101,7 +101,7 @@ $text-color: map.merge(
     'primary': #303133,
     'regular': #1F2329,
     'secondary': #909399,
-    'placeholder': #8D9199,
+    'placeholder': #8F959E,
     'ban': #EFF0F1,
     'disabled': #c0c4cc,
   ),

package/theme-chalk/src/input.scss

@@ -270,10 +270,7 @@
       flex-wrap: nowrap;
       height: 100%;
       text-align: center;
-      color: var(
-        #{getCssVarName('input-icon-color')},
-        map.get($input, 'icon-color')
-      );
+      color: #646A73;
       transition: all getCssVar('transition-duration');
       pointer-events: none;
     }

package/theme-chalk/src/menu.scss

@@ -3,6 +3,26 @@
 @use 'mixins/utils' as *;
 @use 'common/var' as *;
 @use 'common/transition';
+$checked-icon: "data:image/svg+xml;utf8,%3Csvg class='icon' width='200' height='200' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='currentColor' d='M406.656 706.944L195.84 496.256a32 32 0 10-45.248 45.248l256 256 512-512a32 32 0 00-45.248-45.248L406.592 706.944z'%3E%3C/path%3E%3C/svg%3E";
+
+@mixin checked-icon {
+  content: '';
+  position: absolute;
+  top: 50%;
+  right: 11px;
+  border-top: none;
+  border-right: none;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-color: getCssVar('menu-hover-text-color');
+  mask: url('#{$checked-icon}') no-repeat;
+  mask-size: 100% 100%;
+  -webkit-mask: url('#{$checked-icon}') no-repeat;
+  -webkit-mask-size: 100% 100%;
+  transform: translateY(-50%);
+  width: 16px;
+  height: 16px;
+}
 
 @mixin menu-item {
   display: flex;
@@ -154,13 +174,26 @@
       & .#{$namespace}-sub-menu.is-active > .#{$namespace}-sub-menu__title {
         color: getCssVar('menu-active-color');
       }
+
+      & .#{$namespace}-menu-item.is-active {
+        &::after {
+          @include checked-icon;
+        }
+      }
     }
-    & .#{$namespace}-menu-item:not(.is-disabled):hover,
     & .#{$namespace}-menu-item:not(.is-disabled):focus {
       outline: none;
       color: getCssVar('menu-hover-text-color');
       background-color: getCssVar('menu-hover-bg-color');
     }
+
+    & .#{$namespace}-menu-item:not(.is-disabled):hover{
+      outline: none;
+      color: getCssVar('menu-hover-text-color');
+      background-color: rgba(31, 35, 41, 0.10);
+      
+    }
+    
     & > .#{$namespace}-menu-item.is-active {
       border-bottom: 2px solid getCssVar('menu-active-color');
       color: getCssVar('menu-active-color') !important;

package/theme-chalk/src/table.scss

@@ -26,7 +26,7 @@
     height: 100%;
     // 表格底部伪 border，总是有的
     &::before {
-      @include extend-rule(border-pseudo);
+      // @include extend-rule(border-pseudo);
       left: 0;
       bottom: 0px;
       width: 100%;

package/theme-chalk/src/tree.scss

@@ -42,17 +42,29 @@
   @include when(effect) {
     background: #292929;
     .#{$namespace}-tree-node__content {
+      background-color: #292929;
       &:hover,
       &:focus {
         background-color: rgba(255, 255, 255, 0.1) !important;
       }
     }
+
+    .#{$namespace}-tree-node:focus > .#{$namespace}-tree-node__content {
+      background-color: rgba(255, 255, 255, 0.1) !important;
+    }
   }
 }
 
 @include b(tree-node) {
   white-space: nowrap;
   outline: none;
+  @include when(effect) {
+    background: #292929;
+    &:hover,
+    &:focus {
+      background-color: rgba(255, 255, 255, 0.1) !important;
+    }
+  }
  
 
   &:not(.is-effect):focus {
@@ -62,8 +74,13 @@
       color: getCssVar('color-primary');
       background-color: getCssVar('tree-node-hover-bg-color');
     }
+  }
 
-    
+  &.is-effect:focus {
+    /* focus */
+    > .#{$namespace}-tree-node__content {
+      background-color: rgba(255, 255, 255, 0.1) !important;
+    }
   }
 
   @include when(drop-inner) {