compass 0.13.alpha.3 → 0.13.alpha.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- 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
|