heyui/themes/components/datetime-picker.less

A UI components Library.

@date-picker-prefix: ~"@{prefix}date";
@time-picker-prefix: ~"@{prefix}time";
@datetime-picker-prefix: ~"@{prefix}datetime";
@date-picker-cells-width: 196px;
.@{datetime-picker-prefix}-range {
  .@{datetime-picker-prefix}-show{
    min-width: 280px;
  }
}

.@{date-picker-prefix} {
  &-picker {
    border: @border;
    .@{date-picker-prefix} {
      &-shortcut {
        border-radius: @border-radius 0 0 @border-radius;
        width: 100px;
        font-size: 12px;
        line-height: 28px;
        background: @gray4-color;
        border-right: @border;
        padding: 10px 0;
        >div {
          padding: 3px 10px;
          .li-hover();
        }
      }
      &-container {
        display: flex
      }
      &-range-container{
        >.@{date-picker-prefix}-content:last-child{
          border-left: @border;
        }
      }
      &-content {
        padding: 10px;
      }
      &-footer {
        padding: 5px 10px;
        text-align: right;
        border-top: @border;
      }
      &-header {
        text-align: center;
        line-height: @input-height;
        >span {
          .text-hover();
          display: inline-block;
        }
        &-show {
          margin: 0 3px;
        }
        .@{date-picker-prefix} {
          &-year-left-picker,
          &-year-right-picker {
            >i+i {
              margin-left: -7px;
            }
          }
          &-month-left-picker,
          &-year-left-picker,
          &-month-right-picker,
          &-year-right-picker {
            color: @gray-color;
            font-size: 12px;
            margin: 0 3px;
          }
          &-month-left-picker,
          &-year-left-picker {
            float: left;
          }
          &-month-right-picker,
          &-year-right-picker {
            float: right;
          }
        }
      }
      &-body {
        margin-top: 8px;
        font-size: @font-size-mini;
        width: 224px;
        >div>span {
          width: 32px;
          height: 32px;
          line-height: 32px;
          display: inline-block;
          text-align: center;
        }
        &-weeks {
          font-weight: bold;
        }
        &-pickers {
          >span {
            cursor: default;
            &:hover {
              background-color: @gray3-color;
            }
            &.@{date-picker-prefix} {
              &-today {
                color: @primary-color;
              }
              &-selected {
                background-color: @primary-color;
                color: @white-color;
              }
              &-range-selected {
                background-color: lighten(@primary-color, 32%);
              }
              &-not-now-day {
                color: @gray1-color;
                background-color: @white-color;
              }
              &-disabled {
                background-color: @gray4-color;
                color: @gray1-color;
                pointer-events: none;
              }
            }
          }
        }
        &-month,
        &-year {
          >div>span {
            height: 50px;
            width: 50px;
            line-height: 50px;
            margin: 3px;
          }
        }
        &-minute,
        &-hour {
          >div>span {
            height: 30px;
            width: 50px;
            line-height: 30px;
            margin: 3px;
          }
        }
      }
    }
  }
}


.@{datetime-picker-prefix}{
  &-input-border {
    width: 200px;
    display: inline-block;
    .@{prefix}input{
      width: 100%;
    }
    .@{pop-ref-prefix} >input {
      border-color: @primary-color;
      box-shadow: 0 0 0 2px fade(@primary-color, 20%);
    }
  }
}