@import './common/var.scss';

// 工具类名统一前缀
$prefix: ibps;


// 文字相关
.#{$prefix}-text-center {
  text-align: center;
}
//文字省略
.#{$prefix}-ellipsis{
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.#{$prefix}-help-block{
  display: block;
  margin-top: 5px;
  margin-bottom: 5px;
  color: $gray-dark;
  font-size: 12px;
}

// 浮动相关
.#{$prefix}-fl {
  float: left;
}
.#{$prefix}-fr {
  float: right;
}
.#{$prefix}-clearfix:before,
.#{$prefix}-clearfix:after {
  display: table;
  content: "";
}
.#{$prefix}-clearfix:after {
  clear: both
}

// 边距相关
$sizes: (0, 5, 10, 15, 20);

@for $index from 1 to 6 {
  .#{$prefix}-m-#{nth($sizes, $index)} { margin: #{nth($sizes, $index)}px !important; }
  .#{$prefix}-mt-#{nth($sizes, $index)} { margin-top: #{nth($sizes, $index)}px !important; }
  .#{$prefix}-mr-#{nth($sizes, $index)} { margin-right: #{nth($sizes, $index)}px !important; }
  .#{$prefix}-mb-#{nth($sizes, $index)} { margin-bottom: #{nth($sizes, $index)}px !important; }
  .#{$prefix}-ml-#{nth($sizes, $index)} { margin-left: #{nth($sizes, $index)}px !important; }

  .#{$prefix}-p-#{nth($sizes, $index)} { padding: #{nth($sizes, $index)}px !important; }
  .#{$prefix}-pt-#{nth($sizes, $index)} { padding-top: #{nth($sizes, $index)}px !important; }
  .#{$prefix}-pr-#{nth($sizes, $index)} { padding-right: #{nth($sizes, $index)}px !important; }
  .#{$prefix}-pb-#{nth($sizes, $index)} { padding-bottom: #{nth($sizes, $index)}px !important; }
  .#{$prefix}-pl-#{nth($sizes, $index)} { padding-left: #{nth($sizes, $index)}px !important; }
}

// 快速使用

.#{$prefix}-m { margin: 20px !important; }
.#{$prefix}-mt { margin-top: 20px !important; }
.#{$prefix}-mr { margin-right: 20px !important; }
.#{$prefix}-mb { margin-bottom: 20px !important; }
.#{$prefix}-ml { margin-left: 20px !important; }

.#{$prefix}-p { padding: 20px !important; }
.#{$prefix}-pt { padding-top: 20px !important; }
.#{$prefix}-pr { padding-right: 20px !important; }
.#{$prefix}-pb { padding-bottom: 20px !important; }
.#{$prefix}-pl { padding-left: 20px !important; }

.#{$prefix}-mr-8 { margin-right: 8px !important; }


/**修复顶部**/
.#{$prefix}-fixed-notop{
  margin-top: -46px;
}

/**修复顶部，底部**/
.#{$prefix}-fixed-top{
  margin-top: 46px;
}

.#{$prefix}-fixed-bottom{
  margin-bottom: 55px;
}

.#{$prefix}-fixed-toolbar{
  margin-bottom: 75px;
}

//http://mobile.51cto.com/hot-559323.htm
@supports (bottom: constant(safe-area-inset-bottom)) { 
  .#{$prefix}-fixed-bottom{
    margin-bottom: calc(55px + constant(safe-area-inset-bottom));
  }
  .#{$prefix}-fixed-toolbar{
    margin-bottom: calc(65px + constant(safe-area-inset-bottom));
  }
}

.#{$prefix}-fixed-navbar{
  height: calc(100% - 46px); 
  overflow:scroll
}

.#{$prefix}-fixed-navbar-toolbar{
  height: calc(100% - 120px); 
  overflow:scroll
}


.#{$prefix}-cell-wrapper{
  padding: 10px 0; 
  background: $background-color;
}


.#{$prefix}-fullscreen-popup{
  width: 100%;
  height: 100%;
}

.#{$prefix}-swipe-button{
  height: 100%;
}
.#{$prefix}-swipe-button+.#{$prefix}-swipe-button {
  border-left: 1px solid #fff;
}


.#{$prefix}-error-messsage{
  width: 100%;
  height: 80%;
  max-height: 200px;
  overflow: auto;
}

.#{$prefix}-root-title {
  background-color:#f7f8fa;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
  border: 1px solid #ebeef5;
  border-radius: 4px;
  transition: .3s;
  white-space: nowrap;
  line-height: 24px;
  height: 3em;
  overflow: auto;
}

.#{$prefix}-root-content  {
  background-color:#fcfcfc;
}

.#{$prefix}-tag-span{
  margin-right: 5px;
  // display: inline-block;
  white-space: nowrap;
}

.#{$prefix}-active{
  color: $blue;
}

.#{$prefix}-is-link{
  color: $blue;
}

.#{$prefix}-picker__toolbar{
  background: $background-color
}

.#{$prefix}-popup-wrapper{
 height: 220px;
 overflow: auto;
}

.#{$prefix}-popup-inner{
  height: 265px;
  overflow: auto;
}

.#{$prefix}-nav-bar__close-icon{
  color: $gray-8 !important;
  font-size: 22px;
}

/**卡片布局 **/
.#{$prefix}-card{
  border-radius: 4px ;
  border: 1px solid #EBEEF5;
  background-color:#fff;
  overflow: hidden;
  color:#333;
  transition: 0.3s;

  .is-always-shadow {
    box-shadow:  0 2px 12px 0 rgba(0, 0, 0, 0.1) 
  }

  .is-hover-shadow {
    &:hover,
    &:focus {
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)
    }
  }

}



/**两翼留白 **/
.#{$prefix}-wingblank {
  margin-left: 8px;
  margin-right: 8px;
  .#{$prefix}-wingblank-sm {
    margin-left: 5px;
    margin-right: 5px;
  }
  .#{$prefix}-wingblank-md {
    margin-left: 8px;
    margin-right: 8px;
  }
  .#{$prefix}-wingblank-lg {
    margin-left: 15px;
    margin-right: 15px;
  }
}
/** 上下留白 */
.#{$prefix}-whitespace{
  .#{$prefix}-whitespace-xs {
    height: 3px;
  }
  .#{$prefix}-whitespace-sm {
    height: 6px;
  }
  .#{$prefix}-whitespace-md {
    height: 9px;
  }
  .#{$prefix}-whitespace-lg {
    height: 15px;
  }
  .#{$prefix}-whitespace-xl {
    height: 21px;
  }
}
/** 右侧留白 */
.#{$prefix}-offside{
  padding-right: 15px;
  margin-right: 15px;
}

/** 边框相关 */
.#{$prefix}-border-bm{
  border-bottom :solid 1px #E5E5E5;
}
.#{$prefix}-border-r{
  border-right :solid 1px #B2B2B2;
}
/** 圆角 */
.#{$prefix}-border-r-6{
  border-radius: 6px 6px 0 0;
}

/** 字体相关 */
.#{$prefix}-size-m{
  font-size: $fontsize-medium;
}
.#{$prefix}-size-l{
  font-size: $fontsize-large;
}
.#{$prefix}-size-l_xx{
  font-size: $fontsize-large-xx!important;
}

/** 公告页面相关 */
.#{$prefix}-notice-text{
  font-size: 14px;
  margin: 7px 0;
}

/** 弹窗相关-样式补充 */
.van-popup{
  border-radius: 6px 6px 0 0;
  .van-picker__toolbar{
    background: #FFFFFF;
    border-bottom :solid 1px #E5E5E5;
  }
  .van-picker__cancel,.van-picker__confirm{
    color: #3396FB;
    font-size: $fontsize-large;
  }
  .van-popup__close-icon{
    color:  #333333;
  }
}
.van-pull-refresh__track{
  .van-cell__title{
    flex-grow: 2;
  }
}


/** 颜色相关 */
.#{$prefix}-color-gary-5{
  color: $gray-5;
}
/** flex布局相关 */
.#{$prefix}-flex-c{
  display: flex;
  align-items: center;
}
/** 空白条 */
.#{$prefix}-blank-bar{
  height:8px;
  background: #f8f8f8;
}
/** 单选图标相关*/
.#{$prefix}-radio-icon{
  height: 20px;
  width: 20px;
  background: #3396FB;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  .#{$prefix}-radio-icon_inside{
    background: #fff;
    height: 8px;
    width: 8px;
    border-radius: 50%;
  }
}
/** 选择导航相关 */
.#{$prefix}-nav{
  background: #fff;
  border: 0;
  .#{$prefix}-nav_text{
    position: relative;
  }
  .#{$prefix}-nav_bar{
    width: 100%;
    height: 2px;
    background: #3396FB;
    position: absolute;
    bottom: -15px;
    left: 0;
  }
}

/** 步骤条图标相关 */
.#{$prefix}-active-icon_bg{
  background-color: #fff;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  .#{$prefix}-active-icon-inside-vague_bg{
    opacity: 0.3;
    height: 100%;
    width: 100%;
    border-radius: 50%;
    position: absolute;
  }
  .#{$prefix}-active-icon-inside_bg{
    height: 10px;
    width: 10px;
    border-radius: 50%;
  }
}
/** 旋转180度 */
.#{$prefix}-rotate{
  transform:rotate(180deg);
}

/** 重置按钮颜色 */
.van-button--primary{
  color: $white;
  background-color: $btn-primary;
  border: 1px solid $btn-primary;
}
.van-button--success{
  color: $white;
  background-color: $btn-success;
  border: 1px solid $btn-success;
}
.van-button--info{
  color: $white;
  background-color: $btn-primary;
  border: 1px solid $btn-primary;
}
.van-button--warning{
  color: $white;
  background-color: $btn-warning;
  border: 1px solid $btn-warning;
}
.van-button--danger{
  color: $white;
  background-color: $btn-danger;
  border: 1px solid $btn-danger;
}
.van-button--plain{
  background-color: $white;
  &.van-button--primary {
    color: $btn-primary;
  }
  &.van-button--success {
    color: $btn-success;
  }
  &.van-button--info {
    color: $btn-primary;
  }
  &.van-button--warning {
    color: $btn-warning;
  }
  &.van-button--danger {
    color: $btn-danger;
  }
}

/** 颜色相关 */
.#{$prefix}-gray-b2{
  color: $gray-b2;
}

/** 字体超出省略 */
.#{$prefix}-ellipsis{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 50px;
}
/** 消息弹窗 */
.#{$prefix}-dialog-desc{
  box-shadow:0px 0px  10px 5px #aaa;
  border-radius: 4px;
}
.#{$prefix}-dialog-icon{
  position: relative;
  top: 2px;
  color: #cacad3 ;
}
/** 关闭图标 */
.#{$prefix}-tag-close{
  position: absolute;
  right: -6px;
  top: -6px;
  color:  #74B7FC;
}