ratchet/lib/sass/mixins.scss

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


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

// Box orient
@mixin box-orient($orient) {
  -webkit-box-orient: $orient;
          box-orient: $orient;
}

//Box flex
@mixin box-flex($flex) {
  -webkit-box-flex: $flex;
          box-flex: $flex;
}

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


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