From b1d8dd78c6ba0a08e7e1576d55d0289f6c5ed61a Mon Sep 17 00:00:00 2001 From: Volpeon Date: Fri, 4 Apr 2025 14:06:48 +0200 Subject: New divider variant: dot --- src/objects/_divider.scss | 30 ++++++++++++++++++++++++++++-- src/objects/_divider.vars.scss | 8 ++++++-- src/objects/_figure.vars.scss | 2 +- src/scopes/_figures.scss | 15 +++++---------- src/scopes/_figures.vars.scss | 10 ---------- 5 files changed, 40 insertions(+), 25 deletions(-) delete mode 100644 src/scopes/_figures.vars.scss (limited to 'src') diff --git a/src/objects/_divider.scss b/src/objects/_divider.scss index 65f1718..4ed8092 100644 --- a/src/objects/_divider.scss +++ b/src/objects/_divider.scss @@ -46,10 +46,24 @@ @include bem.modifier('vertical') { align-self: stretch; - inline-size: 1px; + inline-size: props.get(vars.$vertical--border-width); block-size: auto; margin-block: 0; - background-color: props.get(vars.$faint--bg-color); + background-color: props.get(vars.$strong--bg-color); + + &::before, + &::after { + display: none; + } + } + + @include bem.modifier('dot') { + align-self: center; + inline-size: props.get(vars.$dot--size); + block-size: props.get(vars.$dot--size); + margin-block: 0; + background-color: props.get(vars.$strong--bg-color); + border-radius: props.get(vars.$dot--size); &::before, &::after { @@ -67,6 +81,14 @@ block-size: props.get(vars.$medium--border-width); background-color: props.get(vars.$medium--bg-color); } + + @include bem.modifier('vertical') { + background-color: props.get(vars.$medium--bg-color); + } + + @include bem.modifier('dot') { + background-color: props.get(vars.$medium--bg-color); + } } @include bem.modifier('faint') { @@ -83,6 +105,10 @@ @include bem.modifier('vertical') { background-color: props.get(vars.$vertical--faint--bg-color); } + + @include bem.modifier('dot') { + background-color: props.get(vars.$dot--faint--bg-color); + } } @include bem.modifier('labelled') { diff --git a/src/objects/_divider.vars.scss b/src/objects/_divider.vars.scss index 1117fd5..5cd68c1 100644 --- a/src/objects/_divider.vars.scss +++ b/src/objects/_divider.vars.scss @@ -3,7 +3,9 @@ @use 'iro-sass/src/props'; @use '../core.vars' as core; -$margin-b: props.def(--o-divider--size, props.get(core.$size--85)) !default; +$margin-b: props.def(--o-divider--size, props.get(core.$size--85)) !default; +$vertical--border-width: props.def(--o-divider--vertical--width, props.get(core.$border-width--thin)) !default; +$dot--size: props.def(--o-divider--dot--size, props.get(core.$size--50)) !default; $strong--border-width: props.def(--o-divider--strong--border-width, props.get(core.$border-width--thick)) !default; $strong--label-font-size: props.def(--o-divider--strong--label-font-size, props.get(core.$font-size--100)) !default; @@ -23,7 +25,9 @@ $medium--label-color: props.def(--o-divider--medium--label-color, props.get(core $faint--bg-color: props.def(--o-divider--faint--bg-color, props.get(core.$theme, --border), 'color') !default; $faint--label-color: props.def(--o-divider--faint--label-color, props.get(core.$theme, --text-mute-more), 'color') !default; -$vertical--faint--bg-color: props.def(--o-divider--faint--bg-color, props.get(core.$theme, --border-mute), 'color') !default; +$vertical--faint--bg-color: props.def(--o-divider--vertical--faint--bg-color, props.get(core.$theme, --border-mute), 'color') !default; + +$dot--faint--bg-color: props.def(--o-divider--dot--faint--bg-color, props.get(core.$theme, --border-mute), 'color') !default; $static-themes: props.def(--o-divider, (), 'color'); diff --git a/src/objects/_figure.vars.scss b/src/objects/_figure.vars.scss index 357c9dd..f86938d 100644 --- a/src/objects/_figure.vars.scss +++ b/src/objects/_figure.vars.scss @@ -6,4 +6,4 @@ $border-width: props.def(--s-figures--border-width, props.get(core.$border-width $font-size: props.def(--s-figures--font-size, props.get(core.$font-size--100)) !default; $text-color: props.def(--s-figures--text-color, props.get(core.$theme, --text-mute-more), 'color') !default; -$border-color: props.def(--s-figures--border-color, props.get(core.$theme, --border-mute), 'color') !default; +$border-color: props.def(--s-figures--border-color, props.get(core.$theme, --border), 'color') !default; diff --git a/src/scopes/_figures.scss b/src/scopes/_figures.scss index 08a3035..981a8b6 100644 --- a/src/scopes/_figures.scss +++ b/src/scopes/_figures.scss @@ -1,20 +1,15 @@ @use 'sass:meta'; @use 'iro-sass/src/bem'; @use 'iro-sass/src/props'; -@use '../props' as *; - -@forward 'figures.vars'; -@use 'figures.vars' as vars; +@use '../objects/figure.vars' as figure; @mixin styles { - @include materialize-at-root(meta.module-variables('vars')); - @include bem.scope('figures') { figcaption { - padding-block: props.get(vars.$pad-b); - font-size: props.get(vars.$font-size); - color: props.get(vars.$text-color); - border-block-end: props.get(vars.$border-width) solid props.get(vars.$border-color); + padding-block: props.get(figure.$pad-b); + font-size: props.get(figure.$font-size); + color: props.get(figure.$text-color); + border-block-end: props.get(figure.$border-width) solid props.get(figure.$border-color); &::before { display: block; diff --git a/src/scopes/_figures.vars.scss b/src/scopes/_figures.vars.scss deleted file mode 100644 index 1737078..0000000 --- a/src/scopes/_figures.vars.scss +++ /dev/null @@ -1,10 +0,0 @@ -@use 'iro-sass/src/props'; -@use '../core.vars' as core; -@use './implicit.vars' as implicit; - -$pad-b: props.def(--s-figures--pad-b, props.get(core.$size--100)) !default; -$border-width: props.def(--s-figures--border-width, props.get(core.$border-width--thin)) !default; -$font-size: props.def(--s-figures--font-size, props.get(core.$font-size--100)) !default; - -$text-color: props.def(--s-figures--text-color, props.get(core.$theme, --text-mute-more), 'color') !default; -$border-color: props.def(--s-figures--border-color, props.get(core.$theme, --border-mute), 'color') !default; -- cgit v1.2.3-70-g09d2