@charset "utf-8";
@import "var";
/*********************** reset ***********************/
html, body, div, span, h1, h2, h3, h4, h5, h6, p, img, ul, li, figure, figcaption{
  margin: 0;
  padding: 0;
}

html {
  /*
  移动端如何定义字体font-family
@ --------------------------------------中文字体的英文名称
@ 宋体      SimSun
@ 黑体      SimHei
@ 微信雅黑   Microsoft Yahei
@ 微软正黑体 Microsoft JhengHei
@ 新宋体    NSimSun
@ 新细明体  MingLiU
@ 细明体    MingLiU
@ 标楷体    DFKai-SB
@ 仿宋     FangSong
@ 楷体     KaiTi
@ 仿宋_GB2312  FangSong_GB2312
@ 楷体_GB2312  KaiTi_GB2312
@
@ 说明：中文字体多数使用宋体、雅黑，英文用Helvetica
   */
  font-family: 'Microsoft YaHei', 'SimSun', 'Tahoma', 'Helvetica';
  font-size: 10px;

  background: #fff;
  height: 100%;
  min-height: 100%;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}


img {
  border: 0;
  vertical-align: middle;
}

ol, ul {
  list-style: none;
}

a {
  text-decoration: none;
  &:hover, &:focus {
    outline: none;
  }
}
h1, h2, h3, h4, h5, h6 {
  font-weight: normal;
  font-size: 100%;
}

button, input, textarea {
  margin: 0;
  font: inherit;
  color: inherit;
  outline: none;
}

* {
  box-sizing: border-box
}

:before, :after {
  box-sizing: border-box;
}

input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*********************** sass function ***********************/
$browser-default-font-size: 30px !default;
/* px to rem  */
@function parseInt ($n) {
  @return $n / ($n * 0 + 1);
}

@function pxToRem ($values) {
  $list: ();
  @each $value in $values {
    $val: parseInt($value);
    $list: append($list, ($val / parseInt($browser-default-font-size)) + rem);
  }

  @return $list;
}

@function pxToRemNoUnit ($values) {
  $list: ();
  @each $value in $values {
    $val: parseInt($value);
    $list: append($list, ($val / parseInt($browser-default-font-size)));
  }

  @return $list;
}


@mixin border-1px ($position, $color, $radius: 0rem) {
  position: relative;
  &:after{
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform-origin: 0 0;
    pointer-events: none; /* 无视所有事件的响应，因为其处于dom中的上层，不加这句代码会影响下层dom元素的事件 */
    @each $pos in $position {
      @if ($pos == all) {
        height: 100%;
        border: 1px solid $color;
        @if ($radius) {
          border-radius: $radius;
        }
      } @else {
        border-#{$pos}: 1px solid $color;
      }
    }


    @media screen and (-webkit-device-pixel-ratio: 1.5) {
      width: 150%;
      height: 150%;
      transform: scale(0.75);
    }
    @media screen and (-webkit-device-pixel-ratio: 2) {
      width: 200%;
      height: 200%;
      transform: scale(0.5);
    }
    @media only screen and (-webkit-device-pixel-ratio: 3) {
      width: 300%;
      height: 300%;
      transform: scale(0.3333);
    }
  }
}
/*********************** driver mobile UI style ***********************/
[v-cloak]{display: none !important;}
body{
  width: 100%;
  height: 100%;
  min-height: 100%;
}

/* background color */
.sv-bg-danger{background: $color-danger}
.sv-bg-success{background: $color-success}
.sv-bg-terrible{background: #999}
/* font color */
.sv-font-danger{color: $color-danger}
.sv-font-success{color: $color-success}
.sv-font-terrible{color: #999}