bourbon-compass 3.2.3 → 4.0.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.
Files changed (28) hide show
  1. data/stylesheets/bourbon/_bourbon-deprecated-upcoming.scss +3 -8
  2. data/stylesheets/bourbon/_bourbon.scss +8 -5
  3. data/stylesheets/bourbon/addons/_html5-input-types.scss +15 -39
  4. data/stylesheets/bourbon/addons/_position.scss +5 -5
  5. data/stylesheets/bourbon/addons/_prefixer.scss +5 -5
  6. data/stylesheets/bourbon/addons/_retina-image.scss +1 -1
  7. data/stylesheets/bourbon/addons/_size.scss +9 -37
  8. data/stylesheets/bourbon/addons/_timing-functions.scss +1 -1
  9. data/stylesheets/bourbon/addons/_triangle.scss +1 -4
  10. data/stylesheets/bourbon/css3/_background-image.scss +29 -35
  11. data/stylesheets/bourbon/css3/_background.scss +37 -85
  12. data/stylesheets/bourbon/css3/_border-image.scss +45 -42
  13. data/stylesheets/bourbon/css3/_font-face.scss +1 -1
  14. data/stylesheets/bourbon/css3/_keyframes.scss +7 -7
  15. data/stylesheets/bourbon/functions/_assign.scss +11 -0
  16. data/stylesheets/bourbon/helpers/_convert-units.scss +15 -0
  17. data/stylesheets/bourbon/helpers/_is-num.scss +8 -0
  18. data/stylesheets/bourbon/helpers/_linear-angle-parser.scss +25 -0
  19. data/stylesheets/bourbon/helpers/_linear-gradient-parser.scss +41 -0
  20. data/stylesheets/bourbon/helpers/_linear-side-corner-parser.scss +31 -0
  21. data/stylesheets/bourbon/helpers/_radial-gradient-parser.scss +50 -0
  22. data/stylesheets/bourbon/helpers/_str-to-num.scss +50 -0
  23. metadata +29 -19
  24. checksums.yaml +0 -7
  25. data/stylesheets/bourbon/css3/_inline-block.scss +0 -8
  26. data/stylesheets/bourbon/functions/_linear-gradient.scss +0 -13
  27. data/stylesheets/bourbon/functions/_radial-gradient.scss +0 -23
  28. data/stylesheets/bourbon/settings/_asset-pipeline.scss +0 -1
@@ -2,12 +2,7 @@
2
2
  // These mixins/functions are deprecated
3
3
  // They will be removed in the next MAJOR version release
4
4
  //************************************************************************//
5
- @mixin box-shadow ($shadows...) {
6
- @include prefixer(box-shadow, $shadows, spec);
7
- @warn "box-shadow is deprecated and will be removed in the next major version release";
8
- }
9
-
10
- @mixin background-size ($lengths...) {
11
- @include prefixer(background-size, $lengths, spec);
12
- @warn "background-size is deprecated and will be removed in the next major version release";
5
+ @mixin inline-block {
6
+ display: inline-block;
7
+ @warn "inline-block mixin is deprecated and will be removed in the next major version release";
13
8
  }
@@ -1,26 +1,31 @@
1
1
  // Settings
2
2
  @import "settings/prefixer";
3
3
  @import "settings/px-to-em";
4
- @import "settings/asset-pipeline";
5
4
 
6
5
  // Custom Helpers
6
+ @import "helpers/convert-units";
7
7
  @import "helpers/gradient-positions-parser";
8
+ @import "helpers/is-num";
9
+ @import "helpers/linear-angle-parser";
10
+ @import "helpers/linear-gradient-parser";
8
11
  @import "helpers/linear-positions-parser";
12
+ @import "helpers/linear-side-corner-parser";
9
13
  @import "helpers/radial-arg-parser";
10
14
  @import "helpers/radial-positions-parser";
15
+ @import "helpers/radial-gradient-parser";
11
16
  @import "helpers/render-gradients";
12
17
  @import "helpers/shape-size-stripper";
18
+ @import "helpers/str-to-num";
13
19
 
14
20
  // Custom Functions
21
+ @import "functions/assign";
15
22
  @import "functions/color-lightness";
16
23
  @import "functions/flex-grid";
17
24
  @import "functions/golden-ratio";
18
25
  @import "functions/grid-width";
19
- @import "functions/linear-gradient";
20
26
  @import "functions/modular-scale";
21
27
  @import "functions/px-to-em";
22
28
  @import "functions/px-to-rem";
23
- @import "functions/radial-gradient";
24
29
  @import "functions/strip-units";
25
30
  @import "functions/tint-shade";
26
31
  @import "functions/transition-property-name";
@@ -40,11 +45,9 @@
40
45
  @import "css3/filter";
41
46
  @import "css3/flex-box";
42
47
  @import "css3/font-face";
43
- @import "css3/font-feature-settings";
44
48
  @import "css3/hyphens";
45
49
  @import "css3/hidpi-media-query";
46
50
  @import "css3/image-rendering";
47
- @import "css3/inline-block";
48
51
  @import "css3/keyframes";
49
52
  @import "css3/linear-gradient";
50
53
  @import "css3/perspective";
@@ -20,29 +20,19 @@ $inputs-list: 'input[type="email"]',
20
20
  'input[type="time"]',
21
21
  'input[type="week"]';
22
22
 
23
- $unquoted-inputs-list: ();
24
- @each $input-type in $inputs-list {
25
- $unquoted-inputs-list: append($unquoted-inputs-list, unquote($input-type), comma);
26
- }
27
-
28
- $all-text-inputs: $unquoted-inputs-list;
29
-
23
+ // Bare inputs
24
+ //************************************************************************//
25
+ $all-text-inputs: assign-inputs($inputs-list);
30
26
 
31
27
  // Hover Pseudo-class
32
28
  //************************************************************************//
33
- $all-text-inputs-hover: ();
34
- @each $input-type in $unquoted-inputs-list {
35
- $input-type-hover: $input-type + ":hover";
36
- $all-text-inputs-hover: append($all-text-inputs-hover, $input-type-hover, comma);
37
- }
29
+ $all-text-inputs-hover: assign-inputs($inputs-list, hover);
38
30
 
39
31
  // Focus Pseudo-class
40
32
  //************************************************************************//
41
- $all-text-inputs-focus: ();
42
- @each $input-type in $unquoted-inputs-list {
43
- $input-type-focus: $input-type + ":focus";
44
- $all-text-inputs-focus: append($all-text-inputs-focus, $input-type-focus, comma);
45
- }
33
+ $all-text-inputs-focus: assign-inputs($inputs-list, focus);
34
+
35
+
46
36
 
47
37
  // You must use interpolation on the variable:
48
38
  // #{$all-text-inputs}
@@ -65,37 +55,23 @@ $inputs-button-list: 'input[type="button"]',
65
55
  'input[type="reset"]',
66
56
  'input[type="submit"]';
67
57
 
68
- $unquoted-inputs-button-list: ();
69
- @each $input-type in $inputs-button-list {
70
- $unquoted-inputs-button-list: append($unquoted-inputs-button-list, unquote($input-type), comma);
71
- }
72
-
73
- $all-button-inputs: $unquoted-inputs-button-list;
74
-
58
+ // Bare inputs
59
+ //************************************************************************//
60
+ $all-button-inputs: assign-inputs($inputs-button-list);
75
61
 
76
62
  // Hover Pseudo-class
77
63
  //************************************************************************//
78
- $all-button-inputs-hover: ();
79
- @each $input-type in $unquoted-inputs-button-list {
80
- $input-type-hover: $input-type + ":hover";
81
- $all-button-inputs-hover: append($all-button-inputs-hover, $input-type-hover, comma);
82
- }
64
+ $all-button-inputs-hover: assign-inputs($inputs-button-list, hover);
83
65
 
84
66
  // Focus Pseudo-class
85
67
  //************************************************************************//
86
- $all-button-inputs-focus: ();
87
- @each $input-type in $unquoted-inputs-button-list {
88
- $input-type-focus: $input-type + ":focus";
89
- $all-button-inputs-focus: append($all-button-inputs-focus, $input-type-focus, comma);
90
- }
68
+ $all-button-inputs-focus: assign-inputs($inputs-button-list, focus);
91
69
 
92
70
  // Active Pseudo-class
93
71
  //************************************************************************//
94
- $all-button-inputs-active: ();
95
- @each $input-type in $unquoted-inputs-button-list {
96
- $input-type-active: $input-type + ":active";
97
- $all-button-inputs-active: append($all-button-inputs-active, $input-type-active, comma);
98
- }
72
+ $all-button-inputs-active: assign-inputs($inputs-button-list, active);
73
+
74
+
99
75
 
100
76
  // You must use interpolation on the variable:
101
77
  // #{$all-button-inputs}
@@ -1,4 +1,4 @@
1
- @mixin position ($position: relative, $coordinates: 0 0 0 0) {
1
+ @mixin position ($position: relative, $coordinates: null null null null) {
2
2
 
3
3
  @if type-of($position) == list {
4
4
  $coordinates: $position;
@@ -14,19 +14,19 @@
14
14
 
15
15
  position: $position;
16
16
 
17
- @if ($top and $top == auto) or (type-of($top) == number and not unitless($top)) {
17
+ @if ($top and $top == auto) or (type-of($top) == number) {
18
18
  top: $top;
19
19
  }
20
20
 
21
- @if ($right and $right == auto) or (type-of($right) == number and not unitless($right)) {
21
+ @if ($right and $right == auto) or (type-of($right) == number) {
22
22
  right: $right;
23
23
  }
24
24
 
25
- @if ($bottom and $bottom == auto) or (type-of($bottom) == number and not unitless($bottom)) {
25
+ @if ($bottom and $bottom == auto) or (type-of($bottom) == number) {
26
26
  bottom: $bottom;
27
27
  }
28
28
 
29
- @if ($left and $left == auto) or (type-of($left) == number and not unitless($left)) {
29
+ @if ($left and $left == auto) or (type-of($left) == number) {
30
30
  left: $left;
31
31
  }
32
32
  }
@@ -37,9 +37,9 @@
37
37
  }
38
38
 
39
39
  @mixin disable-prefix-for-all() {
40
- $prefix-for-webkit: false;
41
- $prefix-for-mozilla: false;
42
- $prefix-for-microsoft: false;
43
- $prefix-for-opera: false;
44
- $prefix-for-spec: false;
40
+ $prefix-for-webkit: false !global;
41
+ $prefix-for-mozilla: false !global;
42
+ $prefix-for-microsoft: false !global;
43
+ $prefix-for-opera: false !global;
44
+ $prefix-for-spec: false !global;
45
45
  }
@@ -1,4 +1,4 @@
1
- @mixin retina-image($filename, $background-size, $extension: png, $retina-filename: null, $retina-suffix: _2x, $asset-pipeline: $asset-pipeline) {
1
+ @mixin retina-image($filename, $background-size, $extension: png, $retina-filename: null, $retina-suffix: _2x, $asset-pipeline: false) {
2
2
  @if $asset-pipeline {
3
3
  background-image: image-url("#{$filename}.#{$extension}");
4
4
  }
@@ -1,44 +1,16 @@
1
1
  @mixin size($size) {
2
- @if length($size) == 1 {
3
- @if $size == auto {
4
- width: $size;
5
- height: $size;
6
- }
2
+ $height: nth($size, 1);
3
+ $width: $height;
7
4
 
8
- @else if unitless($size) {
9
- width: $size + px;
10
- height: $size + px;
11
- }
12
-
13
- @else if not(unitless($size)) {
14
- width: $size;
15
- height: $size;
16
- }
17
- }
18
-
19
- // Width x Height
20
- @if length($size) == 2 {
21
- $width: nth($size, 1);
5
+ @if length($size) > 1 {
22
6
  $height: nth($size, 2);
7
+ }
23
8
 
24
- @if $width == auto {
25
- width: $width;
26
- }
27
- @else if not(unitless($width)) {
28
- width: $width;
29
- }
30
- @else if unitless($width) {
31
- width: $width + px;
32
- }
9
+ @if $height == auto or (type-of($height) == number and not unitless($height)) {
10
+ height: $height;
11
+ }
33
12
 
34
- @if $height == auto {
35
- height: $height;
36
- }
37
- @else if not(unitless($height)) {
38
- height: $height;
39
- }
40
- @else if unitless($height) {
41
- height: $height + px;
42
- }
13
+ @if $width == auto or (type-of($height) == number and not unitless($width)) {
14
+ width: $width;
43
15
  }
44
16
  }
@@ -1,5 +1,5 @@
1
1
  // CSS cubic-bezier timing functions. Timing functions courtesy of jquery.easie (github.com/jaukia/easie)
2
- // Timing functions are the same as demo'ed here: http://jqueryui.com/resources/demos/effect/easing.html
2
+ // Timing functions are the same as demo'ed here: http://jqueryui.com/demos/effect/easing.html
3
3
 
4
4
  // EASE IN
5
5
  $ease-in-quad: cubic-bezier(0.550, 0.085, 0.680, 0.530);
@@ -6,10 +6,7 @@
6
6
  $height: nth($size, length($size));
7
7
 
8
8
  $foreground-color: nth($color, 1);
9
- $background-color: transparent !default;
10
- @if (length($color) == 2) {
11
- $background-color: nth($color, 2);
12
- }
9
+ $background-color: if(length($color) == 2, nth($color, 2), transparent);
13
10
 
14
11
  @if ($direction == up) or ($direction == down) or ($direction == right) or ($direction == left) {
15
12
 
@@ -4,45 +4,39 @@
4
4
  //************************************************************************//
5
5
 
6
6
  @mixin background-image($images...) {
7
- background-image: _add-prefix($images, webkit);
8
- background-image: _add-prefix($images);
9
- }
7
+ $webkit-images: ();
8
+ $spec-images: ();
9
+
10
+ @each $image in $images {
11
+ $webkit-image: ();
12
+ $spec-image: ();
13
+
14
+ @if (type-of($image) == string) {
15
+ $url-str: str-slice($image, 0, 3);
16
+ $gradient-type: str-slice($image, 0, 6);
10
17
 
11
- @function _add-prefix($images, $vendor: false) {
12
- $images-prefixed: ();
13
- $gradient-positions: false;
14
- @for $i from 1 through length($images) {
15
- $type: type-of(nth($images, $i)); // Get type of variable - List or String
16
-
17
- // If variable is a list - Gradient
18
- @if $type == list {
19
- $gradient-type: nth(nth($images, $i), 1); // linear or radial
20
- $gradient-pos: null;
21
- $gradient-args: null;
22
-
23
- @if ($gradient-type == linear) or ($gradient-type == radial) {
24
- $gradient-pos: nth(nth($images, $i), 2); // Get gradient position
25
- $gradient-args: nth(nth($images, $i), 3); // Get actual gradient (red, blue)
18
+ @if $url-str == "url" {
19
+ $webkit-image: $image;
20
+ $spec-image: $image;
26
21
  }
27
- @else {
28
- $gradient-args: nth(nth($images, $i), 2); // Get actual gradient (red, blue)
22
+
23
+ @else if $gradient-type == "linear" {
24
+ $gradients: _linear-gradient-parser($image);
25
+ $webkit-image: map-get($gradients, webkit-image);
26
+ $spec-image: map-get($gradients, spec-image);
29
27
  }
30
28
 
31
- $gradient-positions: _gradient-positions-parser($gradient-type, $gradient-pos);
32
- $gradient: _render-gradients($gradient-positions, $gradient-args, $gradient-type, $vendor);
33
- $images-prefixed: append($images-prefixed, $gradient, comma);
34
- }
35
- // If variable is a string - Image
36
- @else if $type == string {
37
- $images-prefixed: join($images-prefixed, nth($images, $i), comma);
29
+ @else if $gradient-type == "radial" {
30
+ $gradients: _radial-gradient-parser($image);
31
+ $webkit-image: map-get($gradients, webkit-image);
32
+ $spec-image: map-get($gradients, spec-image);
33
+ }
38
34
  }
35
+
36
+ $webkit-images: append($webkit-images, $webkit-image, comma);
37
+ $spec-images: append($spec-images, $spec-image, comma);
39
38
  }
40
- @return $images-prefixed;
41
- }
42
39
 
43
- //Examples:
44
- //@include background-image(linear-gradient(top, orange, red));
45
- //@include background-image(radial-gradient(50% 50%, cover circle, orange, red));
46
- //@include background-image(url("/images/a.png"), linear-gradient(orange, red));
47
- //@include background-image(url("image.png"), linear-gradient(orange, red), url("image.png"));
48
- //@include background-image(linear-gradient(hsla(0, 100%, 100%, 0.25) 0%, hsla(0, 100%, 100%, 0.08) 50%, transparent 50%), linear-gradient(orange, red));
40
+ background-image: $webkit-images;
41
+ background-image: $spec-images;
42
+ }
@@ -3,101 +3,53 @@
3
3
  // notation.
4
4
  //************************************************************************//
5
5
 
6
- @mixin background(
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
- ) {
14
- $backgrounds: $background-1, $background-2,
15
- $background-3, $background-4,
16
- $background-5, $background-6,
17
- $background-7, $background-8,
18
- $background-9, $background-10;
6
+ @mixin background($backgrounds...) {
7
+ $webkit-backgrounds: ();
8
+ $spec-backgrounds: ();
19
9
 
20
- $fallback-color: false;
21
- @if (type-of($fallback) == color) or ($fallback == "transparent") {
22
- $fallback-color: $fallback;
23
- }
24
- @else {
25
- $fallback-color: _extract-background-color($backgrounds);
26
- }
27
-
28
- @if $fallback-color {
29
- background-color: $fallback-color;
30
- }
31
- background: _background-add-prefix($backgrounds, webkit);
32
- background: _background-add-prefix($backgrounds);
33
- }
34
-
35
- @function _extract-background-color($backgrounds) {
36
- $final-bg-layer: nth($backgrounds, length($backgrounds));
37
- @if type-of($final-bg-layer) == list {
38
- @for $i from 1 through length($final-bg-layer) {
39
- $value: nth($final-bg-layer, $i);
40
- @if type-of($value) == color {
41
- @return $value;
42
- }
43
- }
44
- }
45
- @return false;
46
- }
47
-
48
- @function _background-add-prefix($backgrounds, $vendor: false) {
49
- $backgrounds-prefixed: ();
10
+ @each $background in $backgrounds {
11
+ $webkit-background: ();
12
+ $spec-background: ();
13
+ $background-type: type-of($background);
50
14
 
51
- @for $i from 1 through length($backgrounds) {
52
- $shorthand: nth($backgrounds, $i); // Get member for current index
53
- $type: type-of($shorthand); // Get type of variable - List (gradient) or String (image)
15
+ @if $background-type == string or list {
16
+ $background-str: if($background-type == list, nth($background, 1), $background);
54
17
 
55
- // If shorthand is a list (gradient)
56
- @if $type == list {
57
- $first-member: nth($shorthand, 1); // Get first member of shorthand
18
+ $url-str: str-slice($background-str, 0, 3);
19
+ $gradient-type: str-slice($background-str, 0, 6);
58
20
 
59
- // Linear Gradient
60
- @if index(linear radial, nth($first-member, 1)) {
61
- $gradient-type: nth($first-member, 1); // linear || radial
62
- $gradient-args: false;
63
- $gradient-positions: false;
64
- $shorthand-start: false;
65
- @if type-of($first-member) == list { // Linear gradient plus additional shorthand values - lg(red,orange)repeat,...
66
- $gradient-positions: nth($first-member, 2);
67
- $gradient-args: nth($first-member, 3);
68
- $shorthand-start: 2;
69
- }
70
- @else { // Linear gradient only - lg(red,orange),...
71
- $gradient-positions: nth($shorthand, 2);
72
- $gradient-args: nth($shorthand, 3); // Get gradient (red, blue)
73
- }
21
+ @if $url-str == "url" {
22
+ $webkit-background: $background;
23
+ $spec-background: $background;
24
+ }
74
25
 
75
- $gradient-positions: _gradient-positions-parser($gradient-type, $gradient-positions);
76
- $gradient: _render-gradients($gradient-positions, $gradient-args, $gradient-type, $vendor);
26
+ @else if $gradient-type == "linear" {
27
+ $gradients: _linear-gradient-parser("#{$background}");
28
+ $webkit-background: map-get($gradients, webkit-image);
29
+ $spec-background: map-get($gradients, spec-image);
30
+ }
77
31
 
78
- // Append any additional shorthand args to gradient
79
- @if $shorthand-start {
80
- @for $j from $shorthand-start through length($shorthand) {
81
- $gradient: join($gradient, nth($shorthand, $j), space);
82
- }
83
- }
84
- $backgrounds-prefixed: append($backgrounds-prefixed, $gradient, comma);
32
+ @else if $gradient-type == "radial" {
33
+ $gradients: _radial-gradient-parser("#{$background}");
34
+ $webkit-background: map-get($gradients, webkit-image);
35
+ $spec-background: map-get($gradients, spec-image);
85
36
  }
86
- // Image with additional properties
37
+
87
38
  @else {
88
- $backgrounds-prefixed: append($backgrounds-prefixed, $shorthand, comma);
39
+ $webkit-background: $background;
40
+ $spec-background: $background;
89
41
  }
90
42
  }
91
- // If shorthand is a simple string (color or image)
92
- @else if $type == string {
93
- $backgrounds-prefixed: join($backgrounds-prefixed, $shorthand, comma);
43
+
44
+ @else {
45
+ $webkit-background: $background;
46
+ $spec-background: $background;
94
47
  }
48
+
49
+ $webkit-backgrounds: append($webkit-backgrounds, $webkit-background, comma);
50
+ $spec-backgrounds: append($spec-backgrounds, $spec-background, comma);
95
51
  }
96
- @return $backgrounds-prefixed;
97
- }
98
52
 
99
- //Examples:
100
- //@include background(linear-gradient(top, orange, red));
101
- //@include background(radial-gradient(circle at 40% 40%, orange, red));
102
- //@include background(url("/images/a.png") no-repeat, linear-gradient(orange, red));
103
- //@include background(url("image.png") center center, linear-gradient(orange, red), url("image.png"));
53
+ background: $webkit-backgrounds;
54
+ background: $spec-backgrounds;
55
+ }
@@ -1,49 +1,53 @@
1
- @mixin border-image($images) {
2
- -webkit-border-image: _border-add-prefix($images, webkit);
3
- -moz-border-image: _border-add-prefix($images, moz);
4
- -o-border-image: _border-add-prefix($images, o);
5
- border-image: _border-add-prefix($images);
6
- border-style: solid;
7
- }
1
+ @mixin border-image($borders...) {
2
+ $webkit-borders: ();
3
+ $spec-borders: ();
4
+
5
+ @each $border in $borders {
6
+ $webkit-border: ();
7
+ $spec-border: ();
8
+ $border-type: type-of($border);
9
+
10
+ @if $border-type == string or list {
11
+ $border-str: if($border-type == list, nth($border, 1), $border);
12
+
13
+ $url-str: str-slice($border-str, 0, 3);
14
+ $gradient-type: str-slice($border-str, 0, 6);
15
+
16
+ @if $url-str == "url" {
17
+ $webkit-border: $border;
18
+ $spec-border: $border;
19
+ }
20
+
21
+ @else if $gradient-type == "linear" {
22
+ $gradients: _linear-gradient-parser("#{$border}");
23
+ $webkit-border: map-get($gradients, webkit-image);
24
+ $spec-border: map-get($gradients, spec-image);
25
+ }
26
+
27
+ @else if $gradient-type == "radial" {
28
+ $gradients: _radial-gradient-parser("#{$border}");
29
+ $webkit-border: map-get($gradients, webkit-image);
30
+ $spec-border: map-get($gradients, spec-image);
31
+ }
8
32
 
9
- @function _border-add-prefix($images, $vendor: false) {
10
- $border-image: null;
11
- $images-type: type-of(nth($images, 1));
12
- $first-var: nth(nth($images, 1), 1); // Get type of Gradient (Linear || radial)
13
-
14
- // If input is a gradient
15
- @if $images-type == string {
16
- @if ($first-var == "linear") or ($first-var == "radial") {
17
- $gradient-type: nth($images, 1); // Get type of gradient (linear || radial)
18
- $gradient-pos: nth($images, 2); // Get gradient position
19
- $gradient-args: nth($images, 3); // Get actual gradient (red, blue)
20
- $gradient-positions: _gradient-positions-parser($gradient-type, $gradient-pos);
21
- $border-image: _render-gradients($gradient-positions, $gradient-args, $gradient-type, $vendor);
33
+ @else {
34
+ $webkit-border: $border;
35
+ $spec-border: $border;
36
+ }
22
37
  }
23
- // If input is a URL
38
+
24
39
  @else {
25
- $border-image: $images;
26
- }
27
- }
28
- // If input is gradient or url + additional args
29
- @else if $images-type == list {
30
- $type: type-of(nth($images, 1)); // Get type of variable - List or String
31
-
32
- // If variable is a list - Gradient
33
- @if $type == list {
34
- $gradient: nth($images, 1);
35
- $gradient-type: nth($gradient, 1); // Get type of gradient (linear || radial)
36
- $gradient-pos: nth($gradient, 2); // Get gradient position
37
- $gradient-args: nth($gradient, 3); // Get actual gradient (red, blue)
38
- $gradient-positions: _gradient-positions-parser($gradient-type, $gradient-pos);
39
- $border-image: _render-gradients($gradient-positions, $gradient-args, $gradient-type, $vendor);
40
-
41
- @for $i from 2 through length($images) {
42
- $border-image: append($border-image, nth($images, $i));
43
- }
40
+ $webkit-border: $border;
41
+ $spec-border: $border;
44
42
  }
43
+
44
+ $webkit-borders: append($webkit-borders, $webkit-border, comma);
45
+ $spec-borders: append($spec-borders, $spec-border, comma);
45
46
  }
46
- @return $border-image;
47
+
48
+ -webkit-border-image: $webkit-borders;
49
+ border-image: $spec-borders;
50
+ border-style: solid;
47
51
  }
48
52
 
49
53
  //Examples:
@@ -53,4 +57,3 @@
53
57
  // @include border-image(linear-gradient(45deg, orange, yellow) stretch);
54
58
  // @include border-image(linear-gradient(45deg, orange, yellow) 20 30 40 50 stretch round);
55
59
  // @include border-image(radial-gradient(top, cover, orange, yellow, orange));
56
-
@@ -1,6 +1,6 @@
1
1
  // Order of the includes matters, and it is: normal, bold, italic, bold+italic.
2
2
 
3
- @mixin font-face($font-family, $file-path, $weight: normal, $style: normal, $asset-pipeline: $asset-pipeline) {
3
+ @mixin font-face($font-family, $file-path, $weight: normal, $style: normal, $asset-pipeline: false ) {
4
4
  @font-face {
5
5
  font-family: $font-family;
6
6
  font-weight: $weight;
@@ -8,24 +8,24 @@
8
8
 
9
9
  @if $original-prefix-for-webkit {
10
10
  @include disable-prefix-for-all();
11
- $prefix-for-webkit: true;
11
+ $prefix-for-webkit: true !global;
12
12
  @-webkit-keyframes #{$name} {
13
13
  @content;
14
14
  }
15
15
  }
16
16
  @if $original-prefix-for-mozilla {
17
17
  @include disable-prefix-for-all();
18
- $prefix-for-mozilla: true;
18
+ $prefix-for-mozilla: true !global;
19
19
  @-moz-keyframes #{$name} {
20
20
  @content;
21
21
  }
22
22
  }
23
23
 
24
- $prefix-for-webkit: $original-prefix-for-webkit;
25
- $prefix-for-mozilla: $original-prefix-for-mozilla;
26
- $prefix-for-microsoft: $original-prefix-for-microsoft;
27
- $prefix-for-opera: $original-prefix-for-opera;
28
- $prefix-for-spec: $original-prefix-for-spec;
24
+ $prefix-for-webkit: $original-prefix-for-webkit !global;
25
+ $prefix-for-mozilla: $original-prefix-for-mozilla !global;
26
+ $prefix-for-microsoft: $original-prefix-for-microsoft !global;
27
+ $prefix-for-opera: $original-prefix-for-opera !global;
28
+ $prefix-for-spec: $original-prefix-for-spec !global;
29
29
 
30
30
  @if $original-prefix-for-spec {
31
31
  @keyframes #{$name} {
@@ -0,0 +1,11 @@
1
+ @function assign-inputs($inputs, $pseudo: null) {
2
+ $list : ();
3
+
4
+ @each $input in $inputs {
5
+ $input: unquote($input);
6
+ $input: if($pseudo, $input + ":" + $pseudo, $input);
7
+ $list: append($list, $input, comma);
8
+ }
9
+
10
+ @return $list;
11
+ }
@@ -0,0 +1,15 @@
1
+ //************************************************************************//
2
+ // Helper function for str-to-num fn.
3
+ // Source: http://sassmeister.com/gist/9647408
4
+ //************************************************************************//
5
+ @function _convert-units($number, $unit) {
6
+ $strings: 'px' 'cm' 'mm' '%' 'ch' 'pica' 'in' 'em' 'rem' 'pt' 'pc' 'ex' 'vw' 'vh' 'vmin' 'vmax', 'deg', 'rad', 'grad', 'turn';
7
+ $units: 1px 1cm 1mm 1% 1ch 1pica 1in 1em 1rem 1pt 1pc 1ex 1vw 1vh 1vmin 1vmax, 1deg, 1rad, 1grad, 1turn;
8
+ $index: index($strings, $unit);
9
+
10
+ @if not $index {
11
+ @warn "Unknown unit `#{$unit}`.";
12
+ @return false;
13
+ }
14
+ @return $number * nth($units, $index);
15
+ }
@@ -0,0 +1,8 @@
1
+ //************************************************************************//
2
+ // Helper for linear-gradient-parser
3
+ //************************************************************************//
4
+ @function _is-num($char) {
5
+ $values: '0' '1' '2' '3' '4' '5' '6' '7' '8' '9' 0 1 2 3 4 5 6 7 8 9;
6
+ $index: index($values, $char);
7
+ @return if($index, true, false);
8
+ }
@@ -0,0 +1,25 @@
1
+ // Private function for linear-gradient-parser
2
+ @function _linear-angle-parser($image, $first-val, $prefix, $suffix) {
3
+ $offset: null;
4
+ $unit-short: str-slice($first-val, str-length($first-val) - 2, str-length($first-val));
5
+ $unit-long: str-slice($first-val, str-length($first-val) - 3, str-length($first-val));
6
+
7
+ @if ($unit-long == "grad") or
8
+ ($unit-long == "turn") {
9
+ $offset: if($unit-long == "grad", -100grad * 3, -0.75turn);
10
+ }
11
+
12
+ @else if ($unit-short == "deg") or
13
+ ($unit-short == "rad") {
14
+ $offset: if($unit-short == "deg", -90 * 3, 1.6rad);
15
+ }
16
+
17
+ @if $offset {
18
+ $num: _str-to-num($first-val);
19
+
20
+ @return (
21
+ webkit-image: -webkit- + $prefix + ($offset - $num) + $suffix,
22
+ spec-image: $image
23
+ );
24
+ }
25
+ }
@@ -0,0 +1,41 @@
1
+ @function _linear-gradient-parser($image) {
2
+ $image: unquote($image);
3
+ $gradients: ();
4
+ $start: str-index($image, "(");
5
+ $end: str-index($image, ",");
6
+ $first-val: str-slice($image, $start + 1, $end - 1);
7
+
8
+ $prefix: str-slice($image, 0, $start);
9
+ $suffix: str-slice($image, $end, str-length($image));
10
+
11
+ $has-multiple-vals: str-index($first-val, " ");
12
+ $has-single-position: unquote(_position-flipper($first-val) + "");
13
+ $has-angle: _is-num(str-slice($first-val, 0, 0));
14
+
15
+ @if $has-multiple-vals {
16
+ $gradients: _linear-side-corner-parser($image, $first-val, $prefix, $suffix, $has-multiple-vals);
17
+ }
18
+
19
+ @else if $has-single-position != "" {
20
+ $pos: unquote($has-single-position + "");
21
+
22
+ $gradients: (
23
+ webkit-image: -webkit- + $image,
24
+ spec-image: $prefix + "to " + $pos + $suffix
25
+ );
26
+ }
27
+
28
+ @else if $has-angle {
29
+ // Rotate degree for webkit
30
+ $gradients: _linear-angle-parser($image, $first-val, $prefix, $suffix);
31
+ }
32
+
33
+ @else {
34
+ $gradients: (
35
+ webkit-image: -webkit- + $image,
36
+ spec-image: $image
37
+ );
38
+ }
39
+
40
+ @return $gradients;
41
+ }
@@ -0,0 +1,31 @@
1
+ // Private function for linear-gradient-parser
2
+ @function _linear-side-corner-parser($image, $first-val, $prefix, $suffix, $has-multiple-vals) {
3
+ $val-1: str-slice($first-val, 0, $has-multiple-vals - 1 );
4
+ $val-2: str-slice($first-val, $has-multiple-vals + 1, str-length($first-val));
5
+ $val-3: null;
6
+ $has-val-3: str-index($val-2, " ");
7
+
8
+ @if $has-val-3 {
9
+ $val-3: str-slice($val-2, $has-val-3 + 1, str-length($val-2));
10
+ $val-2: str-slice($val-2, 0, $has-val-3 - 1);
11
+ }
12
+
13
+ $pos: _position-flipper($val-1) _position-flipper($val-2) _position-flipper($val-3);
14
+ $pos: unquote($pos + "");
15
+
16
+ // Use old spec for webkit
17
+ @if $val-1 == "to" {
18
+ @return (
19
+ webkit-image: -webkit- + $prefix + $pos + $suffix,
20
+ spec-image: $image
21
+ );
22
+ }
23
+
24
+ // Bring the code up to spec
25
+ @else {
26
+ @return (
27
+ webkit-image: -webkit- + $image,
28
+ spec-image: $prefix + "to " + $pos + $suffix
29
+ );
30
+ }
31
+ }
@@ -0,0 +1,50 @@
1
+ @function _radial-gradient-parser($image) {
2
+ $image: unquote($image);
3
+ $gradients: ();
4
+ $start: str-index($image, "(");
5
+ $end: str-index($image, ",");
6
+ $first-val: str-slice($image, $start + 1, $end - 1);
7
+
8
+ $prefix: str-slice($image, 0, $start);
9
+ $suffix: str-slice($image, $end, str-length($image));
10
+
11
+ $is-spec-syntax: str-index($first-val, "at");
12
+
13
+ @if $is-spec-syntax and $is-spec-syntax > 1 {
14
+ $keyword: str-slice($first-val, 1, $is-spec-syntax - 2);
15
+ $pos: str-slice($first-val, $is-spec-syntax + 3, str-length($first-val));
16
+ $pos: append($pos, $keyword, comma);
17
+
18
+ $gradients: (
19
+ webkit-image: -webkit- + $prefix + $pos + $suffix,
20
+ spec-image: $image
21
+ )
22
+ }
23
+
24
+ @else if $is-spec-syntax == 1 {
25
+ $pos: str-slice($first-val, $is-spec-syntax + 3, str-length($first-val));
26
+
27
+ $gradients: (
28
+ webkit-image: -webkit- + $prefix + $pos + $suffix,
29
+ spec-image: $image
30
+ )
31
+ }
32
+
33
+ @else if str-index($image, "cover") or str-index($image, "contain") {
34
+ @warn "Radial-gradient needs to be updated to conform to latest spec.";
35
+
36
+ $gradients: (
37
+ webkit-image: null,
38
+ spec-image: $image
39
+ )
40
+ }
41
+
42
+ @else {
43
+ $gradients: (
44
+ webkit-image: -webkit- + $image,
45
+ spec-image: $image
46
+ )
47
+ }
48
+
49
+ @return $gradients;
50
+ }
@@ -0,0 +1,50 @@
1
+ //************************************************************************//
2
+ // Helper function for linear/radial-gradient-parsers.
3
+ // Source: http://sassmeister.com/gist/9647408
4
+ //************************************************************************//
5
+ @function _str-to-num($string) {
6
+ // Matrices
7
+ $strings: '0' '1' '2' '3' '4' '5' '6' '7' '8' '9';
8
+ $numbers: 0 1 2 3 4 5 6 7 8 9;
9
+
10
+ // Result
11
+ $result: 0;
12
+ $divider: 0;
13
+ $minus: false;
14
+
15
+ // Looping through all characters
16
+ @for $i from 1 through str-length($string) {
17
+ $character: str-slice($string, $i, $i);
18
+ $index: index($strings, $character);
19
+
20
+ @if $character == '-' {
21
+ $minus: true;
22
+ }
23
+
24
+ @else if $character == '.' {
25
+ $divider: 1;
26
+ }
27
+
28
+ @else {
29
+ @if not $index {
30
+ $result: if($minus, $result * -1, $result);
31
+ @return _convert-units($result, str-slice($string, $i));
32
+ }
33
+
34
+ $number: nth($numbers, $index);
35
+
36
+ @if $divider == 0 {
37
+ $result: $result * 10;
38
+ }
39
+
40
+ @else {
41
+ // Move the decimal dot to the left
42
+ $divider: $divider * 10;
43
+ $number: $number / $divider;
44
+ }
45
+
46
+ $result: $result + $number;
47
+ }
48
+ }
49
+ @return if($minus, $result * -1, $result);
50
+ }
metadata CHANGED
@@ -1,43 +1,48 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: bourbon-compass
3
3
  version: !ruby/object:Gem::Version
4
- version: 3.2.3
4
+ version: 4.0.0
5
+ prerelease:
5
6
  platform: ruby
6
7
  authors:
7
8
  - Jed Foster
8
9
  autorequire:
9
10
  bindir: bin
10
11
  cert_chain: []
11
- date: 2014-05-21 00:00:00.000000000 Z
12
+ date: 2014-04-19 00:00:00.000000000 Z
12
13
  dependencies:
13
14
  - !ruby/object:Gem::Dependency
14
15
  name: compass
15
16
  requirement: !ruby/object:Gem::Requirement
17
+ none: false
16
18
  requirements:
17
- - - "~>"
19
+ - - ! '>='
18
20
  - !ruby/object:Gem::Version
19
- version: 0.12.6
21
+ version: 0.13.alpha.10
20
22
  type: :runtime
21
23
  prerelease: false
22
24
  version_requirements: !ruby/object:Gem::Requirement
25
+ none: false
23
26
  requirements:
24
- - - "~>"
27
+ - - ! '>='
25
28
  - !ruby/object:Gem::Version
26
- version: 0.12.6
29
+ version: 0.13.alpha.10
27
30
  - !ruby/object:Gem::Dependency
28
31
  name: sass
29
32
  requirement: !ruby/object:Gem::Requirement
33
+ none: false
30
34
  requirements:
31
- - - "~>"
35
+ - - ! '>='
32
36
  - !ruby/object:Gem::Version
33
- version: '3.2'
37
+ version: '3.3'
34
38
  type: :runtime
35
39
  prerelease: false
36
40
  version_requirements: !ruby/object:Gem::Requirement
41
+ none: false
37
42
  requirements:
38
- - - "~>"
43
+ - - ! '>='
39
44
  - !ruby/object:Gem::Version
40
- version: '3.2'
45
+ version: '3.3'
41
46
  description: thoughtbot's Bourbon packaged as a Compass extension.
42
47
  email: jed@jedfoster.com
43
48
  executables: []
@@ -78,7 +83,6 @@ files:
78
83
  - stylesheets/bourbon/css3/_hidpi-media-query.scss
79
84
  - stylesheets/bourbon/css3/_hyphens.scss
80
85
  - stylesheets/bourbon/css3/_image-rendering.scss
81
- - stylesheets/bourbon/css3/_inline-block.scss
82
86
  - stylesheets/bourbon/css3/_keyframes.scss
83
87
  - stylesheets/bourbon/css3/_linear-gradient.scss
84
88
  - stylesheets/bourbon/css3/_perspective.scss
@@ -87,49 +91,55 @@ files:
87
91
  - stylesheets/bourbon/css3/_transform.scss
88
92
  - stylesheets/bourbon/css3/_transition.scss
89
93
  - stylesheets/bourbon/css3/_user-select.scss
94
+ - stylesheets/bourbon/functions/_assign.scss
90
95
  - stylesheets/bourbon/functions/_color-lightness.scss
91
96
  - stylesheets/bourbon/functions/_flex-grid.scss
92
97
  - stylesheets/bourbon/functions/_golden-ratio.scss
93
98
  - stylesheets/bourbon/functions/_grid-width.scss
94
- - stylesheets/bourbon/functions/_linear-gradient.scss
95
99
  - stylesheets/bourbon/functions/_modular-scale.scss
96
100
  - stylesheets/bourbon/functions/_px-to-em.scss
97
101
  - stylesheets/bourbon/functions/_px-to-rem.scss
98
- - stylesheets/bourbon/functions/_radial-gradient.scss
99
102
  - stylesheets/bourbon/functions/_strip-units.scss
100
103
  - stylesheets/bourbon/functions/_tint-shade.scss
101
104
  - stylesheets/bourbon/functions/_transition-property-name.scss
102
105
  - stylesheets/bourbon/functions/_unpack.scss
106
+ - stylesheets/bourbon/helpers/_convert-units.scss
103
107
  - stylesheets/bourbon/helpers/_gradient-positions-parser.scss
108
+ - stylesheets/bourbon/helpers/_is-num.scss
109
+ - stylesheets/bourbon/helpers/_linear-angle-parser.scss
110
+ - stylesheets/bourbon/helpers/_linear-gradient-parser.scss
104
111
  - stylesheets/bourbon/helpers/_linear-positions-parser.scss
112
+ - stylesheets/bourbon/helpers/_linear-side-corner-parser.scss
105
113
  - stylesheets/bourbon/helpers/_radial-arg-parser.scss
114
+ - stylesheets/bourbon/helpers/_radial-gradient-parser.scss
106
115
  - stylesheets/bourbon/helpers/_radial-positions-parser.scss
107
116
  - stylesheets/bourbon/helpers/_render-gradients.scss
108
117
  - stylesheets/bourbon/helpers/_shape-size-stripper.scss
109
- - stylesheets/bourbon/settings/_asset-pipeline.scss
118
+ - stylesheets/bourbon/helpers/_str-to-num.scss
110
119
  - stylesheets/bourbon/settings/_prefixer.scss
111
120
  - stylesheets/bourbon/settings/_px-to-em.scss
112
121
  homepage: https://github.com/jedfoster/bourbon-compass
113
122
  licenses: []
114
- metadata: {}
115
123
  post_install_message:
116
124
  rdoc_options: []
117
125
  require_paths:
118
126
  - lib
119
127
  required_ruby_version: !ruby/object:Gem::Requirement
128
+ none: false
120
129
  requirements:
121
- - - ">="
130
+ - - ! '>='
122
131
  - !ruby/object:Gem::Version
123
132
  version: '0'
124
133
  required_rubygems_version: !ruby/object:Gem::Requirement
134
+ none: false
125
135
  requirements:
126
- - - ">="
136
+ - - ! '>='
127
137
  - !ruby/object:Gem::Version
128
138
  version: '0'
129
139
  requirements: []
130
140
  rubyforge_project:
131
- rubygems_version: 2.2.2
141
+ rubygems_version: 1.8.23
132
142
  signing_key:
133
- specification_version: 4
143
+ specification_version: 3
134
144
  summary: thoughtbot's Bourbon packaged as a Compass extension.
135
145
  test_files: []
checksums.yaml DELETED
@@ -1,7 +0,0 @@
1
- ---
2
- SHA1:
3
- metadata.gz: ae8e4a9d5b3d68e0531868a3bb2fd62fa0d7e0a6
4
- data.tar.gz: 7ddcbc65f5271318f7ec7a6026fa67eec61a946d
5
- SHA512:
6
- metadata.gz: 7b11590755ad13d0811188c3f0d7020f0abf5df780b3a1237d04514f4cd37bc1f6d888698773c52b4881ff6bd693b2223c87028125fdfc6a005ca01211acc118
7
- data.tar.gz: 9a5e21b4a3b85cd4a0c5e90253222cc3b543ca87cf388b483ea33668c3596ff737c76a97f239b87d291bc0c049be014cceb7f90581b6575f3222d6d6d1babb95
@@ -1,8 +0,0 @@
1
- // Legacy support for inline-block in IE7 (maybe IE6)
2
- @mixin inline-block {
3
- display: inline-block;
4
- vertical-align: baseline;
5
- zoom: 1;
6
- *display: inline;
7
- *vertical-align: auto;
8
- }
@@ -1,13 +0,0 @@
1
- @function linear-gradient($pos, $gradients...) {
2
- $type: linear;
3
- $pos-type: type-of(nth($pos, 1));
4
-
5
- // if $pos doesn't exist, fix $gradient
6
- @if ($pos-type == color) or (nth($pos, 1) == "transparent") {
7
- $gradients: zip($pos $gradients);
8
- $pos: false;
9
- }
10
-
11
- $type-gradient: $type, $pos, $gradients;
12
- @return $type-gradient;
13
- }
@@ -1,23 +0,0 @@
1
- // This function is required and used by the background-image mixin.
2
- @function radial-gradient($G1, $G2,
3
- $G3: null, $G4: null,
4
- $G5: null, $G6: null,
5
- $G7: null, $G8: null,
6
- $G9: null, $G10: null,
7
- $pos: null,
8
- $shape-size: null) {
9
-
10
- $data: _radial-arg-parser($G1, $G2, $pos, $shape-size);
11
- $G1: nth($data, 1);
12
- $G2: nth($data, 2);
13
- $pos: nth($data, 3);
14
- $shape-size: nth($data, 4);
15
-
16
- $type: radial;
17
- $gradient: $G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10;
18
-
19
- $type-gradient: $type, $shape-size $pos, $gradient;
20
- @return $type-gradient;
21
- }
22
-
23
-
@@ -1 +0,0 @@
1
- $asset-pipeline: false !default;