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

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,12 +11,14 @@
11
11
  @import "helpers/shape-size-stripper";
12
12
 
13
13
  // Custom Functions
14
+ @import "functions/color-lightness";
14
15
  @import "functions/flex-grid";
15
- @import "functions/grid-width";
16
16
  @import "functions/golden-ratio";
17
+ @import "functions/grid-width";
17
18
  @import "functions/linear-gradient";
18
19
  @import "functions/modular-scale";
19
20
  @import "functions/px-to-em";
21
+ @import "functions/px-to-rem";
20
22
  @import "functions/radial-gradient";
21
23
  @import "functions/strip-units";
22
24
  @import "functions/tint-shade";
@@ -34,6 +36,7 @@
34
36
  @import "css3/box-sizing";
35
37
  @import "css3/calc";
36
38
  @import "css3/columns";
39
+ @import "css3/filter";
37
40
  @import "css3/flex-box";
38
41
  @import "css3/font-face";
39
42
  @import "css3/hyphens";
@@ -59,11 +62,11 @@
59
62
  @import "addons/html5-input-types";
60
63
  @import "addons/position";
61
64
  @import "addons/prefixer";
62
- @import "addons/rem";
63
65
  @import "addons/retina-image";
64
66
  @import "addons/size";
65
67
  @import "addons/timing-functions";
66
68
  @import "addons/triangle";
69
+ @import "addons/word-wrap";
67
70
 
68
71
  // Soon to be deprecated Mixins
69
72
  @import "bourbon-deprecated-upcoming";
@@ -1,38 +1,51 @@
1
- @mixin button ($style: simple, $base-color: #4294f0) {
1
+ @mixin button ($style: simple, $base-color: #4294f0, $text-size: inherit, $padding: 7px 18px) {
2
2
 
3
- @if type-of($style) == color {
3
+ @if type-of($style) == string and type-of($base-color) == color {
4
+ @include buttonstyle($style, $base-color, $text-size, $padding);
5
+ }
6
+
7
+ @if type-of($style) == string and type-of($base-color) == number {
8
+ $padding: $text-size;
9
+ $text-size: $base-color;
10
+ $base-color: #4294f0;
11
+
12
+ @if $padding == inherit {
13
+ $padding: 7px 18px;
14
+ }
15
+
16
+ @include buttonstyle($style, $base-color, $text-size, $padding);
17
+ }
18
+
19
+ @if type-of($style) == color and type-of($base-color) == color {
4
20
  $base-color: $style;
5
21
  $style: simple;
22
+ @include buttonstyle($style, $base-color, $text-size, $padding);
6
23
  }
7
24
 
8
- // Grayscale button
9
- @if $base-color == grayscale($base-color) {
10
- @if $style == simple {
11
- @include simple($base-color, $grayscale: true);
12
- }
25
+ @if type-of($style) == color and type-of($base-color) == number {
26
+ $padding: $text-size;
27
+ $text-size: $base-color;
28
+ $base-color: $style;
29
+ $style: simple;
13
30
 
14
- @else if $style == shiny {
15
- @include shiny($base-color, $grayscale: true);
31
+ @if $padding == inherit {
32
+ $padding: 7px 18px;
16
33
  }
17
34
 
18
- @else if $style == pill {
19
- @include pill($base-color, $grayscale: true);
20
- }
35
+ @include buttonstyle($style, $base-color, $text-size, $padding);
21
36
  }
22
37
 
23
- // Colored button
24
- @else {
25
- @if $style == simple {
26
- @include simple($base-color);
27
- }
38
+ @if type-of($style) == number {
39
+ $padding: $base-color;
40
+ $text-size: $style;
41
+ $base-color: #4294f0;
42
+ $style: simple;
28
43
 
29
- @else if $style == shiny {
30
- @include shiny($base-color);
44
+ @if $padding == #4294f0 {
45
+ $padding: 7px 18px;
31
46
  }
32
47
 
33
- @else if $style == pill {
34
- @include pill($base-color);
35
- }
48
+ @include buttonstyle($style, $base-color, $text-size, $padding);
36
49
  }
37
50
 
38
51
  &:disabled {
@@ -42,16 +55,55 @@
42
55
  }
43
56
 
44
57
 
58
+ // Selector Style Button
59
+ //************************************************************************//
60
+ @mixin buttonstyle($type, $b-color, $t-size, $pad) {
61
+ // Grayscale button
62
+ @if $type == simple and $b-color == grayscale($b-color) {
63
+ @include simple($b-color, true, $t-size, $pad);
64
+ }
65
+
66
+ @if $type == shiny and $b-color == grayscale($b-color) {
67
+ @include shiny($b-color, true, $t-size, $pad);
68
+ }
69
+
70
+ @if $type == pill and $b-color == grayscale($b-color) {
71
+ @include pill($b-color, true, $t-size, $pad);
72
+ }
73
+
74
+ @if $type == flat and $b-color == grayscale($b-color) {
75
+ @include flat($b-color, true, $t-size, $pad);
76
+ }
77
+
78
+ // Colored button
79
+ @if $type == simple {
80
+ @include simple($b-color, false, $t-size, $pad);
81
+ }
82
+
83
+ @else if $type == shiny {
84
+ @include shiny($b-color, false, $t-size, $pad);
85
+ }
86
+
87
+ @else if $type == pill {
88
+ @include pill($b-color, false, $t-size, $pad);
89
+ }
90
+
91
+ @else if $type == flat {
92
+ @include flat($b-color, false, $t-size, $pad);
93
+ }
94
+ }
95
+
96
+
45
97
  // Simple Button
46
98
  //************************************************************************//
47
- @mixin simple($base-color, $grayscale: false) {
99
+ @mixin simple($base-color, $grayscale: false, $textsize: inherit, $padding: 7px 18px) {
48
100
  $color: hsl(0, 0, 100%);
49
101
  $border: adjust-color($base-color, $saturation: 9%, $lightness: -14%);
50
102
  $inset-shadow: adjust-color($base-color, $saturation: -8%, $lightness: 15%);
51
103
  $stop-gradient: adjust-color($base-color, $saturation: 9%, $lightness: -11%);
52
104
  $text-shadow: adjust-color($base-color, $saturation: 15%, $lightness: -18%);
53
105
 
54
- @if lightness($base-color) > 70% {
106
+ @if is-light($base-color) {
55
107
  $color: hsl(0, 0, 20%);
56
108
  $text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%);
57
109
  }
@@ -68,10 +120,10 @@
68
120
  box-shadow: inset 0 1px 0 0 $inset-shadow;
69
121
  color: $color;
70
122
  display: inline-block;
71
- font-size: inherit;
123
+ font-size: $textsize;
72
124
  font-weight: bold;
73
125
  @include linear-gradient ($base-color, $stop-gradient);
74
- padding: 7px 18px;
126
+ padding: $padding;
75
127
  text-decoration: none;
76
128
  text-shadow: 0 1px 0 $text-shadow;
77
129
  background-clip: padding-box;
@@ -92,7 +144,8 @@
92
144
  @include linear-gradient ($base-color-hover, $stop-gradient-hover);
93
145
  }
94
146
 
95
- &:active:not(:disabled) {
147
+ &:active:not(:disabled),
148
+ &:focus:not(:disabled) {
96
149
  $border-active: adjust-color($base-color, $saturation: 9%, $lightness: -14%);
97
150
  $inset-shadow-active: adjust-color($base-color, $saturation: 7%, $lightness: -17%);
98
151
 
@@ -102,14 +155,14 @@
102
155
  }
103
156
 
104
157
  border: 1px solid $border-active;
105
- box-shadow: inset 0 0 8px 4px $inset-shadow-active, inset 0 0 8px 4px $inset-shadow-active, 0 1px 1px 0 #eee;
158
+ box-shadow: inset 0 0 8px 4px $inset-shadow-active, inset 0 0 8px 4px $inset-shadow-active;
106
159
  }
107
160
  }
108
161
 
109
162
 
110
163
  // Shiny Button
111
164
  //************************************************************************//
112
- @mixin shiny($base-color, $grayscale: false) {
165
+ @mixin shiny($base-color, $grayscale: false, $textsize: inherit, $padding: 7px 18px) {
113
166
  $color: hsl(0, 0, 100%);
114
167
  $border: adjust-color($base-color, $red: -117, $green: -111, $blue: -81);
115
168
  $border-bottom: adjust-color($base-color, $red: -126, $green: -127, $blue: -122);
@@ -119,7 +172,7 @@
119
172
  $text-shadow: adjust-color($base-color, $red: -140, $green: -141, $blue: -114);
120
173
  $third-stop: adjust-color($base-color, $red: -86, $green: -75, $blue: -48);
121
174
 
122
- @if lightness($base-color) > 70% {
175
+ @if is-light($base-color) {
123
176
  $color: hsl(0, 0, 20%);
124
177
  $text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%);
125
178
  }
@@ -140,10 +193,10 @@
140
193
  box-shadow: inset 0 1px 0 0 $inset-shadow;
141
194
  color: $color;
142
195
  display: inline-block;
143
- font-size: inherit;
196
+ font-size: $textsize;
144
197
  font-weight: bold;
145
198
  @include linear-gradient(top, $base-color 0%, $second-stop 50%, $third-stop 50%, $fourth-stop 100%);
146
- padding: 8px 20px;
199
+ padding: $padding;
147
200
  text-align: center;
148
201
  text-decoration: none;
149
202
  text-shadow: 0 -1px 1px $text-shadow;
@@ -168,21 +221,22 @@
168
221
  $fourth-stop-hover 100%);
169
222
  }
170
223
 
171
- &:active:not(:disabled) {
224
+ &:active:not(:disabled),
225
+ &:focus:not(:disabled) {
172
226
  $inset-shadow-active: adjust-color($base-color, $red: -111, $green: -116, $blue: -122);
173
227
 
174
228
  @if $grayscale == true {
175
229
  $inset-shadow-active: grayscale($inset-shadow-active);
176
230
  }
177
231
 
178
- box-shadow: inset 0 0 20px 0 $inset-shadow-active, 0 1px 0 #fff;
232
+ box-shadow: inset 0 0 20px 0 $inset-shadow-active;
179
233
  }
180
234
  }
181
235
 
182
236
 
183
237
  // Pill Button
184
238
  //************************************************************************//
185
- @mixin pill($base-color, $grayscale: false) {
239
+ @mixin pill($base-color, $grayscale: false, $textsize: inherit, $padding: 7px 18px) {
186
240
  $color: hsl(0, 0, 100%);
187
241
  $border-bottom: adjust-color($base-color, $hue: 8, $saturation: -11%, $lightness: -26%);
188
242
  $border-sides: adjust-color($base-color, $hue: 4, $saturation: -21%, $lightness: -21%);
@@ -191,7 +245,7 @@
191
245
  $stop-gradient: adjust-color($base-color, $hue: 8, $saturation: 14%, $lightness: -10%);
192
246
  $text-shadow: adjust-color($base-color, $hue: 5, $saturation: -19%, $lightness: -15%);
193
247
 
194
- @if lightness($base-color) > 70% {
248
+ @if is-light($base-color) {
195
249
  $color: hsl(0, 0, 20%);
196
250
  $text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%);
197
251
  }
@@ -208,14 +262,14 @@
208
262
  border: 1px solid $border-top;
209
263
  border-color: $border-top $border-sides $border-bottom;
210
264
  border-radius: 16px;
211
- box-shadow: inset 0 1px 0 0 $inset-shadow, 0 1px 2px 0 #b3b3b3;
265
+ box-shadow: inset 0 1px 0 0 $inset-shadow;
212
266
  color: $color;
213
267
  display: inline-block;
214
- font-size: inherit;
268
+ font-size: $textsize;
215
269
  font-weight: normal;
216
270
  line-height: 1;
217
271
  @include linear-gradient ($base-color, $stop-gradient);
218
- padding: 5px 16px;
272
+ padding: $padding;
219
273
  text-align: center;
220
274
  text-decoration: none;
221
275
  text-shadow: 0 -1px 1px $text-shadow;
@@ -249,7 +303,8 @@
249
303
  background-clip: padding-box;
250
304
  }
251
305
 
252
- &:active:not(:disabled) {
306
+ &:active:not(:disabled),
307
+ &:focus:not(:disabled) {
253
308
  $active-color: adjust-color($base-color, $hue: 4, $saturation: -12%, $lightness: -10%);
254
309
  $border-active: adjust-color($base-color, $hue: 6, $saturation: -2.5%, $lightness: -30%);
255
310
  $border-bottom-active: adjust-color($base-color, $hue: 11, $saturation: 6%, $lightness: -31%);
@@ -267,7 +322,53 @@
267
322
  background: $active-color;
268
323
  border: 1px solid $border-active;
269
324
  border-bottom: 1px solid $border-bottom-active;
270
- box-shadow: inset 0 0 6px 3px $inset-shadow-active, 0 1px 0 0 #fff;
325
+ box-shadow: inset 0 0 6px 3px $inset-shadow-active;
271
326
  text-shadow: 0 -1px 1px $text-shadow-active;
272
327
  }
273
328
  }
329
+
330
+
331
+
332
+ // Flat Button
333
+ //************************************************************************//
334
+ @mixin flat($base-color, $grayscale: false, $textsize: inherit, $padding: 7px 18px) {
335
+ $color: hsl(0, 0, 100%);
336
+
337
+ @if is-light($base-color) {
338
+ $color: hsl(0, 0, 20%);
339
+ }
340
+
341
+ background-color: $base-color;
342
+ border-radius: 3px;
343
+ border: none;
344
+ color: $color;
345
+ display: inline-block;
346
+ font-size: inherit;
347
+ font-weight: bold;
348
+ padding: 7px 18px;
349
+ text-decoration: none;
350
+ background-clip: padding-box;
351
+
352
+ &:hover:not(:disabled){
353
+ $base-color-hover: adjust-color($base-color, $saturation: 4%, $lightness: 5%);
354
+
355
+ @if $grayscale == true {
356
+ $base-color-hover: grayscale($base-color-hover);
357
+ }
358
+
359
+ background-color: $base-color-hover;
360
+ cursor: pointer;
361
+ }
362
+
363
+ &:active:not(:disabled),
364
+ &:focus:not(:disabled) {
365
+ $base-color-active: adjust-color($base-color, $saturation: -4%, $lightness: -5%);
366
+
367
+ @if $grayscale == true {
368
+ $base-color-active: grayscale($base-color-active);
369
+ }
370
+
371
+ background-color: $base-color-active;
372
+ cursor: pointer;
373
+ }
374
+ }
@@ -57,9 +57,6 @@
57
57
  $right: $pre + "-right" + if($suf, "-#{$suf}", "");
58
58
  $all: $pre + if($suf, "-#{$suf}", "");
59
59
 
60
- // Get list inside $vals (is there a better way?)
61
- @each $val in $vals { $vals: $val; }
62
-
63
60
  $vals: collapse-directionals($vals);
64
61
 
65
62
  @if contains-falsy($vals) {
@@ -94,21 +91,21 @@
94
91
  }
95
92
 
96
93
  @mixin margin($vals...) {
97
- @include directional-property(margin, false, $vals);
94
+ @include directional-property(margin, false, $vals...);
98
95
  }
99
96
 
100
97
  @mixin padding($vals...) {
101
- @include directional-property(padding, false, $vals);
98
+ @include directional-property(padding, false, $vals...);
102
99
  }
103
100
 
104
101
  @mixin border-style($vals...) {
105
- @include directional-property(border, style, $vals);
102
+ @include directional-property(border, style, $vals...);
106
103
  }
107
104
 
108
105
  @mixin border-color($vals...) {
109
- @include directional-property(border, color, $vals);
106
+ @include directional-property(border, color, $vals...);
110
107
  }
111
108
 
112
109
  @mixin border-width($vals...) {
113
- @include directional-property(border, width, $vals);
110
+ @include directional-property(border, width, $vals...);
114
111
  }
@@ -22,7 +22,7 @@ $inputs-list: 'input[type="email"]',
22
22
 
23
23
  $unquoted-inputs-list: ();
24
24
  @each $input-type in $inputs-list {
25
- $unquoted-inputs-list: append($unquoted-inputs-list, unquote($input-type), comma) !global;
25
+ $unquoted-inputs-list: append($unquoted-inputs-list, unquote($input-type), comma);
26
26
  }
27
27
 
28
28
  $all-text-inputs: $unquoted-inputs-list;
@@ -33,7 +33,7 @@ $all-text-inputs: $unquoted-inputs-list;
33
33
  $all-text-inputs-hover: ();
34
34
  @each $input-type in $unquoted-inputs-list {
35
35
  $input-type-hover: $input-type + ":hover";
36
- $all-text-inputs-hover: append($all-text-inputs-hover, $input-type-hover, comma) !global;
36
+ $all-text-inputs-hover: append($all-text-inputs-hover, $input-type-hover, comma);
37
37
  }
38
38
 
39
39
  // Focus Pseudo-class
@@ -41,7 +41,7 @@ $all-text-inputs-hover: ();
41
41
  $all-text-inputs-focus: ();
42
42
  @each $input-type in $unquoted-inputs-list {
43
43
  $input-type-focus: $input-type + ":focus";
44
- $all-text-inputs-focus: append($all-text-inputs-focus, $input-type-focus, comma) !global;
44
+ $all-text-inputs-focus: append($all-text-inputs-focus, $input-type-focus, comma);
45
45
  }
46
46
 
47
47
  // You must use interpolation on the variable:
@@ -2,44 +2,82 @@
2
2
  height: 0;
3
3
  width: 0;
4
4
 
5
+ $width: nth($size, 1);
6
+ $height: nth($size, length($size));
7
+
8
+ $foreground-color: nth($color, 1);
9
+ $background-color: if(length($color) == 2, nth($color, 2), transparent);
10
+
5
11
  @if ($direction == up) or ($direction == down) or ($direction == right) or ($direction == left) {
6
- border-color: transparent;
7
- border-style: solid;
8
- border-width: $size / 2;
12
+
13
+ $width: $width / 2;
14
+ $height: if(length($size) > 1, $height, $height/2);
9
15
 
10
16
  @if $direction == up {
11
- border-bottom-color: $color;
17
+ border-left: $width solid $background-color;
18
+ border-right: $width solid $background-color;
19
+ border-bottom: $height solid $foreground-color;
12
20
 
13
21
  } @else if $direction == right {
14
- border-left-color: $color;
22
+ border-top: $width solid $background-color;
23
+ border-bottom: $width solid $background-color;
24
+ border-left: $height solid $foreground-color;
15
25
 
16
26
  } @else if $direction == down {
17
- border-top-color: $color;
27
+ border-left: $width solid $background-color;
28
+ border-right: $width solid $background-color;
29
+ border-top: $height solid $foreground-color;
18
30
 
19
31
  } @else if $direction == left {
20
- border-right-color: $color;
32
+ border-top: $width solid $background-color;
33
+ border-bottom: $width solid $background-color;
34
+ border-right: $height solid $foreground-color;
21
35
  }
22
36
  }
23
37
 
24
38
  @else if ($direction == up-right) or ($direction == up-left) {
25
- border-top: $size solid $color;
39
+ border-top: $height solid $foreground-color;
26
40
 
27
41
  @if $direction == up-right {
28
- border-left: $size solid transparent;
42
+ border-left: $width solid $background-color;
29
43
 
30
44
  } @else if $direction == up-left {
31
- border-right: $size solid transparent;
45
+ border-right: $width solid $background-color;
32
46
  }
33
47
  }
34
48
 
35
49
  @else if ($direction == down-right) or ($direction == down-left) {
36
- border-bottom: $size solid $color;
50
+ border-bottom: $height solid $foreground-color;
37
51
 
38
52
  @if $direction == down-right {
39
- border-left: $size solid transparent;
53
+ border-left: $width solid $background-color;
40
54
 
41
55
  } @else if $direction == down-left {
42
- border-right: $size solid transparent;
56
+ border-right: $width solid $background-color;
43
57
  }
44
58
  }
59
+
60
+ @else if ($direction == inset-up) {
61
+ border-width: $height $width;
62
+ border-style: solid;
63
+ border-color: $background-color $background-color $foreground-color;
64
+ }
65
+
66
+ @else if ($direction == inset-down) {
67
+ border-width: $height $width;
68
+ border-style: solid;
69
+ border-color: $foreground-color $background-color $background-color;
70
+ }
71
+
72
+ @else if ($direction == inset-right) {
73
+ border-width: $width $height;
74
+ border-style: solid;
75
+ border-color: $background-color $background-color $background-color $foreground-color;
76
+ }
77
+
78
+ @else if ($direction == inset-left) {
79
+ border-width: $width $height;
80
+ border-style: solid;
81
+ border-color: $background-color $foreground-color $background-color $background-color;
82
+ }
45
83
  }
@@ -0,0 +1,8 @@
1
+ @mixin word-wrap($wrap: break-word) {
2
+ word-wrap: $wrap;
3
+
4
+ @if $wrap == break-word {
5
+ overflow-wrap: break-word;
6
+ word-break: break-all;
7
+ }
8
+ }
@@ -15,7 +15,7 @@
15
15
 
16
16
  @mixin column-fill($arg: auto) {
17
17
  // auto || length
18
- @include prefixer(columns-fill, $arg, webkit moz spec);
18
+ @include prefixer(column-fill, $arg, webkit moz spec);
19
19
  }
20
20
 
21
21
  @mixin column-rule($arg) {
@@ -0,0 +1,5 @@
1
+ @mixin filter($function: none) {
2
+ // <filter-function> [<filter-function]* | none
3
+ @include prefixer(filter, $function, webkit spec);
4
+ }
5
+
@@ -0,0 +1,10 @@
1
+ // Font feature settings mixin and property default.
2
+ // Examples: @include font-feature-settings("liga");
3
+ // @include font-feature-settings("lnum" false);
4
+ // @include font-feature-settings("pnum" 1, "kern" 0);
5
+ // @include font-feature-settings("ss01", "ss02");
6
+
7
+ @mixin font-feature-settings($settings...) {
8
+ @if length($settings) == 0 { $settings: none; }
9
+ @include prefixer(font-feature-settings, $settings, webkit moz ms spec);
10
+ }
@@ -1,6 +1,7 @@
1
1
  @mixin image-rendering ($mode:auto) {
2
2
 
3
3
  @if ($mode == crisp-edges) {
4
+ -ms-interpolation-mode: nearest-neighbor; // IE8+
4
5
  image-rendering: -moz-crisp-edges;
5
6
  image-rendering: -o-crisp-edges;
6
7
  image-rendering: -webkit-optimize-contrast;
@@ -20,17 +20,16 @@
20
20
  @content;
21
21
  }
22
22
  }
23
- @if $original-prefix-for-spec {
24
- @include disable-prefix-for-all();
25
- $prefix-for-spec: true;
26
- @keyframes #{$name} {
27
- @content;
28
- }
29
- }
30
23
 
31
24
  $prefix-for-webkit: $original-prefix-for-webkit;
32
25
  $prefix-for-mozilla: $original-prefix-for-mozilla;
33
26
  $prefix-for-microsoft: $original-prefix-for-microsoft;
34
27
  $prefix-for-opera: $original-prefix-for-opera;
35
28
  $prefix-for-spec: $original-prefix-for-spec;
29
+
30
+ @if $original-prefix-for-spec {
31
+ @keyframes #{$name} {
32
+ @content;
33
+ }
34
+ }
36
35
  }
@@ -1,29 +1,8 @@
1
- $placeholders: '-webkit-input-placeholder',
2
- '-moz-placeholder',
3
- '-ms-input-placeholder';
4
-
5
1
  @mixin placeholder {
2
+ $placeholders: ":-webkit-input" ":-moz" "-moz" "-ms-input";
6
3
  @each $placeholder in $placeholders {
7
- @if $placeholder == "-webkit-input-placeholder" {
8
- &::#{$placeholder} {
9
- @content;
10
- }
11
- }
12
- @else if $placeholder == "-moz-placeholder" {
13
- // FF 18-
14
- &:#{$placeholder} {
15
- @content;
16
- }
17
-
18
- // FF 19+
19
- &::#{$placeholder} {
20
- @content;
21
- }
22
- }
23
- @else {
24
- &:#{$placeholder} {
25
- @content;
26
- }
4
+ &:#{$placeholder}-placeholder {
5
+ @content;
27
6
  }
28
7
  }
29
8
  }
@@ -4,13 +4,56 @@
4
4
  // @include transition-property (transform, opacity);
5
5
 
6
6
  @mixin transition ($properties...) {
7
- @if length($properties) >= 1 {
8
- @include prefixer(transition, $properties, webkit moz spec);
7
+ // Fix for vendor-prefix transform property
8
+ $needs-prefixes: false;
9
+ $webkit: ();
10
+ $moz: ();
11
+ $spec: ();
12
+
13
+ // Create lists for vendor-prefixed transform
14
+ @each $list in $properties {
15
+ @if nth($list, 1) == "transform" {
16
+ $needs-prefixes: true;
17
+ $list1: -webkit-transform;
18
+ $list2: -moz-transform;
19
+ $list3: ();
20
+
21
+ @each $var in $list {
22
+ $list3: join($list3, $var);
23
+
24
+ @if $var != "transform" {
25
+ $list1: join($list1, $var);
26
+ $list2: join($list2, $var);
27
+ }
28
+ }
29
+
30
+ $webkit: append($webkit, $list1);
31
+ $moz: append($moz, $list2);
32
+ $spec: append($spec, $list3);
33
+ }
34
+
35
+ // Create lists for non-prefixed transition properties
36
+ @else {
37
+ $webkit: append($webkit, $list, comma);
38
+ $moz: append($moz, $list, comma);
39
+ $spec: append($spec, $list, comma);
40
+ }
9
41
  }
10
42
 
43
+ @if $needs-prefixes {
44
+ -webkit-transition: $webkit;
45
+ -moz-transition: $moz;
46
+ transition: $spec;
47
+ }
11
48
  @else {
12
- $properties: all 0.15s ease-out 0s;
13
- @include prefixer(transition, $properties, webkit moz spec);
49
+ @if length($properties) >= 1 {
50
+ @include prefixer(transition, $properties, webkit moz spec);
51
+ }
52
+
53
+ @else {
54
+ $properties: all 0.15s ease-out 0s;
55
+ @include prefixer(transition, $properties, webkit moz spec);
56
+ }
14
57
  }
15
58
  }
16
59
 
@@ -0,0 +1,13 @@
1
+ // Programatically determines whether a color is light or dark
2
+ // Returns a boolean
3
+ // More details here http://robots.thoughtbot.com/closer-look-color-lightness
4
+
5
+ @function is-light($hex-color) {
6
+ $-local-red: red(rgba($hex-color, 1.0));
7
+ $-local-green: green(rgba($hex-color, 1.0));
8
+ $-local-blue: blue(rgba($hex-color, 1.0));
9
+
10
+ $-local-lightness: ($-local-red * 0.2126 + $-local-green * 0.7152 + $-local-blue * 0.0722) / 255;
11
+
12
+ @return $-local-lightness > .6;
13
+ }
@@ -1,4 +1,4 @@
1
- // Scaling Varaibles
1
+ // Scaling Variables
2
2
  $golden: 1.618;
3
3
  $minor-second: 1.067;
4
4
  $major-second: 1.125;
@@ -0,0 +1,15 @@
1
+ // Convert pixels to rems
2
+ // eg. for a relational value of 12px write rem(12)
3
+ // Assumes $em-base is the font-size of <html>
4
+
5
+ @function rem($pxval) {
6
+ @if not unitless($pxval) {
7
+ $pxval: strip-units($pxval);
8
+ }
9
+
10
+ $base: $em-base;
11
+ @if not unitless($base) {
12
+ $base: strip-units($base);
13
+ }
14
+ @return ($pxval / $base) * 1rem;
15
+ }
metadata CHANGED
@@ -1,15 +1,15 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: bourbon-compass
3
3
  version: !ruby/object:Gem::Version
4
- version: 3.2.0.beta.1.a
5
- prerelease: 6
4
+ version: 3.2.0
5
+ prerelease:
6
6
  platform: ruby
7
7
  authors:
8
8
  - Jed Foster
9
9
  autorequire:
10
10
  bindir: bin
11
11
  cert_chain: []
12
- date: 2013-11-15 00:00:00.000000000 Z
12
+ date: 2014-04-19 00:00:00.000000000 Z
13
13
  dependencies:
14
14
  - !ruby/object:Gem::Dependency
15
15
  name: compass
@@ -34,7 +34,7 @@ dependencies:
34
34
  requirements:
35
35
  - - ! '>='
36
36
  - !ruby/object:Gem::Version
37
- version: 3.3.0.rc.1
37
+ version: 3.3.0
38
38
  type: :runtime
39
39
  prerelease: false
40
40
  version_requirements: !ruby/object:Gem::Requirement
@@ -42,7 +42,7 @@ dependencies:
42
42
  requirements:
43
43
  - - ! '>='
44
44
  - !ruby/object:Gem::Version
45
- version: 3.3.0.rc.1
45
+ version: 3.3.0
46
46
  description: thoughtbot's Bourbon packaged as a Compass extension.
47
47
  email: jed@jedfoster.com
48
48
  executables: []
@@ -61,11 +61,11 @@ files:
61
61
  - stylesheets/bourbon/addons/_html5-input-types.scss
62
62
  - stylesheets/bourbon/addons/_position.scss
63
63
  - stylesheets/bourbon/addons/_prefixer.scss
64
- - stylesheets/bourbon/addons/_rem.scss
65
64
  - stylesheets/bourbon/addons/_retina-image.scss
66
65
  - stylesheets/bourbon/addons/_size.scss
67
66
  - stylesheets/bourbon/addons/_timing-functions.scss
68
67
  - stylesheets/bourbon/addons/_triangle.scss
68
+ - stylesheets/bourbon/addons/_word-wrap.scss
69
69
  - stylesheets/bourbon/css3/_animation.scss
70
70
  - stylesheets/bourbon/css3/_appearance.scss
71
71
  - stylesheets/bourbon/css3/_backface-visibility.scss
@@ -76,8 +76,10 @@ files:
76
76
  - stylesheets/bourbon/css3/_box-sizing.scss
77
77
  - stylesheets/bourbon/css3/_calc.scss
78
78
  - stylesheets/bourbon/css3/_columns.scss
79
+ - stylesheets/bourbon/css3/_filter.scss
79
80
  - stylesheets/bourbon/css3/_flex-box.scss
80
81
  - stylesheets/bourbon/css3/_font-face.scss
82
+ - stylesheets/bourbon/css3/_font-feature-settings.scss
81
83
  - stylesheets/bourbon/css3/_hidpi-media-query.scss
82
84
  - stylesheets/bourbon/css3/_hyphens.scss
83
85
  - stylesheets/bourbon/css3/_image-rendering.scss
@@ -90,12 +92,14 @@ files:
90
92
  - stylesheets/bourbon/css3/_transform.scss
91
93
  - stylesheets/bourbon/css3/_transition.scss
92
94
  - stylesheets/bourbon/css3/_user-select.scss
95
+ - stylesheets/bourbon/functions/_color-lightness.scss
93
96
  - stylesheets/bourbon/functions/_flex-grid.scss
94
97
  - stylesheets/bourbon/functions/_golden-ratio.scss
95
98
  - stylesheets/bourbon/functions/_grid-width.scss
96
99
  - stylesheets/bourbon/functions/_linear-gradient.scss
97
100
  - stylesheets/bourbon/functions/_modular-scale.scss
98
101
  - stylesheets/bourbon/functions/_px-to-em.scss
102
+ - stylesheets/bourbon/functions/_px-to-rem.scss
99
103
  - stylesheets/bourbon/functions/_radial-gradient.scss
100
104
  - stylesheets/bourbon/functions/_strip-units.scss
101
105
  - stylesheets/bourbon/functions/_tint-shade.scss
@@ -124,9 +128,9 @@ required_ruby_version: !ruby/object:Gem::Requirement
124
128
  required_rubygems_version: !ruby/object:Gem::Requirement
125
129
  none: false
126
130
  requirements:
127
- - - ! '>'
131
+ - - ! '>='
128
132
  - !ruby/object:Gem::Version
129
- version: 1.3.1
133
+ version: '0'
130
134
  requirements: []
131
135
  rubyforge_project:
132
136
  rubygems_version: 1.8.23
@@ -1,33 +0,0 @@
1
- @mixin rem($property, $size, $base: $em-base) {
2
- @if not unitless($base) {
3
- $base: strip-units($base);
4
- }
5
-
6
- $unitless_values: ();
7
- @each $num in $size {
8
- @if not unitless($num) {
9
- @if unit($num) == "em" {
10
- $num: $num * $base;
11
- }
12
-
13
- $num: strip-units($num);
14
- }
15
-
16
- $unitless_values: append($unitless_values, $num);
17
- }
18
- $size: $unitless_values;
19
-
20
- $pixel_values: ();
21
- $rem_values: ();
22
- @each $value in $pxval {
23
- $pixel_value: $value * 1px;
24
- $pixel_values: append($pixel_values, $pixel_value);
25
-
26
- $rem_value: ($value / $base) * 1rem;
27
- $rem_values: append($rem_values, $rem_value);
28
- }
29
-
30
- #{$property}: $pixel_values;
31
- #{$property}: $rem_values;
32
- }
33
-