compass-chameleon 0.2.0 → 0.3.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.
- checksums.yaml +8 -8
- data/CHANGELOG.md +4 -0
- data/README.md +29 -1
- data/stylesheets/chameleon/_theme.scss +15 -3
- metadata +2 -2
checksums.yaml
CHANGED
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
---
|
|
2
2
|
!binary "U0hBMQ==":
|
|
3
3
|
metadata.gz: !binary |-
|
|
4
|
-
|
|
4
|
+
OTY0MDljMWRkYzkzNjM3NWNiM2RjMzU2ZDdjNGE3ZDZjZjJmNDZjNA==
|
|
5
5
|
data.tar.gz: !binary |-
|
|
6
|
-
|
|
6
|
+
MDFiZjEyYjU0OGI0ODRlYTMwMmJkYjQ4Njg5NDljOWI1MzIyNDM1NQ==
|
|
7
7
|
!binary "U0hBNTEy":
|
|
8
8
|
metadata.gz: !binary |-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
9
|
+
NDY5NDUzYThhYTlkNWM4MTVkODZhM2FmY2M1ZDliNGJlMjZlNmE4YmFmZjc4
|
|
10
|
+
NmM4ZDdjNTZhM2I5ZGQxNWMxZjhkODg5YTMzMmY1YTkxM2M2MTQ5YzNlN2Y2
|
|
11
|
+
ZjgzOTEyZmUxNTk4MGE4NDk5MzE4NWIxZDUxZDVhNTVhYTFmNDk=
|
|
12
12
|
data.tar.gz: !binary |-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
13
|
+
NzQwMGU5YTEzZDQ0ZGY4ZGU1OWU1ZTFiMGFlZGNlY2EzNjdiM2M4YjQ4NzAz
|
|
14
|
+
NDk2ODYxMjg3YmNmMjgzYTAzNzE3ZWVjN2VlZjk1OWMzNzg0ZjIxNGM1Y2My
|
|
15
|
+
OGZmOGI0OTEzNTY3Yzk4MmNjOTVhNWQzNjZlOWY1YWRhNmMyNzY=
|
data/CHANGELOG.md
CHANGED
data/README.md
CHANGED
|
@@ -79,6 +79,34 @@ In your HTML you'd add the theme name class to the `body` element to theme an en
|
|
|
79
79
|
|
|
80
80
|
Chameleon comes with a number of mixins for your theming pleasures:
|
|
81
81
|
|
|
82
|
+
### `themes`
|
|
83
|
+
|
|
84
|
+
Adds a *global* style rule for each theme, containing the themed properties. Takes one or more CSS properties. Useful to set up theme classes that have styling themselves. Note: If you specify more properties than available colors for a theme, only the available property color pairs will be output.
|
|
85
|
+
|
|
86
|
+
Usage:
|
|
87
|
+
|
|
88
|
+
```scss
|
|
89
|
+
$themes: ("red", (#FF0000, #F13333)),
|
|
90
|
+
("green", (#00FF00)),
|
|
91
|
+
("blue", (#0000FF, #3333F1));
|
|
92
|
+
|
|
93
|
+
@include themed(background-color);
|
|
94
|
+
```
|
|
95
|
+
|
|
96
|
+
Output:
|
|
97
|
+
|
|
98
|
+
```css
|
|
99
|
+
.red {
|
|
100
|
+
background-color: red;
|
|
101
|
+
}
|
|
102
|
+
.green {
|
|
103
|
+
background-color: lime;
|
|
104
|
+
}
|
|
105
|
+
.blue {
|
|
106
|
+
background-color: blue;
|
|
107
|
+
}
|
|
108
|
+
```
|
|
109
|
+
|
|
82
110
|
### `themed`
|
|
83
111
|
|
|
84
112
|
Adds a style rule for *each* theme, containing the themed properties. Takes one or more CSS properties. Note: If you specify more properties than available colors for a theme, only the available property color pairs will be output.
|
|
@@ -114,7 +142,7 @@ Output:
|
|
|
114
142
|
|
|
115
143
|
### `properties-for-theme`
|
|
116
144
|
|
|
117
|
-
Adds a style rule for the *given* theme, containing the themed properties. Takes a theme
|
|
145
|
+
Adds a style rule for the *given* theme, containing the themed properties. Takes a theme, one or more properties (remember, a theme is a list of a name and a list of colors) and optionally whether to output the stye rule on the global level (without the parent selector) or not (default it will output *with* the parent selector). Useful for those situations where only one theme is different. Use in conjunction with the `get-theme-by-name` function.
|
|
118
146
|
|
|
119
147
|
Usage:
|
|
120
148
|
|
|
@@ -1,6 +1,17 @@
|
|
|
1
1
|
// ----------------------------------------------------------------------------
|
|
2
2
|
// Theme
|
|
3
3
|
|
|
4
|
+
// Mixin themes
|
|
5
|
+
// Adds a global style rule for each theme, containing the themed properties.
|
|
6
|
+
//
|
|
7
|
+
// @param $properties {list | string} One or more properties to theme
|
|
8
|
+
//
|
|
9
|
+
@mixin themes($properties...) {
|
|
10
|
+
@each $theme in $themes {
|
|
11
|
+
@include properties-for-theme($theme, $properties, true);
|
|
12
|
+
}
|
|
13
|
+
}
|
|
14
|
+
|
|
4
15
|
// Mixin themed
|
|
5
16
|
// Adds a style rule for each theme, containing the themed properties.
|
|
6
17
|
//
|
|
@@ -16,13 +27,14 @@
|
|
|
16
27
|
// Adds a style rule for the given theme, containing the themed properties.
|
|
17
28
|
//
|
|
18
29
|
// @param $theme {list} The theme
|
|
19
|
-
// @param $
|
|
30
|
+
// @param $properties {list | string} One or more properties to theme
|
|
31
|
+
// @param $global {boolean} Whether to output the selector globally or not
|
|
20
32
|
//
|
|
21
|
-
@mixin properties-for-theme($theme, $properties) {
|
|
33
|
+
@mixin properties-for-theme($theme, $properties, $global: false) {
|
|
22
34
|
$theme-name: fail-safe-nth($theme, 1);
|
|
23
35
|
$theme-colors: fail-safe-nth($theme, 2);
|
|
24
36
|
|
|
25
|
-
.#{$theme-name} & {
|
|
37
|
+
.#{$theme-name} #{if($global, '', '&')} {
|
|
26
38
|
@for $i from 1 through length($properties) {
|
|
27
39
|
@if fail-safe-nth($theme-colors, $i) != null {
|
|
28
40
|
#{nth($properties, $i)}: fail-safe-nth($theme-colors, $i);
|
metadata
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: compass-chameleon
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.
|
|
4
|
+
version: 0.3.0
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Leon de Rijke
|
|
8
8
|
autorequire:
|
|
9
9
|
bindir: bin
|
|
10
10
|
cert_chain: []
|
|
11
|
-
date: 2013-
|
|
11
|
+
date: 2013-08-08 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: sass
|