@import (reference) "../../style/config";
@import (reference) "../../style/set1Px";
@register: lotus-num-key-board;
.@{register} {
  position: fixed;
  left:0;
  bottom:0;
  z-index: 100;
  width:100%;
  background: #fff;
  transform: translateY(100%);
  transition: transform 200ms ease-in-out;
  &-body{
    .flex();
    .flex-hvc();
    justify-content: space-between;
    text-align: center;
    position: relative;
    .heightSingle(430);
    overflow: hidden;
    &:before{
      .setTopLine(#ebedf0);
    }
  }
  &-left{
    .flexN(3);
  }
  &-right{
    .flexN(1);
    .lineHeight(216);
    .box-sizing();
    overflow: hidden;
  }
  &-flex{
    .flex();
    .fontSize(48);
    .lineHeight(108);
    li{
      .flexN(1);
      .box-sizing();
    }
  }
  &-zero{
    .flexN(2);
  }
  &-dot{
    .flexN(1);
  }
  &-item{
    position: relative;
    &::after{
      content: ' ';
      position: absolute;
      pointer-events: none;
      box-sizing: border-box;
      top: -50%;
      left: -50%;
      right: -50%;
      bottom: -50%;
      -webkit-transform: scale(0.5);
      transform: scale(0.5);
      border: 0 solid #ebedf0;
      border-width: 0 1px 1px 0;
    }
    .transition();
  }
  &-delete{
    .fontSize(32);
    color:#333;
    background: #ebedf0;
    position: relative;
    .box-sizing();
  }
  &-finish{
    .fontSize(32);
    color:#fff;
    background: #1989fa;
    position: relative;
    .box-sizing();
  }
  &-hide{
    transform: translateY(100%);
    /*animation: keyBoardDownMove 0.2s linear;
    animation-fill-mode: forwards;*/
  }
  &-show{
    transform: translateY(0%);
    /*animation: keyBoardUpMove 0.2s linear;
    animation-fill-mode: forwards;*/
  }
  
}
//显示动画
@keyframes keyBoardUpMove {
  0%{
    transform: translateY(100%);
  }
  50%{
    transform: translateY(50%);
  }
  100%{
    transform: translateY(0%);
  }
}
//隐藏动画
@keyframes keyBoardDownMove {
  0%{
    transform: translateY(0%);
  }
  50%{
    transform: translateY(50%);
  }
  100%{
    transform: translateY(100%);
  }
}