@element-plus/nightly 0.0.20240229 → 0.0.20240301

package/theme-chalk/src/button.scss

@@ -43,8 +43,7 @@ $button-icon-span-gap: map.merge(
   border: getCssVar('border');
   border-color: getCssVar('button', 'border-color');
 
-  &:hover,
-  &:focus {
+  &:hover {
     color: getCssVar('button', 'hover', 'text-color');
     border-color: getCssVar('button', 'hover', 'border-color');
     background-color: getCssVar('button', 'hover', 'bg-color');
@@ -61,6 +60,7 @@ $button-icon-span-gap: map.merge(
   &:focus-visible {
     outline: 2px solid getCssVar('button', 'outline-color');
     outline-offset: 1px;
+    transition: outline-offset 0s, outline 0s;
   }
 
   > span {
@@ -116,8 +116,7 @@ $button-icon-span-gap: map.merge(
 
   @include when(disabled) {
     &,
-    &:hover,
-    &:focus {
+    &:hover {
       color: getCssVar('button', 'disabled', 'text-color');
       cursor: not-allowed;
       background-image: none;
@@ -164,14 +163,14 @@ $button-icon-span-gap: map.merge(
     }
 
     &:not(.is-disabled) {
-      &:hover,
-      &:focus {
+      &:hover {
         background-color: getCssVar('fill-color', 'light');
       }
 
       &:focus-visible {
         outline: 2px solid getCssVar('button', 'outline-color');
         outline-offset: 1px;
+        transition: outline-offset 0s, outline 0s;
       }
 
       &:active {
@@ -181,8 +180,7 @@ $button-icon-span-gap: map.merge(
       @include when(has-bg) {
         background-color: getCssVar('fill-color', 'light');
 
-        &:hover,
-        &:focus {
+        &:hover {
           background-color: getCssVar('fill-color');
         }
 
@@ -207,8 +205,7 @@ $button-icon-span-gap: map.merge(
     padding: 2px;
     height: auto;
 
-    &:hover,
-    &:focus {
+    &:hover {
       color: getCssVar('button', 'hover', 'link-text-color');
     }
 
@@ -219,8 +216,7 @@ $button-icon-span-gap: map.merge(
     }
 
     &:not(.is-disabled) {
-      &:hover,
-      &:focus {
+      &:hover {
         border-color: transparent;
         background-color: transparent;
       }
@@ -246,8 +242,7 @@ $button-icon-span-gap: map.merge(
     }
 
     &:not(.is-disabled) {
-      &:hover,
-      &:focus {
+      &:hover {
         color: getCssVar('color', 'primary', 'light-3');
         border-color: transparent;
         background-color: transparent;

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

@@ -130,11 +130,7 @@
     &.selected .#{$namespace}-date-table-cell {
       margin-left: 5px;
       margin-right: 5px;
-      background-color: getCssVar('datepicker-inrange-bg-color');
       border-radius: 15px;
-      &:hover {
-        background-color: getCssVar('datepicker-inrange-hover-bg-color');
-      }
     }
 
     &.selected .#{$namespace}-date-table-cell__text {

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

@@ -7,9 +7,11 @@
   border-collapse: collapse;
 
   td {
+    width: 68px;
     text-align: center;
     padding: 8px 0;
     cursor: pointer;
+    position: relative;
     & div {
       height: 48px;
       padding: 6px 0;
@@ -37,13 +39,16 @@
     }
 
     .cell {
-      width: 60px;
+      width: 54px;
       height: 36px;
       display: block;
       line-height: 36px;
       color: getCssVar('datepicker-text-color');
       margin: 0 auto;
       border-radius: 18px;
+      position: absolute;
+      left: 50%;
+      transform: translateX(-50%);
       &:hover {
         color: getCssVar('datepicker-hover-text-color');
       }
@@ -67,23 +72,33 @@
     }
 
     &.start-date div {
+      margin-left: 3px;
       border-top-left-radius: 24px;
       border-bottom-left-radius: 24px;
     }
 
     &.end-date div {
+      margin-right: 3px;
       border-top-right-radius: 24px;
       border-bottom-right-radius: 24px;
     }
 
+    &.current:not(.disabled) div {
+      border-radius: 24px;
+      margin-left: 3px;
+      margin-right: 3px;
+    }
+
     &.current:not(.disabled) .cell {
-      color: getCssVar('datepicker-active-color');
+      color: $color-white;
+      background-color: getCssVar('datepicker-active-color');
     }
 
     &:focus-visible {
       outline: none;
       .cell {
         outline: 2px solid getCssVar('datepicker-active-color');
+        outline-offset: 1px;
       }
     }
   }

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

@@ -11,9 +11,17 @@
   }
 
   td {
+    width: 68px;
     text-align: center;
-    padding: 20px 3px;
+    padding: 8px 0px;
     cursor: pointer;
+    position: relative;
+
+    & div {
+      height: 48px;
+      padding: 6px 0;
+      box-sizing: border-box;
+    }
 
     &.today {
       .cell {
@@ -33,27 +41,38 @@
     }
 
     .cell {
-      width: 48px;
+      width: 54px;
       height: 36px;
       display: block;
       line-height: 36px;
       color: getCssVar('datepicker-text-color');
       border-radius: 18px;
       margin: 0 auto;
+      position: absolute;
+      left: 50%;
+      transform: translateX(-50%);
 
       &:hover {
         color: getCssVar('datepicker-hover-text-color');
       }
     }
 
+    &.current:not(.disabled) div {
+      border-radius: 24px;
+      margin-left: 3px;
+      margin-right: 3px;
+    }
+
     &.current:not(.disabled) .cell {
-      color: getCssVar('datepicker-active-color');
+      color: $color-white;
+      background-color: getCssVar('datepicker-active-color');
     }
 
     &:focus-visible {
       outline: none;
       .cell {
         outline: 2px solid getCssVar('datepicker-active-color');
+        outline-offset: 1px;
       }
     }
   }