rw-admin-ui 1.0.0

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

@@ -0,0 +1,212 @@
+@import "../../common/var";
+@import "../../mixins/mixins";
+
+// 日期表格基础样式
+@include b(date-table) {
+  font-size: $--font-size-medium;
+  user-select: none;
+
+  // 周视图模式
+  @include when(week-mode) {
+    .el-date-table__row {
+      &:hover {
+        .el-date-table__cell-inner {
+          background-color: $--datepicker-inrange-background-color;
+        }
+
+        .el-date-table__cell.is-available:hover {
+          color: $--datepicker-font-color;
+        }
+
+        .el-date-table__cell:first-child .el-date-table__cell-inner {
+          margin-left: 5px;
+          border-top-left-radius: 15px;
+          border-bottom-left-radius: 15px;
+        }
+
+        .el-date-table__cell:last-child .el-date-table__cell-inner {
+          margin-right: 5px;
+          border-top-right-radius: 15px;
+          border-bottom-right-radius: 15px;
+        }
+      }
+
+      &.is-current .el-date-table__cell-inner {
+        background-color: $--datepicker-inrange-background-color;
+      }
+    }
+  }
+
+  // 单元格公共样式
+  @include e(cell) {
+    width: 32px;
+    height: 30px;
+    padding: 4px 0;
+    box-sizing: border-box;
+    text-align: center;
+    cursor: pointer;
+    position: relative;
+
+    @include e(cell-inner) {
+      height: 30px;
+      padding: 3px 0;
+      box-sizing: border-box;
+    }
+
+    @include e(cell-text) {
+      width: 24px;
+      height: 24px;
+      display: block;
+      margin: 0 auto;
+      line-height: 24px;
+      position: absolute;
+      left: 50%;
+      transform: translateX(-50%);
+      border-radius: 50%;
+    }
+
+    // 上个月/下个月的日期
+    @include when(next-month) {
+      color: $--datepicker-off-font-color;
+    }
+
+    @include when(prev-month) {
+      color: $--datepicker-off-font-color;
+    }
+
+    // 今日高亮
+    @include when(today) {
+      position: relative;
+
+      .el-date-table__cell-text {
+        color: $--color-primary;
+        font-weight: bold;
+      }
+
+      &.is-start-date .el-date-table__cell-text,
+      &.is-end-date .el-date-table__cell-text {
+        color: $--color-white;
+      }
+    }
+
+    // 可用日期悬停
+    @include when(available) {
+      &:hover {
+        color: $--datepicker-hover-font-color;
+      }
+    }
+
+    // 范围内日期背景
+    @include when(in-range) {
+      .el-date-table__cell-inner {
+        background-color: $--datepicker-inrange-background-color;
+
+        &:hover {
+          background-color: $--datepicker-inrange-hover-background-color;
+        }
+      }
+    }
+
+    // 当前选中的日期
+    @include when(current) {
+      &:not(.is-disabled) .el-date-table__cell-text {
+        color: $--color-white;
+        background-color: $--datepicker-active-color;
+      }
+    }
+
+    // 范围起始/结束日期文字颜色
+    @include when(start-date) {
+      .el-date-table__cell-inner {
+        color: $--color-white;
+      }
+
+      .el-date-table__cell-text {
+        background-color: $--datepicker-active-color;
+      }
+
+      .el-date-table__cell-inner {
+        margin-left: 5px;
+        border-top-left-radius: 15px;
+        border-bottom-left-radius: 15px;
+      }
+    }
+
+    @include when(end-date) {
+      .el-date-table__cell-inner {
+        color: $--color-white;
+      }
+
+      .el-date-table__cell-text {
+        background-color: $--datepicker-active-color;
+      }
+
+      .el-date-table__cell-inner {
+        margin-right: 5px;
+        border-top-right-radius: 15px;
+        border-bottom-right-radius: 15px;
+      }
+    }
+
+    // 禁用状态
+    @include when(disabled) {
+      .el-date-table__cell-inner {
+        background-color: $--background-color-base;
+        opacity: 1;
+        cursor: not-allowed;
+        color: $--color-text-placeholder;
+      }
+    }
+
+    // 选中状态
+    @include when(selected) {
+      .el-date-table__cell-inner {
+        margin-left: 5px;
+        margin-right: 5px;
+        background-color: $--datepicker-inrange-background-color;
+        border-radius: 15px;
+
+        &:hover {
+          background-color: $--datepicker-inrange-hover-background-color;
+        }
+      }
+
+      .el-date-table__cell-text {
+        background-color: $--datepicker-active-color;
+        color: $--color-white;
+        border-radius: 15px;
+      }
+    }
+
+    // 周次列样式
+    @include when(week) {
+      font-size: 80%;
+      color: $--datepicker-header-font-color;
+    }
+  }
+
+  // 正在选择范围时的样式
+  @include when(selecting) {
+
+    // 范围内虚线上下边框
+    .el-date-table__cell.is-in-range:not(.is-start-date):not(.is-end-date) .el-date-table__cell-inner {
+      border-top: 1px dashed $--datepicker-active-color;
+      border-bottom: 1px dashed $--datepicker-active-color;
+    }
+
+    // 预览结束节点虚线边框与圆角
+    .el-date-table__cell.is-preview-end .el-date-table__cell-inner {
+      border-top-right-radius: 15px;
+      border-bottom-right-radius: 15px;
+      margin-right: 5px;
+    }
+  }
+
+  // 表头样式
+  th {
+    padding: 5px;
+    color: $--datepicker-header-font-color;
+    font-weight: 400;
+    border-bottom: solid 1px $--border-color-lighter;
+  }
+}

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

@@ -0,0 +1,133 @@
+@import "../../common/var";
+@import "../../mixins/mixins";
+
+@include b(month-table) {
+  font-size: $--font-size-medium;
+  margin: -1px;
+  border-collapse: collapse;
+  user-select: none;
+  width: 220px;
+
+  @include e(cell) {
+    width: 32px;
+    height: 30px;
+    padding: 8px 0px;
+    box-sizing: border-box;
+    text-align: center;
+    cursor: pointer;
+    position: relative;
+
+    @include e(cell-inner) {
+      height: 30px;
+      // padding: 3px 0;
+      // border: 1px solid transparent;
+      box-sizing: border-box;
+      // box-sizing: content-box;
+    }
+
+    @include e(cell-text) {
+      // height: 24px;
+      display: block;
+      line-height: 30px;
+      color: $--datepicker-font-color;
+      margin: 0 auto;
+      border-radius: 14px;
+
+      &:hover {
+        color: $--datepicker-hover-font-color;
+      }
+    }
+
+    @include when(today) {
+      .el-month-table__cell-text {
+        color: $--color-primary;
+        font-weight: bold;
+      }
+
+      &.is-start-date .el-month-table__cell-text,
+      &.is-end-date .el-month-table__cell-text {
+        color: $--color-white;
+      }
+    }
+
+    @include when(disabled) {
+      .el-month-table__cell-text {
+        background-color: $--background-color-base;
+        cursor: not-allowed;
+        color: $--color-text-placeholder;
+
+        &:hover {
+          color: $--color-text-placeholder;
+        }
+      }
+    }
+
+    // 当前选中年份
+    @include when(current) {
+      &:not(.is-disabled) .el-month-table__cell-text {
+        color: $--color-white;
+        background-color: $--datepicker-active-color;
+      }
+    }
+
+    // 范围内年份背景
+    @include when(in-range) {
+      .el-month-table__cell-inner {
+        background-color: $--datepicker-inrange-background-color;
+
+        &:hover {
+          background-color: $--datepicker-inrange-hover-background-color;
+        }
+      }
+    }
+
+    // 范围起始圆角
+    @include when(start-date) {
+      .el-month-table__cell-inner {
+        color: $--color-white;
+        margin-left: 5px;
+        border-top-left-radius: 24px;
+        border-bottom-left-radius: 24px;
+      }
+
+      .el-month-table__cell-text {
+        color: $--color-white;
+        background-color: $--datepicker-active-color;
+        border-top-right-radius: 0px;
+        border-bottom-right-radius: 0px;
+      }
+    }
+
+    // 范围结束圆角
+    @include when(end-date) {
+      .el-month-table__cell-inner {
+        color: $--color-white;
+        margin-right: 5px;
+        border-top-right-radius: 24px;
+        border-bottom-right-radius: 24px;
+      }
+
+      .el-month-table__cell-text {
+        color: $--color-white;
+        background-color: $--datepicker-active-color;
+        border-top-left-radius: 0px;
+        border-bottom-left-radius: 0px;
+      }
+    }
+  }
+
+  @include when(selecting) {
+    .el-month-table__cell.is-in-range:not(.is-start-date):not(.is-end-date) .el-month-table__cell-inner {
+      border-top: 1px dashed $--datepicker-active-color;
+      border-bottom: 1px dashed $--datepicker-active-color;
+      box-sizing: border-box;
+    }
+
+    .el-month-table__cell.is-preview-end .el-month-table__cell-inner {
+      border-top-right-radius: 24px;
+      border-bottom-right-radius: 24px;
+      margin-right: 5px;
+      box-sizing: border-box;
+    }
+  }
+}

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

@@ -0,0 +1,106 @@
+@import "../../common/var";
+@import "../../mixins/mixins";
+
+@include b(quarter-table) {
+  font-size: $--font-size-medium;
+  margin: -1px;
+  border-collapse: collapse;
+  user-select: none;
+
+  @include e(cell) {
+    text-align: center;
+    padding: 8px 0px;
+    cursor: pointer;
+
+    @include e(cell-inner) {
+      height: 48px;
+      padding: 6px 0;
+      box-sizing: border-box;
+    }
+
+    @include e(cell-text) {
+      width: 60px;
+      height: 36px;
+      display: block;
+      line-height: 36px;
+      color: $--datepicker-font-color;
+      margin: 0 auto;
+      border-radius: 18px;
+
+      &:hover {
+        color: $--datepicker-hover-font-color;
+      }
+    }
+
+    @include when(today) {
+      .el-quarter-table__cell-text {
+        color: $--color-primary;
+        font-weight: bold;
+      }
+
+      &.is-start-date .el-quarter-table__cell-text,
+      &.is-end-date .el-quarter-table__cell-text {
+        color: $--color-white;
+      }
+    }
+
+    @include when(disabled) {
+      .el-quarter-table__cell-text {
+        background-color: $--background-color-base;
+        cursor: not-allowed;
+        color: $--color-text-placeholder;
+
+        &:hover {
+          color: $--color-text-placeholder;
+        }
+      }
+    }
+
+    // 范围内年份背景
+    @include when(in-range) {
+      .el-quarter-table__cell-inner {
+        background-color: $--datepicker-inrange-background-color;
+
+        &:hover {
+          background-color: $--datepicker-inrange-hover-background-color;
+        }
+      }
+    }
+
+    // 当前选中年份
+    @include when(current) {
+      &:not(.is-disabled) .el-quarter-table__cell-text {
+        color: $--color-white;
+        background-color: $--datepicker-active-color;
+      }
+    }
+
+    // 范围起始圆角
+    @include when(start-date) {
+      .el-quarter-table__cell-inner {
+        color: $--color-white;
+        border-top-left-radius: 24px;
+        border-bottom-left-radius: 24px;
+      }
+
+      .el-quarter-table__cell-text {
+        color: $--color-white;
+        background-color: $--datepicker-active-color;
+      }
+    }
+
+    // 范围结束圆角
+    @include when(end-date) {
+      .el-quarter-table__cell-inner {
+        color: $--color-white;
+        border-top-right-radius: 24px;
+        border-bottom-right-radius: 24px;
+      }
+
+      .el-quarter-table__cell-text {
+        color: $--color-white;
+        background-color: $--datepicker-active-color;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,86 @@
+@import "../../common/var";
+
+@include b(time-panel) {
+  margin: 5px 0;
+  border: solid 1px $--datepicker-border-color;
+  background-color: $--color-white;
+  box-shadow: $--box-shadow-light;
+  border-radius: 2px;
+  position: absolute;
+  width: 180px;
+  left: 0;
+  z-index: $--index-top;
+  user-select: none;
+  box-sizing: content-box;
+
+  @include e(content) {
+    font-size: $--font-size-medium;
+    position: relative;
+    overflow: hidden;
+
+    &::after,
+    &::before {
+      content: "";
+      top: 50%;
+      position: absolute;
+      margin-top: -15px;
+      height: 32px;
+      z-index: -1;
+      left: 0;
+      right: 0;
+      box-sizing: border-box;
+      padding-top: 6px;
+      text-align: left;
+      border-top: 1px solid $--border-color-light;
+      border-bottom: 1px solid $--border-color-light;
+    }
+
+    &::after {
+      left: 50%;
+      margin-left: 12%;
+      margin-right: 12%;
+    }
+
+    &::before {
+      padding-left: 50%;
+      margin-right: 12%;
+      margin-left: 12%;
+    }
+
+    &.has-seconds {
+      &::after {
+        left: calc(100% / 3 * 2);
+      }
+
+      &::before {
+        padding-left: calc(100% / 3);
+      }
+    }
+  }
+
+  @include e(footer) {
+    border-top: 1px solid $--datepicker-inner-border-color;
+    padding: 4px;
+    height: 36px;
+    line-height: 25px;
+    text-align: right;
+    box-sizing: border-box;
+  }
+
+  @include e(btn) {
+    border: none;
+    line-height: 28px;
+    padding: 0 5px;
+    margin: 0 5px;
+    cursor: pointer;
+    background-color: transparent;
+    outline: none;
+    font-size: $--font-size-medium;
+    color: $--color-text-primary;
+
+    &.confirm {
+      font-weight: 800;
+      color: $--datepicker-active-color;
+    }
+  }
+}

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

@@ -0,0 +1,32 @@
+@import "../../common/var";
+
+@include b(time-range-picker) {
+  width: 354px;
+  overflow: visible;
+
+  @include e(content) {
+    position: relative;
+    text-align: center;
+    padding: 10px;
+    display: flex;
+  }
+
+  @include e(cell) {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 4px 7px 7px;
+    width: 50%;
+    display: inline-block;
+  }
+
+  @include e(header) {
+    margin-bottom: 5px;
+    text-align: center;
+    font-size: 14px;
+  }
+
+  @include e(body) {
+    border-radius: 2px;
+    border: 1px solid $--datepicker-border-color;
+  }
+}

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

@@ -0,0 +1,110 @@
+@import "../../common/var";
+
+@include b(time-spinner) {
+  &.has-seconds {
+    .el-time-spinner__wrapper {
+      width: 33.3%;
+    }
+  }
+
+  @include e(wrapper) {
+    max-height: 190px;
+    overflow: auto;
+    display: inline-block;
+    width: 50%;
+    vertical-align: top;
+    position: relative;
+
+    & .el-scrollbar__wrap:not(.el-scrollbar__wrap--hidden-default) {
+      padding-bottom: 15px;
+    }
+
+    @include when(arrow) {
+      box-sizing: border-box;
+      text-align: center;
+      overflow: hidden;
+
+      .el-time-spinner__list {
+        transform: translateY(-32px);
+      }
+
+      .el-time-spinner__item:hover:not(.disabled):not(.active) {
+        background: $--color-white;
+        cursor: default;
+      }
+    }
+  }
+
+  @include e(arrow) {
+    font-size: $--font-size-medium;
+    color: $--color-text-secondary;
+    position: absolute;
+    left: 0;
+    width: 100%;
+    z-index: $--index-normal;
+    text-align: center;
+    height: 30px;
+    line-height: 30px;
+    cursor: pointer;
+
+    &:hover {
+      color: $--color-primary;
+    }
+
+    &.el-icon-arrow-up {
+      top: 10px;
+    }
+
+    &.el-icon-arrow-down {
+      bottom: 10px;
+    }
+  }
+
+  @include e(input) {
+    &.el-input {
+      width: 70%;
+
+      .el-input__inner {
+        padding: 0;
+        text-align: center;
+      }
+    }
+  }
+
+  @include e(list) {
+    padding: 0;
+    margin: 0;
+    list-style: none;
+    text-align: center;
+
+    &::after,
+    &::before {
+      content: '';
+      display: block;
+      width: 100%;
+      height: 80px;
+    }
+  }
+
+  @include e(item) {
+    height: 32px;
+    line-height: 32px;
+    font-size: $--font-size-medium;
+    color: $--color-text-regular;
+
+    &:hover:not(.disabled):not(.active) {
+      background: $--background-color-base;
+      cursor: pointer;
+    }
+
+    &.active:not(.disabled) {
+      color: $--color-text-primary;
+      font-weight: bold;
+    }
+
+    &.disabled {
+      color: $--color-text-placeholder;
+      cursor: not-allowed;
+    }
+  }
+}