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,4 +1,9 @@
|
|
1
|
-
|
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
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
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
|
-
|
29
|
-
|
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
|
-
$
|
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
|
-
|
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
|
-
|
56
|
-
@if $
|
57
|
-
|
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
|
-
|
67
|
-
|
68
|
-
|
69
|
-
|
70
|
-
|
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
|
80
|
-
$vendor-gradients: ();
|
81
|
-
|
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
|
-
|
100
|
-
|
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
|
-
$
|
18
|
-
|
19
|
-
|
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.
|
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-
|
14
|
+
date: 2011-10-07 00:00:00.000000000Z
|
15
15
|
dependencies:
|
16
16
|
- !ruby/object:Gem::Dependency
|
17
17
|
name: sass
|
18
|
-
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: *
|
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
|