@import "color";
@import "para";

/* 媒体选择器 */

@mixin media($res-min: null, $res-max: null) {
  @if (($res-min==null) and ($res-max==null)) {
    @media (max-width: 798px) {
      @content;
    }
  } @else if($res-min==null) {
    @media (max-width: $res-max) {
      @content;
    }
  } @else if($res-max==null) {
    @media (min-width: $res-min) {
      @content;
    }
  } @else {
    @media (min-width: $res-min) and (max-width: $res-max) {
      @content;
    }
  }
}

/* 清楚浮动 */
%clearfix {
  &:before,
  &:after {
    content: "";
    display: block;
    clear: both;
  }
}
@mixin clearfix {
  @extend %clearfix;
}

/* flexbox */
%flexbox {
  display: table; //ie9
  vertical-align: top; //ie9对齐方式
  display: -moz-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}
@mixin flexbox($dir: null, $wrap: null) {
  @extend %flexbox;
  @if $dir {
    flex-direction: $dir;
  }
  @if $wrap {
    flex-wrap: $wrap;
  }
}

/* 栅格化 */

@mixin grid-layout($class: null, $count: $gutter-count) {
  @for $i from 1 through $count {
    #{$class}-#{$i} {
      width: percentage(($i / $count));
    }
  }
}
/* 栅格空隙  */
@mixin gutter($gutter: $gutter) {
  margin-left: floor(($gutter / -2));
  margin-right: ceil(($gutter / -2));
  [class*="lg-col-"] {
    padding-left: floor(($gutter / 2));
    padding-right: ceil(($gutter / 2));
  }
}
/* 阴影 */
@mixin box-shadow($shadows...) {
  @if (length($shadows) >= 1) {
    box-shadow: $shadows;
  } @else {
    box-shadow: $shadow;
  }
}
/* 圆角 */
@mixin border-radius($radiusz...) {
  @if (length($radiusz) >=1) {
    border-radius: $radiusz;
  } @else {
    border-radius: $radius;
  }
}
/* // 强制不换行 */
%nowrap {
  white-space: nowrap;
}
// 强制换行
%break {
  word-break: break-all;
  word-wrap: break-word;
}
@mixin break($width: 100%) {
  @extend %break;
  width: $width;
}
// 省略号
%ellipsis {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
%orient {
  display: -webkit-box;
  -webkit-box-orient: vertical; //jdf屏蔽掉了
  text-overflow: ellipsis;
  overflow: hidden;
}
@mixin e($num: null) {
  @if $num {
    @extend %orient;
    -webkit-line-clamp: $num;
  } @else {
    @extend %ellipsis;
  }
}
/* 以下是否有必要 */
/* 块级元素/容器 水平居中 */
@mixin block-center($b: true) {
  @if $b {
    @extend %block-center;
  } @else {
    margin-left: auto;
    margin-right: auto;
  }
}
%block-center {
  @include block-center(false);
}
/* 垂直居中 */
@mixin v($width: null, $height: null) {
  position: absolute;
  top: 50%;
  left: 50%;
  @if $width and $height {
    width: $width;
    height: $height;
    margin-top: -($height / 2);
    margin-left: -($width / 2);
  } @else if $width {
    width: $width;
    margin-left: -($width / 2);
    transform: translateX(-50%);
  } @else if $height {
    height: $height;
    margin-top: -(height / 2);
    transform: translateY(-50%);
  } @else {
    transform: translate(-50%, -50%);
  }
}
/* 是否可以选择文本 */
@mixin selectxt($e: none) {
  user-select: $e;
}

/* 可循环背景图 */
@mixin icon-loop($classname: null, $position: 0, $form: 1, $end: 0, $col: 1) {
  @if ($form <= 0) {
    $form: 1;
  }
  @while $form <= $end {
    #{$classname}#{$form} {
      background-position: #{$position *
        (($form - 1) % $col) *
        -1}px
        #{$position *
        (ceil($form / $col) - 1) *
        -1}px;
    }
    $form: $form + 1;
  }
}

/*通过透明度得出新的颜色hex */
/* @function hexa($color, $alpha){
    @if (unitless($alpha)){
        $alpha : percentage($alpha)
    }
    $al : 100% - $alpha;
    @return lighten($color, $al)
} */
/* 滚动条 */
@mixin scroll($box: null, $width: 4px, $color: $c12) {
  //滚动条整体部分
  &::-webkit-scrollbar {
    width: $width;
    height: $width;
  }
  //滚动条里面的小方块，能向上向下移动（或向左向右移动）
  &::-webkit-scrollbar-thumb {
    @include border-radius($width);
    background-color: rgba($color, 0.45);
  }

  //滚动条的轨道（里面装有Thumb）
  //::-webkit-scrollbar-track{}
  //滚动条的轨道的两端按钮，由于通过点击微调小方块的位置。
  //::-webkit-scrollbar-button{}
  //内层轨道，滚动条中间部分
  // ::-webkit-scrollbar-track-piece{}
  //边角，即垂直滚动条和水平滚动条相交的地方
  //::-webkit-scrollbar-corner{}
  //两个滚动条的交汇处上用于拖动调整元素大小的小控件
  //::-webkit-resizer{}
}

/* 栅格化 */

@mixin grid-layout($class: null, $count: $gutter-count) {
  @for $i from 1 through $count {
    #{$class}-#{$i} {
      width: percentage(($i / $count));
    }
  }
}
$attrlist: (
  offset: margin-left,
  pull: right,
  push: left,
);
@mixin grid-layout2019($size: null, $class: ".lg-col", $count: $gutter-count) {
  @each $unit, $attr in $attrlist {
    @for $i from 1 through $count {
      $expression: percentage(($i / $count));
      @if ($size == null) {
        #{$class}-#{$i} {
          width: $expression;
        }
        #{$class}-#{$unit}-#{$i} {
          #{$attr}: $expression;
        }
      } @else {
        #{$class}-#{$size}-#{$i} {
          width: $expression;
        }
        #{$class}-#{$unit}-#{$size}-#{$i} {
          #{$attr}: $expression;
        }
      }
    }
  }
}
/* 栅格空隙  */
@mixin gutter($gutter: $gutter) {
  margin-left: floor(($gutter / -2));
  margin-right: ceil(($gutter / -2));
  [class*="lg-col-"] {
    padding-left: floor(($gutter / 2));
    padding-right: ceil(($gutter / 2));
  }
}