@element-plus/nightly 0.0.20220122 → 0.0.20220126

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

@@ -700,12 +700,12 @@ $pagination: map.merge(
     'text-color': var(--el-text-color-primary),
     'border-radius': 3px,
     'button-color': var(--el-text-color-primary),
-    'button-width': 35.5px,
-    'button-height': 28px,
+    'button-width': 32px,
+    'button-height': 32px,
     'button-disabled-color': var(--el-text-color-placeholder),
     'button-disabled-bg-color': var(--el-color-white),
     'hover-color': var(--el-color-primary),
-    'height-extra-small': 22px,
+    'height-extra-small': 24px,
     'line-height-extra-small': var(--el-pagination-height-extra-small),
   ),
   $pagination
@@ -758,21 +758,6 @@ $skeleton: map.merge(
   $skeleton
 );
 
-// Tooltip
-// css3 var in packages/theme-chalk/src/tooltip.scss
-$tooltip: () !default;
-$tooltip: map.merge(
-  (
-    'fill': var(--el-text-color-primary),
-    'text-color': var(--el-color-white),
-    'font-size': 12px,
-    'border-color': var(--el-text-color-primary),
-    'arrow-size': 6px,
-    'padding': 10px,
-  ),
-  $tooltip
-);
-
 // Tag
 // css3 var in packages/theme-chalk/src/tag.scss
 $tag: () !default;
@@ -940,6 +925,10 @@ $rate: map.merge(
     'icon-size': 18px,
     'icon-margin': 6px,
     'icon-color': var(--el-text-color-placeholder),
+    'void-color': #c6d1de,
+    'star-color': #f7ba2a,
+    'disable-void-color': #eff2f7,
+    'text-color': #1f2d3d,
   ),
   $rate
 );
@@ -1158,6 +1147,16 @@ $empty: map.merge(
     'image-width': 160px,
     'description-margin-top': 20px,
     'bottom-margin-top': 20px,
+    'fill-color-0': var(--el-color-white),
+    'fill-color-1': #fcfcfd,
+    'fill-color-2': #f8f9fb,
+    'fill-color-3': #f7f8fc,
+    'fill-color-4': #eeeff3,
+    'fill-color-5': #edeef2,
+    'fill-color-6': #e9ebef,
+    'fill-color-7': #e5e7e9,
+    'fill-color-8': #e0e3e9,
+    'fill-color-9': #d5d7de,
   ),
   $empty
 );

package/theme-chalk/src/pagination.scss

@@ -110,7 +110,7 @@
       font-size: var(--el-font-size-extra-small);
       line-height: var(--el-pagination-line-height-extra-small);
       height: var(--el-pagination-height-extra-small);
-      min-width: 22px;
+      min-width: 24px;
     }
 
     .arrow.disabled {
@@ -216,10 +216,10 @@
     .btn-prev,
     .btn-next,
     .#{$namespace}-pager li {
-      margin: 0 5px;
+      margin: 0 4px;
       background-color: map.get($colors, 'info', 'light-9');
       color: var(--el-text-color-regular);
-      min-width: 30px;
+      min-width: 32px;
       border-radius: 2px;
 
       &.disabled {
@@ -251,8 +251,7 @@
       .btn-prev,
       .btn-next,
       .#{$namespace}-pager li {
-        margin: 0 3px;
-        min-width: 22px;
+        min-width: 24px;
       }
     }
   }

package/theme-chalk/src/popper.scss

@@ -9,10 +9,10 @@
 @include b(popper) {
   position: absolute;
   border-radius: var(--el-popper-border-radius);
-  padding: 10px;
+  padding: 6px 12px;
   z-index: 2000;
   font-size: 12px;
-  line-height: 1.2;
+  line-height: 20px;
   min-width: 10px;
   word-wrap: break-word;
   visibility: visible;
@@ -22,6 +22,7 @@
   @include when(dark) {
     color: var(--el-color-white);
     background: var(--el-text-color-primary);
+
     #{$arrow-selector}::before {
       background: var(--el-text-color-primary);
       right: 0;
@@ -29,6 +30,8 @@
   }
 
   @include when(light) {
+    // cause border has 1px offset
+    padding: 5px 11px;
     background: var(--el-color-white);
     border: 1px solid var(--el-border-color-light);
 
@@ -71,6 +74,21 @@
   @each $placement, $opposite in $placements {
     &[data-popper-placement^='#{$placement}'] > #{$arrow-selector} {
       #{$opposite}: -5px;
+
+      &::before {
+        @if $placement == top {
+          border-bottom-right-radius: 2px;
+        }
+        @if $placement == bottom {
+          border-top-left-radius: 2px;
+        }
+        @if $placement == left {
+          border-top-right-radius: 2px;
+        }
+        @if $placement == right {
+          border-bottom-left-radius: 2px;
+        }
+      }
     }
   }
 

package/theme-chalk/src/table.scss

@@ -115,18 +115,6 @@
     }
   }
 
-  @include m(scrollable-x) {
-    .#{$namespace}-table__body-wrapper {
-      overflow-x: auto;
-    }
-  }
-
-  @include m(scrollable-y) {
-    .#{$namespace}-table__body-wrapper {
-      overflow-y: scroll;
-    }
-  }
-
   thead {
     color: var(--el-table-header-text-color);
     font-weight: 500;

package/theme-chalk/src/tooltip.scss

@@ -1,95 +0,0 @@
-@use 'sass:map';
-
-@use 'mixins/mixins' as *;
-@use 'mixins/var' as *;
-@use 'common/var' as *;
-
-$positions: top, bottom, left, right;
-
-$positionMap: (
-  'top': 'bottom',
-  'bottom': 'top',
-  'left': 'right',
-  'right': 'left',
-);
-
-@include b(tooltip) {
-  @include set-component-css-var('tooltip', $tooltip);
-}
-
-@include b(tooltip) {
-  &:focus:not(.focusing),
-  &:focus:hover {
-    outline-width: 0;
-  }
-  @include e(popper) {
-    position: absolute;
-    border-radius: 4px;
-    padding: var(--el-tooltip-padding);
-    z-index: var(--el-index-popper);
-    font-size: var(--el-tooltip-font-size);
-    line-height: 1.2;
-    min-width: 10px;
-    word-wrap: break-word;
-
-    .popper__arrow,
-    .popper__arrow::after {
-      position: absolute;
-      display: block;
-      width: 0;
-      height: 0;
-      border-color: transparent;
-      border-style: solid;
-    }
-
-    .popper__arrow {
-      border-width: var(--el-tooltip-arrow-size);
-    }
-
-    .popper__arrow::after {
-      content: ' ';
-      border-width: 5px;
-    }
-
-    @each $position in $positions {
-      &[x-placement^='#{$position}'] {
-        margin-#{map.get($positionMap, $position)}: calc(
-          var(--el-tooltip-arrow-size) + 6px
-        );
-      }
-
-      &[x-placement^='#{$position}'] .popper__arrow {
-        #{map.get($positionMap, $position)}: calc(
-          0px - var(--el-tooltip-arrow-size)
-        );
-        border-#{$position}-color: var(--el-tooltip-border-color);
-        border-#{map.get($positionMap, $position)}-width: 0;
-
-        &::after {
-          #{map.get($positionMap, $position)}: 1px;
-          border-#{$position}-color: var(--el-tooltip-fill);
-          border-#{map.get($positionMap, $position)}-width: 0;
-        }
-      }
-    }
-
-    @include when(dark) {
-      background: var(--el-tooltip-fill);
-      color: var(--el-tooltip-color);
-    }
-
-    @include when(light) {
-      background: var(--el-tooltip-color);
-      border: 1px solid var(--el-tooltip-fill);
-
-      @each $position in $positions {
-        &[x-placement^='#{$position}'] .popper__arrow {
-          border-top-color: var(--el-tooltip-fill);
-          &::after {
-            border-top-color: var(--el-tooltip-color);
-          }
-        }
-      }
-    }
-  }
-}