element-plus-secondary 0.2.2 → 0.2.3

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

@@ -48,6 +48,10 @@
         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;
+    }
   }
 }
 
@@ -70,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) {