@charset "utf-8";
@import "../../../../static/scss/ionic/helpers/index";

// 模态基础样式
keyboard {
  position: absolute;
  width:100%;
  bottom:0;
  display: block;

  &.enableBackdrop{
    top: 0;
    left: 0;
    right:0;
  }

  .keyboard-root{
    position: absolute;
    width:100%;
    //top: 0;
    //left: 0;
    bottom:0;
    //right:0;
    display: block;
  }

  & .keyboard-wrapper{
    z-index: 10;
    height:100%;
    position: relative;

    .keyboard-number{
      //margin-top:-100px;
    }
  }

  // 模态框背景
  ion-backdrop{
    bottom:0;
    right:0;
    width:auto;
    height:auto;
    opacity: 0.6;
  }

  /*.close{
    width:30px;
    height:18px;
    display: inline-block;
    background: url('../assets/images/public/keyboard-close.png') center no-repeat;
    -webkit-background-size:auto 100%;
    background-size:auto 100%;
  }*/

  .dot{
    width:6px;
    height:6px;
    margin-bottom:5px;
    -webkit-border-radius:50%;
    -moz-border-radius:50%;
    border-radius:50%;
    background-color: $dark;
    display: inline-block;
  }

  .keyboard-container{
    width:100%;
    background-color: #FFFFFF;
    font-size:24px;

    .grid-row{
      text-align: center;
      @extend .flex;
      @extend .flex-center;
      @extend .items-center;
    }

    .grid-int{
      width:33.33%;
      padding-top:13px;
      padding-bottom:13px;
      @include border(1px,solid,$gray-lighter,'top');
      @include border(1px,solid,$gray-lighter,'right');

      &.grid-safe-area-bottom{
        padding-bottom:13px;
        padding-bottom: calc(13px + constant(safe-area-inset-bottom));
        padding-bottom: calc(13px + env(safe-area-inset-bottom));
      }

      .platform-android4 &,.platform-android5 &,.platform-android6 &{
        @include border(1px,solid,$gray-lighter,'top',true);
        @include border(1px,solid,$gray-lighter,'right',true);
      }
      //border-top:1px solid $gray-lighter;
      //border-right:1px solid $gray-lighter;
      &:last-child{
        border-right:none !important;
      }


    }

    .grid-all-float{
      @include display-flex();
      @include justify-content(center);
      text-align: center;
    }

    .grid-col-float{
      @include flex(0, 0, 25%);
      width:25%;
    }

    .grid-float{
      width:100%;
      padding-top:13px;
      padding-bottom:13px;

      &.grid-safe-area-bottom{
        padding-bottom:13px;
        padding-bottom: calc(13px + constant(safe-area-inset-bottom));
        padding-bottom: calc(13px + env(safe-area-inset-bottom));
      }

      @include border(1px,solid,$gray-lighter,'top');
      @include border(1px,solid,$gray-lighter,'right');
      .platform-android4 &,.platform-android5 &,.platform-android6 &{
        @include border(1px,solid,$gray-lighter,'top',true);
        @include border(1px,solid,$gray-lighter,'right',true);
      }
    }
  }

  .grid-backspace{
    padding: 38px 0;
    @include border(1px,solid,$gray-lighter,'top');
  }

  .grid-confirm{
    padding-top:41px;
    padding-bottom:41px;
    padding-bottom: calc(41px + constant(safe-area-inset-bottom));
    padding-bottom: calc(41px + env(safe-area-inset-bottom));
    font-size:20px;
    color: $white;
    background-color: $primary;
  }
}