groundworkcss 0.2.2 → 0.2.3

data/vendor/assets/stylesheets/groundworkcss/core/_mixins.scss

@@ -4,24 +4,26 @@
 // =============================================
 
 
-// ====================
-//     helper reset
-// ====================
+
+
+///////////////////////
+//    helper reset   //
+///////////////////////
 
 @mixin helper_reset($properties: padding margin, $spacers: padded pad-top pad-right pad-bottom pad-left gapped gap-top gap-right gap-bottom gap-left) {
   @for $i from 1 through length($spacers) {
     &.#{nth($spacers, $i)}, &.#{nth($spacers, $i)}.double, &.#{nth($spacers, $i)}.triple {
       @for $i from 1 through length($properties) {
-        #{nth($properties, $i)}:0 !important;
+        #{nth($properties, $i)}: 0 !important;
       }
     }
   }
 }
 
 
-// ====================
-//      functions
-// ====================
+///////////////////////
+//     functions     //
+///////////////////////
 
 // strip unit of measurement from a value
 @function numericvalue($val) {
@@ -30,177 +32,176 @@
   @return $number;
 }
 
-// ====================
-//      utilities
-// ====================
+
+///////////////////////
+//     utilities     //
+///////////////////////
 
 // inline image with fallback support for IE 7-
 @mixin data-image($file) {
-  background-image:url("#{$root_path}#{$images_path}#{$file}");       // fallback
-  background-image:inline-image($file);                               // data URI
-  *background-image:url("#{$root_path}#{$images_path}#{$file}");      // IE7- hack
+  background-image: url("#{$root_path}#{$images_path}#{$file}");        // fallback
+  background-image: inline-image($file);                                // data URI
+  *background-image: url("#{$root_path}#{$images_path}#{$file}");       // IE7- hack
 }
 
-// vertical gradient
-@mixin gradient($startColor:$white, $endColor:$gray-2, $direction:'top') {
+// gradient
+@mixin gradient($startColor: $white, $endColor: $gray-2, $direction: "top") {
   @include background-image(linear-gradient($direction, $startColor, $endColor));
 }
 
-// box shadow (deprecated)
-@mixin drop-shadow($color:rgba(0,0,0,0.2), $blur:5px, $x:2px, $y:2px) { // color, blur, x, y
-  @include box-shadow($color $x $y $blur);
-}
 // filter drop shadow
-@mixin filter-shadow($color:rgba(0,0,0,0.2), $blur:0, $x:0, $y:0) { // color, blur, x, y
-  -ms-filter: drop-shadow($x $y $blur $color); // IE9+
-  -o-filter: drop-shadow($x $y $blur $color); // Opera
-  -moz-filter: drop-shadow($x $y $blur $color); // Firefox
-  -webkit-filter: drop-shadow($x $y $blur $color); // Webkit (Safari, Chrome, other)
+@mixin filter-shadow($color: rgba(0,0,0,0.2), $blur: 0, $x: 0, $y: 0) {
+  -ms-filter: drop-shadow($x $y $blur $color);                          // IE9+
+  -o-filter: drop-shadow($x $y $blur $color);                           // Opera
+  -moz-filter: drop-shadow($x $y $blur $color);                         // Firefox
+  -webkit-filter: drop-shadow($x $y $blur $color);                      // Webkit (Safari, Chrome, other)
   filter: drop-shadow($x $y $blur $color);
-  // make filter: drop-shadow not look like poo on retina screens
-  -ms-transform: translateZ(0);
-  -o-transform: translateZ(0);
-  -moz-transform: translateZ(0);
-  -webkit-transform: translateZ(0);
-  transform: translateZ(0);
+  @media #{$retina} {
+    -ms-transform: translateZ(0);                                       // make filter nice and crisp on retina devices
+    -o-transform: translateZ(0);
+    -moz-transform: translateZ(0);
+    -webkit-transform: translateZ(0);
+    transform: translateZ(0);
+  }
 }
 
 // inner box shadow
-@mixin inner-shadow($color, $blur:0, $x:0, $y:0) { // color, blur, x, y
-  -ms-box-shadow:inset $x $y $blur $color; // IE10+
-  -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=#{$blur}, Direction=135, Color='#{ie-hex-str($color)}')"; // IE8
-  filter: progid:DXImageTransform.Microsoft.Shadow(Strength=#{$blur}, Direction=135, Color='#{ie-hex-str($color)}'); // IE7-
-  -o-box-shadow:inset $x $y $blur $color; // Opera
-  -moz-box-shadow:inset $x $y $blur $color; // Firefox
-  -webkit-box-shadow:inset $x $y $blur $color; // Webkit (Safari, Chrome, other)
-  box-shadow:inset $x $y $blur $color;
+@mixin inner-shadow($color, $blur: 0, $x: 0, $y: 0) {
+  -ms-box-shadow: inset $x $y $blur $color;                             // IE10+
+  -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=#{$blur}, Direction=135, Color='#{ie-hex-str($color)}')";  // IE8
+  filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=#{$blur}, Direction=135, Color='#{ie-hex-str($color)}')";      // IE7-
+  -o-box-shadow: inset $x $y $blur $color;                              // Opera
+  -moz-box-shadow: inset $x $y $blur $color;                            // Firefox
+  -webkit-box-shadow: inset $x $y $blur $color;                         // Webkit (Safari, Chrome, other)
+  box-shadow: inset $x $y $blur $color;
 }
 
 // text/UI Element states
-@mixin state($state:'disabled',$mode:normal,$color:default) {
-  @if $color == 'default' {
-    @if $state == 'disabled' {
+@mixin state($state: "disabled", $mode: normal, $color: default) {
+  @if $color == "default" {
+    @if $state == "disabled" {
       $color: $disabled-color;
-    }@else if $state == 'success' {
+    }@else if $state == "info" {
+      $color: $info-color;
+    }@else if $state == "success" {
       $color: $success-color;
-    }@else if $state == 'warning' {
+    }@else if $state == "warning" {
       $color: $warning-color;
-    }@else if $state == 'error' {
+    }@else if $state == "error" {
       $color: $error-color;
     }
   }
-  color:lighten($color, 35%);
-  @if $mode != 'textOnly' {
-  background:lighten($color, 15%);
-  border-color:$color;
+  color: lighten($color, 35%);
+  @if $mode != "textOnly" {
+  background: lighten($color, 15%);
+  border-color: $color;
   }
-  @if $state == 'disabled' {
-  cursor:not-allowed;
-  text-decoration:none;
-  outline:none;
+  @if $state == "disabled" {
+  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;
+      color: lighten($color, 35%);
+      @if $mode != "textOnly" {
+      background: lighten($color, 15%);
+      border-color: $color;
       }
-      cursor:not-allowed;
-      text-decoration:none;
-      outline:none;
+      cursor: not-allowed;
+      text-decoration: none;
+      outline: none;
     }
   }
 }
 
-// transition
-@mixin transition($transition:all 0.2s) {
-  -ms-transition:$transition; // IE10+
-  -o-transition:$transition; // Opera
-  -moz-transition:$transition; // Firefox
-  -webkit-transition:$transition; // Webkit (Safari, Chrome, other)
-  transition:$transition;
-}
 
-// border radius
-@mixin rounded($radius:4px) {
-  -ms-border-radius:$radius; // IE10+
-  -o-border-radius:$radius; // Opera
-  -moz-border-radius:$radius; // Firefox
-  -webkit-border-radius:$radius; // Webkit (Safari, Chrome, other)
-  border-radius:$radius;
-}
+///////////////////////
+//    CSS3 helpers   //
+///////////////////////
 
-// rotate
-@mixin rotate($deg:0deg) {
-  -ms-transform:rotate($deg); // IE10+
-  -o-transform:rotate($deg); // Opera
-  -moz-transform:rotate($deg); // Firefox
-  -webkit-transform:rotate($deg); // Webkit (Safari, Chrome, other)
-  transform:rotate($deg);
+// rounded corners
+@mixin rounded($radius: $default-radius) {
+  @if $radius == "0" or $radius == "0px" or $radius == "none" {
+    // no output if $default-radius is set to a zero value
+  } @else {
+    @include border-radius($radius);
+  }
 }
 
-// spin
-@mixin spin($count:infinite,$speed:2s,$easing:linear) {
-  -moz-animation: spin $speed $easing;
+// animations
+@mixin animation($animation: spin, $count: infinite, $speed: 2s, $easing: linear) {
+  -moz-animation: $animation $speed $easing;
   -moz-animation-iteration-count: $count;
-  -o-animation: spin $speed $easing;
+  -o-animation: $animation $speed $easing;
   -o-animation-iteration-count: $count;
-  -webkit-animation: spin $speed $easing;
+  -webkit-animation: $animation $speed $easing;
   -webkit-animation-iteration-count: $count;
-  animation: spin $speed $easing;
+  animation: $animation $speed $easing;
   animation-iteration-count: $count;
 }
-
-// scale
-@mixin scale($scale:0) {
-  -ms-transform:scale($scale); // IE10+
-  -o-transform:scale($scale); // Opera
-  -moz-transform:scale($scale); // Firefox
-  -webkit-transform:scale($scale); // Webkit (Safari, Chrome, other)
-  transform:scale($scale);
+// deprecated, use animation() now instead
+@mixin spin($count: infinite, $speed: 2s) {
+  @include animation(spin, $count, $speed);
 }
 
-// translate
-@mixin translate($x:0, $y:0) {
-  -ms-transform:translate($x,$y); // IE10+
-  -o-transform:translate($x,$y); // Opera
-  -moz-transform:translate($x,$y); // Firefox
-  -webkit-transform:translate($x,$y); // Webkit (Safari, Chrome, other)
-  transform:translate($x,$y);
-}
 
-// transform (translate, rotate & scale)
-@mixin transform($x:0, $y:0, $scale:0, $deg:0deg) {
-  -ms-transform:translate($x,$y) rotate($deg) scale($scale); // IE10+
-  -o-transform:translate($x,$y) rotate($deg) scale($scale); // Opera
-  -moz-transform:translate($x,$y) rotate($deg) scale($scale); // Firefox
-  -webkit-transform:translate($x,$y) rotate($deg) scale($scale); // Webkit (Safari, Chrome, other)
-  transform:translate($x,$y) rotate($deg) scale($scale);
-}
-
-// transform origin
-@mixin transform-origin($x:0, $y:0) {
-  -ms-transform-origin:$x $y; // IE10+
-  -o-transform-origin:$x $y; // Opera
-  -moz-transform-origin:$x $y; // Firefox
-  -webkit-transform-origin:$x $y; // Webkit (Safari, Chrome, other)
-  transform-origin:$x $y;
-}
-
-
-// ====================
-//       fonts
-// ====================
+///////////////////////
+//       fonts       //
+///////////////////////
 
 // font stacks
-@mixin font-stack($primaryFont:"", $secondaryFont:"", $fallbackFonts:"Arial, Helvetica, Geneva, sans-serif") {
-  /* might add inline-font-files() at some point */
+@mixin font-stack($primaryFont: "", $secondaryFont: "", $fallbackFonts: $font-family) {
+  // might add inline-font-files() at some point
   @if $secondaryFont != "" {
-    font-family:#{$primaryFont}, #{$secondaryFont}, #{$fallbackFonts};
+    font-family: #{$primaryFont}, #{$secondaryFont}, #{$fallbackFonts};
   } @else {
     @if $primaryFont != "" {
-      font-family:#{$primaryFont}, #{$fallbackFonts};
+      font-family: #{$primaryFont}, #{$fallbackFonts};
     } @else {
-      font-family:#{$fallbackFonts};
+      font-family: #{$fallbackFonts};
+    }
+  }
+}
+
+///////////////////////
+//    Font Awesome   //
+///////////////////////
+
+@mixin icon($icon) {
+  @include icon-FontAwesome();
+  content: $icon;
+}
+
+@mixin icon-FontAwesome() {
+  font-family: FontAwesome;
+  font-weight: normal;
+  font-style: normal;
+  text-decoration: inherit;
+  -webkit-font-smoothing: antialiased;
+  *margin-right: .3em; // fixes ie7 issues
+}
+
+@mixin icon-stack($width: 2em, $height: 2em, $top-font-size: 1em, $base-font-size: 2em) {
+  .icon-stack {
+    position: relative;
+    display: inline-block;
+    width: $width;
+    height: $height;
+    line-height: $width;
+    vertical-align: -35%;
+    [class^="icon-"],
+    [class*=" icon-"] {
+      display: block;
+      text-align: center;
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      font-size: $top-font-size;
+      line-height: inherit;
+      *line-height: $height;
+    }
+    .icon-stack-base {
+      font-size: $base-font-size;
+      *line-height: #{$height / $base-font-size}em;
     }
   }
 }

data/vendor/assets/stylesheets/groundworkcss/form/_all-form.scss

@@ -0,0 +1,11 @@
+// =============================================
+//                   Forms
+//          Last Updated:2013-6-25
+// =============================================
+
+
+
+
+// form components
+@import "forms";        // optional
+@import "tiles";        // optional

data/vendor/assets/stylesheets/groundworkcss/form/_forms.scss

@@ -25,14 +25,16 @@
 %field {
   display:block;
   width:100%;
+  max-width: 100%;
   margin:0;
   padding:0.4em;
   font-family:monospace;
+  font-size: 1em;
   line-height:1.5;
   height:2.25em;
   background:white;
   border:1px solid $border-color;
-  @include rounded($radius);
+  @include rounded($default-radius);
   &[size] {
     height:auto;
   }
@@ -50,7 +52,7 @@
     margin:0 0 0 0.2em;
     background:white;
     border:1px solid $border-color;
-    @include rounded($radius);
+    @include rounded($default-radius);
   }
 }
 
@@ -82,49 +84,6 @@
   border-color:$success-color;
 }
 
-%select-wrap {
-  display:block;
-  color:gray;
-  background:white;
-  border:1px solid $border-color;
-  position:relative;
-  @include rounded($radius);
-  &:after {
-    content:'...';
-    display:block;
-    width:1.5em;
-    text-align:center;
-    height:100%;
-    position:absolute;
-    z-index:1;
-    font-size:1.5em;
-    line-height:1.25;
-    top:0;
-    right:0;
-    background:darken(white, 12.5%);
-  }
-}
-
-%custom-select {
-  -ms-appearance:none;
-  -o-appearance:none;
-  -moz-appearance:none;
-  -webkit-appearance:none;
-  appearance:none;
-  border:none;
-  background:none;
-  padding:0.4em;
-  font-family:monospace;
-  line-height:1.5;
-  height:2.25em;
-  padding-right:2.5em;
-  position:relative;
-  z-index:2;
-  &.unselected {
-    color:#999;
-  }
-}
-
 %radio-list {
   list-style:none;
   margin:0;
@@ -152,89 +111,75 @@
 
 %prefix {
   left:2px;
-  @include rounded($radius 0 0 $radius);
+  @include rounded($default-radius 0 0 $default-radius);
 }
 
 %suffix {
   left:-2px;
-  @include rounded(0 $radius $radius 0);
-}
-
-@if $tags {
-  $elements: fieldset legend label input textarea;
-	@for $i from 1 through length($elements) {
-		$element: nth($elements, $i);
-		@if not index($tag-elements, $element) == false {
-			#{$element} {
-				@extend %#{$element};
-				@if $element == input or $element == textarea {
-					@extend %field;
-				}
-				@if $element == textarea {
-					@extend %textarea;
-				}
-			}
-		}
-	}
+  @include rounded(0 $default-radius $default-radius 0);
+}
 
-  @if $classes {
-    .select-wrap {
-      @extend %select-wrap;
-      select {
-        @extend %custom-select;
-      }
-    }
-  }
+// prefix/suffix classes
+.prefix {
+  @extend %prefix;
 }
 
-@if $classes {
-  .error, .invalid {
-    input, select, textarea {
-      @extend %error-block;
-    }
-    .prefix, .suffix {
-      @extend %error-block-prefix;
-    }
-  }
-  .success, .valid {
-    input, select, textarea {
-      @extend %success-block;
-    }
-    .prefix, .suffix {
-      @extend %success-block-prefix;
-    }
+.suffix {
+  @extend %suffix;
+}
+
+.error, .invalid {
+  input, select, textarea {
+    @extend %error-block;
   }
-  .fieldset {
-    @extend %fieldset;
+  .prefix, .suffix {
+    @extend %error-block-prefix;
   }
-  .legend {
-    @extend %legend;
+}
+.success, .valid {
+  input, select, textarea {
+    @extend %success-block;
   }
-  .label {
-    @extend %label;
+  .prefix, .suffix {
+    @extend %success-block-prefix;
   }
-  .input, .select, .textarea {
+}
+
+@if $form-tags {
+	@for $i from 1 through length($form-elements) {
+		$element: nth($form-elements, $i);
+		#{$element} {
+			@extend %#{$element};
+			@if $element == input or $element == textarea {
+				@extend %field;
+			}
+			@if $element == textarea {
+				@extend %textarea;
+			}
+		}
+	}
+  select {
     @extend %field;
   }
-  .input {
-    @extend %input;
-  }
-  .textarea {
-    @extend %textarea;
-  }
-  .select-wrap {
-    @extend %select-wrap;
-    .select {
-      @extend %custom-select;
+}
+
+@if $form-classes {
+  @for $i from 1 through length($form-elements) {
+    $element: nth($form-elements, $i);
+    .#{$element} {
+      @extend %#{$element};
+      @if $element == input or $element == textarea {
+        @extend %field;
+      }
+      @if $element == textarea {
+        @extend %textarea;
+      }
     }
   }
+  .input, .select, .textarea {
+    @extend %field;
+  }
   .radio-list {
     @extend %radio-list;
   }
-  .prefix {
-    @extend %prefix;
-  }
-  .suffix {
-    @extend %suffix;
-  }
 }

data/vendor/assets/stylesheets/groundworkcss/form/_tiles.scss

@@ -1,8 +1,7 @@
-// ===================================
-//         GroundworkCSS Squares
-// ===================================
-
-
+// =============================================
+//                   Tiles
+//          Last Updated:2013-6-25
+// =============================================
 
 
 %tiles {
@@ -24,7 +23,7 @@
   text-overflow:ellipsis;
   white-space:nowrap;
   @include transition(background-color 0.25s ease-out);
-  @include rounded($radius);
+  @include rounded($default-radius);
   cursor:pointer;
   &:hover, &:focus {
     text-decoration:none;
@@ -75,7 +74,7 @@
   }  
 }
 
-@if $classes {
+@if $tiles {
   .tiles {
     @extend %tiles;
     .tile {
@@ -83,10 +82,9 @@
       i {
         @extend %tile-icon;
       }
-      $modifiers: on active small large square round disabled;
-      @for $i from 1 through length($modifiers) {
-        &.#{nth($modifiers, $i)} {
-          @extend %tile-#{nth($modifiers, $i)};
+      @for $i from 1 through length($tile-modifiers) {
+        &.#{nth($tile-modifiers, $i)} {
+          @extend %tile-#{nth($tile-modifiers, $i)};
         }
       }
       // modifier colors

data/vendor/assets/stylesheets/groundworkcss/groundwork-ie.scss

@@ -1,14 +1,11 @@
-/* =============================================
- *                 IE hacks
- *          Last Updated:2013-4-24
+/*! ============================================
+ *             Legacy IE Support
+ *          Last Updated:2013-6-23
  * ===========================================*/
 
 
-// custom settings
-@import "settings";     // optional
-
-// core
-@import "core/all";         // required
+@import "settings";
+@import "core/all-core";
 
 
 
@@ -71,6 +68,8 @@ html {
     }
   }
   &.lt-ie8 {
+    // font awesome for IE7
+    @import "icons/font-awesome-ie7";
     // navigation
     nav {
       &.inline {

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

@@ -1,22 +1,19 @@
-/* =============================================
+/*! ============================================
  *       GroundworkCSS by Gary Hepting
- *          Last Updated:2013-6-17
+ *          Last Updated:2013-6-25
  * ===========================================*/
 
 
-// custom settings
-@import "settings";         // customizable settings
-
-// core (required)
-@import "core/all";         // constants, defaults, mixins
-@import "base/all";         // reset, globals, grid, helpers, animations
+// core
+@import "core/all-core";              // constants, defaults, mixins
+@import "base/all-base";              // reset, globals, grid, helpers, animations
 
 // components
-@import "type/all";         // typography, font awesome, web fonts
-@import "nav/all";          // buttons, navigation, tabs
-@import "ui/all";           // messages, callouts, tables, tooltips, popovers, modals
-@import "form/all";         // forms, tiles
-@import "misc/all";         // social icons
+@import "type/all-type";              // typography, web fonts
+@import "icons/all-icons";            // font awesome
+@import "nav/all-nav";                // buttons, navigation, tabs
+@import "ui/all-ui";                  // messages, callouts, tables, tooltips, popovers, modals
+@import "form/all-form";              // forms, tiles
 
 // responsive adjustments
-@import "responsive/all";   // responsive navigation, tabs
+@import "responsive/all-responsive";  // responsive navigation, tabs