compass-chameleon 0.2.0 → 0.3.0
Sign up to get free protection for your applications and to get access to all the features.
- 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
|