From 02ec99a710ee238836c881d9c9d56ffba8f0deb1 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Wed, 1 Nov 2023 17:57:17 +0100 Subject: Consistent divider height --- src/objects/_divider.scss | 126 +++++++++++++++++++++------------------------- tpl/views/divider.pug | 18 +++++++ 2 files changed, 74 insertions(+), 70 deletions(-) diff --git a/src/objects/_divider.scss b/src/objects/_divider.scss index 93b1914..655080f 100644 --- a/src/objects/_divider.scss +++ b/src/objects/_divider.scss @@ -59,11 +59,35 @@ ), 'colors'); @include iro.bem-object(iro.props-namespace()) { - display: block; - height: fn.dim(--strong --border); - margin-top: fn.dim(--margin-y); - margin-bottom: fn.dim(--margin-y); - background-color: fn.color(--strong --bg); + display: flex; + flex-direction: row; + align-items: center; + height: 1em; + margin-top: fn.dim(--margin-y); + margin-bottom: fn.dim(--margin-y); + color: fn.color(--strong --label); + font-size: fn.dim(--strong --label-font-size); + font-weight: 700; + letter-spacing: .5px; + line-height: 1; + text-transform: uppercase; + + &::before, + &::after { + content: ''; + flex: 1 1 auto; + width: 100%; + height: fn.dim(--strong --border); + background-color: fn.color(--strong --bg); + } + + &::before { + display: block; + } + + @include iro.bem-elem('label') { + flex: 0 0 auto; + } @include iro.bem-modifier('vertical') { align-self: stretch; @@ -72,95 +96,57 @@ margin-top: 0; margin-bottom: 0; background-color: fn.color(--faint --bg); - } - @include iro.bem-modifier('medium') { - height: fn.dim(--medium --border); - background-color: fn.color(--medium --bg); + &::before, + &::after { + display: none; + } } - @include iro.bem-modifier('faint') { - height: fn.dim(--faint --border); - background-color: fn.color(--faint --bg); - } + @include iro.bem-modifier('medium') { + color: fn.color(--medium --label); + font-size: fn.dim(--medium --label-font-size); + font-weight: 500; - @include iro.bem-modifier('red') { - background-color: fn.color(--red --bg); + &::before, + &::after { + height: fn.dim(--medium --border); + background-color: fn.color(--medium --bg); + } } - @include iro.bem-modifier('labelled') { - display: flex; - flex-direction: row; - align-items: center; - height: auto; - border-radius: 0; - background-color: transparent; + @include iro.bem-modifier('faint') { + color: fn.color(--faint --label); + font-size: fn.dim(--faint --label-font-size); + font-weight: 500; &::before, &::after { - content: ''; - display: block; - flex: 1 1 auto; - width: 100%; - height: 3px; - background-color: fn.color(--strong --bg); + height: fn.dim(--faint --border); + background-color: fn.color(--faint --bg); } + } + @include iro.bem-modifier('labelled') { &::before { margin-right: 1em; } &::after { + display: block; margin-left: 1em; } + } - @include iro.bem-elem('label') { - flex: 0 0 auto; - color: fn.color(--strong --label); - font-size: fn.dim(--strong --label-font-size); - font-weight: 700; - letter-spacing: .5px; - text-transform: uppercase; - } - - @include iro.bem-modifier('medium') { - &::before, - &::after { - height: 2px; - background-color: fn.color(--medium --bg); - } - - @include iro.bem-elem('label') { - color: fn.color(--medium --label); - font-size: fn.dim(--medium --label-font-size); - font-weight: 500; - } - } - - @include iro.bem-modifier('faint') { + @each $color in 'blue' 'purple' 'red' 'green' 'yellow' { + @include iro.bem-modifier($color) { &::before, &::after { - height: 1px; - background-color: fn.color(--faint --bg); + background-color: fn.color(--#{$color} --bg); } @include iro.bem-elem('label') { - color: fn.color(--faint --label); - font-size: fn.dim(--faint --label-font-size); - font-weight: 500; - } - } - - @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(--#{$color} --label); - } + color: fn.color(--#{$color} --label); } } } diff --git a/tpl/views/divider.pug b/tpl/views/divider.pug index 9d0b2cb..43a538c 100644 --- a/tpl/views/divider.pug +++ b/tpl/views/divider.pug @@ -19,28 +19,46 @@ mixin view-divider +divider('strong')= 'Strong' +divider('medium')= 'Medium' +divider('faint')= 'Faint' + +divider('strong') + +divider('medium') + +divider('faint') .c-box +divider('strong')(color='blue')= 'Strong' +divider('medium')(color='blue')= 'Medium' +divider('faint')(color='blue')= 'Faint' + +divider('strong')(color='blue') + +divider('medium')(color='blue') + +divider('faint')(color='blue') .c-box +divider('strong')(color='purple')= 'Strong' +divider('medium')(color='purple')= 'Medium' +divider('faint')(color='purple')= 'Faint' + +divider('strong')(color='purple') + +divider('medium')(color='purple') + +divider('faint')(color='purple') .c-box +divider('strong')(color='red')= 'Strong' +divider('medium')(color='red')= 'Medium' +divider('faint')(color='red')= 'Faint' + +divider('strong')(color='red') + +divider('medium')(color='red') + +divider('faint')(color='red') .c-box +divider('strong')(color='green')= 'Strong' +divider('medium')(color='green')= 'Medium' +divider('faint')(color='green')= 'Faint' + +divider('strong')(color='green') + +divider('medium')(color='green') + +divider('faint')(color='green') .c-box +divider('strong')(color='yellow')= 'Strong' +divider('medium')(color='yellow')= 'Medium' +divider('faint')(color='yellow')= 'Faint' + +divider('strong')(color='yellow') + +divider('medium')(color='yellow') + +divider('faint')(color='yellow') -- cgit v1.2.3-70-g09d2