accoutrement 0.0.4 → 0.0.5
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.
|
@@ -11,6 +11,9 @@
|
|
|
11
11
|
@import 'accoutrement/media';
|
|
12
12
|
@import 'accoutrement/type';
|
|
13
13
|
@import 'accoutrement/arrows';
|
|
14
|
+
@import 'accoutrement/flexbox';
|
|
15
|
+
@import 'accoutrement/layout';
|
|
16
|
+
@import 'accoutrement/calc';
|
|
14
17
|
|
|
15
18
|
// ----------------------------------------------------------------------------
|
|
16
19
|
// Patterns
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
// ----------------------------------------------------------------------------
|
|
2
|
-
// gone
|
|
2
|
+
// gone/here
|
|
3
3
|
|
|
4
4
|
@mixin gone {
|
|
5
5
|
position: absolute;
|
|
@@ -7,6 +7,16 @@
|
|
|
7
7
|
left: -9999px;
|
|
8
8
|
}
|
|
9
9
|
|
|
10
|
+
// Bring back a previously "gone" element.
|
|
11
|
+
//
|
|
12
|
+
// here([$position])
|
|
13
|
+
// - $position : static | relative | etc...
|
|
14
|
+
@mixin here($position: static) {
|
|
15
|
+
position: $position;
|
|
16
|
+
top: auto;
|
|
17
|
+
left: auto;
|
|
18
|
+
}
|
|
19
|
+
|
|
10
20
|
// ----------------------------------------------------------------------------
|
|
11
21
|
// alt text
|
|
12
22
|
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
// ----------------------------------------------------------------------------
|
|
2
|
+
// Calc
|
|
3
|
+
|
|
4
|
+
// ----------------------------------------------------------------------------
|
|
5
|
+
// Returns a property/value pair using calc()
|
|
6
|
+
//
|
|
7
|
+
// calc($property, $calc [, $fallback])
|
|
8
|
+
// - $property : Any css property that accepts calc().
|
|
9
|
+
// - $calc : A *quoted* calc function, e.g. '100% - 7rem'.
|
|
10
|
+
// - $fallback : An optional non-calc value to use on older browsers.
|
|
11
|
+
@mixin calc(
|
|
12
|
+
$property,
|
|
13
|
+
$calc,
|
|
14
|
+
$fallback: false
|
|
15
|
+
) {
|
|
16
|
+
$calc: unquote($calc);
|
|
17
|
+
@if $fallback { #{$property}: $fallback; }
|
|
18
|
+
#{$property}: -webkit-calc(#{$calc});
|
|
19
|
+
#{$property}: -moz-calc(#{$calc});
|
|
20
|
+
#{$property}: -o-calc(#{$calc});
|
|
21
|
+
#{$property}: calc(#{$calc});
|
|
22
|
+
}
|
|
@@ -0,0 +1,297 @@
|
|
|
1
|
+
@import "compass/css3/shared";
|
|
2
|
+
|
|
3
|
+
// enables 2009 syntax by default
|
|
4
|
+
$flex-legacy : false !default;
|
|
5
|
+
|
|
6
|
+
// September 2012 Candidate Recommendation (http://www.w3.org/TR/2012/CR-css3-flexbox-20120918/)
|
|
7
|
+
// Chrome 21 (prefixed)
|
|
8
|
+
// Opera 12.1 (unprefixed)
|
|
9
|
+
// Firefox 20 (unprefixed)
|
|
10
|
+
$flex-webkit : true !default;
|
|
11
|
+
$flex-moz : false !default;
|
|
12
|
+
$flex-o : false !default;
|
|
13
|
+
$flex-ms : false !default;
|
|
14
|
+
$flex-khtml : false !default;
|
|
15
|
+
$flex-official : true !default;
|
|
16
|
+
|
|
17
|
+
// March 2012 Working Draft (http://www.w3.org/TR/2012/WD-css3-flexbox-20120322/)
|
|
18
|
+
// Demo: http://umaar.github.com/css-flexbox-demo/
|
|
19
|
+
// More: http://www.inserthtml.com/2012/05/css3-flex-box-specification-change-layout-design/
|
|
20
|
+
// Chrome 17 (prefixed)
|
|
21
|
+
// Internet Explorer 10 (prefixed) (http://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx)
|
|
22
|
+
// Safari?
|
|
23
|
+
$flex-2012-webkit : true !default;
|
|
24
|
+
$flex-2012-moz : false !default;
|
|
25
|
+
$flex-2012-ms : true !default;
|
|
26
|
+
|
|
27
|
+
// July 2009 Working Draft (http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/)
|
|
28
|
+
// Firefox <20 (prefixed)
|
|
29
|
+
$flex-2009-webkit : false !default;
|
|
30
|
+
$flex-2009-moz : true !default;
|
|
31
|
+
|
|
32
|
+
// --------------------------------
|
|
33
|
+
// Common
|
|
34
|
+
|
|
35
|
+
@function standard-to-draft-value($value, $version: 2009) {
|
|
36
|
+
@if $value == flex-start {
|
|
37
|
+
@return start;
|
|
38
|
+
} @else if $value == flex-end {
|
|
39
|
+
@return end;
|
|
40
|
+
} @else if $value == space-between {
|
|
41
|
+
@return justify;
|
|
42
|
+
} @else if $value == space-around {
|
|
43
|
+
@return if($version == 2009, justify, distribute);
|
|
44
|
+
}
|
|
45
|
+
@return $value;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
@mixin flex-standard($property, $value) {
|
|
49
|
+
@include experimental($property, $value,
|
|
50
|
+
$flex-moz,
|
|
51
|
+
$flex-webkit,
|
|
52
|
+
$flex-o,
|
|
53
|
+
$flex-ms,
|
|
54
|
+
$flex-khtml,
|
|
55
|
+
$flex-official);
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
@mixin flex-2012($property, $value) {
|
|
59
|
+
@include experimental($property, $value,
|
|
60
|
+
$flex-2012-moz,
|
|
61
|
+
$flex-2012-webkit,
|
|
62
|
+
false,
|
|
63
|
+
$flex-2012-ms,
|
|
64
|
+
false,
|
|
65
|
+
false);
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
@mixin flex-2009($property, $value) {
|
|
69
|
+
@include experimental($property, $value,
|
|
70
|
+
$flex-2009-moz,
|
|
71
|
+
$flex-2009-webkit,
|
|
72
|
+
false,
|
|
73
|
+
false,
|
|
74
|
+
false,
|
|
75
|
+
false);
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
// mixin to use if standard and 2012 have the same property names
|
|
79
|
+
@mixin flex-modern($property, $value) {
|
|
80
|
+
@include experimental($property, $value,
|
|
81
|
+
$flex-2012-moz or $flex-moz,
|
|
82
|
+
$flex-2012-webkit or $flex-webkit,
|
|
83
|
+
false, // opera
|
|
84
|
+
$flex-2012-ms or $flex-ms,
|
|
85
|
+
false, // khtml,
|
|
86
|
+
true); // official
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
// --------------------------------
|
|
90
|
+
// Display property
|
|
91
|
+
|
|
92
|
+
// $type: flex | inline-flex
|
|
93
|
+
@mixin display-flex($type: flex, $legacy: $flex-legacy) {
|
|
94
|
+
@if $legacy {
|
|
95
|
+
@include legacy-display-flex($type);
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
@include experimental-value(display, if($type == flex, flexbox, inline-flexbox),
|
|
99
|
+
$flex-2012-moz,
|
|
100
|
+
$flex-2012-webkit,
|
|
101
|
+
false,
|
|
102
|
+
$flex-2012-ms,
|
|
103
|
+
false,
|
|
104
|
+
false);
|
|
105
|
+
@include experimental-value(display, $type,
|
|
106
|
+
$flex-moz,
|
|
107
|
+
$flex-webkit,
|
|
108
|
+
$flex-o,
|
|
109
|
+
$flex-ms,
|
|
110
|
+
$flex-khtml,
|
|
111
|
+
$flex-official);
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
@mixin legacy-display-flex($type: flex) {
|
|
115
|
+
@include experimental-value(display, if($type == flex, box, inline-box),
|
|
116
|
+
$flex-2009-moz,
|
|
117
|
+
$flex-2009-webkit,
|
|
118
|
+
false,
|
|
119
|
+
false,
|
|
120
|
+
false,
|
|
121
|
+
false);
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
// --------------------------------
|
|
125
|
+
// Flex
|
|
126
|
+
|
|
127
|
+
// $value: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
|
|
128
|
+
@mixin flex($value: 0 1 auto, $legacy: $flex-legacy) {
|
|
129
|
+
@if $legacy and unitless(nth($value, 1)) {
|
|
130
|
+
// 2009 version does not have a shorthand, see `legacy-flex-grow`
|
|
131
|
+
@include legacy-flex-grow(nth($value, 1));
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
@include flex-modern(flex, $value);
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
// --------------------------------
|
|
138
|
+
|
|
139
|
+
// $value: Integer
|
|
140
|
+
@mixin flex-grow($value: 0, $legacy: $flex-legacy) {
|
|
141
|
+
@if $legacy {
|
|
142
|
+
@include legacy-flex-grow($value);
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
// There is no 2012 version of this property
|
|
146
|
+
@include flex-standard(flex-grow, $value);
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
@mixin legacy-flex-grow($value: 0) {
|
|
150
|
+
@include flex-2009(box-flex, $value);
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
// --------------------------------
|
|
154
|
+
|
|
155
|
+
// $value: Integer
|
|
156
|
+
@mixin flex-shrink($value: 1) {
|
|
157
|
+
// There is no 2009 version of this property
|
|
158
|
+
// There is no 2012 version of this property
|
|
159
|
+
@include flex-standard(flex-shrink, $value);
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
// --------------------------------
|
|
163
|
+
|
|
164
|
+
// $value: united number (eg: 100px)
|
|
165
|
+
@mixin flex-basis($value: auto) {
|
|
166
|
+
// There is no 2009 version of this property
|
|
167
|
+
// There is no 2012 version of this property
|
|
168
|
+
@include flex-standard(flex-basis, $value);
|
|
169
|
+
}
|
|
170
|
+
|
|
171
|
+
// --------------------------------
|
|
172
|
+
// Flex-flow
|
|
173
|
+
|
|
174
|
+
// <'flex-direction'> || <'flex-wrap'>
|
|
175
|
+
@mixin flex-flow($value: row nowrap, $legacy: $flex-legacy) {
|
|
176
|
+
@if $legacy {
|
|
177
|
+
@include legacy-flex-flow($value);
|
|
178
|
+
}
|
|
179
|
+
|
|
180
|
+
@include flex-modern(flex-flow, $value);
|
|
181
|
+
}
|
|
182
|
+
|
|
183
|
+
@mixin legacy-flex-flow($value: row nowrap) {
|
|
184
|
+
@if length($value) > 1 { // 2009 version doesn't have a shorthand
|
|
185
|
+
@include legacy-flex-direction(nth($value, 1));
|
|
186
|
+
@include legacy-flex-wrap(nth($value, 2));
|
|
187
|
+
} @else {
|
|
188
|
+
@if $value == row or $value == row-reverse or $value == column or $value == column-reverse {
|
|
189
|
+
@include legacy-flex-direction($value);
|
|
190
|
+
} @else {
|
|
191
|
+
@include legacy-flex-wrap($value);
|
|
192
|
+
}
|
|
193
|
+
}
|
|
194
|
+
}
|
|
195
|
+
|
|
196
|
+
// --------------------------------------------------------------------------------
|
|
197
|
+
|
|
198
|
+
// $value: row | row-reverse | column | column-reverse
|
|
199
|
+
@mixin flex-direction($value: row, $legacy: $flex-legacy) {
|
|
200
|
+
@if $legacy {
|
|
201
|
+
@include legacy-flex-direction($value);
|
|
202
|
+
}
|
|
203
|
+
|
|
204
|
+
@include flex-modern(flex-direction, $value);
|
|
205
|
+
}
|
|
206
|
+
|
|
207
|
+
@mixin legacy-flex-direction($value: row) {
|
|
208
|
+
@include flex-2009(box-orient, if($value == row or $value == row-reverse, horizontal, vertical));
|
|
209
|
+
}
|
|
210
|
+
|
|
211
|
+
// --------------------------------------------------------------------------------
|
|
212
|
+
|
|
213
|
+
// $value: nowrap | wrap | wrap-reverse
|
|
214
|
+
@mixin flex-wrap($value: nowrap, $legacy: $flex-legacy) {
|
|
215
|
+
@if $legacy {
|
|
216
|
+
@include legacy-flex-wrap($value);
|
|
217
|
+
}
|
|
218
|
+
|
|
219
|
+
@include flex-modern(flex-direction, $value);
|
|
220
|
+
}
|
|
221
|
+
|
|
222
|
+
@mixin legacy-flex-wrap($value: nowrap) {
|
|
223
|
+
@include flex-2009(box-lines, if($value == nowrap, single, multiple));
|
|
224
|
+
@include flex-2009(box-direction, if($value == wrap-reverse, reverse, normal));
|
|
225
|
+
}
|
|
226
|
+
|
|
227
|
+
// --------------------------------
|
|
228
|
+
// "Packing" & Alignment
|
|
229
|
+
|
|
230
|
+
// Distributing extra space along the "main axis"
|
|
231
|
+
// $value: flex-start | flex-end | center | space-between | space-around
|
|
232
|
+
@mixin justify-content($value: flex-start, $legacy: $flex-legacy) {
|
|
233
|
+
@if $legacy {
|
|
234
|
+
@include legacy-justify-content($value);
|
|
235
|
+
}
|
|
236
|
+
|
|
237
|
+
@include flex-2012(flex-pack, standard-to-draft-value($value, 2012));
|
|
238
|
+
@include flex-standard(justify-content, $value);
|
|
239
|
+
}
|
|
240
|
+
|
|
241
|
+
@mixin legacy-justify-content($value: flex-start) {
|
|
242
|
+
@include flex-2009(box-pack, standard-to-draft-value($value, 2009));
|
|
243
|
+
}
|
|
244
|
+
|
|
245
|
+
// --------------------------------
|
|
246
|
+
|
|
247
|
+
// Distributing extra space along the "cross axis"
|
|
248
|
+
// $value: flex-start | flex-end | center | space-between | space-around | stretch
|
|
249
|
+
@mixin align-content($value: flex-start, $legacy: $flex-legacy) {
|
|
250
|
+
@if $legacy {
|
|
251
|
+
@include legacy-align-content($value);
|
|
252
|
+
}
|
|
253
|
+
|
|
254
|
+
@include flex-2012(flex-line-pack, standard-to-draft-value($value, 2012));
|
|
255
|
+
@include flex-standard(align-content, $value);
|
|
256
|
+
}
|
|
257
|
+
|
|
258
|
+
@mixin legacy-align-content($value: flex-start) {
|
|
259
|
+
@include flex-2009(box-align, standard-to-draft-value($value, 2009));
|
|
260
|
+
}
|
|
261
|
+
|
|
262
|
+
// --------------------------------
|
|
263
|
+
|
|
264
|
+
// Align items along the "cross axis"
|
|
265
|
+
// $value: flex-start | flex-end | center | baseline | stretch
|
|
266
|
+
@mixin align-items($value: stretch) { // the flex container
|
|
267
|
+
// There is no 2009 version of this property
|
|
268
|
+
@include flex-2012(flex-align, standard-to-draft-value($value, 2012));
|
|
269
|
+
@include flex-standard(align-items, $value);
|
|
270
|
+
}
|
|
271
|
+
|
|
272
|
+
// --------------------------------
|
|
273
|
+
// Child properties
|
|
274
|
+
|
|
275
|
+
// Align items along the "cross axis" -- overrides `align-items` value on individual items
|
|
276
|
+
// $value: auto | flex-start | flex-end | center | baseline | stretch
|
|
277
|
+
@mixin align-self($value: auto) { // children of flex containers
|
|
278
|
+
// There is no 2009 version of this property
|
|
279
|
+
@include flex-2012(flex-item-align, standard-to-draft-value($value, 2012));
|
|
280
|
+
@include flex-standard(align-self, $value);
|
|
281
|
+
}
|
|
282
|
+
|
|
283
|
+
// --------------------------------
|
|
284
|
+
|
|
285
|
+
// $value: Integer
|
|
286
|
+
@mixin order($value: 0, $legacy: $flex-legacy) {
|
|
287
|
+
@if $legacy {
|
|
288
|
+
@include legacy-order($value);
|
|
289
|
+
}
|
|
290
|
+
|
|
291
|
+
@include flex-2012(flex-order, $value);
|
|
292
|
+
@include flex-standard(order, $value);
|
|
293
|
+
}
|
|
294
|
+
|
|
295
|
+
@mixin legacy-order($value: 0) {
|
|
296
|
+
@include flex-2009(box-ordinal-group, $value);
|
|
297
|
+
}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
// ----------------------------------------------------------------------------
|
|
2
|
+
// Layout Helpers
|
|
3
|
+
|
|
4
|
+
// OOCSS LastUnit Helper
|
|
5
|
+
//
|
|
6
|
+
// lastunit()
|
|
7
|
+
@mixin lastunit {
|
|
8
|
+
display: table-cell;
|
|
9
|
+
*display: block;
|
|
10
|
+
*zoom: 1;
|
|
11
|
+
float: none;
|
|
12
|
+
_position: relative;
|
|
13
|
+
_left: -3px;
|
|
14
|
+
_margin-right: -3px;
|
|
15
|
+
width: auto;
|
|
16
|
+
&:after {
|
|
17
|
+
content: " . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ";
|
|
18
|
+
visibility: hidden;
|
|
19
|
+
clear: both;
|
|
20
|
+
height: 0 !important;
|
|
21
|
+
display: block;
|
|
22
|
+
line-height: 0;
|
|
23
|
+
}
|
|
24
|
+
}
|
metadata
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: accoutrement
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
hash:
|
|
4
|
+
hash: 21
|
|
5
5
|
prerelease:
|
|
6
6
|
segments:
|
|
7
7
|
- 0
|
|
8
8
|
- 0
|
|
9
|
-
-
|
|
10
|
-
version: 0.0.
|
|
9
|
+
- 5
|
|
10
|
+
version: 0.0.5
|
|
11
11
|
platform: ruby
|
|
12
12
|
authors:
|
|
13
13
|
- Eric Meyer
|
|
@@ -15,7 +15,7 @@ autorequire:
|
|
|
15
15
|
bindir: bin
|
|
16
16
|
cert_chain: []
|
|
17
17
|
|
|
18
|
-
date: 2013-
|
|
18
|
+
date: 2013-02-14 00:00:00 Z
|
|
19
19
|
dependencies:
|
|
20
20
|
- !ruby/object:Gem::Dependency
|
|
21
21
|
name: compass
|
|
@@ -48,7 +48,10 @@ files:
|
|
|
48
48
|
- stylesheets/accoutrement/_a11y.scss
|
|
49
49
|
- stylesheets/accoutrement/_arrows.scss
|
|
50
50
|
- stylesheets/accoutrement/_background.scss
|
|
51
|
+
- stylesheets/accoutrement/_calc.scss
|
|
51
52
|
- stylesheets/accoutrement/_color.scss
|
|
53
|
+
- stylesheets/accoutrement/_flexbox.scss
|
|
54
|
+
- stylesheets/accoutrement/_layout.scss
|
|
52
55
|
- stylesheets/accoutrement/_math.scss
|
|
53
56
|
- stylesheets/accoutrement/_media.scss
|
|
54
57
|
- stylesheets/accoutrement/_pseudo-elements.scss
|