From 1e4d6c0cecfff4e1fb351e80a7fc186e4dc8c3e0 Mon Sep 17 00:00:00 2001
From: Volpeon <git@volpeon.ink>
Date: Fri, 20 Oct 2023 13:59:32 +0200
Subject: More colored divider
---
src/objects/_divider.scss | 32 +++++++++++++++++++++++++-------
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 @@
--bg: fn.global-color(--obj),
--label: fn.global-color(--fg-hi2),
),
+ --blue: (
+ --bg: fn.global-color(--blue --solid --bg),
+ --label: fn.global-color(--blue --solid --obj),
+ ),
+ --purple: (
+ --bg: fn.global-color(--purple --solid --bg),
+ --label: fn.global-color(--purple --solid --obj),
+ ),
--red: (
--bg: fn.global-color(--red --solid --bg),
--label: fn.global-color(--red --solid --obj),
),
+ --green: (
+ --bg: fn.global-color(--green --solid --bg),
+ --label: fn.global-color(--green --solid --obj),
+ ),
+ --yellow: (
+ --bg: fn.global-color(--yellow --solid --bg),
+ --label: fn.global-color(--yellow --solid --obj),
+ ),
),
), 'colors');
@@ -135,14 +151,16 @@
}
}
- @include iro.bem-modifier('red') {
- &::before,
- &::after {
- background-color: fn.color(--red --bg);
- }
+ @each $color in 'blue' 'purple' 'red' 'green' 'yellow' {
+ @include iro.bem-modifier($color) {
+ &::before,
+ &::after {
+ background-color: fn.color(--#{$color} --bg);
+ }
- @include iro.bem-elem('label') {
- color: fn.color(--red --label);
+ @include iro.bem-elem('label') {
+ color: fn.color(--#{$color} --label);
+ }
}
}
}
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
@@ -20,7 +20,27 @@ mixin view-divider
+divider('medium')= 'Medium'
+divider('faint')= 'Faint'
+ .c-box
+ +divider('strong')(color='blue')= 'Strong'
+ +divider('medium')(color='blue')= 'Medium'
+ +divider('faint')(color='blue')= 'Faint'
+
+ .c-box
+ +divider('strong')(color='purple')= 'Strong'
+ +divider('medium')(color='purple')= 'Medium'
+ +divider('faint')(color='purple')= 'Faint'
+
.c-box
+divider('strong')(color='red')= 'Strong'
+divider('medium')(color='red')= 'Medium'
+divider('faint')(color='red')= 'Faint'
+
+ .c-box
+ +divider('strong')(color='green')= 'Strong'
+ +divider('medium')(color='green')= 'Medium'
+ +divider('faint')(color='green')= 'Faint'
+
+ .c-box
+ +divider('strong')(color='yellow')= 'Strong'
+ +divider('medium')(color='yellow')= 'Medium'
+ +divider('faint')(color='yellow')= 'Faint'
--
cgit v1.2.3-70-g09d2