mazey-element-ui 2.0.1 → 2.15.16

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

@@ -6,7 +6,7 @@
 @include b(pagination) {
   white-space: nowrap;
   padding: 2px 5px;
-  color: $--pagination-color;
+  color: $--pagination-font-color;
   font-weight: bold;
   @include utils-clearfix;
 
@@ -40,7 +40,6 @@
     .el-input__inner {
       padding-right: 25px;
       border-radius: $--pagination-border-radius;
-      height: $--pagination-button-height;
     }
   }
 
@@ -54,12 +53,12 @@
     }
 
     &:hover {
-      color: $--pagination-hover-fill;
+      color: $--pagination-hover-color;
     }
 
     &:disabled {
       color: $--pagination-button-disabled-color;
-      background-color: $--pagination-button-disabled-fill;
+      background-color: $--pagination-button-disabled-background-color;
       cursor: not-allowed;
     }
   }
@@ -68,7 +67,7 @@
   .btn-next {
     background: center center no-repeat;
     background-size: 16px;
-    background-color: $--pagination-fill;
+    background-color: $--pagination-background-color;
     cursor: pointer;
     margin: 0;
     color: $--pagination-button-color;
@@ -140,7 +139,7 @@
       padding-left: 8px;
 
       &:hover {
-        border-color: $--pagination-hover-fill;
+        border-color: $--pagination-hover-color;
       }
     }
   }
@@ -215,7 +214,7 @@
 
     .el-pager li:not(.disabled) {
       &:hover {
-        color: $--pagination-hover-fill;
+        color: $--pagination-hover-color;
       }
 
       &.active {
@@ -250,7 +249,7 @@
 
   li {
     padding: 0 4px;
-    background: $--pagination-fill;
+    background: $--pagination-background-color;
     vertical-align: top;
     display: inline-block;
     font-size: $--pagination-font-size;
@@ -285,11 +284,11 @@
     }
 
     &:hover {
-      color: $--pagination-hover-fill;
+      color: $--pagination-hover-color;
     }
 
     &.active {
-      color: $--pagination-hover-fill;
+      color: $--pagination-hover-color;
       cursor: default;
     }
   }

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

@@ -0,0 +1,16 @@
+@import "mixins/mixins";
+@import "common/var";
+
+@include b(popconfirm) {
+  @include e(main) {
+    display: flex;
+    align-items: center;
+  }
+  @include e(icon) {
+    margin-right: 5px;
+  }
+  @include e(action) {
+    text-align: right; 
+    margin: 0
+  }
+}

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

@@ -4,7 +4,7 @@
 
 @include b(popover) {
   position: absolute;
-  background: $--popover-fill;
+  background: $--popover-background-color;
   min-width: 150px;
   border-radius: 4px;
   border: 1px solid $--popover-border-color;
@@ -15,13 +15,14 @@
   text-align: justify;
   font-size: $--popover-font-size;
   box-shadow: $--box-shadow-light;
+  word-break: break-all;
 
   @include m(plain) {
     padding: $--popover-padding-large;
   }
 
   @include e(title) {
-    color: $--popover-title-color;
+    color: $--popover-title-font-color;
     font-size: $--popover-title-font-size;
     line-height: 1;
     margin-bottom: 12px;

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

@@ -36,7 +36,7 @@
     &::after {
       bottom: 1px;
       margin-left: -$--popover-arrow-size;
-      border-top-color: $--popover-fill;
+      border-top-color: $--popover-background-color;
       border-bottom-width: 0;
     }
   }
@@ -56,7 +56,7 @@
       top: 1px;
       margin-left: -$--popover-arrow-size;
       border-top-width: 0;
-      border-bottom-color: $--popover-fill;
+      border-bottom-color: $--popover-background-color;
     }
   }
 
@@ -74,7 +74,7 @@
     &::after {
       bottom: -$--popover-arrow-size;
       left: 1px;
-      border-right-color: $--popover-fill;
+      border-right-color: $--popover-background-color;
       border-left-width: 0;
     }
   }
@@ -95,7 +95,7 @@
       bottom: -$--popover-arrow-size;
       margin-left: -$--popover-arrow-size;
       border-right-width: 0;
-      border-left-color: $--popover-fill;
+      border-left-color: $--popover-background-color;
     }
   }
 }

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

@@ -20,7 +20,7 @@
     }
   }
 
-  @include m(circle) {
+  @include m((circle,dashboard)) {
     display: inline-block;
 
     .el-progress__text {
@@ -39,6 +39,7 @@
     }
   }
 
+
   @include m(without-text) {
     .el-progress__text {
       display: none;
@@ -68,6 +69,16 @@
     }
   }
 
+  @include when(warning) {
+    .el-progress-bar__inner {
+      background-color: $--color-warning;
+    }
+
+    .el-progress__text {
+      color: $--color-warning;
+    }
+  }
+
   @include when(exception) {
     .el-progress-bar__inner {
       background-color: $--color-danger;
@@ -105,6 +116,7 @@
     border-radius: 100px;
     line-height: 1;
     white-space: nowrap;
+    transition: width 0.6s ease;
 
     @include utils-vertical-center;
   }

package/packages/theme-chalk/src/radio-button.scss

@@ -12,11 +12,11 @@
     line-height: 1;
     white-space: nowrap;
     vertical-align: middle;
-    background: $--button-default-fill;
+    background: $--button-default-background-color;
     border: $--border-base;
     font-weight: $--button-font-weight;
     border-left: 0;
-    color: $--button-default-color;
+    color: $--button-default-font-color;
     -webkit-appearance: none;
     text-align: center;
     box-sizing: border-box;
@@ -57,8 +57,8 @@
 
     &:checked {
       & + .el-radio-button__inner {
-        color: $--radio-button-checked-color;
-        background-color: $--radio-button-checked-fill;
+        color: $--radio-button-checked-font-color;
+        background-color: $--radio-button-checked-background-color;
         border-color: $--radio-button-checked-border-color;
         box-shadow: -1px 0 0 0 $--radio-button-checked-border-color;
       }
@@ -66,11 +66,11 @@
 
     &:disabled {
       & + .el-radio-button__inner {
-        color: $--button-disabled-color;
+        color: $--button-disabled-font-color;
         cursor: not-allowed;
         background-image: none;
-        background-color: $--button-disabled-fill;
-        border-color: $--button-disabled-border;
+        background-color: $--button-disabled-background-color;
+        border-color: $--button-disabled-border-color;
         box-shadow: none;
       }
       &:checked + .el-radio-button__inner {
@@ -107,7 +107,7 @@
     }
   }
 
-  &:focus:not(.is-focus):not(:active){ /*获得焦点时 样式提醒*/
+  &:focus:not(.is-focus):not(:active):not(.is-disabled){ /*获得焦点时 样式提醒*/
     box-shadow: 0 0 2px 2px $--radio-button-checked-border-color;
   }
 }

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

@@ -4,7 +4,7 @@
 @import "common/var";
 
 @include b(radio) {
-  color: $--radio-color;
+  color: $--radio-font-color;
   font-weight: $--radio-font-weight;
   line-height: 1;
   position: relative;
@@ -13,6 +13,7 @@
   white-space: nowrap;
   outline: none;
   font-size: $--font-size-base;
+  margin-right: 30px;
   @include utils-user-select(none);
 
   @include when(bordered) {
@@ -79,8 +80,8 @@
     }
   }
 
-  & + .el-radio {
-    margin-left: 30px;
+  &:last-child {
+    margin-right: 0;
   }
 
   @include e(input) {
@@ -134,7 +135,7 @@
       }
 
       & + .el-radio__label {
-        color: $--radio-checked-text-color;
+        color: $--radio-checked-font-color;
       }
     }
 
@@ -149,7 +150,7 @@
     border-radius: $--radio-input-border-radius;
     width: $--radio-input-width;
     height: $--radio-input-height;
-    background-color: $--radio-input-fill;
+    background-color: $--radio-input-background-color;
     position: relative;
     cursor: pointer;
     display: inline-block;
@@ -185,7 +186,7 @@
     margin: 0;
   }
 
-  &:focus:not(.is-focus):not(:active){ /*获得焦点时 样式提醒*/
+  &:focus:not(.is-focus):not(:active):not(.is-disabled) { /*获得焦点时 样式提醒*/
     .el-radio__inner {
       box-shadow: 0 0 2px 2px $--radio-input-border-color-hover;
     }

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

@@ -0,0 +1,61 @@
+@import 'mixins/mixins';
+@import 'common/var';
+
+@include b(result) {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  text-align: center;
+  box-sizing: border-box;
+  padding: $--result-padding;
+
+  @include e(icon) {
+    svg {
+      width: $--result-icon-font-size;
+      height: $--result-icon-font-size;
+    }
+  }
+
+  @include e(title) {
+    margin-top: $--result-title-margin-top;
+
+    p {
+      margin: 0;
+      font-size: $--result-title-font-size;
+      color: $--color-text-primary;
+      line-height: 1.3;
+    }
+  }
+
+  @include e(subtitle) {
+    margin-top: $--result-subtitle-margin-top;
+
+    p {
+      margin: 0;
+      font-size: $--font-size-base;
+      color: $--color-text-regular;
+      line-height: 1.3;
+    }
+  }
+
+  @include e(extra) {
+    margin-top: $--result-extra-margin-top;
+  }
+
+  .icon-success {
+    fill: $--result-success-color;
+  }
+
+  .icon-error {
+    fill: $--result-danger-color;
+  }
+
+  .icon-info {
+    fill: $--result-info-color;
+  }
+
+  .icon-warning {
+    fill: $--result-warning-color;
+  }
+}

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

@@ -27,6 +27,10 @@
       justify-content: space-around;
     }
 
+    @include when(align-top) {
+      align-items: flex-start;
+    }
+
     @include when(align-middle) {
       align-items: center;
     }

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

@@ -19,6 +19,7 @@
     height: 100%;
 
     @include m(hidden-default) {
+      scrollbar-width: none;
       &::-webkit-scrollbar {
         width: 0;
         height: 0;

package/packages/theme-chalk/src/select-dropdown.scss

@@ -13,8 +13,11 @@
   margin: 5px 0;
 
   @include when(multiple) {
+    & .el-select-dropdown__item {
+      padding-right: 40px;
+    }
     & .el-select-dropdown__item.selected {
-      color: $--select-option-selected;
+      color: $--select-option-selected-font-color;
       background-color: $--select-dropdown-background;
 
       &.hover {
@@ -25,7 +28,7 @@
         position: absolute;
         right: 20px;
         font-family: 'element-icons';
-        content: "\E611";
+        content: "\e6da";
         font-size: 12px;
         font-weight: bold;
         -webkit-font-smoothing: antialiased;

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

@@ -12,6 +12,11 @@
   display: inline-block;
   position: relative;
 
+  .el-select__tags
+    >span {
+      display: contents;
+    }
+
   &:hover {
     .el-input__inner {
       border-color: $--select-border-color-hover;
@@ -23,7 +28,7 @@
     padding-right: 35px;
 
     &:focus {
-      border-color: $--select-input-focus-background;
+      border-color: $--select-input-focus-border-color;
     }
   }
 
@@ -33,7 +38,6 @@
       font-size: $--select-input-font-size;
       transition: transform .3s;
       transform: rotateZ(180deg);
-      line-height: 16px;
       cursor: pointer;
 
       @include when(reverse) {
@@ -65,7 +69,7 @@
     }
 
     &.is-focus .el-input__inner {
-      border-color: $--select-input-focus-background;
+      border-color: $--select-input-focus-border-color;
     }
   }
 
@@ -115,8 +119,9 @@
     flex-wrap: wrap;
   }
 
-  .el-tag__close {
-    margin-top: -2px;
+  @include e(tags-text) {
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 
   .el-tag {
@@ -124,12 +129,15 @@
     border-color: transparent;
     margin: 2px 0 2px 6px;
     background-color: #f0f2f5;
+    display: flex;
+    max-width: 100%;
+    align-items: center;
 
     &__close.el-icon-close {
       background-color: $--color-text-placeholder;
-      right: -7px;
       top: 0;
       color: $--color-white;
+      flex-shrink: 0;
 
       &:hover {
         background-color: $--color-text-secondary;

package/packages/theme-chalk/src/skeleton-item.scss

@@ -0,0 +1,84 @@
+@import 'mixins/mixins';
+@import 'common/var';
+
+@mixin circle-size($size) {
+  width: $size;
+  height: $size;
+  line-height: $size;
+}
+
+@include b(skeleton) {
+  @include e(item) {
+    background: $--skeleton-color;
+    display: inline-block;
+    height: 16px;
+    border-radius: $--border-radius-base;
+    width: 100%;
+  }
+
+  @include e(circle) {
+    border-radius: 50%;
+    @include circle-size($--avatar-medium-size);
+
+    @include m(lg) {
+      @include circle-size($--avatar-large-size);
+    }
+
+    @include m(md) {
+      @include circle-size($--avatar-small-size);
+    }
+  }
+
+  @include e(button) {
+    height: 40px;
+    width: 64px;
+    border-radius: 4px;
+  }
+
+  @include e(p) {
+    width: 100%;
+    @include when(last) {
+      width: 61%;
+    }
+
+    @include when(first) {
+      width: 33%;
+    }
+  }
+
+  @include e(text) {
+    width: 100%;
+    height: $--font-size-small;
+  }
+
+  @include e(caption) {
+    height: $--font-size-extra-small;
+  }
+
+  @include e(h1) {
+    height: $--font-size-extra-large;
+  }
+
+  @include e(h3) {
+    height: $--font-size-large;
+  }
+
+  @include e(h5) {
+    height: $--font-size-medium;
+  }
+
+  @include e(image) {
+    width: unset;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 0;
+
+    svg {
+      fill: $--svg-monochrome-grey;
+      width: 22%;
+      height: 22%;
+    }
+  }
+
+}

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

@@ -0,0 +1,40 @@
+@import 'mixins/mixins';
+@import 'common/var';
+@import "./skeleton-item.scss";
+
+@mixin skeleton-color() {
+  background: linear-gradient(
+    90deg,
+    $--skeleton-color 25%,
+    $--skeleton-to-color 37%,
+    $--skeleton-color 63%
+  );
+  background-size: 400% 100%;
+  animation: #{$namespace}-skeleton-loading 1.4s ease infinite;
+}
+
+@keyframes #{$namespace}-skeleton-loading {
+  0% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0 50%;
+  }
+}
+
+@include b(skeleton) {
+  width: 100%;
+  @each $unit in (first-line, paragraph) {
+    @include e($unit) {
+      height: 16px;
+      margin-top: 16px;
+      background: $--skeleton-color;
+    }
+  }
+
+  @include when(animated) {
+    .#{$namespace}-skeleton__item {
+      @include skeleton-color();
+    }
+  }
+}

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

@@ -5,6 +5,7 @@
 @import "common/var";
 
 @include b(slider) {
+
   @include utils-clearfix;
 
   @include e(runway) {
@@ -151,6 +152,21 @@
     transform: translateX(-50%);
   }
 
+  @include e(marks) {
+    top: 0;
+    left: 12px;
+    width: 18px;
+    height: 100%;
+
+    @include e(marks-text) {
+      position: absolute;
+      transform: translateX(-50%);
+      font-size: 14px;
+      color: $--color-info;
+      margin-top: 15px;
+    }
+  }
+
   @include when(vertical) {
     position: relative;
     .el-slider__runway {
@@ -224,5 +240,11 @@
         }
       }
     }
+
+    @include e(marks-text) {
+      margin-top: 0;
+      left: 15px;
+      transform: translateY(50%);
+    }
   }
 }

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

@@ -0,0 +1,38 @@
+@import "mixins/mixins";
+@import "common/var";
+
+@include b(statistic) {
+  $statistic-justify: center;
+  $statistic-align: center;
+  width: 100%;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  color: $--color-black;
+  font-variant: tabular-nums;
+  list-style: none;
+  font-feature-settings: "tnum";
+  text-align: center;
+  .head {
+    margin-bottom: 4px;
+    color: $--color-text-regular;
+    font-size: $--font-size-small;
+  }
+
+  .con {
+    font-family: Sans-serif;
+    display: flex;
+    justify-content: $statistic-justify;
+    align-items: $statistic-align;
+    color: $--color-text-primary;
+    .number {
+      font-size: $--font-size-extra-large;
+      padding: 0 4px;
+    }
+    span {
+      display: inline-block;
+      margin: 0;
+      line-height: 100%;
+    }
+  }
+}

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

@@ -49,9 +49,6 @@
     height: 0;
     opacity: 0;
     margin: 0;
-    &:focus ~ .el-switch__core {
-      outline: 1px solid $--color-primary;
-    }
   }
 
   @include e(core) {