/*
* @Author: zhongjiahao
* @Date:   2016-08-03 15:31:16
* @Last Modified by:   zhongjiahao
* @Last Modified time: 2016-10-18 15:54:22
*/

@function strip-unit($num) {
  @return $num / ($num * 0 + 1);
}

@mixin rem($property, $values...) {
  $max: length($values);
  $pxValues: '';
  $remValues: '';
  @for $i from 1 through $max {
    $value: strip-unit(nth($values, $i));
    $pxValues: #{$pxValues + $value}px;
    @if $i < $max {
      $pxValues: #{$pxValues + " "};
    }
  }
  @for $i from 1 through $max {
    $value: strip-unit(nth($values, $i));
    $remValues: #{$remValues + $value/16}rem;
    @if $i < $max {
      $remValues: #{$remValues + " "};
    }
  }
  #{$property}: $pxValues;
}


/*
  font-size: 34px;
*/

@mixin font-h1 {
  @include rem(font-size, 34);
  @include rem(line-height, 60);
  font-family: $font-family-h;
}


/*
  font-size: 24px;
*/

@mixin font-h2 {
  @include rem(font-size, 24);
  @include rem(line-height, 42);
  font-family: $font-family-h;
}


/*
  font-size: 20px;
*/

@mixin font-h3 {
  @include rem(font-size, 20);
  @include rem(line-height, 36);
  font-family: $font-family-h;
}


/*
  font-size: 16px;
*/

@mixin font-h4 {
  @include rem(font-size, 16);
  @include rem(line-height, 30);
  font-family: $font-family-h;
}


/*
  font-size: 14px;
*/

@mixin font-h5 {
  @include rem(font-size, 12);
  @include rem(line-height, 20);
  font-family: $font-family-h;
}


/*
  font-size: 14px;
*/

@mixin font-a1 {
  @include rem(font-size, 14);
  @include rem(line-height, 24);
  font-family: $font-family-a;
}


/*
  font-size: 12px;
*/

@mixin font-a2 {
  @include rem(font-size, 12);
  @include rem(line-height, 28);
  font-family: $font-family-h;
}

/*
  clearfix
 */

@mixin f-cf {
  zoom: 1;
  &:before,
  &:after {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
    visibility: hidden;
    font-size: 0;
    height: 0;
  }
}


/*
  text overflow
 */

@mixin f-to {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@mixin f-hover {
  &:hover {
    @content
  }
}

@mixin opacity($val) {
  filter: Alpha(opacity=($val * 100));
  -webkit-opacity: $val;
  -moz-opacity: $val;
  -o-opacity: $val;
  opacity: $val;
}

/*
* @Author: zhongjiahao
* @Date:   2016-09-13 10:44:22
* @Last Modified by:   zhongjiahao
* @Last Modified time: 2016-11-08 10:28:06
*/

$ease: cubic-bezier(.25, .1, .25, 1);
$spring: cubic-bezier(.66, 1.65, .23, .87);
$spring2: cubic-bezier(.44, 1.53, .32, .92);
$linear: linear;
$font-family-h: 'Helvetica Neue',
Tahoma,
'PingFang SC',
'Hiragino Sans GB',
'Microsoft YaHei',
STHeitiSC,
sans-serif;
$font-family-a: 'Helvetica Neue',
Tahoma,
'PingFang SC',
'Hiragino Sans GB',
SimSun,
STHeitiSC,
sans-serif;

/*
  主色
*/

$c1: #004170;
$c2: #005999;
$c3: #1687d9;
$c3hover: #147AC4;
$c4: #96d0fa;

/*
  中性色
*/

$m1: #021726;
$m2: #3D5566;
$m3: #BCC8D1;
$m4: #e4ebf0;
$m4hover: #CED4D9;
$m5: #f5f8fa;
$m6: #000;
$m7: #fff;
$m6-10: rgba(0, 0, 0, 0.1);
$m6-30: rgba(0, 0, 0, 0.3);
$m6-50: rgba(0, 0, 0, 0.5);

/*
  辅助色
*/

$assist1: #ed5858;
$assist2: #f28d49;
$assist3: #f5d540;
$assist4: #38ba72;
$assist4hover: #33A867;
$assist5: #55c6c6;
$assist6: #41b0d9;
$assist7: #5b99ee;

/*
  系统提示色
*/

$error: #cc2929;
$warning: #e4a600;
$info: #0095ff;
$success: #36b336;

/*
  z-index
 */

$zIndex-1: 100;
$zIndex-2: 200;
$zIndex-3: 300;
$zIndex-4: 400;
$zIndex-5: 500;
$zIndex-6: 600;
$zIndex-7: 700;
$zIndex-8: 800;
$zIndex-9: 900;
$zIndex-10: 1000;
$zIndex-infinity:999999999;
$zIndex-infinitesimal:-999999999;

/*
* @Author: zhongjiahao
* @Date:   2016-09-06 16:07:29
* @Last Modified by:   zhongjiahao
* @Last Modified time: 2016-12-06 15:32:45
*/

.u-input {
  flex: 1 1 auto;
  height: 28px;
  border-radius: 5px;
  @include rem(padding, 0, 5, 0, 5);
  outline: transparent;
  @include font-h5();
  color: $m1;
  &::placeholder {
    color: $m3;
    opacity: 1;
  }
  &:disabled {
    cursor: not-allowed;
  }
}

[type="text"]::-ms-clear {
  display: none;
}

::-webkit-input-placeholder {
  /* WebKit browsers */
  color: $m3;
  @include font-h5();
}

:-moz-placeholder {
  /* Mozilla Firefox 4 to 18 */
  color: $m3;
  @include font-h5();
}

::-moz-placeholder {
  /* Mozilla Firefox 19+ */
  color: $m3;
  @include font-h5();
}

:-ms-input-placeholder {
  /* Internet Explorer 10+ */
  color: $m3;
  @include font-h5();
}


.u-icon {
  display: inline-block;
  &[class*="cus-bitian"] {
    width: 5px;
    height: 5px;
    vertical-align: middle;
  }
  &[class*="pc-sys-close"],
  &[class*="pc-sys-guanbi"] {
    width: 14px;
    height: 14px;
  }
  &[class*="pc-sys-dropdownmin"] {
    width: 6px;
    height: 5px;
  }
  &[class*="pc-sys-arrowdown"] {
    width: 11px;
    height: 6px;
  }
  &.sys-icon-close {
    cursor: pointer;
    &:before {
      color: #acb7bf;
    }
    &:hover {
      &:before {
        color: #cc2929;
      }
    }
  }
}

$module-name: '.form-item';
.form-item {
  position: relative;
  @include rem(margin-bottom, 15);
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  &__title {
    position: relative;
    max-width: 100%;
    vertical-align: middle;
    @include font-a2();
    color: $m2;
    @include f-to();
    #{$module-name}__text {
      font-size: inherit;
      line-height: inherit;
      font-family: $font-family-h;
      @include rem(text-indent, 5);
      max-width: inherit;
      @include f-to();
      vertical-align: middle;
    }
  }
  &__text {
    display: inline-block;
    @include font-h5();
  }
  &__control {
    border:1px solid #e4ebf0;
    border-radius:5px;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    &:hover{
      border-color: #96d0fa;
    }
    @include rem(min-height, 25);
    &#{$module-name}__control_is-active {
      background:#ffffff;
      border:1px solid #1687d9;
      box-shadow:0 0 2px 1px #96d0fa;
      #{$module-name}__bottom-line {
        left: 0;
        width: 100%;
        background-color: $c3;
        transition: left $spring .35s, width $spring .35s;
      }
    }
    &#{$module-name}__control_has-info {
      #{$module-name}__explain {
        color: $c3;
      }
      #{$module-name}__bottom-line {
        @include rem(bottom, 20);
      }
    }
    &#{$module-name}__control_has-error {
      border:none;
      box-shadow: none;
      .u-input{
        background:rgba(204,41,41,0.05);
        border:1px solid #cc2929;
        border-radius:5px;
      }
      [type="text"]:focus {
        & + #{$module-name}__bottom-line {
          background-color: $error;
        }
      }
      .u-textarea__element:focus {
        & + #{$module-name}__bottom-line {
          background-color: $error;
        }
      }
      #{$module-name}__bottom-line {
        background-color: $error;
      }
      #{$module-name}__explain {
        color: $error;
      }
    }
    #{$module-name}__bottom-line {
      position: absolute;
      left: 50%;
      bottom: 0;
      width: 0;
      height: 2px;
    }
  }
  &__explain {
    display: block;
    width: 100%;
    @include rem(min-height, 20);
    @include font-a2();
    @include rem(margin-left, 5);
  }
  &__label {
    display: inline-block;
    @include rem(padding-top, 15);
    @include rem(padding-bottom, 10);
    @include font-h5();
  }
  &__right-icon {
    display: flex;
    align-items: center;
    position: absolute;
    @include rem(top, 7);
    @include rem(right, 5);
    i + i {
      @include rem(margin-left, 5);
    }
    .pc-sys-arrowdown-nomal-svg {
      @include rem(margin-top, 4);
    }
    .sys-icon-close + .pc-sys-arrowdown-nomal-svg {
      @include rem(margin-top, 0);
    }
    .pc-sys-bukebianji-nomal-svg {
      width: 11px;
      height: 13px;
    }
  }
  &__multi-list {
    width: 100%;
    @include rem(padding-left, 5);
    cursor: text;
    #{$module-name}__multi-item {
      @include rem(height, 26);
      @include rem(padding-left, 0);
      @include rem(padding-right, 10);
      @include rem(margin-right, 5);
      @include rem(border-radius, 2);
      line-height: 28px;
      cursor: default;
      max-width: 100%;
      overflow: hidden;
      // vertical-align: bottom;
      #{$module-name}__text {
        max-width: 100%;
        @include rem(margin-right, 4);
        color: $m1;
        vertical-align: middle;
        @include f-to();
        line-height: 26px;
      }
      .sys-icon-close,.sys-icon-cus-renyuan,.sys-icon-cus-chengshi {
        @include rem(font-size, 14);
        vertical-align: middle;
      }
      .sys-icon-cus-renyuan {
        color: $c3;
      }
    }
  }
  &__editable {
    padding-right: 20px;
  }
  &__help {
    .sys-icon-cus-bangzhu {
      font-size: 12px;
      margin-left: 5px;
      vertical-align: middle;
      color: $c2;
    }
  }
}

@mixin avatar-size($size) {
  width: $size;
  height: $size;
  line-height: $size;
  border-radius: 50%;
  @if $size == 30px {
    @include rem(font-size, 12);
  }
}

.avatar {
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  @include f-to();
  &.avatar_size-30 {
    color: $m7;
    @include avatar-size(30px);
  }
}

$name: 'list';
.list {
  &_horizontal {
    display: flex;
  }
  &_wrap {
    flex-wrap: wrap;
  }
}