toolkit 1.3.8 → 2.0.0.alpha.1

data/stylesheets/toolkit/_kickstart.scss

@@ -0,0 +1,14 @@
+*, *:before, *:after {
+  @if mixin-exists('box-sizing') {
+    @include box-sizing('border-box');
+  }
+  @else {
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+  }
+}
+
+img, video {
+  max-width: 100%;
+  height: auto;
+}

data/stylesheets/toolkit/_nested-context.scss

@@ -1,12 +1,10 @@
-$nested-context-contexts: 100% !default;
-$nested-context-position: left !default;
-
 // simple function to find the context of a nested percentage.
-@function nested-context($contexts: $nested-context-contexts) {
-  
+@function nested-context($contexts: null) {
+  $contexts: if($contexts !== null, $contexts, toolkit-get('nested context contexts'));
+
   // First level deep is always 100%
   $percentage: 100%;
-  
+
   // Loop through each level
   @each $context in $contexts {
     // Invert the percentage to find context
@@ -17,7 +15,10 @@ $nested-context-position: left !default;
 }
 
 // mixin to make things easier
-@mixin nested-context($contexts: $nested-context-contexts, $position: $nested-context-position) {
+@mixin nested-context($contexts: null, $position: null) {
+  $contexts: if($contexts !== null, $contexts, toolkit-get('nested context contexts'));
+  $position: if($position !== null, $position, toolkit-get('nestex context position'));
+
   width: nested-context($contexts);
   @if $position == "center" {
     position: relative;

data/stylesheets/toolkit/_pe.scss

@@ -3,10 +3,15 @@
 //
 // - $feature: Modernizr feature (base CSS class name)
 ////////////////////////
-@import "compass/typography/text/replacement";
+@mixin enhance-with($features) {
+  $ft: '';
+  @each $feature in $features {
+    $ft: $ft + '.#{$feature}, '
+  }
+
+  $ft: str-slice($ft, -2);
 
-@mixin enhance-with($feature) {
-  .#{$feature} & {
+  .#{$ft} & {
     @content;
   }
 }
@@ -16,235 +21,23 @@
 //
 // - $feature: Modernizr feature (base CSS class name)
 ////////////////////////
-@mixin degrade-from($feature, $no-js: true) {
+@mixin degrade-from($features, $no-js: null) {
+  $ft: '';
+  @each $feature in $features {
+    $ft: $ft + '.no-#{$feature}, '
+  }
+
+  $no-js: if($no-js !== null, $no-js, toolkit-get('degrade from javascript'));
+
   @if $feature == 'js' or not $no-js {
-    .no-#{$feature} & {
+    #{$ft} & {
       @content;
     }
   }
   @else {
-    .no-#{$feature} &,
+    #{$ft} &,
     .no-js & {
       @content;
     }
   }
-}
-
-////////////////////////
-// Progressive Enhancement Text Replace Mixin
-//
-// - $png-path: The path to the pngs for the image sprite, including the *.png (just like normal image sprites)
-// - $sprite: The name of the sprite you want to use (this is the file name without extension)
-// - $inline-svg: Switches between a Base64 encoded SVG or a normal url() for the SVG. Default to true
-// - $with-dimensions: Switches between including dimensions (height/width for all and background-size for SVG) or not. Defaults to true.
-// - $inline: Whether or not the containing selector is an inline element. Defaults to false.
-////////////////////////
-@import "compass/utilities/sprites";
-
-$replace-text-pe-method: 'svg' !default;
-$replace-text-pe-inline-svg: true !default;
-$replace-text-pe-with-dimensions: true !default;
-$replace-text-inline-element: false !default;
-
-@mixin replace-text-pe($img-path, $sprite, $method: $replace-text-pe-method, $inline-svg: $replace-text-pe-inline-svg, $with-dimensions: $replace-text-pe-with-dimensions, $inline-element: $replace-text-inline-element) {
-  // Hide text. Use squish-text() if the element is inline
-  @if $inline-element {
-    @extend %replace-text-pe-squish;
-  }
-  @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);
-  }
-
-}
-
-//////////////////////////////
-// SVG Background Image with Fallback
-//////////////////////////////
-@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;
-
-  @if $with-dimensions {
-    // Get Sprite File for Height/Width
-    $sprite-file: sprite-file($sprite-map, $sprite);
-
-    // Put the height/width of the image in
-    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 {
-      background-image: inline-image($svg-file);
-    }
-    @else {
-      background-image: image-url($svg-file);
-    }
-    // No repeating backgrounds, please
-    background-repeat: no-repeat;
-    // Set background size to ensure that our SVG is the right size.
-    @if $with-dimensions {
-      background-size: image-width($sprite-file) image-height($sprite-file);
-    }
-  }
-
-  // Degrade from SVG
-  @include degrade-from('svg') {
-    // Extend the Sprite Background
-    @extend %#{sprite-map-name($sprite-map)}-image-map;
-    // Call the Sprite'd image's position.
-    @include sprite($sprite-map, $sprite);
-  }
-}
-
-//////////////////////////////
-// Retina Background Image with Fallback
-//////////////////////////////
-@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 & {
-    @extend %#{sprite-map-name($sprite-map)}-image-map-fallback;
-    @include sprite($sprite-map, $sprite);
-  }
-
-  //////////////////////////////
-  // Ugly Hack
-  //
-  // Due to a bug plus a design decision, I cannot extend the background image
-  //   like I would like to or you would do by hand. This sucks, but it's the
-  //   only way to get it to work for now.
-  //////////////////////////////
-  @media (max-resolution: 1.4dppx), (-webkit-max-device-pixel-ratio: 1.4), (max--moz-device-pixel-ratio: 1.4), (max-resolution: 134.4dpi) {
-    background: {
-      image: $sprite-map;
-      repeat: no-repeat;
-    }
-    @include sprite($sprite-map, $sprite);
-  }
-  @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;
-    }
-    @if $with-dimensions {
-      background-size: image-width($sprite-file) image-height($sprite-file);
-    }
-    @include sprite($retina-map, $sprite);
-  }
-
-    //////////////////////////////
-    // Actual Hotness
-    //
-    // Do to a bug plus a design decision, I cannot extend the background image
-    //   like I would like to or you would do by hand. This is how it'll work
-    //   when I can.
-    //////////////////////////////
-//  @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) {
-//      @extend %#{sprite-map-name($png-path)}-image-map;
-//      @include sprite($png-path, $sprite)
-//    }
-//    @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) {
-//      @extend %#{sprite-map-name($png2x-path)}-image-map;
-//      @include sprite($retina-map, $sprite);
-//      @if $with-dimensions {
-//        background-size: image-width($sprite-file) image-height($sprite-file);
-//      }
-//    }
-}
-
-//////////////////////////////
-// Sprite Map Generator
-//
-// Need a custom mixin to create extendable classes classes for background image for sprites because dynamic mixin names don't work.
-//
-// - $png-path: The path to the pngs for the image sprite, including the *.png (just like normal image sprites)
-//////////////////////////////
-@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 (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;
-          repeat: no-repeat;
-        }
-      }
-    }
-    @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;
-          repeat: no-repeat;
-        }
-      }
-    }
-  }
-  @else {
-    %#{sprite-map-name($png-path)}-image-map {
-      background: {
-        image: $png-path;
-        repeat: no-repeat;
-      }
-    }
-  }
-
-
-}
-
-//////////////////////////////
-// Extendable Class for Squish Text mixin
-//////////////////////////////
-%replace-text-pe-squish {
-  @include squish-text();
-}
-
-//////////////////////////////
-// Extendable Class for Hide Text mixin
-//////////////////////////////
-%replace-text-pe-hide {
-  @include hide-text();
-}
+}

data/stylesheets/toolkit/_selectors.scss

@@ -89,29 +89,4 @@ $legacy-support-for-ie: $legacy-support-for-ie6 or $legacy-support-for-ie7 or $l
   a:not([href^='https://']) {
     @content;
   }
-}
-
-////////////////////////
-// nth-child() support for IE 7 and 8
-////////////////////////
-@function nth-child($n) {
-
-  // If a single number for nth.
-  @if type-of($n) == number {
-    $nth-child: first-child;
-    @for $i from 2 through $n {
-      $nth-child: append($nth-child, #{"+*"});
-    }
-    @return #{":"}$nth-child;
-  }
-
-  // If a nth-child string, need to parse the string.
-  @else {
-    $n: nth(children-of-ie-nth($n), 1);
-    $nth-child: first-child;
-    @for $i from 2 through $n {
-      $nth-child: append($nth-child, #{"~*"});
-    }
-    @return #{":"}$nth-child;
-  }
 }

data/stylesheets/toolkit/_settings.scss

@@ -0,0 +1,90 @@
+//////////////////////////////
+// Default Settings
+//////////////////////////////
+$Toolkit-Settings: (
+  'clearfix extend': false,
+  'color stack amounts': 25% 50% 75% 85% 90%,
+  'tint color': #fff,
+  'shade color': #000,
+  'color scale shades': 6,
+  'extend ligatures': false,
+  'fade in duration': 1s,
+  'fade in loading class': '.wf-loading',
+  'intrinsic ratio': 16/9,
+  'intrinsic ratio width': 100%,
+  'intrinsic ratio elements': '> *',
+  'intrinsic ratio direction': top,
+  'intrinsic ratio extend': false,
+  'nested context contexts': 100%,
+  'nested context position': left,
+  'degrade from javascript': false,
+  'triangle color': #000,
+  'triangle height': 1em,
+  'triangle width': 1em,
+  'triangle angle': 0
+);
+
+//////////////////////////////
+// User Settings
+//////////////////////////////
+$toolkit: () !default;
+
+//////////////////////////////
+// Has Setting
+//////////////////////////////
+//////////////////////////////
+// Has Setting
+//////////////////////////////
+@function toolkit-has($setting) {
+  @if map-has-key($toolkit, $setting) {
+    @return true;
+  }
+  @else {
+    @return false;
+  }
+}
+
+//////////////////////////////
+// Get Settings
+//////////////////////////////
+@function toolkit-get($setting) {
+  @if toolkit-has($setting) {
+    @return map-get($toolkit, $setting);
+  }
+  @else {
+    @return map-get($Toolkit-Settings, $setting);
+  }
+}
+
+//////////////////////////////
+// Set Settings
+//////////////////////////////
+@function toolkit-set($setting, $value) {
+  @if str-index($setting, '-') > 0 {
+    @warn "Toolkit settings should contain spaces, not dashes. Please replace dashes with spaces. Settings will not work as expected until changed.";
+  }
+  $toolkit: map-merge($toolkit, ($setting: $value)) !global;
+  @return true;
+}
+
+@mixin toolkit-change($setting, $value) {
+  $toolkit-change: toolkit-set($setting, $value);
+}
+
+//////////////////////////////
+// Remove Setting
+//////////////////////////////
+@function toolkit-reset($setting) {
+  $Return: ();
+
+  @each $Key, $Value in $toolkit {
+    $Return: if($setting == $Key, $Return, map-merge($Return, ($Key: $Value)));
+  }
+
+  $toolkit: $Return !global;
+  @return true;
+}
+
+@mixin toolkit-reset($setting) {
+  $toolkit-reset: toolkit-reset($setting);
+}

data/stylesheets/toolkit/_triangle.scss

@@ -2,8 +2,13 @@
 // Draw triangles
 //////////////////////////////
 
-@mixin triangle($color: #000, $height: 1em, $width: 1em, $angle: 0) {
-  
+@mixin triangle($color: null, $height: null, $width: null, $angle: null) {
+
+  $color: if($color !== null, $color, toolkit-get('triangle color'));
+  $height: if($height !== null, $height, toolkit-get('triangle height'));
+  $width: if($width !== null, $width, toolkit-get('triangle width'));
+  $angle: if($angle !== null, $angle, toolkit-get('triangle angle'));
+
   @if nth($angle, 1) == "top" or nth($angle, 1) == "bottom" {
     $angle: "#{$angle}";
   }