diff options
-rw-r--r-- | src/objects/_divider.scss | 32 | ||||
-rw-r--r-- | tpl/views/divider.pug | 20 |
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' | ||