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

uxcore-time-picker component for uxcore.

.@{__timePickerPrefixClass} {
  position: relative;
  &-input {
    width: 100%;
    border: 1px solid @border-color;
    border-radius: @global-border-radius;
    font-size: 12px;
    color: @dark-alpha-2;
    box-sizing: border-box;
    &[readonly],
    &[disabled] {
      border: 1px solid @border-disabled-color;
      background: @bg-disabled-color;
      color: @text-disabled-color;
    }
    &:hover {
      border: 1px @border-hover-color solid;
    }
    &:hover[readonly],
    &:hover[disabled] {
      border: 1px solid @border-disabled-color;
    }
    &:focus {
      border: 1px @border-focus-color solid;
      outline: none;
    }
    &:focus[readonly],
    &:focus[disabled] {
      border: 1px solid @border-disabled-color;
      color: @text-disabled-color;
    }
    &::placeholder {
      // placeholder color will be overrided by color in IE10/11
      color: @normal-alpha-4  !important;
    }
    padding: 5px 12px;
    height: @trigger-height-large;
    line-height: 18px;
    .@{__timePickerPrefixClass}-middle-size & {
      height: @trigger-height-middle;
    }
    .@{__timePickerPrefixClass}-small-size & {
      height: @trigger-height-small;
    }
  }
  &-icon {
    font-family: uxcore !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    position: absolute;
    line-height: 1;
    color: @normal-alpha-4;
    right: 8px;
    top: (@trigger-height-large - 16) / 2;
    &:before {
      content: "\e73e";
    }
    .@{__timePickerPrefixClass}-middle-size & {
      top: (@trigger-height-middle - 16) / 2;
    }
    .@{__timePickerPrefixClass}-small-size & {
      top: (@trigger-height-small - 16) / 2;
    }
  }
}