toolkit 2.0.0.alpha.6 → 2.0.0.alpha.7

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 8d22e665ee0df44a19d175a293a5ee373a3522f8
-  data.tar.gz: 415fbee67ecddc2a9b1103ebad05f2136fe4bc1c
+  metadata.gz: 0f70813b98ac50ccc010d27edb252293f537c38b
+  data.tar.gz: 6b6614ea726b941a77854e19f5d3c1cac4c77ba9
 SHA512:
-  metadata.gz: 31cd53751a4cd8edefcd22dc001034d84023a3aac22909a62f7ad8ef5ac015844b01dcf40560efbbbc129799bf12a140d4b6c91157c73d1c3bb96cadef73ef50
-  data.tar.gz: 8096bb869890552555390e6c6ee31ce51c75270942e98267c18071aab982b71e3d75a2e4f1632d53302d7d001d767f39574f6f27e57db9e35944b4af13ed0cf5
+  metadata.gz: cdad416de492adb7637e43eb67e76b204683fe45cd2e45d65fac4c5e037a1ac3607f7103d0437a7146419ab7da41cb7eb5cc6d523c66114ad400087fa059be92
+  data.tar.gz: d66888767606a9afbfa544fd4cceef2148952eb3280aa85f520dab1e62d6d767860fe082206d6e6b9b67e4666828b5c59e5a12d61207a27eb8a8dbb520df02fc

data/stylesheets/_toolkit.scss

@@ -16,4 +16,5 @@
 @import "toolkit/pe";
 @import "toolkit/properties";
 @import "toolkit/triangle";
+@import "toolkit/vertical-center";
 @import "toolkit/viewport";

data/stylesheets/toolkit/_colors.scss

@@ -53,6 +53,30 @@
   }
 }
 
+// Tint/Shade Stack
+@function tint-shade-stack($color, $amounts...) {
+  $colors: ();
+  @if length($amounts) == 0 {
+    $amounts: toolkit-get('tint shade amounts');
+  }
+  $length: length($amounts);
+
+  // Shades
+  @for $i from 1 through $length {
+    $colors: append($colors, shade($color, nth($amounts, $i)));
+  }
+
+  // Base
+  $colors: append($colors, $color);
+
+  // Tints
+  @for $i from 0 through $length - 1 {
+    $colors: append($colors, tint($color, nth($amounts, $length - $i)));
+  }
+
+  @return $colors;
+}
+
 //////////////////////////////
 // Color Scales
 //////////////////////////////

data/stylesheets/toolkit/_intrinsic-ratio.scss

@@ -30,22 +30,23 @@
   }
 }
 
-@mixin intrinsic-ratio-ratio($ratio: null, $width: null, $direction: null) {
-  $ratio: if($ration != null, $ratio, toolkit-get('intrinsic ratio'));
+@mixin intrinsic-ratio-ratio($ratio: null, $width: null, $position: null) {
+  $ratio: if($ratio != 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;
+  $position: if($position != null, $position, toolkit-get('intrinsic ratio direction'));
+  padding-#{$position}: (1 / $ratio) * $width;
   width: $width;
 }
 
-@mixin intrinsic-ratio($ratio: null, $width: null, $elements: null, $direction: null, $extend: null) {
-  $ratio: if($ration != null, $ratio, toolkit-get('intrinsic ratio'));
+@mixin intrinsic-ratio($ratio: null, $width: null, $elements: null, $position: null, $extend: null) {
+  $ratio: if($ratio != 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'));
+  $elements: if($elements != null, $elements, toolkit-get('intrinsic ratio elements'));
+  $position: if($position != null, $position, 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);
+  @include intrinsic-ratio-ratio($ratio, $width, $position);
 
   @each $element in $elements {
     #{$element} {
@@ -54,8 +55,8 @@
   }
 }
 
-@mixin ir($ratio: null, $width: null, $elements: null, $direction: null, $extend: null) {
-  @include intrinsic-ratio($ratio, $width, $elements, $extend, $direction);
+@mixin ir($ratio: null, $width: null, $elements: null, $position: null, $extend: null) {
+  @include intrinsic-ratio($ratio, $width, $elements, $extend, $position);
 }
 
 %intrinsic-ratio-parent {

data/stylesheets/toolkit/_parallax.scss

@@ -1,6 +1,6 @@
 // Magic parallax mixins
 @mixin parallax-init($perspective: null, $element: null, $parallax-ios: null) {
-  
+
   $perspective: if($perspective != null, $perspective, toolkit-get('parallax perspective'));
   $element: if($element != null, $element, toolkit-get('parallax element'));
   $parallax-ios: if($parallax-ios != null, $parallax-ios, toolkit-get('parallax ios'));
@@ -16,38 +16,44 @@
   }
   #{$element} {
     overflow: auto;
-    -webkit-perspective: $perspective * 1px;
-    -moz-perspective: $perspective * 1px;
-    -ms-perspective: $perspective * 1px;
-    -o-perspective: $perspective * 1px;
-    perspective: $perspective * 1px;
+    @if mixin-exists(perspective) {
+      @include perspective($perspective * 1px);
+    }
+    @else {
+      -webkit-perspective: $perspective * 1px;
+      perspective: $perspective * 1px;
+    }
     // Allows for smooth scrolling but disables parallax effects.
     @if $parallax-ios == false {
       -webkit-overflow-scrolling: touch;
     }
     // Make sure 3D perspective is preserved
     &, & * {
-      -webkit-transform-style: preserve-3d;
-      -moz-transform-style: preserve-3d;
-      -ms-transform-style: preserve-3d;
-      -o-transform-style: preserve-3d;
-      transform-style: preserve-3d;
+      @if mixin-exists(transform-style) {
+      	@include transform-style(preserve-3d);
+      }
+      @else {
+      	-webkit-transform-style: preserve-3d;
+      	transform-style: preserve-3d;
+      }
     }
   }
 }
 
 @mixin parallax($distance: null, $perspective: null) {
-  
+
   $distance: if($distance != null, $distance, toolkit-get('parallax distance'));
   $perspective: if($perspective != null, $perspective, toolkit-get('parallax perspective'));
-  
-  $transform: translateZ($distance * $perspective * 1px)
-    scale(abs($distance - 1));
 
-  -webkit-transform: $transform;
-  -moz-transform: $transform;
-  -ms-transform: $transform;
-  -o-transform: $transform;
-  transform: $transform;
+  $transform: translateZ($distance * $perspective * 1px) scale(abs($distance - 1));
+
+  @if mixin-exists(transform) {
+    @include transform($transform);
+  }
+  @else {
+    -webkit-transform: $transform;
+    transform: $transform;
+  }
+
   z-index: $distance * 100;
 }

data/stylesheets/toolkit/_settings.scss

@@ -4,6 +4,7 @@
 $Toolkit-Settings: (
   'clearfix extend': false,
   'color stack amounts': 25% 50% 75% 85% 90%,
+  'tint shade amounts': 75% 50% 25%,
   'tint color': #fff,
   'shade color': #000,
   'color scale shades': 6,
@@ -26,6 +27,7 @@ $Toolkit-Settings: (
   'parallax element': 'body',
   'parallax ios': true,
   'parallax distance': 0,
+  'vertical midpoint': 50%,
 );
 
 //////////////////////////////
@@ -33,9 +35,6 @@ $Toolkit-Settings: (
 //////////////////////////////
 $toolkit: () !default;
 
-//////////////////////////////
-// Has Setting
-//////////////////////////////
 //////////////////////////////
 // Has Setting
 //////////////////////////////

data/stylesheets/toolkit/_vertical-center.scss

@@ -0,0 +1,16 @@
+// Vertically center anything, literally anything.
+// http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/
+@mixin vertical-center($midpoint: null) {
+
+  $midpoint: if($midpoint != null, $midpoint, toolkit-get('vertical midpoint'));
+
+  position: relative;
+  top: $midpoint;
+  @if mixin-exists(transform) {
+    @include transform(translateY(-50%));
+  } @else {
+    -webkit-transform: translateY(-50%);
+    -ms-transform: translateY(-50%);
+    transform: translateY(-50%);
+  }
+}

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: toolkit
 version: !ruby/object:Gem::Version
-  version: 2.0.0.alpha.6
+  version: 2.0.0.alpha.7
 platform: ruby
 authors:
 - Sam Richard
@@ -10,7 +10,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2014-01-26 00:00:00.000000000 Z
+date: 2014-01-29 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: sass
@@ -64,6 +64,7 @@ files:
 - stylesheets/toolkit/_selectors.scss
 - stylesheets/toolkit/_settings.scss
 - stylesheets/toolkit/_triangle.scss
+- stylesheets/toolkit/_vertical-center.scss
 - stylesheets/toolkit/_viewport.scss
 - LICENSE.txt
 homepage: https://github.com/Snugug/toolkit