lixin-web/webapp/less/admin/recharge.less

vue and bootstrap

@import "../variables";
@import "../mixins";
@import (reference) "../utilities";
@import (reference) "../components";
.recharge-form{
  .section{
    > ul{
      li{
        margin-bottom: 10px;
        line-height: 24px;
      }
    }
  }
  //.bal{
  //  color: @state-warning-text;
  //  font-size: 24px;
  //}
  .el-radio-group{
    margin-top: 4px;
    label:only-child{
      .el-radio-button__inner{
        border-radius: 4px;
      }
    }
  }
  .el-form-item__content{
    > .el-button{
      margin-top: -15px;
    }
  }
  .el-input__inner{
    display: inline-block;
    max-width: 190px;
  }

  .el-form-item__error{
    margin-top: -5px;
  }

  .bank-list{
    &:extend(.clearfix all);
    > li{
      float: left;
      margin-bottom: 15px;
      margin-right: 20px;
      cursor: pointer;
      > div{
        width: 132px;
        height: 38px;
      }
      &.selected{
        position: relative;
        cursor: default;
        &:after{
          content: '';
          position: absolute;
          left: 0px;
          right: 0px;
          top: 0px;
          bottom: 0px;
          border:2px solid @brand-warning;
        }
        div{
          .selectedIcon(8px;5px);
          //&:after{
          //  content: none;
          //}
          //&:before{
          //  bottom:2px;
          //  top:auto;
          //  transform: rotate(90deg)
          //}
          &:before{
            border-right-color: @brand-warning;
            border-top-color: @brand-warning;
          }
        }
      }
      & + li .b98{
        display: none;
      }
    }
  }
  h4{
    color: @text-color;
    margin-top: 0;
    margin-bottom: 15px;
  }

  .section + .section{
    .bank-list > li{
      margin-bottom: 0;
    }
  }
  .section2{
    > ul {
      margin-left: 90px;
      li{
        width: 294px;

      }
    }
  }
  .account-tip-list{
    margin-left: 15px;
  }
  .el-button--text{
    float: right;
    margin-top: 5px;
    i{
      margin-right: 3px;
    }
  }

  @media (min-width:@screen-sm){
    //padding-left: 105px;
    .section > ul{
      li{
        line-height: 38px;
        margin-bottom: 15px;
        > span{
          margin-left: -70px;
          float: left;
        }
      }
    }
  }
}

.el-steps{
  margin-left: 126px;
  margin-bottom: 20px;
  .el-step__head{
    width: 34px;
    height: 34px;
    background: transparent;
    &.is-text.is-success{
      border-color: @brand-primary;
      background:@brand-primary;
    }
    &.is-text.is-process{
      background: @brand-warning;
      border-color: @brand-warning;
    }
    &.is-text.is-wait{
      color: @brand-warning;
      border-color: @brand-warning;
    }
    &.is-wait,&.is-process{
      font-size:18px;
    }
    .el-step__icon{
      line-height: 30px;
      font-weight:bold;
      font-size:16px;
    }
  }
  .el-step__line{
    background: @brand-warning;
    &.is-horizontal{
      height: 1px;
    }
  }
  .el-step__description.is-wait{
    color:@brand-warning ;
  }
  .el-step__description.is-process{
    color: @brand-warning;
  }
  .el-step__main{
    margin-top: 20px;
  }
  .el-step__description{
    display: inline-block;
    .translate(-50%,0);
    margin-left: 17px;
    &.is-success{
      color: @brand-primary;
    }
  }
  .el-step__line-inner{
    border-bottom:none;
  }
}