element-plus-secondary 0.0.3 → 0.0.4

package/theme-chalk/src/button.scss

@@ -92,19 +92,82 @@ $button-icon-span-gap: map.merge(
     }
   }
 
+  @include when(secondary) {
+    color: getCssVar('text-color-regular');
+    background-color: getCssVar('color-white');
+    border: 1px solid;
+    border-color: getCssVar('text-color-placeholder');
+
+    &:hover,
+    &:focus {
+      background-color: var(--deComBorderColorHover, #f4f4f4);
+    }
+
+    &:active {
+      background-color: getCssVar('color-info-light-8');
+      outline: none;
+    }
+
+    &.is-loading {
+      &,
+      &:hover,
+      &:focus,
+      &:active {
+        color: var(--deTextPlaceholder, #f4f4f4);
+        background-color: var(--deWhite, #ffffff);
+        border-color: var(--deComponentStrokeColor, #BBBFC4);
+      }
+    }
+
+    &.is-disabled {
+      &,
+      &:hover,
+      &:focus,
+      &:active {
+        color: #8f959e;
+        background-color: #ffffff;
+        border-color: #8f959e;
+      }
+    }
+  }
+
   @include when(plain) {
-    @include css-var-from-global(
-      ('button', 'hover', 'text-color'),
-      ('color', 'primary')
-    );
-    @include css-var-from-global(
-      ('button', 'hover', 'bg-color'),
-      ('fill-color', 'blank')
-    );
-    @include css-var-from-global(
-      ('button', 'hover', 'border-color'),
-      ('color', 'primary')
-    );
+    color: getCssVar('color-primary');
+    background-color: var(--deWhite, #ffffff);
+    border: 1px solid;
+    border-color: getCssVar('color-primary');
+
+    &:hover,
+    &:focus {
+      background: getCssVar('color-primary-light-7');
+    }
+
+    &:active {
+      background: getCssVar('color-primary-light-5');
+      outline: none;
+    }
+
+    &.is-loading {
+      &,
+      &:hover,
+      &:focus,
+      &:active {
+        color: getCssVar('color-primary');
+        background-color: var(--deWhite, #ffffff);
+        opacity: .6;
+      }
+    }
+
+    &.is-disabled {
+      &,
+      &:hover,
+      &:focus,
+      &:active {
+        color: #8f959e;
+        background-color: #ffffff;
+        border-color: #8f959e;
+      }
+    }
   }
 
   @include when(active) {

package/theme-chalk/src/dialog.scss

@@ -52,19 +52,19 @@
   }
 
   @include e(header) {
-    padding: getCssVar('dialog', 'padding-primary');
-    padding-bottom: 10px;
-    margin-right: 16px;
+    padding: 24px;
+    padding-bottom: 0;
+    margin-right: 24px;
     word-break: break-all;
   }
 
   @include e(headerbtn) {
     position: absolute;
-    top: 6px;
-    right: 0;
+    top: 25px;
+    right: 25px;
     padding: 0;
-    width: 54px;
-    height: 54px;
+    width: 15px;
+    height: 15px;
     background: transparent;
     border: none;
     outline: none;
@@ -88,22 +88,24 @@
   }
 
   @include e(title) {
-    line-height: getCssVar('dialog-font-line-height');
-    font-size: getCssVar('dialog-title-font-size');
-    color: getCssVar('text-color', 'primary');
+    color: getCssVar('text-color', 'regular');
+    font-family: 'PingFang SC';
+    font-style: normal;
+    font-weight: 500;
+    font-size: 16px;
+    line-height: 24px;
   }
 
   @include e(body) {
-    padding: calc(#{getCssVar('dialog-padding-primary')} + 10px)
-      getCssVar('dialog-padding-primary');
+    padding: 24px;
     color: getCssVar('text-color', 'regular');
     font-size: getCssVar('dialog-content-font-size');
     word-break: break-all;
   }
 
   @include e(footer) {
-    padding: getCssVar('dialog-padding-primary');
-    padding-top: 10px;
+    padding: 24px;
+    padding-top: 0;
     text-align: right;
     box-sizing: border-box;
   }

package/theme-chalk/src/tabs.scss

@@ -7,7 +7,7 @@
   @include e(header) {
     padding: 0;
     position: relative;
-    margin: 0 0 15px;
+    margin: 0;
   }
   @include e(active-bar) {
     position: absolute;

package/theme-chalk/src/tree.scss

@@ -45,8 +45,29 @@
   &:focus {
     /* focus */
     > .#{$namespace}-tree-node__content {
+      position: relative;
+      color: getCssVar('color-primary');
       background-color: getCssVar('tree-node-hover-bg-color');
     }
+
+    > .#{$namespace}-tree-node__content.is-menu {
+      background: rgba(51, 112, 255, 0.1);
+      border-radius: 4px;
+      font-weight: 500;
+    }
+
+    > .#{$namespace}-tree-node__content:not(.is-menu):after {
+      content: '';
+      border: solid;
+      border-width: 0 1.5px 1.5px 0;
+      border-color: getCssVar('color-primary');
+      position: absolute;
+      width: 4px;
+      height: 10px;
+      right: 12px;
+      top: 50%;
+      transform: translateY(-50%) rotate(45deg);
+    }
   }
 
   @include when(drop-inner) {
@@ -59,7 +80,7 @@
   @include e(content) {
     display: flex;
     align-items: center;
-    height: 26px;
+    height: 32px;
     cursor: pointer;
 
     & > .#{$namespace}-tree-node__expand-icon {
@@ -84,11 +105,24 @@
     .#{$namespace}-tree.is-dragging.is-drop-not-allow & {
       cursor: not-allowed;
     }
+    &.is-menu {
+      height: 40px;
+      font-family: 'PingFang SC';
+      font-style: normal;
+      font-weight: 400;
+      font-size: 14px;
+      line-height: 22px;
+
+      &:hover {
+        background: rgba(31, 35, 41, 0.1);
+        border-radius: 4px;
+      }
+    }
   }
 
   @include e(expand-icon) {
     cursor: pointer;
-    color: getCssVar('tree-expand-icon-color');
+    color: #646A73;
     font-size: 12px;
 
     transform: rotate(0deg);
@@ -105,6 +139,27 @@
     &.is-hidden {
       visibility: hidden;
     }
+
+    &:hover {
+      position: relative;
+      &::before {
+        content: '';
+        width: 16px;
+        height: 16px;
+        background: rgba(31, 35, 41, 0.1);
+        border-radius: 4px;
+        position: absolute;
+        top: 18%;
+        left: 18%;
+      }
+    }
+
+    &:active {
+      position: relative;
+      &::before {
+        background: rgba(31, 35, 41, 0.2);
+      }
+    }
   }
 
   @include e(label) {