@element-plus/nightly 0.0.20220511 → 0.0.20220514

package/theme-chalk/src/button.scss

@@ -40,7 +40,7 @@ $button-icon-span-gap: map.merge(
   vertical-align: middle;
   -webkit-appearance: none;
 
-  &:not(.is-text) {
+  &:not(.is-text, .is-link) {
     background-color: getCssVar('button', 'bg-color');
     border: getCssVar('border');
     border-color: getCssVar('button', 'border-color');
@@ -191,6 +191,46 @@ $button-icon-span-gap: map.merge(
     }
   }
 
+  @include when(link) {
+    border-color: transparent;
+    // color: getCssVar('color', 'primary');
+    background: transparent;
+    padding-left: 0;
+    padding-right: 0;
+
+    &:hover {
+      color: getCssVar('button', 'hover', 'link-text-color');
+    }
+
+    @include when(disabled) {
+      color: getCssVar('button', 'disabled', 'text-color');
+      background-color: transparent !important;
+      border-color: transparent !important;
+    }
+
+    &:not(.is-disabled) {
+      &:hover,
+      &:focus {
+        // color: getCssVar('color', 'primary', 'light-3');
+        border-color: transparent;
+        background-color: transparent;
+      }
+
+      &:active {
+        // color: getCssVar('color', 'primary', 'dark-2');
+        border-color: transparent;
+        background-color: transparent;
+      }
+    }
+  }
+
+  @include e(link) {
+    @include m(expand) {
+      letter-spacing: 0.3em;
+      margin-right: -0.3em;
+    }
+  }
+
   @each $type in (primary, success, warning, danger, info) {
     @include m($type) {
       @include button-variant($type);

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

@@ -996,9 +996,16 @@ $menu: map.merge(
     'bg-color': getCssVar('fill-color', 'blank'),
     'hover-bg-color': getCssVar('color-primary-light-9'),
     'item-height': 56px,
+    'sub-item-height': calc(#{getCssVar('menu-item-height')} - 6px),
+    'horizontal-sub-item-height': 36px,
     'item-font-size': getCssVar('font-size-base'),
     'item-hover-fill': getCssVar('color-primary-light-9'),
     'border-color': getCssVar('border-color'),
+    'base-level-padding': 20px,
+    'level-padding': 20px,
+    'icon-width': 24px,
+    'icon-transform-closed': 'none',
+    'icon-transform-open': 'rotateZ(180deg)',
   ),
   $menu
 );

package/theme-chalk/src/menu.scss

@@ -11,7 +11,7 @@
   line-height: getCssVar('menu-item-height');
   font-size: getCssVar('menu-item-font-size');
   color: getCssVar('menu-text-color');
-  padding: 0 20px;
+  padding: 0 getCssVar('menu-base-level-padding');
   list-style: none;
   cursor: pointer;
   position: relative;
@@ -45,9 +45,12 @@
   }
 }
 
-@include b(menu) {
+:root {
+  // They are defined on :root so they can be inherited by sub-menu instead of overwritten
   @include set-component-css-var('menu', $menu);
+}
 
+@include b(menu) {
   border-right: solid 1px getCssVar('menu-border-color');
   list-style: none;
   position: relative;
@@ -56,6 +59,19 @@
   background-color: getCssVar('menu-bg-color');
   box-sizing: border-box;
 
+  @include m(vertical) {
+    &:not(.#{$namespace}-menu--collapse):not(.#{$namespace}-menu--popup-container) {
+      & .#{$namespace}-menu-item,
+      & .#{$namespace}-sub-menu__title,
+      & .#{$namespace}-menu-item-group__title {
+        padding-left: calc(
+          #{getCssVar('menu-base-level-padding')} + #{getCssVar('menu-level')} *
+            #{getCssVar('menu-level-padding')}
+        );
+      }
+    }
+  }
+
   @include m(horizontal) {
     display: flex;
     flex-wrap: nowrap;
@@ -124,7 +140,7 @@
         background-color: getCssVar('menu-bg-color');
         display: flex;
         align-items: center;
-        height: 36px;
+        height: getCssVar('menu-horizontal-sub-item-height');
         padding: 0 10px;
         color: getCssVar('menu-text-color');
       }
@@ -150,14 +166,17 @@
     }
   }
   @include m(collapse) {
-    width: 64px;
+    width: calc(
+      #{getCssVar('menu-icon-width')} + #{getCssVar('menu-base-level-padding')} *
+        2
+    );
 
     > .#{$namespace}-menu-item,
     > .#{$namespace}-sub-menu > .#{$namespace}-sub-menu__title {
       [class^='#{$namespace}-icon'] {
         margin: 0;
         vertical-align: middle;
-        width: 24px;
+        width: getCssVar('menu-icon-width');
         text-align: center;
       }
 
@@ -197,7 +216,7 @@
       }
       &.is-opened {
         > .#{$namespace}-sub-menu__title .#{$namespace}-sub-menu__icon-arrow {
-          transform: none;
+          transform: getCssVar('menu-icon-transform-closed');
         }
       }
 
@@ -225,7 +244,7 @@
 
   & [class^='#{$namespace}-icon'] {
     margin-right: 5px;
-    width: 24px;
+    width: getCssVar('menu-icon-width');
     text-align: center;
     font-size: 18px;
     vertical-align: middle;
@@ -245,7 +264,7 @@
     display: inline-flex;
     align-items: center;
     box-sizing: border-box;
-    padding: 0 20px;
+    padding: 0 getCssVar('menu-base-level-padding');
   }
 }
 
@@ -265,9 +284,8 @@
     border: none;
   }
   & .#{$namespace}-menu-item {
-    height: 50px;
-    line-height: 50px;
-    padding: 0 45px;
+    height: getCssVar('menu-sub-item-height');
+    line-height: getCssVar('menu-sub-item-height');
     min-width: 200px;
   }
   @include e(hide-arrow) {
@@ -282,7 +300,7 @@
   }
   @include when(opened) {
     > .#{$namespace}-sub-menu__title .#{$namespace}-sub-menu__icon-arrow {
-      transform: rotateZ(180deg);
+      transform: getCssVar('menu-icon-transform-open');
     }
   }
   @include when(disabled) {
@@ -296,7 +314,7 @@
   .#{$namespace}-icon {
     vertical-align: middle;
     margin-right: 5px;
-    width: 24px;
+    width: getCssVar('menu-icon-width');
     text-align: center;
     font-size: 18px;
 
@@ -307,8 +325,9 @@
   .#{$namespace}-sub-menu__icon-arrow {
     position: absolute;
     top: 50%;
-    right: 20px;
+    right: getCssVar('menu-base-level-padding');
     margin-top: -7px;
+    transform: getCssVar('menu-icon-transform-closed');
     transition: transform getCssVar('transition-duration');
     font-size: 12px;
     margin-right: 0;
@@ -321,7 +340,7 @@
     padding: 0;
   }
   @include e(title) {
-    padding: 7px 0 7px 20px;
+    padding: 7px 0 7px getCssVar('menu-base-level-padding');
     line-height: normal;
     font-size: 12px;
     color: getCssVar('text-color', 'secondary');

package/theme-chalk/src/mixins/_button.scss

@@ -83,6 +83,11 @@
         'color',
         'white',
       ),
+      'link-text-color': (
+        'color',
+        $type,
+        'light-5',
+      ),
       'bg-color': (
         'color',
         $type,
@@ -131,7 +136,8 @@
   }
 
   &.is-plain,
-  &.is-text {
+  &.is-text,
+  &.is-link {
     @include button-plain($type);
   }
 }

package/theme-chalk/src/tabs.scss

@@ -121,6 +121,11 @@
       outline: none;
     }
 
+    &:focus-visible {
+      box-shadow: 0 0 2px 2px getCssVar('color-primary') inset;
+      border-radius: 3px;
+    }
+
     & .is-icon-close {
       border-radius: 50%;
       text-align: center;