@winner-fed/wui-theme-redness/src/trade-keyboard.less

Wui component redness theme.

@import './variables';
@import './mixins/hairline';

@name: win-trade-keyboard;
@key-padding-h: 3px;

/* 计算key宽度mixins */
.key-width(@width: 0,@padding-h: @key-padding-h,@unit: vw) when (@unit = vw) {
  @px-width: ((@width + @padding-h * 2) / 375 * 100);
  @result: replace('@{px-width}', px, @unit);

  width: ~'@{result}';
}

.key-width(@width: 0,@padding-h: @key-padding-h,@unit: vw) when (@unit = px) {
  @px-width: (@width + @padding-h * 2);

  width: ~'@{px-width}';
}

.@{name}__theme-brick {
  .@{name}__key-inner {
    background-color: @trade-keyboard-brick-button-default-background-color;
    text-align: center;
  }

  .@{name}__key {
    padding-top: 0;
  }

  .@{name}__key-commit {
    height: 200%;
    position: relative;
    z-index: 1;

    .@{name}__key-inner {
      background-color: @trade-keyboard-confirm-button-default-background-color;
      color: @trade-keyboard-confirm-button-default-color;
      font-size: 18px;

      &::after {
        display: none;
      }
    }

    &.@{name}__key--active {
      .@{name}__key-inner {
        background-color: @trade-keyboard-confirm-button-active-background-color;
        color: @trade-keyboard-confirm-button-default-color;
      }
    }
  }

  .@{name}__key-clear {
    .@{name}__key-inner {
      font-size: 18px;
    }
  }

  .@{name}__key-shape {
    .@{name}__key-inner {
      i {
        font-size: 28px;
      }
    }
  }

  .@{name}__key-backspace {
    .@{name}__key-inner {
      i {
        font-size: 28px;
      }
    }
  }

  .@{name}__key-point {
    .@{name}__key-inner {
      i {
        font-size: 6px;
      }
    }
  }
}

.@{name}__theme-mini {
  background-color: @trade-keyboard-background-color;
  overflow: hidden;
  padding: 3px 2px;

  .@{name}__key-row {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* 主功能按键定制 */

  .@{name}__key {
    position: relative;
    padding: 6px @key-padding-h;
    box-sizing: border-box;
    .key-width(31.1); // 平均分配row-key后得出的值
    .@{name}__key-inner {
      padding: 0 5px;
      box-sizing: border-box;
      background-color: @trade-keyboard-mini-button-default-background-color;
      height: 42px;
      color: @trade-keyboard-color;
      text-align: center;
      line-height: 42px;
      font-size: 24px;
      border-radius: 5px;
      box-shadow: @trade-keyboard-mini-button-box-shadow; // ignored by px2rem
    }

    &.@{name}__key--active {
      .@{name}__key-inner {
        background-color: @trade-keyboard-mini-button-active-background-color;
        box-shadow: @trade-keyboard-mini-button-box-shadow; // ignored by px2rem
      }
    }
  }

  /* 功能按键定制 */

  .@{name}__key-text {
    width: auto;

    .@{name}__key-inner {
      font-size: 16px;
      .key-width(42, 0px);
    }
  }

  .@{name}__key-switch {
    width: auto;

    .@{name}__key-inner {
      font-size: 16px;
      .key-width(88, 0px);
    }
  }

  .@{name}__key-space {
    width: auto;
    flex: 1;

    .@{name}__key-inner {
      font-size: 16px;
    }
  }

  .@{name}__key-shape {
    width: auto;

    .@{name}__key-inner {
      display: flex;
      align-items: center;
      justify-content: center;
      .key-width(42, 0px);

      i {
        font-size: 28px;
        display: block;
      }
    }
  }

  .@{name}__key-upper,
  .@{name}__key-lower {
    flex: 1;

    .@{name}__key-inner {
      display: flex;
      align-items: center;
      justify-content: center;
      .key-width(42, 0px);
    }

    i {
      font-size: 24px;
      display: block;
    }
  }

  .@{name}__key-flex {
    flex: 1;
  }

  .@{name}__key-backspace {
    display: flex;
    flex: 1;
    justify-content: flex-end;

    .@{name}__key-inner {
      display: inline-block;
      .key-width(42, 0px);
    }

    i {
      font-size: 28px;
      display: block;
    }
  }

  .@{name}__key-primary {
    width: auto;

    .@{name}__key-inner {
      background-color: @trade-keyboard-confirm-button-default-background-color;
      color: @trade-keyboard-confirm-button-default-color;
      font-size: 16px;
      .key-width(88, 0px);
    }

    &.@{name}__key--active {
      .@{name}__key-inner {
        background-color: @trade-keyboard-confirm-button-active-background-color;
      }
    }
  }

  .@{name}__key-pro {
    .@{name}__key-inner {
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: @trade-keyboard-pro-button-default-background-color;
    }

    &.@{name}__key--active {
      .@{name}__key-inner {
        background-color: @trade-keyboard-pro-button-active-background-color;
      }
    }
  }

  // &.@{name}__key-transparent {
  //   .@{name}__key-inner {
  //     background-color: transparent;
  //     box-shadow: none;
  //   }
  //   &.is-active {
  //     .@{name}__key-inner {
  //       background-color: transparent;
  //       color: #447bd7;
  //     }
  //   }
  // }
}

@keyframes cursorText {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

.@{name} {
  /* 键盘部分 */

  &__layout {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: @trade-keyboard-background-color;
    user-select: none;
    -webkit-touch-callout: none; /* Disable Android and IOS callout */
    transition-property: transform;
    transition-duration: 100ms;
    z-index: 99999;
  }

  &__header {
    height: 38px;
    width: 100%;
    background-color: @trade-keyboard-header-background-color;
    display: flex;

    &::after {
      height: 1px; // ignored by px2rem
      .hairline-top(@trade-keyboard-border-color, 0, 0);
    }
  }

  &__spring {
    flex: 1;
    line-height: 40px;
    padding-left: 10px;
    font-size: @trade-keyboard-header-title-font-size;
    color: @trade-keyboard-header-title-color;
  }

  &__button {
    height: 38px;
    line-height: 38px;
    display: block;
    padding: 0 20px;
    color: #447bd7;
  }

  &__key-tip {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    text-align: center;
    background-color: @trade-keyboard-tip-default-color;
    border-radius: 5px;
    padding: 10px 15px;
    font-size: 24px;
    min-width: 48px;
    margin-bottom: 12px;
    z-index: 100000;
    box-shadow: @trade-keyboard-tip-box-shadow;

    &-inner {
      position: relative;
      display: inline-block;
      z-index: 2;
      background-color: @trade-keyboard-tip-default-color;
    }

    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      background-color: @trade-keyboard-tip-default-color;
      border-radius: 5px;
      z-index: 1;
    }

    &::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: calc(50%);
      transform: translateX(-50%) translateY(7px) rotate(45deg);
      height: 16px;
      width: 16px;
      background-color: @trade-keyboard-tip-default-color;
      box-shadow: @trade-keyboard-tip-box-shadow;
    }
  }

  &&--disabled {
    .@{name}__cell-label,
    .@{name}__control {
      color: @trade-keyboard-input-disabled-text-color;
    }
  }

  /* 输入框部分 */

  &__cell-label {
    -webkit-box-flex: 0;
    -webkit-flex: none;
    flex: none;
    box-sizing: border-box;
    width: 6.2em;
    margin-right: 12px;
    color: #646566;
    text-align: left;
    word-wrap: break-word;

    &--right {
      text-align: right;
    }

    &--center {
      text-align: center;
    }
  }

  &__cell-value {
    display: flex;
    align-items: center;
  }

  &__control {
    // font-size: 16px;
    height: 100%;
    line-height: 1;
    padding-right: 4px; // 防止text-align： right时，容器溢出
    position: relative;
    white-space: nowrap;
    overflow-x: hidden;
    overflow-y: hidden;
    vertical-align: top;
    width: 100%;
    display: flex;
    -webkit-overflow-scrolling: auto;
    box-sizing: border-box;
    justify-content: flex-start;
    color: @trade-keyboard-input-text-color;

    &--right {
      text-align: right;
      justify-content: flex-end;
    }

    &--center {
      text-align: center;
      justify-content: center;
    }

    &&--focus {
      overflow-x: auto;
    }

    &::-webkit-scrollbar {
      display: none;
    }

    // 避免出现滚动条导致布局异常
  }

  &__control-body {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }

  &__cell-left-icon,
  &__cell-right-icon {
    .win-icon {
      display: block;
      font-size: @trade-keyboard-icon-size;
      line-height: inherit;
    }
  }

  &__cell-left-icon {
    margin-right: @padding-base;
  }

  &__cell-right-icon {
    color: @trade-keyboard-right-icon-color;
  }

  &__control-clear,
  &__cell-right-icon {
    margin-right: -8px;
    padding: 0 @padding-xs;
    line-height: inherit;
  }

  &__control-clear {
    color: @field-clear-icon-color;
    font-size: @field-clear-icon-size;
    cursor: pointer;
  }

  &__control-string-block,
  &__control-string-block-prev {
    position: relative;
    top: 0;
    left: 0;
    // display: inline-block;
    height: 100%;
    // font-size: 16px;
    display: flex;
    align-items: center;

    &--cursor::after {
      content: '';
      display: block;
      height: 14px;
      width: 2px; // ignored by px2rem
      background-color: #447bd7;
      position: absolute;
      right: -2px; // ignored by px2rem
      animation: cursorText 1s infinite cubic-bezier(1, -0.01, 0.45, 0.31);
      z-index: 10;
    }
  }

  &__control-string-block-prev {
    height: 100%;

    &-trigger {
      height: 100%;
      width: 0.3em;
      position: absolute;
      left: 0;
      top: 0;
      z-index: 2;
    }
  }

  &__control-placeholder {
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0;
    // font-size: 16px;
    color: @trade-keyboard-placeholder-text-color;
    display: flex;
    align-items: center;
    justify-content: flex-start;

    &--right {
      text-align: right;
      justify-content: flex-end;
    }

    &--center {
      text-align: center;
      justify-content: center;
    }
  }
}