From c188e483a373c6627693a27820fba9e9238cad53 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Tue, 22 Jul 2025 22:16:51 +0200 Subject: Fixed divider --- src/objects/_divider.scss | 35 +++++++++++++++++++++++++++++++++-- src/objects/_divider.vars.scss | 20 +++++++++++++++----- tpl/views/divider.pug | 13 +++++++++++++ 3 files changed, 61 insertions(+), 7 deletions(-) diff --git a/src/objects/_divider.scss b/src/objects/_divider.scss index 4ed8092..9b58e77 100644 --- a/src/objects/_divider.scss +++ b/src/objects/_divider.scss @@ -91,6 +91,26 @@ } } + @include bem.modifier('quiet') { + font-size: props.get(vars.$quiet--label-font-size); + font-weight: 500; + color: props.get(vars.$quiet--label-color); + + &::before, + &::after { + block-size: props.get(vars.$quiet--border-width); + background-color: props.get(vars.$quiet--bg-color); + } + + @include bem.modifier('vertical') { + background-color: props.get(vars.$vertical--quiet--bg-color); + } + + @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); font-weight: 500; @@ -103,11 +123,11 @@ } @include bem.modifier('vertical') { - background-color: props.get(vars.$vertical--faint--bg-color); + background-color: props.get(vars.$vertical--quiet--bg-color); } @include bem.modifier('dot') { - background-color: props.get(vars.$dot--faint--bg-color); + background-color: props.get(vars.$dot--quiet--bg-color); } } @@ -157,6 +177,17 @@ } } + @include bem.modifier('quiet') { + &::before, + &::after { + background-color: props.get(vars.$static-themes, $theme, --quiet, --bg); + } + + @include bem.elem('label') { + color: props.get(vars.$static-themes, $theme, --quiet, --label); + } + } + @include bem.modifier('faint') { &::before, &::after { diff --git a/src/objects/_divider.vars.scss b/src/objects/_divider.vars.scss index 5cd68c1..5a5639b 100644 --- a/src/objects/_divider.vars.scss +++ b/src/objects/_divider.vars.scss @@ -13,6 +13,9 @@ $strong--label-font-size: props.def(--o-divider--strong--label-font-size, props. $medium--border-width: props.def(--o-divider--medium--border-width, props.get(core.$border-width--medium)) !default; $medium--label-font-size: props.def(--o-divider--medium--label-font-size, props.get(core.$font-size--75)) !default; +$quiet--border-width: props.def(--o-divider--quiet--border-width, props.get(core.$border-width--thin)) !default; +$quiet--label-font-size: props.def(--o-divider--quiet--label-font-size, props.get(core.$font-size--50)) !default; + $faint--border-width: props.def(--o-divider--faint--border-width, props.get(core.$border-width--thin)) !default; $faint--label-font-size: props.def(--o-divider--faint--label-font-size, props.get(core.$font-size--50)) !default; @@ -22,12 +25,15 @@ $strong--label-color: props.def(--o-divider--strong--label-color, props.get(core $medium--bg-color: props.def(--o-divider--medium--bg-color, props.get(core.$theme, --border), 'color') !default; $medium--label-color: props.def(--o-divider--medium--label-color, props.get(core.$theme, --text-mute), 'color') !default; -$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; +$quiet--bg-color: props.def(--o-divider--quiet--bg-color, props.get(core.$theme, --border), 'color') !default; +$quiet--label-color: props.def(--o-divider--quiet--label-color, props.get(core.$theme, --text-mute-more), 'color') !default; + +$faint--bg-color: props.def(--o-divider--faint--bg-color, props.get(core.$theme, --border-mute), 'color') !default; +$faint--label-color: props.def(--o-divider--faint--label-color, props.get(core.$theme, --text-disabled), 'color') !default; -$vertical--faint--bg-color: props.def(--o-divider--vertical--faint--bg-color, props.get(core.$theme, --border-mute), 'color') !default; +$vertical--quiet--bg-color: props.def(--o-divider--vertical--quiet--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; +$dot--quiet--bg-color: props.def(--o-divider--dot--quiet--bg-color, props.get(core.$theme, --border-mute), 'color') !default; $static-themes: props.def(--o-divider, (), 'color'); @@ -44,10 +50,14 @@ $static-themes: props.def(--o-divider, (), 'color'); --bg: props.get(core.$transparent-colors, $theme, --300), --label: props.get(core.$transparent-colors, $theme, --500), ), - --faint: ( + --quiet: ( --bg: props.get(core.$transparent-colors, $theme, --300), --label: props.get(core.$transparent-colors, $theme, --500), ), + --faint: ( + --bg: props.get(core.$transparent-colors, $theme, --200), + --label: props.get(core.$transparent-colors, $theme, --400), + ), ) )); } diff --git a/tpl/views/divider.pug b/tpl/views/divider.pug index ea08984..5429ab5 100644 --- a/tpl/views/divider.pug +++ b/tpl/views/divider.pug @@ -10,6 +10,11 @@ mixin view-divider +divider('medium') p= loremIpsum + .c-box + +div-heading('xs')= 'Heading' + +divider('quiet') + p= loremIpsum + .c-box +div-heading('xs')= 'Heading' +divider('faint') @@ -18,28 +23,34 @@ mixin view-divider .c-box +divider('strong')= 'Strong' +divider('medium')= 'Medium' + +divider('quiet')= 'Quiet' +divider('faint')= 'Faint' +divider('strong') +divider('medium') + +divider('quiet') +divider('faint') .c-box .l-media(style="height: 1em") +divider('strong')(vertical=true class="l-media__block") +divider('medium')(vertical=true class="l-media__block") + +divider('quiet')(vertical=true class="l-media__block") +divider('faint')(vertical=true class="l-media__block") .l-media(style="height: 1em") +divider('strong')(dot=true class="l-media__block") +divider('medium')(dot=true class="l-media__block") + +divider('quiet')(dot=true class="l-media__block") +divider('faint')(dot=true class="l-media__block") each theme in ['accent', 'negative'] .c-box +divider('strong')(color=theme)= 'Strong' +divider('medium')(color=theme)= 'Medium' + +divider('quiet')(color=theme)= 'Quiet' +divider('faint')(color=theme)= 'Faint' +divider('strong')(color=theme) +divider('medium')(color=theme) + +divider('quiet')(color=theme) +divider('faint')(color=theme) each theme in ['static-black', 'static-white'] @@ -49,7 +60,9 @@ mixin view-divider .c-box(style=`background-color: var(--colors--blue-static--${bg});`) +divider('strong')(color=theme)= 'Strong' +divider('medium')(color=theme)= 'Medium' + +divider('quiet')(color=theme)= 'Quiet' +divider('faint')(color=theme)= 'Faint' +divider('strong')(color=theme) +divider('medium')(color=theme) + +divider('quiet')(color=theme) +divider('faint')(color=theme) -- cgit v1.2.3-70-g09d2