ten-design-vue/lib/theme/components/date-picker.less

ten-vue

/* dependencies button,icon,select */
@import "../vars.less";
@import "../mixins/index.less";

@time-options-item-height: 40px;
@item-count: 6;
@item-selected-bg-color: #FBFBFB;

@icon-color: #bfbfbf;

.input-active() {
  z-index: 1;
  border-color: @primary-color;
}

.ten-picker {
  padding: 0;

  &__input {
    min-width: 304px;
    display: inline-flex;
    border: @border-main;
    background: #fff;
    border-radius: @input-border-radius-default;
    width: 100%;
    
    // input active focus 和 disabled不会共存...
    &:hover:not(.ten-picker__input--disabled),
    &--focused:not(.ten-picker__input--disabled) {
      .input-active();

      .ten-picker__input-icon:not(.ten-picker__input-icon--clear) {
        color: @primary-color;
      }
    }

    // input disabled
    &--disabled {
      background: #fbfbfb;
      border-color: @disabled-color;
      cursor: not-allowed;
    }

    // input readonly
    &--readonly {
      cursor: default;
      &:focus {
        .input-active();
      }
    }

    &--error {
      border-color: @error-color;
    }

    // input show clear
    &:not(&--empty):hover&:not(&--disabled):hover&:not(&--readonly):hover:not(&--no-clear):hover {
      .ten-picker__input-icon--suffix {
        visibility: hidden;
      }
      .ten-picker__input-icon--clear {
        visibility: visible;
      }
    }

    .ten-input__input {
      border: none;
    }

    &-separator {
      padding: 0 10px;
      line-height: @input-inner-height-default;
    }

    &-suffixicon {
      position: relative;
      min-width: 24px;
      margin: 0 8px;
    }

    &-icon {
      position: absolute;
      height: @input-inner-height-default;
      line-height: @input-inner-height-default;
      font-size: 0;
      color: @icon-color;

      .ten-icon {
        font-size: 20px;
        vertical-align: middle;
      }

      &--suffix {
        .ten-icon {
          font-size: 20px;
        }
      }

      &--clear {
        visibility: hidden;
        cursor: pointer;

        &:hover {
          color: @primary-color;
        }
      }
    }

    &--size-small {
      border-radius: @input-border-radius-small;
      .ten-picker__input-icon,
      .ten-picker__input-separator {
        height: @input-inner-height-small;
        line-height: @input-inner-height-small;
      }
    }
  }

  &__popup {
    display: flex;

    &-shortcut {
      width: 101px;
      padding: 6px 0 6px 16px ;
      border-right: @border-main-2;

      &-btn {
        display: block;
        color: #000;
        padding: 0;
        
        + .ten-button {
          margin-left: 0;
        }
        &:hover {
          color: #4088ff;
        }
      }
    }
  }
}

.ten-picker-datetime-range {
  min-width: 408px;
}

// basic
.ten-time-options {
  height: @item-count * @time-options-item-height;
  padding-bottom: (@item-count - 1) * @time-options-item-height + 1;
  overflow-y: hidden;
  overflow-x: hidden;
  font-size: @text-level-1-size;

  &:hover {
    overflow-y: auto;
  }

  &--scrolling {
    overflow-y: hidden;
  }

  &__item {
    display: block;
    height: @time-options-item-height;
    line-height: @time-options-item-height;
    text-align: center;
    cursor: pointer;

    &:hover {
      background: @primary-color-ligher-7;
    }

    &--selected {
      font-weight: bold;
      background: @item-selected-bg-color;
      border-top: @border-main-2;
      border-bottom: @border-main-2;

      &:hover {
        background: @item-selected-bg-color;
      }
    }

    &--disabled,
    &--disabled:hover {
      background: transparent;
      color: @disabled-color;
      cursor: not-allowed;
    }
  }
}

.ten-date-item {
  color: #000;
  
  &__wrapper {
    display: inline-block;
    height: 24px;
    width: 24px;
    line-height: 24px;

    box-sizing: content-box;
    border-left: 6px solid #fff;
    border-right: 6px solid #fff;

    text-align: center;
    cursor: pointer;

    &:hover {
      background-color: @primary-color-ligher-7;
    }
  }

  &__text {
    font-size: 14px;
  }

  &--now {
    .ten-date-item__wrapper {
      box-shadow: inset 0px 0px 0px 1px @primary-color;
      color: @primary-color;
    }
  }

  &--highlight {
    .ten-date-item__wrapper {
      background-color: @primary-color-ligher-7;
      border-color: @primary-color-ligher-7;
    }
  }

  &--active {
    .ten-date-item__wrapper {
      color: #fff;
      background-color: @primary-color;
    }

    &-start {
      .ten-date-item__wrapper {
        border-left-color: #fff;
      }
    }

    &-end {
      .ten-date-item__wrapper {
        border-right-color: #fff;
      }
    }
  }

  &--last-day-of-month {
    .ten-date-item__wrapper {
      border-right-color: #fff; 
    }
  }

  &--first-day-of-month {
    .ten-date-item__wrapper {
      border-left-color: #fff; 
    }
  }

  &--additional {
    .ten-date-item__wrapper {
      color: #BFBFBF;
      background: #fff;
      border-color: #fff;
    }
  }

  &--disabled {
    .ten-date-item__wrapper {
      cursor: not-allowed;
      background: #f5f5f5;
      border-color: #f5f5f5;
      color: @disabled-color;
    }
  }
}

.ten-date-day,
.ten-date-date {
  tbody {
    tr {
      .ten-date-item__wrapper{
        margin-top: 8px;
      }
      &:first-child{
        .ten-date-item__wrapper{
          margin-top: 6px;
        }
      }
    }
  }
}

.ten-date-year,
.ten-date-month {
  tbody {
    tr {
      .ten-date-item__wrapper {
        margin-top: 28px;
        width: 38px;
        border-left-width: 22px;
        border-right-width: 22px;
      }  
      &:first-child{
        .ten-date-item__wrapper {
          margin-top: 24px;
        } 
      }

      &:last-child {
        .ten-date-item{
          text-align: left;
        } 
      }
    }
  }
}

// panel
.ten-time {
  display: flex;

  &__item {
    min-width: 56px;
    border-right: @border-main-2;

    &:last-child {
      border-right: none;
    }
  }
}

.ten-time-range {
  display: flex;
  .ten-time:first-child {
    border-right: @border-main-2;
  }
}

.ten-date {

  width: 304px;
  padding: 11px 16px 22px;

  table {
    border-collapse: collapse;
    border: none;
    margin: auto;
    user-select: none;
  }

  tbody {
    margin-top: 2px;
  }

  th {
    border-bottom: 1px solid @border-color;
    padding: 7px 0;
    margin-bottom: 5px;
    font-weight: 500;
  }

  td {
    padding: 0;
    text-align: center;
    border: none;

    &:first-child {
      .ten-date-item__wrapper {
        border-left: none;
      }
    }

    &:last-child {
      .ten-date-item__wrapper {
        border-right: none;
      }
    }
  }

  &__sub-panel {
    &--hide {
      display: none;
    }
  }

  .ten-date-header {

    display: flex;
  
    &__text {
      flex: 1;
      justify-content: center;
      display: flex;
      align-items: center;
      
      .ten-date-header__btn {
        color: #000;
  
        &:hover {
          color: #4088ff;
        }
      }
    }
  
    &__btn {
      padding: 0;
      color: @icon-color;
  
      &--prev-month,
      &--next-year {
        margin-left: 4px!important;
      }
  
      &--next-year {
        transform-origin: center 17px;
      }
  
      &--disabled {
        display: none;
      }
    }
  }
}

.ten-date-range {
  width: 608px;
  overflow: hidden;
  display: flex;

  .ten-date:first-child {
    border-right: @border-main-2;;
  }
}

.ten-date-time {
  width: 304px;

  .ten-time,
  .ten-time__item {
    flex: 1;
  }

  .ten-time__item:hover {
    flex: none;
  }

  &__time {
    &-header {
      display: flex;
      height: 51px;
      line-height: 50px;
      border-bottom: @border-main-2;
      &-date {
        flex: 1;
        text-align: center;
        &:first-child {
          border-right: @border-main-2;
        }
      }
    }
  }
  &__footer {
    border-top: @border-main-2;
    .clearfix();
    &-btn {
      float: right;
    }
  }
}

.ten-date-time-range {
  width: 608px;
}