mazey-element-ui 2.0.1 → 2.15.16

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

@@ -9,10 +9,10 @@
   line-height: 1;
   white-space: nowrap;
   cursor: pointer;
-  background: $--button-default-fill;
+  background: $--button-default-background-color;
   border: $--border-base;
-  border-color: $--button-default-border;
-  color: $--button-default-color;
+  border-color: $--button-default-border-color;
+  color: $--button-default-font-color;
   -webkit-appearance: none;
   text-align: center;
   box-sizing: border-box;
@@ -21,7 +21,7 @@
   transition: .1s;
   font-weight: $--button-font-weight;
   @include utils-user-select(none);
-  & + .el-button {
+  & + & {
     margin-left: 10px;
   }
 
@@ -75,11 +75,11 @@
     &,
     &:hover,
     &:focus {
-      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;
     }
 
     &.el-button--text {
@@ -91,8 +91,8 @@
       &:hover,
       &:focus {
         background-color: $--color-white;
-        border-color: $--button-disabled-border;
-        color: $--button-disabled-color;
+        border-color: $--button-disabled-border-color;
+        color: $--button-disabled-font-color;
       }
     }
   }
@@ -122,19 +122,19 @@
     padding: $--button-padding-vertical;
   }
   @include m(primary) {
-    @include button-variant($--button-primary-color, $--button-primary-fill, $--button-primary-border);
+    @include button-variant($--button-primary-font-color, $--button-primary-background-color, $--button-primary-border-color);
   }
   @include m(success) {
-    @include button-variant($--button-success-color, $--button-success-fill, $--button-success-border);
+    @include button-variant($--button-success-font-color, $--button-success-background-color, $--button-success-border-color);
   }
   @include m(warning) {
-    @include button-variant($--button-warning-color, $--button-warning-fill, $--button-warning-border);
+    @include button-variant($--button-warning-font-color, $--button-warning-background-color, $--button-warning-border-color);
   }
   @include m(danger) {
-    @include button-variant($--button-danger-color, $--button-danger-fill, $--button-danger-border);
+    @include button-variant($--button-danger-font-color, $--button-danger-background-color, $--button-danger-border-color);
   }
   @include m(info) {
-    @include button-variant($--button-info-color, $--button-info-fill, $--button-info-border);
+    @include button-variant($--button-info-font-color, $--button-info-background-color, $--button-info-border-color);
   }
   @include m(medium) {
     @include button-size($--button-medium-padding-vertical, $--button-medium-padding-horizontal, $--button-medium-font-size, $--button-medium-border-radius);
@@ -186,13 +186,15 @@
   display: inline-block;
   vertical-align: middle;
 
-  & .el-button {
+  & > .el-button {
     float: left;
     position: relative;
     & + .el-button {
       margin-left: 0;
     }
-
+    &.is-disabled {
+      z-index: 1;
+    }
     &:first-child {
       border-top-right-radius: 0;
       border-bottom-right-radius: 0;
@@ -206,6 +208,14 @@
       border-bottom-right-radius: $--button-border-radius;
       border-top-left-radius: $--button-border-radius;
       border-bottom-left-radius: $--button-border-radius;
+
+      &.is-round {
+        border-radius: 20px;
+      }
+
+      &.is-circle {
+        border-radius: 50%;
+      }
     }
     &:not(:first-child):not(:last-child) {
       border-radius: 0;
@@ -214,16 +224,26 @@
       margin-right: -1px;
     }
 
-    &:hover,
-    &:focus,
-    &:active {
-      z-index: 1;
+    &:not(.is-disabled) {
+      &:hover,
+      &:focus,
+      &:active {
+        z-index: 1;
+      }
     }
 
     @include when(active) {
       z-index: 1;
     }
   }
+  
+  & > .el-dropdown {
+    & > .el-button {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+      border-left-color: rgba($--color-white, 0.5);
+    }
+  }
 
   @each $type in (primary, success, warning, danger, info) {
     .el-button--#{$type} {

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

@@ -0,0 +1,79 @@
+@import "mixins/mixins";
+@import "common/var";
+@import "button";
+@import "button-group";
+
+@include b(calendar) {
+  background-color:#fff;
+
+  @include e(header) {
+    display: flex;
+    justify-content: space-between;
+    padding: 12px 20px;
+    border-bottom: $--table-border;
+  }
+
+  @include e(title) {
+    color: #000000;
+    align-self: center;
+  }
+
+  @include e(body) {
+    padding: 12px 20px 35px;
+  }
+}
+
+@include b(calendar-table) {
+  table-layout: fixed;
+  width: 100%;
+
+  thead th {
+    padding: 12px 0;
+    color: $--color-text-regular;
+    font-weight: normal;
+  }
+
+  &:not(.is-range) {
+    td.prev,
+    td.next {
+      color: $--color-text-placeholder;
+    }
+  }
+
+  td {
+    border-bottom: $--calendar-border;
+    border-right: $--calendar-border;
+    vertical-align: top;
+    transition: background-color 0.2s ease;
+
+    @include when(selected) {
+      background-color: $--calendar-selected-background-color;
+    }
+
+    @include when(today) {
+      color: $--color-primary;
+    }
+  }
+
+  tr:first-child td {
+    border-top: $--calendar-border;
+  }
+
+  tr td:first-child {
+    border-left: $--calendar-border;
+  }
+
+  tr.el-calendar-table__row--hide-border td {
+    border-top: none;
+  }
+
+  @include b(calendar-day) {
+    box-sizing: border-box;
+    padding: 8px;
+    height: $--calendar-cell-width;
+    &:hover {
+      cursor: pointer;
+      background-color: $--calendar-selected-background-color;
+    }
+  }
+}

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

@@ -2,9 +2,16 @@
 @import "common/var";
 
 @include b(carousel) {
-  overflow-x: hidden;
   position: relative;
 
+  @include m(horizontal) {
+    overflow-x: hidden;
+  }
+
+  @include m(vertical) {
+    overflow-y: hidden;
+  }
+
   @include e(container) {
     position: relative;
     height: 300px;
@@ -49,13 +56,22 @@
   @include e(indicators) {
     position: absolute;
     list-style: none;
-    bottom: 0;
-    left: 50%;
-    transform: translateX(-50%);
     margin: 0;
     padding: 0;
     z-index: #{$--index-normal + 1};
 
+    @include m(horizontal) {
+      bottom: 0;
+      left: 50%;
+      transform: translateX(-50%);
+    }
+
+    @include m(vertical) {
+      right: 0;
+      top: 50%;
+      transform: translateY(-50%);
+    }
+
     @include m(outside) {
       bottom: #{$--carousel-indicator-height + $--carousel-indicator-padding-vertical * 2};
       text-align: center;
@@ -90,15 +106,26 @@
   }
 
   @include e(indicator) {
-    display: inline-block;
     background-color: transparent;
-    padding: $--carousel-indicator-padding-vertical $--carousel-indicator-padding-horizontal;
     cursor: pointer;
 
     &:hover button {
       opacity: 0.72;
     }
 
+    @include m(horizontal) {
+      display: inline-block;
+      padding: $--carousel-indicator-padding-vertical $--carousel-indicator-padding-horizontal;
+    }
+
+    @include m(vertical) {
+      padding: $--carousel-indicator-padding-horizontal $--carousel-indicator-padding-vertical;
+      .el-carousel__button {
+        width: $--carousel-indicator-height;
+        height: #{$--carousel-indicator-width / 2};
+      }
+    }
+
     @include when(active) {
       button {
         opacity: 1;

package/packages/theme-chalk/src/cascader-panel.scss

@@ -0,0 +1,120 @@
+@import "mixins/mixins";
+@import "common/var";
+@import "./checkbox";
+@import "./radio";
+@import "./scrollbar";
+
+@include b(cascader-panel) {
+  display: flex;
+  border-radius: $--cascader-menu-radius;
+  font-size: $--cascader-menu-font-size;
+
+  @include when(bordered) {
+    border: $--cascader-menu-border;
+    border-radius: $--cascader-menu-radius;
+  }
+}
+
+@include b(cascader-menu) {
+  min-width: 180px;
+  box-sizing: border-box;
+  color: $--cascader-menu-font-color;
+  border-right: $--cascader-menu-border;
+
+  &:last-child {
+    border-right: none;
+    .el-cascader-node {
+      padding-right: 20px;
+    }
+  }
+
+  @include e(wrap) {
+    height: 204px;
+  }
+
+  @include e(list) {
+    position: relative;
+    min-height: 100%;
+    margin: 0;
+    padding: 6px 0;
+    list-style: none;
+    box-sizing: border-box;
+  }
+
+  @include e(hover-zone) {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+  }
+
+  @include e(empty-text) {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    text-align: center;
+    color: $--cascader-color-empty;
+  }
+}
+
+@include b(cascader-node) {
+  position: relative;
+  display: flex;
+  align-items: center;
+  padding: 0 30px 0 20px;
+  height: 34px;
+  line-height: 34px;
+  outline: none;
+
+  &.is-selectable.in-active-path {
+    color: $--cascader-menu-font-color;
+  }
+
+  &.in-active-path,
+  &.is-selectable.in-checked-path,
+  &.is-active {
+    color: $--cascader-menu-selected-font-color;
+    font-weight: bold;
+  }
+
+  &:not(.is-disabled) {
+    cursor: pointer;
+    &:hover, &:focus {
+      background: $--cascader-node-background-hover;
+    }
+  }
+
+  @include when(disabled) {
+    color: $--cascader-node-color-disabled;
+    cursor: not-allowed;
+  }
+
+  @include e(prefix) {
+    position: absolute;
+    left: 10px;
+  }
+
+  @include e(postfix) {
+    position: absolute;
+    right: 10px;
+  }
+
+  @include e(label) {
+    flex: 1;
+    padding: 0 10px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  > .el-radio {
+    margin-right: 0;
+
+    .el-radio__label {
+      padding-left: 0;
+    }
+  }
+}

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

@@ -1,7 +1,9 @@
 @import "mixins/mixins";
 @import "common/var";
-@import "./input.scss";
+@import "./input";
 @import "./popper";
+@import "./tag";
+@import "./cascader-panel";
 
 @include b(cascader) {
   display: inline-block;
@@ -9,72 +11,57 @@
   font-size: $--font-size-base;
   line-height: $--input-height;
 
-  .el-input,
-  .el-input__inner {
-    cursor: pointer;
+  &:not(.is-disabled):hover {
+    .el-input__inner {
+      cursor: pointer;
+      border-color: $--input-hover-border;
+    }
   }
 
-  .el-input__icon {
-    transition: none;
-  }
+  .el-input {
+    cursor: pointer;
 
-  .el-icon-arrow-down {
-    transition: transform .3s;
-    font-size: 14px;
+    .el-input__inner {
+      text-overflow: ellipsis;
 
-    @include when(reverse) {
-      transform: rotateZ(180deg);
+      &:focus {
+        border-color: $--input-focus-border;
+      }
     }
-  }
 
-  .el-icon-circle-close {
-    z-index: #{$--index-normal + 1};
-    transition: $--color-transition-base;
+    .el-icon-arrow-down {
+      transition: transform .3s;
+      font-size: 14px;
 
-    &:hover {
-      color: $--color-text-secondary;
+      @include when(reverse) {
+        transform: rotateZ(180deg);
+      }
     }
-  }
 
-  @include e(clearIcon) {
-    z-index: 2;
-    position: relative;
-  }
-
-  @include e(label) {
-    position: absolute;
-    left: 0;
-    top: 0;
-    height: 100%;
-    padding: 0 25px 0 15px;
-    color: $--input-color;
-    width: 100%;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    box-sizing: border-box;
-    cursor: pointer;
-    text-align: left;
-    font-size: inherit;
+    .el-icon-circle-close:hover {
+      color: $--input-clear-hover-color;
+    }
 
-    span {
-      color: $--color-black;
+    @include when(focus) {
+      .el-input__inner {
+        border-color: $--input-focus-border;
+      }
     }
   }
 
   @include m(medium) {
     font-size: $--input-medium-font-size;
-    line-height: #{$--input-medium-height};
+    line-height: $--input-medium-height;
   }
 
   @include m(small) {
     font-size: $--input-small-font-size;
-    line-height: #{$--input-small-height};
+    line-height: $--input-small-height;
   }
 
   @include m(mini) {
     font-size: $--input-mini-font-size;
-    line-height: #{$--input-mini-height};
+    line-height: $--input-mini-height;
   }
 
   @include when(disabled) {
@@ -83,94 +70,113 @@
       color: $--disabled-color-base;
     }
   }
-}
 
-@include b(cascader-menus) {
-  white-space: nowrap;
-  background: #fff;
-  position: absolute;
-  margin: 5px 0;
-  z-index: #{$--index-normal + 1};
-  border: $--select-dropdown-border;
-  border-radius: $--border-radius-small;
-  box-shadow: $--select-dropdown-shadow;
-}
-
-@include b(cascader-menu) {
-  display: inline-block;
-  vertical-align: top;
-  height: 204px;
-  overflow: auto;
-  border-right: $--select-dropdown-border;
-  background-color: $--select-dropdown-background;
-  box-sizing: border-box;
-  margin: 0;
-  padding: 6px 0;
-  min-width: 160px;
-
-  &:last-child {
-    border-right: 0;
+  @include e(dropdown) {
+    margin: 5px 0;
+    font-size: $--cascader-menu-font-size;
+    background: $--cascader-menu-fill;
+    border: $--cascader-menu-border;
+    border-radius: $--cascader-menu-radius;
+    box-shadow: $--cascader-menu-shadow;
   }
 
-  @include e(item) {
-    font-size: $--select-font-size;
-    padding: 8px 20px;
-    position: relative;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    color: $--select-option-color;
-    height: $--select-option-height;
-    line-height: 1.5;
+  @include e(tags) {
+    position: absolute;
+    left: 0;
+    right: 30px;
+    top: 50%;
+    transform: translateY(-50%);
+    display: flex;
+    flex-wrap: wrap;
+    line-height: normal;
+    text-align: left;
     box-sizing: border-box;
-    cursor: pointer;
-    outline: none;
-    @include m(extensible) {
-      &:after {
-        font-family: 'element-icons';
-        content: "\e604";
-        font-size: 14px;
-        color: rgb(191, 203, 217);
-        position: absolute;
-        right: 15px;
+
+    .el-tag {
+      display: inline-flex;
+      align-items: center;
+      max-width: 100%;
+      margin: 2px 0 2px 6px;
+      text-overflow: ellipsis;
+      background: $--cascader-tag-background;
+
+      &:not(.is-hit) {
+        border-color: transparent;
       }
-    }
 
-    @include when(disabled) {
-      color: $--select-option-disabled-color;
-      background-color: $--select-option-disabled-background;
-      cursor: not-allowed;
+      > span {
+        flex: 1;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
 
-      &:hover {
-        background-color: $--color-white;
+      .el-icon-close {
+        flex: none;
+        background-color: $--color-text-placeholder;
+        color: $--color-white;
+
+        &:hover {
+          background-color: $--color-text-secondary;
+        }
       }
     }
+  }
 
-    @include when(active) {
-      color: $--select-option-selected;
+  @include e(suggestion-panel) {
+    border-radius: $--cascader-menu-radius;
+  }
+
+  @include e(suggestion-list) {
+    max-height: 204px;
+    margin: 0;
+    padding: 6px 0;
+    font-size: $--font-size-base;
+    color: $--cascader-menu-font-color;
+    text-align: center;
+  }
+
+  @include e(suggestion-item) {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 34px;
+    padding: 0 15px;
+    text-align: left;
+    outline: none;
+    cursor: pointer;
+
+    &:hover, &:focus {
+      background: $--cascader-node-background-hover;
     }
 
-    &:hover, &:focus:not(:active) {
-      background-color: $--select-option-hover-background;
+    &.is-checked {
+      color: $--cascader-menu-selected-font-color;
+      font-weight: bold;
     }
 
-    &.selected {
-      color: $--color-white;
-      background-color: $--select-option-selected-hover;
+    > span {
+      margin-right: 10px;
     }
   }
 
-  @include e(item__keyword) {
-    font-weight: bold;
+  @include e(empty-text) {
+    margin: 10px 0;
+    color: $--cascader-color-empty;
   }
 
-  @include m(flexible) {
-    height: auto;
-    max-height: 180px;
-    overflow: auto;
+  @include e(search-input) {
+    flex: 1;
+    height: 24px;
+    min-width: 60px;
+    margin: 2px 0 2px 15px;
+    padding: 0;
+    color: $--cascader-menu-font-color;
+    border: none;
+    outline: none;
+    box-sizing: border-box;
 
-    .el-cascader-menu__item {
-      overflow: visible;
+    &::placeholder {
+      color: $--color-text-placeholder;
     }
   }
 }