bourbon 0.2.1 → 1.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.
@@ -1,7 +1,6 @@
1
1
  // Custom Functions
2
2
  @import "functions/golden-ratio";
3
3
  @import "functions/grid-width";
4
- @import "functions/linear-gradient";
5
4
  @import "functions/tint-shade";
6
5
 
7
6
  // CSS3 Mixins
@@ -1,4 +1,9 @@
1
- // Background image property for support with adding multiple background images with a gradients.
1
+ //************************************************************************//
2
+ // Background-image property for adding multiple background images with
3
+ // gradients, or for stringing multiple gradients together.
4
+ //************************************************************************//
5
+ @import "../functions/linear-gradient";
6
+ @import "../functions/radial-gradient";
2
7
 
3
8
  @mixin background-image(
4
9
  $image-1 , $image-2: false,
@@ -13,88 +18,54 @@
13
18
  $image-7, $image-8,
14
19
  $image-9, $image-10);
15
20
 
16
- $assets: ();
17
- $gradients: ();
18
- $count: 0;
19
-
20
- //Find all asset images in list
21
- @for $i from 1 through length($images) {
22
- $type: type-of(nth($images, $i));
21
+ background-image: add-prefix($images, webkit);
22
+ background-image: add-prefix($images, moz);
23
+ background-image: add-prefix($images, ms);
24
+ background-image: add-prefix($images, o);
25
+ background-image: add-prefix($images);
26
+ }
23
27
 
24
- @if $type == list {
25
- $count: $count + 1;
26
- }
27
28
 
28
- @else if $type == string {
29
- $assets: join($assets, nth($images, $i), comma);
30
- }
31
- }
29
+ @function add-prefix($images, $vendor: false) {
30
+ $images-prefixed: ();
32
31
 
33
- // Find all gradients in list
34
32
  @for $i from 1 through length($images) {
35
- $type: type-of(nth($images, $i));
33
+ $type: type-of(nth($images, $i)); // Get type of variable - List or String
36
34
 
35
+ // If variable is a list - Gradient
37
36
  @if $type == list {
38
- $gradients: append($gradients, nth($images, $i), comma);
39
- }
40
- }
37
+ $gradient-type: nth(nth($images, $i), 1); // Get type of gradient (linear || radial)
38
+ $gradient-args: nth(nth($images, $i), 2); // Get actual gradient (red, blue)
41
39
 
42
-
43
- @if $assets {
44
- @if $count >= 1 {
45
- background-image: $assets, render-gradients($gradients, webkit);
46
- background-image: $assets, render-gradients($gradients, moz);
47
- background-image: $assets, render-gradients($gradients, ms);
48
- background-image: $assets, render-gradients($gradients, o);
49
- background-image: $assets, render-gradients($gradients);
50
- }
51
- @else {
52
- background-image: $assets;
40
+ $gradient: render-gradients($gradient-args, $gradient-type, $vendor);
41
+ $images-prefixed: append($images-prefixed, $gradient, comma);
53
42
  }
54
- }
55
- @else {
56
- @if $count >= 1 {
57
- background-image: render-gradients($gradients, webkit);
58
- background-image: render-gradients($gradients, moz);
59
- background-image: render-gradients($gradients, ms);
60
- background-image: render-gradients($gradients, o);
61
- background-image: render-gradients($gradients);
43
+
44
+ // If variable is a string - Image
45
+ @else if $type == string {
46
+ $images-prefixed: join($images-prefixed, nth($images, $i), comma);
62
47
  }
63
48
  }
49
+ @return $images-prefixed;
64
50
  }
65
51
 
66
- @function render-gradients($gradients, $vendor: false) {
67
- @if length($gradients) == 1 {
68
- $vendor-gradients: false;
69
- @if $vendor {
70
- $vendor-gradients: -#{$vendor}-linear-gradient($gradients);
71
- }
72
- @else if $vendor == false {
73
- $vendor-gradients: "linear-gradient(#{$gradients})";
74
- $vendor-gradients: unquote($vendor-gradients);
75
- }
76
- @return $vendor-gradients;
52
+
53
+ @function render-gradients($gradients, $gradient-type, $vendor: false) {
54
+ $vendor-gradients: false;
55
+ @if $vendor {
56
+ $vendor-gradients: -#{$vendor}-#{$gradient-type}-gradient($gradients);
77
57
  }
78
58
 
79
- @else if length($gradients) >= 2 {
80
- $vendor-gradients: ();
81
- @for $i from 1 through length($gradients) {
82
- @if $vendor {
83
- @if $vendor-gradients == () {
84
- $vendor-gradients: -#{$vendor}-linear-gradient(nth($gradients, $i));
85
- }
86
- @else {
87
- $vendor-gradients: $vendor-gradients, -#{$vendor}-linear-gradient(nth($gradients, $i));
88
- }
89
- }
90
- @else if $vendor == false {
91
- $vendor-gradients: $vendor-gradients, unquote("linear-gradient(#{nth($gradients, $i)})");
92
- }
93
- }
94
- @return $vendor-gradients;
59
+ @else if $vendor == false {
60
+ $vendor-gradients: "#{$gradient-type}-gradient(#{$gradients})";
61
+ $vendor-gradients: unquote($vendor-gradients);
95
62
  }
63
+ @return $vendor-gradients;
96
64
  }
97
65
 
98
66
  //Examples:
99
- //@include background-image(url("/images/a.png"), linear-gradient(#ffff00, #999));
100
- //@include background-image(url("/images/a.png"), url("/images/b.png"), url("/images/c.png"), linear-gradient(#ffff00 10%, #000 20%));
67
+ //@include background-image(linear-gradient(top, orange, red));
68
+ //@include background-image(radial-gradient(50% 50%, cover circle, orange, red));
69
+ //@include background-image(url("/images/a.png"), linear-gradient(orange, red));
70
+ //@include background-image(url("image.png"), linear-gradient(orange, red), url("image.png"));
71
+ //@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);
@@ -14,8 +14,10 @@
14
14
  $pos: top; // Default position
15
15
  }
16
16
 
17
- $full: compact($G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10);
18
-
19
- @return join($pos, $full, comma);
17
+ $type: linear;
18
+ $gradient: compact($pos, $G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10);
19
+ $type-gradient: append($type, $gradient, comma);
20
20
 
21
+ @return $type-gradient;
21
22
  }
23
+
@@ -0,0 +1,15 @@
1
+ // This function is required and used by the background-image mixin.
2
+ @function radial-gradient($pos, $shape-size,
3
+ $G1, $G2,
4
+ $G3: false, $G4: false,
5
+ $G5: false, $G6: false,
6
+ $G7: false, $G8: false,
7
+ $G9: false, $G10: false) {
8
+
9
+ $type: radial;
10
+ $gradient: compact($pos, $shape-size, $G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10);
11
+ $type-gradient: append($type, $gradient, comma);
12
+
13
+ @return $type-gradient;
14
+ }
15
+
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: bourbon
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.2.1
4
+ version: 1.0.0
5
5
  prerelease:
6
6
  platform: ruby
7
7
  authors:
@@ -11,11 +11,11 @@ authors:
11
11
  autorequire:
12
12
  bindir: bin
13
13
  cert_chain: []
14
- date: 2011-10-03 00:00:00.000000000Z
14
+ date: 2011-10-07 00:00:00.000000000Z
15
15
  dependencies:
16
16
  - !ruby/object:Gem::Dependency
17
17
  name: sass
18
- requirement: &70100083557600 !ruby/object:Gem::Requirement
18
+ requirement: &70145486937300 !ruby/object:Gem::Requirement
19
19
  none: false
20
20
  requirements:
21
21
  - - ! '>='
@@ -23,7 +23,7 @@ dependencies:
23
23
  version: '3.1'
24
24
  type: :runtime
25
25
  prerelease: false
26
- version_requirements: *70100083557600
26
+ version_requirements: *70145486937300
27
27
  description: ! 'The purpose of Bourbon Vanilla Sass Mixins is to provide a comprehensive
28
28
  framework of
29
29
 
@@ -68,6 +68,7 @@ files:
68
68
  - app/assets/stylesheets/functions/_golden-ratio.scss
69
69
  - app/assets/stylesheets/functions/_grid-width.scss
70
70
  - app/assets/stylesheets/functions/_linear-gradient.scss
71
+ - app/assets/stylesheets/functions/_radial-gradient.scss
71
72
  - app/assets/stylesheets/functions/_tint-shade.scss
72
73
  - bourbon.gemspec
73
74
  - generate-bourbon.sh