bourbon-compass 3.2.3 → 4.0.0

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