toolkit 0.2.0.1 → 0.2.1

data/stylesheets/_toolkit.scss

@@ -26,4 +26,9 @@
 //////////////////////////////
 // Import Vertical Center
 //////////////////////////////
-@import 'toolkit/vertical-center';
+@import 'toolkit/vertical-center';
+
+//////////////////////////////
+// Import Color Helpers
+//////////////////////////////
+@import 'toolkit/colors';

data/stylesheets/toolkit/_border-box.scss

@@ -5,4 +5,6 @@
 //  From http://paulirish.com/2012/box-sizing-border-box-ftw/
 ////////////////////////
 @import "compass/css3/box-sizing";
-* { @include box-sizing('border-box'); }
+*,
+*:after,
+*:before { @include box-sizing('border-box'); }

data/stylesheets/toolkit/_colors.scss

@@ -0,0 +1,43 @@
+/// Tint and Shade
+@function tint($color, $amount) {
+  @return mix(#fff, $color, $amount);
+}
+
+@function shade($color, $amount) {
+  @return mix(#000, $color, $amount);
+}
+
+// Create a color stack using the given colors and tints
+@function color-stack($main, $secondary, $amounts...) {
+  @if length($amounts) == 0 {
+    $amounts: 25%, 25%, 15%, 10%;
+  }
+
+  $stack: $main;
+  $i: 1;
+
+  @each $amount in $amounts {
+    $stack: join($stack, mix($secondary, nth($stack, $i), $amount));
+    $i: $i + 1;
+  }
+
+  @return $stack;
+}
+
+@function tint-stack($color, $amounts...) {
+  @if length($amounts) > 0 {
+    @return color-stack($color, #fff, $amounts);
+  }
+  @else {
+    @return color-stack($color, #fff);
+  }
+}
+
+@function shade-stack($color, $amounts...) {
+  @if length($amounts) > 0 {
+    @return color-stack($color, #000, $amounts);
+  }
+  @else {
+    @return color-stack($color, #000);
+  }
+}

data/stylesheets/toolkit/_fluid-media.scss

@@ -16,7 +16,7 @@ $intrinsic-ratio-width: 100% !default;
 $intrinsic-ratio-elements: '*' !default;
 $intrinsic-ratio-extend: true !default;
 
-@mixin intrinsic-ratio($ratio: $intrinsic-ratio, $width: $intrinsic-ratio-width, $elements: $intrinsic-ratio-elements, $extend: $intrinsic-ratio-extend) {
+@mixin intrinsic-ratio($ratio: $intrinsic-ratio-extend, $width: $intrinsic-ratio-width, $elements: $intrinsic-ratio-elements, $extend: $intrinsic-ratio-extend) {
   @if not $extend {
     position: relative;
     height: 0;

data/stylesheets/toolkit/_pe.scss

@@ -3,6 +3,8 @@
 //
 // - $feature: Modernizr feature (base CSS class name)
 ////////////////////////
+@import "compass/typography/text/replacement";
+
 @mixin enhance-with($feature) {
   .#{$feature} & {
     @content;
@@ -50,14 +52,14 @@ $replace-text-inline-element: false !default;
   @else {
     @extend %replace-text-pe-hide;
   }
-  
+
   @if $method == 'svg' {
     @include svg-background($img-path, $sprite, $inline-svg, $with-dimensions);
   }
   @else if $method == 'retina' {
     @include retina-background($img-path, $sprite, $with-dimensions);
   }
-  
+
 }
 
 //////////////////////////////
@@ -66,10 +68,10 @@ $replace-text-inline-element: false !default;
 @mixin svg-background($img-path, $sprite, $inline-svg: $replace-text-pe-inline-svg, $with-dimensions: $replace-text-pe-with-dimensions) {
   $png-path: $img-path + '/*.png';
   $sprite-map: sprite-map($png-path);
-  
+
   // Build SVG file name
   $svg-file: $img-path + '/#{$sprite}.svg';
-  
+
   // Default Sprite File
   $sprite-file: '' !default;
 
@@ -81,7 +83,7 @@ $replace-text-inline-element: false !default;
     width: image-width($sprite-file);
     height: image-height($sprite-file);
   }
-  
+
   @include enhance-with('svg') {
     // Inline the SVG so that advanced browsers and future tech doesn't need the extra HTTP requests for the SVG
     @if $inline-svg {
@@ -97,8 +99,8 @@ $replace-text-inline-element: false !default;
       background-size: image-width($sprite-file) image-height($sprite-file);
     }
   }
-  
-  // Degrade from SVG 
+
+  // Degrade from SVG
   @include degrade-from('svg') {
     // Extend the Sprite Background
     @extend %#{sprite-map-name($sprite-map)}-image-map;
@@ -113,21 +115,21 @@ $replace-text-inline-element: false !default;
 @mixin retina-background($img-path, $sprite, $with-dimensions: $replace-text-pe-with-dimensions) {
   $png-path: $img-path + '/*.png';
   $sprite-map: sprite-map($png-path);
-  
+
   $png2x-path: $img-path + '_2x/*.png';
   $retina-map: sprite-map($png2x-path);
-  
+
   // Default Sprite File
   $sprite-file: '' !default;
 
   @if $with-dimensions {
     // Get Sprite File for Height/Width
     $sprite-file: sprite-file($sprite-map, $sprite);
-    
+
     width: image-width($sprite-file);
     height: image-height($sprite-file);
   }
-  
+
   .ie6 &,
   .ie7 &,
   .ie8 & {
@@ -159,7 +161,7 @@ $replace-text-inline-element: false !default;
     }
     @include sprite($retina-map, $sprite);
   }
-  
+
     //////////////////////////////
     // Actual Hotness
     //
@@ -190,18 +192,18 @@ $replace-text-inline-element: false !default;
 @mixin sprite-map-generator($img-path, $method: $replace-text-pe-method) {
   $png-path: $img-path + '/*.png';
   $png-path: sprite-map($png-path);
-  
+
   @if $method == 'retina' {
     $png2x-path: $img-path + '_2x/*.png';
     $png2x-path: sprite-map($png2x-path);
-    
+
     %#{sprite-map-name($png-path)}-image-map-fallback {
       background: {
         image: $png-path;
         repeat: no-repeat;
       }
     }
-    
+
     @media (-webkit-max-device-pixel-ratio: 1.4), (max--moz-device-pixel-ratio: 1.4), (-o-max-device-pixel-ratio: 7/5), (min-resolution: 1.4dppx), (min-resolution: 134.4dpi) {
       %#{sprite-map-name($png-path)}-image-map {
         background: {
@@ -227,8 +229,8 @@ $replace-text-inline-element: false !default;
       }
     }
   }
-  
-  
+
+
 }
 
 //////////////////////////////
@@ -243,4 +245,4 @@ $replace-text-inline-element: false !default;
 //////////////////////////////
 %replace-text-pe-hide {
   @include hide-text();
-}
+}

metadata

@@ -5,9 +5,8 @@ version: !ruby/object:Gem::Version
   segments: 
   - 0
   - 2
-  - 0
   - 1
-  version: 0.2.0.1
+  version: 0.2.1
 platform: ruby
 authors: 
 - Sam Richard
@@ -16,7 +15,7 @@ autorequire:
 bindir: bin
 cert_chain: []
 
-date: 2011-10-17 00:00:00 -04:00
+date: 2011-11-12 00:00:00 -05:00
 default_executable: 
 dependencies: 
 - !ruby/object:Gem::Dependency 
@@ -90,6 +89,7 @@ files:
 - stylesheets/_toolkit.scss
 - stylesheets/toolkit/_border-box.scss
 - stylesheets/toolkit/_clearfix.scss
+- stylesheets/toolkit/_colors.scss
 - stylesheets/toolkit/_fluid-media.scss
 - stylesheets/toolkit/_pe.scss
 - stylesheets/toolkit/_vertical-center.scss