@charset "UTF-8";

// inline-block兼容IE6-IE7
@mixin inline-block {
  display: inline-block;
  @if $lte7 {
    *display: inline;*zoom:1;
  }
}
%inline-block{
  @include inline-block;
}


// block得有宽度margin左右为auto才能居中
@mixin center-block {
  margin-left: auto;
  margin-right: auto;
}
%center-block{
  @include center-block;
}

//float 兼容IE6-7的浮动
@mixin float($float:left) {
  float: $float;
  @if $lte7 {
    display: inline;
  }
}
%float{
  @include float;
}

// 闭合子元素的浮动
@mixin clearfix {
  @if $lte7 {
    *zoom: 1;
  }
  &:before,
  &:after {
    content: "";
    display: table;
  }
  &:after {
    clear: both;
  }
}
%clearfix{
  @include clearfix;
}

// 既隐藏于视觉也隐藏于屏幕浏览器
@mixin hidden {
  display: none !important;
  visibility: hidden;
}
%hidden{
  @include hidden;
}

// 只隐藏于视觉，屏幕浏览器可以阅读
@mixin visually-hidden {
  position: absolute;
  @if $lte7 {
    clip:rect(1px 1px 1px 1px);//ie6/7
  }
  clip:rect(1px, 1px, 1px, 1px);//standard
}
%visually-hidden{
  @include visually-hidden;
}


//ul默认样式
@mixin ul-has-style($style:disc){
  margin-left:25px;
  list-style:disc;
}
%ul-has-style{
  @include ul-has-style;
}

// 图片替换文字
// 高级浏览器直接2就可以
// 原生7,8不支持color的transparent，所以采用1;
// ie6用1会有一条细线，所以采用3
// 如果要兼容ie6，使用的时候请确定元素设置高度。
@mixin ir($height:99){
  font: 0/0 a; //1
  text-shadow: none;
  border:0 none;
  color: transparent; //2
  @if $lte7{ 
    _overflow:hidden; //3
    _font-size: 10px; //3
    _line-height: $height; //3
  }
}
%ir{
  @include ir;
}

// Text overflow
// 元素可以设置宽度才可应用省略号
%ellipsis-basic{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; 
}
@mixin ellipsis($width:100%) {
  @extend %ellipsis-basic;
  width:$width;
}

// Opacity
// lte8使用filter兼容
@mixin opacity($opacity:50) {
  opacity: $opacity / 100;
  @if $filter{
    filter: alpha(opacity=$opacity);
  }
}
%opacity{
  @include opacity;
}

// triangle
%triangle-basic{
  content:"";
  height: 0;
  width: 0;
  overflow:hidden;
}
@mixin triangle($direction, $size, $borderColor ) {
  @extend %triangle-basic;
  @if $direction == top {
    border-bottom:$size solid $borderColor;
    border-left:$size dashed transparent;
    border-right:$size dashed transparent;
  } 
  @else if $direction == right {
    border-left:$size solid $borderColor;
    border-top:$size dashed transparent;
    border-bottom:$size dashed transparent;
  } 
  @else if $direction == bottom {
    border-top:$size solid $borderColor;
    border-left:$size dashed transparent;
    border-right:$size dashed transparent;
  } 
  @else if $direction == left {
    border-right:$size solid $borderColor;
    border-top:$size dashed transparent;
    border-bottom:$size dashed transparent;
  }
}

//黑色背景色半透明
@mixin bgcolor-alpha($bgcolor: rgba(0,0,0,.5)){
  color:#fff;
  @if $filter{
    filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr='#{ie-hex-str($bgcolor)}', endColorstr='#{ie-hex-str($bgcolor)}');
  }@else{
    background-color: #333;
  }
  background-color:$bgcolor;
}
%bgcolor-alpha{
  @include bgcolor-alpha;
}

// disabled
// 禁用样式，加!important
@mixin disabled($bgColor:#e6e6e6,$textColor:#ababab){
  background-color: $bgColor !important;
  color: $textColor !important;
  cursor: not-allowed !important;
}
%disabled{
  @include disabled;
}

// 水平间隔线，适用于行列表
@mixin horizontal-line($border:1px dashed #e6e6e6, $padding:10px){
  border-bottom:$border;
  padding-top:$padding;
  padding-bottom:$padding;  
}
%horizontal-line{
  @include horizontal-line;
}

// rem
// 各种属性取rem值 兼容IE6-7 
@mixin rem($property, $px) {
  #{$property}: $px * $baseFontSize;
  #{$property}: #{$px}rem;
}
// 字体大小取rem值 兼容IE6-7 
@mixin rem-font-size($px) {
  font-size: $px * $baseFontSize;
  font-size: #{$px}rem;
}

//最小高度
@mixin min-height($height){
  min-height: $height;
  height: auto !important;
  @if $lte7{
    _height: $height;
  }
}

//最小宽度
@mixin min-width($width){
  min-width: $width;
  @if $lte7{
    _width: $width;
  }
}

// 图片放大镜
@mixin image-2x($url, $width, $height) {
  @media (min--moz-device-pixel-ratio: 1.3),
         (-o-min-device-pixel-ratio: 2.6/2),
         (-webkit-min-device-pixel-ratio: 1.3),
         (min-device-pixel-ratio: 1.3),
         (min-resolution: 1.3dppx) {
    background-image: url('#{$url}');
    background-size: $width $height;
  }
}

// 针对火狐浏览器打bug
// @include firefox{.test{padding-bottom:3px;}}
@mixin firefox {
  @-moz-document url-prefix(){
    @content;
  }
}


// %
// 只定义了%，所以只能通过@extend来调用
//-----------------------------------------------------

//为高级浏览器准备的box-sizing盒子模型，ie8+
%box-sizing-border{
  @include box-sizing;
}

// 普通all transition特效
%all-transition{
  @include transition;
}

// ie6/7 haslayout
%zoom{
  @if $lte7 {
    *zoom:1;
  }
}
//-----------------------------------------------------
//语义不明确的地方


// 垂直渐变，渐变背景是半透明到全透明，这样就可以通过设置背景色来表现渐变
//-------------------------
// 白色，由半透明到全透明
%gradient-linear-light {
  // IE9 SVG, needs conditional override of 'filter' to 'none' 
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjMiLz4KICAgIDxzdG9wIG9mZnNldD0iNDYlIiBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjAiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==);
  @include gradient-vertical(rgba(255,255,255,0.3),rgba(255,255,255,0));
  @if $filter{
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4dffffff', endColorstr='#00ffffff',GradientType=0 ); /* IE6-8 */
    :root &{
      @extend %reset-filter;
    }
  }
}
// 黑色，由全透明到半透明
%gradient-linear-dark {
  // IE9 SVG, needs conditional override of 'filter' to 'none'
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC4yNSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
  @include gradient-vertical(rgba(0,0,0,0), rgba(0,0,0,0.25));
  @if $filter{
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#40000000',GradientType=0 ); /* IE6-8 */
    :root &{
       @extend %reset-filter;
    }
  }
}
// Reset gradient filters for IE
%reset-filter{
  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}


//function

// px转em
@function pxToEm($px, $base: 16) {
  @return ($px / $base) * 1em;
}

// 为颜色添加白色，以百分比形式
@function tint($color, $percent){
  @return mix(white, $color, $percent);
}

// 为颜色添加黑色，以百分比形式
@function shade($color, $percent){
  @return mix(black, $color, $percent);
}

