toolkit 1.3.8 → 2.0.0.alpha.1

checksums.yaml

@@ -1,7 +1,7 @@
---- 
-SHA512: 
-  data.tar.gz: ddc498458198f3b8bf3970e0ff5717664bde1d4e10b016e269f3dbdc756e14e8b22dfff256f96d031499710c28617332e3e2bb2b51022cc90cae936b3dd1029b
-  metadata.gz: f91b3ae4798075e4042e40e0f0125be9bc2dc95349950a844a9155d3045f89f04aa36fe3d23ffc0697c8a47985afac32b7070d51d28a79cc1409b795d608390a
-SHA1: 
-  data.tar.gz: a33119eb8b6be09f497ab5acfdea6cb23d186809
-  metadata.gz: 28749208bf89321c492108bbda9cbf49e80b6e73
+---
+SHA1:
+  metadata.gz: c0d0e6f2a5c79279593c18b5def0e890c767a40b
+  data.tar.gz: 5c32b09ced919eac8881623bd3e6bfb6f220e0c1
+SHA512:
+  metadata.gz: 74324bbe9569bc5fd301eda6bd296c00d4f175a6651bf9519b317f159675b081a47dbc2d822948d2645147da9d2f9d22393ce24f93497b8eef4b316373cfdf70
+  data.tar.gz: 3e2e4bcf5a7e4a707e35374981722b1ec03e65dfca4c4922bcc312ef6ad0846decaffff7f8c432d0cd861b8fced49ec6d1d44295c59a639c6a38579b723009b1

data/lib/toolkit.rb

@@ -1,16 +1,4 @@
 require 'compass'
-require 'singularitygs'
-require 'sassy-strings'
-require 'color-schemer'
 
 extension_path = File.expand_path(File.join(File.dirname(__FILE__), ".."))
-Compass::Frameworks.register('toolkit', :path => extension_path)
-
-module Sass::Script::Functions
-  def children_of_ie_nth(input)
-    n = "n"
-    b = ""
-    result = input.value.gsub(n, b)
-    Sass::Script::Number.new(result.to_i)
-  end
-end
+Compass::Frameworks.register('toolkit', :path => extension_path)

data/stylesheets/_toolkit.scss

@@ -1,74 +1,18 @@
-////////////////////////
-// Compass Imports
-////////////////////////
-@import 'compass';
-
-////////////////////////
-// Import Border Box Awesomesauce
-////////////////////////
-@import 'toolkit/border-box';
-
-////////////////////////
-// Import Fluid Media
-////////////////////////
-@import 'toolkit/fluid-media';
-
-////////////////////////
-// Import Intrinsic Ratio
-////////////////////////
-@import 'toolkit/intrinsic-ratio';
-
-////////////////////////
-// Import Nested Context
-////////////////////////
-@import 'toolkit/nested-context';
-
-////////////////////////
-// Import Progressive Enhancement
-////////////////////////
-@import 'toolkit/pe';
-
-//////////////////////////////
-// Import Clearfix
 //////////////////////////////
-@import 'toolkit/clearfix';
-
-//////////////////////////////
-// Import Vertical Center
+// Toolkit Settings
 //////////////////////////////
-@import 'toolkit/vertical-center';
+@import "toolkit/settings";
 
 //////////////////////////////
-// Import Color Helpers
-//////////////////////////////
-@import 'toolkit/colours';
-
-//////////////////////////////
-// Import Triangle
-//////////////////////////////
-@import 'toolkit/triangle';
-
-//////////////////////////////
-// Import Selector Awesomeness
-//////////////////////////////
-@import "toolkit/selectors";
-
-//////////////////////////////
-// Import Equal Height Columns
-//////////////////////////////
-@import "toolkit/equal-height-columns";
-
-//////////////////////////////
-// Import Fonts
+// Imports
 //////////////////////////////
+@import "toolkit/clearfix";
+@import "toolkit/colors";
+@import "toolkit/element-query";
 @import "toolkit/fonts";
-
-//////////////////////////////
-// Viewport
-//////////////////////////////
-@import "toolkit/viewport";
-
-//////////////////////////////
-// Element Query
-//////////////////////////////
-@import "toolkit/element-query";
+@import "toolkit/intrinsic-ratio";
+@import "toolkit/nested-context";
+@import "toolkit/pe";
+@import "toolkit/properties";
+@import "toolkit/triangle";
+@import "toolkit/viewport";

data/stylesheets/toolkit/_clearfix.scss

@@ -1,104 +1,20 @@
 //////////////////////////////
-// Massive Clearfix Mixin
-//
-// Clearfix mixin for all of your clearfixing needs. Will choose the right mixin for you.
-// Can choose whether to extend or to write.
+// Modern Clearfix Mixin
 //////////////////////////////
-$clearfix-extend: false !default;
-$clearfix-direct: false !default;
-$toolkit-clearfix: true;
-
-@mixin cf($extend: $clearfix-extend, $direct: $clearfix-direct) {
-  @include clearfix($extend, $direct);
-}
-
-@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;
-    }
-    @else {
-      /* 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;
-      }
-    }
-  }
-  @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;
-    }
-    @else {
-      /* 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;
-      }
-    }
+@mixin clearfix($extend: null) {
+  $extend: if($extend !== null, $extend, toolkit-get('clearfix extend'));
+  @if $extend {
+    @extend %toolkit-clearfix;
   }
   @else {
-    @if $extend {
-      @extend %clearfix
-    }
-    @else {
-      &:after {
-        content: "";
-        display: table;
-        clear: both;
-      }
+    &:after {
+      content: "";
+      display: table;
+      clear: both;
     }
   }
 }
 
-//////////////////////////////
-// 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 {
-  @include clearfix(false, 'modern');
+%toolkit-clearfix {
+  @include clearfix(true);
 }

data/stylesheets/toolkit/_colors.scss

@@ -1 +1,89 @@
-@import "colours";
+//////////////////////////////
+// Compass Extension Imports
+//////////////////////////////
+
+//////////////////////////////
+// Tint and Shade
+//////////////////////////////
+@function tint($colour, $amount) {
+  @return mix(toolkit-get('tint color'), $colour, $amount);
+}
+
+@function shade($colour, $amount) {
+  @return mix(toolkit-get('shade color'), $colour, $amount);
+}
+
+//////////////////////////////
+// Color Stacks
+//////////////////////////////
+@function color-stack($main, $secondary, $amounts...) {
+  @if length($amounts) == 0 {
+    $amounts: toolkit-get('color stack amounts');
+  }
+  @else if length($amounts) == 1 {
+    $amounts: nth($amounts, 1);
+  }
+
+  $stack: $main;
+
+  @each $amount in $amounts {
+    $stack: join($stack, mix($secondary, nth($stack, 1), $amount));
+  }
+
+  @return $stack;
+}
+
+// Tint Stack
+@function tint-stack($color, $amounts...) {
+  @if length($amounts) > 0 {
+    @return colour-stack($color, toolkit-get('tint color'), $amounts);
+  }
+  @else {
+    @return colour-stack($color, toolkit-get('tint color'));
+  }
+}
+
+// Shade Stack
+@function shade-stack($color, $amounts...) {
+  @if length($amounts) > 0 {
+    @return colour-stack($color, toolkit-get('shade color'), $amounts);
+  }
+  @else {
+    @return colour-stack($color, toolkit-get('shade color'));
+  }
+}
+
+//////////////////////////////
+// Color Scales
+//////////////////////////////
+@function color-scale($main, $secondary, $shades: null) {
+  $shades: if($shades !== null, $shades, toolkit-get('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/_element-query.scss

@@ -4,13 +4,21 @@
 // Mixin as described by Filament Group
 // http://filamentgroup.com/lab/element_query_workarounds/
 //////////////////////////////
-@import "breakpoint";
 
 @mixin element-query($sizes...) {
-  @each $size in $sizes {
-    @include breakpoint(nth($size, 2)) {
-      #{nth($size, 1)} & {
-        @content;
+  @each $selector, $query in $sizes {
+    @if mixin-exists(breakpoint) {
+      @include breakpoint($query) {
+        #{$selector} & {
+          @content;
+        }
+      }
+    }
+    @else {
+      @media #{$query} {
+        #{$selector} & {
+          @content;
+        }
       }
     }
   }

data/stylesheets/toolkit/_fonts.scss

@@ -1,23 +1,41 @@
 //////////////////////////////
 // Enable ligatures
 //////////////////////////////
-@mixin enable-ligatures {
-  -webkit-font-feature-settings:"liga","dlig";
-  -moz-font-feature-settings:"liga=1, dlig=1";
-  -moz-font-feature-settings:"liga","dlig";
-  -ms-font-feature-settings:"liga","dlig";
-  -o-font-feature-settings:"liga","dlig";
-  font-feature-settings: "liga","dlig";
+@mixin enable-ligatures($extend: null) {
+  $extend: if($extend !== null, $extend, toolkit-get('extend ligatures'));
+
+  @if $extend {
+    @extend %enable-ligatures;
+  }
+  @else {
+    -webkit-font-feature-settings:"liga","dlig";
+    -moz-font-feature-settings:"liga=1, dlig=1";
+    -moz-font-feature-settings:"liga","dlig";
+    -ms-font-feature-settings:"liga","dlig";
+    -o-font-feature-settings:"liga","dlig";
+    font-feature-settings: "liga","dlig";
+  }
 }
 
 %enable-ligatures {
   @include enable-ligatures;
 }
 
+@if not mixin-exists('single-transition') {
+  @mixin single-transition($feature, $duration) {
+    -webkit-transition: $feature $duration;
+    transition: $feature, $duration;
+  }
+}
+
 //////////////////////////////
 // Font Fade In
 //////////////////////////////
-@mixin content-fade-in($duration: 1s, $loading: '.wf-loading', $selector: false) {
+@mixin content-fade-in($duration: null, $loading: null) {
+
+  $duration: if($duration !== null, $duration, toolkit-get('fade in duration'));
+  $loading: if($loading !== null, $loading, toolkit-get('fade in loading class'));
+  $selector: if('#{&}' != '', true, false);
 
   @if $selector != false {
     #{$selector} {

data/stylesheets/toolkit/_intrinsic-ratio.scss

@@ -1,13 +1,10 @@
 ////////////////////////
 // Fluid Embeds and whatever WITH NO JAVASCIPT!
 ////////////////////////
-$intrinsic-ratio: 16/9 !default;
-$intrinsic-ratio-width: 100% !default;
-$intrinsic-ratio-elements: '> *' !default;
-$intrinsic-ratio-extend: true !default;
-$intrinsic-ratio-direction: top !default;
+@mixin intrinsic-ratio-parent($extend: null) {
+  $extend: if($extend !== null, $extend, toolkit-get('intrinsic ratio extend'));
+
 
-@mixin intrinsic-ratio-parent($extend: $intrinsic-ratio-extend) {
     @if $extend {
       @extend %intrinsic-ratio-parent;
     }
@@ -17,7 +14,8 @@ $intrinsic-ratio-direction: top !default;
     }
 }
 
-@mixin intrinsic-ratio-child($extend: $intrinsic-ratio-extend) {
+@mixin intrinsic-ratio-child($extend: null) {
+  $extend: if($extend !== null, $extend, toolkit-get('intrinsic ratio extend'));
   @if $extend {
     @extend %intrinsic-ratio-child;
   }
@@ -32,12 +30,19 @@ $intrinsic-ratio-direction: top !default;
   }
 }
 
-@mixin intrinsic-ratio-ratio($ratio: $intrinsic-ratio, $width: $intrinsic-ratio-width, $direction: $intrinsic-ratio-direction) {
+@mixin intrinsic-ratio-ratio($ratio: null, $width: null, $direction: null) {
+  $ratio: if($ration !== null, $ratio, toolkit-get('intrinsic ratio'));
+  $width: if($width !== null, $width, toolkit-get('intrinsic ratio width'));
+  $direction: if($direction !== null, $direction, toolkit-get('intrinsic ratio direction'));
   padding-#{$direction}: (1 / $ratio) * $width;
   width: $width;
 }
 
-@mixin intrinsic-ratio($ratio: $intrinsic-ratio, $width: $intrinsic-ratio-width, $elements: $intrinsic-ratio-elements, $extend: $intrinsic-ratio-extend, $direction: $intrinsic-ratio-direction) {
+@mixin intrinsic-ratio($ratio: null, $width: null, $elements: null, $direction: null, $extend: null) {
+  $ratio: if($ration !== null, $ratio, toolkit-get('intrinsic ratio'));
+  $width: if($width !== null, $width, toolkit-get('intrinsic ratio width'));
+  $direction: if($direction !== null, $direction, toolkit-get('intrinsic ratio direction'));
+  $extend: if($extend !== null, $extend, toolkit-get('intrinsic ratio extend'));
   @include intrinsic-ratio-parent($extend);
 
   @include intrinsic-ratio-ratio($ratio, $width, $direction);
@@ -49,7 +54,7 @@ $intrinsic-ratio-direction: top !default;
   }
 }
 
-@mixin ir($ratio: $intrinsic-ratio, $width: $intrinsic-ratio-width, $elements: $intrinsic-ratio-elements, $extend: $intrinsic-ratio-extend, $direction: $intrinsic-ratio-direction) {
+@mixin ir($ratio: null, $width: null, $elements: null, $direction: null, $extend: null) {
   @include intrinsic-ratio($ratio, $width, $elements, $extend, $direction);
 }