summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--src/objects/_divider.scss32
-rw-r--r--tpl/views/divider.pug20
2 files changed, 45 insertions, 7 deletions
diff --git a/src/objects/_divider.scss b/src/objects/_divider.scss
index 943ab5f..93b1914 100644
--- a/src/objects/_divider.scss
+++ b/src/objects/_divider.scss
@@ -35,10 +35,26 @@
35 --bg: fn.global-color(--obj), 35 --bg: fn.global-color(--obj),
36 --label: fn.global-color(--fg-hi2), 36 --label: fn.global-color(--fg-hi2),
37 ), 37 ),
38 --blue: (
39 --bg: fn.global-color(--blue --solid --bg),
40 --label: fn.global-color(--blue --solid --obj),
41 ),
42 --purple: (
43 --bg: fn.global-color(--purple --solid --bg),
44 --label: fn.global-color(--purple --solid --obj),
45 ),
38 --red: ( 46 --red: (
39 --bg: fn.global-color(--red --solid --bg), 47 --bg: fn.global-color(--red --solid --bg),
40 --label: fn.global-color(--red --solid --obj), 48 --label: fn.global-color(--red --solid --obj),
41 ), 49 ),
50 --green: (
51 --bg: fn.global-color(--green --solid --bg),
52 --label: fn.global-color(--green --solid --obj),
53 ),
54 --yellow: (
55 --bg: fn.global-color(--yellow --solid --bg),
56 --label: fn.global-color(--yellow --solid --obj),
57 ),
42 ), 58 ),
43 ), 'colors'); 59 ), 'colors');
44 60
@@ -135,14 +151,16 @@
135 } 151 }
136 } 152 }
137 153
138 @include iro.bem-modifier('red') { 154 @each $color in 'blue' 'purple' 'red' 'green' 'yellow' {
139 &::before, 155 @include iro.bem-modifier($color) {
140 &::after { 156 &::before,
141 background-color: fn.color(--red --bg); 157 &::after {
142 } 158 background-color: fn.color(--#{$color} --bg);
159 }
143 160
144 @include iro.bem-elem('label') { 161 @include iro.bem-elem('label') {
145 color: fn.color(--red --label); 162 color: fn.color(--#{$color} --label);
163 }
146 } 164 }
147 } 165 }
148 } 166 }
diff --git a/tpl/views/divider.pug b/tpl/views/divider.pug
index af142cf..9d0b2cb 100644
--- a/tpl/views/divider.pug
+++ b/tpl/views/divider.pug
@@ -21,6 +21,26 @@ mixin view-divider
21 +divider('faint')= 'Faint' 21 +divider('faint')= 'Faint'
22 22
23 .c-box 23 .c-box
24 +divider('strong')(color='blue')= 'Strong'
25 +divider('medium')(color='blue')= 'Medium'
26 +divider('faint')(color='blue')= 'Faint'
27
28 .c-box
29 +divider('strong')(color='purple')= 'Strong'
30 +divider('medium')(color='purple')= 'Medium'
31 +divider('faint')(color='purple')= 'Faint'
32
33 .c-box
24 +divider('strong')(color='red')= 'Strong' 34 +divider('strong')(color='red')= 'Strong'
25 +divider('medium')(color='red')= 'Medium' 35 +divider('medium')(color='red')= 'Medium'
26 +divider('faint')(color='red')= 'Faint' 36 +divider('faint')(color='red')= 'Faint'
37
38 .c-box
39 +divider('strong')(color='green')= 'Strong'
40 +divider('medium')(color='green')= 'Medium'
41 +divider('faint')(color='green')= 'Faint'
42
43 .c-box
44 +divider('strong')(color='yellow')= 'Strong'
45 +divider('medium')(color='yellow')= 'Medium'
46 +divider('faint')(color='yellow')= 'Faint'