groundworkcss-rails 0.2.9 → 0.2.10

data/vendor/assets/stylesheets/groundworkcss-scss/{_mixins.scss → core/_mixins.scss}

@@ -1,98 +1,23 @@
 // =============================================
-//        SCSS mixins by Gary Hepting 
-//          Last Updated:2013-1-21
+//              Global Mixins
+//          Last Updated:2013-4-24
 // =============================================
 
 
-
-
-// ====================
-//  media query helpers
-// ====================
-
-@mixin large-desktop {
-  @media only screen and (min-width:1201px) {
-    @content;
-  }
-}
-
-@mixin desktop {
-  @media only screen and (min-width:1025px) {
-    .hide-on-desktop { display:none; }
-    // helper overrides
-    .no-padding-desktop { padding:0; }
-    .no-margin-desktop { margin:0; }
-    .zero-desktop { @include _zero; }
-    @content;
-  }
-}
-
-@mixin ipad {
-  @media only screen and (min-width:768px) and (max-width:1024px) {
-    .ipad-only { display:inline-block; }
-    .hide-on-ipad { display:none; }
-    .desktop-only { display:none; }
-    // helper overrides
-    .no-padding-ipad { padding:0; }
-    .no-margin-ipad { margin:0; }
-    .zero-ipad { @include _zero; }
-    @content;
-  }
-}
-
-@mixin ipad-above {
-  @media only screen and (min-width: 768px) {
-    @content;
-  }
-}
-
-@mixin small-tablet {
-  @media only screen and (max-width:767px) {
-    .small-tablet-only { display:inline-block; }
-    .hide-on-small-tablet { display:none; }
-    .desktop-only { display:none; }
-    // helper overrides
-    .no-padding-small-tablet { padding:0; }
-    .no-margin-small-tablet { margin:0; }
-    .zero-small-tablet { @include _zero; }
-    @content;
-  }
-}
-
-@mixin mobile {
-  @media only screen and (max-width:480px) {
-    .mobile-only { display:inline-block; }
-    .hide-on-mobile { display:none; }
-    .desktop-only { display:none; }
-    // helper overrides
-    .no-padding-mobile { padding:0; }
-    .no-margin-mobile { margin:0; }
-    .zero-mobile { @include _zero; }
-    @content;
-  }
-}
-
-@mixin small-mobile {
-  @media only screen and (max-width:319px) {
-    @content;
-  }
-}
-
 // ====================
-//       helpers
+//     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;
+        #{nth($properties, $i)}:0 !important;
       }
     }
   }
 }
 
-@mixin _zero { margin:0; padding:0; }
 
 // ====================
 //      functions
@@ -112,24 +37,10 @@
 // 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:inline-image($file);                               // data URI
   *background-image:url("#{$root_path}#{$images_path}#{$file}");      // IE7- hack
 }
 
-// // vertical gradient with support for IE 6-8 & 10
-// @mixin vertical-gradient($startColor, $endColor) {
-//   background:$endColor;
-//   @include background-image(linear-gradient($startColor, $endColor));
-//   @include filter-gradient($startColor, $endColor);
-// }
-
-// // horizontal gradient with support for IE 6-8 & 10
-// @mixin horizontal-gradient($startColor, $endColor) {
-//   background:$endColor;
-//   @include background-image(linear-gradient(left, $startColor, $endColor));
-//   @include filter-gradient($startColor, $endColor, 1);
-// }
-
 // vertical gradient
 @mixin gradient($startColor:$white, $endColor:$gray-2) {
   background:$startColor; // fallback
@@ -288,10 +199,8 @@
 }
 
 
-
-
 // ====================
-//       fonts 
+//       fonts
 // ====================
 
 // font stacks

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

@@ -0,0 +1,10 @@
+// ===================================
+//               Forms
+// ===================================
+
+
+
+
+// form components
+@import "forms";        // optional
+@import "tiles";        // optional

data/vendor/assets/stylesheets/groundworkcss-scss/{_forms.scss → form/_forms.scss}

@@ -1,6 +1,8 @@
-// ===================================
-//        GroundworkCSS Forms
-// ===================================
+// =============================================
+//                   Forms
+//          Last Updated:2013-4-24
+// =============================================
+
 
 
 
@@ -8,39 +10,36 @@
   border:1px solid $border-color;
   padding:$gutter;
 }
+
 %legend {
   font-weight:900;
-  font-size:0.8em;
+  // font-size:0.8em;
   color:darken($background-color, 35%);
   margin-bottom:0;
 }
+
 %label {
   display:block;
   padding:0.4em 0.2em;
 }
+
 %field {
   display:block;
   width:100%;
   margin:0;
   padding:0.4em;
   font-family:monospace;
-  font-size:1em;
+  // font-size:1em;
   line-height:1.5;
   height:2.25em;
   background:white;
   border:1px solid $border-color;
   @include rounded($radius);
-  &%error, &%invalid {
-    color:$error-color;
-    background:lighten($error-color, 62%);
-    border-color:$error-color;
-  }
-  &%success, &%valid {
-    color:$success-color;
-    background:lighten($success-color, 62%);
-    border-color:$success-color;
+  &[size] {
+    height:auto;
   }
 }
+
 %input {
   @extend %field;
   &[size] {
@@ -56,33 +55,35 @@
     @include rounded($radius);
   }
 }
+
 %textarea {
   height:10em;
 }
-%error {
-  %field {
-    background:$error-background;
-    color:$error-color;
-    border-color:$error-border;
-  }
-  %prefix, %suffix {
-    color:lighten($error-color, 62%);;
-    background:$error-color;
-    border-color:$error-color;
-  }
+
+%error-block {
+  background:$error-background;
+  color:$error-color;
+  border-color:$error-border;
 }
-%success {
-  %field {
-    background:$success-background;
-    color:$success-color;
-    border-color:$success-border;
-  }
-  %prefix, %suffix {
-    color:lighten($success-color, 62%);;
-    background:$success-color;
-    border-color:$success-color;
-  }
+
+%error-block-prefix, %error-block-suffix {
+  color:lighten($error-color, 62%);;
+  background:$error-color;
+  border-color:$error-color;
 }
+
+%success-block {
+  background:$success-background;
+  color:$success-color;
+  border-color:$success-border;
+}
+
+%success-block-prefix, %success-block-suffix {
+  color:lighten($success-color, 62%);;
+  background:$success-color;
+  border-color:$success-color;
+}
+
 %select-wrap {
   display:block;
   color:gray;
@@ -104,32 +105,35 @@
     right:0;
     background:darken(white, 12.5%);
   }
-  %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;
-    font-size:1em;
-    line-height:1.5;
-    height:2.25em;
-    padding-right:2.5em;
-    position:relative;
-    z-index:2;
-    &.unselected {
-      color:#999;
-    }
+}
+
+%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;
+  // font-size:1em;
+  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;
   padding:0;
 }
+
 %prefix, %suffix {
   display:block;
   position:relative;
@@ -141,7 +145,7 @@
   margin:0;
   padding:0.4em;
   font-family:monospace;
-  font-size:1em;
+  // font-size:1em;
   line-height:1.25;
   height:2.25em;
   text-align:center;
@@ -149,33 +153,34 @@
   background:darken(white, 12.5%);
   border:1px solid darken(white, 17.5%);
 }
+
 %prefix {
   left:2px;
   @include rounded($radius 0 0 $radius);
 }
+
 %suffix {
   left:-2px;
   @include rounded(0 $radius $radius 0);
 }
+
 @if $tags {
-  fieldset {
-    @extend %fieldset;
-  }
-  legend {
-    @extend %legend;
-  }
-  label {
-    @extend %label;
-  }
-  input, select, textarea {
-    @extend %field;
-  }
-  input {
-    @extend %input;
-  }
-  textarea {
-    @extend %textarea;
-  }
+  $elements: fieldset legend label input select 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 == select or $element == textarea {
+					@extend %field;
+				}
+				@if $element == textarea {
+					@extend %textarea;
+				}
+			}
+		}
+	}
+
   @if $classes {
     .select-wrap {
       @extend %select-wrap;
@@ -185,7 +190,24 @@
     }
   }
 }
+
 @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;
+    }
+  }
   .fieldset {
     @extend %fieldset;
   }
@@ -213,12 +235,6 @@
   .radio-list {
     @extend %radio-list;
   }
-  .error, .invalid {
-    @extend %error;
-  }
-  .success, .valid {
-    @extend %success;
-  }
   .prefix {
     @extend %prefix;
   }

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

@@ -0,0 +1,100 @@
+// ===================================
+//         GroundworkCSS Squares
+// ===================================
+
+
+
+
+%tiles {
+  position:relative;
+}
+
+%tile {
+  display:inline-block;
+  background-color:darken($background-color,20%);
+  border:6px solid $border-color;
+  color:$font-color;
+  display:inline-block;
+  word-wrap:break-word;
+  padding:0.25em;
+  margin-bottom:0.25em;
+  text-align:center;
+  font-size:1em;
+  overflow:hidden;
+  text-overflow:ellipsis;
+  white-space:nowrap;
+  @include transition(background-color 0.25s ease-out);
+  @include rounded($radius);
+  cursor:pointer;
+  &:hover, &:focus {
+    text-decoration:none;
+    background-color:darken($background-color,25%);
+    color:darken($font-color,10%);
+    border-color:darken($border-color,5%);
+  }
+}
+
+%tile-icon {
+  font-size:2em;
+  display:block;
+  margin:0.15em 1em;
+}
+
+%tile-on {
+  text-decoration:none;
+  background-color:darken($background-color,25%);
+  color:darken($font-color,10%);
+  border-color:darken($border-color,5%);
+}
+
+%tile-active, %tile-active:hover, %tile-active:focus {
+  background-color:darken($background-color,30%);
+  color:darken($font-color,20%);
+  border-color:darken($border-color,20%);
+}
+
+%tile-small { @include _small; }
+%tile-large { @include _large; }
+%tile-square { @include _square; }
+%tile-round { @include _round; }
+%tile-disabled  { @include state(disabled,normal,lighten(gray,20%)); }
+
+@for $i from 1 through length($modifier-name) {
+  %tile-#{nth($modifier-name, $i)} {
+    color:#{nth($modifier-code, $i)};
+    &%on, &:hover, &:focus {
+      background-color:lighten(nth($modifier-code, $i),10%);
+      border-color:#{nth($modifier-code, $i)};
+      color:#{nth($modifier-text, $i)};
+    }
+    &.active, &.active:hover, &.active:focus {
+      background-color:#{nth($modifier-code, $i)};
+      color:#{nth($modifier-text, $i)};
+      border-color:darken(nth($modifier-code, $i),10%);
+    }
+  }  
+}
+
+@if $classes {
+  .tiles {
+    @extend %tiles;
+    .tile {
+      @extend %tile;
+      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)};
+        }
+      }
+      // modifier colors
+      @for $i from 1 through length($modifier-name) {
+        &.#{nth($modifier-name, $i)} {
+          @extend %tile-#{nth($modifier-name, $i)};
+        }
+      }
+    }
+  }
+}