mazey-element-ui 2.0.1 → 2.15.16

package/packages/theme-chalk/src/table.scss

@@ -13,22 +13,23 @@
   max-width: 100%;
   background-color: $--color-white;
   font-size: 14px;
-  color: $--table-text-color;
+  color: $--table-font-color;
 
   // 数据为空
   @include e(empty-block) {
-    position: relative;
     min-height: 60px;
     text-align: center;
     width: 100%;
-    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
   }
 
   @include e(empty-text) {
-    position: absolute;
-    left: 50%;
-    top: 50%;
-    transform: translate(-50%, -50%);
+    // min-height doesn't work in IE10 and IE11 https://github.com/philipwalton/flexbugs#3-min-height-on-a-flex-container-wont-apply-to-its-flex-items
+    // set empty text line height up to contrainer min-height as workaround.
+    line-height: 60px;
+    width: 50%;
     color: $--color-text-secondary;
   }
 
@@ -74,11 +75,21 @@
     }
   }
 
+  @include e(placeholder) {
+    display: inline-block;
+    width: 20px;
+  }
+
+  @include e(append-wrapper) {
+    // 避免外边距重合 https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing
+    overflow: hidden;
+  }
+
   @include m(fit) {
     border-right: 0;
     border-bottom: 0;
 
-    th.gutter, td.gutter {
+    .el-table__cell.gutter {
       border-right-width: 1px;
     }
   }
@@ -96,32 +107,29 @@
   }
 
   thead {
-    color: $--table-header-color;
+    color: $--table-header-font-color;
     font-weight: 500;
 
     &.is-group {
-      th {
+      th.el-table__cell {
         background: $--background-color-base;
       }
     }
   }
 
-  th, td {
+  .el-table__cell {
     padding: 12px 0;
     min-width: 0;
     box-sizing: border-box;
     text-overflow: ellipsis;
     vertical-align: middle;
     position: relative;
+    text-align: left;
 
     @include when(center) {
       text-align: center;
     }
 
-    @include when(left) {
-      text-align: left;
-    }
-
     @include when(right) {
       text-align: right;
     }
@@ -141,21 +149,21 @@
   }
 
   @include m(medium) {
-    th, td {
+    .el-table__cell {
       padding: 10px 0;
     }
   }
 
   @include m(small) {
     font-size: 12px;
-    th, td {
+    .el-table__cell {
       padding: 8px 0;
     }
   }
 
   @include m(mini) {
     font-size: 12px;
-    th, td {
+    .el-table__cell {
       padding: 6px 0;
     }
   }
@@ -168,40 +176,28 @@
     }
   }
 
-  th.is-leaf, td {
+  th.el-table__cell.is-leaf,
+  td.el-table__cell {
     border-bottom: $--table-border;
   }
 
-  th.is-sortable {
+  th.el-table__cell.is-sortable {
     cursor: pointer;
   }
 
-  th {
-    white-space: nowrap;
+  th.el-table__cell {
     overflow: hidden;
     user-select: none;
-    text-align: left;
-    background-color: $--table-header-background;
+    background-color: $--table-header-background-color;
 
-    div {
+    > .cell {
       display: inline-block;
-      padding-left: 10px;
-      padding-right: 10px;
-      line-height: 40px;
       box-sizing: border-box;
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-    }
-
-    > .cell {
       position: relative;
-      word-wrap: normal;
-      text-overflow: ellipsis;
-      display: inline-block;
       vertical-align: middle;
+      padding-left: 10px;
+      padding-right: 10px;
       width: 100%;
-      box-sizing: border-box;
 
       &.highlight {
         color: $--color-primary;
@@ -220,7 +216,7 @@
     }
   }
 
-  td {
+  td.el-table__cell {
     div {
       box-sizing: border-box;
     }
@@ -285,7 +281,7 @@
       border-color: transparent;
     }
 
-    th, td {
+    .el-table__cell {
       border-right: $--table-border;
 
       &:first-child .cell {
@@ -293,12 +289,12 @@
       }
     }
 
-    th.gutter:last-of-type {
+    th.el-table__cell.gutter:last-of-type {
       border-bottom: $--table-border;
       border-bottom-width: 1px;
     }
 
-    & th {
+    & th.el-table__cell {
       border-bottom: $--table-border;
     }
   }
@@ -361,10 +357,10 @@
     bottom: 0;
     z-index: 3;
 
-    & tbody td {
+    & tbody td.el-table__cell {
       border-top: $--table-border;
-      background-color: $--table-row-hover-background;
-      color: $--table-text-color;
+      background-color: $--table-row-hover-background-color;
+      color: $--table-font-color;
     }
   }
 
@@ -382,7 +378,7 @@
 
   @include e(footer-wrapper) {
     margin-top: -1px;
-    td {
+    td.el-table__cell {
       border-top: $--table-border;
     }
   }
@@ -395,9 +391,9 @@
   @include e((header-wrapper, footer-wrapper)) {
     overflow: hidden;
 
-    & tbody td {
-      background-color: $--table-row-hover-background;
-      color: $--table-text-color;
+    & tbody td.el-table__cell {
+      background-color: $--table-row-hover-background-color;
+      color: $--table-font-color;
     }
   }
 
@@ -486,12 +482,12 @@
   @include m(striped) {
     & .el-table__body {
       & tr.el-table__row--striped {
-        td {
+        td.el-table__cell {
           background: #FAFAFA;
         }
 
-        &.current-row td {
-          background-color: $--table-current-row-background;
+        &.current-row td.el-table__cell, &.selection-row td.el-table__cell {
+          background-color: $--table-current-row-background-color;
         }
       }
     }
@@ -500,16 +496,16 @@
   @include e(body) {
     tr.hover-row {
       &, &.el-table__row--striped {
-        &, &.current-row {
-          > td {
-            background-color: $--table-current-row-background;
+        &, &.current-row, &.selection-row {
+          > td.el-table__cell {
+            background-color: $--table-row-hover-background-color;
           }
         }
       }
     }
 
-    tr.current-row > td {
-      background-color: $--table-current-row-background;
+    tr.current-row > td.el-table__cell, tr.selection-row > td.el-table__cell {
+      background-color: $--table-current-row-background-color;
     }
   }
 
@@ -536,14 +532,14 @@
   }
 
   @include m(enable-row-transition) {
-    .el-table__body td {
+    .el-table__body td.el-table__cell {
       transition: background-color .25s ease;
     }
   }
 
   @include m(enable-row-hover) {
-    .el-table__body tr:hover > td {
-      background-color: $--table-row-hover-background;
+    .el-table__body tr:hover > td.el-table__cell {
+      background-color: $--table-row-hover-background-color;
     }
   }
 
@@ -554,4 +550,15 @@
       overflow: hidden;
     }
   }
+
+  [class*=el-table__row--level] {
+    .el-table__expand-icon {
+      display: inline-block;
+      width: 20px;
+      line-height: 20px;
+      height: 20px;
+      text-align: center;
+      margin-right: 3px;
+    }
+  }
 }

package/packages/theme-chalk/src/tabs.scss

@@ -82,6 +82,15 @@
     transition: transform .3s;
     float: left;
     z-index: #{$--index-normal + 1};
+
+    @include when(stretch) {
+      min-width: 100%;
+      display: flex;
+      & > * {
+        flex: 1;
+        text-align: center;
+      }
+    }
   }
   @include e(item) {
     padding: 0 20px;
@@ -100,7 +109,7 @@
     }
 
     &:focus.is-active.is-focus:not(:active) {
-      box-shadow: 0 0 2px 2px #409eff inset;
+      box-shadow: 0 0 2px 2px $--color-primary inset;
       border-radius: 3px;
     }
 
@@ -149,6 +158,7 @@
       border: 1px solid $--border-color-light;
       border-bottom: none;
       border-radius: 4px 4px 0 0;
+      box-sizing: border-box;
     }
     > .el-tabs__header .el-tabs__active-bar {
       display: none;
@@ -201,10 +211,10 @@
     border: 1px solid $--border-color-base;
     box-shadow: 0 2px 4px 0 rgba(0,0,0,0.12), 0 0 6px 0 rgba(0,0,0,0.04);
 
-    >.el-tabs__content {
+    > .el-tabs__content {
       padding: 15px;
     }
-    >.el-tabs__header {
+    > .el-tabs__header {
       background-color: $--background-color-base;
       border-bottom: 1px solid $--border-color-light;
       margin: 0;
@@ -212,12 +222,20 @@
     > .el-tabs__header .el-tabs__nav-wrap::after {
       content: none;
     }
-    >.el-tabs__header .el-tabs__item {
+    > .el-tabs__header .el-tabs__item {
       transition: all .3s cubic-bezier(.645,.045,.355,1);
       border: 1px solid transparent;
-      margin: -1px -1px 0;
+      margin-top: -1px;
       color: $--color-text-secondary;
 
+      &:first-child {
+        margin-left: -1px;
+      }
+
+      & + .el-tabs__item {
+        margin-left: -1px;
+      }
+
       &.is-active {
         color: $--color-primary;
         background-color: $--color-white;
@@ -231,6 +249,10 @@
         color: $--disabled-color-base;
       }
     }
+
+    > .el-tabs__header .is-scrollable .el-tabs__item:first-child {
+      margin-left: 0;
+    }
   }
   @include m((top, bottom)) {
     .el-tabs__item.is-top:nth-child(2),
@@ -244,11 +266,13 @@
 
     &.el-tabs--border-card, &.el-tabs--card,
     .el-tabs--left, .el-tabs--right {
-      .el-tabs__item:nth-child(2) {
-        padding-left: 20px;
-      }
-      .el-tabs__item:last-child {
-        padding-right: 20px;
+      > .el-tabs__header {
+        .el-tabs__item:nth-child(2) {
+          padding-left: 20px;
+        }
+        .el-tabs__item:last-child {
+          padding-right: 20px;
+        }
       }
     }
   }
@@ -297,6 +321,27 @@
     .el-tabs__nav-wrap.is-right {
       margin-bottom: 0;
 
+      > .el-tabs__nav-prev,
+      > .el-tabs__nav-next {
+        height: 30px;
+        line-height: 30px;
+        width: 100%;
+        text-align: center;
+        cursor: pointer;
+
+        i {
+          transform: rotateZ(90deg);
+        }
+      }
+      > .el-tabs__nav-prev {
+        left: auto;
+        top: 0;
+      }
+      > .el-tabs__nav-next {
+        right: auto;
+        bottom: 0;
+      }
+
       &.is-scrollable {
         padding: 30px 0;
       }
@@ -309,34 +354,14 @@
       }
     }
 
-    .el-tabs__nav {
+    .el-tabs__nav.is-left,
+    .el-tabs__nav.is-right {
       float: none;
     }
     .el-tabs__item.is-left,
     .el-tabs__item.is-right {
       display: block;
     }
-
-    .el-tabs__nav-prev,
-    .el-tabs__nav-next {
-      height: 30px;
-      line-height: 30px;
-      width: 100%;
-      text-align: center;
-      cursor: pointer;
-
-      i {
-        transform: rotateZ(90deg);
-      }
-    }
-    .el-tabs__nav-prev {
-      left: auto;
-      top: 0;
-    }
-    .el-tabs__nav-next {
-      right: auto;
-      bottom: 0;
-    }
   }
   @include m(left) {
     .el-tabs__header.is-left {
@@ -368,6 +393,7 @@
         border-right: 1px solid $--border-color-light;
         border-bottom: none;
         border-top: 1px solid $--border-color-light;
+        text-align: left;
       }
       .el-tabs__item.is-left:first-child {
         border-right: 1px solid $--border-color-light;

package/packages/theme-chalk/src/tag.scss

@@ -1,119 +1,136 @@
 @import "mixins/mixins";
 @import "common/var";
 
-@include b(tag) {
-  background-color: $--tag-fill;
-  display: inline-block;
-  padding: $--tag-padding;
-  height: 32px;
-  line-height: 30px;
-  font-size: $--tag-font-size;
-  color: $--tag-color;
-  border-radius: $--tag-border-radius;
-  box-sizing: border-box;
-  border: 1px solid $--tag-border;
-  white-space: nowrap;
-
-  .el-icon-close {
-    border-radius: 50%;
-    text-align: center;
-    position: relative;
-    cursor: pointer;
-    font-size: 12px;
-    height: 16px;
-    width: 16px;
-    line-height: 16px;
-    vertical-align: middle;
-    top: -1px;
-    right: -5px;
-    color: $--tag-color;
+@mixin genTheme($backgroundColorWeight, $borderColorWeight, $fontColorWeight, $hoverColorWeight) {
+  background-color: mix($--tag-primary-color, $--color-white, $backgroundColorWeight);
+  border-color: mix($--tag-primary-color, $--color-white, $borderColorWeight);
+  color: mix($--tag-primary-color, $--color-white, $fontColorWeight);
 
-    &::before {
-      display: block;
-    }
+  @include when(hit) {
+    border-color: $--tag-primary-color;
+  }
 
+  .el-tag__close {
+    color: mix($--tag-primary-color, $--color-white, $fontColorWeight);
     &:hover {
-      background-color: $--tag-color;
       color: $--color-white;
+      background-color: mix($--tag-primary-color, $--color-white, $hoverColorWeight);
     }
   }
 
-  @include m(info) {
-    background-color: $--tag-info-fill;
-    border-color: $--tag-info-border;
-    color: $--tag-info-color;
+  &.el-tag--info {
+    background-color: mix($--tag-info-color, $--color-white, $backgroundColorWeight);
+    border-color: mix($--tag-info-color, $--color-white, $borderColorWeight);
+    color: mix($--tag-info-color, $--color-white, $fontColorWeight);
 
     @include when(hit) {
       border-color: $--tag-info-color;
     }
 
     .el-tag__close {
-      color: $--tag-info-color;
-    }
-
-    .el-tag__close:hover {
-      background-color: $--tag-info-color;
-      color: $--color-white;
+      color: mix($--tag-info-color, $--color-white, $fontColorWeight);
+      &:hover {
+        color: $--color-white;
+        background-color: mix($--tag-info-color, $--color-white, $hoverColorWeight);
+      }
     }
   }
 
-  @include m(success) {
-    background-color: $--tag-success-fill;
-    border-color: $--tag-success-border;
-    color: $--tag-success-color;
+  &.el-tag--success {
+    background-color: mix($--tag-success-color, $--color-white, $backgroundColorWeight);
+    border-color: mix($--tag-success-color, $--color-white, $borderColorWeight);
+    color: mix($--tag-success-color, $--color-white, $fontColorWeight);
 
     @include when(hit) {
       border-color: $--tag-success-color;
     }
 
     .el-tag__close {
-      color: $--tag-success-color;
-    }
-
-    .el-tag__close:hover {
-      background-color: $--tag-success-color;
-      color: $--color-white;
+      color: mix($--tag-success-color, $--color-white, $fontColorWeight);
+      &:hover {
+        color: $--color-white;
+        background-color: mix($--tag-success-color, $--color-white, $hoverColorWeight);
+      }
     }
   }
 
-  @include m(warning) {
-    background-color: $--tag-warning-fill;
-    border-color: $--tag-warning-border;
-    color: $--tag-warning-color;
+  &.el-tag--warning {
+    background-color: mix($--tag-warning-color, $--color-white, $backgroundColorWeight);
+    border-color: mix($--tag-warning-color, $--color-white, $borderColorWeight);
+    color: mix($--tag-warning-color, $--color-white, $fontColorWeight);
 
     @include when(hit) {
       border-color: $--tag-warning-color;
     }
 
     .el-tag__close {
-      color: $--tag-warning-color;
-    }
-
-    .el-tag__close:hover {
-      background-color: $--tag-warning-color;
-      color: $--color-white;
+      color: mix($--tag-warning-color, $--color-white, $fontColorWeight);
+      &:hover {
+        color: $--color-white;
+        background-color: mix($--tag-warning-color, $--color-white, $hoverColorWeight);
+      }
     }
   }
 
-  @include m(danger) {
-    background-color: $--tag-danger-fill;
-    border-color: $--tag-danger-border;
-    color: $--tag-danger-color;
+  &.el-tag--danger {
+    background-color: mix($--tag-danger-color, $--color-white, $backgroundColorWeight);
+    border-color: mix($--tag-danger-color, $--color-white, $borderColorWeight);
+    color: mix($--tag-danger-color, $--color-white, $fontColorWeight);
 
     @include when(hit) {
       border-color: $--tag-danger-color;
     }
 
     .el-tag__close {
-      color: $--tag-danger-color;
+      color: mix($--tag-danger-color, $--color-white, $fontColorWeight);
+      &:hover {
+        color: $--color-white;
+        background-color: mix($--tag-danger-color, $--color-white, $hoverColorWeight);
+      }
     }
+  }
+}
 
-    .el-tag__close:hover {
-      background-color: $--tag-danger-color;
-      color: $--color-white;
+@include b(tag) {
+  @include genTheme(10%, 20%, 100%, 100%);
+  display: inline-block;
+  height: 32px;
+  padding: $--tag-padding;
+  line-height: 30px;
+  font-size: $--tag-font-size;
+  color: $--tag-primary-color;
+  border-width: 1px;
+  border-style: solid;
+  border-radius: $--tag-border-radius;
+  box-sizing: border-box;
+  white-space: nowrap;
+
+  .el-icon-close {
+    border-radius: 50%;
+    text-align: center;
+    position: relative;
+    cursor: pointer;
+    font-size: 12px;
+    height: 16px;
+    width: 16px;
+    line-height: 16px;
+    vertical-align: middle;
+    top: -1px;
+    right: -5px;
+
+    &::before {
+      display: block;
     }
   }
 
+  @include m(dark) {
+    @include genTheme(100%, 100%, 0, 80%);
+  }
+
+  @include m(plain) {
+    @include genTheme(0, 40%, 100%, 100%);
+  }
+
   @include m(medium) {
     height: 28px;
     line-height: 26px;