toolkit 1.2.2 → 1.3.0

checksums.yaml

@@ -0,0 +1,7 @@
+--- 
+SHA512: 
+  metadata.gz: 874d528939e96fb518f2e722c254a62b38418201c24747190e452db606c887e57b17a2d852554845d4801b55d099046814f863c6423103856f3698daaeb875ec
+  data.tar.gz: 7186760b55d3a1c78b5d8c233d1b7b965f7a4c9b63804a062ca658d68968b1d65dc0403f989c2b05ce4ca67bbfd6f0771344cf3244f2c57ce5fcd6ef93189b00
+SHA1: 
+  metadata.gz: a4d4a5e9259d8b9d39f39454f0f1137d6f6d036a
+  data.tar.gz: a150f35d5387959b35fab26306569d4e525383b8

data/stylesheets/toolkit/_carousel.scss

@@ -0,0 +1,140 @@
+//////////////////////////////
+// Import Compass CSS3 Animation
+//////////////////////////////
+@import "compass/css3/animation";
+
+//////////////////////////////
+// Carousel Default Variables
+//////////////////////////////
+$css-carousel-list: '> ul';
+$css-carousel-animation: 'carousel';
+$css-carousel-duration: 30s;
+$css-carousel-extend: true;
+
+$css-carousel-action: 'reverse';
+$css-carousel-speed: 5;
+
+//////////////////////////////
+// Carousel Component
+//////////////////////////////
+// Carousel Basics
+@mixin css-carousel-basics($extend: $css-carousel-extend) {
+  @if $extend {
+    @extend %css-carousel-basics;
+  }
+  @else {
+    overflow: hidden;
+    width: 100%;
+
+    img {
+      display: block;
+      width: 100%;
+      max-width: 100%;
+      height: auto;
+    }
+  }
+}
+
+// Carousel List
+@mixin css-carousel-list($extend: $css-carousel-extend) {
+  @if $extend {
+    @extend %css-carousel-list;
+  }
+  @else {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    position: relative;
+    overflow: hidden;
+
+    > li {
+      position:relative;
+      float:left;
+    }
+  }
+}
+
+// List sizing, for changing only the size of the carousel
+@mixin css-carousel-size($items, $list: $css-carousel-list) {
+  #{$list} {
+    width: 100% * $items;
+
+    > li {
+      width: 100% / $items;
+    }
+  }
+}
+
+// Animation wrapped in list
+@mixin css-carousel-list-animation($animation: $css-carousel-animation, $duration: $css-carousel-duration, $list: $css-carousel-list) {
+  #{$list} {
+    @include animation($animation $duration infinite);
+  }
+}
+
+// Carousel Component
+@mixin css-carousel-component($items, $list: $css-carousel-list, $animation: $css-carousel-animation, $duration: $css-carousel-duration, $extend: $css-carousel-extend) {
+
+  @include css-carousel-basics($extend);
+
+  @include css-carousel-size($items, $list);
+
+  #{$list} {
+    @include css-carousel-list($extend);
+  }
+
+  @include css-carousel-list-animation($animation, $duration, $list);
+}
+
+// Carousel Extends
+%css-carousel-basics {
+  @include css-carousel-basics(false);
+}
+
+%css-carousel-list {
+  @include css-carousel-list(false);
+}
+
+//////////////////////////////
+// Carousel Animation
+//////////////////////////////
+@mixin css-carousel-animation($items, $action: $css-carousel-action, $speed: $css-carousel-speed, $name: $css-carousel-animation) {
+  $increment: 0;
+
+  @if $action == 'reverse' {
+    $increment: 100 / (2 * ($items - 1)) * 1%;
+  }
+  @else if $action == 'start' {
+    $increment: 100 / (($items)) * 1%;
+  }
+
+  $speed: $increment - ($speed * 1%);
+
+  $counter: 0%;
+  $offset: 0;
+
+  @include keyframes($name) {
+    @for $i from 0 through $items - 1 {
+      $counter: $increment * $i;
+      $offset: -100% * $i;
+
+      #{$counter} {left: $offset}
+      #{$counter + $speed} {left: $offset};
+    }
+    @if $action == 'reverse' {
+      @for $i from -1 * ($items - 2) through 0 {
+	$counter: $counter + $increment;
+	$offset: -100% * abs($i);
+
+	#{$counter} {left: $offset}
+
+	@if $i != 0 {
+	  #{$counter + $speed} {left: $offset};
+	}
+      }
+    }
+    @else if $action == 'start' {
+      100% {left: 0};
+    }
+  }
+}

data/stylesheets/toolkit/_clearfix.scss

@@ -1,65 +1,3 @@
-//////////////////////////////
-// Legacy Clearfix
-//
-// For when you need full Legacy support, including old IE and old Firefox
-//
-// From http://www.css-101.org/articles/clearfix/latest-new-clearfix-so-far.php
-//////////////////////////////
-%clearfix-legacy {
-  /* for IE 6/7 */
-  *zoom: expression(this.runtimeStyle.zoom="1", this.appendChild(document.createElement("br")).style.cssText="clear:both;font:0/0 serif");
-  /* non-JS fallback */
-  *zoom: 1;
-
-  &:before,
-  &:after {
-    content: ".";
-    display: block;
-    height: 0;
-    overflow: hidden;
-  }
-  
-  &:after {
-    clear: both;
-  }
-}
-
-//////////////////////////////
-// Micro Clearfix
-//
-// For when you need old IE support, but not concerned with old Firefox
-// From http://nicolasgallagher.com/better-float-containment-in-ie/
-//////////////////////////////
-%clearfix-micro {
-  /* for IE 6/7 */
-  *zoom: expression(this.runtimeStyle.zoom="1", this.appendChild(document.createElement("br")).style.cssText="clear:both;font:0/0 serif");
-  /* non-JS fallback */
-  *zoom: 1;
-
-  &:before,
-  &:after {
-    content: "";
-    display: table;
-  }
-  
-  &:after {
-    clear: both;
-  }
-}
-
-//////////////////////////////
-// Modern Clearfix
-//
-// Clearfix for modern browsers, especiall when using border-box
-//
-// From http://www.css-101.org/articles/clearfix/latest-new-clearfix-so-far.php
-//////////////////////////////
-%clearfix:after {
-  content: "";
-  display: table;
-  clear: both;
-}
-
 //////////////////////////////
 // Massive Clearfix Mixin
 //
@@ -67,10 +5,10 @@
 // Can choose whether to extend or to write.
 //////////////////////////////
 $clearfix-extend: false !default;
-$legacy-support-for-mozilla: true !default;
+$clearfix-direct: false !default;
 
-@mixin clearfix($extend: $clearfix-extend) {
-  @if $legacy-support-for-ie6 and $legacy-support-for-ie7 and not $legacy-support-for-mozilla {
+@mixin clearfix($extend: $clearfix-extend, $direct: $clearfix-direct) {
+  @if (($legacy-support-for-ie6 or $legacy-support-for-ie7) and not $legacy-support-for-mozilla and $direct != 'legacy' and $direct != 'modern') or ($direct == 'micro') {
     @if $extend {
       @extend %clearfix-micro;
     }
@@ -91,7 +29,7 @@ $legacy-support-for-mozilla: true !default;
       }
     }
   }
-  @else if $legacy-support-for-ie6 and $legacy-support-for-ie7 and $legacy-support-for-mozilla {
+  @else if (($legacy-support-for-ie6 or $legacy-support-for-ie7) and $legacy-support-for-mozilla and $direct != 'micro' and $direct != 'modern') or ($direct == 'legacy') {
     @if $extend {
       @extend %clearfix-legacy;
     }
@@ -126,4 +64,36 @@ $legacy-support-for-mozilla: true !default;
       }
     }
   }
+}
+
+//////////////////////////////
+// Legacy Clearfix
+//
+// For when you need full Legacy support, including old IE and old Firefox
+//
+// From http://www.css-101.org/articles/clearfix/latest-new-clearfix-so-far.php
+//////////////////////////////
+%clearfix-legacy {
+  @include clearfix(false, 'legacy');
+}
+
+//////////////////////////////
+// Micro Clearfix
+//
+// For when you need old IE support, but not concerned with old Firefox
+// From http://nicolasgallagher.com/better-float-containment-in-ie/
+//////////////////////////////
+%clearfix-micro {
+  @include clearfix(false, 'micro');
+}
+
+//////////////////////////////
+// Modern Clearfix
+//
+// Clearfix for modern browsers, especiall when using border-box
+//
+// From http://www.css-101.org/articles/clearfix/latest-new-clearfix-so-far.php
+//////////////////////////////
+%clearfix:after {
+  @include clearfix(false, 'modern');
 }

data/stylesheets/toolkit/_colours.scss

@@ -12,10 +12,13 @@
   @return mix(#000, $colour, $amount);
 }
 
+$color-stack-amounts: 25%, 50%, 75%, 85%, 90% !default;
+$colour-stack-amounts: $color-stack-amounts !default;
+
 // Create a colour stack using the given colours and tints
 @function colour-stack($main, $secondary, $amounts...) {
   @if length($amounts) == 0 {
-    $amounts: 25%, 50%, 75%, 85%, 90%;
+    $amounts: $colour-stack-amounts;
   }
   @else if length($amounts) == 1 {
     $amounts: nth($amounts, 1);
@@ -55,4 +58,45 @@
   @else {
     @return colour-stack($colour, #000);
   }
+}
+
+//////////////////////////////
+// Creates an even scale from one color to another
+//////////////////////////////
+$color-scale-shades: 6 !default;
+$colour-scale-shades: $color-scale-shades !default;
+
+@function colour-scale($main, $secondary, $shades: $colour-scale-shades) {
+  @return color-scale($main, $secondary, $shades);
+}
+
+@function color-scale($main, $secondary, $shades: $color-scale-shades) {
+  $list: $main;
+
+
+  $red1: red($main);
+  $red2: red($secondary);
+  $red-diff: (($red1 - $red2) / (($shades - 1)));
+
+  $grn1: green($main);
+  $grn2: green($secondary);
+  $grn-diff: (($grn1 - $grn2) / (($shades - 1)));
+
+  $blu1: blue($main);
+  $blu2: blue($secondary);
+  $blu-diff: (($blu1 - $blu2) / (($shades - 1)));
+
+  $red-hold: $red1;
+  $grn-hold: $grn1;
+  $blu-hold: $blu1;
+
+  @for $i from 2 through $shades {
+    $red-hold: $red-hold - ($red-diff);
+    $grn-hold: $grn-hold - ($grn-diff);
+    $blu-hold: $blu-hold - ($blu-diff);
+    $color-hold: rgb($red-hold, $grn-hold, $blu-hold);
+    $list: append($list, $color-hold);
+  }
+
+  @return $list;
 }

data/stylesheets/toolkit/_intrinsic-ratio.scss

@@ -7,38 +7,46 @@ $intrinsic-ratio-elements: '> *' !default;
 $intrinsic-ratio-extend: true !default;
 $intrinsic-ratio-direction: top !default;
 
-@mixin intrinsic-ratio-parent {
-    position: relative;
-    height: 0;
-}
-
-@mixin intrinsic-ratio-child {
-  display: block;
-  position: absolute;
-  width: 100% !important; // Nuke the external styles
-  height: 100% !important; // Nuke the external styles
-  top: 0;
-  margin: 0;
-  padding: 0;
+@mixin intrinsic-ratio-parent($extend: $intrinsic-ratio-extend) {
+    @if $extend {
+      @extend %intrinsic-ratio-parent;
+    }
+    @else {
+      position: relative;
+      height: 0;
+    }
 }
 
-@mixin intrinsic-ratio($ratio: $intrinsic-ratio, $width: $intrinsic-ratio-width, $elements: $intrinsic-ratio-elements, $extend: $intrinsic-ratio-extend, $direction: $intrinsic-ratio-direction) {
-  @if not $extend {
-    @include intrinsic-ratio-parent;
+@mixin intrinsic-ratio-child($extend: $intrinsic-ratio-extend) {
+  @if $extend {
+    @extend %intrinsic-ratio-child;
   }
   @else {
-    @extend %intrinsic-ratio-parent;
+    display: block;
+    position: absolute;
+    width: 100% !important; // Nuke the external styles
+    height: 100% !important; // Nuke the external styles
+    top: 0;
+    margin: 0;
+    padding: 0;
   }
+}
+
+@mixin intrinsic-ratio-ratio($ratio: $intrinsic-ratio, $width: $intrinsic-ratio-width, $direction: $intrinsic-ratio-direction) {
   padding-#{$direction}: (1 / $ratio) * $width;
+}
+
+@mixin intrinsic-ratio($ratio: $intrinsic-ratio, $width: $intrinsic-ratio-width, $elements: $intrinsic-ratio-elements, $extend: $intrinsic-ratio-extend, $direction: $intrinsic-ratio-direction) {
+
+  @include intrinsic-ratio-ratio($extend);
+
+  @include intrinsic-ratio-padding($ratio, $width, $direction);
   width: $width;
+
+
   @each $element in $elements {
     #{$element} {
-      @if not $extend {
-	@include intrinsic-ratio-child;
-      }
-      @else {
-	@extend %intrinsic-ratio-child;
-      }
+    	@include intrinsic-ratio-child($extend);
     }
   }
 }
@@ -48,9 +56,9 @@ $intrinsic-ratio-direction: top !default;
 }
 
 %intrinsic-ratio-parent {
-  @include intrinsic-ratio-parent;
+  @include intrinsic-ratio-parent(false);
 }
 
 %intrinsic-ratio-child {
-  @include intrinsic-ratio-child;
+  @include intrinsic-ratio-child(false);
 }

data/stylesheets/toolkit/_pe.scss

@@ -153,7 +153,7 @@ $replace-text-inline-element: false !default;
     }
     @include sprite($sprite-map, $sprite);
   }
-  @media (min-resolution: 1.5dppx), (-webkit-max-device-pixel-ratio: 1.5), (max--moz-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
+  @media (min-resolution: 1.5dppx), (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
     background: {
       image: $retina-map;
       repeat: no-repeat;
@@ -206,7 +206,7 @@ $replace-text-inline-element: false !default;
       }
     }
 
-    @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) {
+    @media (max-resolution: 1.4dppx), (-webkit-max-device-pixel-ratio: 1.4), (max--moz-device-pixel-ratio: 1.4), (max-resolution: 134.4dpi) {
       %#{sprite-map-name($png-path)}-image-map {
         background: {
           image: $png-path;
@@ -214,7 +214,7 @@ $replace-text-inline-element: false !default;
         }
       }
     }
-    @media (-webkit-max-device-pixel-ratio: 1.5), (max--moz-device-pixel-ratio: 1.5), (-o-max-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx), (min-resolution: 144dpi) {
+    @media (min-resolution: 1.5dppx), (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
       %#{sprite-map-name($png2x-path)}-image-map {
         background: {
           image: $png2x-path;

metadata

@@ -1,112 +1,86 @@
---- !ruby/object:Gem::Specification
+--- !ruby/object:Gem::Specification 
 name: toolkit
-version: !ruby/object:Gem::Version
-  version: 1.2.2
-  prerelease: 
+version: !ruby/object:Gem::Version 
+  version: 1.3.0
 platform: ruby
-authors:
+authors: 
 - Sam Richard
 - Scott Kellum
 - Mason Wendell
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2013-05-18 00:00:00.000000000 Z
-dependencies:
-- !ruby/object:Gem::Dependency
+
+date: 2013-07-10 00:00:00 Z
+dependencies: 
+- !ruby/object:Gem::Dependency 
   name: compass
-  requirement: !ruby/object:Gem::Requirement
-    none: false
-    requirements:
-    - - ! '>='
-      - !ruby/object:Gem::Version
-        version: 0.12.2
-  type: :runtime
   prerelease: false
-  version_requirements: !ruby/object:Gem::Requirement
-    none: false
-    requirements:
-    - - ! '>='
-      - !ruby/object:Gem::Version
+  requirement: &id001 !ruby/object:Gem::Requirement 
+    requirements: 
+    - - ">="
+      - !ruby/object:Gem::Version 
         version: 0.12.2
-- !ruby/object:Gem::Dependency
-  name: singularitygs
-  requirement: !ruby/object:Gem::Requirement
-    none: false
-    requirements:
-    - - ! '>='
-      - !ruby/object:Gem::Version
-        version: 1.0.7
   type: :runtime
+  version_requirements: *id001
+- !ruby/object:Gem::Dependency 
+  name: singularitygs
   prerelease: false
-  version_requirements: !ruby/object:Gem::Requirement
-    none: false
-    requirements:
-    - - ! '>='
-      - !ruby/object:Gem::Version
+  requirement: &id002 !ruby/object:Gem::Requirement 
+    requirements: 
+    - - ">="
+      - !ruby/object:Gem::Version 
         version: 1.0.7
-- !ruby/object:Gem::Dependency
-  name: breakpoint
-  requirement: !ruby/object:Gem::Requirement
-    none: false
-    requirements:
-    - - ! '>='
-      - !ruby/object:Gem::Version
-        version: 2.0.2
   type: :runtime
+  version_requirements: *id002
+- !ruby/object:Gem::Dependency 
+  name: breakpoint
   prerelease: false
-  version_requirements: !ruby/object:Gem::Requirement
-    none: false
-    requirements:
-    - - ! '>='
-      - !ruby/object:Gem::Version
+  requirement: &id003 !ruby/object:Gem::Requirement 
+    requirements: 
+    - - ">="
+      - !ruby/object:Gem::Version 
         version: 2.0.2
-- !ruby/object:Gem::Dependency
-  name: sassy-strings
-  requirement: !ruby/object:Gem::Requirement
-    none: false
-    requirements:
-    - - ! '>='
-      - !ruby/object:Gem::Version
-        version: '0.1'
   type: :runtime
+  version_requirements: *id003
+- !ruby/object:Gem::Dependency 
+  name: sassy-strings
   prerelease: false
-  version_requirements: !ruby/object:Gem::Requirement
-    none: false
-    requirements:
-    - - ! '>='
-      - !ruby/object:Gem::Version
-        version: '0.1'
-- !ruby/object:Gem::Dependency
-  name: color-schemer
-  requirement: !ruby/object:Gem::Requirement
-    none: false
-    requirements:
-    - - ! '>='
-      - !ruby/object:Gem::Version
-        version: 0.2.3
+  requirement: &id004 !ruby/object:Gem::Requirement 
+    requirements: 
+    - - ">="
+      - !ruby/object:Gem::Version 
+        version: "0.1"
   type: :runtime
+  version_requirements: *id004
+- !ruby/object:Gem::Dependency 
+  name: color-schemer
   prerelease: false
-  version_requirements: !ruby/object:Gem::Requirement
-    none: false
-    requirements:
-    - - ! '>='
-      - !ruby/object:Gem::Version
+  requirement: &id005 !ruby/object:Gem::Requirement 
+    requirements: 
+    - - ">="
+      - !ruby/object:Gem::Version 
         version: 0.2.3
+  type: :runtime
+  version_requirements: *id005
 description: Toolkit for Progressive Enhancement and Responsive Web Design
-email:
+email: 
 - sam@snug.ug
 - scott@scottkellum.com
 - mason@zivtech.com
 executables: []
+
 extensions: []
+
 extra_rdoc_files: []
-files:
+
+files: 
 - lib/toolkit.rb
 - stylesheets/_toolkit-no-css.scss
 - stylesheets/_toolkit.scss
 - stylesheets/toolkit/_border-box.scss
 - stylesheets/toolkit/_box-sizing.scss
+- stylesheets/toolkit/_carousel.scss
 - stylesheets/toolkit/_children-of-ie.scss
 - stylesheets/toolkit/_clearfix.scss
 - stylesheets/toolkit/_colors.scss
@@ -144,29 +118,32 @@ files:
 - templates/shared/style.scss
 - LICENSE.txt
 homepage: https://github.com/Snugug/toolkit
-licenses:
+licenses: 
 - MIT
 - GPL
+metadata: {}
+
 post_install_message: 
 rdoc_options: []
-require_paths:
+
+require_paths: 
 - lib
-required_ruby_version: !ruby/object:Gem::Requirement
-  none: false
-  requirements:
-  - - ! '>='
-    - !ruby/object:Gem::Version
-      version: '0'
-required_rubygems_version: !ruby/object:Gem::Requirement
-  none: false
-  requirements:
-  - - ! '>='
-    - !ruby/object:Gem::Version
-      version: '1.2'
+required_ruby_version: !ruby/object:Gem::Requirement 
+  requirements: 
+  - - ">="
+    - !ruby/object:Gem::Version 
+      version: "0"
+required_rubygems_version: !ruby/object:Gem::Requirement 
+  requirements: 
+  - - ">="
+    - !ruby/object:Gem::Version 
+      version: "1.2"
 requirements: []
+
 rubyforge_project: toolkit
-rubygems_version: 1.8.25
+rubygems_version: 2.0.3
 signing_key: 
-specification_version: 3
+specification_version: 4
 summary: Progressive Enhancement and RWD toolkit of awesomeness
 test_files: []
+