element-plus 1.3.0-beta.7 → 2.0.1

package/theme-chalk/src/breadcrumb.scss

@@ -23,6 +23,8 @@
 
   @include e(item) {
     float: left;
+    display: flex;
+    align-items: center;
 
     @include e(inner) {
       color: var(--el-text-color-regular);

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

@@ -695,17 +695,17 @@ $table-cell-padding: map.merge(
 $pagination: () !default;
 $pagination: map.merge(
   (
-    'font-size': 13px,
+    'font-size': 14px,
     'bg-color': var(--el-color-white),
     '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/dialog.scss

@@ -35,6 +35,13 @@
     margin: 0;
   }
 
+  @include when(draggable) {
+    @include e(header) {
+      cursor: move;
+      user-select: none;
+    }
+  }
+
   @include e(header) {
     padding: var(--el-dialog-padding-primary);
     padding-bottom: 10px;

package/theme-chalk/src/image-viewer.scss

@@ -51,6 +51,7 @@
     display: flex;
     justify-content: center;
     align-items: center;
+    user-select: none;
   }
 
   @include e(actions) {

package/theme-chalk/src/message-box.scss

@@ -24,13 +24,29 @@
   backface-visibility: hidden;
 
   @at-root .#{$namespace}-overlay.is-message-box {
-    text-align: center;
-    &::after {
-      content: '';
-      display: inline-block;
-      height: 100%;
-      width: 0;
-      vertical-align: middle;
+    .#{$namespace}-overlay-message-box {
+      text-align: center;
+      position: fixed;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      overflow: auto;
+
+      &::after {
+        content: '';
+        display: inline-block;
+        height: 100%;
+        width: 0;
+        vertical-align: middle;
+      }
+    }
+  }
+
+  @include when(draggable) {
+    @include e(header) {
+      cursor: move;
+      user-select: none;
     }
   }
 
@@ -87,6 +103,7 @@
 
     & div.invalid > input {
       border-color: var(--el-color-error);
+
       &:focus {
         border-color: var(--el-color-error);
       }
@@ -152,12 +169,6 @@
 
   // centerAlign 布局
   @include m(center) {
-    padding-bottom: 30px;
-
-    @include e(header) {
-      padding-top: 30px;
-    }
-
     @include e(title) {
       position: relative;
       display: flex;
@@ -191,13 +202,13 @@
 }
 
 .fade-in-linear-enter-active {
-  .#{$namespace}-message-box {
+  .#{$namespace}-overlay-message-box {
     animation: msgbox-fade-in var(--el-transition-duration);
   }
 }
 
 .fade-in-linear-leave-active {
-  .#{$namespace}-message-box {
+  .#{$namespace}-overlay-message-box {
     animation: msgbox-fade-in var(--el-transition-duration) reverse;
   }
 }

package/theme-chalk/src/pagination.scss

@@ -5,25 +5,43 @@
 @use 'mixins/var' as *;
 @use 'common/var' as *;
 
+@mixin remove-margin {
+  & + button.btn-prev[type='button'] {
+    margin-left: 0;
+  }
+
+  & + .el-pager {
+    .number {
+      &:first-child {
+        margin-left: 0;
+      }
+      &:last-child {
+        margin-right: 0;
+      }
+    }
+  }
+}
+
 @include b(pagination) {
   @include set-component-css-var('pagination', $pagination);
 
   white-space: nowrap;
   padding: 2px 5px;
   color: var(--el-pagination-text-color);
-  font-weight: bold;
+  font-weight: normal;
+  display: flex;
+  align-items: center;
   @include utils-clearfix;
 
   span:not([class*='suffix']),
   button {
-    display: inline-flex;
+    display: flex;
     justify-content: center;
     align-items: center;
     font-size: var(--el-pagination-font-size);
     min-width: var(--el-pagination-button-width);
     height: var(--el-pagination-button-height);
     line-height: var(--el-pagination-button-height);
-    vertical-align: top;
     box-sizing: border-box;
   }
 
@@ -33,20 +51,8 @@
     line-height: normal;
   }
 
-  // pagesize 的下拉 icon
-  .#{$namespace}-input__suffix {
-    right: 0;
-    transform: scale(0.8);
-  }
-
   .#{$namespace}-select .#{$namespace}-input {
-    width: 100px;
-    margin: 0 5px;
-
-    .#{$namespace}-input__inner {
-      padding-right: 25px;
-      border-radius: var(--el-pagination-border-radius);
-    }
+    width: 128px;
   }
 
   button {
@@ -86,14 +92,6 @@
     }
   }
 
-  .btn-prev {
-    padding-right: 12px;
-  }
-
-  .btn-next {
-    padding-left: 12px;
-  }
-
   .#{$namespace}-pager li.disabled {
     color: var(--el-text-color-placeholder);
     cursor: not-allowed;
@@ -110,7 +108,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 {
@@ -126,6 +124,7 @@
     button {
       height: var(--el-pagination-height-extra-small);
       line-height: var(--el-pagination-line-height-extra-small);
+      font-size: var(--el-font-size-extra-small);
     }
 
     @include e(editor) {
@@ -150,50 +149,57 @@
         }
       }
     }
+
+    .#{$namespace}-select .#{$namespace}-input {
+      width: 100px;
+    }
   }
 
   @include e(sizes) {
-    margin: 0 10px 0 0;
+    margin: 0 16px 0 0;
     font-weight: normal;
     color: var(--el-text-color-regular);
-
-    .#{$namespace}-input .#{$namespace}-input__inner {
-      font-size: var(--el-pagination-font-size);
-      padding-left: 8px;
-
-      &:hover {
-        border-color: var(--el-pagination-hover-color);
-      }
-    }
+    @include remove-margin();
   }
 
   @include e(total) {
-    margin-right: 10px;
+    margin-right: 16px;
     font-weight: normal;
     color: var(--el-text-color-regular);
+    @include remove-margin();
+    &[disabled='true'] {
+      color: var(--el-text-color-placeholder);
+    }
   }
 
   @include e(jump) {
-    margin-left: 24px;
+    margin-left: 16px;
     font-weight: normal;
     color: var(--el-text-color-regular);
 
     .#{$namespace}-input__inner {
       padding: 0 3px;
     }
+
+    &[disabled='true'] {
+      color: var(--el-text-color-placeholder);
+    }
   }
 
   @include e(rightwrapper) {
-    float: right;
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
   }
 
   @include e(editor) {
     line-height: 18px;
-    padding: 0 2px;
+    margin: 0 8px;
     height: var(--el-pagination-button-height);
+    min-width: 56px;
 
     text-align: center;
-    margin: 0 2px;
     box-sizing: border-box;
     border-radius: var(--el-pagination-border-radius);
 
@@ -216,14 +222,21 @@
     .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 {
         color: var(--el-text-color-placeholder);
+        background-color: var(--el-disabled-bg-color);
+      }
+      @include when(first) {
+        margin-left: 0;
+      }
+      @include when(last) {
+        margin-right: 0;
       }
     }
 
@@ -233,6 +246,10 @@
 
       &:disabled {
         color: var(--el-text-color-placeholder);
+        background-color: var(--el-disabled-bg-color);
+      }
+      &:hover:not([disabled]) {
+        color: var(--el-pagination-hover-color);
       }
     }
 
@@ -244,6 +261,7 @@
       &.active {
         background-color: var(--el-color-primary);
         color: var(--el-color-white);
+        font-weight: bold;
       }
     }
 
@@ -251,8 +269,7 @@
       .btn-prev,
       .btn-next,
       .#{$namespace}-pager li {
-        margin: 0 3px;
-        min-width: 22px;
+        min-width: 24px;
       }
     }
   }
@@ -261,17 +278,16 @@
 @include b(pager) {
   user-select: none;
   list-style: none;
-  display: inline-block;
-  vertical-align: top;
   font-size: 0;
   padding: 0;
   margin: 0;
+  display: flex;
+  align-items: center;
 
   li {
     padding: 0 4px;
     background: var(--el-pagination-bg-color);
-    vertical-align: top;
-    display: inline-flex;
+    display: flex;
     justify-content: center;
     align-items: center;
     font-size: var(--el-pagination-font-size);
@@ -281,7 +297,14 @@
     cursor: pointer;
     box-sizing: border-box;
     text-align: center;
-    margin: 1px;
+
+    &.btn-quickprev:hover {
+      cursor: pointer;
+    }
+
+    &.btn-quicknext:hover {
+      cursor: pointer;
+    }
 
     &.btn-quicknext,
     &.btn-quickprev {
@@ -290,6 +313,7 @@
 
       &.disabled {
         color: var(--el-text-color-placeholder);
+        cursor: not-allowed;
       }
 
       svg {
@@ -297,14 +321,6 @@
       }
     }
 
-    &.btn-quickprev:hover {
-      cursor: pointer;
-    }
-
-    &.btn-quicknext:hover {
-      cursor: pointer;
-    }
-
     &.active + li {
       border-left: 0;
     }
@@ -322,4 +338,8 @@
       cursor: default;
     }
   }
+
+  & + button.btn-next[type='button'] {
+    margin-right: 0;
+  }
 }

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: 5px 11px;
   z-index: 2000;
   font-size: 12px;
-  line-height: 1.2;
+  line-height: 20px;
   min-width: 10px;
   word-wrap: break-word;
   visibility: visible;
@@ -22,7 +22,10 @@
   @include when(dark) {
     color: var(--el-color-white);
     background: var(--el-text-color-primary);
+    border: 1px solid var(--el-text-color-primary);
+
     #{$arrow-selector}::before {
+      border: 1px solid var(--el-text-color-primary);
       background: var(--el-text-color-primary);
       right: 0;
     }
@@ -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;
+        }
+      }
     }
   }
 
@@ -78,10 +96,10 @@
     $adjacency
       in ('top': 'left', 'bottom': 'right', 'left': 'bottom', 'right': 'top')
   {
-    &.is-light[data-popper-placement^='#{$placement}'] {
+    &[data-popper-placement^='#{$placement}'] {
       #{$arrow-selector}::before {
-        border-#{$placement}-color: transparent;
-        border-#{$adjacency}-color: transparent;
+        border-#{$placement}-color: transparent !important;
+        border-#{$adjacency}-color: transparent !important;
       }
     }
   }

package/theme-chalk/src/select.scss

@@ -34,7 +34,7 @@
     display: inline-block;
   }
 
-  &:hover {
+  &:hover:not(.#{$namespace}-select--disabled) {
     .#{$namespace}-input__inner {
       border-color: var(--el-select-border-color-hover);
     }
@@ -47,7 +47,7 @@
     display: inline-flex;
 
     &:focus {
-      border-color: var(--el-select-input-focus-border-color);
+      border-color: var(--el-select-input-focus-border-color) !important;
     }
   }
 
@@ -97,7 +97,7 @@
     }
 
     &.is-focus .#{$namespace}-input__inner {
-      border-color: var(--el-select-input-focus-border-color);
+      border-color: var(--el-select-input-focus-border-color) !important;
     }
   }
 

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);
-          }
-        }
-      }
-    }
-  }
-}