element-plus 1.3.0-beta.9 → 2.0.0

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
@@ -925,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
 );
@@ -1143,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,37 +149,41 @@
         }
       }
     }
+
+    .#{$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) {
@@ -189,11 +192,11 @@
 
   @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 +219,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 +243,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 +258,7 @@
       &.active {
         background-color: var(--el-color-primary);
         color: var(--el-color-white);
+        font-weight: bold;
       }
     }
 
@@ -251,8 +266,7 @@
       .btn-prev,
       .btn-next,
       .#{$namespace}-pager li {
-        margin: 0 3px;
-        min-width: 22px;
+        min-width: 24px;
       }
     }
   }
@@ -261,17 +275,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 +294,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 +310,7 @@
 
       &.disabled {
         color: var(--el-text-color-placeholder);
+        cursor: not-allowed;
       }
 
       svg {
@@ -297,14 +318,6 @@
       }
     }
 
-    &.btn-quickprev:hover {
-      cursor: pointer;
-    }
-
-    &.btn-quicknext:hover {
-      cursor: pointer;
-    }
-
     &.active + li {
       border-left: 0;
     }
@@ -322,4 +335,8 @@
       cursor: default;
     }
   }
+
+  & + button.btn-next[type='button'] {
+    margin-right: 0;
+  }
 }

package/theme-chalk/src/popper.scss

@@ -9,7 +9,7 @@
 @include b(popper) {
   position: absolute;
   border-radius: var(--el-popper-border-radius);
-  padding: 6px 12px;
+  padding: 5px 11px;
   z-index: 2000;
   font-size: 12px;
   line-height: 20px;
@@ -22,16 +22,16 @@
   @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;
     }
   }
 
   @include when(light) {
-    // cause border has 1px offset
-    padding: 5px 11px;
     background: var(--el-color-white);
     border: 1px solid var(--el-border-color-light);
 
@@ -96,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;