From cc5329a5f4d3ea91cac93bc7f9b8f943b7ced226 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Wed, 22 Jul 2026 12:27:09 +0200 Subject: Paths --- src/objects/_divider.scss | 136 +++++++++++++++++++++++----------------------- 1 file changed, 68 insertions(+), 68 deletions(-) (limited to 'src/objects/_divider.scss') diff --git a/src/objects/_divider.scss b/src/objects/_divider.scss index d81284b..f082d12 100644 --- a/src/objects/_divider.scss +++ b/src/objects/_divider.scss @@ -1,38 +1,38 @@ -@use 'sass:map'; -@use 'sass:meta'; -@use 'sass:string'; -@use 'pkg:iro-sass/src/bem'; -@use 'pkg:iro-sass/src/props'; -@use '../props' as *; -@use '../core.vars' as core; +@use "sass:map"; +@use "sass:meta"; +@use "sass:string"; +@use "pkg:iro-sass/bem"; +@use "pkg:iro-sass/props"; +@use "../props" as *; +@use "../core.vars" as core; -@forward 'divider.vars'; -@use 'divider.vars' as vars; +@forward "divider.vars"; +@use "divider.vars" as vars; @mixin styles { - @include materialize-at-root(meta.module-variables('vars')); - - @include bem.object('divider') { - display: flex; - flex: 0 0 auto; - flex-direction: row; - align-items: center; - block-size: 1em; - margin-block: props.get(vars.$margin-b); - font-size: props.get(vars.$strong--label-font-size); - font-weight: 700; - line-height: 1; - color: props.get(vars.$strong--label-color); - text-transform: uppercase; - letter-spacing: props.get(vars.$letter-spacing); + @include materialize-at-root(meta.module-variables("vars")); + + @include bem.object("divider") { + display: flex; + flex: 0 0 auto; + flex-direction: row; + align-items: center; + block-size: 1em; + margin-block: props.get(vars.$margin-b); + font-size: props.get(vars.$strong--label-font-size); + font-weight: 700; + line-height: 1; + color: props.get(vars.$strong--label-color); + text-transform: uppercase; + letter-spacing: props.get(vars.$letter-spacing); background-color: transparent; &::before, &::after { - flex: 1 1 auto; - inline-size: 100%; - block-size: props.get(vars.$strong--border-width); - content: ''; + flex: 1 1 auto; + inline-size: 100%; + block-size: props.get(vars.$strong--border-width); + content: ""; background-color: props.get(vars.$strong--bg-color); } @@ -40,15 +40,15 @@ display: block; } - @include bem.elem('label') { + @include bem.elem("label") { flex: 0 0 auto; } - @include bem.modifier('vertical') { - align-self: stretch; - inline-size: props.get(vars.$vertical--border-width); - block-size: auto; - margin-block: 0; + @include bem.modifier("vertical") { + align-self: stretch; + inline-size: props.get(vars.$vertical--border-width); + block-size: auto; + margin-block: 0; background-color: props.get(vars.$strong--bg-color); &::before, @@ -57,13 +57,13 @@ } } - @include bem.modifier('dot') { - align-self: center; - inline-size: props.get(vars.$dot--size); - block-size: props.get(vars.$dot--size); - margin-block: 0; + @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); + border-radius: props.get(vars.$dot--size); &::before, &::after { @@ -71,73 +71,73 @@ } } - @include bem.modifier('medium') { - font-size: props.get(vars.$medium--label-font-size); + @include bem.modifier("medium") { + font-size: props.get(vars.$medium--label-font-size); font-weight: 500; - color: props.get(vars.$medium--label-color); + color: props.get(vars.$medium--label-color); &::before, &::after { - block-size: props.get(vars.$medium--border-width); + block-size: props.get(vars.$medium--border-width); background-color: props.get(vars.$medium--bg-color); } - @include bem.modifier('vertical') { + @include bem.modifier("vertical") { background-color: props.get(vars.$medium--bg-color); } - @include bem.modifier('dot') { + @include bem.modifier("dot") { background-color: props.get(vars.$medium--bg-color); } } - @include bem.modifier('quiet') { - font-size: props.get(vars.$quiet--label-font-size); + @include bem.modifier("quiet") { + font-size: props.get(vars.$quiet--label-font-size); font-weight: 500; - color: props.get(vars.$quiet--label-color); + color: props.get(vars.$quiet--label-color); &::before, &::after { - block-size: props.get(vars.$quiet--border-width); + block-size: props.get(vars.$quiet--border-width); background-color: props.get(vars.$quiet--bg-color); } - @include bem.modifier('vertical') { + @include bem.modifier("vertical") { background-color: props.get(vars.$vertical--quiet--bg-color); } - @include bem.modifier('dot') { + @include bem.modifier("dot") { background-color: props.get(vars.$dot--quiet--bg-color); } } - @include bem.modifier('faint') { - font-size: props.get(vars.$faint--label-font-size); + @include bem.modifier("faint") { + font-size: props.get(vars.$faint--label-font-size); font-weight: 500; - color: props.get(vars.$faint--label-color); + color: props.get(vars.$faint--label-color); &::before, &::after { - block-size: props.get(vars.$faint--border-width); + block-size: props.get(vars.$faint--border-width); background-color: props.get(vars.$faint--bg-color); } - @include bem.modifier('vertical') { + @include bem.modifier("vertical") { background-color: props.get(vars.$vertical--quiet--bg-color); } - @include bem.modifier('dot') { + @include bem.modifier("dot") { background-color: props.get(vars.$dot--quiet--bg-color); } } - @include bem.modifier('labelled') { + @include bem.modifier("labelled") { &::before { margin-inline-end: 1em; } &::after { - display: block; + display: block; margin-inline-start: 1em; } } @@ -149,7 +149,7 @@ background-color: props.get(vars.$themes, $theme, --bg); } - @include bem.elem('label') { + @include bem.elem("label") { color: props.get(vars.$themes, $theme, --label); } } @@ -162,39 +162,39 @@ background-color: props.get(vars.$static-themes, $theme, --strong, --bg); } - @include bem.elem('label') { + @include bem.elem("label") { color: props.get(vars.$static-themes, $theme, --strong, --label); } - @include bem.modifier('medium') { + @include bem.modifier("medium") { &::before, &::after { background-color: props.get(vars.$static-themes, $theme, --medium, --bg); } - @include bem.elem('label') { + @include bem.elem("label") { color: props.get(vars.$static-themes, $theme, --medium, --label); } } - @include bem.modifier('quiet') { + @include bem.modifier("quiet") { &::before, &::after { background-color: props.get(vars.$static-themes, $theme, --quiet, --bg); } - @include bem.elem('label') { + @include bem.elem("label") { color: props.get(vars.$static-themes, $theme, --quiet, --label); } } - @include bem.modifier('faint') { + @include bem.modifier("faint") { &::before, &::after { background-color: props.get(vars.$static-themes, $theme, --faint, --bg); } - @include bem.elem('label') { + @include bem.elem("label") { color: props.get(vars.$static-themes, $theme, --faint, --label); } } -- cgit v1.3.1