mazey-element-ui 2.0.1 → 2.15.16

package/packages/theme-chalk/src/date-picker/date-picker.scss

@@ -67,7 +67,7 @@
     color: $--color-text-regular;
 
     &:hover {
-      color: $--datepicker-text-hover-color;
+      color: $--datepicker-hover-font-color;
     }
 
     &.active {

package/packages/theme-chalk/src/date-picker/date-range-picker.scss

@@ -50,14 +50,11 @@
     @include when(left) {
       border-right: 1px solid $--datepicker-inner-border-color;
     }
+    .el-date-range-picker__header {
 
-    @include when(right) {
-      .el-date-range-picker__header {
-
-        div {
-          margin-left: 50px;
-          margin-right: 50px;
-        }
+      div {
+        margin-left: 50px;
+        margin-right: 50px;
       }
     }
   }

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

@@ -9,10 +9,10 @@
     .el-date-table__row {
       &:hover {
         div {
-          background-color: $--datepicker-inrange-color;
+          background-color: $--datepicker-inrange-background-color;
         }
         td.available:hover {
-          color: $--datepicker-color;
+          color: $--datepicker-font-color;
         }
         td:first-child div {
           margin-left: 5px;
@@ -27,7 +27,7 @@
       }
 
       &.current div {
-        background-color: $--datepicker-inrange-color;
+        background-color: $--datepicker-inrange-background-color;
       }
     }
   }
@@ -61,7 +61,7 @@
 
     &.next-month,
     &.prev-month {
-      color: $--datepicker-off-color;
+      color: $--datepicker-off-font-color;
     }
 
     &.today {
@@ -77,13 +77,13 @@
     }
 
     &.available:hover {
-      color: $--datepicker-text-hover-color;
+      color: $--datepicker-hover-font-color;
     }
 
     &.in-range div {
-      background-color: $--datepicker-inrange-color;
+      background-color: $--datepicker-inrange-background-color;
       &:hover {
-        background-color: $--datepicker-inrange-hover-color;
+        background-color: $--datepicker-inrange-hover-background-color;
       }
     }
 
@@ -123,10 +123,10 @@
     &.selected div {
       margin-left: 5px;
       margin-right: 5px;
-      background-color: $--datepicker-inrange-color;
+      background-color: $--datepicker-inrange-background-color;
       border-radius: 15px;
       &:hover {
-        background-color: $--datepicker-inrange-hover-color;
+        background-color: $--datepicker-inrange-hover-background-color;
       }
     }
 
@@ -138,13 +138,13 @@
 
     &.week {
       font-size: 80%;
-      color: $--datepicker-header-color;
+      color: $--datepicker-header-font-color;
     }
   }
 
   th {
     padding: 5px;
-    color: $--datepicker-header-color;
+    color: $--datepicker-header-font-color;
     font-weight: 400;
     border-bottom: solid 1px $--border-color-lighter;
   }

package/packages/theme-chalk/src/date-picker/month-table.scss

@@ -7,8 +7,23 @@
 
   td {
     text-align: center;
-    padding: 20px 3px;
+    padding: 8px 0px;
     cursor: pointer;
+    & div {
+      height: 48px;
+      padding: 6px 0;
+      box-sizing: border-box;
+    }
+    &.today {
+      .cell {
+        color: $--color-primary;
+        font-weight: bold;
+      }
+      &.start-date .cell,
+      &.end-date .cell {
+        color: $--color-white;
+      }
+    }
 
     &.disabled .cell {
       background-color: $--background-color-base;
@@ -21,17 +36,44 @@
     }
 
     .cell {
-      width: 48px;
-      height: 32px;
+      width: 60px;
+      height: 36px;
       display: block;
-      line-height: 32px;
-      color: $--datepicker-color;
+      line-height: 36px;
+      color: $--datepicker-font-color;
       margin: 0 auto;
+      border-radius: 18px;
+      &:hover {
+        color: $--datepicker-hover-font-color;
+      }
+    }
 
+    &.in-range div {
+      background-color: $--datepicker-inrange-background-color;
       &:hover {
-        color: $--datepicker-text-hover-color;
+        background-color: $--datepicker-inrange-hover-background-color;
       }
     }
+    &.start-date div,
+    &.end-date div {
+      color: $--color-white;
+    }
+
+    &.start-date .cell,
+    &.end-date .cell {
+      color: $--color-white;
+      background-color: $--datepicker-active-color;
+    }
+
+    &.start-date div {
+      border-top-left-radius: 24px;
+      border-bottom-left-radius: 24px;
+    }
+
+    &.end-date div {
+      border-top-right-radius: 24px;
+      border-bottom-right-radius: 24px;
+    }
 
     &.current:not(.disabled) .cell {
       color: $--datepicker-active-color;

package/packages/theme-chalk/src/date-picker/picker-panel.scss

@@ -38,14 +38,14 @@
     background-color: transparent;
     line-height: 28px;
     font-size: 14px;
-    color: $--datepicker-color;
+    color: $--datepicker-font-color;
     padding-left: 12px;
     text-align: left;
     outline: none;
     cursor: pointer;
 
     &:hover {
-      color: $--datepicker-text-hover-color;
+      color: $--datepicker-hover-font-color;
     }
 
     &.active {
@@ -81,7 +81,7 @@
     margin-top: 8px;
 
     &:hover {
-      color: $--datepicker-text-hover-color;
+      color: $--datepicker-hover-font-color;
     }
 
     @include when(disabled) {

package/packages/theme-chalk/src/date-picker/picker.scss

@@ -12,6 +12,13 @@
     width: 220px;
   }
 
+  @include m((monthrange)) {
+    &.el-input,
+    &.el-input__inner {
+      width: 300px;
+    }
+  }
+
   @include m((daterange, timerange)) {
     &.el-input,
     &.el-input__inner {

package/packages/theme-chalk/src/date-picker/time-picker.scss

@@ -11,6 +11,7 @@
   left: 0;
   z-index: $--index-top;
   user-select: none;
+  box-sizing: content-box;
 
   @include e(content) {
     font-size: 0;

package/packages/theme-chalk/src/date-picker/year-table.scss

@@ -14,6 +14,13 @@
     padding: 20px 3px;
     cursor: pointer;
 
+    &.today {
+      .cell {
+        color: $--color-primary;
+        font-weight: bold;
+      }
+    }
+
     &.disabled .cell {
       background-color: $--background-color-base;
       cursor: not-allowed;
@@ -29,11 +36,11 @@
       height: 32px;
       display: block;
       line-height: 32px;
-      color: $--datepicker-color;
+      color: $--datepicker-font-color;
       margin: 0 auto;
 
       &:hover {
-        color: $--datepicker-text-hover-color;
+        color: $--datepicker-hover-font-color;
       }
     }
 

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

@@ -0,0 +1,42 @@
+@import 'mixins/mixins';
+@import 'common/var';
+
+@include b(descriptions-item) {
+  vertical-align: top;
+  
+  @include e(container) {
+    display: flex;
+
+    .el-descriptions-item__label,
+    .el-descriptions-item__content {
+      display: inline-flex;
+      align-items: baseline;
+    }
+    .el-descriptions-item__content {
+      flex: 1;
+    }
+  }
+
+  @include e(label) {
+    &.has-colon {
+      &::after {
+        content: ':';
+        position: relative;
+        top: -0.5px;
+      }
+    }
+    &.is-bordered-label {
+      font-weight: bold;
+      color: $--color-text-secondary;
+      background: $--descriptions-item-bordered-label-background;
+    }
+    &:not(.is-bordered-label) {
+      margin-right: 10px;
+    }
+  }
+
+  @include e(content) {
+    word-break: break-word;
+    overflow-wrap: break-word;
+  }
+}

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

@@ -0,0 +1,111 @@
+@import 'mixins/mixins';
+@import 'common/var';
+@import 'descriptions-item';
+
+@include b(descriptions) {
+  box-sizing: border-box;
+  font-size: $--font-size-base;
+  color: $--color-text-primary;
+
+  @include e(header) {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: $--descriptions-header-margin-bottom;
+
+    @include e(title) {
+      font-size: $--descriptions-title-font-size;
+      font-weight: bold;
+    }
+  }
+
+  @include e(body) {
+    color: $--color-text-regular;
+    background-color: $--color-white;
+
+    .el-descriptions__table {
+      border-collapse: collapse;
+      width: 100%;
+      table-layout: fixed;
+
+      .el-descriptions-item__cell {
+        box-sizing: border-box;
+        text-align: left;
+        font-weight: normal;
+        line-height: 1.5;
+
+        @include when(left) {
+          text-align: left;
+        }
+
+        @include when(center) {
+          text-align: center;
+        }
+
+        @include when(right) {
+          text-align: right;
+        }
+      }
+    }
+  }
+
+  .is-bordered {
+    table-layout: auto;
+    .el-descriptions-item__cell {
+      border: $--descriptions-table-border;
+      padding: 12px 10px;
+    }
+  }
+
+  :not(.is-bordered) {
+    .el-descriptions-item__cell {
+      padding-bottom: 12px;
+    }
+  }
+
+  @include m(medium) {
+    &.is-bordered {
+      .el-descriptions-item__cell {
+        padding: 10px;
+      }
+    }
+
+    &:not(.is-bordered) {
+      .el-descriptions-item__cell {
+        padding-bottom: 10px;
+      }
+    }
+  }
+
+  @include m(small) {
+    font-size: 12px;
+
+    &.is-bordered {
+      .el-descriptions-item__cell {
+        padding: 8px 10px;
+      }
+    }
+
+    &:not(.is-bordered) {
+      .el-descriptions-item__cell {
+        padding-bottom: 8px;
+      }
+    }
+  }
+
+  @include m(mini) {
+    font-size: 12px;
+
+    &.is-bordered {
+      .el-descriptions-item__cell {
+        padding: 6px 10px;
+      }
+    }
+
+    &:not(.is-bordered) {
+      .el-descriptions-item__cell {
+        padding-bottom: 6px;
+      }
+    }
+  }
+}

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

@@ -6,7 +6,7 @@
 @include b(dialog) {
   position: relative;
   margin: 0 auto 50px;
-  background: $--color-white;
+  background: $--dialog-background-color;
   border-radius: $--border-radius-small;
   box-shadow: $--dialog-box-shadow;
   box-sizing: border-box;
@@ -58,15 +58,16 @@
   }
 
   @include e(title) {
-    line-height: $--dialog-line-height;
+    line-height: $--dialog-font-line-height;
     font-size: $--dialog-title-font-size;
     color: $--color-text-primary;
   }
 
   @include e(body) {
-    padding: 30px 20px;
+    padding: ($--dialog-padding-primary + 10px) $--dialog-padding-primary;
     color: $--color-text-regular;
-    font-size: $--dialog-font-size;
+    font-size: $--dialog-content-font-size;
+    word-break: break-all;
   }
 
   @include e(footer) {

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

@@ -0,0 +1,47 @@
+@import "common/var";
+@import "mixins/mixins";
+
+@include b(divider) {
+  background-color: $--border-color-base;
+  position: relative;
+
+  @include m(horizontal) {
+    display: block;
+    height: 1px;
+    width: 100%;
+    margin: 24px 0;
+  }
+
+  @include m(vertical) {
+    display: inline-block;
+    width: 1px;
+    height: 1em;
+    margin: 0 8px;
+    vertical-align: middle;
+    position: relative;
+  }
+
+  @include e(text) {
+    position: absolute;
+    background-color: $--color-white;
+    padding: 0 20px;
+    font-weight: 500;
+    color: $--color-text-primary;
+    font-size: 14px;
+
+    @include when(left) {
+      left: 20px;
+      transform: translateY(-50%);
+    }
+
+    @include when(center)  {
+      left: 50%;
+      transform: translateX(-50%) translateY(-50%);
+    }
+
+    @include when(right)  {
+      right: 20px;
+      transform: translateY(-50%);
+    }
+  }
+}

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

@@ -0,0 +1,219 @@
+@import "mixins/mixins";
+@import "common/var";
+
+@keyframes el-drawer-fade-in {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@mixin drawer-animation($direction) {
+
+  @keyframes #{$direction}-drawer-in {
+    0% {
+
+      @if $direction == ltr {
+        transform: translate(-100%, 0px);
+      }
+
+      @if $direction == rtl {
+        transform: translate(100%, 0px);
+      }
+
+      @if $direction == ttb {
+        transform: translate(0px, -100%);
+      }
+
+      @if $direction == btt {
+        transform: translate(0px, 100%);
+      }
+    }
+
+    100% {
+      @if $direction == ltr {
+        transform: translate(0px, 0px);
+      }
+
+      @if $direction == rtl {
+        transform: translate(0px, 0px);
+      }
+
+      @if $direction == ttb {
+        transform: translate(0px, 0px);
+      }
+
+      @if $direction == btt {
+        transform: translate(0px, 0px);
+      }
+    }
+  }
+
+  @keyframes #{$direction}-drawer-out {
+    0% {
+      @if $direction == ltr {
+        transform: translate(0px, 0px);
+      }
+
+      @if $direction == rtl {
+        transform: translate(0px, 0px);;
+      }
+
+      @if $direction == ttb {
+        transform: translate(0px, 0px);
+      }
+
+      @if $direction == btt {
+        transform: translate(0px, 0);
+      }
+    }
+
+    100% {
+      @if $direction == ltr {
+        transform: translate(-100%, 0px);
+      }
+
+      @if $direction == rtl {
+        transform: translate(100%, 0px);
+      }
+
+      @if $direction == ttb {
+        transform: translate(0px, -100%);
+      }
+
+      @if $direction == btt {
+        transform: translate(0px, 100%);
+      }
+    }
+  }
+}
+
+@mixin animation-in($direction) {
+  .el-drawer__open &.#{$direction} {
+    animation: #{$direction}-drawer-in .3s 1ms;
+  }
+}
+
+@mixin animation-out($direction) {
+  &.#{$direction} {
+    animation: #{$direction}-drawer-out .3s;
+  }
+}
+
+@include drawer-animation(rtl);
+@include drawer-animation(ltr);
+@include drawer-animation(ttb);
+@include drawer-animation(btt);
+
+$directions: rtl, ltr, ttb, btt;
+
+@include b(drawer) {
+  position: absolute;
+  box-sizing: border-box;
+  background-color: $--dialog-background-color;
+  display: flex;
+  flex-direction: column;
+  box-shadow: 0 8px 10px -5px rgba(0, 0, 0, 0.2),
+  0 16px 24px 2px rgba(0, 0, 0, 0.14),
+  0 6px 30px 5px rgba(0, 0, 0, 0.12);
+  overflow: hidden;
+  outline: 0;
+
+  @each $direction in $directions {
+    @include animation-out($direction);
+    @include animation-in($direction);
+  }
+
+  &__wrapper {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    overflow: hidden;
+    margin: 0;
+  }
+
+  &__header {
+    align-items: center;
+    color: rgb(114, 118, 123);
+    display: flex;
+    margin-bottom: 32px;
+    padding: $--dialog-padding-primary;
+    padding-bottom: 0;
+    & > :first-child {
+      flex: 1;
+    }
+  }
+
+  &__title {
+    margin: 0;
+    flex: 1;
+    line-height: inherit;
+    font-size: 1rem;
+  }
+
+  &__close-btn {
+    border: none;
+    cursor: pointer;
+    font-size: $--font-size-extra-large;
+    color: inherit;
+    background-color: transparent;
+  }
+
+  &__body {
+    flex: 1;
+    overflow: auto;
+    & > * {
+      box-sizing: border-box;
+    }
+  }
+
+  &.ltr, &.rtl {
+    height: 100%;
+    top: 0;
+    bottom: 0;
+  }
+
+  &.ttb, &.btt {
+    width: 100%;
+    left: 0;
+    right: 0;
+  }
+
+  &.ltr {
+    left: 0;
+  }
+
+  &.rtl {
+    right: 0;
+  }
+
+  &.ttb {
+    top: 0;
+  }
+
+  &.btt {
+    bottom: 0;
+  }
+}
+
+.el-drawer__container {
+  position: relative;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  height: 100%;
+  width: 100%;
+}
+
+.el-drawer-fade-enter-active {
+  animation: el-drawer-fade-in .3s;
+}
+
+.el-drawer-fade-leave-active {
+  animation: el-drawer-fade-in .3s reverse;
+}