toolkit 0.1.18 → 0.2

Sign up to get free protection for your applications and to get access to all the features.
@@ -58,4 +58,72 @@
58
58
  content: "";
59
59
  display: table;
60
60
  clear: both;
61
+ }
62
+
63
+ //////////////////////////////
64
+ // Massive Clearfix Mixin
65
+ //
66
+ // Clearfix mixin for all of your clearfixing needs. Will choose the right mixin for you.
67
+ // Can choose whether to extend or to write.
68
+ //////////////////////////////
69
+ $clearfix-extend: false !default;
70
+ $legacy-support-for-mozilla: true !default;
71
+
72
+ @mixin clearfix($extend: $clearfix-extend) {
73
+ @if $legacy-support-for-ie6 and $legacy-support-for-ie7 and not $legacy-support-for-mozilla {
74
+ @if $extend {
75
+ @extend %clearfix-micro;
76
+ }
77
+ @else {
78
+ /* for IE 6/7 */
79
+ *zoom: expression(this.runtimeStyle.zoom="1", this.appendChild(document.createElement("br")).style.cssText="clear:both;font:0/0 serif");
80
+ /* non-JS fallback */
81
+ *zoom: 1;
82
+
83
+ &:before,
84
+ &:after {
85
+ content: "";
86
+ display: table;
87
+ }
88
+
89
+ &:after {
90
+ clear: both;
91
+ }
92
+ }
93
+ }
94
+ @else if $legacy-support-for-ie6 and $legacy-support-for-ie7 and $legacy-support-for-mozilla {
95
+ @if $extend {
96
+ @extend %clearfix-legacy;
97
+ }
98
+ @else {
99
+ /* for IE 6/7 */
100
+ *zoom: expression(this.runtimeStyle.zoom="1", this.appendChild(document.createElement("br")).style.cssText="clear:both;font:0/0 serif");
101
+ /* non-JS fallback */
102
+ *zoom: 1;
103
+
104
+ &:before,
105
+ &:after {
106
+ content: ".";
107
+ display: block;
108
+ height: 0;
109
+ overflow: hidden;
110
+ }
111
+
112
+ &:after {
113
+ clear: both;
114
+ }
115
+ }
116
+ }
117
+ @else {
118
+ @if $extend {
119
+ @extend %clearfix
120
+ }
121
+ @else {
122
+ &:after {
123
+ content: "";
124
+ display: table;
125
+ clear: both;
126
+ }
127
+ }
128
+ }
61
129
  }
@@ -1,7 +1,7 @@
1
1
  ////////////////////////
2
- // Fluid Images
2
+ // Fluid Images and Video
3
3
  ////////////////////////
4
- img {
4
+ img, video {
5
5
  max-width: 100%;
6
6
  height: auto;
7
7
  }
@@ -11,19 +11,24 @@ img {
11
11
  //
12
12
  // From the outrageously awesome Scott Kellum
13
13
  ////////////////////////
14
- @mixin scale-elements($ratio: 16/9, $width: 100%, $elements: '*', $no-extend: false) {
15
- @if $no-extend {
14
+ $intrinsic-ratio: 16/9 !default;
15
+ $intrinsic-ratio-width: 100% !default;
16
+ $intrinsic-ratio-elements: '*' !default;
17
+ $intrinsic-ratio-extend: true !default;
18
+
19
+ @mixin intrinsic-ratio($ratio: $intrinsic-ratio-extend, $width: $intrinsic-ratio-width, $elements: $intrinsic-ratio-elements, $extend: $intrinsic-ratio-extend) {
20
+ @if not $extend {
16
21
  position: relative;
17
22
  height: 0;
18
23
  }
19
24
  @else {
20
- @extend %scaling-elements-parent;
25
+ @extend %intrinsic-ratio-parent;
21
26
  }
22
27
  padding-top: (1 / $ratio) * $width;
23
28
  width: $width;
24
29
  @each $element in $elements {
25
30
  > #{$element} {
26
- @if $no-extend {
31
+ @if not $extend {
27
32
  display: block;
28
33
  position: absolute;
29
34
  width: 100%;
@@ -33,18 +38,18 @@ img {
33
38
  padding: 0;
34
39
  }
35
40
  @else {
36
- @extend %scaling-elements-child;
41
+ @extend %intrinsic-ratio-child;
37
42
  }
38
43
  }
39
44
  }
40
45
  }
41
46
 
42
- %scaling-elements-parent {
47
+ %intrinsic-ratio-parent {
43
48
  position: relative;
44
49
  height: 0;
45
50
  }
46
51
 
47
- %scaling-elements-child {
52
+ %intrinsic-ratio-child {
48
53
  display: block;
49
54
  position: absolute;
50
55
  width: 100%;
@@ -37,18 +37,42 @@
37
37
  // - $with-dimensions: Switches between including dimensions (height/width for all and background-size for SVG) or not. Defaults to true.
38
38
  // - $inline: Whether or not the containing selector is an inline element. Defaults to false.
39
39
  ////////////////////////
40
- @mixin replace-text-pe($img-path, $sprite, $inline-svg: true, $with-dimensions: true, $inline-element: false) {
41
- // Map Out the Sprite
40
+ $replace-text-pe-method: 'svg' !default;
41
+ $replace-text-pe-inline-svg: true !default;
42
+ $replace-text-pe-with-dimensions: true !default;
43
+ $replace-text-inline-element: false !default;
44
+
45
+ @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) {
46
+ // Hide text. Use squish-text() if the element is inline
47
+ @if $inline-element {
48
+ @extend %replace-text-pe-squish;
49
+ }
50
+ @else {
51
+ @extend %replace-text-pe-hide;
52
+ }
53
+
54
+ @if $method == 'svg' {
55
+ @include svg-background($img-path, $sprite, $inline-svg, $with-dimensions);
56
+ }
57
+ @else if $method == 'retina' {
58
+ @include retina-background($img-path, $sprite, $with-dimensions);
59
+ }
60
+
61
+ }
62
+
63
+ //////////////////////////////
64
+ // SVG Background Image with Fallback
65
+ //////////////////////////////
66
+ @mixin svg-background($img-path, $sprite, $inline-svg: $replace-text-pe-inline-svg, $with-dimensions: $replace-text-pe-with-dimensions) {
42
67
  $png-path: $img-path + '/*.png';
43
68
  $sprite-map: sprite-map($png-path);
44
69
 
45
70
  // Build SVG file name
46
- // $svg-file: str-replace('*.png', '#{$sprite}.svg', $png-path);
47
71
  $svg-file: $img-path + '/#{$sprite}.svg';
48
72
 
49
73
  // Default Sprite File
50
74
  $sprite-file: '' !default;
51
-
75
+
52
76
  @if $with-dimensions {
53
77
  // Get Sprite File for Height/Width
54
78
  $sprite-file: sprite-file($sprite-map, $sprite);
@@ -58,15 +82,6 @@
58
82
  height: image-height($sprite-file);
59
83
  }
60
84
 
61
- // Hide text. Use squish-text() if the element is inline
62
- @if $inline-element {
63
- @extend %replace-text-pe-squish;
64
- }
65
- @else {
66
- @extend %replace-text-pe-hide;
67
- }
68
-
69
- // Enhance with SVG
70
85
  @include enhance-with('svg') {
71
86
  // Inline the SVG so that advanced browsers and future tech doesn't need the extra HTTP requests for the SVG
72
87
  @if $inline-svg {
@@ -92,6 +107,79 @@
92
107
  }
93
108
  }
94
109
 
110
+ //////////////////////////////
111
+ // Retina Background Image with Fallback
112
+ //////////////////////////////
113
+ @mixin retina-background($img-path, $sprite, $with-dimensions: $replace-text-pe-with-dimensions) {
114
+ $png-path: $img-path + '/*.png';
115
+ $sprite-map: sprite-map($png-path);
116
+
117
+ $png2x-path: $img-path + '_2x/*.png';
118
+ $retina-map: sprite-map($png2x-path);
119
+
120
+ // Default Sprite File
121
+ $sprite-file: '' !default;
122
+
123
+ @if $with-dimensions {
124
+ // Get Sprite File for Height/Width
125
+ $sprite-file: sprite-file($sprite-map, $sprite);
126
+
127
+ width: image-width($sprite-file);
128
+ height: image-height($sprite-file);
129
+ }
130
+
131
+ .ie6 &,
132
+ .ie7 &,
133
+ .ie8 & {
134
+ @extend %#{sprite-map-name($sprite-map)}-image-map-fallback;
135
+ @include sprite($sprite-map, $sprite);
136
+ }
137
+
138
+ //////////////////////////////
139
+ // Ugly Hack
140
+ //
141
+ // Due to a bug plus a design decision, I cannot extend the background image
142
+ // like I would like to or you would do by hand. This sucks, but it's the
143
+ // only way to get it to work for now.
144
+ //////////////////////////////
145
+ @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) {
146
+ background: {
147
+ image: $sprite-map;
148
+ repeat: no-repeat;
149
+ }
150
+ @include sprite($sprite-map, $sprite);
151
+ }
152
+ @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) {
153
+ background: {
154
+ image: $retina-map;
155
+ repeat: no-repeat;
156
+ }
157
+ @if $with-dimensions {
158
+ background-size: image-width($sprite-file) image-height($sprite-file);
159
+ }
160
+ @include sprite($retina-map, $sprite);
161
+ }
162
+
163
+ //////////////////////////////
164
+ // Actual Hotness
165
+ //
166
+ // Do to a bug plus a design decision, I cannot extend the background image
167
+ // like I would like to or you would do by hand. This is how it'll work
168
+ // when I can.
169
+ //////////////////////////////
170
+ // @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) {
171
+ // @extend %#{sprite-map-name($png-path)}-image-map;
172
+ // @include sprite($png-path, $sprite)
173
+ // }
174
+ // @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) {
175
+ // @extend %#{sprite-map-name($png2x-path)}-image-map;
176
+ // @include sprite($retina-map, $sprite);
177
+ // @if $with-dimensions {
178
+ // background-size: image-width($sprite-file) image-height($sprite-file);
179
+ // }
180
+ // }
181
+ }
182
+
95
183
  //////////////////////////////
96
184
  // Sprite Map Generator
97
185
  //
@@ -99,15 +187,48 @@
99
187
  //
100
188
  // - $png-path: The path to the pngs for the image sprite, including the *.png (just like normal image sprites)
101
189
  //////////////////////////////
102
- @mixin sprite-map-generator($img-path) {
190
+ @mixin sprite-map-generator($img-path, $method: $replace-text-pe-method) {
103
191
  $png-path: $img-path + '/*.png';
104
192
  $png-path: sprite-map($png-path);
105
- %#{sprite-map-name($png-path)}-image-map {
106
- background: {
107
- image: $png-path;
108
- repeat: no-repeat;
193
+
194
+ @if $method == 'retina' {
195
+ $png2x-path: $img-path + '_2x/*.png';
196
+ $png2x-path: sprite-map($png2x-path);
197
+
198
+ %#{sprite-map-name($png-path)}-image-map-fallback {
199
+ background: {
200
+ image: $png-path;
201
+ repeat: no-repeat;
202
+ }
203
+ }
204
+
205
+ @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
+ %#{sprite-map-name($png-path)}-image-map {
207
+ background: {
208
+ image: $png-path;
209
+ repeat: no-repeat;
210
+ }
211
+ }
212
+ }
213
+ @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) {
214
+ %#{sprite-map-name($png2x-path)}-image-map {
215
+ background: {
216
+ image: $png2x-path;
217
+ repeat: no-repeat;
218
+ }
219
+ }
220
+ }
221
+ }
222
+ @else {
223
+ %#{sprite-map-name($png-path)}-image-map {
224
+ background: {
225
+ image: $png-path;
226
+ repeat: no-repeat;
227
+ }
109
228
  }
110
229
  }
230
+
231
+
111
232
  }
112
233
 
113
234
  //////////////////////////////
metadata CHANGED
@@ -4,9 +4,8 @@ version: !ruby/object:Gem::Version
4
4
  prerelease: false
5
5
  segments:
6
6
  - 0
7
- - 1
8
- - 18
9
- version: 0.1.18
7
+ - 2
8
+ version: "0.2"
10
9
  platform: ruby
11
10
  authors:
12
11
  - Sam Richard
@@ -15,7 +14,7 @@ autorequire:
15
14
  bindir: bin
16
15
  cert_chain: []
17
16
 
18
- date: 2011-10-10 00:00:00 -04:00
17
+ date: 2011-10-17 00:00:00 -04:00
19
18
  default_executable:
20
19
  dependencies:
21
20
  - !ruby/object:Gem::Dependency