toolkit 0.2.0.1 → 0.2.1

Sign up to get free protection for your applications and to get access to all the features.
@@ -26,4 +26,9 @@
26
26
  //////////////////////////////
27
27
  // Import Vertical Center
28
28
  //////////////////////////////
29
- @import 'toolkit/vertical-center';
29
+ @import 'toolkit/vertical-center';
30
+
31
+ //////////////////////////////
32
+ // Import Color Helpers
33
+ //////////////////////////////
34
+ @import 'toolkit/colors';
@@ -5,4 +5,6 @@
5
5
  // From http://paulirish.com/2012/box-sizing-border-box-ftw/
6
6
  ////////////////////////
7
7
  @import "compass/css3/box-sizing";
8
- * { @include box-sizing('border-box'); }
8
+ *,
9
+ *:after,
10
+ *:before { @include box-sizing('border-box'); }
@@ -0,0 +1,43 @@
1
+ /// Tint and Shade
2
+ @function tint($color, $amount) {
3
+ @return mix(#fff, $color, $amount);
4
+ }
5
+
6
+ @function shade($color, $amount) {
7
+ @return mix(#000, $color, $amount);
8
+ }
9
+
10
+ // Create a color stack using the given colors and tints
11
+ @function color-stack($main, $secondary, $amounts...) {
12
+ @if length($amounts) == 0 {
13
+ $amounts: 25%, 25%, 15%, 10%;
14
+ }
15
+
16
+ $stack: $main;
17
+ $i: 1;
18
+
19
+ @each $amount in $amounts {
20
+ $stack: join($stack, mix($secondary, nth($stack, $i), $amount));
21
+ $i: $i + 1;
22
+ }
23
+
24
+ @return $stack;
25
+ }
26
+
27
+ @function tint-stack($color, $amounts...) {
28
+ @if length($amounts) > 0 {
29
+ @return color-stack($color, #fff, $amounts);
30
+ }
31
+ @else {
32
+ @return color-stack($color, #fff);
33
+ }
34
+ }
35
+
36
+ @function shade-stack($color, $amounts...) {
37
+ @if length($amounts) > 0 {
38
+ @return color-stack($color, #000, $amounts);
39
+ }
40
+ @else {
41
+ @return color-stack($color, #000);
42
+ }
43
+ }
@@ -16,7 +16,7 @@ $intrinsic-ratio-width: 100% !default;
16
16
  $intrinsic-ratio-elements: '*' !default;
17
17
  $intrinsic-ratio-extend: true !default;
18
18
 
19
- @mixin intrinsic-ratio($ratio: $intrinsic-ratio, $width: $intrinsic-ratio-width, $elements: $intrinsic-ratio-elements, $extend: $intrinsic-ratio-extend) {
19
+ @mixin intrinsic-ratio($ratio: $intrinsic-ratio-extend, $width: $intrinsic-ratio-width, $elements: $intrinsic-ratio-elements, $extend: $intrinsic-ratio-extend) {
20
20
  @if not $extend {
21
21
  position: relative;
22
22
  height: 0;
@@ -3,6 +3,8 @@
3
3
  //
4
4
  // - $feature: Modernizr feature (base CSS class name)
5
5
  ////////////////////////
6
+ @import "compass/typography/text/replacement";
7
+
6
8
  @mixin enhance-with($feature) {
7
9
  .#{$feature} & {
8
10
  @content;
@@ -50,14 +52,14 @@ $replace-text-inline-element: false !default;
50
52
  @else {
51
53
  @extend %replace-text-pe-hide;
52
54
  }
53
-
55
+
54
56
  @if $method == 'svg' {
55
57
  @include svg-background($img-path, $sprite, $inline-svg, $with-dimensions);
56
58
  }
57
59
  @else if $method == 'retina' {
58
60
  @include retina-background($img-path, $sprite, $with-dimensions);
59
61
  }
60
-
62
+
61
63
  }
62
64
 
63
65
  //////////////////////////////
@@ -66,10 +68,10 @@ $replace-text-inline-element: false !default;
66
68
  @mixin svg-background($img-path, $sprite, $inline-svg: $replace-text-pe-inline-svg, $with-dimensions: $replace-text-pe-with-dimensions) {
67
69
  $png-path: $img-path + '/*.png';
68
70
  $sprite-map: sprite-map($png-path);
69
-
71
+
70
72
  // Build SVG file name
71
73
  $svg-file: $img-path + '/#{$sprite}.svg';
72
-
74
+
73
75
  // Default Sprite File
74
76
  $sprite-file: '' !default;
75
77
 
@@ -81,7 +83,7 @@ $replace-text-inline-element: false !default;
81
83
  width: image-width($sprite-file);
82
84
  height: image-height($sprite-file);
83
85
  }
84
-
86
+
85
87
  @include enhance-with('svg') {
86
88
  // Inline the SVG so that advanced browsers and future tech doesn't need the extra HTTP requests for the SVG
87
89
  @if $inline-svg {
@@ -97,8 +99,8 @@ $replace-text-inline-element: false !default;
97
99
  background-size: image-width($sprite-file) image-height($sprite-file);
98
100
  }
99
101
  }
100
-
101
- // Degrade from SVG
102
+
103
+ // Degrade from SVG
102
104
  @include degrade-from('svg') {
103
105
  // Extend the Sprite Background
104
106
  @extend %#{sprite-map-name($sprite-map)}-image-map;
@@ -113,21 +115,21 @@ $replace-text-inline-element: false !default;
113
115
  @mixin retina-background($img-path, $sprite, $with-dimensions: $replace-text-pe-with-dimensions) {
114
116
  $png-path: $img-path + '/*.png';
115
117
  $sprite-map: sprite-map($png-path);
116
-
118
+
117
119
  $png2x-path: $img-path + '_2x/*.png';
118
120
  $retina-map: sprite-map($png2x-path);
119
-
121
+
120
122
  // Default Sprite File
121
123
  $sprite-file: '' !default;
122
124
 
123
125
  @if $with-dimensions {
124
126
  // Get Sprite File for Height/Width
125
127
  $sprite-file: sprite-file($sprite-map, $sprite);
126
-
128
+
127
129
  width: image-width($sprite-file);
128
130
  height: image-height($sprite-file);
129
131
  }
130
-
132
+
131
133
  .ie6 &,
132
134
  .ie7 &,
133
135
  .ie8 & {
@@ -159,7 +161,7 @@ $replace-text-inline-element: false !default;
159
161
  }
160
162
  @include sprite($retina-map, $sprite);
161
163
  }
162
-
164
+
163
165
  //////////////////////////////
164
166
  // Actual Hotness
165
167
  //
@@ -190,18 +192,18 @@ $replace-text-inline-element: false !default;
190
192
  @mixin sprite-map-generator($img-path, $method: $replace-text-pe-method) {
191
193
  $png-path: $img-path + '/*.png';
192
194
  $png-path: sprite-map($png-path);
193
-
195
+
194
196
  @if $method == 'retina' {
195
197
  $png2x-path: $img-path + '_2x/*.png';
196
198
  $png2x-path: sprite-map($png2x-path);
197
-
199
+
198
200
  %#{sprite-map-name($png-path)}-image-map-fallback {
199
201
  background: {
200
202
  image: $png-path;
201
203
  repeat: no-repeat;
202
204
  }
203
205
  }
204
-
206
+
205
207
  @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) {
206
208
  %#{sprite-map-name($png-path)}-image-map {
207
209
  background: {
@@ -227,8 +229,8 @@ $replace-text-inline-element: false !default;
227
229
  }
228
230
  }
229
231
  }
230
-
231
-
232
+
233
+
232
234
  }
233
235
 
234
236
  //////////////////////////////
@@ -243,4 +245,4 @@ $replace-text-inline-element: false !default;
243
245
  //////////////////////////////
244
246
  %replace-text-pe-hide {
245
247
  @include hide-text();
246
- }
248
+ }
metadata CHANGED
@@ -5,9 +5,8 @@ version: !ruby/object:Gem::Version
5
5
  segments:
6
6
  - 0
7
7
  - 2
8
- - 0
9
8
  - 1
10
- version: 0.2.0.1
9
+ version: 0.2.1
11
10
  platform: ruby
12
11
  authors:
13
12
  - Sam Richard
@@ -16,7 +15,7 @@ autorequire:
16
15
  bindir: bin
17
16
  cert_chain: []
18
17
 
19
- date: 2011-10-17 00:00:00 -04:00
18
+ date: 2011-11-12 00:00:00 -05:00
20
19
  default_executable:
21
20
  dependencies:
22
21
  - !ruby/object:Gem::Dependency
@@ -90,6 +89,7 @@ files:
90
89
  - stylesheets/_toolkit.scss
91
90
  - stylesheets/toolkit/_border-box.scss
92
91
  - stylesheets/toolkit/_clearfix.scss
92
+ - stylesheets/toolkit/_colors.scss
93
93
  - stylesheets/toolkit/_fluid-media.scss
94
94
  - stylesheets/toolkit/_pe.scss
95
95
  - stylesheets/toolkit/_vertical-center.scss