saffron 0.2.0

data/saffron/exits/_explode.scss

@@ -0,0 +1,14 @@
+@include keyframes(explode) {
+  0% {
+    opacity: 1;
+    @include transform(translateZ(0));
+  }
+  100% {
+    opacity: 0;
+    @include transform(scale(5));
+  }
+}
+
+@mixin explode($duration: 0.5s, $delay: 0s, $fill-mode: forwards) {
+  @include animation(explode $duration $delay $fill-mode);
+}

data/saffron/exits/_fade-out-down.scss

@@ -0,0 +1,14 @@
+@include keyframes(fadeOutDown) {
+  0% {
+    opacity: 1;
+    @include transform(translateZ(0));
+  }
+  100% {
+    opacity: 0;
+    @include transform(translateY($translateY-distance));
+  }
+}
+
+@mixin fadeOutDown($duration: 1s, $delay: 0s, $fill-mode: forwards) {
+  @include animation(fadeOutDown $duration $delay $fill-mode);
+}

data/saffron/exits/_fade-out-left.scss

@@ -0,0 +1,13 @@
+@include keyframes(fadeOutLeft) {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+    @include transform(translateX($translateX-distance * -1) translateZ(0));
+  }
+}
+
+@mixin fadeOutLeft($duration: 1s, $delay: 0s, $fill-mode: forwards) {
+  @include animation(fadeOutLeft $duration $delay $fill-mode);
+}

data/saffron/exits/_fade-out-right.scss

@@ -0,0 +1,13 @@
+@include keyframes(fadeOutRight) {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+    @include transform(translateX($translateX-distance) translateZ(0));
+  }
+}
+
+@mixin fadeOutRight($duration: 1s, $delay: 0s, $fill-mode: forwards) {
+  @include animation(fadeOutRight $duration $delay $fill-mode);
+}

data/saffron/exits/_fade-out-up.scss

@@ -0,0 +1,14 @@
+@include keyframes(fadeOutUp) {
+  0% {
+    opacity: 1;
+    @include transform(translateZ(0));
+  }
+  100% {
+    opacity: 0;
+    @include transform(translateY($translateY-distance * -1));
+  }
+}
+
+@mixin fadeOutUp($duration: 1s, $delay: 0s, $fill-mode: forwards) {
+  @include animation(fadeOutUp $duration $delay $fill-mode);
+}

data/saffron/exits/_fade-out-zoom-big.scss

@@ -0,0 +1,19 @@
+@include keyframes(fadeOutZoomBig) {
+  0% {
+    @include transform(scale(1) translateZ(0));
+  }
+  40% {
+    @include transform(scale(1.25));
+  }
+  60% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+    @include transform(scale(0));
+  }
+}
+
+@mixin fadeOutZoomBig($duration: 1s, $delay: 0s, $fill-mode: forwards) {
+  @include animation(fadeOutZoomBig $duration $delay $fill-mode);
+}

data/saffron/exits/_fade-out-zoom.scss

@@ -0,0 +1,14 @@
+@include keyframes(fadeOutZoom) {
+  0% {
+    opacity: 1;
+    @include transform(translateZ(0));
+  }
+  100% {
+    opacity: 0;
+    @include transform(scale(0));
+  }
+}
+
+@mixin fadeOutZoom($duration: 1s, $delay: 0s, $fill-mode: forwards) {
+  @include animation(fadeOutZoom $duration $delay $fill-mode);
+}

data/saffron/exits/_fade-out.scss

@@ -0,0 +1,13 @@
+@include keyframes(fadeOut) {
+  0% {
+    opacity: 1;
+    @include transform(translateZ(0));
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+@mixin fadeOut($duration: 1s, $delay: 0s, $fill-mode: forwards) {
+  @include animation(fadeOut $duration $delay $fill-mode);
+}

data/saffron/exits/_poof.scss

@@ -0,0 +1,17 @@
+@include keyframes(poof) {
+  0% {
+    opacity: 1;
+    @include transform(scale(1) translateZ(0));
+    -webkit-filter: blur(0);
+  }
+
+  100% {
+    opacity: 0;
+    @include transform(scale(2));
+    -webkit-filter: blur(40px);
+  }
+}
+
+@mixin poof($duration: 0.75s, $delay: 0s, $fill-mode: forwards) {
+  @include animation(poof $duration $delay $fill-mode);
+}

data/saffron/exits/_rise-out.scss

@@ -0,0 +1,14 @@
+@include keyframes(riseOut) {
+  0% {
+    opacity: 1;
+    @include transform(translateZ(0));
+  }
+  100% {
+    opacity: 0;
+    @include transform(translateY($drop-rise-distance * -1));
+  }
+}
+
+@mixin riseOut($duration: 0.5s, $delay: 0s, $fill-mode: forwards) {
+  @include animation(riseOut $duration $delay $fill-mode);
+}

data/saffron/exits/_slide-out.scss

@@ -0,0 +1,29 @@
+@include keyframes(slideOutLeft) {
+  35% {
+    opacity: 1;
+    @include transform(translateX($translateX-distance) translateZ(0));
+  }
+  100% {
+    opacity: 0;
+    @include transform(translateX($translateX-distance * -10));
+  }
+}
+
+@mixin slideOutLeft($duration: 1s, $delay: 0s, $fill-mode: forwards) {
+  @include animation(slideOutLeft $duration $delay $fill-mode);
+}
+
+@include keyframes(slideOutRight) {
+  35% {
+    opacity: 1;
+    @include transform(translateX($translateX-distance * -1) translateZ(0));
+  }
+  100% {
+    opacity: 0;
+    @include transform(translateX($translateX-distance * 10));
+  }
+}
+
+@mixin slideOutRight($duration: 1s, $delay: 0s, $fill-mode: forwards) {
+  @include animation(slideOutRight $duration $delay $fill-mode);
+}

data/saffron/exits/_turn-out.scss

@@ -0,0 +1,33 @@
+@include keyframes(turnOutDown) {
+  0% {
+    opacity: 1;
+    @include transform(perspective(800px) rotateX(0deg) translateZ(0));
+    @include prefix(backface-visibility, hidden, webkit spec);
+  }
+
+  100% {
+    opacity: 0;
+    @include transform(perspective(500px) rotateX($turn-angle * -1) translateZ(150px));
+  }
+}
+
+@mixin turnOutDown($duration: 1s, $delay: 0s, $fill-mode: forwards) {
+  @include animation(turnOutDown $duration $delay $fill-mode);
+}
+
+@include keyframes(turnOutUp) {
+  0% {
+    opacity: 1;
+    @include transform(perspective(800px) rotateX(0deg) translateZ(0));
+    @include prefix(backface-visibility, hidden, webkit spec);
+  }
+
+  100% {
+    opacity: 0;
+    @include transform(perspective(500px) rotateX($turn-angle) translateZ(150px));
+  }
+}
+
+@mixin turnOutUp($duration: 1s, $delay: 0s, $fill-mode: forwards) {
+  @include animation(turnOutUp $duration $delay $fill-mode);
+}

data/saffron/helpers/_animation.scss

@@ -0,0 +1,3 @@
+@mixin animation($properties...) {
+  @include prefix(animation, $properties, webkit spec);
+}

data/saffron/helpers/_contains.scss

@@ -0,0 +1,4 @@
+// Thanks to @lunelson and @zaus
+@function contains($list, $var) {
+  @return (false != index($list, $var));
+}

data/saffron/helpers/_keyframes.scss

@@ -0,0 +1,25 @@
+@mixin keyframes($name) {
+  @each $prefix in $prefixes {
+    @if $prefix == "webkit" {
+      @-webkit-keyframes #{$name} {
+        @include prefix-only($prefix);
+        @content;
+      }
+    } @else if $prefix == "moz" {
+      @-moz-keyframes #{$name} {
+        @include prefix-only($prefix);
+        @content;
+      }
+    } @else if $prefix == "o" {
+      @-o-keyframes #{$name} {
+        @include prefix-only($prefix);
+        @content;
+      }
+    } @else if $prefix == "spec" {
+      @keyframes #{$name} {
+        @include prefix-all();
+        @content;
+      }
+    }
+  }
+}

data/saffron/helpers/_prefix.scss

@@ -0,0 +1,39 @@
+@mixin prefix($property, $value, $prefixes: $prefixes) {
+  @each $prefix in $prefixes {
+    @if $prefix == "webkit" {
+      -webkit-#{$property}: #{$value};
+    } @else if $prefix == "moz" {
+      -moz-#{$property}: #{$value};
+    } @else if $prefix == "o" {
+      -o-#{$property}: #{$value};
+    } @else if $prefix == "ms" {
+      -ms-#{$property}: #{$value};
+    } @else if $prefix == "spec" {
+      #{$property}: #{$value};
+    } @else  {
+      @warn "Unknown prefix: #{$prefix}";
+    }
+  }
+}
+
+@mixin prefix-all($value: true){
+  @if $value {
+    $prefixes: ("webkit", "moz", "o", "ms", "spec");
+  } @else {
+    $prefixes: ("spec");
+  }
+}
+
+@mixin prefix-only($only) {
+  @if $only == "webkit" {
+    $prefixes: ("webkit", "spec");
+  } @else if $only == "moz" {
+    $prefixes: ("moz", "spec");
+  } @else if $only == "o" {
+    $prefixes: ("o", "spec");
+  } @else if $only == "ms" {
+    $prefixes: ("ms", "spec");
+  } @else {
+    @warn "Unknown prefix: #{$only}";
+  }
+}

data/saffron/helpers/_transform.scss

@@ -0,0 +1,9 @@
+@mixin transform($property: none) {
+  @if contains($prefixes, "webkit") and contains($prefixes, "ms") {
+    @include prefix(transform, $property, webkit ms spec);
+  } @else if contains($prefixes, "webkit") {
+    @include prefix(transform, $property, webkit spec);
+  } @else {
+    @include prefix(transform, $property, spec);
+  }
+}

data/saffron/helpers/_transition.scss

@@ -0,0 +1,7 @@
+@mixin transition ($properties...) {
+  @if contains($prefixes, "webkit") {
+    @include prefix(transition, $properties, webkit spec);
+  } @else {
+    @include prefix(transition, $properties, spec);
+  }
+}

data/saffron/in-place/_around-the-world.scss

@@ -0,0 +1,12 @@
+@include keyframes(aroundTheWorld) {
+  0% {
+    @include transform(rotate(0deg) translate3d($distance-from-origin * -1, $distance-from-origin * -1, 0) rotate(0deg));
+  }
+  100% {
+    @include transform(rotate(360deg) translate3d($distance-from-origin * -1, $distance-from-origin * -1, 0) rotate(-360deg));
+  }
+}
+
+@mixin aroundTheWorld($duration: 2s, $delay: 0s, $fill-mode: none, $count: infinite, $timing: ease-in-out) {
+  @include animation(aroundTheWorld $count $duration $delay $fill-mode $timing);
+}

data/saffron/in-place/_bounce.scss

@@ -0,0 +1,24 @@
+@include keyframes(bounce) {
+  0%, 85%, 100% {
+    @include transform(translateY(0) scaleY(1) scaleX(1) translateZ(0));
+  }
+  25% {
+    @include transform(translateY(-1.35rem) scaleY(1.02) scaleX(0.98));
+  }
+  35% {
+    @include transform(translateY(0) scaleY(0.98) scaleX(1.02));
+  }
+  50% {
+    @include transform(translateY(-1rem) scaleY(1.01) scaleX(0.99));
+  }
+  60% {
+    @include transform(translateY(0) scaleY(0.99) scaleX(1.01));
+  }
+  75% {
+    @include transform(translateY(-0.05rem));
+  }
+}
+
+@mixin bounce($duration: 1s, $delay: 0s, $count: 1, $fill-mode: none) {
+  @include animation(bounce $count $duration $delay $fill-mode);
+}

data/saffron/in-place/_colors.scss

@@ -0,0 +1,23 @@
+@mixin backgroundColor($from, $to, $selector: ":hover", $duration: 1.5s, $delay: 0s) {
+  background-color: $from;
+  @include transition(background-color $duration $delay);
+  &#{$selector} {
+    background-color: $to;
+  }
+}
+
+@mixin borderColor($from, $to, $selector: ":hover", $duration: 1.5s, $delay: 0s) {
+  border-color: $from;
+  @include transition(border-color $duration $delay);
+  &#{$selector} {
+    border-color: $to;
+  }
+}
+
+@mixin color($from, $to, $selector: ":hover", $duration: 1.5s, $delay: 0s) {
+  color: $from;
+  @include transition(color $duration $delay);
+  &#{$selector} {
+    color: $to;
+  }
+}

data/saffron/in-place/_contract.scss

@@ -0,0 +1,7 @@
+@mixin contract($selector: ":hover", $duration: 0.5s, $delay: 0s, $timing: cubic-bezier(1.000, -0.600, 0.595, 0.835)) {
+  @include transition(all $duration $delay $timing);
+  @include transform(translateY(0) scale(1) translateZ(0));
+  &#{$selector} {
+    @include transform(translateY($enlarge-contract-jump) scale(1 / $enlarge-contract-multiple));
+  }
+}

data/saffron/in-place/_cube-flip.scss

@@ -0,0 +1,55 @@
+@mixin cubeFlipUp($selector: ".flipUp", $duration: 0.5s, $delay: 0s, $timing: cubic-bezier(0.905, -0.190, 0.480, 0.995)) {
+  position: relative;
+  @include prefix(transform-style, preserve-3d, webkit spec);
+  @include transition(all $duration $delay $timing);
+  &#{$selector} {
+    @include transform(rotateX(-90deg) translateY(100%) translateZ(0));
+    @include prefix(transform-origin, 50% 100%, webkit moz spec);
+  }
+  &::before,
+  &::after {
+    content: '';
+    position: absolute;
+    left: 0;
+    height: 100%;
+    width: 100%;
+  }
+  &::before {
+    top: 100%;
+    @include transform(rotateX(-90deg));
+    @include prefix(transform-origin, 0 0, webkit moz spec);
+  }
+  &::after {
+    top: -100%;
+    @include transform(rotateX(90deg));
+    @include prefix(transform-origin, 0 100%, webkit moz spec);
+  }
+}
+
+@mixin cubeFlipDown($selector: ".flipDown", $duration: 0.5s, $delay: 0s, $timing: cubic-bezier(0.905, -0.190, 0.480, 0.995)) {
+  position: relative;
+  @include prefix(transform-style, preserve-3d, webkit spec);
+  @include transition(all $duration $delay $timing);
+  &#{$selector} {
+    @include transform(rotateX(90deg) translateY(-100%) translateZ(0));
+    @include prefix(transform-origin, 50% 0, webkit moz spec);
+  }
+  &::before,
+  &::after {
+    content: '';
+    position: absolute;
+    left: 0;
+    height: 100%;
+    width: 100%;
+  }
+  &::before {
+    top: 100%;
+    @include transform(rotateX(-90deg));
+    @include prefix(transform-origin, 0 0, webkit moz spec);
+  }
+  &::after {
+    top: -100%;
+    @include transform(rotateX(90deg));
+    @include prefix(transform-origin, 0 100%, webkit moz spec);
+  }
+}