toolkit 2.0.0.alpha.10 → 2.0.0

Sign up to get free protection for your applications and to get access to all the features.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA1:
3
- metadata.gz: 40fab31ed5bcbd898a91efbf84472b457bd42d9f
4
- data.tar.gz: ff405af012ccd8f1cd30473f5f1bb2245240dea2
3
+ metadata.gz: 62760cac31edf0b4c29adc98c135ae7fe31701ab
4
+ data.tar.gz: 9c9685e17a161700d2a601a6000c821a867d4bea
5
5
  SHA512:
6
- metadata.gz: 63eb3104bed6fbf1d24e80e9d1582d069fad98bac0aeaaad4bfbe7ed0311b03cd9d29ab8de1dc8338d919d0e876ccca577cc39d98ff0b9717a2e891a953134d9
7
- data.tar.gz: 5fde04eef1e1012069cd821f76f34457ead48aab96ecf45011605e2399b22c23a34a586191998260646e96ada7f2ad561a28fa5fa5667b3e788e34e300460619
6
+ metadata.gz: 312c882e68716000f7de22b83cecab58e414fae1938bf0445a34e3a8816e212982ec034b5e957af88a874f10bdadc107848caec86c542e0ae5c6fc879fb9c258
7
+ data.tar.gz: 39dc84d1b4a8567d593e09de184c000585049d3c7a7871fcf9a58bd49076c306659e67ed48e32a00315b42a01db78f20839694aa6f1d48a6d53c83dc1adbb870
data/lib/toolkit.rb CHANGED
@@ -1,4 +1,11 @@
1
- require 'compass'
1
+ if (defined? Compass)
2
+ Compass::Frameworks.register(
3
+ "toolkit",
4
+ :path => "#{File.dirname(__FILE__)}/.."
5
+ )
6
+ end
2
7
 
3
- extension_path = File.expand_path(File.join(File.dirname(__FILE__), ".."))
4
- Compass::Frameworks.register('toolkit', :path => extension_path)
8
+ module Toolkit
9
+ VERSION = "2.0.0"
10
+ DATE = "2014-03-14"
11
+ end
@@ -2,19 +2,18 @@
2
2
  // Toolkit Settings
3
3
  //////////////////////////////
4
4
  @import "toolkit/settings";
5
+ @import "toolkit/placeholders";
5
6
 
6
7
  //////////////////////////////
7
8
  // Imports
8
9
  //////////////////////////////
9
10
  @import "toolkit/clearfix";
10
11
  @import "toolkit/colors";
11
- @import "toolkit/element-query";
12
12
  @import "toolkit/fonts";
13
13
  @import "toolkit/intrinsic-ratio";
14
14
  @import "toolkit/nested-context";
15
15
  @import "toolkit/parallax";
16
- @import "toolkit/pe";
17
- @import "toolkit/properties";
16
+ @import "toolkit/rtl";
18
17
  @import "toolkit/triangle";
19
18
  @import "toolkit/vertical-center";
20
19
  @import "toolkit/viewport";
@@ -3,8 +3,11 @@
3
3
  //////////////////////////////
4
4
  @mixin clearfix($extend: null) {
5
5
  $extend: if($extend != null, $extend, toolkit-get('clearfix extend'));
6
- @if $extend {
7
- @extend %toolkit-clearfix;
6
+
7
+ @if $extend == true {
8
+ @include toolkit-placeholder('clearfix') {
9
+ @include clearfix(false);
10
+ }
8
11
  }
9
12
  @else {
10
13
  &:after {
@@ -13,8 +16,4 @@
13
16
  clear: both;
14
17
  }
15
18
  }
16
- }
17
-
18
- %toolkit-clearfix {
19
- @include clearfix(false);
20
19
  }
@@ -5,12 +5,12 @@
5
5
  //////////////////////////////
6
6
  // Tint and Shade
7
7
  //////////////////////////////
8
- @function tint($colour, $amount) {
9
- @return mix(toolkit-get('tint color'), $colour, $amount);
8
+ @function tint($color, $amount) {
9
+ @return mix(toolkit-get('tint color'), $color, $amount);
10
10
  }
11
11
 
12
- @function shade($colour, $amount) {
13
- @return mix(toolkit-get('shade color'), $colour, $amount);
12
+ @function shade($color, $amount) {
13
+ @return mix(toolkit-get('shade color'), $color, $amount);
14
14
  }
15
15
 
16
16
  //////////////////////////////
@@ -80,32 +80,65 @@
80
80
  //////////////////////////////
81
81
  // Color Scales
82
82
  //////////////////////////////
83
- @function color-scale($main, $secondary, $shades: null) {
84
- $shades: if($shades != null, $shades, toolkit-get('color scale shades'));
83
+ @function color-scale($main, $secondary, $steps: null) {
84
+ $steps: if($steps != null, $steps, toolkit-get('color scale steps'));;
85
85
 
86
86
  $list: $main;
87
87
 
88
88
  $red1: red($main);
89
89
  $red2: red($secondary);
90
- $red-diff: (($red1 - $red2) / (($shades - 1)));
90
+ $red-diff: (($red1 - $red2) / (($steps - 1)));
91
91
 
92
- $grn1: green($main);
93
- $grn2: green($secondary);
94
- $grn-diff: (($grn1 - $grn2) / (($shades - 1)));
92
+ $hue1: hue($main);
93
+ $hue2: hue($secondary);
94
+ @if ($hue2 + 359 - $hue1) < abs($hue1 - $hue2) {
95
+ $hue2: $hue2 + 359;
96
+ }
97
+ $hue-diff: ($hue2 - $hue1) / ($steps - 1);
98
+
99
+ $sat1: saturation($main);
100
+ $sat2: saturation($secondary);
101
+ $sat-diff: 0;
102
+ @if $sat1 > $sat2 {
103
+ $sat-diff: ($sat2 - $sat1) / ($steps - 1);
104
+ }
105
+ @else {
106
+ $sat-diff: ($sat1 - $sat2) / ($steps - 1);
107
+ }
108
+
109
+ $lte1: lightness($main);
110
+ $lte2: lightness($secondary);
111
+ $lte-diff: 0;
112
+ @if $lte1 > $lte2 {
113
+ $lte-diff: ($lte2 - $lte1) / ($steps - 1);
114
+ }
115
+ @else {
116
+ $lte-diff: ($lte1 - $lte2) / ($steps - 1);
117
+ }
118
+
119
+ $alp1: alpha($main);
120
+ $alp2: alpha($secondary);
121
+ $alp-diff: 0;
122
+ @if $alp1 > $alp2 {
123
+ $alp-diff: ($alp2 - $alp1) / ($steps - 1);
124
+ }
125
+ @else {
126
+ $alp-diff: ($alp1 - $alp2) / ($steps - 1);
127
+ }
95
128
 
96
- $blu1: blue($main);
97
- $blu2: blue($secondary);
98
- $blu-diff: (($blu1 - $blu2) / (($shades - 1)));
129
+ $hue-hold: $hue1;
130
+ $sat-hold: $sat1;
131
+ $lte-hold: $lte1;
132
+ $alp-hold: $alp1;
133
+ $color-hold: 0;
99
134
 
100
- $red-hold: $red1;
101
- $grn-hold: $grn1;
102
- $blu-hold: $blu1;
135
+ @for $i from 2 through $steps {
136
+ $hue-hold: $hue-hold + $hue-diff;
137
+ $sat-hold: $sat-hold + $sat-diff;
138
+ $lte-hold: $lte-hold + $lte-diff;
139
+ $alp-hold: $alp-hold + $alp-diff;
103
140
 
104
- @for $i from 2 through $shades {
105
- $red-hold: $red-hold - ($red-diff);
106
- $grn-hold: $grn-hold - ($grn-diff);
107
- $blu-hold: $blu-hold - ($blu-diff);
108
- $color-hold: rgb($red-hold, $grn-hold, $blu-hold);
141
+ $color-hold: hsla($hue-hold, $sat-hold, $lte-hold, $alp-hold);
109
142
  $list: append($list, $color-hold);
110
143
  }
111
144
 
@@ -2,10 +2,12 @@
2
2
  // Enable ligatures
3
3
  //////////////////////////////
4
4
  @mixin enable-ligatures($extend: null) {
5
- $extend: if($extend != null, $extend, toolkit-get('extend ligatures'));
5
+ $extend: if($extend != null, $extend, toolkit-get('ligature extend'));
6
6
 
7
7
  @if $extend {
8
- @extend %enable-ligatures;
8
+ @include toolkit-placeholder('enable ligatures') {
9
+ @include enable-ligatures;
10
+ }
9
11
  }
10
12
  @else {
11
13
  -webkit-font-feature-settings:"liga","dlig";
@@ -17,8 +19,93 @@
17
19
  }
18
20
  }
19
21
 
20
- %enable-ligatures {
21
- @include enable-ligatures;
22
+ //////////////////////////////
23
+ // Font Face
24
+ //////////////////////////////
25
+ @mixin font-face($name, $files, $weight: null, $style: null, $inline-woff: null) {
26
+ $weight: if($weight != null, $weight, toolkit-get('font face weight'));
27
+ $style: if($style != null, $style, toolkit-get('font face style'));
28
+ $inline-woff: if($inline-woff != null, $inline-woff, toolkit-get('font face inline woff'));
29
+
30
+ $font-stack: ();
31
+ $font-src: '';
32
+ $eot: false;
33
+ $font-extensions: ('eot': 'embedded-opentype', 'woff': 'woff', 'ttf': 'truetype', 'svg': 'svg');
34
+
35
+ @each $ext, $format in $font-extensions {
36
+ @if map-has-key($files, $ext) {
37
+ @if function-exists(inline-font-files) and $inline-woff == true and $ext == 'woff' {
38
+ $font-src: inline-font-files(map-get($files, $ext));
39
+ }
40
+ @else if function-exists(font-url) {
41
+ $font-src: font-url(map-get($files, $ext)) format($format);
42
+ @if $ext == 'eot' {
43
+ $eot: $font-src;
44
+ $font-src: font-url(map-get($files, $ext) + '#iefix') format($format);
45
+ }
46
+ }
47
+ @else {
48
+ $font-src: url(map-get($files, $ext)) format($format);
49
+ @if $ext == 'eot' {
50
+ $eot: $font-src;
51
+ $font-src: url(map-get($files, $ext) + '#iefix') format($format);
52
+ }
53
+ }
54
+ $font-stack: append($font-stack, $font-src, 'comma');
55
+ }
56
+
57
+ }
58
+
59
+ @at-root {
60
+ @font-face {
61
+ font-family: $name;
62
+ font-weight: $weight;
63
+ font-style: $style;
64
+ @if $eot {
65
+ src: $eot;
66
+ }
67
+ @if length($font-stack) > 0 {
68
+ src: $font-stack;
69
+ }
70
+ }
71
+ }
72
+ }
73
+
74
+ //////////////////////////////
75
+ // Icon Font
76
+ // From http://icomoon.io
77
+ //////////////////////////////
78
+ @mixin icon-font($font-stack, $speak: null, $extend: null) {
79
+ $speak: if($speak != null, $speak, toolkit-get('icon font speak'));
80
+ $extend: if($extend != null, $extend, toolkit-get('icon font extend'));
81
+
82
+ font-family: $font-stack;
83
+ @if $speak == false {
84
+ speak: none;
85
+ }
86
+ @include icon-font--core($extend);
87
+ }
88
+
89
+ @mixin icon-font--core($extend: null) {
90
+ $extend: if($extend != null, $extend, toolkit-get('icon font extend'));
91
+
92
+ @if $extend {
93
+ @include toolkit-placeholder('icon font core') {
94
+ @include icon-font--core(false);
95
+ }
96
+ }
97
+ @else {
98
+ font-style: normal;
99
+ font-weight: normal;
100
+ font-variant: normal;
101
+ text-transform: none;
102
+ line-height: 1;
103
+
104
+ @include enable-ligatures($extend);
105
+
106
+ -webkit-font-smoothing: antialiased;
107
+ -moz-osx-font-smoothing: grayscale;
108
+ }
22
109
  }
23
110
 
24
111
  //////////////////////////////
@@ -30,7 +117,9 @@
30
117
  $extend: if($extend != null, $extend, toolkit-get('fade in extend'));
31
118
 
32
119
  @if $extend == true and $duration == toolkit-get('fade in duration') and $loading == toolkit-get('fade in loading class') {
33
- @extend %content-fade-in;
120
+ @include toolkit-placeholder('content fade in') {
121
+ @include content-fade-in($extend: false);
122
+ }
34
123
  }
35
124
  @else {
36
125
  opacity: 1;
@@ -46,8 +135,4 @@
46
135
  opacity: 0;
47
136
  }
48
137
  }
49
- }
50
-
51
- %content-fade-in {
52
- @include content-fade-in($extend: false);
53
138
  }
@@ -4,20 +4,24 @@
4
4
  @mixin intrinsic-ratio-parent($extend: null) {
5
5
  $extend: if($extend != null, $extend, toolkit-get('intrinsic ratio extend'));
6
6
 
7
-
8
- @if $extend {
9
- @extend %intrinsic-ratio-parent;
10
- }
11
- @else {
12
- position: relative;
13
- height: 0;
7
+ @if $extend {
8
+ @include toolkit-placeholder('intrinsic ratio parent') {
9
+ @include intrinsic-ratio-parent(false);
14
10
  }
11
+ }
12
+ @else {
13
+ position: relative;
14
+ height: 0;
15
+ }
15
16
  }
16
17
 
17
18
  @mixin intrinsic-ratio-child($extend: null) {
18
19
  $extend: if($extend != null, $extend, toolkit-get('intrinsic ratio extend'));
20
+
19
21
  @if $extend {
20
- @extend %intrinsic-ratio-child;
22
+ @include toolkit-placeholder('intrinsic ratio child') {
23
+ @include intrinsic-ratio-child(false);
24
+ }
21
25
  }
22
26
  @else {
23
27
  display: block;
@@ -33,7 +37,8 @@
33
37
  @mixin intrinsic-ratio-ratio($ratio: null, $width: null, $position: null) {
34
38
  $ratio: if($ratio != null, $ratio, toolkit-get('intrinsic ratio'));
35
39
  $width: if($width != null, $width, toolkit-get('intrinsic ratio width'));
36
- $position: if($position != null, $position, toolkit-get('intrinsic ratio direction'));
40
+ $position: if($position != null, $position, toolkit-get('intrinsic ratio position'));
41
+
37
42
  padding-#{$position}: (1 / $ratio) * $width;
38
43
  width: $width;
39
44
  }
@@ -42,8 +47,9 @@
42
47
  $ratio: if($ratio != null, $ratio, toolkit-get('intrinsic ratio'));
43
48
  $width: if($width != null, $width, toolkit-get('intrinsic ratio width'));
44
49
  $elements: if($elements != null, $elements, toolkit-get('intrinsic ratio elements'));
45
- $position: if($position != null, $position, toolkit-get('intrinsic ratio direction'));
50
+ $position: if($position != null, $position, toolkit-get('intrinsic ratio position'));
46
51
  $extend: if($extend != null, $extend, toolkit-get('intrinsic ratio extend'));
52
+
47
53
  @include intrinsic-ratio-parent($extend);
48
54
 
49
55
  @include intrinsic-ratio-ratio($ratio, $width, $position);
@@ -57,12 +63,4 @@
57
63
 
58
64
  @mixin ir($ratio: null, $width: null, $elements: null, $position: null, $extend: null) {
59
65
  @include intrinsic-ratio($ratio, $width, $elements, $extend, $position);
60
- }
61
-
62
- %intrinsic-ratio-parent {
63
- @include intrinsic-ratio-parent(false);
64
- }
65
-
66
- %intrinsic-ratio-child {
67
- @include intrinsic-ratio-child(false);
68
66
  }
@@ -17,7 +17,7 @@
17
17
  // mixin to make things easier
18
18
  @mixin nested-context($contexts: null, $position: null) {
19
19
  $contexts: if($contexts != null, $contexts, toolkit-get('nested context contexts'));
20
- $position: if($position != null, $position, toolkit-get('nestex context position'));
20
+ $position: if($position != null, $position, toolkit-get('nested context position'));
21
21
 
22
22
  width: nested-context($contexts);
23
23
  @if $position == "center" {
@@ -6,36 +6,55 @@
6
6
  $parallax-ios: if($parallax-ios != null, $parallax-ios, toolkit-get('parallax ios'));
7
7
 
8
8
  @if $element == 'body' {
9
- html, body {
10
- width: 100%;
11
- height: 100%;
12
- margin: 0;
13
- padding: 0;
14
- overflow: hidden;
9
+ @at-root {
10
+ html, body {
11
+ width: 100%;
12
+ height: 100%;
13
+ margin: 0;
14
+ padding: 0;
15
+ overflow: hidden;
16
+ }
17
+ body {
18
+ @include parallax-init-core($perspective, $parallax-ios);
19
+ }
15
20
  }
16
21
  }
17
- #{$element} {
18
- overflow: auto;
19
- @if mixin-exists(perspective) {
20
- @include perspective($perspective * 1px);
22
+ @else {
23
+ @if $element == this {
24
+ @include parallax-init-core($perspective, $parallax-ios);
21
25
  }
22
26
  @else {
23
- -webkit-perspective: $perspective * 1px;
24
- perspective: $perspective * 1px;
27
+ @at-root #{$element} {
28
+ @include parallax-init-core($perspective, $parallax-ios);
29
+ }
25
30
  }
26
- // Allows for smooth scrolling but disables parallax effects.
27
- @if $parallax-ios == false {
28
- -webkit-overflow-scrolling: touch;
31
+ }
32
+ }
33
+
34
+ @mixin parallax-init-core($perspective: null, $parallax-ios: null) {
35
+ $perspective: if($perspective != null, $perspective, toolkit-get('parallax perspective'));
36
+ $parallax-ios: if($parallax-ios != null, $parallax-ios, toolkit-get('parallax ios'));
37
+
38
+ overflow: auto;
39
+ @if mixin-exists(perspective) {
40
+ @include perspective($perspective * 1px);
41
+ }
42
+ @else {
43
+ -webkit-perspective: $perspective * 1px;
44
+ perspective: $perspective * 1px;
45
+ }
46
+ // Allows for smooth scrolling but disables parallax effects.
47
+ @if $parallax-ios == false {
48
+ -webkit-overflow-scrolling: touch;
49
+ }
50
+ // Make sure 3D perspective is preserved
51
+ &, & * {
52
+ @if mixin-exists(transform-style) {
53
+ @include transform-style(preserve-3d);
29
54
  }
30
- // Make sure 3D perspective is preserved
31
- &, & * {
32
- @if mixin-exists(transform-style) {
33
- @include transform-style(preserve-3d);
34
- }
35
- @else {
36
- -webkit-transform-style: preserve-3d;
37
- transform-style: preserve-3d;
38
- }
55
+ @else {
56
+ -webkit-transform-style: preserve-3d;
57
+ transform-style: preserve-3d;
39
58
  }
40
59
  }
41
60
  }
@@ -0,0 +1,30 @@
1
+ $Private-Toolkit-Placeholders: (
2
+ );
3
+
4
+ //////////////////////////////
5
+ // Placeholder Get/Set
6
+ //////////////////////////////
7
+ @function toolkit-placeholder-set($id) {
8
+ $unique-id: unique-id();
9
+ $Private-Toolkit-Placeholders: map-merge($Private-Toolkit-Placeholders, ($id: $unique-id)) !global;
10
+ @return $unique-id;
11
+ }
12
+
13
+ @function toolkit-placeholder-get($id) {
14
+ @return map-get($Private-Toolkit-Placeholders, $id);
15
+ }
16
+
17
+ //////////////////////////////
18
+ // Generate Placeholder Class and Extend
19
+ //////////////////////////////
20
+ @mixin toolkit-placeholder($id) {
21
+ $placeholder-id: toolkit-placeholder-get($id);
22
+
23
+ @if $placeholder-id == null {
24
+ $placeholder-id: toolkit-placeholder-set($id);
25
+ @at-root %#{$placeholder-id} {
26
+ @content;
27
+ }
28
+ }
29
+ @extend %#{$placeholder-id};
30
+ }
@@ -0,0 +1,24 @@
1
+ @mixin rtl($property, $value) {
2
+ $_property: $property;
3
+ #{$property}: $value;
4
+
5
+ @if length($value) == 4 {
6
+ [dir="rtl"] & {
7
+ #{$property}: nth($value, 1) nth($value, 4) nth($value, 3) nth($value, 2);
8
+ }
9
+ }
10
+ @else {
11
+ @if (str-index($property, 'left')) {
12
+ $property: str-slice($property, 1, str-index($property, 'left') - 1) + 'right';
13
+ }
14
+ @else if (str-index($property, 'right')) {
15
+ $property: str-slice($property, 1, str-index($property, 'right') - 1) + 'left';
16
+ }
17
+
18
+ @if $property != $_property {
19
+ [dir="rtl"] & {
20
+ #{$property}: $value;
21
+ }
22
+ }
23
+ }
24
+ }
@@ -7,21 +7,23 @@ $Toolkit-Settings: (
7
7
  'tint shade amounts': 75% 50% 25%,
8
8
  'tint color': #fff,
9
9
  'shade color': #000,
10
- 'color scale shades': 6,
11
- 'extend ligatures': false,
10
+ 'color scale steps': 6,
11
+ 'ligature extend': false,
12
+ 'font face weight': normal,
13
+ 'font face style': normal,
14
+ 'font face inline woff': false,
15
+ 'icon font extend': false,
16
+ 'icon font speak': false,
12
17
  'fade in duration': 1s,
13
18
  'fade in loading class': '.wf-loading',
14
19
  'fade in extend': false,
15
20
  'intrinsic ratio': 16/9,
16
21
  'intrinsic ratio width': 100%,
17
22
  'intrinsic ratio elements': '> *',
18
- 'intrinsic ratio direction': top,
23
+ 'intrinsic ratio position': top,
19
24
  'intrinsic ratio extend': false,
20
25
  'nested context contexts': 100%,
21
26
  'nested context position': left,
22
- 'enhance with extend': false,
23
- 'degrade from extend': false,
24
- 'degrade from javascript': false,
25
27
  'triangle color': #000,
26
28
  'triangle height': 1em,
27
29
  'triangle width': 1em,
@@ -31,6 +33,7 @@ $Toolkit-Settings: (
31
33
  'parallax ios': true,
32
34
  'parallax distance': 0,
33
35
  'vertical midpoint': 50%,
36
+ 'vertical extend': false
34
37
  );
35
38
 
36
39
  //////////////////////////////
@@ -66,8 +69,8 @@ $toolkit: () !default;
66
69
  // Set Settings
67
70
  //////////////////////////////
68
71
  @function toolkit-set($setting, $value) {
69
- @if str-index($setting, '-') > 0 {
70
- @warn "Toolkit settings should contain spaces, not dashes. Please replace dashes with spaces. Settings will not work as expected until changed.";
72
+ @if (str-index($setting, '-') or str-index($setting, '_')) and str-index($setting, ' ') == null {
73
+ @warn "Words in Singularity settings should be spaces, not dashes or underscores. Please replace dashes and underscores between words with spaces. Settings will not work as expected until changed.";
71
74
  }
72
75
  $toolkit: map-merge($toolkit, ($setting: $value)) !global;
73
76
  @return true;
@@ -77,6 +80,10 @@ $toolkit: () !default;
77
80
  $toolkit-change: toolkit-set($setting, $value);
78
81
  }
79
82
 
83
+ @mixin toolkit-set($setting, $value) {
84
+ $toolkit-change: toolkit-set($setting, $value);
85
+ }
86
+
80
87
  //////////////////////////////
81
88
  // Remove Setting
82
89
  //////////////////////////////
@@ -39,11 +39,11 @@
39
39
  }
40
40
 
41
41
  @if unit($height) == "" or unit($height) == "%" {
42
- @debug "in triangle #{$height} is not a compatable unit for height."
42
+ @debug "in triangle #{$height} is not a compatible unit for height."
43
43
  }
44
44
 
45
45
  @if unit($width) == "" or unit($width) == "%" {
46
- @debug "in triangle #{$width} is not a compatable unit for width."
46
+ @debug "in triangle #{$width} is not a compatible unit for width."
47
47
  }
48
48
 
49
49
  // offset 45deg to make each side start at 0
@@ -1,16 +1,28 @@
1
1
  // Vertically center anything, literally anything.
2
2
  // http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/
3
- @mixin vertical-center($midpoint: null) {
4
-
3
+ @mixin vertical-center($midpoint: null, $extend: null) {
5
4
  $midpoint: if($midpoint != null, $midpoint, toolkit-get('vertical midpoint'));
5
+ $extend: if($extend != null, $extend, toolkit-get('vertical extend'));
6
6
 
7
- position: relative;
8
7
  top: $midpoint;
9
- @if mixin-exists(transform) {
10
- @include transform(translateY(-50%));
11
- } @else {
12
- -webkit-transform: translateY(-50%);
13
- -ms-transform: translateY(-50%);
14
- transform: translateY(-50%);
8
+ @include vertical-center-core($extend);
9
+ }
10
+
11
+ @mixin vertical-center-core($extend: null) {
12
+ $extend: if($extend != null, $extend, toolkit-get('vertical extend'));
13
+ @if $extend {
14
+ @include toolkit-placeholder('vertical center') {
15
+ @include vertical-center-core($extend: false);
16
+ }
17
+ }
18
+ @else {
19
+ position: relative;
20
+ @if mixin-exists(transform) {
21
+ @include transform(translateY(-50%));
22
+ } @else {
23
+ -webkit-transform: translateY(-50%);
24
+ -ms-transform: translateY(-50%);
25
+ transform: translateY(-50%);
26
+ }
15
27
  }
16
28
  }
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: toolkit
3
3
  version: !ruby/object:Gem::Version
4
- version: 2.0.0.alpha.10
4
+ version: 2.0.0
5
5
  platform: ruby
6
6
  authors:
7
7
  - Sam Richard
@@ -10,7 +10,7 @@ authors:
10
10
  autorequire:
11
11
  bindir: bin
12
12
  cert_chain: []
13
- date: 2014-02-12 00:00:00.000000000 Z
13
+ date: 2014-03-14 00:00:00.000000000 Z
14
14
  dependencies:
15
15
  - !ruby/object:Gem::Dependency
16
16
  name: sass
@@ -18,29 +18,16 @@ dependencies:
18
18
  requirements:
19
19
  - - ~>
20
20
  - !ruby/object:Gem::Version
21
- version: 3.3.0.rc.3
21
+ version: 3.3.0
22
22
  type: :runtime
23
23
  prerelease: false
24
24
  version_requirements: !ruby/object:Gem::Requirement
25
25
  requirements:
26
26
  - - ~>
27
27
  - !ruby/object:Gem::Version
28
- version: 3.3.0.rc.3
29
- - !ruby/object:Gem::Dependency
30
- name: compass
31
- requirement: !ruby/object:Gem::Requirement
32
- requirements:
33
- - - ~>
34
- - !ruby/object:Gem::Version
35
- version: 1.0.0.alpha.17
36
- type: :runtime
37
- prerelease: false
38
- version_requirements: !ruby/object:Gem::Requirement
39
- requirements:
40
- - - ~>
41
- - !ruby/object:Gem::Version
42
- version: 1.0.0.alpha.17
43
- description: Toolkit for Progressive Enhancement and Responsive Web Design
28
+ version: 3.3.0
29
+ description: Toolkit full of bits and bobs of awesome aimed at assisting in advanced
30
+ styling with Sass
44
31
  email:
45
32
  - sam@snug.ug
46
33
  - scott@scottkellum.com
@@ -53,24 +40,21 @@ files:
53
40
  - stylesheets/_toolkit.scss
54
41
  - stylesheets/toolkit/_clearfix.scss
55
42
  - stylesheets/toolkit/_colors.scss
56
- - stylesheets/toolkit/_element-query.scss
57
43
  - stylesheets/toolkit/_fonts.scss
58
44
  - stylesheets/toolkit/_intrinsic-ratio.scss
59
45
  - stylesheets/toolkit/_kickstart.scss
60
46
  - stylesheets/toolkit/_nested-context.scss
61
47
  - stylesheets/toolkit/_parallax.scss
62
- - stylesheets/toolkit/_pe.scss
63
- - stylesheets/toolkit/_properties.scss
64
- - stylesheets/toolkit/_selectors.scss
48
+ - stylesheets/toolkit/_placeholders.scss
49
+ - stylesheets/toolkit/_rtl.scss
65
50
  - stylesheets/toolkit/_settings.scss
66
51
  - stylesheets/toolkit/_triangle.scss
67
52
  - stylesheets/toolkit/_vertical-center.scss
68
53
  - stylesheets/toolkit/_viewport.scss
69
- - LICENSE.txt
70
54
  homepage: https://github.com/Snugug/toolkit
71
55
  licenses:
72
56
  - MIT
73
- - GPL
57
+ - GPL-2.0
74
58
  metadata: {}
75
59
  post_install_message:
76
60
  rdoc_options: []
@@ -91,5 +75,5 @@ rubyforge_project: toolkit
91
75
  rubygems_version: 2.0.3
92
76
  signing_key:
93
77
  specification_version: 4
94
- summary: Progressive Enhancement and RWD toolkit of awesomeness
78
+ summary: Toolkit of awesome Sass stuff
95
79
  test_files: []
data/LICENSE.txt DELETED
@@ -1,27 +0,0 @@
1
- Toolkit is dual licensed under the MIT and GPL licenses:
2
-
3
- GPL license: http://www.gnu.org/licenses/gpl.html
4
-
5
- MIT license: http://www.opensource.org/licenses/mit-license.php
6
-
7
- Hammer.js License:
8
-
9
- Copyright (C) 2011 by Jorik Tangelder (Eight Media)
10
-
11
- Permission is hereby granted, free of charge, to any person obtaining a copy
12
- of this software and associated documentation files (the "Software"), to deal
13
- in the Software without restriction, including without limitation the rights
14
- to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
15
- copies of the Software, and to permit persons to whom the Software is
16
- furnished to do so, subject to the following conditions:
17
-
18
- The above copyright notice and this permission notice shall be included in
19
- all copies or substantial portions of the Software.
20
-
21
- THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
22
- IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
23
- FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
24
- AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
25
- LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
26
- OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
27
- THE SOFTWARE.
@@ -1,25 +0,0 @@
1
- //////////////////////////////
2
- // Element Query
3
- //
4
- // Mixin as described by Filament Group
5
- // http://filamentgroup.com/lab/element_query_workarounds/
6
- //////////////////////////////
7
-
8
- @mixin element-query($sizes...) {
9
- @each $selector, $query in $sizes {
10
- @if mixin-exists(breakpoint) {
11
- @include breakpoint($query) {
12
- #{$selector} & {
13
- @content;
14
- }
15
- }
16
- }
17
- @else {
18
- @media #{$query} {
19
- #{$selector} & {
20
- @content;
21
- }
22
- }
23
- }
24
- }
25
- }
@@ -1,69 +0,0 @@
1
- ////////////////////////
2
- // Enhance From
3
- //
4
- // - $feature: Modernizr feature (base CSS class name)
5
- ////////////////////////
6
- @mixin enhance-with($features, $extend: null) {
7
- $extend: if($extend != null, $extend, toolkit-get('enhance with extend'));
8
-
9
- @if $extend {
10
- $uid: unique-id();
11
- @at-root %#{$uid} {
12
- @content;
13
- }
14
- @each $feature in $features {
15
- .#{$feature} & {
16
- @extend %#{$uid};
17
- }
18
- }
19
- }
20
- @else {
21
- @each $feature in $features {
22
- .#{$feature} & {
23
- @content;
24
- }
25
- }
26
- }
27
- }
28
-
29
- ////////////////////////
30
- // Degrade From
31
- //
32
- // - $feature: Modernizr feature (base CSS class name)
33
- ////////////////////////
34
- @mixin degrade-from($features, $no-js: null, $extend: null) {
35
- $no-js: if($no-js != null, $no-js, toolkit-get('degrade from javascript'));
36
- $extend: if($extend != null, $extend, toolkit-get('degrade from extend'));
37
-
38
- @if $extend {
39
- $uid: unique-id();
40
- @at-root %#{$uid} {
41
- @content;
42
- }
43
-
44
- @each $feature in $features {
45
- .no-#{$feature} & {
46
- @extend %#{$uid};
47
- }
48
- }
49
-
50
- @if not index($features, 'js') and $no-js != true {
51
- .no-js & {
52
- @extend %#{$uid};
53
- }
54
- }
55
- }
56
- @else {
57
- @each $feature in $features {
58
- .no-#{$feature} & {
59
- @content;
60
- }
61
- }
62
-
63
- @if not index($features, 'js') and $no-js != true {
64
- .no-js & {
65
- @content;
66
- }
67
- }
68
- }
69
- }
@@ -1,9 +0,0 @@
1
- @mixin rtl($property, $size) {
2
- #{$property}: $size;
3
-
4
- @if length($size) == 4 {
5
- [dir="rtl"] & {
6
- #{$property}: nth($size, 1) nth($size, 4) nth($size, 3) nth($size, 2);
7
- }
8
- }
9
- }
@@ -1,92 +0,0 @@
1
- //////////////////////////////
2
- // Attribute Selector
3
- //////////////////////////////
4
-
5
- @mixin style-attribute($attribute, $selector, $value, $sibling: '') {
6
- $select: false;
7
-
8
- @if $selector == 'equals' {
9
- $select: '=';
10
- }
11
- @else if $selector == 'contains' {
12
- $select: '*=';
13
- }
14
- @else if $selector == 'begins with' {
15
- $select: '^=';
16
- }
17
- @else if $selector == 'ends with' {
18
- $select: '$=';
19
- }
20
- @else if $selector == 'within spaced list' {
21
- $select: '~=';
22
- }
23
- @else if $selector == 'within dashed list' {
24
- $select: '|=';
25
- }
26
-
27
- @if $select {
28
- #{$sibling}[#{$attribute}#{$select}"#{$value}"] {
29
- @content;
30
- }
31
- }
32
- @else {
33
- @warn '"#{$selector}" is not a valid use of CSS Attribute Selectors';
34
- }
35
- }
36
-
37
- //////////////////////////////
38
- // External Link Selectors
39
- //////////////////////////////
40
- @mixin style-external-links($base-url: false, $scheme: 'all') {
41
- @if $base-url {
42
- @if $scheme == 'plain' {
43
- a[href^="http://"][href*="#{$base-url}"] {
44
- @content;
45
- }
46
- }
47
- @else if $scheme == 'secure' {
48
- a[href^="https://"][href*="#{$base-url}"] {
49
- @content;
50
- }
51
- }
52
- @else if $scheme == 'all' {
53
- a[href^="http"][href*="#{$base-url}"] {
54
- @content;
55
- }
56
- }
57
- }
58
- @else {
59
- @if $scheme == 'all' {
60
- a[href^="http"] {
61
- @content;
62
- }
63
- }
64
- @else if $scheme == 'plain' {
65
- a[href^="http://"] {
66
- @content;
67
- }
68
- }
69
- @else if $scheme == 'secure' {
70
- a[href^="https://"] {
71
- @content;
72
- }
73
- }
74
- }
75
- }
76
-
77
- $legacy-support-for-ie: $legacy-support-for-ie6 or $legacy-support-for-ie7 or $legacy-support-for-ie8 !default;
78
-
79
- //////////////////////////////
80
- // Syle Internal Links
81
- //////////////////////////////
82
- @mixin style-internal-links {
83
- @if $legacy-support-for-ie {
84
- a {
85
- @content;
86
- }
87
- }
88
- a:not([href^='http://']),
89
- a:not([href^='https://']) {
90
- @content;
91
- }
92
- }