ellipsis-compass 1.0.1

data/stylesheets/animation/_animation.scss

@@ -0,0 +1,121 @@
+
+
+// @private css3-feature-support variables must always include a list of five boolean values
+// representing in order: -moz, -webkit, -o, -ms, -khtml.
+$animation-support: -moz, -webkit, -o, not -ms, -khtml;
+
+
+// Name of any animation as a string.
+$default-animation-name             : null !default;
+
+// Duration of the entire animation in seconds.
+$default-animation-duration         : null !default;
+
+// Delay for start of animation in seconds.
+$default-animation-delay            : null !default;
+
+// The timing function(s) to be used between keyframes. [ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier($number, $number, $number, $number)]
+$default-animation-timing-function  : null !default;
+
+// The number of times an animation cycle is played. [infinite | $number]
+$default-animation-iteration-count  : null !default;
+
+// Whether or not the animation should play in reverse on alternate cycles. [normal | alternate]
+$default-animation-direction        : null !default;
+
+// What values are applied by the animation outside the time it is executing. [none | forwards | backwards | both]
+$default-animation-fill-mode        : null !default;
+
+// Whether the animation is running or paused. [running | paused]
+$default-animation-play-state       : null !default;
+
+
+// Create a named animation sequence that can be applied to elements later.
+//
+//     $name    - The name of your animation.
+//     @content - The keyframes of the animation.
+@mixin keyframes(
+  $name,
+  $moz      : $experimental-support-for-mozilla,
+  $webkit   : $experimental-support-for-webkit,
+  $o        : $experimental-support-for-opera,
+  $khtml    : $experimental-support-for-khtml,
+  $official : true
+) {
+  @if $moz and supported(moz, $animation-support) {
+    @include with-only-support-for($moz: true) {
+      @-moz-keyframes #{$name} { @content; }
+    }
+  }
+  @if $webkit and supported(webkit, $animation-support) {
+    @include with-only-support-for($webkit: true) {
+      @-webkit-keyframes #{$name} { @content; }
+    }
+  }
+  @if $o and supported(o, $animation-support) {
+    @include with-only-support-for($o: true) {
+      @-o-keyframes #{$name} { @content; }
+    }
+  }
+  @if $khtml and supported(khtml, $animation-support) {
+    @include with-only-support-for($khtml: true) {
+      @-khtml-keyframes #{$name} { @content; }
+    }
+  }
+  @if $official and supported(official, $animation-support) {
+    @include with-only-support-for {
+      @keyframes #{$name} { @content; }
+    }
+  }
+}
+
+
+// Apply any number of animation names.
+@mixin animation-name($name...) {
+  $name: set-arglist-default($name, $default-animation-name);
+  @include experimental(animation-name, $name, $animation-support...); }
+
+// Apply any number of animation durations.
+@mixin animation-duration($duration...) {
+  $duration: set-arglist-default($duration, $default-animation-duration);
+  @include experimental(animation-duration, $duration, $animation-support...); }
+
+// Apply any number of animation delays.
+@mixin animation-delay($delay...) {
+  $delay: set-arglist-default($delay, $default-animation-delay);
+  @include experimental(animation-delay, $delay, $animation-support...); }
+
+// Apply any number of animation timing functions.
+@mixin animation-timing-function($function...) {
+  $function: set-arglist-default($function, $default-animation-timing-function);
+  @include experimental(animation-timing-function, $function, $animation-support...); }
+
+// Apply any number of animation iteration counts.
+@mixin animation-iteration-count($count...) {
+  $count: set-arglist-default($count, $default-animation-iteration-count);
+  @include experimental(animation-iteration-count, $count, $animation-support...); }
+
+// Apply any number of animation directions.
+@mixin animation-direction($direction...) {
+  $direction: set-arglist-default($direction, $default-animation-direction);
+  @include experimental(animation-direction, $direction, $animation-support...); }
+
+// Apply any number of animation fill modes.
+@mixin animation-fill-mode($mode...) {
+  $mode: set-arglist-default($mode, $default-animation-fill-mode);
+  @include experimental(animation-fill-mode, $mode, $animation-support...); }
+
+// Apply any number of animation play states.
+@mixin animation-play-state($state...) {
+  $state: set-arglist-default($state, $default-animation-play-state);
+  @include experimental(animation-play-state, $state, $animation-support...); }
+
+// Shortcut to apply any number of animations to an element, with all the settings.
+//
+//     $animation... : Name and settings. [<values> | default]
+@mixin animation($animation...) {
+  $default: -compass-space-list(compact($default-animation-name $default-animation-duration $default-animation-timing-function $default-animation-delay $default-animation-iteration-count $default-animation-direction $default-animation-fill-mode $default-animation-play-state));
+  $animation: set-arglist-default($animation, $default);
+  @include experimental(animation, $animation, $animation-support...);
+}
+

data/stylesheets/animation/_animations.scss

@@ -0,0 +1,771 @@
+@import "animate";
+
+@mixin animation($name) {
+  -webkit-animation-name:$name;
+  -moz-animation-name:$name;
+  -o-animation-name:$name;
+  animation-name:$name;
+}
+
+@mixin animation-duration($duration:350ms){
+  -webkit-animation-duration: $duration;
+  -moz-animation-duration: $duration;
+  -o-animation-duration: $duration;
+  animation-duration: $duration;
+}
+
+@mixin animation-delay($delay:0){
+  -webkit-animation-delay:$delay;
+  -moz-animation-delay:$delay;
+  -o-animation-delay:$delay;
+  animation-delay:$delay;
+}
+
+@mixin animation-iteration($iteration:1){
+  -webkit-animation-iteration-count:$iteration;
+  -moz-animation-iteration-count:$iteration;
+  -o-animation-iteration-count:$iteration;
+  animation-iteration-count:$iteration;
+}
+
+@mixin animation-props($duration:1s,$delay:0,$iteration:1){
+  @include animation-duration($duration);
+  @include animation-delay($delay);
+  @include animation-iteration($iteration);
+}
+
+@mixin animation-backface-visibility(){
+  -webkit-backface-visibility: visible !important;
+  -moz-backface-visibility: visible !important;
+  -o-backface-visibility: visible !important;
+  backface-visibility: visible !important;
+}
+
+@mixin animation-timing-function($easing:ease-in){
+  -webkit-animation-timing-function: $easing;
+  -moz-animation-timing-function:$easing;
+  -o-animation-timing-function:$easing;
+  animation-timing-function:$easing;
+}
+
+@mixin animated($duration:350ms) {
+  @include animation-duration($duration);
+  -webkit-animation-fill-mode: both;
+  -moz-animation-fill-mode: both;
+  -o-animation-fill-mode: both;
+  animation-fill-mode: both;
+}
+
+.animated {
+  @include animated();
+  &.hinge {
+    @include animation-duration(2s);
+  }
+  &.infinite{
+    @include animation-iteration(infinite);
+  }
+}
+
+
+
+//animate------------------------------------------------------------------------------------------------------------
+
+//slide keyframe animations---------------------------------------
+@mixin slideIn(){
+  @include animate-slideIn();
+  .slideIn {
+    @include animation(slideIn);
+    @content;
+  }
+}
+@mixin slideOut(){
+  @include animate-slideOut();
+  .slideOut {
+    @include animation(slideOut);
+    @content;
+  }
+}
+
+@mixin slideInDown(){
+  @include animate-slideInDown();
+  .slideInDown {
+   @include animation(slideInDown);
+    @content;
+  }
+}
+
+@mixin slideInUp(){
+  @include animate-slideInUp();
+  .slideInUp {
+    @include animation(slideInUp);
+    @content;
+  }
+}
+
+@mixin slideInLeft(){
+  @include animate-slideInLeft();
+  .slideInLeft {
+    @include animation(slideInLeft);
+    @content;
+  }
+}
+
+@mixin slideInRight(){
+  @include animate-slideInRight();
+  .slideInRight {
+    @include animation(slideInRight);
+    @content;
+  }
+}
+
+@mixin slideOutUp(){
+  @include animate-slideOutUp();
+  .slideOutUp {
+    @include animation(slideOutUp);
+    @content;
+  }
+}
+
+@mixin slideOutDown(){
+  @include animate-slideOutDown();
+  .slideOutDown {
+    @include animation(slideOutDown);
+    @content;
+  }
+}
+
+@mixin slideOutLeft(){
+  @include animate-slideOutLeft();
+  .slideOutLeft {
+    @include animation(slideOutLeft);
+    @content;
+  }
+}
+
+@mixin slideOutRight(){
+  @include animate-slideOutRight();
+  .slideOutRight {
+    @include animation(slideOutRight);
+    @content;
+  }
+}
+
+//all slide keyframe animations
+@mixin animations-slide(){
+  @include slideIn();
+  @include slideOut();
+  @include slideInDown();
+  @include slideInUp();
+  @include slideInLeft();
+  @include slideInRight();
+  @include slideOutDown();
+  @include slideOutUp();
+  @include slideOutLeft();
+  @include slideOutRight();
+  @content;
+}
+
+//fade keyframe animations----------------------------------------
+@mixin fadeIn(){
+  @include animate-fadeIn();
+  .fadeIn {
+    @include animation(fadeIn);
+    @content;
+  }
+}
+
+@mixin fadeInLeft(){
+  @include animate-fadeInLeft();
+  .fadeInLeft {
+    @include animation(fadeInLeft);
+    @content;
+  }
+}
+
+@mixin fadeInRight(){
+  @include animate-fadeInRight();
+  .fadeInRight {
+    @include animation(fadeInRight);
+    @content;
+  }
+}
+
+@mixin fadeInUp(){
+  @include animate-fadeInUp();
+  .fadeInUp {
+    @include animation(fadeInUp);
+    @content;
+  }
+}
+
+@mixin fadeInDown(){
+  @include animate-fadeInDown();
+  .fadeInDown {
+    @include animation(fadeInDown);
+    @content;
+  }
+}
+
+@mixin fadeInLeftBig(){
+  @include animate-fadeInLeftBig();
+  .fadeInLeftBig {
+    @include animation(fadeInLeftBig);
+    @content;
+  }
+}
+
+@mixin fadeInRightBig(){
+  @include animate-fadeInRightBig();
+  .fadeInRightBig {
+    @include animation(fadeInRightBig);
+    @content;
+  }
+}
+
+@mixin fadeInUpBig(){
+  @include animate-fadeInUpBig();
+  .fadeInUpBig {
+    @include animation(fadeInUpBig);
+    @content;
+  }
+}
+
+@mixin fadeInDownBig(){
+  @include animate-fadeInDownBig();
+  .fadeInDownBig {
+    @include animation(fadeInDownBig);
+    @content;
+  }
+}
+
+
+@mixin fadeOut(){
+  @include animate-fadeOut();
+  .fadeOut {
+    @include animation(fadeOut);
+    @content;
+  }
+}
+
+@mixin fadeOutUp(){
+  @include animate-fadeOutUp();
+  .fadeOutUp {
+    @include animation(fadeOutUp);
+    @content;
+  }
+}
+
+@mixin fadeOutDown(){
+  @include animate-fadeOutDown();
+  .fadeOutDown {
+    @include animation(fadeOutDown);
+    @content;
+  }
+}
+
+@mixin fadeOutLeft(){
+  @include animate-fadeOutLeft();
+  .fadeOutLeft {
+    @include animation(fadeOutLeft);
+    @content;
+  }
+}
+
+@mixin fadeOutRight(){
+  @include animate-fadeOutRight();
+  .fadeOutRight {
+    @include animation(fadeOutRight);
+    @content;
+  }
+}
+
+@mixin fadeOutUpBig(){
+  @include animate-fadeOutUpBig();
+  .fadeOutUpBig {
+    @include animation(fadeOutUpBig);
+    @content;
+  }
+}
+
+@mixin fadeOutDownBig(){
+  @include animate-fadeOutDownBig();
+  .fadeOutDownBig {
+    @include animation(fadeOutDownBig);
+    @content;
+  }
+}
+
+@mixin fadeOutLeftBig(){
+  @include animate-fadeOutLeftBig();
+  .fadeOutLeftBig {
+    @include animation(fadeOutLeftBig);
+    @content;
+  }
+}
+
+@mixin fadeOutRightBig(){
+  @include animate-fadeOutRightBig();
+  .fadeOutRightBig {
+    @include animation(fadeOutRightBig);
+    @content;
+  }
+}
+
+//all fade keyframe animations
+@mixin animations-fade(){
+  @include fadeIn();
+  @include fadeInUp();
+  @include fadeInDown();
+  @include fadeInLeft();
+  @include fadeInRight();
+  @include fadeInUpBig();
+  @include fadeInDownBig();
+  @include fadeInLeftBig();
+  @include fadeInRightBig();
+  @include fadeOut();
+  @include fadeOutUp();
+  @include fadeOutDown();
+  @include fadeOutLeft();
+  @include fadeOutRight();
+  @include fadeOutUpBig();
+  @include fadeOutDownBig();
+  @include fadeOutLeftBig();
+  @include fadeOutRightBig();
+  @content;
+}
+
+
+//bounce keyframe animations ------------------------------------------------------------------------
+
+@mixin bounceIn(){
+  @include animate-bounceIn();
+  .bounceIn {
+    @include animation(bounceIn);
+    @content;
+  }
+}
+
+@mixin bounceInUp(){
+  @include animate-bounceInUp();
+  .bounceInUp {
+    @include animation(bounceInUp);
+    @content;
+  }
+}
+
+@mixin bounceInDown(){
+  @include animate-bounceInDown();
+  .bounceInDown {
+    @include animation(bounceInDown);
+    @content;
+  }
+}
+
+@mixin bounceInLeft(){
+  @include animate-bounceInLeft();
+  .bounceInLeft {
+    @include animation(bounceInLeft);
+    @content;
+  }
+}
+
+@mixin bounceInRight(){
+  @include animate-bounceInRight();
+  .bounceInRight {
+    @include animation(bounceInRight);
+    @content;
+  }
+}
+
+@mixin bounceOut(){
+  @include animate-bounceOut();
+  .bounceOut {
+    @include animation(bounceOut);
+    @content;
+  }
+}
+
+@mixin bounceOutUp(){
+  @include animate-bounceOutUp();
+  .bounceOutUp {
+    @include animation(bounceOutUp);
+    @content;
+  }
+}
+
+@mixin bounceOutDown(){
+  @include animate-bounceOutDown();
+  .bounceOutDown {
+    @include animation(bounceOutDown);
+    @content;
+  }
+}
+
+@mixin bounceOutLeft(){
+  @include animate-bounceOutLeft();
+  .bounceOutLeft {
+    @include animation(bounceOutLeft);
+    @content;
+  }
+}
+
+@mixin bounceOutRight(){
+  @include animate-bounceOutRight();
+  .bounceOutRight {
+    @include animation(bounceOutRight);
+    @content;
+  }
+}
+
+
+//all bounce keyframe animations
+@mixin animations-bounce(){
+  @include bounceIn();
+  @include bounceInUp();
+  @include bounceInDown();
+  @include bounceInLeft();
+  @include bounceInRight();
+  @include bounceOut();
+  @include bounceOutUp();
+  @include bounceOutDown();
+  @include bounceOutLeft();
+  @include bounceOutRight();
+  @content;
+}
+
+
+//rotate keyframe animations ----------------------------------------------------------------------------
+
+@mixin rotateIn(){
+  @include animate-rotateIn();
+  .rotateIn {
+    @include animation(rotateIn);
+    @content;
+  }
+}
+
+@mixin rotateInUpLeft(){
+  @include animate-rotateInUpLeft();
+  .rotateInUpLeft {
+    @include animation(rotateInUpLeft);
+    @content;
+  }
+}
+
+@mixin rotateInDownLeft(){
+  @include animate-rotateInDownLeft();
+  .rotateInDownLeft {
+    @include animation(rotateInDownLeft);
+    @content;
+  }
+}
+
+@mixin rotateInUpRight(){
+  @include animate-rotateInUpRight();
+  .rotateInUpRight {
+    @include animation(rotateInUpRight);
+    @content;
+  }
+}
+
+@mixin rotateInDownRight(){
+  @include animate-rotateIn();
+  .rotateInDownRight {
+    @include animation(rotateInDownRight);
+    @content;
+  }
+}
+
+
+
+@mixin rotateOut(){
+  @include animate-rotateOut();
+  .rotateOut {
+    @include animation(rotateOut);
+    @content;
+  }
+}
+
+@mixin rotateOutUpLeft(){
+  @include animate-rotateOutUpLeft();
+  .rotateOutUpLeft {
+    @include animation(rotateOutUpLeft);
+    @content;
+  }
+}
+
+@mixin rotateOutDownLeft(){
+  @include animate-rotateOutDownLeft();
+  .rotateOutDownLeft {
+    @include animation(rotateOutDownLeft);
+    @content;
+  }
+}
+
+@mixin rotateOutUpRight(){
+  @include animate-rotateOutUpRight();
+  .rotateOutUpRight {
+    @include animation(rotateOutUpRight);
+    @content;
+  }
+}
+
+@mixin rotateOutDownRight(){
+  @include animate-rotateOut();
+  .rotateOutDownRight {
+    @include animation(rotateOutDownRight);
+    @content;
+  }
+}
+
+//all rotate keyframe animations
+@mixin animations-rotate(){
+  @include rotateIn();
+  @include rotateInUpLeft();
+  @include rotateInDownLeft();
+  @include rotateInUpRight();
+  @include rotateInDownRight();
+  @include rotateOut();
+  @include rotateOutUpLeft();
+  @include rotateOutDownLeft();
+  @include rotateOutUpRight();
+  @include rotateOutDownRight();
+  @content;
+}
+
+
+//flip keyframe animations ------------------------------------------------------------------------
+
+@mixin flipInX(){
+  @include animate-flipInX();
+  .flipInX {
+    @include animation-backface-visibility();
+    @include animation(flipInX);
+    @content;
+  }
+}
+
+@mixin flipOutX(){
+  @include animate-flipOutX();
+  .flipOutX {
+    @include animation-backface-visibility();
+    @include animation(flipOutX);
+    @content;
+  }
+}
+
+@mixin flipInY(){
+  @include animate-flipInY();
+  .flipInY {
+    @include animation-backface-visibility();
+    @include animation(flipInY);
+    @content;
+  }
+}
+
+@mixin flipOutY(){
+  @include animate-flipOutY();
+  .flipOutY {
+    @include animation-backface-visibility();
+    @include animation(flipOutY);
+    @content;
+  }
+}
+
+//all flip keyframe animations
+@mixin animations-flip(){
+  @include flipInX();
+  @include flipOutX();
+  @include flipInY();
+  @include flipOutY();
+  @content;
+}
+
+
+//roll keyframe animations ----------------------------------------------------------------------------------------
+
+@mixin rollIn(){
+  @include animate-rollIn();
+  .rollIn {
+    @include animation(rollIn);
+    @content;
+  }
+}
+
+@mixin rollOut(){
+  @include animate-rollOut();
+  .rollOut {
+    @include animation(rollOut);
+    @content;
+  }
+}
+
+//all roll keyframe animations
+@mixin animations-roll(){
+  @include rollIn();
+  @include rollOut();
+  @content;
+}
+
+//lightspeed keyframe animations -------------------------------------------------------------------------------------
+
+@mixin lightSpeedIn(){
+  @include animate-lightSpeedIn();
+  .lightSpeedIn {
+    @include animation(lightSpeedIn);
+    @include animation-timing-function(ease-out);
+    @include animation-duration(500ms);
+    @content;
+  }
+}
+
+@mixin lightSpeedOut(){
+  @include animate-lightSpeedOut();
+  .lightSpeedOut {
+    @include animation(lightSpeedOut);
+    @include animation-timing-function(ease-in);
+    @include animation-duration(250ms);
+    @content;
+  }
+}
+
+//all roll keyframe animations
+@mixin animations-lightSpeed(){
+  @include lightSpeedIn();
+  @include lightSpeedOut();
+  @content;
+}
+
+
+//attention --------------------------------------------------------------------------------------------------------
+
+@mixin flash(){
+  @include animate-flash();
+  .flash {
+    @include animation(flash);
+    @content;
+  }
+}
+
+@mixin shake(){
+  @include animate-shake();
+  .shake {
+    @include animation(shake);
+    @content;
+  }
+}
+
+@mixin tada(){
+  @include animate-tada();
+  .tada {
+    @include animation(tada);
+    @content;
+  }
+}
+
+@mixin swing(){
+  @include animate-swing();
+  .swing {
+    @include animation(swing);
+    @content;
+  }
+}
+
+@mixin wobble(){
+  @include animate-wobble();
+  .wobble {
+    @include animation(wobble);
+    @content;
+  }
+}
+
+@mixin wiggle(){
+  @include animate-wiggle();
+  .wiggle {
+    @include animation(wiggle);
+    @include animation-duration(750ms);
+    @content;
+  }
+}
+
+@mixin pulse(){
+  @include animate-pulse();
+  .pulse {
+    @include animation(pulse);
+    @content;
+  }
+}
+
+@mixin rubberband(){
+  @include animate-rubberband();
+  .rubberband {
+    @include animation(rubberband);
+    @include animation-duration(750ms);
+    @content;
+  }
+}
+
+@mixin hinge(){
+  @include animate-hinge();
+  .hinge {
+    @include animation(hinge);
+    @content;
+  }
+}
+
+//all attention keyframe animations
+@mixin animations-attention(){
+  @include flash();
+  @include shake();
+  @include tada();
+  @include swing();
+  @include wobble();
+  @include wiggle();
+  @include pulse();
+  @include rubberband();
+  @include hinge();
+  @content;
+}
+
+//all keyframe animations via one mixin
+@mixin animations-all(){
+  @include animations-slide();
+  @include animations-fade();
+  @include animations-bounce();
+  @include animations-rotate();
+  @include animations-flip();
+  @include animations-roll();
+  @include animations-lightSpeed();
+  @include animations-attention();
+  @content;
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+