1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
|
// There are two ways to use the flexbox module.
// If you're using the final version of the spec,
// you can use the property mixins as elsewhere in
// the css3 module.
//
// You can also use the flexbox prefixing mixin `flexbox`.
// This mixin takes an optional `$version` argument which
// allows you to specify which spec version the properties
// are using so that they will be prefixed correctly.
//
// Example:
//
// .flex-column {
// /* For flexbox spec v1 */
// @include flexbox((
// display: box,
// box-orient: vertical,
// ), $version: 1);
//
// /* For flexbox spec v2 */
// @include flexbox((
// display: flexbox,
// flex-direction: column,
// ), $version: 2);
//
// /* Latest Spec */
// @include flexbox((
// display: flex,
// flex-direction: column,
// ));
// }
//
// Which compiles to:
//
// .flex-row {
// /* For flexbox spec v1 */
// display: -moz-box;
// -moz-box-orient: vertical;
// display: -webkit-box;
// -webkit-box-orient: vertical;
//
// /* For flexbox spec v2 */
// display: -ms-flexbox;
// -ms-flex-direction: column;
//
// /* Latest Spec */
// display: -webkit-flex;
// -webkit-flex-direction: column;
// display: flex;
// flex-direction: column;
// }
@import "compass/support";
$flexbox-support-threshold: $critical-usage-threshold !default;
// @private
$flexbox-capability-options: (
(full-support: true),
(partial-support: true, spec-versions: 3)
);
// This is the underlying implementation for all the other mixins in this module.
// It is the only way to access prefix support for older versions of the spec.
//
// `$properties`: map of property-value pairs that should be prefixed
// `$version1: the version of the spec to use when considering what prefix
// to appply. Defaults to the most recent (spec version 3). Only the most
// recent version of the spec outputs an unprefixed version.
@mixin flexbox($properties, $version: null) {
$capability-options: $flexbox-capability-options;
@if $version {
$capability-options: (partial-support: true, spec-versions: $version);
}
@include with-each-prefix(flexbox, $flexbox-support-threshold, $capability-options) {
// Don't output unprefixed versions when the spec version is not the final version
@if $version and $current-prefix or not $version or $version == 3 {
@each $prop, $value in $properties {
@if $prop == display {
display: prefix-identifier($value);
} @else {
@include prefix-prop($prop, $value);
}
}
}
}
}
// Values for $display are: flex (default), inline-flex
@mixin display-flex($display: flex) {
@include flexbox((display: $display));
}
// Values: row | row-reverse | column | column-reverse
@mixin flex-direction($direction) {
@include flexbox((flex-direction: $direction));
}
// Values: nowrap | wrap | wrap-reverse
@mixin flex-wrap($wrap) {
@include flexbox((flex-wrap: $wrap));
}
// Shorthand for flex-direction and flex-wrap.
@mixin flex-flow($flow) {
@include flexbox((flex-flow: $flow));
}
// Accepts an integer
@mixin order($order) {
@include flexbox((order: $order));
}
// Shorthand for flex-grow, flex-shrink and optionally flex-basis.
// Space separated, in that order.
@mixin flex($flex) {
@include flexbox((flex: $flex));
}
// Accepts a number.
@mixin flex-grow($flex-grow) {
@include flexbox((flex-grow: $flex-grow));
}
// Accepts a number.
@mixin flex-shrink($flex-shrink) {
@include flexbox((flex-shrink: $flex-shrink));
}
// Accepts any legal value for the width property.
@mixin flex-basis($flex-basis) {
@include flexbox((flex-basis: $flex-basis));
}
// Legal values: flex-start | flex-end | center | space-between | space-around
@mixin justify-content($justify-content) {
@include flexbox((justify-content: $justify-content));
}
// Legal values: flex-start | flex-end | center | baseline | stretch
@mixin align-items($align-items) {
@include flexbox((align-items: $align-items));
}
// Legal values: auto | flex-start | flex-end | center | baseline | stretch
@mixin align-self($align-self) {
@include flexbox((align-self: $align-self));
}
// Legal values: flex-start | flex-end | center | space-between | space-around | stretch
@mixin align-content($align-content) {
@include flexbox((align-content: $align-content));
}
|
