//fixed size
$scale: 1;
$unit:  1px; 
@function size($n) {  
  @return $n * $scale * $unit;  
}

$baseFontSize :75;
@function pxToRem($px){
  @return $px / $baseFontSize *1rem;
};

//
// Mixins
// --------------------------------------------------

// General
// --------------------------------------------------

// Utilities
// -------------------------

// Clearfix
// Source: http://nicolasgallagher.com/micro-clearfix-hack/
//
// For modern browsers
// 1. The space content is one way to avoid an Opera bug when the
//    contenteditable attribute is included anywhere else in the document.
//    Otherwise it causes space to appear at the top and bottom of elements
//    that are clearfixed.
// 2. The use of `table` rather than `block` is only necessary if using
//    `:before` to contain the top-margins of child elements.
@mixin clearfix() {
  &:before,
  &:after {
    display: table; // 2
    content: " "; // 1
  }
  &:after {
    clear: both;
  }
}

//Border radius
@mixin border-radius($radius){
    -webkit-border-radius: $radius; 
    border-radius: $radius;
}
// top 细线
@mixin borderTop($color){
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: $color;
  content: '';
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;

}
//bottom 细线
@mixin borderBottom($color){
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: $color;
  content: '';
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;

}
// Box shadow
@mixin box-shadow($shadow...) {
  -webkit-box-shadow: $shadow;
          box-shadow: $shadow;
}
//Vertical Center
// --------------------------------------------------
@mixin vertical-center($height){
    height: $height;
    line-height: $height;
}
// Transform
@mixin transform-style($style){
    -webkit-transform-style:$style;
    transform-style:$style;
}
// Gradients
@mixin linear-gradient($direction,$color1,$color2){
    background: -webkit-linear-gradient($direction,$color1,$color2); 
    background: linear-gradient($direction,$color1,$color2);
}

@mixin directional-gradient($color-from, $color-to, $deg: 45deg) {
  background-color: $color-from; // Old browsers
  background-image: -webkit-gradient(linear, left bottom, right top, color-stop(0%,$color-from), color-stop(100%,$color-to)); // Chrome, Safari4+
  background-image: -webkit-linear-gradient(45deg, $color-from 0%, $color-to 100%);           // Chrome10+, Safari5.1+
  background-image:         linear-gradient(45deg, $color-from 0%, $color-to 100%);     // W3C
}


// Transforms
// --------------------------------------------------
@mixin transform($transform...) {
  -webkit-transform: $transform;
          transform: $transform;
}


// Transitions
// --------------------------------------------------
@mixin transition($transition...) {
  -webkit-transition: $transition;
          transition: $transition;
}
@mixin transition-property($property...) {
  -webkit-transition-property: $property;
          transition-property: $property;
}
@mixin transition-duration($duration...) {
  -webkit-transition-duration: $duration;
          transition-duration: $duration;
}
@mixin transition-timing-function($function...) {
  -webkit-transition-timing-function: $function;
          transition-timing-function: $function;
}


// Animations
// --------------------------------------------------
@mixin animation-name($name) {
  -webkit-animation-name: $name;
          animation-name: $name;
}
@mixin animation-duration($duration) {
  -webkit-animation-duration: $duration;
          animation-duration: $duration;
}
@mixin animation-direction($direction) {
  -webkit-animation-direction: $direction;
          animation-direction: $direction;
}


// Misc
// --------------------------------------------------
@mixin hairline($type, $color, $offset) {
  @if $type == single {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#{$color}' x='0' y='0' width='100%' height='0.5'/></svg>");
    background-position: $offset 100%;

  } @else if $type == double {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#{$color}' x='0' y='0' width='100%' height='0.5'/></svg>"),
                      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#{$color}' x='0' y='0' width='100%' height='0.5'/></svg>");
    background-position: $offset 100%, $offset 0;
  }
  background-repeat: no-repeat;
}
.fleft{
  float: left;
}
.fright{
  float: right;
}