sass-color-schemes 0.3.1 → 0.4.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/README.md +37 -37
- data/stylesheets/mixins/_colors.scss +4 -4
- data/stylesheets/mixins/_sample.scss +4 -4
- metadata +2 -2
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA1:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 55fab901fb216c63080e655fd707c51ad27ed29b
|
4
|
+
data.tar.gz: 6d3551b131fdb4ac359f8db8719c68b51c6e1724
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 01fb17022071c1dbbd88576b67d98c34ad6f122eb986e03198121e775d05b47b92327e10fc191cdf12a8936c82eb394fa3ce46dfee5916a5e0509c7b0c7c9cc4
|
7
|
+
data.tar.gz: faade379793ce5d82258df9d33e65489ff0859f8e8a133151c7e0679989324f027648ba46d32a02e9cb55f9ed23dd8a965983da32c5daee8574186fc25f47679
|
data/README.md
CHANGED
@@ -30,13 +30,13 @@ Sass-color-schemes has 4 functions that all return an array of 5 color values (o
|
|
30
30
|
|
31
31
|
See [`$sass-color-schemes` variable](#sass-color-schemes-variable) for a description of the different types.
|
32
32
|
|
33
|
-
#### primary-colors
|
33
|
+
#### scs-primary-colors
|
34
34
|
|
35
35
|
Returns an array of 5 colors, in which the first element is the base color and the rest are different shades of the base color. You need the Sass' `nth` function to access a specific color:
|
36
36
|
|
37
37
|
```
|
38
|
-
$color-primary-0: nth(primary-colors(), 1);
|
39
|
-
$color-primary-1: nth(primary-colors(), 2);
|
38
|
+
$color-primary-0: nth(scs-primary-colors(), 1);
|
39
|
+
$color-primary-1: nth(scs-primary-colors(), 2);
|
40
40
|
// ... etc.
|
41
41
|
|
42
42
|
.title {
|
@@ -49,14 +49,14 @@ $color-primary-1: nth(primary-colors(), 2);
|
|
49
49
|
|
50
50
|
```
|
51
51
|
|
52
|
-
#### complement-colors
|
52
|
+
#### scs-complement-colors
|
53
53
|
|
54
54
|
Returns an array of 5 colors, in which the first element is the complementary color of base color and the rest are different shades of this complementary color. You need the Sass' `nth` function to access a specific color:
|
55
55
|
|
56
56
|
|
57
57
|
```
|
58
|
-
$color-complement-0: nth(complement-colors(), 1);
|
59
|
-
$color-complement-1: nth(complement-colors(), 2);
|
58
|
+
$color-complement-0: nth(scs-complement-colors(), 1);
|
59
|
+
$color-complement-1: nth(scs-complement-colors(), 2);
|
60
60
|
// ... etc.
|
61
61
|
|
62
62
|
.call-to-action {
|
@@ -65,23 +65,23 @@ $color-complement-1: nth(complement-colors(), 2);
|
|
65
65
|
|
66
66
|
```
|
67
67
|
|
68
|
-
**Note:** The `complement-colors` function only returns an array of colors when the `$complement` variable is set to `true` or the `$scheme` variable is set to `triad`. Otherwise an array with 5 `null`'s is returned.
|
68
|
+
**Note:** The `scs-complement-colors` function only returns an array of colors when the `$complement` variable is set to `true` or the `$scheme` variable is set to `triad`. Otherwise an array with 5 `null`'s is returned.
|
69
69
|
|
70
|
-
#### secondary-1-colors and secondary-2-colors
|
70
|
+
#### scs-secondary-1-colors and scs-secondary-2-colors
|
71
71
|
|
72
72
|
Some color schemes contain 2 additional colors. These functions each returns an array of 5 colors with, again, 5 different shades of a color. You need the Sass' `nth` function to access a specific color:
|
73
73
|
|
74
74
|
```
|
75
|
-
$color-secondary-1-0: nth(secondary-1-colors(), 1);
|
76
|
-
$color-secondary-1-1: nth(secondary-1-colors(), 2);
|
75
|
+
$color-secondary-1-0: nth(scs-secondary-1-colors(), 1);
|
76
|
+
$color-secondary-1-1: nth(scs-secondary-1-colors(), 2);
|
77
77
|
// ... etc.
|
78
78
|
|
79
|
-
$color-secondary-2-0: nth(secondary-2-colors(), 1);
|
80
|
-
$color-secondary-2-1: nth(secondary-2-colors(), 2);
|
79
|
+
$color-secondary-2-0: nth(scs-secondary-2-colors(), 1);
|
80
|
+
$color-secondary-2-1: nth(scs-secondary-2-colors(), 2);
|
81
81
|
// ... etc.
|
82
82
|
|
83
83
|
```
|
84
|
-
**Note:** The `secondary-1-colors` and `secondary-2-colors` functions only returns an array of colors when the `$scheme` variable is set to `adjacent`, `tetrad` or `triad`. Otherwise an array with 5 `null`'s is returned.
|
84
|
+
**Note:** The `scs-secondary-1-colors` and `scs-secondary-2-colors` functions only returns an array of colors when the `$scheme` variable is set to `adjacent`, `tetrad` or `triad`. Otherwise an array with 5 `null`'s is returned.
|
85
85
|
|
86
86
|
### `$sass-color-schemes` variable
|
87
87
|
|
@@ -151,7 +151,7 @@ $sass-color-schemes: (
|
|
151
151
|
|
152
152
|
#### `complement` key
|
153
153
|
|
154
|
-
If set to `true`, the `complement-colors` function returns shades of the complementary color of the `$base-color`.
|
154
|
+
If set to `true`, the `scs-complement-colors` function returns shades of the complementary color of the `$base-color`.
|
155
155
|
|
156
156
|
Defaults to `true`.
|
157
157
|
|
@@ -289,29 +289,29 @@ $sass-color-schemes: (
|
|
289
289
|
angle: 25
|
290
290
|
);
|
291
291
|
|
292
|
-
$color-primary-0: nth(primary-colors(), 1);
|
293
|
-
$color-primary-1: nth(primary-colors(), 2);
|
294
|
-
$color-primary-2: nth(primary-colors(), 3);
|
295
|
-
$color-primary-3: nth(primary-colors(), 4);
|
296
|
-
$color-primary-4: nth(primary-colors(), 5);
|
297
|
-
|
298
|
-
$color-complement-0: nth(complement-colors(), 1);
|
299
|
-
$color-complement-1: nth(complement-colors(), 2);
|
300
|
-
$color-complement-2: nth(complement-colors(), 3);
|
301
|
-
$color-complement-3: nth(complement-colors(), 4);
|
302
|
-
$color-complement-4: nth(complement-colors(), 5);
|
303
|
-
|
304
|
-
$color-secondary-1-0: nth(secondary-1-colors(), 1);
|
305
|
-
$color-secondary-1-1: nth(secondary-1-colors(), 2);
|
306
|
-
$color-secondary-1-2: nth(secondary-1-colors(), 3);
|
307
|
-
$color-secondary-1-3: nth(secondary-1-colors(), 4);
|
308
|
-
$color-secondary-1-4: nth(secondary-1-colors(), 5);
|
309
|
-
|
310
|
-
$color-secondary-2-0: nth(secondary-2-colors(), 1);
|
311
|
-
$color-secondary-2-1: nth(secondary-2-colors(), 2);
|
312
|
-
$color-secondary-2-2: nth(secondary-2-colors(), 3);
|
313
|
-
$color-secondary-2-3: nth(secondary-2-colors(), 4);
|
314
|
-
$color-secondary-2-4: nth(secondary-2-colors(), 5);
|
292
|
+
$color-primary-0: nth(scs-primary-colors(), 1);
|
293
|
+
$color-primary-1: nth(scs-primary-colors(), 2);
|
294
|
+
$color-primary-2: nth(scs-primary-colors(), 3);
|
295
|
+
$color-primary-3: nth(scs-primary-colors(), 4);
|
296
|
+
$color-primary-4: nth(scs-primary-colors(), 5);
|
297
|
+
|
298
|
+
$color-complement-0: nth(scs-complement-colors(), 1);
|
299
|
+
$color-complement-1: nth(scs-complement-colors(), 2);
|
300
|
+
$color-complement-2: nth(scs-complement-colors(), 3);
|
301
|
+
$color-complement-3: nth(scs-complement-colors(), 4);
|
302
|
+
$color-complement-4: nth(scs-complement-colors(), 5);
|
303
|
+
|
304
|
+
$color-secondary-1-0: nth(scs-secondary-1-colors(), 1);
|
305
|
+
$color-secondary-1-1: nth(scs-secondary-1-colors(), 2);
|
306
|
+
$color-secondary-1-2: nth(scs-secondary-1-colors(), 3);
|
307
|
+
$color-secondary-1-3: nth(scs-secondary-1-colors(), 4);
|
308
|
+
$color-secondary-1-4: nth(scs-secondary-1-colors(), 5);
|
309
|
+
|
310
|
+
$color-secondary-2-0: nth(scs-secondary-2-colors(), 1);
|
311
|
+
$color-secondary-2-1: nth(scs-secondary-2-colors(), 2);
|
312
|
+
$color-secondary-2-2: nth(scs-secondary-2-colors(), 3);
|
313
|
+
$color-secondary-2-3: nth(scs-secondary-2-colors(), 4);
|
314
|
+
$color-secondary-2-4: nth(scs-secondary-2-colors(), 5);
|
315
315
|
|
316
316
|
|
317
317
|
```
|
@@ -1,8 +1,8 @@
|
|
1
|
-
@function primary-colors() {
|
1
|
+
@function scs-primary-colors() {
|
2
2
|
@return _compose-shades(_base-color());
|
3
3
|
}
|
4
4
|
|
5
|
-
@function complement-colors() {
|
5
|
+
@function scs-complement-colors() {
|
6
6
|
@if (_complement() == false) and (_scheme() != 'tetrad') {
|
7
7
|
@return _empty-array();
|
8
8
|
}
|
@@ -10,7 +10,7 @@
|
|
10
10
|
@return _compose-color(180);
|
11
11
|
}
|
12
12
|
|
13
|
-
@function secondary-1-colors() {
|
13
|
+
@function scs-secondary-1-colors() {
|
14
14
|
@if (_scheme() == 'triad') {
|
15
15
|
@return _compose-color(180 - _angle());
|
16
16
|
} @else if (_scheme() == 'adjacent') or (_scheme() == 'tetrad') {
|
@@ -20,7 +20,7 @@
|
|
20
20
|
}
|
21
21
|
}
|
22
22
|
|
23
|
-
@function secondary-2-colors() {
|
23
|
+
@function scs-secondary-2-colors() {
|
24
24
|
@if (_scheme() == 'triad') or (_scheme() == 'tetrad') {
|
25
25
|
@return _compose-color(180 + _angle());
|
26
26
|
} @else if (_scheme() == 'adjacent') {
|
@@ -1,8 +1,8 @@
|
|
1
1
|
@mixin scs-test($height: 2em, $element: 'body:before') {
|
2
|
-
$colors: primary-colors();
|
3
|
-
$colors: join($colors, compact(complement-colors()));
|
4
|
-
$colors: join($colors, compact(secondary-1-colors()));
|
5
|
-
$colors: join($colors, compact(secondary-2-colors()));
|
2
|
+
$colors: scs-primary-colors();
|
3
|
+
$colors: join($colors, compact(scs-complement-colors()));
|
4
|
+
$colors: join($colors, compact(scs-secondary-1-colors()));
|
5
|
+
$colors: join($colors, compact(scs-secondary-2-colors()));
|
6
6
|
|
7
7
|
#{$element} {
|
8
8
|
content: "";
|
metadata
CHANGED
@@ -1,14 +1,14 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: sass-color-schemes
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 0.
|
4
|
+
version: 0.4.0
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Patrick Baselier
|
8
8
|
autorequire:
|
9
9
|
bindir: bin
|
10
10
|
cert_chain: []
|
11
|
-
date:
|
11
|
+
date: 2015-05-25 00:00:00.000000000 Z
|
12
12
|
dependencies:
|
13
13
|
- !ruby/object:Gem::Dependency
|
14
14
|
name: compass
|