ost-ui/components/OstInput/style.less

ost ui for react

.ost-input {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  justify-content: flex-end;

  input {
    width: 100%;
    height: 100%;
    line-height: normal;
    text-align: right;
    color: #333;
    font-size: 16 * @BU;
    border: none;
    background: transparent;
    text-overflow: clip;
    white-space: nowrap;
  }

  input:focus {
    outline: none;
  }


  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
      -webkit-appearance: none;
  }
  
  input[type="number"] {
      -moz-appearance: textfield;
  }

  &-disabled {
    color: #90949E !important;
    -webkit-text-fill-color: #90949E;
    opacity: 1 !important;
    background: transparent;
  }

  &-delBtn {
    width: 14 * @BU;
    height: 100%;
    display: flex;
    align-items: center;
    position: absolute;
    right: -25 * @BU;
    top: 0;

    img {
      width: 14 * @BU;
      height: 14 * @BU;
    }
  }

  &-sixBitCode {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    @borderStyle: .5 * @BU solid #BCBCBC;

    &-fakeInput {
      width: 48 * @BU;
      height: 46 * @BU;
      line-height: 46 * @BU;
      text-align: center;
      font-size: 22 * @BU;
      color: #333;
      background: #FFFFFF;
      border-top: @borderStyle;
      border-bottom: @borderStyle;
      border-left: @borderStyle;
      position: relative;
    }

    &-fakeInput:first-child {
      border-top-left-radius: 3 * @BU;
      border-bottom-left-radius: 3 * @BU;
    }

    &-fakeInput:last-child {
      border-right: @borderStyle;
      border-top-right-radius: 3 * @BU;
      border-bottom-right-radius: 3 * @BU;
    }

    &-fakeInput-onFocus::after {
      content: "";
      position: absolute;
      right: 50%;
      top: 25%;
      height: 50%;
      border-right: 2 * @BU solid #FF6D00;
      -webkit-animation: keyboard-cursor infinite 1s step-start;
      animation: keyboard-cursor infinite 1s step-start;
    }

    @keyframes keyboard-cursor {
      0% {
        opacity: 1;
      }

      50% {
        opacity: 0;
      }

      to {
        opacity: 1;
      }
    }
  }

  &-countdown {
    &-disabled {
      color: #7999FF;
      opacity: 0.5;
    }

    &-item {
      cursor: pointer;
      white-space: nowrap;
      height: 100%;
      display: flex;
      align-items: center;
      padding-left: 10 * @BU;
      font-family: PingFangSC-Medium;
      font-size: 16px;
      color: #3161FF;
      letter-spacing: 0;
      text-align: right;
    }

    &-hide {
      display: none;
    }
  }

}