ivanzotov/constructor

@mixin gradient-vertical($startColor: #555, $endColor: #333) {
    background-color: mix($startColor, $endColor, 60%);
    background-image: -moz-linear-gradient(top, $startColor, $endColor); // FF 3.6+
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from($startColor), to($endColor)); // Safari 4+, Chrome 2+
    background-image: -webkit-linear-gradient(top, $startColor, $endColor); // Safari 5.1+, Chrome 10+
    background-image: -o-linear-gradient(top, $startColor, $endColor); // Opera 11.10
    background-image: linear-gradient(to bottom, $startColor, $endColor); // Standard, IE10
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($startColor)}', endColorstr='#{ie-hex-str($endColor)}', GradientType=0); // IE9 and down
}

@mixin gradient-horizontal($startColor: #555, $endColor: #333) {
  background-color: $endColor;
  background-image: -moz-linear-gradient(left, $startColor, $endColor); // FF 3.6+
  background-image: -webkit-gradient(linear, 0 0, 100% 0, from($startColor), to($endColor)); // Safari 4+, Chrome 2+
  background-image: -webkit-linear-gradient(left, $startColor, $endColor); // Safari 5.1+, Chrome 10+
  background-image: -o-linear-gradient(left, $startColor, $endColor); // Opera 11.10
  background-image: linear-gradient(to right, $startColor, $endColor); // Standard, IE10
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($startColor)}', endColorstr='#{ie-hex-str($endColor)}', GradientType=1); // IE9 and down
}

@mixin gradient-radial($innerColor: #555, $outerColor: #333)  {
    background-color: $outerColor;
    background-image: -webkit-gradient(radial, center center, 0, center center, 460, from($innerColor), to($outerColor));
    background-image: -webkit-radial-gradient(circle, $innerColor, $outerColor);
    background-image: -moz-radial-gradient(circle, $innerColor, $outerColor);
    background-image: -o-radial-gradient(circle, $innerColor, $outerColor);
    background-repeat: no-repeat;
}

@mixin box-shadow($shadow...) {
    -webkit-box-shadow: $shadow;
    -moz-box-shadow: $shadow;
    box-shadow: $shadow;
}

@mixin box-sizing($boxmodel) {
  -webkit-box-sizing: $boxmodel;
  -moz-box-sizing: $boxmodel;
  box-sizing: $boxmodel;
}

@mixin border-radius($radius) {
    -webkit-border-radius: $radius;
    -moz-border-radius: $radius;
    border-radius: $radius;
}

@mixin border-top-left-radius($radius) {
    -webkit-border-top-left-radius: $radius;
    -moz-border-radius-topleft: $radius;
    border-top-left-radius: $radius;
}
@mixin border-top-right-radius($radius) {
    -webkit-border-top-right-radius: $radius;
    -moz-border-radius-topright: $radius;
    border-top-right-radius: $radius;
}
@mixin border-bottom-right-radius($radius) {
    -webkit-border-bottom-right-radius: $radius;
    -moz-border-radius-bottomright: $radius;
    border-bottom-right-radius: $radius;
}
@mixin border-bottom-left-radius($radius) {
    -webkit-border-bottom-left-radius: $radius;
    -moz-border-radius-bottomleft: $radius;
    border-bottom-left-radius: $radius;
}

@mixin border-top-radius($radius) {
    @include border-top-right-radius($radius);
    @include border-top-left-radius($radius);
}
@mixin border-right-radius($radius) {
    @include border-top-right-radius($radius);
    @include border-bottom-right-radius($radius);
}
@mixin border-bottom-radius($radius) {
    @include border-bottom-right-radius($radius);
    @include border-bottom-left-radius($radius);
}
@mixin border-left-radius($radius) {
    @include border-top-left-radius($radius);
    @include border-bottom-left-radius($radius);
}

@mixin transition($transition) {
    -webkit-transition: $transition;
    -moz-transition: $transition;
    -o-transition: $transition;
    transition: $transition;
}

@mixin opacity($opacity) {
  opacity: $opacity / 100;
  filter: alpha(opacity=$opacity);
}

@mixin size($height, $width) {
  width: $width;
  height: $height;
}

@mixin square($size) {
  @include size($size, $size);
}


// Transformations
@mixin rotate($degrees) {
  -webkit-transform: rotate($degrees);
  -moz-transform: rotate($degrees);
  -ms-transform: rotate($degrees);
  -o-transform: rotate($degrees);
  transform: rotate($degrees);
}
@mixin scale($ratio) {
  -webkit-transform: scale($ratio);
  -moz-transform: scale($ratio);
  -ms-transform: scale($ratio);
  -o-transform: scale($ratio);
  transform: scale($ratio);
}
@mixin translate($x, $y) {
  -webkit-transform: translate($x, $y);
  -moz-transform: translate($x, $y);
  -ms-transform: translate($x, $y);
  -o-transform: translate($x, $y);
  transform: translate($x, $y);
}
@mixin skew($x, $y) {
  -webkit-transform: skew($x, $y);
  -moz-transform: skew($x, $y);
  -ms-transform: skewX($x) skewY($y); // See https://github.com/twitter/bootstrap/issues/4885
  -o-transform: skew($x, $y);
  transform: skew($x, $y);
  -webkit-backface-visibility: hidden; // See https://github.com/twitter/bootstrap/issues/5319
}
@mixin translate3d($x, $y, $z) {
  -webkit-transform: translate3d($x, $y, $z);
  -moz-transform: translate3d($x, $y, $z);
  -o-transform: translate3d($x, $y, $z);
  transform: translate3d($x, $y, $z);
}



@mixin display-inline() {
    position: relative;
    display: -moz-inline-stack;
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
    *display: inline;
    *zoom: 1;
}

@mixin display-block() {
    position: relative;
    display: block;
    overflow: hidden;
}

@mixin clearfix(){
  &:before,
  &:after {
    content: " ";
    display: table;
  }

  &:after {
    clear: both;
  }

  *zoom: 1;
}

@mixin center-block() {
  @include display-block;
  margin-left: auto;
  margin-right: auto;
}

@mixin background-asset($asset, $options...) {
  background: asset-data-url($asset) $options;
  *background: asset-url($asset) $options;
}

@mixin base($width: 1000px) {
  @include center-block;
  width: $width;
}