@charset "utf-8";

// == 字体样式
.number{ font-family:$font-family-number !important; }
.yahei{ font-family:$font-family-base !important; }
.songti{ font-family:$font-family-songti !important; }
.serif{ font-family:$font-family-serif !important; }
.monospace{ font-family:$font-family-monospace !important; }
em{ font-style: italic; }

// 字样
.bold{ font-weight: bold !important; }
.normal{ font-weight: normal !important; }
.underline{ text-decoration: underline !important; }
.justify{ text-align: justify !important; }

// 字号 eg:f12
@for $i from 12 through 38 {
  .f#{$i}{ font-size: 1px*$i !important; }
}

.f10{font-size: 10px;-webkit-transform:scale(0.8);transform:scale(0.8);}
.f11{font-size: 11px;-webkit-transform:scale(0.9);transform:scale(0.9);}

.t0{ @extend .f24;}
.t1{ @extend .f20;}
.t2{ @extend .f18;}
.t3{ @extend .f16;}
.t4{ @extend .f14;}
.t5{ @extend .f12;}
.t6{ @extend .f10;}

// 换行
.nowrap{
  white-space: nowrap;
}

// 对齐
.va-top{vertical-align: top;display: inline-block;}
.va-middle{vertical-align: middle;display: inline-block;}
.va-bottom{vertical-align: bottom;display: inline-block;}
.va-baseline{vertical-align: baseline;display: inline-block;}
.va-text-bottom{vertical-align: text-bottom;display: inline-block;}

.text-left{text-align: left !important;}
.text-right{text-align: right !important;}
.text-center{text-align: center !important;}

// 行间距 eg:lh-1.5
@for $i from 10 through 20 {
  .lh-#{$i*10}{line-height: $i/10 !important;}
}

// rem字体
@for $i from 1 through 10 {
  .rem-#{$i*10}{font-size: $i/10 + 0rem !important;}
}

// 颜色配置（包括字体颜色、背景颜色和边框颜色）
// -------------------------
@include color-style('transparent', $transparent);
@include color-style('white', $white);
@include color-style('dark', $dark);
@include color-style('gray', $gray);
@include color-style('gray-light', $gray-light);
@include color-style('gray-lighter', $gray-lighter);
@include color-style('gray-lightest', $gray-lightest);
@include color-style('gray-333', $gray-333);
@include color-style('gray-666', $gray-666);
@include color-style('gray-999', $gray-999);
@include color-style('gray-eee', $gray-eee);
@include color-style('disable', $disable);
@include color-style('primary', $primary);
@include color-style('secondary', $secondary);
@include color-style('red',$red);
@include color-style('green',$green);
@include color-style('pink',$pink);
@include color-style('yellow',$yellow);
@include color-style('blue',$blue);
@include color-style('purple',$purple);
@include color-style('body', $background-color);

// == 边框线样式和大小，带方向
@include border-style();
@include border-style('dark', $dark);
@include border-style('gray',$gray);
@include border-style('gray-lighter', $gray-lighter);
@include border-style('gray-lightest', $gray-lightest);
@include border-style('primary', $primary);
@include border-style('secondary', $secondary);
.bda{border: 1px solid $border-color !important;}
.bd-none{border: none !important;}
.bdt-none{border-top: none !important;}
.bdb-none{border-bottom: none !important;}
.bdl-none{border-left: none !important;}
.bdr-none{border-right: none !important;}

// == 背景配置
.bg-none{background-color:transparent !important;}

// == 圆角配置
.radius{@include border-radius($border-radius-base);}
.radius-0{@include border-radius(0px);}
.radius-50{@include border-radius(50%);}
.radius-big{@include border-radius($border-radius-base*2);}
.radius-small{@include border-radius($border-radius-base/2);}
.radius-left{@include border-left-radius($border-radius-base);}
.radius-right{@include border-right-radius($border-radius-base);}
.radius-top{@include border-top-radius($border-radius-base);}
.radius-bottom{@include border-bottom-radius($border-radius-base);}

// == 链接样式
a {
  color: $dark;
  text-decoration: none;
  cursor: pointer;
  &.hover-default:hover,&.hover-default:focus,&.hover-default:visited{
    text-decoration: none;
    color: $dark;
  }
  &.hover-line:hover,&.hover-line:focus,&.hover-line:visited{
    text-decoration: underline;
  }
  &.hover-primary:hover,&.hover-primary:focus,&.hover-primary:visited{
    color: $primary;
  }
  &.hover-bg-primary:hover,&.hover-bg-primary:focus,&.hover-bg-primary:visited{
    background-color: $primary;
  }
  &.hover-all:hover,&.hover-all:focus,&.hover-all:visited{
    text-decoration: underline;
    color: $primary;
  }
}

// == 内间距、外间距样式
.mh-auto {margin:0 auto;}

// 间距和基准间距,.pl-0和pl等
@each $short,$full in $pos-full {
  @if $short == 'a'{
    .p#{$short}-0{padding:0px !important;}
    .m#{$short}-0{margin:0px !important;}

    .p#{$short}{padding:$padding-base !important;}
    .m#{$short}{margin:$padding-base !important;}
  }@else if $short=='h'{
    .p#{$short}-0,.p#{$short}-none {
      padding-left: 0px !important;
      padding-right: 0px !important;
    }
    .m#{$short}-0,.m#{$short}-none {
      margin-left: 0px !important;
      margin-right: 0px !important;
    }

    .p#{$short} {
      padding-left: $padding-base !important;
      padding-right: $padding-base !important;
    }
    .m#{$short} {
      margin-left: $padding-base !important;
      margin-right: $padding-base !important;
    }
  }@else if $short=='v'{
    .p#{$short}-0,.p#{$short}-none {
      padding-top: 0px !important;
      padding-bottom: 0px !important;
    }
    .m#{$short}-0,.m#{$short}-none {
      margin-top: 0px !important;
      margin-bottom: 0px !important;
    }

    .p#{$short} {
      padding-top: $padding-base !important;
      padding-bottom: $padding-base !important;
    }
    .m#{$short} {
      margin-top: $padding-base !important;
      margin-bottom: $padding-base !important;
    }
  }@else{
    .p#{$short}-0,.p#{$short}-none{padding-#{$full}:0px !important;}
    .m#{$short}-0,.m#{$short}-none{margin-#{$full}:0px !important;}

    .p#{$short}{padding-#{$full}:$padding-base !important;}
    .m#{$short}{margin-#{$full}:$padding-base !important;}
  }
}

// 以基准间距递增的间距,.pl-2 .ml-2等
@for $i from 2 through 6{
  @each $short,$full in $pos-full{
      @if $short=='a'{
        .p#{$short}-#{$i}{padding:$padding-base*$i !important;}
        .m#{$short}-#{$i}{margin:$padding-base*$i !important;}
      }@else if $short=='h'{
        .p#{$short}-#{$i} {
          padding-left: $padding-base*$i !important;
          padding-right: $padding-base*$i !important;
        }
        .m#{$short}-#{$i} {
          margin-left: $padding-base*$i !important;
          margin-right: $padding-base*$i !important;
        }
      }@else if $short=='v'{
        .p#{$short}-#{$i} {
          padding-top: $padding-base*$i !important;
          padding-bottom: $padding-base*$i !important;
        }
        .m#{$short}-#{$i} {
          margin-top: $padding-base*$i !important;
          margin-bottom: $padding-base*$i !important;
        }
      }@else{
        .p#{$short}-#{$i}{padding-#{$full}:$padding-base*$i !important;}
        .m#{$short}-#{$i}{margin-#{$full}:$padding-base*$i !important;}
      }
  }
}

// 像素级别间距样式，pl-px-3,ml-px-3等
@for $i from 1 through 19{
  @each $short,$full in $pos-full{
    @if $short=='a'{  //四周间距
      .p#{$short}-px-#{$i}{padding:1px*$i !important;}
      .m#{$short}-px-#{$i}{margin:1px*$i !important;}

      @if $i>10{
        .p#{$short}-px-#{$i*2}{padding:1px*$i*2 !important;}
        .m#{$short}-px-#{$i*2}{ margin:1px*$i*2 !important;}
      }

      @if $i>=5{
        .p#{$short}-px-#{$i*5}{padding:1px*$i*5 !important;}
        .m#{$short}-px-#{$i*5}{margin:1px*$i*5 !important;}
      }

    }@else if $short=='h'{    //水平间距
      .p#{$short}-px-#{$i}{
        padding-left: 1px*$i !important;
        padding-right: 1px*$i !important;
      }
      .m#{$short}-px-#{$i} {
        margin-left: 1px*$i !important;
        margin-right: 1px*$i !important;
      }

      @if $i>10{
        .p#{$short}-px-#{$i*2} {
          padding-left: 1px*$i*2 !important;
          padding-right: 1px*$i*2 !important;
        }
        .m#{$short}-px-#{$i*2} {
          margin-left: 1px*$i*2 !important;
          margin-right: 1px*$i*2 !important;
        }
      }

      @if $i>=5{
        .p#{$short}-px-#{$i*5} {
          padding-left: 1px*$i*5 !important;
          padding-right: 1px*$i*5 !important;
        }
        .m#{$short}-px-#{$i*5} {
          margin-left: 1px*$i*5 !important;
          margin-right: 1px*$i*5 !important;
        }
      }
    }@else if $short=='v'{  //垂直间距
      .p#{$short}-px-#{$i}{
        padding-top: 1px*$i !important;
        padding-bottom: 1px*$i !important;
      }
      .m#{$short}-px-#{$i} {
        margin-top: 1px*$i !important;
        margin-bottom: 1px*$i !important;
      }

      @if $i>10{
        .p#{$short}-px-#{$i*2} {
          padding-top: 1px*$i*2 !important;
          padding-bottom: 1px*$i*2 !important;
        }
        .m#{$short}-px-#{$i*2} {
          margin-top: 1px*$i*2 !important;
          margin-bottom: 1px*$i*2 !important;
        }
      }

      @if $i>=5{
        .p#{$short}-px-#{$i*5} {
          padding-top: 1px*$i*5 !important;
          padding-bottom: 1px*$i*5 !important;
        }
        .m#{$short}-px-#{$i*5} {
          margin-top: 1px*$i*5 !important;
          margin-bottom: 1px*$i*5 !important;
        }
      }
    }@else{   //单边间距及负间距
      .p#{$short}-px-#{$i}{padding-#{$full}:1px*$i !important;}
      .m#{$short}-px-#{$i} {margin-#{$full}:1px*$i !important;}
      .m#{$short}-px--#{$i}{margin-#{$full}:-1px*$i !important;} //负间距

      @if $i>10{
        .p#{$short}-px-#{$i*2}{padding-#{$full}:1px*$i*2 !important;}
        .m#{$short}-px-#{$i*2}{margin-#{$full}:1px*$i*2 !important;}
        .m#{$short}-px--#{$i*2}{margin-#{$full}:-1px*$i*2 !important;}
      }

      @if $i>=5{
        .p#{$short}-px-#{$i*5}{padding-#{$full}:1px*$i*5 !important;}
        .m#{$short}-px-#{$i*5}{margin-#{$full}:1px*$i*5 !important;}
        .m#{$short}-px--#{$i*5}{margin-#{$full}:-1px*$i*5 !important;}
      }
    }

  }
}

// == 绝对定位距离
@for $i from 0 through 100{
  @if $i<=60{
  .left-#{$i}{left:1%*$i !important;}
  .right-#{$i}{right:1%*$i !important;}
  .top-#{$i}{top:1%*$i !important;}
  .bottom-#{$i}{bottom:1%*$i !important;}
  }

  @if $i<20 or ($i>=20 and $i<40 and $i%2==0) or ($i>=40 and $i%5==0){
    .left-px-#{$i}{left:1px*$i !important;}
    .right-px-#{$i}{right:1px*$i !important;}
    .top-px-#{$i}{top:1px*$i !important;}
    .bottom-px-#{$i}{bottom:1px*$i !important;}
  }
}

.top-px-200{
  top:200px !important;
}
.top-px-48{
  top:48px !important;
}

// == z-index，从-1到10
@for $i from -1 through 10{
  .z-index-#{$i}{z-index:$i !important;}
}

// == 透明度，从0到1
@for $i from 0 through 10{
  .opacity-#{$i}{
    opacity:$i/10;
  }
}

// == 溢出显示
.ellipsis{
  overflow:hidden;
  text-overflow:ellipsis;
  -webkit-text-overflow: ellipsis;
  white-space:nowrap;
}

.ellipsis-line2{
  overflow:hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  // ionic下必须添加至元素，直接用autoprefixer则ios8存在兼容问题
  -webkit-box-orient: vertical;
}

.ellipsis-line3{
  overflow:hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}