Lots of updates, especially dialog

1 files changed, 131 insertions, 0 deletions

diff --git a/src/objects/_divider.scss b/src/objects/_divider.scss
new file mode 100644
index 0000000..cef598f
--- /dev/null
+++ b/src/objects/_divider.scss
@@ -0,0 +1,131 @@
+@use 'iro-sass/src/index' as iro;
+@use '../functions' as fn;
+
+@include iro.props-namespace('divider') {
+    @include iro.props-store((
+        --dims: (
+            --margin-y: fn.global-dim(--size --85),
+    
+            --strong: (
+                --border-width:    fn.global-dim(--border-width --thick),
+                --label-font-size: fn.global-dim(--font-size --100),
+            ),
+            --medium: (
+                --border-width:    fn.global-dim(--border-width --medium),
+                --label-font-size: fn.global-dim(--font-size --75),
+            ),
+            --faint: (
+                --border-width:    fn.global-dim(--border-width --thin),
+                --label-font-size: fn.global-dim(--font-size --50),
+            ),
+        ),
+    ), 'dims');
+
+    @include iro.props-store((
+        --colors: (
+            --strong: (
+                --bg:    fn.global-color(--fg),
+                --label: fn.global-color(--fg),
+            ),
+            --medium: (
+                --bg:    fn.global-color(--obj),
+                --label: fn.global-color(--fg-hi),
+            ),
+            --faint: (
+                --bg:    fn.global-color(--obj),
+                --label: fn.global-color(--fg-hi2),
+            ),
+        ),
+    ), 'colors');
+
+    @include iro.bem-object(iro.props-namespace()) {
+        display:          block;
+        height:           fn.dim(--strong --border-width);
+        margin-top:       fn.dim(--margin-y);
+        margin-bottom:    fn.dim(--margin-y);
+        background-color: fn.color(--strong --bg);
+
+        @include iro.bem-modifier('vertical') {
+            align-self:       stretch;
+            width:            1px;
+            height:           auto;
+            margin-top:       0;
+            margin-bottom:    0;
+            background-color: fn.color(--faint --bg);
+        }
+
+        @include iro.bem-modifier('medium') {
+            height:           fn.dim(--medium --border-width);
+            background-color: fn.color(--medium --bg);
+        }
+
+        @include iro.bem-modifier('faint') {
+            height:           fn.dim(--faint --border-width);
+            background-color: fn.color(--faint --bg);
+        }
+
+        @include iro.bem-modifier('labelled') {
+            display:          flex;
+            flex-direction:   row;
+            align-items:      center;
+            height:           auto;
+            border-radius:    0;
+            background-color: transparent;
+
+            &::before,
+            &::after {
+                content:          '';
+                display:          block;
+                flex:             1 1 auto;
+                width:            100%;
+                height:           3px;
+                background-color: fn.color(--strong --bg);
+            }
+
+            &::before {
+                margin-right: 1em;
+            }
+
+            &::after {
+                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') {
+                &::before,
+                &::after {
+                    height:           1px;
+                    background-color: fn.color(--faint --bg);
+                }
+
+                @include iro.bem-elem('label') {
+                    color:       fn.color(--faint --label);
+                    font-size:   fn.dim(--faint --label-font-size);
+                    font-weight: 500;
+                }
+            }
+        }
+    }
+}