toolkit 0.2.1 → 0.2.1.1
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.
- data/stylesheets/_toolkit.scss +1 -1
- data/stylesheets/toolkit/_colours.scss +53 -0
- metadata +3 -2
- data/stylesheets/toolkit/_colors.scss +0 -43
data/stylesheets/_toolkit.scss
CHANGED
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
/// Tint and Shade
|
|
2
|
+
@function tint($colour, $amount) {
|
|
3
|
+
@return mix(#fff, $colour, $amount);
|
|
4
|
+
}
|
|
5
|
+
|
|
6
|
+
@function shade($colour, $amount) {
|
|
7
|
+
@return mix(#000, $colour, $amount);
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
// Create a colour stack using the given colours and tints
|
|
11
|
+
@function colour-stack($main, $secondary, $amounts...) {
|
|
12
|
+
@if length($amounts) == 0 {
|
|
13
|
+
$amounts: 25%, 50%, 75%, 85%, 90%;
|
|
14
|
+
}
|
|
15
|
+
@else if length($amounts) == 1 {
|
|
16
|
+
$amounts: nth($amounts, 1);
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
$stack: $main;
|
|
20
|
+
|
|
21
|
+
@each $amount in $amounts {
|
|
22
|
+
$stack: join($stack, mix($secondary, nth($stack, 1), $amount));
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
@return $stack;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
@function color-stack($main, $secondary, $amounts...) {
|
|
29
|
+
@if length($amounts) > 0 {
|
|
30
|
+
@return colour-stack($main, $secondary, $amounts);
|
|
31
|
+
}
|
|
32
|
+
@else {
|
|
33
|
+
@return colour-stack($main, $secondary);
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
@function tint-stack($colour, $amounts...) {
|
|
38
|
+
@if length($amounts) > 0 {
|
|
39
|
+
@return colour-stack($colour, #fff, $amounts);
|
|
40
|
+
}
|
|
41
|
+
@else {
|
|
42
|
+
@return colour-stack($colour, #fff);
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
@function shade-stack($colour, $amounts...) {
|
|
47
|
+
@if length($amounts) > 0 {
|
|
48
|
+
@return colour-stack($colour, #000, $amounts);
|
|
49
|
+
}
|
|
50
|
+
@else {
|
|
51
|
+
@return colour-stack($colour, #000);
|
|
52
|
+
}
|
|
53
|
+
}
|
metadata
CHANGED
|
@@ -6,7 +6,8 @@ version: !ruby/object:Gem::Version
|
|
|
6
6
|
- 0
|
|
7
7
|
- 2
|
|
8
8
|
- 1
|
|
9
|
-
|
|
9
|
+
- 1
|
|
10
|
+
version: 0.2.1.1
|
|
10
11
|
platform: ruby
|
|
11
12
|
authors:
|
|
12
13
|
- Sam Richard
|
|
@@ -89,7 +90,7 @@ files:
|
|
|
89
90
|
- stylesheets/_toolkit.scss
|
|
90
91
|
- stylesheets/toolkit/_border-box.scss
|
|
91
92
|
- stylesheets/toolkit/_clearfix.scss
|
|
92
|
-
- stylesheets/toolkit/
|
|
93
|
+
- stylesheets/toolkit/_colours.scss
|
|
93
94
|
- stylesheets/toolkit/_fluid-media.scss
|
|
94
95
|
- stylesheets/toolkit/_pe.scss
|
|
95
96
|
- stylesheets/toolkit/_vertical-center.scss
|
|
@@ -1,43 +0,0 @@
|
|
|
1
|
-
/// Tint and Shade
|
|
2
|
-
@function tint($color, $amount) {
|
|
3
|
-
@return mix(#fff, $color, $amount);
|
|
4
|
-
}
|
|
5
|
-
|
|
6
|
-
@function shade($color, $amount) {
|
|
7
|
-
@return mix(#000, $color, $amount);
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
// Create a color stack using the given colors and tints
|
|
11
|
-
@function color-stack($main, $secondary, $amounts...) {
|
|
12
|
-
@if length($amounts) == 0 {
|
|
13
|
-
$amounts: 25%, 25%, 15%, 10%;
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
$stack: $main;
|
|
17
|
-
$i: 1;
|
|
18
|
-
|
|
19
|
-
@each $amount in $amounts {
|
|
20
|
-
$stack: join($stack, mix($secondary, nth($stack, $i), $amount));
|
|
21
|
-
$i: $i + 1;
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
@return $stack;
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
@function tint-stack($color, $amounts...) {
|
|
28
|
-
@if length($amounts) > 0 {
|
|
29
|
-
@return color-stack($color, #fff, $amounts);
|
|
30
|
-
}
|
|
31
|
-
@else {
|
|
32
|
-
@return color-stack($color, #fff);
|
|
33
|
-
}
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
@function shade-stack($color, $amounts...) {
|
|
37
|
-
@if length($amounts) > 0 {
|
|
38
|
-
@return color-stack($color, #000, $amounts);
|
|
39
|
-
}
|
|
40
|
-
@else {
|
|
41
|
-
@return color-stack($color, #000);
|
|
42
|
-
}
|
|
43
|
-
}
|