groundworkcss 0.2.2 → 0.2.3

data/vendor/assets/stylesheets/groundworkcss/_settings.scss

@@ -1 +1,301 @@
-@import "rails-settings";
+// =============================================
+//              Custom Settings
+//          Last Updated:2013-6-24
+// =============================================
+
+
+///////////////////////
+//     framework     //
+///////////////////////
+
+// file paths
+// $root_path:           "../";      // path to HTML document root (relative from CSS)
+// $images_path:         "images/";  // path to images (relative from $root_path)
+// $fonts_path:          "fonts/";    // path to fonts (relative from $root_path)
+// $boxsizing_path:      "/js/libs/boxsizing.htc";  // path to box sizing polyfill (change to absolute path from HTML document root)
+
+// build options
+// $reset:               true;       // enable CSS reset (recommended)
+// elements that will be reset (refine this to only include elements that you actually use in your markup patterns for optimal performance)
+// $reset-elements:      html body
+//                       div span header footer aside nav menu section article details
+//                       h1 h2 h3 h4 h5 h6 p
+//                       ol ul li dl dt dd
+//                       em small big strong b u i sub sup del strike
+//                       blockquote cite pre code time address
+//                       a img center hr
+//                       form fieldset legend label input textarea button
+//                       table caption tbody thead tfoot tr th td
+//                       iframe object canvas audio video;
+
+// $global-tags:         true;       // enable output in base/_global.scss  (recommended)
+
+// grid settings
+// $grid-classes:        true;       // enable output of grid classes       (recommended)
+// $numerators:          one    two    three  four    five   six    seven    eight   nine   ten    eleven    twelve;
+// $denominators:        whole  half   third  fourth  fifth  sixth  seventh  eighth  ninth  tenth  eleventh  twelfth;
+// $denominators-plural: wholes halves thirds fourths fifths sixths sevenths eighths ninths tenths elevenths twelfths;
+// $grid-adapters:       $one-whole $one-half $one-third $one-fourth $one-fifth;
+// $max-width:           1200px;     // maximum container width (i.e. - 960px)
+// $gutter:              10px;       // gutter spacing (used by padded/gapped helpers, elements with padding, etc.)
+
+// helper settings
+// $layout-classes:      true;       // enable output of layout helpers     (recommended)
+// $layout-helpers:      inline block
+//                       hidden
+//                       disabled
+//                       zero
+//                       pull-right pull-left clear
+//                       center;
+
+// $positioning-classes: true;       // enable output of position helpers   (optional)
+
+// $size-classes:        true;       // enable output of size helpers       (recommended)
+// $size-helpers:        small large;
+
+// $typography-classes:  true;       // enable output of typography helpers (recommended)
+// $typography-helpers:  align-top align-right align-bottom align-left align-center justify
+//                       truncate;
+
+// $border-classes:      true;       // enable output of border helpers     (optional)
+// $border-helpers:      bordered border-right border-left border-top border-bottom;
+
+// round/square
+// $default-radius:      4px;
+// $radius-classes:      true;       // enable output of radius helpers     (optional)
+// $radius-helpers:      square round;
+
+// rotation
+// $rotation-classes:    true;       // enable output of rotational helpers (optional)
+// $rotation-helpers:    rotate-90 rotate-180 rotate-270 rotate-90-ctr rotate-180-ctr rotate-270-ctr;
+
+// spinners
+// $spin-classes:        true;       // enable output of spin helpers       (optional)
+// $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;
+
+// spacers
+// $spacer-classes:      true;       // enable output of spacer helpers     (recommended)
+// $spacer-helpers:      padded pad-top pad-right pad-bottom pad-left
+//                       gapped gap-top gap-right gap-bottom gap-left;
+
+// spacer multipliers
+// $spacer-mod-classes:  true;       // enable output of spacer modifiers   (optional)
+// $spacer-modifiers:    double triple;
+
+// states
+// $ui-states:           disabled info alert warning error success;
+// $button-states:       on active disabled info alert warning error success;
+
+// typography
+// $type-tags:           true;       // enable output of type selectors     (recommended)
+// $type-elements:       h1 h2 h3 h4 h5 h6 p
+//                       ul ol dl
+//                       blockquote cite
+//                       small big em b strong
+//                       sup sub
+//                       del strike
+//                       code pre;
+// $type-colors:         true;       // enable output of colors classes     (optional)
+// $type-classes:        false;      // enable output of type classes       (optional)
+// $type-classnames:     h1 h2 h3 h4 h5 h6 p
+//                       ul ol dl
+//                       blockquote cite
+//                       small big large
+//                       b bold strong
+//                       em italic
+//                       sup sub
+//                       del strike
+//                       code pre
+//                       invalid valid
+//                       unstyled;
+// $styled-lists:        true;       // enable output of styled lists       (optional)
+
+// webfonts
+// $webfont-classes:     true;       // enable output of webfont classes    (optional)
+
+// buttons
+// $button-tags:         true;       // enable output of button selectors   (recommended)
+// $button-classes:      true;       // enable output of button classes     (recommended)
+// $button-modifiers:    small large on active square round block;
+
+// navigation
+// $nav-tags:            true;       // enable output of nav selectors      (optional)
+// $nav-classes:         true;
+
+// tabs
+// $tab-classes:         true;       // enable output of tab classes        (optional)
+
+// forms
+// $form-tags:           true;       // enable output of form selectors     (recommended)
+// $form-classes:        false;      // enable output of form classes       (optional)
+// $form-elements:       fieldset legend label input textarea;
+
+// tiles
+// $tiles:               true;       // enable output of tile classes       (optional)
+// $tile-modifiers:      on active small large square round disabled;
+
+// message & callout boxes
+// $ui-classes:          true;
+// $ui-modifiers:        dismissible;
+
+// tables
+// $table-tags:          true;
+// $table-classes:       true;
+
+// ARIA role selectors (WIP - nav, buttons, tabs, etc.)
+// $aria-selectors:      true;       // enable Aria role selectors
+
+
+///////////////////////
+//     typography    //
+///////////////////////
+
+// typography
+$base-font-size:      14px;        // base font size for Compass vertical rhythm
+$base-line-height:    18px;        // base line height for Compass vertical rhythm
+// $font-family:         Helvetica, Arial, Geneva, sans-serif;
+
+
+///////////////////////
+//     web fonts     //
+///////////////////////
+
+// font names (no spaces or special characters, these are used to build selectors)
+// $web-font-names:      AverageSans,
+//                       AmericanTypewriter;
+// font files (must all be named the same as listed below and include .eot, .woff and .ttf file types)
+// $web-font-files:      average-sans-webfont,
+//                       americantypewriterstd-bold;
+
+
+///////////////////////
+//       colors      //
+///////////////////////
+
+// base styles
+// $background-color:    #ffffff;
+// $font-color:          #2b2b2d;
+
+// links
+// $link-color:          #489AC1;
+// $link-active:         #198D98;
+
+// selection highlight
+// $selection-color:     $link-color;
+// $selection-text:      #ffffff;
+
+// borders
+// $border-thickness:    1px;
+// $border-style:        solid;
+// $border-color:        #dddddd;
+// $border:              #{$border-thickness} #{$border-style} #{$border-color};
+
+// buttons
+// $button-color:        #1DABB8;
+// $button-border-color: darken($button-color, 10%);
+// $button-active:       #198D98;
+// $button-text:         #ffffff;
+// $button-active-text:  #ffffff;
+
+// info
+// $info-color:          #3a87ad; // text only
+// $info-text:           #ffffff; // box text
+// $info-background:     #d9edf7;
+// $info-border:         #bce8f1;
+
+// alert
+// $alert-color:         #c09853; // text only
+// $alert-text:          #ffffff; // box text
+// $alert-background:    #fcf8e3;
+// $alert-border:        #fbeee0;
+
+// error
+// $error-color:         #b94a48; // text only
+// $error-text:          #ffffff; // box text
+// $error-background:    #f2dede;
+// $error-border:        #eed3d7;
+
+// warning
+// $warning-color:       #FF971E; // text only
+// $warning-text:        #ffffff; // box text
+// $warning-background:  #FFE5C7;
+// $warning-border:      #FFDBB3;
+
+// success
+// $success-color:       #468847; // text only
+// $success-text:        #ffffff; // box text
+// $success-background:  #dff0d8;
+// $success-border:      #d6e9c6;
+
+// disabled
+// $disabled-color:      #808080; // text only
+// $disabled-text:       #ffffff; // box text
+// $disabled-background: lighten($disabled-color, 20%);
+// $disabled-border:     darken($disabled-color, 10%);
+
+// modifier states
+// $state-name:          "info"       "alert"       "warning"       "error"       "success"       "disabled"      ;
+// $state-code:          $info-color  $alert-color  $warning-color  $error-color  $success-color  $disabled-color ;
+// $state-text:          $info-text   $alert-text   $warning-text   $error-text   $success-text   $disabled-text  ;
+
+// modifier colors
+// $green:               #2ecc71;
+// $blue:                #3498db;
+// $purple:              #9b59b6;
+// $yellow:              #f1c40f;
+// $orange:              #e67e22;
+// $red:                 #e74c3c;
+// $pink:                #f02475;
+// $turquoise:           #1abc9c;
+// $asphalt:             #34495e;
+
+// $modifier-name:       "green"   "blue"   "purple"   "yellow"   "orange"   "red"   "pink"   "turquoise"   "asphalt" ;
+// $modifier-code:       $green    $blue    $purple    $yellow    $orange    $red    $pink    $turquoise    $asphalt  ;
+// $modifier-text:       $white    $white   $white     $white     $white     $white  $white   $white        $white    ;
+
+
+///////////////////////
+//      modals       //
+///////////////////////
+
+// overlay
+// $overlay-color:                   #0b0b0b;                    // Color of overlay screen
+// $overlay-opacity:                 0.5;                        // Opacity of overlay screen
+// $shadow:                          0 0 8px rgba(0, 0, 0, 0.6); // Shadow on image or iframe
+
+// spacing
+// $popup-padding-left:              8px;                        // Padding from left and from right side
+// $popup-padding-left-mobile:       6px;                        // Same as above, but is applied when width of window is less than 800px
+
+// $z-index-base:                    500;                        // Base z-index of popup
+
+// controls
+// $include-arrows:                  true;                       // Include styles for nav arrows
+// $controls-opacity:                0.65;                       // Opacity of controls
+// $controls-color:                  #FFF;                       // Color of controls
+// $inner-close-icon-color:          #333;                       // Color of close button when inside
+// $controls-text-color:             #CCC;                       // Color of preloader and '1 of X' indicator
+// $controls-text-color-hover:       #FFF;                       // Hover color of preloader and '1 of X' indicator
+// $IE7support:                      true;                       // Very basic IE7 support
+
+// Inline-type options
+// $modal-max-width:                 $max-width;                 // Maximum width of inline modals
+
+// Iframe-type options
+// $include-iframe-type:             true;                       // Enable Iframe-type popups
+// $iframe-padding-top:              ($gutter*4);                // Iframe padding top
+// $iframe-background:               #000;                       // Background color of iframes
+// $iframe-max-width:                $max-width;                 // Maximum width of iframes
+// $iframe-ratio:                    9/16;                       // Ratio of iframe (9/16 = widescreen, 3/4 = standard, etc.)
+
+// Image-type options
+// $include-image-type:              true;                       // Enable Image-type popups
+// $image-padding-top:               ($gutter*4);                // Image padding top
+// $image-padding-bottom:            ($gutter*4);                // Image padding bottom
+// $include-mobile-layout-for-image: true;                       // Removes paddings from top and bottom
+
+// Image caption options
+// $caption-title-color:             #F3F3F3;                    // Caption title color
+// $caption-subtitle-color:          #BDBDBD;                    // Caption subtitle color

data/vendor/assets/stylesheets/groundworkcss/base/{_all.scss → _all-base.scss}

@@ -1,11 +1,10 @@
 // =============================================
 //       GroundworkCSS by Gary Hepting
-//          Last Updated:2013-4-24
+//          Last Updated:2013-6-23
 // =============================================
 
 
-// reset (box sizing)
 @import "reset";
 @import "global";
-@import "grid";
 @import "helpers";
+@import "grid";

data/vendor/assets/stylesheets/groundworkcss/base/_animations.scss

@@ -6,7 +6,7 @@
 
 
 
-// spin (required by helpers)
+// spin (required by spinner helpers)
 @-moz-keyframes spin {
   0% { -moz-transform: rotate(0deg); }
   100% { -moz-transform: rotate(359deg); }

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

@@ -1,14 +1,9 @@
 // =============================================
 //               Global Styles
-//          Last Updated:2013-4-24
+//          Last Updated:2013-6-23
 // =============================================
 
 
-
-
-///////////////////////
-//   global styles   //
-///////////////////////
 %html {
   width:100%;
   height:100%;
@@ -34,13 +29,11 @@
   border:none;
 }
 
-@if $tags {
+@if $global-tags {
   $elements: html hr img;
   @for $i from 1 through length($elements) {
-		@if not index($tag-elements, nth($elements, $i)) == false {
-			#{nth($elements, $i)} {
-				@extend %#{nth($elements, $i)};
-			}
+		#{nth($elements, $i)} {
+			@extend %#{nth($elements, $i)};
 		}
   }
   html, body {
@@ -50,15 +43,3 @@
     @extend %img;
   }
 }
-
-@if $classes {
-  $names: html document hr img;
-  @for $i from 1 through length($names) {
-    .#{nth($names, $i)} {
-      @extend %#{nth($names, $i)};
-    }
-  }
-	.html, .body {
-		@extend %document;
-	}
-}

data/vendor/assets/stylesheets/groundworkcss/base/_grid.scss

@@ -39,41 +39,35 @@
   margin-right: auto !important;
 }
 
-@if $classes {
+@if $grid-classes {
   .container          { @extend %container; }
   .row                { @extend %row; }
   .column             { @extend %column; }
   .centered           { @extend %centered; }
 }
 
-$selectors: if($classes, "%" ".", "%");
-
-$numbers: one two three four five six seven eight nine ten eleven twelve;
-$fractions: whole half third fourth fifth sixth seventh eighth ninth tenth eleventh twelfth;
-$fractions-plural: wholes halves thirds fourths fifths sixths sevenths eighths ninths tenths elevenths twelfths;
-$adapters: $one-half $one-third $one-fourth $one-fifth;
-
-// function to generate the grid code (placeholders and optionally, classes)
+// generate grid selectors
+$selectors: if($grid-classes, "%" ".", "%");
 @for $i from 1 through length($selectors) {
-  @for $j from 1 through length($numbers) {
-    #{nth($selectors, $i) + nth($fractions, $j)},
-    #{nth($selectors, $i) + nth($fractions-plural, $j)} {
+  @for $j from 1 through length($numerators) {
+    #{nth($selectors, $i) + nth($denominators, $j)},
+    #{nth($selectors, $i) + nth($denominators-plural, $j)} {
       width: percentage(1 / $j);
       @extend %column;
       @for $width from 1 through $j {
-        &#{nth($selectors, $i) + nth($numbers, $width)} {
+        &#{nth($selectors, $i) + nth($numerators, $width)} {
           width: percentage($width / $j);
           @extend %column;
         }
       }
       @for $right-left-skip from 1 through $j - 1 {
-        &#{nth($selectors, $i) + "right-" + nth($numbers, $right-left-skip)} {
+        &#{nth($selectors, $i) + "right-" + nth($numerators, $right-left-skip)} {
           left: percentage($right-left-skip / $j);
         }
-        &#{nth($selectors, $i) + "left-" + nth($numbers, $right-left-skip)} {
+        &#{nth($selectors, $i) + "left-" + nth($numerators, $right-left-skip)} {
           right: percentage($right-left-skip / $j);
         }
-        &#{nth($selectors, $i) + "skip-" + nth($numbers, $right-left-skip)} {
+        &#{nth($selectors, $i) + "skip-" + nth($numerators, $right-left-skip)} {
           margin-left: percentage($right-left-skip / $j);
         }
       }
@@ -83,21 +77,34 @@ $adapters: $one-half $one-third $one-fourth $one-fifth;
 
 // small-tablet grid adapters
 @media #{$small-tablet} {
-  @for $i from 1 through 4 {
-    .#{nth($numbers, ($i + 1))}-up-small-tablet {
-      width: nth($adapters, $i) !important;
+  @for $i from 1 through length($grid-adapters) {
+    .#{nth($numerators, ($i))}-up-small-tablet {
+      width: nth($grid-adapters, $i) !important;
       clear: none !important;
       float: left !important;
     }
   }
 }
+// grid adapter nth clearfix
+@media #{$small-tablet} and #{$not-mobile} {
+  @for $i from 1 through length($grid-adapters) {
+    .#{nth($numerators, ($i))}-up-small-tablet {
+      &:nth-child(#{$i + 1}) {
+        clear: both !important;
+      }
+    }
+  }
+}
 // mobile grid adapters
 @media #{$mobile} {
-  @for $i from 1 through 4 {
-    .#{nth($numbers, ($i + 1))}-up-mobile {
-      width: nth($adapters, $i) !important;
+  @for $i from 1 through length($grid-adapters) {
+    .#{nth($numerators, ($i))}-up-mobile {
+      width: nth($grid-adapters, $i) !important;
       clear: none !important;
       float: left !important;
+      &:nth-child(#{$i + 1}) {
+        clear: both !important;
+      }
     }
   }
 }
@@ -115,7 +122,7 @@ $adapters: $one-half $one-third $one-fourth $one-fifth;
   %ninth, %ninths,
   %tenth, %tenths,
   %eleventh, %elevenths,
-  %twelfth, %twelfths#{if($classes, ", .half, .halves, .third, .thirds, .fourth, .fourths, .fifth, .fifths, .sixth, .sixths, .seventh, .sevenths, .eighth, .eighths, .ninth, .ninths, .tenth, .tenths, .eleventh, .elevenths, .twelfth, .twelfths", "")} {
+  %twelfth, %twelfths#{if($grid-classes, ", .half, .halves, .third, .thirds, .fourth, .fourths, .fifth, .fifths, .sixth, .sixths, .seventh, .sevenths, .eighth, .eighths, .ninth, .ninths, .tenth, .tenths, .eleventh, .elevenths, .twelfth, .twelfths", "")} {
     @if $both {
       &:not(.small-tablet):not(.mobile):not(.two-up-mobile):not(.three-up-mobile):not(.four-up-mobile):not(.five-up-mobile):not(.two-up-small-tablet):not(.three-up-small-tablet):not(.four-up-small-tablet):not(.five-up-small-tablet) {
         @include grid-collapse();
@@ -129,6 +136,26 @@ $adapters: $one-half $one-third $one-fourth $one-fifth;
   }
 }
 
+@media #{$small-tablet} and #{$not-mobile} {
+  @for $i from 1 through length($grid-adapters) {
+    .#{nth($numerators, ($i))}-up-small-tablet {
+      &:nth-child(#{$i + 1}) {
+        clear: both !important;
+      }
+    }
+  }
+}
+
+@media #{$mobile} {
+  @for $i from 1 through length($grid-adapters) {
+    .#{nth($numerators, ($i))}-up-mobile {
+      &:nth-child(#{$i + 1}) {
+        clear: both !important;
+      }
+    }
+  }
+}
+
 @mixin grid-collapse() {
   width:100% !important;
   float:none;
@@ -144,7 +171,7 @@ $adapters: $one-half $one-third $one-fourth $one-fifth;
   &%right-eight,
   &%right-nine,
   &%right-ten,
-  &%right-eleven#{if($classes, ", &.right-one, &.right-two, &.right-three, &.right-four, &.right-five, &.right-six, &.right-seven, &.right-eight, &.right-nine, &.right-ten, &.right-eleven", "")}  { left:0; }
+  &%right-eleven#{if($grid-classes, ", &.right-one, &.right-two, &.right-three, &.right-four, &.right-five, &.right-six, &.right-seven, &.right-eight, &.right-nine, &.right-ten, &.right-eleven", "")}  { left:0; }
   // reset pull
   &%left-one,
   &%left-two,
@@ -156,7 +183,7 @@ $adapters: $one-half $one-third $one-fourth $one-fifth;
   &%left-eight,
   &%left-nine,
   &%left-ten,
-  &%left-eleven#{if($classes, ", &.left-one, &.left-two, &.left-three, &.left-four, &.left-five, &.left-six, &.left-seven, &.left-eight, &.left-nine, &.left-ten, &.left-eleven", "")}   { right:0; }
+  &%left-eleven#{if($grid-classes, ", &.left-one, &.left-two, &.left-three, &.left-four, &.left-five, &.left-six, &.left-seven, &.left-eight, &.left-nine, &.left-ten, &.left-eleven", "")}   { right:0; }
   // reset offset
   &%skip-one,
   &%skip-two,
@@ -168,5 +195,5 @@ $adapters: $one-half $one-third $one-fourth $one-fifth;
   &%skip-eight,
   &%skip-nine,
   &%skip-ten,
-  &%skip-eleven#{if($classes, ", &.skip-one, &.skip-two, &.skip-three, &.skip-four, &.skip-five, &.skip-six, &.skip-seven, &.skip-eight, &.skip-nine, &.skip-ten, &.skip-eleven", "")}   { margin-left:0; }
+  &%skip-eleven#{if($grid-classes, ", &.skip-one, &.skip-two, &.skip-three, &.skip-four, &.skip-five, &.skip-six, &.skip-seven, &.skip-eight, &.skip-nine, &.skip-ten, &.skip-eleven", "")}   { margin-left:0; }
 }