groundworkcss 2.0.4 → 2.2.1

data/app/assets/stylesheets/groundworkcss/anim/_all-animations.scss

@@ -35,3 +35,4 @@ body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */
 @import "tada";
 @import "wiggle";
 @import "wobble";
+@import "slide";

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

@@ -0,0 +1,96 @@
+$slide-animations: true !default;
+
+
+@if $slide-animations {
+
+  @keyframes slideInDown {
+    0% {
+      opacity: 0;
+      transform: translateY(-2000px);
+    }
+
+    100% {
+      transform: translateY(0);
+    }
+  }
+
+  .slideInDown {
+    animation-name: slideInDown;
+  }
+
+  @keyframes slideInLeft {
+    0% {
+      opacity: 0;
+      transform: translateX(-2000px);
+    }
+
+    100% {
+      transform: translateX(0);
+    }
+  }
+
+  .slideInLeft {
+    animation-name: slideInLeft;
+  }
+
+  @keyframes slideInRight {
+    0% {
+      opacity: 0;
+      transform: translateX(2000px);
+    }
+
+    100% {
+      transform: translateX(0);
+    }
+  }
+
+  .slideInRight {
+    animation-name: slideInRight;
+  }
+
+  @keyframes slideOutLeft {
+    0% {
+      transform: translateX(0);
+    }
+
+    100% {
+      opacity: 0;
+      transform: translateX(-2000px);
+    }
+  }
+
+  .slideOutLeft {
+    animation-name: slideOutLeft;
+  }
+
+  @keyframes slideOutRight {
+    0% {
+      transform: translateX(0);
+    }
+
+    100% {
+      opacity: 0;
+      transform: translateX(2000px);
+    }
+  }
+
+  .slideOutRight {
+    animation-name: slideOutRight;
+  }
+
+  @keyframes slideOutUp {
+    0% {
+      transform: translateY(0);
+    }
+
+    100% {
+      opacity: 0;
+      transform: translateY(-2000px);
+    }
+  }
+
+  .slideOutUp {
+    animation-name: slideOutUp;
+  }
+
+}

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

@@ -37,6 +37,7 @@ $rotation-classes:    true !default;
 $rotation-helpers:    "rotate-90" "rotate-90-ctr" "rotate-180" "rotate-180-ctr" "rotate-270" "rotate-270-ctr" "rotate-360" "rotate-360-ctr" !default;
 
 $transition-classes:  true !default;
+$gutter:              10px !default;
 
 
 ///////////////////////
@@ -147,83 +148,80 @@ $transition-classes:  true !default;
   &:after         { content: " "; display: block; height: 0; font-size: 0; clear: both; visibility: hidden; }
 }
 
-%padded           { @include _padded;
-  &.half          { @include _padded(0.5); }
-  &%double        { @include _padded(2); }
-  &%triple        { @include _padded(3); }
-}
-%pad-top          { @include _pad-top;
-  &.half          { @include _pad-top(0.5); }
-  &%double        { @include _pad-top(2); }
-  &%triple        { @include _pad-top(3); }
-}
-%pad-right        { @include _pad-right;
-  &.half          { @include _pad-right(0.5); }
-  &%double        { @include _pad-right(2); }
-  &%triple        { @include _pad-right(3); }
-}
-%pad-bottom       { @include _pad-bottom;
-  &.half          { @include _pad-bottom(0.5); }
-  &%double        { @include _pad-bottom(2); }
-  &%triple        { @include _pad-bottom(3); }
-}
-%pad-left         { @include _pad-left;
-  &.half          { @include _pad-left(0.5); }
-  &%double        { @include _pad-left(2); }
-  &%triple        { @include _pad-left(3); }
-}
-
-%gapped           { @include _gapped;
-  &.half          { @include _gapped(0.5); }
-  &%double        { @include _gapped(2); }
-  &%triple        { @include _gapped(3); }
-}
-%gap-top          { @include _gap-top;
-  &.half          { @include _gap-top(0.5); }
-  &%double        { @include _gap-top(2); }
-  &%triple        { @include _gap-top(3); }
-}                   
-%gap-right        { @include _gap-right;
-  &.half          { @include _gap-right(0.5); }
-  &%double        { @include _gap-right(2); }
-  &%triple        { @include _gap-right(3); }
-}                   
-%gap-bottom       { @include _gap-bottom;
-  &.half          { @include _gap-bottom(0.5); }
-  &%double        { @include _gap-bottom(2); }
-  &%triple        { @include _gap-bottom(3); }
-}                   
-%gap-left         { @include _gap-left;
-  &.half          { @include _gap-left(0.5); }
-  &%double        { @include _gap-left(2); }
-  &%triple        { @include _gap-left(3); }
-}
-
-%offset           { @include _offset;
-  &.half          { @include _offset(0.5); }
-  &%double        { @include _offset(2); }
-  &%triple        { @include _offset(3); }
-}
-%offset-top       { @include _offset-top;
-  &.half          { @include _offset-top(0.5); }
-  &%double        { @include _offset-top(2); }
-  &%triple        { @include _offset-top(3); }
-}
-%offset-right     { @include _offset-right;
-  &.half          { @include _offset-right(0.5); }
-  &%double        { @include _offset-right(2); }
-  &%triple        { @include _offset-right(3); }
-}
-%offset-bottom    { @include _offset-bottom;
-  &.half          { @include _offset-bottom(0.5); }
-  &%double        { @include _offset-bottom(2); }
-  &%triple        { @include _offset-bottom(3); }
-}
-%offset-left      { @include _offset-left;
-  &.half          { @include _offset-left(0.5); }
-  &%double        { @include _offset-left(2); }
-  &%triple        { @include _offset-left(3); }
-}
+%padded               { @include _padded; }
+%half-padded          { @include _padded(0.5); }
+%double-padded        { @include _padded(2); }
+%triple-padded        { @include _padded(3); }
+
+%pad-top              { @include _pad-top; }
+%half-pad-top         { @include _pad-top(0.5); }
+%double-pad-top       { @include _pad-top(2); }
+%triple-pad-top       { @include _pad-top(3); }
+
+%pad-right            { @include _pad-right; }
+%half-pad-right       { @include _pad-right(0.5); }
+%double-pad-right     { @include _pad-right(2); }
+%triple-pad-right     { @include _pad-right(3); }
+
+%pad-bottom           { @include _pad-bottom; }
+%half-pad-bottom      { @include _pad-bottom(0.5); }
+%double-pad-bottom    { @include _pad-bottom(2); }
+%triple-pad-bottom    { @include _pad-bottom(3); }
+
+%pad-left             { @include _pad-left; }
+%half-pad-left        { @include _pad-left(0.5); }
+%double-pad-left      { @include _pad-left(2); }
+%triple-pad-left      { @include _pad-left(3); }
+
+%gapped               { @include _gapped; }
+%half-gapped          { @include _gapped(0.5); }
+%double-gapped        { @include _gapped(2); }
+%triple-gapped        { @include _gapped(3); }
+
+%gap-top              { @include _gap-top; }
+%half-gap-top         { @include _gap-top(0.5); }
+%double-gap-top       { @include _gap-top(2); }
+%triple-gap-top       { @include _gap-top(3); }
+
+%gap-right            { @include _gap-right; }
+%half-gap-right       { @include _gap-right(0.5); }
+%double-gap-right     { @include _gap-right(2); }
+%triple-gap-right     { @include _gap-right(3); }
+
+%gap-bottom           { @include _gap-bottom; }
+%half-gap-bottom      { @include _gap-bottom(0.5); }
+%double-gap-bottom    { @include _gap-bottom(2); }
+%triple-gap-bottom    { @include _gap-bottom(3); }
+
+%gap-left             { @include _gap-left; }
+%half-gap-left        { @include _gap-left(0.5); }
+%double-gap-left      { @include _gap-left(2); }
+%triple-gap-left      { @include _gap-left(3); }
+
+%offset               { @include _offset; }
+%half-offset          { @include _offset(0.5); }
+%double-offset        { @include _offset(2); }
+%triple-offset        { @include _offset(3); }
+
+%offset-top           { @include _offset-top; }
+%half-offset-top      { @include _offset-top(0.5); }
+%double-offset-top    { @include _offset-top(2); }
+%triple-offset-top    { @include _offset-top(3); }
+
+%offset-right         { @include _offset-right; }
+%half-offset-right    { @include _offset-right(0.5); }
+%double-offset-right  { @include _offset-right(2); }
+%triple-offset-right  { @include _offset-right(3); }
+
+%offset-bottom        { @include _offset-bottom; }
+%half-offset-bottom   { @include _offset-bottom(0.5); }
+%double-offset-bottom { @include _offset-bottom(2); }
+%triple-offset-bottom { @include _offset-bottom(3); }
+
+%offset-left          { @include _offset-left; }
+%half-offset-left     { @include _offset-left(0.5); }
+%double-offset-left   { @include _offset-left(2); }
+%triple-offset-left   { @include _offset-left(3); }
 
 %fixed            { @include _fixed; }
 %fixed-top        { @include _fixed(top); }
@@ -354,10 +352,10 @@ $transition-classes:  true !default;
   @for $i from 1 through length($spacer-helpers) {
     .#{nth($spacer-helpers, $i)} {
       @extend %#{nth($spacer-helpers, $i)};
-      @if $spacer-mod-classes {
-        @for $i from 1 through length($spacer-modifiers) {
-          &.#{nth($spacer-modifiers, $i)} { @extend %#{nth($spacer-modifiers, $i)}; }
-        }
+    }
+    @if $spacer-mod-classes {
+      @for $j from 1 through length($spacer-modifiers) {
+        .#{nth($spacer-modifiers, $j)}-#{nth($spacer-helpers, $i)} { @extend %#{nth($spacer-modifiers, $j)}-#{nth($spacer-helpers, $i)}; }
       }
     }
   }

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

@@ -9,7 +9,7 @@ $reset-elements:  "html" "body"
                   "h1" "h2" "h3" "h4" "h5" "h6" "p"
                   "ol" "ul" "li" "dl" "dt" "dd"
                   "em" "small" "big" "strong" "b" "u" "i" "sub" "sup" "del" "strike"
-                  "q" "quote" "blockquote" "cite"
+                  "q" "blockquote" "cite"
                   "time" "address"
                   "code" "pre"
                   "a" "img" "center" "hr"
@@ -20,7 +20,9 @@ $reset-elements:  "html" "body"
 
 %everything {
   @include box-sizing(border-box);
-  *behavior: url($boxsizing_path);  // IE 6-7  -- Thank Schepp for the polyfill for legacy IE browsers: https://github.com/Schepp/box-sizing-polyfill
+  @if $oldIE {
+    *behavior: url($boxsizing_path);  // IE 6-7  -- Thank Schepp for the polyfill for legacy IE browsers: https://github.com/Schepp/box-sizing-polyfill
+  }
   //
   // =======================================================
   //               the better box model

data/app/assets/stylesheets/groundworkcss/core/_defaults.scss

@@ -15,4 +15,6 @@ $fonts_path:          "fonts/" !default;    // path to fonts (relative from $roo
 $boxsizing_path:      "/js/libs/boxsizing.htc" !default;  // path to box sizing polyfill (change to absolute path from HTML document root)
 $PIE_path:            "/js/libs/PIE.htc" !default;  // path to IE CSS3 polyfill (change to absolute path from HTML document root)
 
+$oldIE:               false !default;
+
 @import "palette";

data/app/assets/stylesheets/groundworkcss/core/_mixins-core.scss

@@ -4,6 +4,7 @@
 // =============================================
 
 $font-family: Helvetica, Arial, Geneva, sans-serif !default;
+$oldIE: false !default;
 
 
 ///////////////////////
@@ -87,10 +88,10 @@ $font-family: Helvetica, Arial, Geneva, sans-serif !default;
   // works with compass 0.12
   @include background-image(linear-gradient($old, $startColor, $endColor));
   background-image: linear-gradient($correct, $startColor, $endColor); // override with correct css3 syntax
-
-  // For poor old IE
-  -pie-background: linear-gradient($correct, $startColor, $endColor);  // IE 6-7  -- Thank Jason for these polyfills for legacy IE browsers: http://css3pie.com/
-  *behavior: url($PIE_path);  // IE 6-7  -- Thank Jason for these polyfills for legacy IE browsers: http://css3pie.com/
+  @if $oldIE {
+    -pie-background: linear-gradient($correct, $startColor, $endColor);  // IE 6-7  -- Thank Jason for these polyfills for legacy IE browsers: http://css3pie.com/
+    *behavior: url($PIE_path);  // IE 6-7  -- Thank Jason for these polyfills for legacy IE browsers: http://css3pie.com/
+  }
 }
 
 // filter drop shadow
@@ -134,16 +135,6 @@ $font-family: Helvetica, Arial, Geneva, sans-serif !default;
   cursor: not-allowed;
   text-decoration: none;
   outline: none;
-    // &:hover, &:focus, &:visited {
-    //   color: lighten($color, 35%);
-    //   @if $mode != "textOnly" {
-    //   background: lighten($color, 15%);
-    //   border-color: $color;
-    //   }
-    //   cursor: not-allowed;
-    //   text-decoration: none;
-    //   outline: none;
-    // }
   }
 }
 
@@ -164,7 +155,7 @@ $font-family: Helvetica, Arial, Geneva, sans-serif !default;
 
 // responsive navigation
 @mixin hamburger-mode($filters: "") {
-    .nav#{$filters} {
+    .nav:not(.nocollapse)#{$filters} {
       &:before {
         float: left;
         display: inline-block;
@@ -186,6 +177,11 @@ $font-family: Helvetica, Arial, Geneva, sans-serif !default;
       }
       > ul {
         display: none;
+        > li {
+          > a, > button {
+            border-top-width: $border-thickness;
+          }
+        }
       }
       > ul[aria-expanded="true"] {
         display: block;
@@ -208,10 +204,13 @@ $font-family: Helvetica, Arial, Geneva, sans-serif !default;
         }
         &[role="menu"] {
           ul {
-            border: none;
-            a, button {
-              border-top: none;
-              border-bottom: $border-thickness $border-style $nav-border-color;
+            border: 0;
+            > li {
+              &:first-child {
+                > a, > button {
+                  border-top-width: $border-thickness;
+                }
+              }
             }
           }
           > a, > button {
@@ -233,24 +232,16 @@ $font-family: Helvetica, Arial, Geneva, sans-serif !default;
         display: block;
         width: 100%;
         text-align: left;
-        border-bottom: $border-thickness $border-style $nav-border-color;
       }
       @for $i from 1 through length($modifier-name) {
         &.#{nth($modifier-name, $i)} {
           li ul a, li[role="menu"] ul a, a,
           li ul button, li[role="menu"] ul button, button {
-            border-top: none;
-            border-bottom: $border-thickness $border-style darken(nth($modifier-code, $i), 5%);
             @include rounded(0);
           }
         }
       }
     }
-    > ul li:last-child {
-      a, button {
-        border-bottom: none;
-      }
-    }
 }
 
 
@@ -264,7 +255,9 @@ $font-family: Helvetica, Arial, Geneva, sans-serif !default;
     // no output if $default-radius is set to a zero value
   } @else {
     @include border-radius($radius);
-    *behavior: url($PIE_path);  // IE 6-7  -- Thank Jason for these polyfills for legacy IE browsers: http://css3pie.com/
+    @if $oldIE {
+      *behavior: url($PIE_path);  // IE 6-7  -- Thank Jason for these polyfills for legacy IE browsers: http://css3pie.com/
+    }
   }
 }
 

data/app/assets/stylesheets/groundworkcss/core/_palette.scss

@@ -39,6 +39,11 @@ $nav-border-color:    lighten(gray, 27.5%) !default;
 $nav-active:          lighten(gray, 27.5%) !default;
 $nav-active-text:     darken(gray, 12%) !default;
 
+// quotes
+$quote-color:         $font-color !default;
+$quote-background:    $border-color !default;
+$quote-font:          "source-sans-pro" !default;
+
 // info
 $info-color:          #3a87ad !default;
 $info-text:           #ffffff !default;

data/app/assets/stylesheets/groundworkcss/groundwork-anim.scss

@@ -0,0 +1,35 @@
+// ============================================
+//       GroundworkCSS Anim by Gary Hepting
+//          Last Updated:2013-9-27
+// ============================================
+
+
+//---------- CUSTOM SETTINGS: ----------//
+@import "settings";         // customizable settings
+
+
+
+//-------- REQUIRED COMPONENTS: --------//
+@import "core/all-core";    // constants, defaults, mixins, breakpoints, color palette
+@import "base/helpers";
+
+// Animations
+@import "anim/all-animations";
+// individual animation modules
+// @import "anim/bounce";
+// @import "anim/fade";
+// @import "anim/flash";
+// @import "anim/flip";
+// @import "anim/hinge";
+// @import "anim/lightspeed";
+// @import "anim/pulse";
+// @import "anim/roll";
+// @import "anim/rotate";
+// @import "anim/shake";
+// @import "anim/spin";
+// @import "anim/swing";
+// @import "anim/tada";
+// @import "anim/wiggle";
+// @import "anim/wobble";
+// @import "anim/slide";
+