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

Sign up to get free protection for your applications and to get access to all the features.
@@ -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
-