From 02ec99a710ee238836c881d9c9d56ffba8f0deb1 Mon Sep 17 00:00:00 2001
From: Volpeon <git@volpeon.ink>
Date: Wed, 1 Nov 2023 17:57:17 +0100
Subject: Consistent divider height

---
 src/objects/_divider.scss | 126 +++++++++++++++++++++-------------------------
 1 file changed, 56 insertions(+), 70 deletions(-)

(limited to 'src/objects')

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);
                 }
             }
         }
-- 
cgit v1.2.3-70-g09d2