From 1e4d6c0cecfff4e1fb351e80a7fc186e4dc8c3e0 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Fri, 20 Oct 2023 13:59:32 +0200 Subject: More colored divider --- src/objects/_divider.scss | 32 +++++++++++++++++++++++++------- 1 file changed, 25 insertions(+), 7 deletions(-) (limited to 'src/objects') 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); + } } } } -- cgit v1.2.3-54-g00ecf