From 48cb00040763459fc46d4aa108bf72c12f48f422 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Fri, 21 Jun 2024 23:07:50 +0200 Subject: WIP: Refactoring --- src/objects/_divider.scss | 51 +++++++++++++++++++++-------------------------- 1 file changed, 23 insertions(+), 28 deletions(-) (limited to 'src/objects/_divider.scss') diff --git a/src/objects/_divider.scss b/src/objects/_divider.scss index 655080f..465bbcf 100644 --- a/src/objects/_divider.scss +++ b/src/objects/_divider.scss @@ -4,7 +4,7 @@ @include iro.props-namespace('divider') { @include iro.props-store(( --dims: ( - --margin-y: fn.global-dim(--size --85), + --margin-b: fn.global-dim(--size --85), --strong: ( --border: fn.global-dim(--border --thick), @@ -19,52 +19,48 @@ --label-font-size: fn.global-dim(--font-size --50), ), ), - ), 'dims'); - - @include iro.props-store(( --colors: ( --strong: ( - --bg: fn.global-color(--fg), - --label: fn.global-color(--fg), + --bg: fn.global-color(--text), + --label: fn.global-color(--text), ), --medium: ( - --bg: fn.global-color(--obj), - --label: fn.global-color(--fg-hi), + --bg: fn.global-color(--border), + --label: fn.global-color(--text-mute), ), --faint: ( - --bg: fn.global-color(--obj), - --label: fn.global-color(--fg-hi2), + --bg: fn.global-color(--border), + --label: fn.global-color(--text-mute-more), ), --blue: ( - --bg: fn.global-color(--blue --solid --bg), - --label: fn.global-color(--blue --solid --obj), + --bg: fn.global-color(--blue --700), + --label: fn.global-color(--blue --1000), ), --purple: ( - --bg: fn.global-color(--purple --solid --bg), - --label: fn.global-color(--purple --solid --obj), + --bg: fn.global-color(--purple --700), + --label: fn.global-color(--purple --1000), ), --red: ( - --bg: fn.global-color(--red --solid --bg), - --label: fn.global-color(--red --solid --obj), + --bg: fn.global-color(--red --700), + --label: fn.global-color(--red --1000), ), --green: ( - --bg: fn.global-color(--green --solid --bg), - --label: fn.global-color(--green --solid --obj), + --bg: fn.global-color(--green --700), + --label: fn.global-color(--green --1000), ), --yellow: ( - --bg: fn.global-color(--yellow --solid --bg), - --label: fn.global-color(--yellow --solid --obj), + --bg: fn.global-color(--yellow --700), + --label: fn.global-color(--yellow --1000), ), ), - ), 'colors'); + )); @include iro.bem-object(iro.props-namespace()) { display: flex; flex-direction: row; align-items: center; height: 1em; - margin-top: fn.dim(--margin-y); - margin-bottom: fn.dim(--margin-y); + margin-block: fn.dim(--margin-b); color: fn.color(--strong --label); font-size: fn.dim(--strong --label-font-size); font-weight: 700; @@ -93,8 +89,7 @@ align-self: stretch; width: 1px; height: auto; - margin-top: 0; - margin-bottom: 0; + margin-block: 0; background-color: fn.color(--faint --bg); &::before, @@ -129,12 +124,12 @@ @include iro.bem-modifier('labelled') { &::before { - margin-right: 1em; + margin-inline-end: 1em; } &::after { - display: block; - margin-left: 1em; + display: block; + margin-inline-start: 1em; } } -- cgit v1.2.3-54-g00ecf