@charset "utf-8";
@import "../helpers/index";
// 模态基础样式
modal {
  position: absolute;
  top: 0;
  left: 0;
  bottom:0;
  right:0;
  display: block;

  & .modal-wrapper{
    position: relative;
    z-index:10;
    transform-origin:center center;
    // height: auto !important;
  }

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


modal-base{
  background: transparent;
  border-radius: 5px;
  margin-top:54%;
  position: absolute;
  color: $dark;

  & .modal-head{
    text-align: center;
    border-bottom:1px solid $border-color;
    @include border-top-radius(5px);
    font-size: 16px;
    font-weight: 700;
    padding: 15px 0;
  }

  & .modal-body{
    text-align: center;
    padding: 16px 15px;
    line-height: 150%;
    font-size: 14px;
  }

  & .bottom-close{
    @extend .ion-ios-close-circle-outline;
    font-size:32px;
    color: $gray-lighter !important;
    position: absolute;
    margin-left:-13px;
    bottom:-48px;
    left:50%;
  }
}

modal-full{
  @extend modal-base;
  width:100%;
}

modal-tip,modal-alert,modal-alertWithClose,modal-confirm,modal-prompt,modal-progress{
  @extend modal-base;
  background: #fff;
  left:50%;
  width:270px;
  margin-left:-135px;

  & .modal-head{
    background: #ffffff;
  }

  & .modal-body{
    background: #ffffff;
  }
}

modal-alertWithClose{
  margin-top:45%;
  width:280px;
  margin-left:-140px;
}

modal-prompt{
  & .modal-body{
    padding: 20px 20px 20px;
  }
  & .item-input-normal{
    padding: 3px 0 5px 5px;
    input{
      padding-left:10px !important;
    }
  }
}

modal-tip{
  margin-top:60%;

  & .modal-body{
    @include border-bottom-radius(5px);
  }
}

modal-progress .progress-bar{
  margin:5px 20px 25px;
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border-radius:5px;
  background-color: $gray-light;
  & .progress{
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border-radius:5px;
    height:10px;
    width:0;
    display: block;
    background-color: $blue;

  }
}





// 交易密码弹框
modal-tradepassword{
  width: 300px;
  background: #fff;
  border-radius: 5px;
  color: #262626;
  position: absolute;
  left: 50%;
  margin-top: 45%;
  margin-left: -150px;

  .icon-close{
    width: 30px;
    height: 30px;
    background-image: url('../assets/images/public/icon-modal-close.png');
    background-size: 50% auto;
    background-position: left center;
    background-repeat: no-repeat;
    cursor: pointer;
    position: absolute;
    left: 15px;
    top: 8px;
  }

  .modal-head{
    text-align: center;
    font-size: 16px;
    font-weight: 700;
    padding: 15px 0;
  }

  .modal-body{
    text-align: center;
    padding: 16px 15px;
    line-height: 150%;
    font-size: 14px;
  }
}