compass-flexbox 1.0 → 1.1

Sign up to get free protection for your applications and to get access to all the features.
@@ -1,16 +1,20 @@
1
1
  @import "compass/css3/shared";
2
2
 
3
+ $flexbox-legacy-support: -moz, -webkit, not -o, not -ms, not -khtml, not official;
4
+ $flexbox-ie-support: not -moz, not -webkit, not -o, -ms, not -khtml, not official;
5
+ $flexbox-standard-support: not -moz, -webkit, not -o, not -ms, not -khtml, official;
6
+
3
7
  // Enabling flexbox: setting an element to be a flex container
4
8
  @mixin display-flex() {
5
- @include experimental-value(display, box, -moz, -webkit, not -o, not -ms, not -khtml, not official);
6
- @include experimental-value(display, flexbox, not -moz, not -webkit, not -o, -ms, not -khtml, not official);
7
- @include experimental-value(display, flex, not -moz, -webkit, not -o, not -ms, not -khtml, official);
9
+ @include experimental-value(display, box, $flexbox-legacy-support...);
10
+ @include experimental-value(display, flexbox, $flexbox-ie-support...);
11
+ @include experimental-value(display, flex, $flexbox-standard-support...);
8
12
  }
9
13
 
10
14
  @mixin display-inline-flex() {
11
- @include experimental-value(display, inline-box, -moz, -webkit, not -o, not -ms, not -khtml, not official);
12
- @include experimental-value(display, inline-flexbox, not -moz, not -webkit, not -o, -ms, not -khtml, not official);
13
- @include experimental-value(display, inline-flex, not -moz, -webkit, not -o, not -ms, not -khtml, official);
15
+ @include experimental-value(display, inline-box, $flexbox-legacy-support...);
16
+ @include experimental-value(display, inline-flexbox, $flexbox-ie-support...);
17
+ @include experimental-value(display, inline-flex, $flexbox-standard-support...);
14
18
  }
15
19
 
16
20
  // Axis alignment: specifying alignment of items along the main flexbox axis
@@ -142,9 +146,9 @@ $default-flex-flow: $default-flex-direction $default-flex-wrap !default;
142
146
  @if $legacy-property {
143
147
  @if $legacy-value {
144
148
  @if $standard-property == flex-direction and ($value == row-reverse or $value == column-reverse) {
145
- @include experimental(box-direction, reverse, -moz, -webkit, not -o, not -ms, not -khtml, not official);
149
+ @include experimental(box-direction, reverse, $flexbox-legacy-support...);
146
150
  }
147
- @include experimental($legacy-property, $legacy-value, -moz, -webkit, not -o, not -ms, not -khtml, not official);
151
+ @include experimental($legacy-property, $legacy-value, $flexbox-legacy-support...);
148
152
  }
149
153
  } @else {
150
154
  @warn _support-warning($standard-property, "legacy");
@@ -152,41 +156,41 @@ $default-flex-flow: $default-flex-direction $default-flex-wrap !default;
152
156
 
153
157
  // IE 10
154
158
  @if $ie-property and $ie-value {
155
- @include experimental($ie-property, $ie-value, not -moz, not -webkit, not -o, -ms, not -khtml, not official);
159
+ @include experimental($ie-property, $ie-value, $flexbox-ie-support...);
156
160
  }
157
161
 
158
162
  // Chrome 21+, Opera 12.1, Firefox 22+
159
- @include experimental($standard-property, $standard-value, not -moz, -webkit, not -o, not -ms, not -khtml, official);
163
+ @include experimental($standard-property, $standard-value, $flexbox-standard-support...);
160
164
  }
161
165
 
162
166
  @function _flex-value($property, $value, $syntax) {
163
- $new-value: $value;
164
- $warning: false;
167
+ $flexbox-new-value: $value;
168
+ $flexbox-warning: false;
165
169
 
166
170
  @if $property == justify-content {
167
171
  @if $value == flex-start {
168
172
  @if $syntax == legacy or $syntax == ie {
169
- $new-value: start;
173
+ $flexbox-new-value: start;
170
174
  }
171
175
  }
172
176
  @else if $value == flex-end {
173
177
  @if $syntax == legacy or $syntax == ie {
174
- $new-value: end;
178
+ $flexbox-new-value: end;
175
179
  }
176
180
  }
177
181
  @else if $value == space-between {
178
182
  @if $syntax == legacy {
179
- $warning: "\"#{$property}: #{$value}\" does not work in the legacy Firefox implementation";
183
+ $flexbox-warning: "\"#{$property}: #{$value}\" does not work in the legacy Firefox implementation";
180
184
  }
181
185
  @if $syntax == legacy or $syntax == ie {
182
- $new-value: justify;
186
+ $flexbox-new-value: justify;
183
187
  }
184
188
  }
185
189
  @else if $value == space-around {
186
190
  @if $syntax == legacy {
187
- $new-value: null;
191
+ $flexbox-new-value: null;
188
192
  } @else if $syntax == ie {
189
- $new-value: distribute;
193
+ $flexbox-new-value: distribute;
190
194
  }
191
195
  }
192
196
  }
@@ -194,12 +198,12 @@ $default-flex-flow: $default-flex-direction $default-flex-wrap !default;
194
198
  @if $property == align-items {
195
199
  @if $value == flex-start {
196
200
  @if $syntax == legacy or $syntax == ie {
197
- $new-value: start;
201
+ $flexbox-new-value: start;
198
202
  }
199
203
  }
200
204
  @else if $value == flex-end {
201
205
  @if $syntax == legacy or $syntax == ie {
202
- $new-value: end;
206
+ $flexbox-new-value: end;
203
207
  }
204
208
  }
205
209
  }
@@ -207,12 +211,12 @@ $default-flex-flow: $default-flex-direction $default-flex-wrap !default;
207
211
  @if $property == align-self {
208
212
  @if $value == flex-start {
209
213
  @if $syntax == ie {
210
- $new-value: start;
214
+ $flexbox-new-value: start;
211
215
  }
212
216
  }
213
217
  @else if $value == flex-end {
214
218
  @if $syntax == ie {
215
- $new-value: end;
219
+ $flexbox-new-value: end;
216
220
  }
217
221
  }
218
222
  }
@@ -220,49 +224,49 @@ $default-flex-flow: $default-flex-direction $default-flex-wrap !default;
220
224
  @if $property == align-content {
221
225
  @if $value == flex-start {
222
226
  @if $syntax == ie {
223
- $new-value: start;
227
+ $flexbox-new-value: start;
224
228
  }
225
229
  }
226
230
  @else if $value == flex-end {
227
231
  @if $syntax == ie {
228
- $new-value: end;
232
+ $flexbox-new-value: end;
229
233
  }
230
234
  }
231
235
  @else if $value == space-between {
232
236
  @if $syntax == ie {
233
- $new-value: justify;
237
+ $flexbox-new-value: justify;
234
238
  }
235
239
  }
236
240
  @else if $value == space-around {
237
241
  @if $syntax == ie {
238
- $new-value: distribute;
242
+ $flexbox-new-value: distribute;
239
243
  }
240
244
  }
241
245
  }
242
246
 
243
247
  @if $property == order {
244
248
  @if $syntax == legacy and $value < 1 {
245
- $warning: "\"#{$property}\" must be a positive integer in the \"#{$syntax}\" syntax";
246
- $new-value: null;
249
+ $flexbox-warning: "\"#{$property}\" must be a positive integer in the \"#{$syntax}\" syntax";
250
+ $flexbox-new-value: null;
247
251
  }
248
252
  }
249
253
 
250
254
  @if $property == flex {
251
255
  @if $syntax == legacy and type_of($value) != number {
252
- $warning: "\"#{$property}\" only accepts an integer in the \"#{$syntax}\" syntax";
253
- $new-value: null;
256
+ $flexbox-warning: "\"#{$property}\" only accepts an integer in the \"#{$syntax}\" syntax";
257
+ $flexbox-new-value: null;
254
258
  }
255
259
  }
256
260
 
257
261
  @if $property == flex-direction {
258
262
  @if $value == row or $value == row-reverse {
259
263
  @if $syntax == legacy {
260
- $new-value: horizontal;
264
+ $flexbox-new-value: horizontal;
261
265
  }
262
266
  }
263
267
  @else if $value == column or $value == column-reverse {
264
268
  @if $syntax == legacy {
265
- $new-value: vertical;
269
+ $flexbox-new-value: vertical;
266
270
  }
267
271
  }
268
272
  }
@@ -270,27 +274,27 @@ $default-flex-flow: $default-flex-direction $default-flex-wrap !default;
270
274
  @if $property == flex-wrap {
271
275
  @if $value == nowrap {
272
276
  @if $syntax == legacy {
273
- $new-value: single;
277
+ $flexbox-new-value: single;
274
278
  }
275
279
  }
276
280
  @else if $value == wrap {
277
281
  @if $syntax == legacy {
278
282
  @warn "\"#{$property}: #{$value}\" is not supported consistently in the \"#{$syntax}\" syntax";
279
- $new-value: multiple;
283
+ $flexbox-new-value: multiple;
280
284
  }
281
285
  }
282
286
  @else if $value == wrap-reverse {
283
287
  @if $syntax == legacy {
284
- $new-value: null;
288
+ $flexbox-new-value: null;
285
289
  }
286
290
  }
287
291
  }
288
292
 
289
- @if $new-value == null or $warning {
290
- @warn if($warning, $warning, _support-warning("#{$property}: #{$value}", $syntax));
293
+ @if $flexbox-new-value == null or $flexbox-warning {
294
+ @warn if($flexbox-warning, $flexbox-warning, _support-warning("#{$property}: #{$value}", $syntax));
291
295
  }
292
296
 
293
- @return $new-value;
297
+ @return $flexbox-new-value;
294
298
  }
295
299
 
296
300
  @function _support-warning($value, $syntax) {
@@ -3,7 +3,7 @@
3
3
  <head>
4
4
  <meta charset="utf-8">
5
5
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
6
- <title>Flex Box</title>
6
+ <title>Compass Flexbox</title>
7
7
  <meta name="description" content="">
8
8
  <meta name="viewport" content="width=device-width">
9
9
  <link rel="stylesheet" href="stylesheets/compass-flexbox.css">
metadata CHANGED
@@ -1,59 +1,56 @@
1
- --- !ruby/object:Gem::Specification
1
+ --- !ruby/object:Gem::Specification
2
2
  name: compass-flexbox
3
- version: !ruby/object:Gem::Version
4
- hash: 15
3
+ version: !ruby/object:Gem::Version
4
+ version: '1.1'
5
5
  prerelease:
6
- segments:
7
- - 1
8
- - 0
9
- version: "1.0"
10
6
  platform: ruby
11
- authors:
7
+ authors:
12
8
  - Tim Hettler
13
9
  autorequire:
14
10
  bindir: bin
15
11
  cert_chain: []
16
-
17
- date: 2013-06-10 00:00:00 Z
18
- dependencies:
19
- - !ruby/object:Gem::Dependency
12
+ date: 2013-07-12 00:00:00.000000000 Z
13
+ dependencies:
14
+ - !ruby/object:Gem::Dependency
20
15
  name: sass
21
- prerelease: false
22
- requirement: &id001 !ruby/object:Gem::Requirement
16
+ requirement: !ruby/object:Gem::Requirement
23
17
  none: false
24
- requirements:
25
- - - ">="
26
- - !ruby/object:Gem::Version
27
- hash: 3
28
- segments:
29
- - 0
30
- version: "0"
18
+ requirements:
19
+ - - ! '>='
20
+ - !ruby/object:Gem::Version
21
+ version: '0'
31
22
  type: :runtime
32
- version_requirements: *id001
33
- - !ruby/object:Gem::Dependency
34
- name: compass
35
23
  prerelease: false
36
- requirement: &id002 !ruby/object:Gem::Requirement
24
+ version_requirements: !ruby/object:Gem::Requirement
25
+ none: false
26
+ requirements:
27
+ - - ! '>='
28
+ - !ruby/object:Gem::Version
29
+ version: '0'
30
+ - !ruby/object:Gem::Dependency
31
+ name: compass
32
+ requirement: !ruby/object:Gem::Requirement
37
33
  none: false
38
- requirements:
39
- - - ">="
40
- - !ruby/object:Gem::Version
41
- hash: 3
42
- segments:
43
- - 0
44
- version: "0"
34
+ requirements:
35
+ - - ! '>='
36
+ - !ruby/object:Gem::Version
37
+ version: '0'
45
38
  type: :runtime
46
- version_requirements: *id002
47
- description: A compass extension that provides variables & mixins for the latest Flexible Box Layout (flexbox) specification
48
- email:
39
+ prerelease: false
40
+ version_requirements: !ruby/object:Gem::Requirement
41
+ none: false
42
+ requirements:
43
+ - - ! '>='
44
+ - !ruby/object:Gem::Version
45
+ version: '0'
46
+ description: A compass extension that provides variables & mixins for the latest Flexible
47
+ Box Layout (flexbox) specification
48
+ email:
49
49
  - me+github@timhettler.com
50
50
  executables: []
51
-
52
51
  extensions: []
53
-
54
52
  extra_rdoc_files: []
55
-
56
- files:
53
+ files:
57
54
  - lib/compass-flexbox.rb
58
55
  - stylesheets/_flexbox.scss
59
56
  - templates/example/compass-flexbox.html
@@ -61,38 +58,27 @@ files:
61
58
  - templates/example/manifest.rb
62
59
  homepage: https://github.com/timhettler/compass-flexbox
63
60
  licenses: []
64
-
65
61
  post_install_message:
66
62
  rdoc_options: []
67
-
68
- require_paths:
63
+ require_paths:
69
64
  - lib
70
- required_ruby_version: !ruby/object:Gem::Requirement
65
+ required_ruby_version: !ruby/object:Gem::Requirement
71
66
  none: false
72
- requirements:
73
- - - ">="
74
- - !ruby/object:Gem::Version
75
- hash: 3
76
- segments:
77
- - 0
78
- version: "0"
79
- required_rubygems_version: !ruby/object:Gem::Requirement
67
+ requirements:
68
+ - - ! '>='
69
+ - !ruby/object:Gem::Version
70
+ version: '0'
71
+ required_rubygems_version: !ruby/object:Gem::Requirement
80
72
  none: false
81
- requirements:
82
- - - ">="
83
- - !ruby/object:Gem::Version
84
- hash: 23
85
- segments:
86
- - 1
87
- - 3
88
- - 6
73
+ requirements:
74
+ - - ! '>='
75
+ - !ruby/object:Gem::Version
89
76
  version: 1.3.6
90
77
  requirements: []
91
-
92
78
  rubyforge_project:
93
- rubygems_version: 1.8.25
79
+ rubygems_version: 1.8.23
94
80
  signing_key:
95
81
  specification_version: 3
96
- summary: A compass extension that provides variables & mixins for the latest Flexible Box Layout (flexbox) specification
82
+ summary: A compass extension that provides variables & mixins for the latest Flexible
83
+ Box Layout (flexbox) specification
97
84
  test_files: []
98
-