antd-mini/less/NumberKeyboard/index.less

antd-mini 是支付宝小程序 UI 组件库，遵循 Ant Design 规范。

@import (reference) './variable.less';

@keyframes number-input-cursor {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.ant-number-keyboard {
  color: @number-key-board-text-color;
  width: 0;
  height: 0;
  position: relative;
  overflow: hidden;
  &-modal {
    z-index: 998;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: transparent;
  }
  &-kb {
    background: @number-key-board-background-color;
    max-height: 600px;
    min-width: 100vw;
    overflow: hidden;
    position: fixed;
    bottom: 0;
    left: 0;
    transition: all 200ms linear;
    z-index: 999;
    &_hide {
      transform: translateY(100%);
      max-height: 0;
    }
    &_bd {
      display: flex;
    }
    &_row {
      display: flex;
    }
    &_keys {
      flex: 3;
    }
    &_function {
      flex: 1;
      display: flex;
      flex-direction: column;
    }
    &_none {
      height: 80 * @rpx;
      width: calc(100% - @number-key-board-none-padding * 2);
      padding: 0 @number-key-board-none-padding;
      font-size: 28 * @rpx;
      background-color: @number-key-board-iphonex-safe-background-color;
      display: flex;
      position: relative;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      border-bottom: @border-width-standard solid
        @number-key-board-background-color;
      color: @number-key-board-none-text-color;
    }
    &_number {
      flex: 1;
      height: calc(100vh / 14);
      text-align: center;
      font-size: 50 * @rpx;
      color: @number-key-board-text-color;
      background: @number-key-board-iphonex-safe-background-color;
      border-right: @border-width-standard solid
        @number-key-board-background-color;
      border-bottom: @border-width-standard solid
        @number-key-board-background-color;
      display: flex;
      justify-content: center;
      align-items: center;
      user-select: none;
      &:active {
        background-color: @number-key-board-active-background-color;
        opacity: 0.5;
        color: @number-key-board-text-color;
      }
    }
    &_disable {
      &:active {
        opacity: 1;
      }
    }
    &_zero {
      flex: 2;
    }
    &_point {
      flex: 1;
    }
    &_transfer {
      background-color: @number-key-board-transfer-bg;
      color: @number-key-board-transfer-color;
      flex: 1;
      height: calc(100vh / 14);
      text-align: center;
      font-size: 34 * @rpx;
      border-right: @border-width-standard solid
        @number-key-board-background-color;
      border-bottom: @border-width-standard solid
        @number-key-board-background-color;
      display: flex;
      justify-content: center;
      align-items: center;
      user-select: none;
      position: relative;
      overflow: hidden;
      &-btn {
        font-size: 32 * @rpx;
        font-weight: bold;
      }
      &:active {
        opacity: 0.9;
      }
    }
    &_del {
      position: relative;
      flex: none;
      border-right: none;
      &::before {
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        content: '';
      }
    }
    &_iphonex-safe {
      height: 48 * @rpx;
      width: 100%;
      background-color: @number-key-board-iphonex-safe-background-color;
    }
    &_flex {
      flex: 1;
    }
    &-e {
      background-color: @number-key-board-border-color;
    }
  }
  &-down {
    font-size: 40 * @rpx;
  }
  &-del {
    font-size: 50 * @rpx;
  }
}