mixins.scss

/* -------------------------------------------------------------------------- */
/* Transition */
/* -------------------------------------------------------------------------- */
@mixin transition($value: all 200ms linear) {
  -webkit-transition: $value;
  -moz-transition   : $value;
  -ms-transition    : $value;
  -o-transition     : $value;
  transition        : $value;
}

/* -------------------------------------------------------------------------- */
/* Transform */
/* -------------------------------------------------------------------------- */
@mixin transform($value) {
  -webkit-transform: $value;
  -moz-transform   : $value;
  -ms-transform    : $value;
  -o-transform     : $value;
  transform        : $value;
}

/* -------------------------------------------------------------------------- */
/* Translate */
/* -------------------------------------------------------------------------- */
@mixin translateX($value) {
  -webkit-transform:translateX($value);
  -moz-transform:   translateX($value);
  -ms-transform:    translateX($value);
  -o-transform:     translateX($value);
  transform:        translateX($value);
}

@mixin translateY($value) {
  -webkit-transform:translateY($value);
  -moz-transform:   translateY($value);
  -ms-transform:    translateY($value);
  -o-transform:     translateY($value);
  transform:        translateY($value);
}

/* -------------------------------------------------------------------------- */
/* Box-Shadow */
/* -------------------------------------------------------------------------- */
@mixin box-shadow($value: 0 0 5px 0 #000) {
  -webkit-box-shadow: $value;
  -moz-box-shadow   : $value;
  -ms-box-shadow    : $value;
  -o-box-shadow     : $value;
  box-shadow        : $value;
}

/* -------------------------------------------------------------------------- */
/* Border Radius */
/* -------------------------------------------------------------------------- */
@mixin border-radius($value: 3px) {
  -webkit-border-radius: $value;
  -moz-border-radius   : $value;
  -ms-border-radius    : $value;
  -o-border-radius     : $value;
  border-radius        : $value;
}

/* -------------------------------------------------------------------------- */
/* Background Size */
/* -------------------------------------------------------------------------- */
@mixin bg-size($value: cover) {
  -webkit-background-size: $value;
  -moz-background-size   : $value;
  -ms-background-size    : $value;
  -o-background-size     : $value;
  background-size        : $value;
}