atui/src/styles/datepicker.less

components built with Vue.js

// DatePicker
// --------------------------------------------------
@prefix-cls-datepicker: e("@{prefix-cls}-datepicker");
@prefix-cls-input: e("@{prefix-cls}-input");

.resetInput() {
  box-shadow: none;
  border-color: #bfbfbf;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
}

.@{prefix-cls-datepicker} {
  display: inline-block;
  width: 100%;
  &-calendar {
    display: inline-block;
    width: 219px;
  }
  .@{prefix-cls}-calendar-body span {
    width: 28px;
  }
  &-toggle {
    position: relative;
    // border-radius: 4px;
    // width: 138px;
    // height: 30px;
    // line-height: 30px;

    // input {
    //   border: 0;
    //   width: 100%;
    //   display: inline-block;
    //   height: 30px;
    //   line-height: 30px;
    //   font-size: 12px;
    //   border: 1px solid #d9d9d9;
    //   outline: none;
    //   border-radius: 4px;
    //   padding-left: 7px;
    // }
    // &[disabled] {
    //   background-color: #f7f7f7;
    //   opacity: 1;
    //   cursor: not-allowed;
    //   color: #ccc;
    // }
    // input:focus {
    //   border: 1px solid @primary-color;
    //   box-shadow: none;
    // }
    /*
    .@{prefix-cls-input} {
      &:hover {
        &:active, &:focus {
          .resetInput()
        }
      }
      &:active, &:focus {
        .resetInput()
      }
    }
    */
  }

  .@{prefix-cls}-icon-calendar {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    // margin-top: -14px;
    right: 7px;
  }
}

.@{prefix-cls-datepicker}-rangepicker {

  .@{prefix-cls-datepicker} {
    width: 219px;
  }

}