groundworkcss 0.4.4 → 2.0.0

data/app/assets/stylesheets/groundworkcss/anim/_lightspeed.scss

@@ -0,0 +1,28 @@
+$lightspeed-animations: true !default;
+
+
+@if $lightspeed-animations {
+
+  .lightSpeedIn {
+    animation-name: lightSpeedIn;
+    animation-timing-function: ease-out;
+  }
+
+  .animated.lightSpeedIn {
+    animation-duration: 0.5s;
+  }
+
+  @keyframes lightSpeedOut {
+    0% { transform: translateX(0%) skewX(0deg); opacity: 1; }
+    100% { transform: translateX(100%) skewX(-30deg); opacity: 0; }
+  }
+
+  .lightSpeedOut {
+    animation-name: lightSpeedOut;
+    animation-timing-function: ease-in;
+  }
+
+  .animated.lightSpeedOut {
+    animation-duration: 0.25s;
+  }
+}

data/app/assets/stylesheets/groundworkcss/anim/_pulse.scss

@@ -0,0 +1,15 @@
+$pulse-animations: true !default;
+
+
+@if $pulse-animations {
+
+  @keyframes pulse {
+    0% { transform: scale(1); }
+    50% { transform: scale(1.1); }
+    100% { transform: scale(1); }
+  }
+
+  .pulse {
+    animation-name: pulse;
+  }
+}

data/app/assets/stylesheets/groundworkcss/anim/_roll.scss

@@ -0,0 +1,37 @@
+$roll-animations: true !default;
+
+
+@if $roll-animations {
+
+  @keyframes rollIn {
+    0% { opacity: 0; transform: translateX(-100%) rotate(-120deg); }
+    100% { opacity: 1; transform: translateX(0px) rotate(0deg); }
+  }
+
+  .rollIn {
+    animation-name: rollIn;
+  }
+
+  @keyframes rollOut {
+    0% {
+      opacity: 1;
+      transform: translateX(0px) rotate(0deg);
+    }
+
+    100% {
+      opacity: 0;
+      transform: translateX(100%) rotate(120deg);
+    }
+  }
+
+  .rollOut {
+    animation-name: rollOut;
+  }
+
+  @keyframes lightSpeedIn {
+    0% { transform: translateX(100%) skewX(-30deg); opacity: 0; }
+    60% { transform: translateX(-20%) skewX(30deg); opacity: 1; }
+    80% { transform: translateX(0%) skewX(-15deg); opacity: 1; }
+    100% { transform: translateX(0%) skewX(0deg); opacity: 1; }
+  }
+}

data/app/assets/stylesheets/groundworkcss/anim/_rotate.scss

@@ -0,0 +1,171 @@
+$rotate-animations: true !default;
+
+
+@if $rotate-animations {
+
+  .rotateIn {
+    animation-name: rotateIn;
+  }
+
+  @keyframes rotateInUpLeft {
+    0% {
+      transform-origin: left bottom;
+      transform: rotate(90deg);
+      opacity: 0;
+    }
+    
+    100% {
+      transform-origin: left bottom;
+      transform: rotate(0);
+      opacity: 1;
+    }
+  }
+
+  .rotateInUpLeft {
+    animation-name: rotateInUpLeft;
+  }
+
+  @keyframes rotateInDownLeft {
+    0% {
+      transform-origin: left bottom;
+      transform: rotate(-90deg);
+      opacity: 0;
+    }
+    
+    100% {
+      transform-origin: left bottom;
+      transform: rotate(0);
+      opacity: 1;
+    }
+  }
+
+  .rotateInDownLeft {
+    animation-name: rotateInDownLeft;
+  }
+
+  @keyframes rotateInUpRight {
+    0% {
+      transform-origin: right bottom;
+      transform: rotate(-90deg);
+      opacity: 0;
+    }
+    
+    100% {
+      transform-origin: right bottom;
+      transform: rotate(0);
+      opacity: 1;
+    }
+  }
+
+  .rotateInUpRight {
+    animation-name: rotateInUpRight;
+  }
+
+  @keyframes rotateInDownRight {
+    0% {
+      transform-origin: right bottom;
+      transform: rotate(90deg);
+      opacity: 0;
+    }
+    
+    100% {
+      transform-origin: right bottom;
+      transform: rotate(0);
+      opacity: 1;
+    }
+  }
+
+  .rotateInDownRight {
+    animation-name: rotateInDownRight;
+  }
+
+  @keyframes rotateOut {
+    0% {
+      transform-origin: center center;
+      transform: rotate(0);
+      opacity: 1;
+    }
+    
+    100% {
+      transform-origin: center center;
+      transform: rotate(200deg);
+      opacity: 0;
+    }
+  }
+
+  .rotateOut {
+    animation-name: rotateOut;
+  }
+
+  @keyframes rotateOutUpLeft {
+    0% {
+      transform-origin: left bottom;
+      transform: rotate(0);
+      opacity: 1;
+    }
+    
+    100% {
+      transform-origin: left bottom;
+      transform: rotate(-90deg);
+      opacity: 0;
+    }
+  }
+
+  .rotateOutUpLeft {
+    animation-name: rotateOutUpLeft;
+  }
+
+  @keyframes rotateOutDownLeft {
+    0% {
+      transform-origin: left bottom;
+      transform: rotate(0);
+      opacity: 1;
+    }
+    
+    100% {
+      transform-origin: left bottom;
+      transform: rotate(90deg);
+      opacity: 0;
+    }
+  }
+
+  .rotateOutDownLeft {
+    animation-name: rotateOutDownLeft;
+  }
+
+  @keyframes rotateOutUpRight {
+    0% {
+      transform-origin: right bottom;
+      transform: rotate(0);
+      opacity: 1;
+    }
+    
+    100% {
+      transform-origin: right bottom;
+      transform: rotate(90deg);
+      opacity: 0;
+    }
+  }
+
+  .rotateOutUpRight {
+    animation-name: rotateOutUpRight;
+  }
+
+  @keyframes rotateOutDownRight {
+    0% {
+      transform-origin: right bottom;
+      transform: rotate(0);
+      opacity: 1;
+    }
+    
+    100% {
+      transform-origin: right bottom;
+      transform: rotate(-90deg);
+      opacity: 0;
+    }
+  }
+
+  .rotateOutDownRight {
+    animation-name: rotateOutDownRight;
+  }
+}

data/app/assets/stylesheets/groundworkcss/anim/_shake.scss

@@ -0,0 +1,15 @@
+$shake-animations: true !default;
+
+
+@if $shake-animations {
+
+  @keyframes shake {
+    0%, 100% {transform: translateX(0);}
+    10%, 30%, 50%, 70%, 90% {transform: translateX(-10px);}
+    20%, 40%, 60%, 80% {transform: translateX(10px);}
+  }
+
+  .shake {
+    animation-name: shake;
+  }
+}

data/app/assets/stylesheets/groundworkcss/anim/_spin.scss

@@ -0,0 +1,57 @@
+// =============================================
+//              Spin Animations
+//          Last Updated:2013-8-9
+// =============================================
+
+$spin-animations:     true !default;
+$spin-helpers:        "spin" "spin-once" "spin-twice" "spin-thrice"
+                      "spin-fast" "spin-fast-once" "spin-fast-twice" "spin-fast-thrice"
+                      "spin-slow" "spin-slow-once" "spin-slow-twice" "spin-slow-thrice" !default;
+
+@mixin animation($animation: spin, $count: infinite, $speed: 2s, $easing: linear) {
+  animation: $animation $speed $easing;
+  animation-iteration-count: $count;
+}
+@mixin spin($count: infinite, $speed: 2s) {
+  @include animation(spin, $count, $speed);
+}
+
+@mixin _spin                      { @include _inline; @include spin; }
+@mixin _spin-once                 { @include _inline; @include spin(1); }
+@mixin _spin-twice                { @include _inline; @include spin(2); }
+@mixin _spin-thrice               { @include _inline; @include spin(3); }
+@mixin _spin-fast                 { @include _inline; @include spin(infinite,1s); }
+@mixin _spin-fast-once            { @include _inline; @include spin(1,1s); }
+@mixin _spin-fast-twice           { @include _inline; @include spin(2,1s); }
+@mixin _spin-fast-thrice          { @include _inline; @include spin(3,1s); }
+@mixin _spin-slow                 { @include _inline; @include spin(infinite,5s); }
+@mixin _spin-slow-once            { @include _inline; @include spin(1,5s); }
+@mixin _spin-slow-twice           { @include _inline; @include spin(2,5s); }
+@mixin _spin-slow-thrice          { @include _inline; @include spin(3,5s); }
+
+%spin             { @include _spin; }
+%spin-once        { @include _spin-once; }
+%spin-twice       { @include _spin-twice; }
+%spin-thrice      { @include _spin-thrice; }
+%spin-fast        { @include _spin-fast; }
+%spin-fast-once   { @include _spin-fast-once; }
+%spin-fast-twice  { @include _spin-fast-twice; }
+%spin-fast-thrice { @include _spin-fast-thrice; }
+%spin-slow        { @include _spin-slow; }
+%spin-slow-once   { @include _spin-slow-once; }
+%spin-slow-twice  { @include _spin-slow-twice; }
+%spin-slow-thrice { @include _spin-slow-thrice; }
+
+@if $spin-animations {
+
+  @keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(359deg); }
+  }
+
+  @for $i from 1 through length($spin-helpers) {
+    .#{nth($spin-helpers, $i)} {
+      @extend %#{nth($spin-helpers, $i)};
+    }
+  }
+}

data/app/assets/stylesheets/groundworkcss/anim/_swing.scss

@@ -0,0 +1,18 @@
+$swing-animations: true !default;
+
+
+@if $swing-animations {
+
+  @keyframes swing {
+    20% { transform: rotate(15deg); }
+    40% { transform: rotate(-10deg); }
+    60% { transform: rotate(5deg); }
+    80% { transform: rotate(-5deg); }
+    100% { transform: rotate(0deg); }
+  }
+
+  .swing {
+    transform-origin: top center;
+    animation-name: swing;
+  }
+}

data/app/assets/stylesheets/groundworkcss/anim/_tada.scss

@@ -0,0 +1,17 @@
+$tada-animations: true !default;
+
+
+@if $tada-animations {
+
+  @keyframes tada {
+    0% {transform: scale(1);}
+    10%, 20% {transform: scale(0.9) rotate(-3deg);}
+    30%, 50%, 70%, 90% {transform: scale(1.1) rotate(3deg);}
+    40%, 60%, 80% {transform: scale(1.1) rotate(-3deg);}
+    100% {transform: scale(1) rotate(0);}
+  }
+
+  .tada {
+    animation-name: tada;
+  }
+}

data/app/assets/stylesheets/groundworkcss/anim/_wiggle.scss

@@ -0,0 +1,28 @@
+$wiggle-animations: true !default;
+
+
+@if $wiggle-animations {
+
+  @keyframes wiggle {
+    0% { transform: skewX(9deg); }
+    10% { transform: skewX(-8deg); }
+    20% { transform: skewX(7deg); }
+    30% { transform: skewX(-6deg); }
+    40% { transform: skewX(5deg); }
+    50% { transform: skewX(-4deg); }
+    60% { transform: skewX(3deg); }
+    70% { transform: skewX(-2deg); }
+    80% { transform: skewX(1deg); }
+    90% { transform: skewX(0deg); }
+    100% { transform: skewX(0deg); }
+  }
+
+  .wiggle {
+    animation-name: wiggle;
+    animation-timing-function: ease-in;
+  }
+
+  .animated.wiggle {
+    animation-duration: 0.75s;
+  }
+}

data/app/assets/stylesheets/groundworkcss/anim/_wobble.scss

@@ -0,0 +1,19 @@
+$wobble-animations: true !default;
+
+
+@if $wobble-animations {
+
+  @keyframes wobble {
+    0% { transform: translateX(0%); }
+    15% { transform: translateX(-25%) rotate(-5deg); }
+    30% { transform: translateX(20%) rotate(3deg); }
+    45% { transform: translateX(-15%) rotate(-3deg); }
+    60% { transform: translateX(10%) rotate(2deg); }
+    75% { transform: translateX(-5%) rotate(-1deg); }
+    100% { transform: translateX(0%); }
+  }
+
+  .wobble {
+    animation-name: wobble;
+  }
+}

data/app/assets/stylesheets/groundworkcss/base/_all-base.scss

@@ -1,9 +1,12 @@
 // =============================================
 //       GroundworkCSS by Gary Hepting
-//          Last Updated:2013-6-23
+//          Last Updated:2013-8-16
 // =============================================
 
 
+
+
+// base styles
 @import "reset";
 @import "global";
 @import "helpers";

data/app/assets/stylesheets/groundworkcss/base/_flex-box.scss

@@ -1,41 +1,26 @@
 // =============================================
 //             Flexbox Helpers
-//          Last Updated:2013-6-28
+//          Last Updated:2013-8-16
 // =============================================
 
+$flexbox-classes: true !default; // enable output of flexbox classes (optional)
+$flexbox-helpers: "flex-wrapper" "flex-box" "vertical-center" !default;
+
 
 @mixin flex-wrapper() {
-  display: -webkit-box;             // OLD - iOS 6-, Safari 3.1-6
-  display: -moz-box;                // OLD - Firefox 19- (buggy but mostly works)
-  display: -ms-flexbox;             // TWEENER - IE 10
-  display: -webkit-flex;            // NEW - Chrome
-  display: flex;                    // New spec - Opera 12.1, Firefox 20+
+  display: flex;
 }
 
 @mixin flex-box($values: 1) {
-  width: percent(1/$values);        // For old syntax, otherwise collapses.
-  -webkit-box-flex: $values;        // OLD - iOS 6-, Safari 3.1-6
-  -moz-box-flex: $values;           // OLD - Firefox 19-
-  -webkit-flex: $values;            // Chrome
-  -ms-flex: $values;                // IE 10
-  flex: $values;                    // New spec - Opera 12.1, Firefox 20+
+  width: percent(1/$values);
+  flex: $values;
 }
 
 @mixin flex-order($val) {
-  -webkit-box-ordinal-group: $val;  // OLD - iOS 6-, Safari 3.1-6
-  -moz-box-ordinal-group: $val;     // OLD - Firefox 19-
-  -ms-flex-order: $val;             // IE 10
-  -webkit-order: $val;              // Chrome
-  order: $val;                      // New spec
+  order: $val;
 }
 
 @mixin vertical-center() {
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-box-pack: center;
-  display: -moz-box;
-  -moz-box-orient: vertical;
-  -moz-box-pack: center;
   display: box;
   box-orient: vertical;
   box-pack: center;

data/app/assets/stylesheets/groundworkcss/base/_global.scss

@@ -1,40 +1,46 @@
 // =============================================
 //               Global Styles
-//          Last Updated:2013-6-23
+//          Last Updated:2013-8-16
 // =============================================
 
+$global-tags:       true !default;
+$gutter:            10px !default;
+$background-color:  #ffffff !default;
+$border-thickness:    1px !default;
+$border-style:        solid !default;
+$border-color:        #dddddd !default;
 
-%html {
-  width:100%;
-  height:100%;
-}
 
 %document {
-  width:100% !important;
-  min-height:100%;
-  background:$background-color;
-  margin:0;
-  padding:0;
+  @extend %zero;
+  width: 100% !important;
+  min-height: 100%;
+  background: $background-color;
+}
+
+%html {
+  width: 100%;
+  height: 100%;
 }
 
 %hr {
-  border:0;
-  border-bottom:1px solid $border-color;
-  margin:$gutter auto;
-  clear:both;
+  border: 0;
+  border-bottom: $border-thickness $border-style $border-color;
+  margin: $gutter auto;
+  clear: both;
 }
 
 %img {
-  max-width:100%;
-  border:none;
+  max-width: 100%;
+  border: none;
 }
 
 @if $global-tags {
   $elements: html hr img;
   @for $i from 1 through length($elements) {
-		#{nth($elements, $i)} {
-			@extend %#{nth($elements, $i)};
-		}
+    #{nth($elements, $i)} {
+      @extend %#{nth($elements, $i)};
+    }
   }
   html, body {
     @extend %document;