Base V3.1.3

- Updated animate mixin to animation
- Updated .animate and .animate-delay helpers to animation and animation-delay
- Added arrow mixin
- Version bump for style.scss, package.json and bower.json

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "base",
-  "version": "3.1.2",
+  "version": "3.1.3",
   "homepage": "http://matthewhartman.github.io/base/",
   "authors": [
     "Matthew Hartman <[email protected]>"

changelog.markdown

@@ -1,6 +1,14 @@
 # Base 2 Change Log
 
 
+## [3.1.3] - 2016-06-18
+### Base V3.1.3
+- Updated animate mixin to animation
+- Updated .animate and .animate-delay helpers to animation and animation-delay
+- Added arrow mixin
+- Version bump for style.scss, package.json and bower.json
+
+
 ## [3.1.2] - 2016-06-17
 ### Base V3.1.2
 - Updated styles.scss

package.json

@@ -1,6 +1,6 @@
 {
   "name": "getbase",
-  "version": "3.1.2",
+  "version": "3.1.3",
   "description": "A Rock Solid, Responsive HTML/CSS Framework built to work on all devices big and small.",
   "homepage": "http://getbase.org/",
   "scripts": {

src/scss/base.scss

@@ -2,7 +2,7 @@
 
 // Base Stylesheet - http://getbase.org
 // Author: Matthew Hartman - http://www.matthewhartman.com.au/
-// Version: 3.1.2 - Last Updated: June 17, 2016
+// Version: 3.1.3 - Last Updated: June 18, 2016
 
 ========================================================================== */
 

src/scss/base/_helpers.scss

@@ -225,8 +225,8 @@
 }
 
 // Animations
-.animate { @include animate(1s); }
-.animate-infinite {
+.animation { @include animation(1s); }
+.animation-infinite {
   -webkit-animation-iteration-count: infinite;
   animation-iteration-count: infinite;
 }

src/scss/base/_mixins.scss

@@ -44,10 +44,44 @@
 }
 
 // Animations
-// Example Usage @mixin animate(1s);
-@mixin animate($duration: 1s) {
+// Example Usage @mixin animation(1s);
+@mixin animation($duration: 1s) {
   animation-duration: $duration;
   animation-fill-mode: both;
 }
 
-// Not enough mixins? – Please make some suggestions or contribute more! :)
+// Arrows
+// Example Usage @mixin arrow(4px, #000, up);
+@mixin arrow ($size: 5px, $color: #333, $direction: right) {
+  position: relative;
+  &:before {
+    content: "";
+    position: absolute;
+    border: $size solid transparent;
+    z-index: -1;
+    @if $direction == right {
+      top: 50%;
+      left: 100%;
+      border-left-color: $color;
+      transform: translate3d(0, -50%, 0);
+    }
+    @else if $direction == left {
+      top: 50%;
+      left: 0;
+      border-right-color: $color;
+      transform: translate3d(-100%, -50%, 0);
+    }
+    @else if $direction == down {
+      top: 100%;
+      left: 50%;
+      border-top-color: $color;
+      transform: translate3d(-50%, 0, 0);
+    }
+    @else if $direction == up {
+      top: 0;
+      left: 50%;
+      border-bottom-color: $color;
+      transform: translate3d(-50%, -100%, 0);
+    }
+  }
+}