ele-admin-plus 1.0.2 → 1.1.0

package/es/ele-app/style/overwrite.scss

@@ -0,0 +1,1465 @@
+@use '../../style/themes/default.scss' as *;
+@use '../../style/util.scss' as *;
+@use '../../ele-popover/style/css-var.scss' as *;
+@use './css-var.scss' as *;
+
+@include set-overwrite-var($ele);
+
+/* 气泡通用 */
+@include popper-style('body .el-popper');
+
+/* Select */
+.el-select__popper {
+  .el-select-dropdown {
+    background: inherit;
+    border-radius: inherit;
+  }
+
+  .el-select-dropdown__list {
+    margin: 0 !important;
+    padding: eleVar('select', 'padding') !important;
+  }
+
+  .el-select-dropdown__item {
+    height: eleVar('select', 'item-height');
+    line-height: eleVar('select', 'item-height');
+    padding: eleVar('select', 'item-padding');
+    border-radius: eleVar('select', 'item-radius');
+    transition: color $ele-transition, background-color $ele-transition;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+
+    & > span {
+      flex: 1;
+    }
+
+    & + .el-select-dropdown__item {
+      margin-top: eleVar('select', 'item-margin');
+    }
+
+    &.selected {
+      background: eleVar('select', 'item-active-bg');
+      font-weight: eleVar('select', 'item-active-font-weight');
+    }
+  }
+
+  .el-select-dropdown.is-multiple .el-select-dropdown__item.selected {
+    background: eleVar('select', 'item-active-bg');
+
+    &::after {
+      width: eleVar('select', 'icon-size');
+      height: eleVar('select', 'icon-size');
+      margin: eleVar('select', 'icon-margin');
+      display: inline-block;
+      position: static;
+      top: auto;
+      right: auto;
+      transform: none;
+    }
+  }
+
+  .el-select-group__title {
+    padding: eleVar('select', 'item-padding');
+  }
+
+  .el-select-group__wrap:not(:last-of-type) {
+    padding-bottom: 0;
+
+    &::after {
+      display: none;
+    }
+  }
+}
+
+.el-select .el-select__tags .el-tag,
+.el-select__collapse-tags .el-tag,
+.el-cascader .el-cascader__tags .el-tag {
+  #{elVarName('tag', 'border-radius')}: elVar('border-radius', 'small');
+
+  &.el-tag--light.el-tag--info {
+    #{elVarName('tag', 'text-color')}: elVar('text-color', 'regular');
+    border-color: elVar('border-color');
+
+    .el-tag__close {
+      #{elVarName('tag', 'text-color')}: elVar('text-color', 'secondary');
+    }
+  }
+}
+
+.el-tag .el-tag__close:hover {
+  transition: color $ele-transition, background-color $ele-transition;
+}
+
+.el-popper > .el-select__collapse-tags {
+  margin: -5px -11px;
+  padding: 8px 10px;
+  background: inherit;
+  border-radius: inherit;
+}
+
+/* Autocomplete */
+.el-autocomplete__popper {
+  .el-autocomplete-suggestion {
+    background: inherit;
+    border-radius: inherit;
+  }
+
+  .el-autocomplete-suggestion__wrap {
+    padding: 0;
+  }
+
+  .el-autocomplete-suggestion__list {
+    padding: eleVar('autocomplete', 'padding');
+  }
+
+  .el-autocomplete-suggestion li {
+    height: eleVar('autocomplete', 'item-height');
+    line-height: eleVar('autocomplete', 'item-height');
+    padding: eleVar('autocomplete', 'item-padding');
+    border-radius: eleVar('autocomplete', 'item-radius');
+    transition: color $ele-transition, background-color $ele-transition;
+
+    & + li {
+      margin-top: eleVar('autocomplete', 'item-margin');
+    }
+  }
+}
+
+/* Cascader */
+.el-cascader__dropdown {
+  .el-cascader-panel,
+  .el-cascader__suggestion-panel {
+    background: inherit;
+    border-radius: inherit;
+  }
+
+  .el-cascader-menu__list {
+    padding: eleVar('cascader', 'menu-padding');
+  }
+
+  .el-cascader-node {
+    height: eleVar('cascader', 'item-height');
+    line-height: eleVar('cascader', 'item-height');
+    padding: eleVar('cascader', 'item-padding');
+    border-radius: eleVar('cascader', 'item-radius');
+
+    & > .el-checkbox {
+      margin-right: 8px;
+    }
+
+    & + .el-cascader-node {
+      margin-top: eleVar('cascader', 'item-margin');
+    }
+
+    &.in-active-path,
+    &.is-selectable.in-checked-path,
+    &.is-active {
+      background: eleVar('cascader', 'item-active-bg');
+      font-weight: eleVar('cascader', 'item-active-font-weight');
+    }
+  }
+
+  .el-cascader-menu:last-child .el-cascader-node {
+    padding: eleVar('cascader', 'item-padding');
+  }
+
+  .el-cascader-node__label {
+    padding: 0;
+  }
+
+  .el-cascader-node__prefix {
+    order: 4;
+    margin-right: -4px;
+    position: static;
+    left: auto;
+  }
+
+  .el-cascader-node__postfix {
+    margin-right: -6px;
+    position: static;
+    right: auto;
+  }
+
+  .el-cascader__suggestion-list {
+    padding: eleVar('cascader', 'menu-padding');
+  }
+
+  .el-cascader__suggestion-item {
+    height: eleVar('cascader', 'item-height');
+    line-height: eleVar('cascader', 'item-height');
+    padding: eleVar('cascader', 'item-padding');
+    border-radius: eleVar('cascader', 'item-radius');
+
+    & > span {
+      flex: 1;
+      margin-right: 0;
+    }
+
+    & > .el-icon {
+      margin-right: -4px;
+    }
+
+    & + .el-cascader__suggestion-item {
+      margin-top: eleVar('cascader', 'item-margin');
+    }
+
+    &.is-checked {
+      background: eleVar('cascader', 'item-active-bg');
+      font-weight: eleVar('cascader', 'item-active-font-weight');
+    }
+  }
+}
+
+/* TreeSelect */
+.el-tree-select__popper .el-tree-node__content {
+  height: eleVar('select', 'item-height');
+  padding: eleVar('select', 'item-padding');
+  border-radius: eleVar('select', 'item-radius');
+  transition: color $ele-transition, background-color $ele-transition;
+  box-sizing: border-box;
+
+  & > .el-tree-node__expand-icon {
+    width: eleVar('select', 'item-height');
+    height: eleVar('select', 'item-height');
+    box-sizing: border-box;
+    padding: 0;
+    margin: 0;
+  }
+
+  .el-select-dropdown__item {
+    padding: 0;
+    border-radius: 0;
+  }
+}
+
+/* TableFilter */
+.el-table-filter {
+  .el-table-filter__list {
+    padding: eleVar('table-filter', 'padding');
+    box-sizing: border-box;
+  }
+
+  .el-table-filter__list-item {
+    color: eleVar('table-filter', 'item-color');
+    height: eleVar('table-filter', 'item-height');
+    line-height: eleVar('table-filter', 'item-height');
+    padding: eleVar('table-filter', 'item-padding');
+    border-radius: eleVar('table-filter', 'item-radius');
+    transition: color $ele-transition, background-color $ele-transition;
+    box-sizing: border-box;
+
+    & + .el-table-filter__list-item {
+      margin-top: eleVar('table-filter', 'item-margin');
+    }
+
+    &:hover {
+      color: eleVar('table-filter', 'item-hover-color');
+      background: eleVar('table-filter', 'item-hover-bg');
+    }
+
+    &.is-active {
+      color: eleVar('table-filter', 'item-active-color');
+      background: eleVar('table-filter', 'item-active-bg');
+      font-weight: eleVar('table-filter', 'item-active-font-weight');
+    }
+  }
+}
+
+/* MessageBox */
+.el-overlay-message-box .el-message-box {
+  padding: 0;
+  max-width: eleVar('message-box', 'width');
+  border-radius: eleVar('message-box', 'radius');
+  border: none;
+
+  .el-message-box__header {
+    padding: eleVar('message-box', 'header-padding');
+    border-bottom: eleVar('message-box', 'header-border');
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+  }
+
+  .el-message-box__title {
+    flex: 1;
+    color: eleVar('message-box', 'header-color');
+    font-size: eleVar('message-box', 'header-font-size');
+    font-weight: eleVar('message-box', 'header-font-weight');
+    line-height: eleVar('message-box', 'header-line-height');
+  }
+
+  .el-message-box__headerbtn {
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: eleVar('message-box', 'icon-size');
+    height: eleVar('message-box', 'icon-size');
+    line-height: eleVar('message-box', 'icon-size');
+    color: eleVar('message-box', 'icon-color');
+    font-size: eleVar('message-box', 'icon-font-size');
+    border-radius: eleVar('message-box', 'icon-radius');
+    transition: color $ele-transition, background-color $ele-transition;
+    box-sizing: border-box;
+    position: static;
+    right: auto;
+    top: auto;
+
+    .el-message-box__close {
+      color: inherit;
+    }
+
+    &:hover {
+      color: eleVar('message-box', 'icon-hover-color');
+      background: eleVar('message-box', 'icon-hover-bg');
+    }
+  }
+
+  .el-message-box__content {
+    padding: eleVar('message-box', 'body-padding');
+    box-sizing: border-box;
+  }
+
+  .el-message-box__btns {
+    padding: eleVar('message-box', 'footer-padding');
+    border-top: eleVar('message-box', 'footer-border');
+    box-sizing: border-box;
+  }
+}
+
+/* Radio */
+body .el-radio {
+  .el-radio__label {
+    color: eleVar('radio', 'color');
+    font-size: eleVar('radio', 'font-size');
+    line-height: eleVar('radio', 'size');
+  }
+
+  .el-radio__inner {
+    width: eleVar('radio', 'size');
+    height: eleVar('radio', 'size');
+    background: eleVar('radio', 'bg');
+    border: eleVar('radio', 'border');
+    border-radius: eleVar('radio', 'radius');
+    transition: border-color $ele-transition, background-color $ele-transition;
+
+    &::after {
+      $size: eleVar('radio', 'dot-size');
+      width: $size;
+      height: $size;
+      margin-top: calc(0px - (#{$size} / 2));
+      margin-left: calc(0px - (#{$size} / 2));
+      background: eleVar('radio', 'dot-color');
+      border-radius: eleVar('radio', 'dot-radius');
+      transition: all 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
+      box-sizing: border-box;
+      transform: scale(0);
+      opacity: 0;
+    }
+  }
+
+  &:hover .el-radio__inner {
+    border: eleVar('radio', 'hover-border');
+  }
+
+  &.is-checked {
+    .el-radio__label {
+      color: eleVar('radio', 'active-color');
+    }
+
+    .el-radio__inner {
+      background: eleVar('radio', 'active-bg');
+      border: eleVar('radio', 'active-border');
+
+      &::after {
+        transform: scale(1);
+        opacity: 1;
+      }
+    }
+  }
+
+  &.is-disabled {
+    span.el-radio__label {
+      color: eleVar('radio', 'disabled-color');
+    }
+
+    .el-radio__input .el-radio__inner {
+      background: eleVar('radio', 'disabled-bg');
+      border: eleVar('radio', 'disabled-border');
+
+      &::after {
+        background: eleVar('radio', 'disabled-dot-color');
+      }
+    }
+  }
+
+  &.el-radio--small {
+    .el-radio__label {
+      font-size: eleVar('radio', 'sm-font-size');
+      line-height: eleVar('radio', 'sm-size');
+    }
+
+    .el-radio__inner {
+      width: eleVar('radio', 'sm-size');
+      height: eleVar('radio', 'sm-size');
+      border-radius: eleVar('radio', 'sm-radius');
+
+      &::after {
+        $size: eleVar('radio', 'sm-dot-size');
+        width: $size;
+        height: $size;
+        margin-top: calc(0px - (#{$size} / 2));
+        margin-left: calc(0px - (#{$size} / 2));
+        border-radius: eleVar('radio', 'sm-dot-radius');
+      }
+    }
+  }
+
+  &.el-radio--large {
+    .el-radio__label {
+      font-size: eleVar('radio', 'lg-font-size');
+      line-height: eleVar('radio', 'lg-size');
+    }
+
+    .el-radio__inner {
+      width: eleVar('radio', 'lg-size');
+      height: eleVar('radio', 'lg-size');
+      border-radius: eleVar('radio', 'lg-radius');
+
+      &::after {
+        $size: eleVar('radio', 'lg-dot-size');
+        width: $size;
+        height: $size;
+        margin-top: calc(0px - (#{$size} / 2));
+        margin-left: calc(0px - (#{$size} / 2));
+        border-radius: eleVar('radio', 'lg-dot-radius');
+      }
+    }
+  }
+}
+
+/* Checkbox */
+body .el-checkbox {
+  .el-checkbox__label {
+    color: eleVar('checkbox', 'color');
+    font-size: eleVar('checkbox', 'font-size');
+    line-height: eleVar('checkbox', 'size');
+  }
+
+  .el-checkbox__inner {
+    width: eleVar('checkbox', 'size');
+    height: eleVar('checkbox', 'size');
+    background: eleVar('checkbox', 'bg');
+    border: eleVar('checkbox', 'border');
+    border-radius: eleVar('checkbox', 'radius');
+    transition: border-color $ele-transition, background-color $ele-transition;
+
+    &::after {
+      top: 50%;
+      left: eleVar('checkbox', 'icon-left');
+      width: eleVar('checkbox', 'icon-width');
+      height: eleVar('checkbox', 'icon-height');
+      border: 2px solid #fff;
+      border-top: 0;
+      border-left: 0;
+      box-sizing: border-box;
+      transform: rotate(45deg) scale(0) translate(-50%, -50%);
+      transition: all 0.1s cubic-bezier(0.71, -0.46, 0.88, 0.6);
+      opacity: 0;
+    }
+  }
+
+  .el-checkbox__input .el-checkbox__inner::before {
+    content: '';
+    width: 60%;
+    height: 2px;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    right: auto;
+    bottom: auto;
+    background: #fff;
+    transform: translateX(-50%) scale(0);
+    margin-top: -1px;
+    transition: all 0.1s cubic-bezier(0.71, -0.46, 0.88, 0.6);
+    opacity: 0;
+  }
+
+  &:hover .el-checkbox__inner {
+    border: eleVar('checkbox', 'hover-border');
+  }
+
+  &.is-checked {
+    .el-checkbox__label {
+      color: eleVar('checkbox', 'active-color');
+    }
+
+    .el-checkbox__inner {
+      background: elVar('color-primary');
+      border: 1px solid elVar('color-primary');
+
+      &::after {
+        opacity: 1;
+        transform: rotate(45deg) scale(1) translate(-50%, -50%);
+        transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s;
+      }
+    }
+  }
+
+  .el-checkbox__input.is-indeterminate .el-checkbox__inner {
+    background: elVar('color-primary');
+    border: 1px solid elVar('color-primary');
+
+    &::before {
+      opacity: 1;
+      transform: translateX(-50%) scale(1);
+      transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s;
+    }
+
+    &::after {
+      display: block;
+      transform: rotate(45deg) scale(0) translate(-50%, -50%);
+      opacity: 0;
+    }
+  }
+
+  &.is-disabled {
+    span.el-checkbox__label {
+      color: eleVar('checkbox', 'disabled-color');
+    }
+
+    .el-checkbox__input .el-checkbox__inner {
+      background: eleVar('checkbox', 'disabled-bg');
+      border: eleVar('checkbox', 'disabled-border');
+
+      &::after {
+        border-color: eleVar('checkbox', 'disabled-color');
+      }
+    }
+  }
+
+  &.el-checkbox--small {
+    .el-checkbox__label {
+      font-size: eleVar('checkbox', 'sm-font-size');
+      line-height: eleVar('checkbox', 'sm-size');
+    }
+
+    .el-checkbox__inner {
+      width: eleVar('checkbox', 'sm-size');
+      height: eleVar('checkbox', 'sm-size');
+      border-radius: eleVar('checkbox', 'sm-radius');
+
+      &::after {
+        left: eleVar('checkbox', 'sm-icon-left');
+        width: eleVar('checkbox', 'sm-icon-width');
+        height: eleVar('checkbox', 'sm-icon-height');
+      }
+    }
+
+    .el-checkbox__input.is-indeterminate .el-checkbox__inner::before {
+      top: 50%;
+    }
+  }
+
+  &.el-checkbox--large {
+    .el-checkbox__label {
+      font-size: eleVar('checkbox', 'lg-font-size');
+      line-height: eleVar('checkbox', 'lg-size');
+    }
+
+    .el-checkbox__inner {
+      width: eleVar('checkbox', 'lg-size');
+      height: eleVar('checkbox', 'lg-size');
+      border-radius: eleVar('checkbox', 'lg-radius');
+
+      &::after {
+        left: eleVar('checkbox', 'lg-icon-left');
+        width: eleVar('checkbox', 'lg-icon-width');
+        height: eleVar('checkbox', 'lg-icon-height');
+      }
+    }
+  }
+}
+
+/* ColorPicker */
+body .el-color-picker__panel {
+  padding: 10px;
+}
+
+.el-color-picker__panel {
+  .el-color-dropdown__btns {
+    margin-top: 8px;
+  }
+
+  .el-color-predefine__color-selector.selected {
+    box-shadow: none;
+    position: relative;
+
+    &::after {
+      content: '';
+      width: 5.71428571px;
+      height: 9.14285714px;
+      border: 2px solid #fff;
+      border-left: 0;
+      border-top: 0;
+      transform: rotate(45deg) translate(-50%, -50%);
+      box-sizing: border-box;
+      position: absolute;
+      top: 50%;
+      left: 6px;
+    }
+  }
+}
+
+.el-color-picker .el-color-picker__color {
+  border-color: elVar('border-color', 'light');
+  overflow: hidden;
+}
+
+body .el-color-picker .el-color-picker__icon,
+body .el-color-picker .el-color-picker__empty {
+  font-size: 13px;
+}
+
+/* ImageViewer */
+.el-image-viewer__wrapper {
+  #{elVarName('text-color', 'regular')}: eleVar('image-viewer', 'tool-bg');
+}
+
+/* Descriptions */
+.el-descriptions {
+  .el-descriptions__table.is-bordered {
+    border-spacing: 0;
+    border-collapse: separate;
+    border-radius: eleVar('descriptions', 'radius');
+    border-top: 1px solid eleVar('descriptions', 'border-color');
+    border-left: 1px solid eleVar('descriptions', 'border-color');
+
+    tr {
+      & > .el-descriptions__cell {
+        border-top: none;
+        border-left: none;
+        border-color: eleVar('descriptions', 'border-color');
+      }
+
+      &:first-child > .el-descriptions__cell {
+        &:first-child {
+          border-top-left-radius: eleVar('descriptions', 'radius');
+        }
+
+        &:last-child {
+          border-top-right-radius: eleVar('descriptions', 'radius');
+        }
+      }
+
+      &:last-child > .el-descriptions__cell {
+        &:first-child {
+          border-bottom-left-radius: eleVar('descriptions', 'radius');
+        }
+
+        &:last-child {
+          border-bottom-right-radius: eleVar('descriptions', 'radius');
+        }
+      }
+    }
+  }
+
+  .el-descriptions__label.el-descriptions__cell.is-bordered-label {
+    background: eleVar('descriptions', 'bg');
+  }
+}
+
+/* DatePicker */
+.el-date-picker {
+  // header
+  .el-date-picker__header {
+    display: flex;
+    align-items: center;
+    height: eleVar('datepicker', 'header-height');
+    line-height: eleVar('datepicker', 'header-height');
+    border-bottom: eleVar('datepicker', 'header-border');
+    padding: eleVar('datepicker', 'header-padding');
+    box-sizing: border-box;
+    margin: 0;
+  }
+
+  .el-date-picker__header-label {
+    flex-shrink: 0;
+    color: eleVar('datepicker', 'label-color');
+    font-size: eleVar('datepicker', 'label-size');
+    font-weight: eleVar('datepicker', 'label-weight');
+    line-height: inherit;
+    padding: 0;
+    box-sizing: border-box;
+    transition: color $ele-transition;
+
+    & + .el-date-picker__header-label {
+      margin-left: eleVar('datepicker', 'label-space');
+    }
+
+    &:hover {
+      color: eleVar('datepicker', 'label-hover-color');
+    }
+  }
+
+  .el-date-picker__prev-btn,
+  .el-date-picker__next-btn {
+    flex: 1;
+    float: none;
+    display: flex;
+    align-items: center;
+  }
+
+  .el-date-picker__next-btn {
+    justify-content: flex-end;
+  }
+
+  .el-picker-panel__icon-btn {
+    margin: 0;
+    padding: 0;
+    line-height: inherit;
+    font-size: eleVar('datepicker', 'icon-size');
+    color: eleVar('datepicker', 'icon-color');
+    transition: color $ele-transition;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .el-icon {
+      cursor: inherit;
+    }
+
+    & + .el-picker-panel__icon-btn {
+      margin-left: eleVar('datepicker', 'icon-space');
+    }
+
+    &:hover {
+      color: eleVar('datepicker', 'icon-hover-color');
+    }
+  }
+
+  // body
+  .el-picker-panel__content {
+    margin: 0;
+    padding: eleVar('datepicker', 'body-padding');
+    box-sizing: border-box;
+  }
+
+  .el-picker-panel__body .el-picker-panel__content {
+    width: 100%;
+  }
+}
+
+// 内容宽度
+.el-picker__popper .el-date-picker,
+.el-date-range-picker .el-date-range-picker__content,
+.el-date-picker.has-sidebar .el-picker-panel__body {
+  width: eleVar('datepicker', 'body-width');
+  flex-shrink: 0;
+}
+
+.el-date-picker.has-sidebar,
+.el-picker__popper .el-date-range-picker,
+.el-picker__popper .el-date-picker.has-sidebar.has-time {
+  width: auto;
+}
+
+.el-picker__popper .el-date-range-picker .el-picker-panel__body {
+  min-width: auto;
+}
+
+// sidebar
+.el-date-picker,
+.el-date-range-picker {
+  .el-picker-panel__sidebar {
+    flex-shrink: 0;
+    background: none;
+    width: eleVar('datepicker', 'sidebar-width');
+    padding: eleVar('datepicker', 'sidebar-padding');
+    border-right: eleVar('datepicker', 'sidebar-border');
+    box-sizing: border-box;
+    position: relative;
+    top: auto;
+    bottom: auto;
+
+    & + .el-picker-panel__body {
+      margin: 0;
+    }
+  }
+
+  // 快捷选项
+  .el-picker-panel__shortcut {
+    height: eleVar('datepicker', 'shortcut-height');
+    line-height: eleVar('datepicker', 'shortcut-height');
+    color: eleVar('datepicker', 'shortcut-color');
+    font-size: eleVar('datepicker', 'shortcut-size');
+    padding: eleVar('datepicker', 'shortcut-padding');
+    border-radius: eleVar('datepicker', 'shortcut-radius');
+    transition: color $ele-transition, background-color $ele-transition;
+    box-sizing: border-box;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    word-break: break-all;
+    white-space: nowrap;
+
+    &:hover {
+      color: eleVar('datepicker', 'shortcut-hover-color');
+      background: eleVar('datepicker', 'shortcut-hover-bg');
+    }
+
+    & + .el-picker-panel__shortcut {
+      margin-top: eleVar('datepicker', 'shortcut-margin');
+    }
+  }
+
+  &.has-sidebar .el-picker-panel__body-wrapper {
+    display: flex;
+  }
+}
+
+// footer
+.el-date-picker,
+.el-date-range-picker {
+  .el-picker-panel__footer {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    padding: eleVar('datepicker', 'footer-padding');
+    border-top: eleVar('datepicker', 'footer-border');
+    box-sizing: border-box;
+    background: none;
+  }
+}
+
+// 内容表格
+.el-date-picker,
+.el-date-range-picker {
+  .el-date-table,
+  .el-month-table,
+  .el-year-table {
+    color: eleVar('datepicker', 'color');
+    font-size: eleVar('datepicker', 'font-size');
+    margin: 0;
+  }
+
+  // 日期表格
+  .el-date-table {
+    th {
+      padding: 0;
+      border: none;
+      color: eleVar('datepicker', 'color');
+    }
+
+    td {
+      .el-date-table-cell .el-date-table-cell__text {
+        border-radius: eleVar('datepicker', 'cell-radius');
+        transition: color $ele-transition, background-color $ele-transition,
+          border-color $ele-transition;
+        box-sizing: border-box;
+      }
+
+      &.today .el-date-table-cell__text {
+        color: eleVar('datepicker', 'today-color');
+        font-weight: eleVar('datepicker', 'today-weight');
+        border: eleVar('datepicker', 'today-border');
+      }
+
+      &.prev-month,
+      &.next-month {
+        color: eleVar('datepicker', 'off-color');
+      }
+
+      &.available:hover .el-date-table-cell__text {
+        color: eleVar('datepicker', 'hover-color');
+        background: eleVar('datepicker', 'hover-bg');
+      }
+
+      &.current:not(.disabled) .el-date-table-cell__text {
+        color: eleVar('datepicker', 'active-color');
+        background: eleVar('datepicker', 'active-bg');
+      }
+
+      &.disabled {
+        .el-date-table-cell {
+          background: eleVar('datepicker', 'disabled-bg');
+        }
+
+        .el-date-table-cell__text {
+          color: eleVar('datepicker', 'disabled-color');
+          background: none;
+        }
+      }
+    }
+  }
+
+  // 年/月表格
+  .el-year-table td,
+  .el-month-table td {
+    .cell {
+      color: eleVar('datepicker', 'color');
+      width: eleVar('datepicker', 'year-width');
+      height: eleVar('datepicker', 'year-height');
+      line-height: eleVar('datepicker', 'year-height');
+      border-radius: eleVar('datepicker', 'year-radius');
+      transition: color $ele-transition, background-color $ele-transition,
+        border-color $ele-transition;
+      box-sizing: border-box;
+    }
+
+    &.today .cell {
+      color: eleVar('datepicker', 'today-color');
+      font-weight: eleVar('datepicker', 'today-weight');
+      border: eleVar('datepicker', 'today-border');
+    }
+
+    .cell:hover {
+      color: eleVar('datepicker', 'hover-color');
+      background: eleVar('datepicker', 'hover-bg');
+    }
+
+    &.current:not(.disabled) .cell {
+      color: eleVar('datepicker', 'active-color');
+      background: eleVar('datepicker', 'active-bg');
+    }
+  }
+
+  .el-year-table td {
+    padding: eleVar('datepicker', 'year-padding');
+
+    &.disabled .cell {
+      color: eleVar('datepicker', 'disabled-color');
+      background: eleVar('datepicker', 'disabled-bg');
+      border-radius: 0;
+      width: 100%;
+    }
+  }
+
+  .el-month-table td {
+    padding: eleVar('datepicker', 'month-padding');
+
+    & > div {
+      height: auto;
+      padding: eleVar('datepicker', 'month-space');
+      transition: background-color $ele-transition, border-color $ele-transition;
+    }
+
+    &.disabled {
+      & > div {
+        background: eleVar('datepicker', 'disabled-bg');
+      }
+
+      .cell {
+        color: eleVar('datepicker', 'disabled-color');
+        background: none;
+      }
+    }
+  }
+}
+
+// 范围选择
+.el-date-range-picker {
+  .el-date-range-picker__header {
+    display: flex;
+    align-items: center;
+    height: eleVar('datepicker', 'header-height');
+    line-height: eleVar('datepicker', 'header-height');
+    border-bottom: eleVar('datepicker', 'header-border');
+    padding: eleVar('datepicker', 'header-padding');
+    box-sizing: border-box;
+
+    & > div {
+      flex: 1;
+      margin: 0;
+      color: eleVar('datepicker', 'label-color');
+      font-size: eleVar('datepicker', 'label-size');
+      font-weight: eleVar('datepicker', 'label-weight');
+      box-sizing: border-box;
+    }
+
+    .el-picker-panel__icon-btn {
+      margin: 0;
+      padding: 0;
+      line-height: inherit;
+      font-size: eleVar('datepicker', 'icon-size');
+      color: eleVar('datepicker', 'icon-color');
+      transition: color $ele-transition;
+      box-sizing: border-box;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      float: none;
+
+      &.arrow-left {
+        margin-left: eleVar('datepicker', 'icon-space');
+      }
+
+      &.arrow-right {
+        order: 3;
+        margin-right: eleVar('datepicker', 'icon-space');
+      }
+
+      &.d-arrow-right {
+        order: 4;
+      }
+
+      .el-icon {
+        cursor: inherit;
+      }
+
+      &:hover {
+        color: eleVar('datepicker', 'icon-hover-color');
+      }
+
+      &.is-disabled {
+        color: eleVar('datepicker', 'icon-disabled-color');
+      }
+    }
+  }
+
+  .el-picker-panel__body {
+    display: flex;
+  }
+
+  .el-date-range-picker__content {
+    padding: 0;
+    border: none;
+    float: none;
+
+    table {
+      padding: eleVar('datepicker', 'body-padding');
+      box-sizing: border-box;
+    }
+
+    &.is-left table {
+      box-shadow: 0.8px 0 0 0 eleVar('datepicker', 'inner-border');
+    }
+  }
+
+  .el-date-table td {
+    &.start-date .el-date-table-cell {
+      margin-left: eleVar('datepicker', 'end-margin');
+      border-top-left-radius: eleVar('datepicker', 'cell-radius');
+      border-bottom-left-radius: eleVar('datepicker', 'cell-radius');
+    }
+
+    &.end-date .el-date-table-cell {
+      margin-right: eleVar('datepicker', 'end-margin');
+      border-top-right-radius: eleVar('datepicker', 'cell-radius');
+      border-bottom-right-radius: eleVar('datepicker', 'cell-radius');
+    }
+
+    &.in-range .el-date-table-cell {
+      background: eleVar('datepicker', 'inrange-bg');
+
+      &:hover {
+        background: eleVar('datepicker', 'inrange-hover-bg');
+      }
+    }
+
+    &.in-range.available:hover .el-date-table-cell__text {
+      background: none;
+    }
+
+    &.in-range.available.start-date .el-date-table-cell__text,
+    &.in-range.available.end-date .el-date-table-cell__text {
+      color: eleVar('datepicker', 'active-color');
+      background: eleVar('datepicker', 'active-bg');
+    }
+  }
+
+  // 月范围
+  .el-month-table td {
+    &.start-date > div {
+      border-top-left-radius: eleVar('datepicker', 'year-radius');
+      border-bottom-left-radius: eleVar('datepicker', 'year-radius');
+    }
+
+    &.end-date > div {
+      border-top-right-radius: eleVar('datepicker', 'year-radius');
+      border-bottom-right-radius: eleVar('datepicker', 'year-radius');
+    }
+
+    &.in-range > div {
+      background: eleVar('datepicker', 'inrange-bg');
+
+      &:hover {
+        background: eleVar('datepicker', 'inrange-hover-bg');
+      }
+    }
+
+    &.in-range .cell:hover {
+      background: none;
+    }
+
+    &.in-range.start-date:not(.disabled) .cell,
+    &.in-range.end-date:not(.disabled) .cell {
+      color: eleVar('datepicker', 'active-color');
+      background: eleVar('datepicker', 'active-bg');
+    }
+  }
+
+  .el-month-table {
+    border-collapse: separate;
+    border-spacing: 0;
+  }
+}
+
+// 周选择
+.el-date-table.is-week-mode {
+  td.start-date .el-date-table-cell,
+  tbody .el-date-table__row td:first-child .el-date-table-cell,
+  tbody .el-date-table__row:hover td:first-child .el-date-table-cell {
+    margin-left: eleVar('datepicker', 'end-margin');
+    border-top-left-radius: eleVar('datepicker', 'cell-radius');
+    border-bottom-left-radius: eleVar('datepicker', 'cell-radius');
+  }
+
+  td.end-date .el-date-table-cell,
+  tbody .el-date-table__row td:last-child .el-date-table-cell,
+  tbody .el-date-table__row:hover td:last-child .el-date-table-cell {
+    margin-right: eleVar('datepicker', 'end-margin');
+    border-top-right-radius: eleVar('datepicker', 'cell-radius');
+    border-bottom-right-radius: eleVar('datepicker', 'cell-radius');
+  }
+
+  .el-date-table__row:hover td .el-date-table-cell,
+  .el-date-table__row.current td .el-date-table-cell {
+    background: eleVar('datepicker', 'inrange-bg');
+  }
+
+  td.available:hover .el-date-table-cell__text {
+    color: eleVar('datepicker', 'color');
+    background: none;
+  }
+
+  .el-date-table__row.current td.start-date .el-date-table-cell__text,
+  .el-date-table__row.current td.end-date .el-date-table-cell__text {
+    color: eleVar('datepicker', 'active-color');
+    background: eleVar('datepicker', 'active-bg');
+  }
+}
+
+// 日期多选
+.el-date-picker .el-date-table td.selected .el-date-table-cell {
+  margin-left: eleVar('datepicker', 'end-margin');
+  margin-right: eleVar('datepicker', 'end-margin');
+  border-radius: eleVar('datepicker', 'cell-radius');
+  background: eleVar('datepicker', 'inrange-bg');
+
+  &:hover {
+    background: eleVar('datepicker', 'inrange-hover-bg');
+  }
+
+  .el-date-table-cell__text {
+    color: eleVar('datepicker', 'active-color');
+    background: eleVar('datepicker', 'active-bg');
+  }
+}
+
+// 日期时间选择
+.el-date-picker .el-date-picker__time-header,
+.el-date-range-picker .el-date-range-picker__time-header {
+  padding: 8px 5px;
+  display: flex;
+  align-items: center;
+}
+
+.el-date-picker__time-header .el-date-picker__editor-wrap,
+.el-date-range-picker__time-header .el-date-range-picker__time-picker-wrap {
+  flex: 1;
+  padding: 0 4px;
+  box-sizing: border-box;
+  display: block;
+
+  & > .el-input {
+    display: flex;
+  }
+}
+
+// 日期时间范围选择
+.el-date-range-picker.has-time .el-picker-panel__body {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+}
+
+.el-date-range-picker .el-date-range-picker__time-header {
+  grid-column-end: span 2;
+  width: calc(#{eleVar('datepicker', 'body-width')} * 2);
+}
+
+.el-date-range-picker__time-header > span {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+
+  & > .el-icon {
+    color: eleVar('datepicker', 'range-icon-color');
+    font-size: eleVar('datepicker', 'range-icon-size');
+  }
+}
+
+.el-date-range-picker__time-header .el-date-range-picker__editors-wrap {
+  flex: 1;
+}
+
+// 日期选择内时间气泡
+.el-popper .el-picker-panel .el-time-panel {
+  margin: 7px 0;
+  background: eleVar('popper', 'bg');
+  border: eleVar('popper', 'border');
+  border-radius: eleVar('popper', 'radius');
+  box-shadow: eleVar('popper', 'shadow');
+
+  &::after {
+    content: '';
+    width: eleVar('popper', 'arrow-size');
+    height: eleVar('popper', 'arrow-size');
+    background: eleVar('popper', 'arrow-bg');
+    border: eleVar('popper', 'border');
+    box-shadow: eleVar('popper', 'arrow-shadow');
+    border-bottom-color: transparent;
+    border-right-color: transparent;
+    border-top-left-radius: 2px;
+    transform: rotate(45deg);
+    box-sizing: border-box;
+    z-index: -1;
+    position: absolute;
+    top: eleVar('popper', 'arrow-offset');
+    left: 20px;
+  }
+
+  & > .el-time-panel__content {
+    background: inherit;
+    border-radius: inherit;
+  }
+}
+
+// 日期/时间选择气泡
+.el-popper .el-picker-panel,
+.el-popper .el-time-panel {
+  background: inherit;
+  border-radius: inherit;
+}
+
+/* TimePicker */
+.el-time-panel,
+.el-time-range-picker {
+  .el-time-panel__content {
+    &::before {
+      $h: eleVar('timepicker', 'item-height');
+      $s: eleVar('timepicker', 'line-padding');
+      padding: 0;
+      left: eleVar('timepicker', 'line-margin');
+      right: eleVar('timepicker', 'line-margin');
+      height: calc(#{$h} + #{$s} * 2);
+      margin: calc(0px - #{$h} / 2 - #{$s}) 0 0 0;
+      border-top: eleVar('timepicker', 'line');
+      border-bottom: eleVar('timepicker', 'line');
+      pointer-events: none;
+      z-index: 5;
+    }
+
+    &::after {
+      display: none;
+    }
+  }
+
+  .el-time-spinner {
+    display: flex;
+
+    &.has-seconds .el-time-spinner__wrapper {
+      width: auto;
+    }
+  }
+
+  .el-time-spinner__wrapper {
+    flex: 1;
+    width: auto;
+    max-height: none;
+    height: eleVar('timepicker', 'height');
+  }
+
+  .el-time-spinner__list {
+    box-sizing: border-box;
+    padding: eleVar('timepicker', 'padding');
+    padding-bottom: 0;
+    padding-top: 0;
+
+    &::after,
+    &::before {
+      $h1: eleVar('timepicker', 'height');
+      $h2: eleVar('timepicker', 'item-height');
+      height: calc((#{$h1} - #{$h2}) / 2);
+    }
+  }
+
+  .el-time-spinner__item {
+    height: eleVar('timepicker', 'item-height');
+    line-height: eleVar('timepicker', 'item-height');
+    color: eleVar('timepicker', 'item-color');
+    font-size: eleVar('timepicker', 'item-size');
+    border-radius: eleVar('timepicker', 'item-radius');
+    transition: color $ele-transition, background-color $ele-transition;
+
+    &:not(.is-disabled):not(.is-active):hover {
+      color: eleVar('timepicker', 'item-hover-color');
+      background: eleVar('timepicker', 'item-hover-bg');
+    }
+
+    &.is-active:not(.is-disabled) {
+      color: eleVar('timepicker', 'item-active-color');
+      background: eleVar('timepicker', 'item-active-bg');
+    }
+
+    &.is-disabled {
+      color: eleVar('timepicker', 'item-disabled-color');
+      background: eleVar('timepicker', 'item-disabled-bg');
+    }
+  }
+
+  // footer
+  .el-time-panel__footer {
+    height: auto;
+    line-height: 1;
+    padding: eleVar('timepicker', 'footer-padding');
+  }
+
+  .el-time-panel__btn {
+    margin: 0;
+    padding: eleVar('timepicker', 'button-padding');
+    height: eleVar('timepicker', 'button-height');
+    line-height: eleVar('timepicker', 'button-height');
+    color: elVar('text-color', 'regular');
+    font-size: eleVar('timepicker', 'button-size');
+    border-radius: eleVar('timepicker', 'button-radius');
+    transition: all $ele-transition;
+    box-sizing: border-box;
+
+    &.cancel:hover {
+      color: elVar('text-color', 'primary');
+      background: elVar('fill-color', 'light');
+    }
+
+    &.confirm {
+      font-weight: normal;
+      border: 1px solid elVar('border-color');
+
+      &:hover {
+        color: elVar('color-primary');
+        border-color: elVar('color-primary');
+      }
+    }
+
+    & + .el-time-panel__btn {
+      margin-left: eleVar('timepicker', 'button-space');
+    }
+  }
+
+  // 箭头控制模式
+  .el-time-spinner__wrapper.is-arrow {
+    height: auto;
+    display: flex;
+    flex-direction: column;
+    padding: eleVar('timepicker', 'padding');
+
+    .el-time-spinner__list {
+      transform: none;
+      padding: 0;
+
+      &::after,
+      &::before {
+        display: none;
+      }
+    }
+
+    .el-time-spinner__item {
+      & + .el-time-spinner__item {
+        margin-top: eleVar('timepicker', 'line-padding');
+      }
+
+      &:hover:not(.is-disabled):not(.is-active) {
+        color: eleVar('timepicker', 'item-color');
+        background: none;
+      }
+    }
+  }
+
+  .el-time-spinner__arrow {
+    position: static;
+    top: auto;
+    left: auto;
+    bottom: auto;
+    height: eleVar('timepicker', 'item-height');
+    line-height: eleVar('timepicker', 'item-height');
+    color: eleVar('timepicker', 'arrow-color');
+    font-size: eleVar('timepicker', 'arrow-size');
+    border-radius: eleVar('timepicker', 'item-radius');
+    transition: color $ele-transition, background-color $ele-transition;
+
+    &.arrow-up {
+      margin-bottom: eleVar('timepicker', 'line-padding');
+    }
+
+    &.arrow-down {
+      order: 3;
+      margin-top: eleVar('timepicker', 'line-padding');
+    }
+
+    &:hover {
+      color: eleVar('timepicker', 'item-hover-color');
+      background: eleVar('timepicker', 'item-hover-bg');
+    }
+  }
+}
+
+// 时间选择宽度设置
+.el-popper .el-time-panel,
+.el-time-range-picker .el-time-range-picker__cell {
+  width: eleVar('timepicker', 'width');
+}
+
+// 时间范围
+.el-time-range-picker {
+  .el-time-range-picker__content {
+    padding: 0;
+    display: flex;
+  }
+
+  .el-time-range-picker__cell {
+    flex-shrink: 0;
+    padding: 0;
+
+    & + .el-time-range-picker__cell .el-time-range-picker__body {
+      box-shadow: -0.8px 0 0 0 elVar('datepicker', 'border-color');
+    }
+  }
+
+  .el-time-range-picker__header {
+    margin: 0;
+    height: eleVar('timepicker', 'header-height');
+    line-height: eleVar('timepicker', 'header-height');
+    border-bottom: eleVar('timepicker', 'header-border');
+    font-size: eleVar('timepicker', 'header-size');
+    box-sizing: border-box;
+  }
+
+  .el-time-range-picker__body {
+    border: none;
+    border-radius: 0;
+    box-sizing: border-box;
+    padding: 0 eleVar('timepicker', 'range-space');
+  }
+
+  .el-time-panel__content::before {
+    $s1: eleVar('timepicker', 'line-margin');
+    $s2: eleVar('timepicker', 'range-space');
+    left: calc(#{$s1} + #{$s2});
+    right: calc(#{$s1} + #{$s2});
+  }
+}
+
+.el-popper .el-time-range-picker {
+  width: auto;
+}