bourbon-compass 3.1.8 → 3.2.0.beta.1.a

Sign up to get free protection for your applications and to get access to all the features.
Files changed (34) hide show
  1. data/stylesheets/bourbon/_bourbon.scss +12 -2
  2. data/stylesheets/bourbon/addons/_button.scss +3 -3
  3. data/stylesheets/bourbon/addons/_clearfix.scss +5 -11
  4. data/stylesheets/bourbon/addons/_directional-values.scss +114 -0
  5. data/stylesheets/bourbon/addons/_ellipsis.scss +7 -0
  6. data/stylesheets/bourbon/addons/_font-family.scss +1 -1
  7. data/stylesheets/bourbon/addons/_hide-text.scss +8 -3
  8. data/stylesheets/bourbon/addons/_html5-input-types.scss +57 -3
  9. data/stylesheets/bourbon/addons/_position.scss +6 -16
  10. data/stylesheets/bourbon/addons/_prefixer.scss +1 -5
  11. data/stylesheets/bourbon/addons/_rem.scss +33 -0
  12. data/stylesheets/bourbon/addons/_retina-image.scss +4 -5
  13. data/stylesheets/bourbon/css3/_background.scss +8 -8
  14. data/stylesheets/bourbon/css3/_border-image.scss +1 -0
  15. data/stylesheets/bourbon/css3/_calc.scss +4 -0
  16. data/stylesheets/bourbon/css3/_flex-box.scss +269 -0
  17. data/stylesheets/bourbon/css3/_hyphens.scss +4 -0
  18. data/stylesheets/bourbon/css3/_image-rendering.scss +3 -3
  19. data/stylesheets/bourbon/css3/_keyframes.scss +0 -7
  20. data/stylesheets/bourbon/css3/_linear-gradient.scss +7 -10
  21. data/stylesheets/bourbon/css3/_radial-gradient.scss +6 -11
  22. data/stylesheets/bourbon/css3/_transition.scss +4 -4
  23. data/stylesheets/bourbon/functions/_golden-ratio.scss +3 -0
  24. data/stylesheets/bourbon/functions/_modular-scale.scss +54 -28
  25. data/stylesheets/bourbon/functions/_px-to-em.scss +7 -2
  26. data/stylesheets/bourbon/functions/_radial-gradient.scss +7 -7
  27. data/stylesheets/bourbon/functions/_strip-units.scss +5 -0
  28. data/stylesheets/bourbon/functions/_unpack.scss +17 -0
  29. data/stylesheets/bourbon/helpers/_radial-arg-parser.scss +4 -4
  30. data/stylesheets/bourbon/settings/_prefixer.scss +6 -0
  31. data/stylesheets/bourbon/settings/_px-to-em.scss +1 -0
  32. metadata +21 -13
  33. data/stylesheets/bourbon/functions/_compact.scss +0 -11
  34. data/stylesheets/bourbon/helpers/_deprecated-webkit-gradient.scss +0 -39
@@ -4,18 +4,18 @@
4
4
  //************************************************************************//
5
5
 
6
6
  @mixin background(
7
- $background-1 , $background-2: false,
8
- $background-3: false, $background-4: false,
9
- $background-5: false, $background-6: false,
10
- $background-7: false, $background-8: false,
11
- $background-9: false, $background-10: false,
12
- $fallback: false
7
+ $background-1 , $background-2: null,
8
+ $background-3: null, $background-4: null,
9
+ $background-5: null, $background-6: null,
10
+ $background-7: null, $background-8: null,
11
+ $background-9: null, $background-10: null,
12
+ $fallback: null
13
13
  ) {
14
- $backgrounds: compact($background-1, $background-2,
14
+ $backgrounds: $background-1, $background-2,
15
15
  $background-3, $background-4,
16
16
  $background-5, $background-6,
17
17
  $background-7, $background-8,
18
- $background-9, $background-10);
18
+ $background-9, $background-10;
19
19
 
20
20
  $fallback-color: false;
21
21
  @if (type-of($fallback) == color) or ($fallback == "transparent") {
@@ -3,6 +3,7 @@
3
3
  -moz-border-image: _border-add-prefix($images, moz);
4
4
  -o-border-image: _border-add-prefix($images, o);
5
5
  border-image: _border-add-prefix($images);
6
+ border-style: solid;
6
7
  }
7
8
 
8
9
  @function _border-add-prefix($images, $vendor: false) {
@@ -0,0 +1,4 @@
1
+ @mixin calc($property, $value) {
2
+ #{$property}: -webkit-calc(#{$value});
3
+ #{$property}: calc(#{$value});
4
+ }
@@ -11,6 +11,7 @@
11
11
  @mixin display-box {
12
12
  display: -webkit-box;
13
13
  display: -moz-box;
14
+ display: -ms-flexbox; // IE 10
14
15
  display: box;
15
16
  }
16
17
 
@@ -22,16 +23,19 @@
22
23
  @mixin box-pack($pack: start) {
23
24
  // start|end|center|justify
24
25
  @include prefixer(box-pack, $pack, webkit moz spec);
26
+ -ms-flex-pack: $pack; // IE 10
25
27
  }
26
28
 
27
29
  @mixin box-align($align: stretch) {
28
30
  // start|end|center|baseline|stretch
29
31
  @include prefixer(box-align, $align, webkit moz spec);
32
+ -ms-flex-align: $align; // IE 10
30
33
  }
31
34
 
32
35
  @mixin box-direction($direction: normal) {
33
36
  // normal|reverse|inherit
34
37
  @include prefixer(box-direction, $direction, webkit moz spec);
38
+ -ms-flex-direction: $direction; // IE 10
35
39
  }
36
40
 
37
41
  @mixin box-lines($lines: single) {
@@ -41,12 +45,277 @@
41
45
 
42
46
  @mixin box-ordinal-group($int: 1) {
43
47
  @include prefixer(box-ordinal-group, $int, webkit moz spec);
48
+ -ms-flex-order: $int; // IE 10
44
49
  }
45
50
 
46
51
  @mixin box-flex($value: 0.0) {
47
52
  @include prefixer(box-flex, $value, webkit moz spec);
53
+ -ms-flex: $value; // IE 10
48
54
  }
49
55
 
50
56
  @mixin box-flex-group($int: 1) {
51
57
  @include prefixer(box-flex-group, $int, webkit moz spec);
52
58
  }
59
+
60
+ // CSS3 Flexible Box Model and property defaults
61
+ // Unified attributes for 2009, 2011, and 2012 flavours.
62
+
63
+ // 2009 - display (box | inline-box)
64
+ // 2011 - display (flexbox | inline-flexbox)
65
+ // 2012 - display (flex | inline-flex)
66
+ @mixin display($value) {
67
+ // flex | inline-flex
68
+ @if $value == "flex" {
69
+ // 2009
70
+ display: -webkit-box;
71
+ display: -moz-box;
72
+ display: box;
73
+
74
+ // 2012
75
+ display: -webkit-flex;
76
+ display: -moz-flex;
77
+ display: -ms-flexbox; // 2011 (IE 10)
78
+ display: flex;
79
+ }
80
+
81
+ @elseif $value == "inline-flex" {
82
+ display: -webkit-inline-box;
83
+ display: -moz-inline-box;
84
+ display: inline-box;
85
+
86
+ display: -webkit-inline-flex;
87
+ display: -moz-inline-flex;
88
+ display: -ms-inline-flexbox;
89
+ display: inline-flex;
90
+ }
91
+
92
+ @else {
93
+ display: $value;
94
+ }
95
+ }
96
+
97
+ // 2009 - box-flex (integer)
98
+ // 2011 - flex (decimal | width decimal)
99
+ // 2012 - flex (integer integer width)
100
+ @mixin flex($value) {
101
+
102
+ // Grab flex-grow for older browsers.
103
+ $flex-grow: nth($value, 1);
104
+
105
+ // 2009
106
+ @include prefixer(box-flex, $flex-grow, webkit moz spec);
107
+
108
+ // 2011 (IE 10), 2012
109
+ @include prefixer(flex, $value, webkit moz ms spec);
110
+ }
111
+
112
+ // 2009 - box-orient ( horizontal | vertical | inline-axis | block-axis)
113
+ // - box-direction (normal | reverse)
114
+ // 2011 - flex-direction (row | row-reverse | column | column-reverse)
115
+ // 2012 - flex-direction (row | row-reverse | column | column-reverse)
116
+ @mixin flex-direction($value: row) {
117
+
118
+ // Alt values.
119
+ $value-2009: $value;
120
+ $value-2011: $value;
121
+ $direction: "normal";
122
+
123
+ @if $value == row {
124
+ $value-2009: horizontal;
125
+ }
126
+
127
+ @elseif $value == "row-reverse" {
128
+ $value-2009: horizontal;
129
+ $direction: reverse;
130
+ }
131
+
132
+ @elseif $value == column {
133
+ $value-2009: vertical;
134
+ }
135
+
136
+ @elseif $value == "column-reverse" {
137
+ $value-2009: vertical;
138
+ $direction: reverse;
139
+ }
140
+
141
+ // 2009
142
+ @include prefixer(box-orient, $value-2009, webkit moz spec);
143
+ @if $direction == "reverse" {
144
+ @include prefixer(box-direction, $direction, webkit moz spec);
145
+ }
146
+
147
+ // 2012
148
+ @include prefixer(flex-direction, $value, webkit moz spec);
149
+
150
+ // 2011 (IE 10)
151
+ -ms-flex-direction: $value;
152
+ }
153
+
154
+ // 2009 - box-lines (single | multiple)
155
+ // 2011 - flex-wrap (nowrap | wrap | wrap-reverse)
156
+ // 2012 - flex-wrap (nowrap | wrap | wrap-reverse)
157
+ @mixin flex-wrap($value: nowrap) {
158
+
159
+ // Alt values.
160
+ $alt-value: $value;
161
+ @if $value == nowrap {
162
+ $alt-value: single;
163
+ }
164
+
165
+ @elseif $value == wrap {
166
+ $alt-value: multiple;
167
+ }
168
+
169
+ @elseif $value == "wrap-reverse" {
170
+ $alt-value: multiple;
171
+ }
172
+
173
+ @include prefixer(box-lines, $alt-value, webkit moz spec);
174
+ @include prefixer(flex-wrap, $value, webkit moz ms spec);
175
+ }
176
+
177
+ // 2009 - TODO: parse values into flex-direction/flex-wrap
178
+ // 2011 - TODO: parse values into flex-direction/flex-wrap
179
+ // 2012 - flex-flow (flex-direction || flex-wrap)
180
+ @mixin flex-flow($value) {
181
+ @include prefixer(flex-flow, $value, webkit moz spec);
182
+ }
183
+
184
+ // 2009 - box-ordinal-group (integer)
185
+ // 2011 - flex-order (integer)
186
+ // 2012 - order (integer)
187
+ @mixin order($int: 0) {
188
+ // 2009
189
+ @include prefixer(box-ordinal-group, $int, webkit moz spec);
190
+
191
+ // 2012
192
+ @include prefixer(order, $int, webkit moz spec);
193
+
194
+ // 2011 (IE 10)
195
+ -ms-flex-order: $int;
196
+ }
197
+
198
+ // 2012 - flex-grow (number)
199
+ @mixin flex-grow($number: 0) {
200
+ @include prefixer(flex-grow, $number, webkit moz spec);
201
+ -ms-flex-positive: $number;
202
+ }
203
+
204
+ // 2012 - flex-shrink (number)
205
+ @mixin flex-shrink($number: 1) {
206
+ @include prefixer(flex-shrink, $number, webkit moz spec);
207
+ -ms-flex-negative: $number;
208
+ }
209
+
210
+ // 2012 - flex-basis (number)
211
+ @mixin flex-basis($width: auto) {
212
+ @include prefixer(flex-basis, $width, webkit moz spec);
213
+ -ms-flex-preferred-size: $width;
214
+ }
215
+
216
+ // 2009 - box-pack (start | end | center | justify)
217
+ // 2011 - flex-pack (start | end | center | justify)
218
+ // 2012 - justify-content (flex-start | flex-end | center | space-between | space-around)
219
+ @mixin justify-content ($value: flex-start) {
220
+
221
+ // Alt values.
222
+ $alt-value: $value;
223
+ @if $value == "flex-start" {
224
+ $alt-value: start;
225
+ }
226
+
227
+ @elseif $value == "flex-end" {
228
+ $alt-value: end;
229
+ }
230
+
231
+ @elseif $value == "space-between" {
232
+ $alt-value: justify;
233
+ }
234
+
235
+ @elseif $value == "space-around" {
236
+ $alt-value: center;
237
+ }
238
+
239
+ // 2009
240
+ @include prefixer(box-pack, $alt-value, webkit moz spec);
241
+
242
+ // 2012
243
+ @include prefixer(justify-content, $value, webkit moz ms o spec);
244
+
245
+ // 2011 (IE 10)
246
+ -ms-flex-pack: $alt-value;
247
+ }
248
+
249
+ // 2009 - box-align (start | end | center | baseline | stretch)
250
+ // 2011 - flex-align (start | end | center | baseline | stretch)
251
+ // 2012 - align-items (flex-start | flex-end | center | baseline | stretch)
252
+ @mixin align-items($value: stretch) {
253
+
254
+ $alt-value: $value;
255
+
256
+ @if $value == "flex-start" {
257
+ $alt-value: start;
258
+ }
259
+
260
+ @elseif $value == "flex-end" {
261
+ $alt-value: end;
262
+ }
263
+
264
+ // 2009
265
+ @include prefixer(box-align, $alt-value, webkit moz spec);
266
+
267
+ // 2012
268
+ @include prefixer(align-items, $value, webkit moz ms o spec);
269
+
270
+ // 2011 (IE 10)
271
+ -ms-flex-align: $alt-value;
272
+ }
273
+
274
+ // 2011 - flex-item-align (auto | start | end | center | baseline | stretch)
275
+ // 2012 - align-self (auto | flex-start | flex-end | center | baseline | stretch)
276
+ @mixin align-self($value: auto) {
277
+
278
+ $value-2011: $value;
279
+ @if $value == "flex-start" {
280
+ $value-2011: start;
281
+ }
282
+
283
+ @elseif $value == "flex-end" {
284
+ $value-2011: end;
285
+ }
286
+
287
+ // 2012
288
+ @include prefixer(align-self, $value, webkit moz spec);
289
+
290
+ // 2011 (IE 10)
291
+ -ms-flex-item-align: $value-2011;
292
+ }
293
+
294
+ // 2011 - flex-line-pack (start | end | center | justify | distribute | stretch)
295
+ // 2012 - align-content (flex-start | flex-end | center | space-between | space-around | stretch)
296
+ @mixin align-content($value: stretch) {
297
+
298
+ $value-2011: $value;
299
+ @if $value == "flex-start" {
300
+ $value-2011: start;
301
+ }
302
+
303
+ @elseif $value == "flex-end" {
304
+ $value-2011: end;
305
+ }
306
+
307
+ @elseif $value == "space-between" {
308
+ $value-2011: justify;
309
+ }
310
+
311
+ @elseif $value == "space-around" {
312
+ $value-2011: distribute;
313
+ }
314
+
315
+ // 2012
316
+ @include prefixer(align-content, $value, webkit moz spec);
317
+
318
+ // 2011 (IE 10)
319
+ -ms-flex-line-pack: $value-2011;
320
+ }
321
+
@@ -0,0 +1,4 @@
1
+ @mixin hyphens($hyphenation: none) {
2
+ // none | manual | auto
3
+ @include prefixer(hyphens, $hyphenation, webkit moz ms spec);
4
+ }
@@ -1,10 +1,10 @@
1
- @mixin image-rendering ($mode:optimizeQuality) {
1
+ @mixin image-rendering ($mode:auto) {
2
2
 
3
- @if ($mode == optimize-contrast) {
3
+ @if ($mode == crisp-edges) {
4
4
  image-rendering: -moz-crisp-edges;
5
5
  image-rendering: -o-crisp-edges;
6
6
  image-rendering: -webkit-optimize-contrast;
7
- image-rendering: optimize-contrast;
7
+ image-rendering: crisp-edges;
8
8
  }
9
9
 
10
10
  @else {
@@ -20,13 +20,6 @@
20
20
  @content;
21
21
  }
22
22
  }
23
- @if $original-prefix-for-opera {
24
- @include disable-prefix-for-all();
25
- $prefix-for-opera: true;
26
- @-o-keyframes #{$name} {
27
- @content;
28
- }
29
- }
30
23
  @if $original-prefix-for-spec {
31
24
  @include disable-prefix-for-all();
32
25
  $prefix-for-spec: true;
@@ -1,11 +1,9 @@
1
- @mixin linear-gradient($pos, $G1, $G2: false,
2
- $G3: false, $G4: false,
3
- $G5: false, $G6: false,
4
- $G7: false, $G8: false,
5
- $G9: false, $G10: false,
6
- $deprecated-pos1: left top,
7
- $deprecated-pos2: left bottom,
8
- $fallback: false) {
1
+ @mixin linear-gradient($pos, $G1, $G2: null,
2
+ $G3: null, $G4: null,
3
+ $G5: null, $G6: null,
4
+ $G7: null, $G8: null,
5
+ $G9: null, $G10: null,
6
+ $fallback: null) {
9
7
  // Detect what type of value exists in $pos
10
8
  $pos-type: type-of(nth($pos, 1));
11
9
  $pos-spec: null;
@@ -24,7 +22,7 @@
24
22
  $pos-spec: nth($positions, 2);
25
23
  }
26
24
 
27
- $full: compact($G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10);
25
+ $full: $G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10;
28
26
 
29
27
  // Set $G1 as the default fallback color
30
28
  $fallback-color: nth($G1, 1);
@@ -35,7 +33,6 @@
35
33
  }
36
34
 
37
35
  background-color: $fallback-color;
38
- background-image: _deprecated-webkit-gradient(linear, $deprecated-pos1, $deprecated-pos2, $full); // Safari <= 5.0
39
36
  background-image: -webkit-linear-gradient($pos-degree $full); // Safari 5.1+, Chrome
40
37
  background-image: unquote("linear-gradient(#{$pos-spec}#{$full})");
41
38
  }
@@ -1,16 +1,12 @@
1
1
  // Requires Sass 3.1+
2
2
  @mixin radial-gradient($G1, $G2,
3
- $G3: false, $G4: false,
4
- $G5: false, $G6: false,
5
- $G7: false, $G8: false,
6
- $G9: false, $G10: false,
3
+ $G3: null, $G4: null,
4
+ $G5: null, $G6: null,
5
+ $G7: null, $G8: null,
6
+ $G9: null, $G10: null,
7
7
  $pos: null,
8
8
  $shape-size: null,
9
- $deprecated-pos1: center center,
10
- $deprecated-pos2: center center,
11
- $deprecated-radius1: 0,
12
- $deprecated-radius2: 460,
13
- $fallback: false) {
9
+ $fallback: null) {
14
10
 
15
11
  $data: _radial-arg-parser($G1, $G2, $pos, $shape-size);
16
12
  $G1: nth($data, 1);
@@ -18,7 +14,7 @@
18
14
  $pos: nth($data, 3);
19
15
  $shape-size: nth($data, 4);
20
16
 
21
- $full: compact($G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10);
17
+ $full: $G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10;
22
18
 
23
19
  // Strip deprecated cover/contain for spec
24
20
  $shape-size-spec: _shape-size-stripper($shape-size);
@@ -38,7 +34,6 @@
38
34
  $shape-size-spec: if(($shape-size-spec != ' ') and ($pos == null), '#{$shape-size-spec}, ', '#{$shape-size-spec} ');
39
35
 
40
36
  background-color: $fallback-color;
41
- background-image: _deprecated-webkit-gradient(radial, $deprecated-pos1, $deprecated-pos2, $full, $deprecated-radius1, $deprecated-radius2); // Safari <= 5.0 && IOS 4
42
37
  background-image: -webkit-radial-gradient(unquote(#{$pos}#{$shape-size}#{$full}));
43
38
  background-image: unquote("radial-gradient(#{$shape-size-spec}#{$pos-spec}#{$full})");
44
39
  }