@element-plus/nightly 0.0.20220515 → 0.0.20220519

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, .is-link) {
+  &:not(.is-text, .is-link, .#{$namespace}-button--text) {
     background-color: getCssVar('button', 'bg-color');
     border: getCssVar('border');
     border-color: getCssVar('button', 'border-color');
@@ -59,6 +59,12 @@ $button-icon-span-gap: map.merge(
       background-color: getCssVar('button', 'active', 'bg-color');
       outline: none;
     }
+
+    &:focus-visible {
+      border-color: transparent;
+      outline: 2px solid getCssVar('button', 'border-color');
+      outline-offset: 1px;
+    }
   }
 
   > span {
@@ -166,6 +172,12 @@ $button-icon-span-gap: map.merge(
         background-color: getCssVar('fill-color', 'light');
       }
 
+      &:focus-visible {
+        border-color: transparent;
+        outline: 2px solid getCssVar('button', 'border-color');
+        outline-offset: 1px;
+      }
+
       &:active {
         background-color: getCssVar('fill-color');
       }
@@ -224,6 +236,34 @@ $button-icon-span-gap: map.merge(
     }
   }
 
+  @include m(text) {
+    border-color: transparent;
+    background: transparent;
+    color: getCssVar('color', 'primary');
+    padding-left: 0;
+    padding-right: 0;
+    @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;

package/theme-chalk/src/checkbox.scss

@@ -97,6 +97,14 @@ $checkbox-bordered-input-width: map.merge(
     }
   }
 
+  input:focus-visible {
+    & + .#{$namespace}-checkbox__inner {
+      outline: 2px solid getCssVar('checkbox-input-border-color-hover');
+      outline-offset: 1px;
+      border-radius: getCssVar('checkbox-border-radius');
+    }
+  }
+
   @include e(input) {
     white-space: nowrap;
     cursor: pointer;
@@ -169,8 +177,10 @@ $checkbox-bordered-input-width: map.merge(
     }
     @include when(focus) {
       // Visually distinguish when focus
-      .#{$namespace}-checkbox__inner {
-        border-color: getCssVar('checkbox-input-border-color-hover');
+      &:not(.is-checked) {
+        .#{$namespace}-checkbox__original:not(:focus-visible) {
+          border-color: getCssVar('checkbox-input-border-color-hover');
+        }
       }
     }
     @include when(indeterminate) {
@@ -207,7 +217,8 @@ $checkbox-bordered-input-width: map.merge(
     background-color: getCssVar('checkbox-bg-color');
     z-index: getCssVar('index-normal');
     transition: border-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46),
-      background-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46);
+      background-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46),
+      outline 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46);
 
     &:hover {
       border-color: getCssVar('checkbox-input-border-color-hover');

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

@@ -23,12 +23,7 @@
   display: inline-block;
   text-align: left;
 
-  &.#{$namespace}-input__inner {
-    border-radius: var(
-      #{getCssVarName('input-border-radius')},
-      #{getCssVar('border-radius-base')}
-    );
-
+  &.#{$namespace}-input__wrapper {
     @include inset-input-border(
       var(
         #{getCssVarName('input-border-color')},
@@ -42,33 +37,34 @@
   }
 
   &.#{$namespace}-input,
-  &.#{$namespace}-input__inner {
+  &.#{$namespace}-input__wrapper {
     width: getCssVar('date-editor-width');
+    height: getCssVar('component-size', '');
   }
 
   @include m((monthrange)) {
-    &.#{$namespace}-input,
-    &.#{$namespace}-input__inner {
-      width: getCssVar('date-editor-monthrange-width');
-    }
+    @include css-var-from-global(
+      'date-editor-width',
+      'date-editor-monthrange-width'
+    );
   }
 
   @include m((daterange, timerange)) {
-    &.#{$namespace}-input,
-    &.#{$namespace}-input__inner {
-      width: getCssVar('date-editor-daterange-width');
-    }
+    @include css-var-from-global(
+      'date-editor-width',
+      'date-editor-daterange-width'
+    );
   }
 
   @include m(datetimerange) {
-    &.#{$namespace}-input,
-    &.#{$namespace}-input__inner {
-      width: getCssVar('date-editor-datetimerange-width');
-    }
+    @include css-var-from-global(
+      'date-editor-width',
+      'date-editor-datetimerange-width'
+    );
   }
 
   @include m(dates) {
-    .#{$namespace}-input__inner {
+    .#{$namespace}-input__wrapper {
       text-overflow: ellipsis;
       white-space: nowrap;
     }
@@ -152,7 +148,7 @@
 }
 
 @include b(range-editor) {
-  &.#{$namespace}-input__inner {
+  &.#{$namespace}-input__wrapper {
     display: inline-flex;
     align-items: center;
     padding: 3px 10px;
@@ -171,10 +167,10 @@
 
   @each $size in (large, small) {
     @include m($size) {
-      line-height: map.get($input-height, $size);
+      line-height: getCssVar('component-size', $size);
 
-      &.#{$namespace}-input__inner {
-        height: map.get($input-height, $size);
+      &.#{$namespace}-input__wrapper {
+        height: getCssVar('component-size', $size);
       }
 
       .#{$namespace}-range-separator {

package/theme-chalk/src/form.scss

@@ -127,6 +127,7 @@ $form-item-label-top-margin-bottom: map.merge(
       margin-bottom: #{map.get($form-item-margin-bottom, $size)};
 
       @include e(label) {
+        height: #{map.get($form-item-line-height, $size)};
         line-height: #{map.get($form-item-line-height, $size)};
       }
       @include e(content) {

package/theme-chalk/src/main.scss

@@ -5,7 +5,6 @@
 @include b(main) {
   @include set-component-css-var('main', $main);
 
-  // IE11 supports the <main> element partially https://caniuse.com/#search=main
   display: block;
   flex: 1;
   flex-basis: auto;

package/theme-chalk/src/radio-button.scss

@@ -101,6 +101,21 @@
       }
     }
 
+    &:focus-visible {
+      & + .#{$namespace}-radio-button__inner {
+        border-left: getCssVar('border');
+        border-left-color: getCssVarWithDefault(
+          'radio-button-checked-border-color',
+          map.get($radio-button, 'checked-border-color')
+        );
+        outline: 2px solid getCssVar('radio-button-checked-border-color');
+        outline-offset: 1px;
+        z-index: 2;
+        border-radius: getCssVar('border-radius-base');
+        box-shadow: none;
+      }
+    }
+
     &:disabled {
       & + .#{$namespace}-radio-button__inner {
         color: getCssVar('disabled-text-color');
@@ -147,9 +162,4 @@
       }
     }
   }
-
-  &:focus:not(.is-focus):not(:active):not(.is-disabled) {
-    /*获得焦点时 样式提醒*/
-    box-shadow: 0 0 2px 2px getCssVar('radio-button-checked-border-color');
-  }
 }

package/theme-chalk/src/radio.scss

@@ -179,9 +179,17 @@ $radio-font-size: map.merge(
     right: 0;
     bottom: 0;
     margin: 0;
+
+    &:focus-visible {
+      & + .#{$namespace}-radio__inner {
+        outline: 2px solid getCssVar('radio-input-border-color-hover');
+        outline-offset: 1px;
+        border-radius: getCssVar('radio-input-border-radius');
+      }
+    }
   }
 
-  &:focus:not(.is-focus):not(:active):not(.is-disabled) {
+  &:focus:not(:focus-visible):not(.is-focus):not(:active):not(.is-disabled) {
     /*获得焦点时 样式提醒*/
     .#{$namespace}-radio__inner {
       box-shadow: 0 0 2px 2px getCssVar('radio-input-border-color-hover');

package/theme-chalk/src/switch.scss

@@ -76,6 +76,7 @@ $switch-button-size: map.merge(
   line-height: map.get($switch-core-height, 'default');
   height: map.get($switch-height, 'default');
   vertical-align: middle;
+
   @include when(disabled) {
     & .#{$namespace}-switch__core,
     & .#{$namespace}-switch__label {
@@ -123,6 +124,13 @@ $switch-button-size: map.merge(
     height: 0;
     opacity: 0;
     margin: 0;
+
+    &:focus-visible {
+      & ~ .#{$namespace}-switch__core {
+        outline: 2px solid getCssVar('switch-on-color');
+        outline-offset: 1px;
+      }
+    }
   }
 
   @include e(core) {

package/theme-chalk/src/upload.scss

@@ -195,12 +195,13 @@
     & .#{bem('icon', '', 'close-tip')} {
       display: none;
       position: absolute;
+      top: 1px;
       right: 5px;
       font-size: 12px;
       cursor: pointer;
       opacity: 1;
       color: getCssVar('color-primary');
-      transform: translateY(-50%);
+      font-style: normal;
     }
 
     &:hover {
@@ -236,7 +237,7 @@
 
       &:focus:not(:hover) {
         /* 键盘focus */
-        .#{$namespace}-icon-close-tip {
+        .#{bem('icon', '', 'close-tip')} {
           display: inline-block;
         }
       }
@@ -245,12 +246,13 @@
       &:active {
         /* click时 */
         outline-width: 0;
-        .#{$namespace}-icon--close-tip {
+        .#{bem('icon', '', 'close-tip')} {
           display: none;
         }
       }
 
-      &:hover {
+      &:hover,
+      &:focus {
         .#{bem('upload-list', 'item-status-label')} {
           display: none;
           opacity: 0;