assets/stylesheets/_mixins.scss in aesthetics-rails-0.1.0.pre.alpha vs assets/stylesheets/_mixins.scss in aesthetics-rails-0.1.1.pre.alpha

@@ -3,10 +3,12 @@
 //
 // Index
 // -----
 // 1) Flexbox Layout
 // 2) Positioning
+// 3) Shadows
+// 4) Animations
 //==================================================
 
 
 //=========================
 // 1) Flexbox Layout
@@ -58,8 +60,85 @@
 //=======================
 @mixin vertical-align {
   position: relative;
   top: 50%;
   -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
   transform: translateY(-50%);
+}
+
+//=========================
+// 3) Shadows
+//=========================
+
+//=======================
+  // Box Shadow
+//=======================
+// Usage:
+// x-offset | y-offset | blur | color | inset
+// Passing no params will render default values as set below
+@mixin box-shadow($x: 2px, $y: 2px, $blur: 5px, $color: rgba(0,0,0,.4), $inset: "") {
+  @if ($inset != "") {
+    -webkit-box-shadow: $inset $x $y $blur $color;
+    box-shadow:         $inset $x $y $blur $color;
+  } @else {
+    -webkit-box-shadow: $x $y $blur $color;
+    box-shadow:         $x $y $blur $color;
+  }
+}
+
+//=========================
+// 4) Animations
+//=========================
+
+//=======================
+  // Animation
+//=======================
+// Usage:
+// animation name | duration | timing-function | delay
+// Example:
+// @include animation(slidein 3s linear 1s);
+@mixin animation($animation-properties) {
+  -webkit-animation: $animation-properties;
+          animation: $animation-properties;
+}
+
+//=======================
+  // Keyframes
+//=======================
+// Example:
+// @include keyframes(slidein) {
+//   from {
+//     margin-left: 100%;
+//     width: 300%;
+//   }
+
+//   to {
+//     margin-left: 0%;
+//     width: 100%;
+//   }
+// }
+@mixin keyframes($identifier) {
+  @-webkit-keyframes #{$identifier} {
+    @content;
+  }
+  @keyframes #{$identifier} {
+    @content;
+  }
+}
+
+//=========================
+  // Transition
+//=========================
+// Example:
+// @include transition(opacity, 0.5s, ease-in);
+@mixin transition($property: all, $length: 0.3s, $easing: ease-in-out) {
+  -webkit-transition: $property, $length, $easing;
+          transition: $property, $length, $easing;
+}
+
+//=========================
+  // Transform
+//=========================
+@mixin transform($transform-functions) {
+  -webkit-transform: $transform-functions;
+  transform: $transform-functions;
 }
\ No newline at end of file