uxcore-time-picker/src/style/Header.less

uxcore-time-picker component for uxcore.

.@{__timePickerPrefixClass}-panel {
  &-input {
    margin: 0;
    padding: 0;
    width: 100%;
    cursor: auto;
    outline: 0;
    border: none;
    padding: 0 12px;
    color: @dark-alpha-2;
    &-wrap {
      height: @trigger-height-large - 1;
      line-height: @trigger-height-large - 2;
      box-sizing: border-box;
      position: relative;
      border-bottom: 1px solid @normal-alpha-7;
      .@{__timePickerPrefixClass}-panel-middle-size & {
        height: @trigger-height-middle - 1;
        line-height: @trigger-height-middle - 2;
      }
      .@{__timePickerPrefixClass}-panel-small-size & {
        height: @trigger-height-small - 1;
        line-height: @trigger-height-small - 2;
      }
    }
    &::placeholder {
      // placeholder color will be overrided by color in IE10/11
      color: @normal-alpha-4  !important;
    }
    &-invalid {
      border-color: red;
    }
  }
  &-clear-btn {
    position: absolute;
    right: 8px;
    cursor: pointer;
    overflow: hidden;
    text-align: center;
    top: (@trigger-height-large - 18) / 2;
    line-height: 0;
    margin: 0;
    font-family: uxcore !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    .@{__timePickerPrefixClass}-panel-middle-size & {
      top: (@trigger-height-middle - 18) / 2;
    }
    .@{__timePickerPrefixClass}-panel-small-size & {
      top: (@trigger-height-small - 18) / 2;
    }
  }
  &-clear-btn:after {
    content: "\e6ab";
    color: @normal-alpha-4;
    display: inline-block;
    line-height: 1;
    transition: color 0.3s ease;
  }
}