compass 0.13.alpha.3 → 0.13.alpha.4
Sign up to get free protection for your applications and to get access to all the features.
- data/VERSION.yml +1 -1
- data/frameworks/compass/stylesheets/compass/_css3.scss +1 -0
- data/frameworks/compass/stylesheets/compass/css3/_flexbox.scss +294 -0
- data/frameworks/compass/stylesheets/compass/css3/_images.scss +24 -18
- data/lib/compass/commands/update_project.rb +1 -1
- data/lib/compass/commands/watch_project.rb +6 -28
- data/test/fixtures/stylesheets/compass/css/flexbox.css +121 -0
- data/test/fixtures/stylesheets/compass/sass/flexbox.scss +44 -0
- data/test/fixtures/stylesheets/envtest/tmp/env.css +2 -2
- metadata +11 -3
data/VERSION.yml
CHANGED
@@ -0,0 +1,294 @@
|
|
1
|
+
@import "shared";
|
2
|
+
|
3
|
+
// NOTE:
|
4
|
+
// All mixins for the @box spec have been written assuming they'll be fed property values that
|
5
|
+
// correspond to the standard spec. Some mixins can be fed values from the @box spec, but don't
|
6
|
+
// rely on it. The `legacy-order` mixin will increment the value fed to it because the @box
|
7
|
+
// `box-ordinal-group` property begins indexing at 1, while the modern `order` property begins
|
8
|
+
// indexing at 0.
|
9
|
+
|
10
|
+
// ---------------------------------------------------------------------- | @flex
|
11
|
+
|
12
|
+
// September 2012 Candidate Recommendation (http://www.w3.org/TR/2012/CR-css3-flexbox-20120918/)
|
13
|
+
// NOTE: FF did not support wrapping until version ??. Because the `display: flex` property
|
14
|
+
// is wrapped in a `@supports (flex-wrap: wrap)` block (when $flex-wrap-required or the $wrap
|
15
|
+
// argument to the `display-flex` mixin is set to `true`), it will Just Work(TM) when support is
|
16
|
+
// finally added
|
17
|
+
// Chrome 21 (prefixed)
|
18
|
+
// Opera 12.1 (unprefixed)
|
19
|
+
// Firefox 20 (unprefixed)
|
20
|
+
$flex-support: not -moz, -webkit, not -ms, not -o, not -khtml !default;
|
21
|
+
|
22
|
+
// if `true`, `$flex-legacy-enabled` is treated as false and an `@supports` block is added to
|
23
|
+
// the display property to hide the standard value from versions of Firefox that support the
|
24
|
+
// unprefixed properties, but do not support wrapping
|
25
|
+
// (this includes suppressing the automatic emittion of @box properties)
|
26
|
+
$flex-wrap-required : false !default;
|
27
|
+
|
28
|
+
// ---------------------------------------------------------------------- | @flexbox
|
29
|
+
|
30
|
+
// March 2012 Working Draft (http://www.w3.org/TR/2012/WD-css3-flexbox-20120322/)
|
31
|
+
// Chrome 17 (prefixed)
|
32
|
+
// Internet Explorer 10 (prefixed)
|
33
|
+
$flexbox-support: not -moz, -webkit, -ms, not -o, not -khtml, not standard !default;
|
34
|
+
|
35
|
+
// ---------------------------------------------------------------------- | @box
|
36
|
+
|
37
|
+
// July 2009 Working Draft (http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/)
|
38
|
+
// NOTE: no browser that implements this spec is known to support `box-lines: multiple`
|
39
|
+
// Chrome 4? (prefixed)
|
40
|
+
// Safari 3.1 (prefixed)
|
41
|
+
// Firefox <20 (prefixed)
|
42
|
+
$box-support: -moz, -webkit, not -ms, not -o, not -khtml, not standard !default;
|
43
|
+
|
44
|
+
// If `true`, the @box properties will be emitted as part of the normal mixin call
|
45
|
+
// (if this is false, you're still free to explicitly call the legacy mixins yourself)
|
46
|
+
$flex-legacy-enabled: false !default;
|
47
|
+
|
48
|
+
// ====================================================================================================
|
49
|
+
// | Common
|
50
|
+
// ====================================================================================================
|
51
|
+
|
52
|
+
// function for converting a value from the standard specification to one that is comparable from
|
53
|
+
// an older specification
|
54
|
+
@function flex-translate-value($value, $version: box) {
|
55
|
+
$value: unquote($value);
|
56
|
+
|
57
|
+
@if $value == flex {
|
58
|
+
@return if($version == box, box, flexbox);
|
59
|
+
} @else if $value == inline-flex {
|
60
|
+
@return if($version == box, inline-box, inline-flexbox);
|
61
|
+
} @else if $value == flex-start {
|
62
|
+
@return start;
|
63
|
+
} @else if $value == flex-end {
|
64
|
+
@return end;
|
65
|
+
} @else if $value == space-between {
|
66
|
+
@return justify;
|
67
|
+
} @else if $value == space-around { // @box doesn't have a value equivalent to `space-around`
|
68
|
+
@return if($version == box, justify, distribute);
|
69
|
+
}
|
70
|
+
@return $value;
|
71
|
+
}
|
72
|
+
|
73
|
+
@function flex-support-either() {
|
74
|
+
$common: ();
|
75
|
+
@for $i from 1 through length($flex-support) {
|
76
|
+
$common: append($common, nth($flex-support, $i) or nth($flexbox-support, $i), comma);
|
77
|
+
}
|
78
|
+
@return $common;
|
79
|
+
}
|
80
|
+
|
81
|
+
// ====================================================================================================
|
82
|
+
// | Display Property
|
83
|
+
// ====================================================================================================
|
84
|
+
|
85
|
+
// $type: flex | inline-flex
|
86
|
+
@mixin display-flex($type: flex, $wrap: $flex-wrap-required, $legacy: $flex-legacy-enabled) {
|
87
|
+
@if $legacy and not $wrap {
|
88
|
+
@include legacy-display-flex($type);
|
89
|
+
}
|
90
|
+
|
91
|
+
@include experimental-value(display, flex-translate-value($type, flexbox), $flexbox-support...);
|
92
|
+
|
93
|
+
// if `$wrap` is true, then we need to suppress official support as generated by the `experimental()`
|
94
|
+
// mixin so that we can insert it inside an `@supports` block
|
95
|
+
$flex-support-standard: true;
|
96
|
+
$flex-support-list: $flex-support;
|
97
|
+
@if length($flex-support) > 5 {
|
98
|
+
$flex-support-standard: nth($flex-support, 6);
|
99
|
+
// a `slice()` function would really be handy here...
|
100
|
+
$flex-support-list: nth($flex-support, 1), nth($flex-support, 2), nth($flex-support, 3), nth($flex-support, 4), nth($flex-support, 5);
|
101
|
+
}
|
102
|
+
$flex-support-list: append($flex-support-list, if($wrap, false, $flex-support-standard));
|
103
|
+
@include experimental-value(display, $type, $flex-support-list...);
|
104
|
+
|
105
|
+
@if $wrap and $flex-support-standard {
|
106
|
+
@supports (flex-wrap: wrap) {
|
107
|
+
display: $type;
|
108
|
+
}
|
109
|
+
}
|
110
|
+
}
|
111
|
+
|
112
|
+
@mixin legacy-display-flex($type: flex) {
|
113
|
+
@include experimental-value(display, flex-translate-value($type, box), $box-support...);
|
114
|
+
}
|
115
|
+
|
116
|
+
// ====================================================================================================
|
117
|
+
// | Flex Container Properties
|
118
|
+
// ====================================================================================================
|
119
|
+
|
120
|
+
// $value: <'flex-direction'> || <'flex-wrap'>
|
121
|
+
@mixin flex-flow($value: row nowrap, $wrap: $flex-wrap-required, $legacy: $flex-legacy-enabled) {
|
122
|
+
@if $legacy and not $wrap {
|
123
|
+
@include legacy-flex-flow($value);
|
124
|
+
}
|
125
|
+
|
126
|
+
@include experimental(flex-flow, $value, flex-support-either()...);
|
127
|
+
}
|
128
|
+
|
129
|
+
@mixin legacy-flex-flow($value: row nowrap) {
|
130
|
+
@if length($value) > 1 { // @box version doesn't have a shorthand
|
131
|
+
@include legacy-flex-direction(nth($value, 1));
|
132
|
+
@include legacy-flex-wrap(nth($value, 2));
|
133
|
+
} @else {
|
134
|
+
$value: unquote($value);
|
135
|
+
@if $value == row or $value == row-reverse or $value == column or $value == column-reverse {
|
136
|
+
@include legacy-flex-direction($value);
|
137
|
+
} @else {
|
138
|
+
@include legacy-flex-wrap($value);
|
139
|
+
}
|
140
|
+
}
|
141
|
+
}
|
142
|
+
|
143
|
+
// ----------------------------------------------------------------------
|
144
|
+
|
145
|
+
// $value: row | row-reverse | column | column-reverse
|
146
|
+
@mixin flex-direction($value: row, $wrap: $flex-wrap-required, $legacy: $flex-legacy-enabled) {
|
147
|
+
@if $legacy and not $wrap {
|
148
|
+
@include legacy-flex-direction($value);
|
149
|
+
}
|
150
|
+
|
151
|
+
@include experimental(flex-direction, $value, flex-support-either()...);
|
152
|
+
}
|
153
|
+
|
154
|
+
@mixin legacy-flex-direction($value: row) {
|
155
|
+
$value: unquote($value);
|
156
|
+
@include experimental(box-orient, if($value == row or $value == row-reverse, horizontal, vertical), $box-support...);
|
157
|
+
@include experimental(box-direction, if($value == row-reverse or $value == column-reverse, reverse, normal), $box-support...);
|
158
|
+
}
|
159
|
+
|
160
|
+
// ----------------------------------------------------------------------
|
161
|
+
|
162
|
+
// $value: nowrap | wrap | wrap-reverse
|
163
|
+
@mixin flex-wrap($value: nowrap, $wrap: $flex-wrap-required, $legacy: $flex-legacy-enabled) {
|
164
|
+
@if $legacy and not $wrap {
|
165
|
+
@include legacy-flex-wrap($value);
|
166
|
+
}
|
167
|
+
|
168
|
+
@include experimental(flex-wrap, $value, flex-support-either()...);
|
169
|
+
}
|
170
|
+
|
171
|
+
@mixin legacy-flex-wrap($value: nowrap) {
|
172
|
+
// NOTE: @box has no equivalent of wrap-reverse
|
173
|
+
@include experimental(box-lines, if($value == nowrap, single, multiple), $box-support...);
|
174
|
+
}
|
175
|
+
|
176
|
+
// ----------------------------------------------------------------------
|
177
|
+
|
178
|
+
// Distributing extra space along the "main axis"
|
179
|
+
// $value: flex-start | flex-end | center | space-between | space-around
|
180
|
+
@mixin justify-content($value: flex-start, $wrap: $flex-wrap-required, $legacy: $flex-legacy-enabled) {
|
181
|
+
@if $legacy and not $wrap {
|
182
|
+
@include legacy-justify-content($value);
|
183
|
+
}
|
184
|
+
|
185
|
+
@include experimental(flex-pack, flex-translate-value($value, flexbox), $flexbox-support...);
|
186
|
+
@include experimental(justify-content, $value, $flex-support...);
|
187
|
+
}
|
188
|
+
|
189
|
+
@mixin legacy-justify-content($value: flex-start) {
|
190
|
+
@include experimental(box-pack, flex-translate-value($value, box), $box-support...);
|
191
|
+
}
|
192
|
+
|
193
|
+
// ----------------------------------------------------------------------
|
194
|
+
|
195
|
+
// Distributing extra space along the "cross axis"
|
196
|
+
// $value: flex-start | flex-end | center | space-between | space-around | stretch
|
197
|
+
@mixin align-content($value: flex-start, $wrap: $flex-wrap-required, $legacy: $flex-legacy-enabled) {
|
198
|
+
@if $legacy and not $wrap {
|
199
|
+
@include legacy-align-content($value);
|
200
|
+
}
|
201
|
+
|
202
|
+
@include experimental(flex-line-pack, flex-translate-value($value, flexbox), $flexbox-support...);
|
203
|
+
@include experimental(align-content, $value, $flex-support...);
|
204
|
+
}
|
205
|
+
|
206
|
+
@mixin legacy-align-content($value: flex-start) {
|
207
|
+
@include experimental(box-align, flex-translate-value($value, box), $box-support...);
|
208
|
+
}
|
209
|
+
|
210
|
+
// ----------------------------------------------------------------------
|
211
|
+
|
212
|
+
// Align items along the "cross axis"
|
213
|
+
// $value: flex-start | flex-end | center | baseline | stretch
|
214
|
+
@mixin align-items($value: stretch) { // the flex container
|
215
|
+
// There is no @box version of this property
|
216
|
+
@include experimental(flex-align, flex-translate-value($value, flexbox), $flexbox-support...);
|
217
|
+
@include experimental(align-items, $value, $flex-support...);
|
218
|
+
}
|
219
|
+
|
220
|
+
// ====================================================================================================
|
221
|
+
// | Flex Item Properties
|
222
|
+
// ====================================================================================================
|
223
|
+
|
224
|
+
// $value: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
|
225
|
+
@mixin flex($value: 0 1 auto, $wrap: $flex-wrap-required, $legacy: $flex-legacy-enabled) {
|
226
|
+
$value: unquote($value);
|
227
|
+
@if $legacy and unitless(nth($value, 1)) {
|
228
|
+
// @box version does not have a shorthand, see `legacy-flex-grow`
|
229
|
+
@include legacy-flex-grow(nth($value, 1));
|
230
|
+
}
|
231
|
+
|
232
|
+
@include experimental(flex, $value, flex-support-either()...);
|
233
|
+
}
|
234
|
+
|
235
|
+
// ----------------------------------------------------------------------
|
236
|
+
|
237
|
+
// $value: Integer
|
238
|
+
@mixin flex-grow($value: 0, $wrap: $flex-wrap-required, $legacy: $flex-legacy-enabled) {
|
239
|
+
@if $legacy and not $wrap {
|
240
|
+
@include legacy-flex-grow($value);
|
241
|
+
}
|
242
|
+
|
243
|
+
// There is no @flexbox version of this property
|
244
|
+
@include experimental(flex-grow, $value, $flex-support...);
|
245
|
+
}
|
246
|
+
|
247
|
+
@mixin legacy-flex-grow($value: 0) {
|
248
|
+
@include experimental(box-flex, $value, $box-support...);
|
249
|
+
}
|
250
|
+
|
251
|
+
// ----------------------------------------------------------------------
|
252
|
+
|
253
|
+
// $value: Integer
|
254
|
+
@mixin flex-shrink($value: 1) {
|
255
|
+
// There is no @box version of this property
|
256
|
+
// There is no @flexbox version of this property
|
257
|
+
@include experimental(flex-shrink, $value, $flex-support...);
|
258
|
+
}
|
259
|
+
|
260
|
+
// ----------------------------------------------------------------------
|
261
|
+
|
262
|
+
// $value: united number (eg: 100px)
|
263
|
+
@mixin flex-basis($value: auto) {
|
264
|
+
// There is no @box version of this property
|
265
|
+
// There is no @flexbox version of this property
|
266
|
+
@include experimental(flex-basis, $value, $flex-support...);
|
267
|
+
}
|
268
|
+
|
269
|
+
// ----------------------------------------------------------------------
|
270
|
+
|
271
|
+
// Align items along the "cross axis" -- overrides `align-items` value on individual items
|
272
|
+
// $value: auto | flex-start | flex-end | center | baseline | stretch
|
273
|
+
@mixin align-self($value: auto) { // children of flex containers
|
274
|
+
// There is no @box version of this property
|
275
|
+
@include experimental(flex-item-align, flex-translate-value($value, flexbox), $flexbox-support...);
|
276
|
+
@include experimental(align-self, $value, $flex-support...);
|
277
|
+
}
|
278
|
+
|
279
|
+
// ----------------------------------------------------------------------
|
280
|
+
|
281
|
+
// $value: Integer
|
282
|
+
@mixin order($value: 0, $wrap: $flex-wrap-required, $legacy: $flex-legacy-enabled) {
|
283
|
+
@if $legacy and not $wrap {
|
284
|
+
@include legacy-order($value);
|
285
|
+
}
|
286
|
+
|
287
|
+
@include experimental(flex-order, $value, $flexbox-support...);
|
288
|
+
@include experimental(order, $value, $flex-support...);
|
289
|
+
}
|
290
|
+
|
291
|
+
@mixin legacy-order($value: 0) {
|
292
|
+
// the @box spec starts the ordering at 1 instead of 0 like the modern specs
|
293
|
+
@include experimental(box-ordinal-group, $value + 1, $box-support...);
|
294
|
+
}
|
@@ -1,6 +1,28 @@
|
|
1
1
|
@import "shared";
|
2
2
|
@import "compass/utilities/general/hacks";
|
3
3
|
|
4
|
+
// Compass assumes you will use the official gradient syntax,
|
5
|
+
// unless otherwise instructed.
|
6
|
+
$use-legacy-gradient-syntax: false !default;
|
7
|
+
|
8
|
+
// Create a linear gradient using standard official or legacy syntax.
|
9
|
+
// This function must be included in one of the following
|
10
|
+
// image module mixins to work properly.
|
11
|
+
@function linear-gradient($angle, $details...) {
|
12
|
+
$legacy-syntax: $use-legacy-gradient-syntax;
|
13
|
+
|
14
|
+
@if type-of($angle) != 'number' {
|
15
|
+
$angle: compact($angle);
|
16
|
+
$legacy-syntax: if(index($angle, 'to'), false, true);
|
17
|
+
}
|
18
|
+
|
19
|
+
@if $legacy-syntax {
|
20
|
+
@return _linear-gradient_legacy($angle, $details...);
|
21
|
+
} @else {
|
22
|
+
@return _linear-gradient($angle, $details...);
|
23
|
+
}
|
24
|
+
}
|
25
|
+
|
4
26
|
// Background property support for vendor prefixing within values.
|
5
27
|
@mixin background(
|
6
28
|
$backgrounds...
|
@@ -15,6 +37,8 @@
|
|
15
37
|
background: $backgrounds ;
|
16
38
|
}
|
17
39
|
|
40
|
+
// Set any number of background layers, along with a fallback.
|
41
|
+
// The final argument will be output separately, first, as a css2 fallback.
|
18
42
|
@mixin background-with-css2-fallback(
|
19
43
|
$backgrounds...
|
20
44
|
) {
|
@@ -103,21 +127,3 @@
|
|
103
127
|
@if $experimental-support-for-svg and prefixed(-svg, $value) { content: -svg($value); }
|
104
128
|
content: $value ;
|
105
129
|
}
|
106
|
-
|
107
|
-
$use-legacy-gradient-syntax: false !default;
|
108
|
-
|
109
|
-
@function linear-gradient($angle, $details...) {
|
110
|
-
$legacy-syntax: $use-legacy-gradient-syntax;
|
111
|
-
|
112
|
-
@if type-of($angle) != 'number' {
|
113
|
-
$angle: compact($angle);
|
114
|
-
$legacy-syntax: if(index($angle, 'to'), false, true);
|
115
|
-
}
|
116
|
-
|
117
|
-
@if $legacy-syntax {
|
118
|
-
@return _linear-gradient_legacy($angle, $details...);
|
119
|
-
} @else {
|
120
|
-
@return _linear-gradient($angle, $details...);
|
121
|
-
}
|
122
|
-
}
|
123
|
-
|
@@ -48,7 +48,7 @@ module Compass
|
|
48
48
|
|
49
49
|
def check_for_sass_files!(compiler)
|
50
50
|
if compiler.sass_files.empty? && !dry_run?
|
51
|
-
message = "
|
51
|
+
message = "Compass can't find any Sass files to compile.\nIs your compass configuration correct?.\nIf you're trying to start a new project, you have left off the directory argument.\n"
|
52
52
|
message << "Run \"compass -h\" to get help."
|
53
53
|
raise Compass::Error, message
|
54
54
|
end
|
@@ -26,41 +26,19 @@ module Compass
|
|
26
26
|
|
27
27
|
end
|
28
28
|
end
|
29
|
-
|
30
|
-
def report_on_instances(type, options = {})
|
31
|
-
@@runs ||= 0
|
32
|
-
@@runs += 1
|
33
|
-
@@object_id_tracker ||= {}
|
34
|
-
@@object_id_tracker[type] ||= []
|
35
|
-
GC.start
|
36
|
-
sleep options.fetch(:gc_pause, 1)
|
37
|
-
count = ObjectSpace.each_object(type) do |obj|
|
38
|
-
if options.fetch(:verbose, true)
|
39
|
-
if @@runs > 2
|
40
|
-
if !@@object_id_tracker[type].include?(obj.object_id)
|
41
|
-
begin
|
42
|
-
puts obj.inspect
|
43
|
-
rescue
|
44
|
-
end
|
45
|
-
puts "#{obj.class.name}:#{obj.object_id}"
|
46
|
-
end
|
47
|
-
end
|
48
|
-
@@object_id_tracker[type] << obj.object_id
|
49
|
-
end
|
50
|
-
end
|
51
|
-
puts "#{type}: #{count} instances."
|
52
|
-
end
|
53
|
-
end
|
29
|
+
|
54
30
|
class WatchProject < UpdateProject
|
55
31
|
|
56
32
|
register :watch
|
57
33
|
|
58
34
|
attr_accessor :last_update_time, :last_sass_files
|
59
35
|
|
60
|
-
include MemoryDebugger
|
61
|
-
|
62
36
|
def perform
|
63
|
-
|
37
|
+
# '.' assumes you are in the executing directory. so get the full path to the directory
|
38
|
+
if options[:project_name] == '.'
|
39
|
+
Compass.configuration.project_path = Dir.pwd
|
40
|
+
end
|
41
|
+
|
64
42
|
project_watcher = Compass::Watcher::ProjectWatcher.new(Compass.configuration.project_path, Compass.configuration.watches, options, options[:poll])
|
65
43
|
|
66
44
|
puts ">>> Compass is watching for changes. Press Ctrl-C to Stop."
|
@@ -0,0 +1,121 @@
|
|
1
|
+
.flex {
|
2
|
+
display: -webkit-flexbox;
|
3
|
+
display: -ms-flexbox;
|
4
|
+
display: -webkit-flex;
|
5
|
+
display: flex;
|
6
|
+
-webkit-flex-flow: column nowrap;
|
7
|
+
-ms-flex-flow: column nowrap;
|
8
|
+
flex-flow: column nowrap;
|
9
|
+
-webkit-flex-pack: justify;
|
10
|
+
-ms-flex-pack: justify;
|
11
|
+
-webkit-justify-content: space-between;
|
12
|
+
justify-content: space-between;
|
13
|
+
-webkit-flex-line-pack: center;
|
14
|
+
-ms-flex-line-pack: center;
|
15
|
+
-webkit-align-content: center;
|
16
|
+
align-content: center;
|
17
|
+
-webkit-flex-align: end;
|
18
|
+
-ms-flex-align: end;
|
19
|
+
-webkit-align-items: flex-end;
|
20
|
+
align-items: flex-end; }
|
21
|
+
|
22
|
+
.flex-item {
|
23
|
+
-webkit-flex: 1 1 auto;
|
24
|
+
-ms-flex: 1 1 auto;
|
25
|
+
flex: 1 1 auto;
|
26
|
+
-webkit-flex-item-align: start;
|
27
|
+
-ms-flex-item-align: start;
|
28
|
+
-webkit-align-self: flex-start;
|
29
|
+
align-self: flex-start;
|
30
|
+
-webkit-flex-order: 2;
|
31
|
+
-ms-flex-order: 2;
|
32
|
+
-webkit-order: 2;
|
33
|
+
order: 2; }
|
34
|
+
|
35
|
+
.flex-legacy {
|
36
|
+
display: -webkit-box;
|
37
|
+
display: -moz-box;
|
38
|
+
display: -webkit-flexbox;
|
39
|
+
display: -ms-flexbox;
|
40
|
+
display: -webkit-flex;
|
41
|
+
display: flex;
|
42
|
+
-webkit-box-orient: horizontal;
|
43
|
+
-moz-box-orient: horizontal;
|
44
|
+
-webkit-box-direction: normal;
|
45
|
+
-moz-box-direction: normal;
|
46
|
+
-webkit-box-lines: single;
|
47
|
+
-moz-box-lines: single;
|
48
|
+
-webkit-flex-flow: row nowrap;
|
49
|
+
-ms-flex-flow: row nowrap;
|
50
|
+
flex-flow: row nowrap;
|
51
|
+
-webkit-box-pack: end;
|
52
|
+
-moz-box-pack: end;
|
53
|
+
-webkit-flex-pack: end;
|
54
|
+
-ms-flex-pack: end;
|
55
|
+
-webkit-justify-content: flex-end;
|
56
|
+
justify-content: flex-end;
|
57
|
+
-webkit-box-align: start;
|
58
|
+
-moz-box-align: start;
|
59
|
+
-webkit-flex-line-pack: start;
|
60
|
+
-ms-flex-line-pack: start;
|
61
|
+
-webkit-align-content: flex-start;
|
62
|
+
align-content: flex-start;
|
63
|
+
-webkit-flex-align: baseline;
|
64
|
+
-ms-flex-align: baseline;
|
65
|
+
-webkit-align-items: baseline;
|
66
|
+
align-items: baseline; }
|
67
|
+
|
68
|
+
.flex-item-legacy {
|
69
|
+
-webkit-box-flex: 2;
|
70
|
+
-moz-box-flex: 2;
|
71
|
+
-webkit-flex: 2 1 20em;
|
72
|
+
-ms-flex: 2 1 20em;
|
73
|
+
flex: 2 1 20em;
|
74
|
+
-webkit-flex-item-align: stretch;
|
75
|
+
-ms-flex-item-align: stretch;
|
76
|
+
-webkit-align-self: stretch;
|
77
|
+
align-self: stretch;
|
78
|
+
-webkit-box-ordinal-group: 4;
|
79
|
+
-moz-box-ordinal-group: 4;
|
80
|
+
-webkit-flex-order: 3;
|
81
|
+
-ms-flex-order: 3;
|
82
|
+
-webkit-order: 3;
|
83
|
+
order: 3; }
|
84
|
+
|
85
|
+
.flex-legacy {
|
86
|
+
display: -webkit-flexbox;
|
87
|
+
display: -ms-flexbox;
|
88
|
+
display: -webkit-flex;
|
89
|
+
-webkit-flex-flow: row wrap;
|
90
|
+
-ms-flex-flow: row wrap;
|
91
|
+
flex-flow: row wrap;
|
92
|
+
-webkit-flex-pack: distribute;
|
93
|
+
-ms-flex-pack: distribute;
|
94
|
+
-webkit-justify-content: space-around;
|
95
|
+
justify-content: space-around;
|
96
|
+
-webkit-flex-line-pack: stretch;
|
97
|
+
-ms-flex-line-pack: stretch;
|
98
|
+
-webkit-align-content: stretch;
|
99
|
+
align-content: stretch;
|
100
|
+
-webkit-flex-align: start;
|
101
|
+
-ms-flex-align: start;
|
102
|
+
-webkit-align-items: flex-start;
|
103
|
+
align-items: flex-start; }
|
104
|
+
@supports (flex-wrap: wrap) {
|
105
|
+
.flex-legacy {
|
106
|
+
display: flex; } }
|
107
|
+
|
108
|
+
.flex-item-legacy {
|
109
|
+
-webkit-box-flex: 1;
|
110
|
+
-moz-box-flex: 1;
|
111
|
+
-webkit-flex: 1 2 50%;
|
112
|
+
-ms-flex: 1 2 50%;
|
113
|
+
flex: 1 2 50%;
|
114
|
+
-webkit-flex-item-align: start;
|
115
|
+
-ms-flex-item-align: start;
|
116
|
+
-webkit-align-self: flex-start;
|
117
|
+
align-self: flex-start;
|
118
|
+
-webkit-flex-order: 1;
|
119
|
+
-ms-flex-order: 1;
|
120
|
+
-webkit-order: 1;
|
121
|
+
order: 1; }
|
@@ -0,0 +1,44 @@
|
|
1
|
+
@import "compass/css3/flexbox";
|
2
|
+
|
3
|
+
.flex {
|
4
|
+
@include display-flex;
|
5
|
+
@include flex-flow(column nowrap);
|
6
|
+
@include justify-content(space-between);
|
7
|
+
@include align-content(center);
|
8
|
+
@include align-items(flex-end);
|
9
|
+
}
|
10
|
+
|
11
|
+
.flex-item {
|
12
|
+
@include flex(1 1 auto);
|
13
|
+
@include align-self(flex-start);
|
14
|
+
@include order(2);
|
15
|
+
}
|
16
|
+
|
17
|
+
$flex-legacy-enabled: true;
|
18
|
+
.flex-legacy {
|
19
|
+
@include display-flex;
|
20
|
+
@include flex-flow(row nowrap);
|
21
|
+
@include justify-content(flex-end);
|
22
|
+
@include align-content(flex-start);
|
23
|
+
@include align-items(baseline);
|
24
|
+
}
|
25
|
+
|
26
|
+
.flex-item-legacy {
|
27
|
+
@include flex(2 1 20em);
|
28
|
+
@include align-self(stretch);
|
29
|
+
@include order(3);
|
30
|
+
}
|
31
|
+
$flex-wrap-required: true;
|
32
|
+
.flex-legacy {
|
33
|
+
@include display-flex;
|
34
|
+
@include flex-flow(row wrap);
|
35
|
+
@include justify-content(space-around);
|
36
|
+
@include align-content(stretch);
|
37
|
+
@include align-items(flex-start);
|
38
|
+
}
|
39
|
+
|
40
|
+
.flex-item-legacy {
|
41
|
+
@include flex(1 2 50%);
|
42
|
+
@include align-self(flex-start);
|
43
|
+
@include order(1);
|
44
|
+
}
|
metadata
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: compass
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 0.13.alpha.
|
4
|
+
version: 0.13.alpha.4
|
5
5
|
prerelease: 5
|
6
6
|
platform: ruby
|
7
7
|
authors:
|
@@ -14,7 +14,7 @@ authors:
|
|
14
14
|
autorequire:
|
15
15
|
bindir: bin
|
16
16
|
cert_chain: []
|
17
|
-
date: 2013-03
|
17
|
+
date: 2013-04-03 00:00:00.000000000 Z
|
18
18
|
dependencies:
|
19
19
|
- !ruby/object:Gem::Dependency
|
20
20
|
name: sass
|
@@ -472,6 +472,7 @@ files:
|
|
472
472
|
- frameworks/compass/stylesheets/compass/css3/_box.scss
|
473
473
|
- frameworks/compass/stylesheets/compass/css3/_columns.scss
|
474
474
|
- frameworks/compass/stylesheets/compass/css3/_filter.scss
|
475
|
+
- frameworks/compass/stylesheets/compass/css3/_flexbox.scss
|
475
476
|
- frameworks/compass/stylesheets/compass/css3/_font-face.scss
|
476
477
|
- frameworks/compass/stylesheets/compass/css3/_hyphenation.scss
|
477
478
|
- frameworks/compass/stylesheets/compass/css3/_images.scss
|
@@ -725,6 +726,7 @@ files:
|
|
725
726
|
- test/fixtures/stylesheets/compass/css/box_shadow.css
|
726
727
|
- test/fixtures/stylesheets/compass/css/columns.css
|
727
728
|
- test/fixtures/stylesheets/compass/css/filters.css
|
729
|
+
- test/fixtures/stylesheets/compass/css/flexbox.css
|
728
730
|
- test/fixtures/stylesheets/compass/css/fonts.css
|
729
731
|
- test/fixtures/stylesheets/compass/css/force-wrap.css
|
730
732
|
- test/fixtures/stylesheets/compass/css/gradients.css
|
@@ -1015,6 +1017,7 @@ files:
|
|
1015
1017
|
- test/fixtures/stylesheets/compass/sass/box_shadow.scss
|
1016
1018
|
- test/fixtures/stylesheets/compass/sass/columns.scss
|
1017
1019
|
- test/fixtures/stylesheets/compass/sass/filters.scss
|
1020
|
+
- test/fixtures/stylesheets/compass/sass/flexbox.scss
|
1018
1021
|
- test/fixtures/stylesheets/compass/sass/fonts.sass
|
1019
1022
|
- test/fixtures/stylesheets/compass/sass/force-wrap.scss
|
1020
1023
|
- test/fixtures/stylesheets/compass/sass/gradients.sass
|
@@ -1103,7 +1106,10 @@ files:
|
|
1103
1106
|
- features/step_definitions/extension_steps.rb
|
1104
1107
|
homepage: http://compass-style.org
|
1105
1108
|
licenses: []
|
1106
|
-
post_install_message:
|
1109
|
+
post_install_message: ! ' Compass is charityware. If you love it, please donate
|
1110
|
+
on our behalf at http://umdf.org/compass Thanks!
|
1111
|
+
|
1112
|
+
'
|
1107
1113
|
rdoc_options: []
|
1108
1114
|
require_paths:
|
1109
1115
|
- lib
|
@@ -1185,6 +1191,7 @@ test_files:
|
|
1185
1191
|
- test/fixtures/stylesheets/compass/css/box_shadow.css
|
1186
1192
|
- test/fixtures/stylesheets/compass/css/columns.css
|
1187
1193
|
- test/fixtures/stylesheets/compass/css/filters.css
|
1194
|
+
- test/fixtures/stylesheets/compass/css/flexbox.css
|
1188
1195
|
- test/fixtures/stylesheets/compass/css/fonts.css
|
1189
1196
|
- test/fixtures/stylesheets/compass/css/force-wrap.css
|
1190
1197
|
- test/fixtures/stylesheets/compass/css/gradients.css
|
@@ -1475,6 +1482,7 @@ test_files:
|
|
1475
1482
|
- test/fixtures/stylesheets/compass/sass/box_shadow.scss
|
1476
1483
|
- test/fixtures/stylesheets/compass/sass/columns.scss
|
1477
1484
|
- test/fixtures/stylesheets/compass/sass/filters.scss
|
1485
|
+
- test/fixtures/stylesheets/compass/sass/flexbox.scss
|
1478
1486
|
- test/fixtures/stylesheets/compass/sass/fonts.sass
|
1479
1487
|
- test/fixtures/stylesheets/compass/sass/force-wrap.scss
|
1480
1488
|
- test/fixtures/stylesheets/compass/sass/gradients.sass
|