WIP: Refactoring

1 files changed, 152 insertions, 0 deletions

diff --git a/src/.old/objects/_dialog.scss b/src/.old/objects/_dialog.scss
new file mode 100644
index 0000000..9333ce6
--- /dev/null
+++ b/src/.old/objects/_dialog.scss
@@ -0,0 +1,152 @@
+@use 'iro-sass/src/index' as iro;
+@use '../functions' as fn;
+
+@include iro.props-namespace('dialog') {
+    @include iro.props-store((
+        --dims: (
+            --width-sm: iro.fn-px-to-rem(500px),
+            --width-md: iro.fn-px-to-rem(800px),
+            --width-lg: iro.fn-px-to-rem(1100px),
+            --rounding: 4px,
+            --border:   1px,
+
+            --header: (
+                --pad-x: fn.global-dim(--size --75),
+                --pad-y: fn.global-dim(--size --75),
+            ),
+
+            --sidebar: (
+                --pad-x: fn.global-dim(--size --75),
+                --pad-y: fn.global-dim(--size --75),
+            ),
+
+            --body: (
+                --pad-x: fn.global-dim(--size --200),
+                --pad-y: fn.global-dim(--size --200),
+            )
+        ),
+    ), 'dims');
+
+    @include iro.props-store((
+        --dims: (
+            --pad-x: fn.global-dim(--size --300),
+            --pad-y: fn.global-dim(--size --300),
+        ),
+    ), 'md');
+
+    @include iro.props-store((
+        --colors: (
+            --border: fn.global-color(--border --stable),
+        ),
+    ), 'colors');
+
+    @include iro.bem-object(iro.props-namespace()) {
+        display:               grid;
+        grid-template-rows:    auto auto 1fr auto auto;
+        grid-template-columns: auto 1fr;
+        grid-template-areas:
+            'sidebar-header header'
+            'sidebar        top'
+            'sidebar        body'
+            'sidebar        bottom'
+            'sidebar        footer';
+        position:              relative;
+        box-sizing:            border-box;
+        flex:                  0 0 auto;
+        width:                 100%;
+        max-width:             fn.dim(--width-md);
+        margin:                0 auto;
+        overflow:              hidden;
+        border-radius:         fn.dim(--rounding);
+        background-clip:       padding-box;
+        background-color:      fn.global-color(--bg);
+        color:                 fn.global-color(--fg);
+
+        @include iro.bem-modifier('sm') {
+            max-width: fn.dim(--width-sm);
+        }
+
+        @include iro.bem-modifier('lg') {
+            max-width: fn.dim(--width-lg);
+        }
+
+        @include iro.bem-elem('header') {
+            grid-area: sidebar-header / sidebar-header / header / header;
+            padding:   fn.dim(--header --pad-y) fn.dim(--header --pad-x);
+
+            @include iro.bem-modifier('sidebar') {
+                grid-area:    sidebar-header;
+                border-right: 1px solid fn.color(--border);
+    
+                @include iro.bem-sibling-elem('header') {
+                    grid-area: header;
+                }
+            }
+        }
+
+        @include iro.bem-elem('title') {
+            margin-top:    0;
+            padding-right: calc(fn.dim(--body --pad-x) - fn.dim(--header --pad-x));
+            padding-left:  calc(fn.dim(--body --pad-x) - fn.dim(--header --pad-x));
+        }
+
+        @include iro.bem-elem('close-btn') {
+            margin-left: auto;
+        }
+
+        @include iro.bem-elem('sidebar') {
+            grid-area:    sidebar;
+            padding:      fn.dim(--sidebar --pad-y) fn.dim(--sidebar --pad-x);
+            overflow:     auto;
+            border-right: 1px solid fn.color(--border);
+        }
+
+        @include iro.bem-elem('top') {
+            grid-area: top;
+            min-width: 0;
+            padding:   fn.dim(--body --pad-y) fn.dim(--body --pad-x);
+
+            @include iro.bem-sibling-elem('body') {
+                padding-top: 0;
+            }
+        }
+
+        @include iro.bem-elem('bottom') {
+            grid-area: bottom;
+            min-width: 0;
+            padding:   fn.dim(--body --pad-y) fn.dim(--body --pad-x);
+
+            @include iro.bem-sibling-elem('body') {
+                padding-bottom: 0;
+            }
+        }
+
+        @include iro.bem-elem('body') {
+            grid-area:  body;
+            min-width:  0;
+            min-height: 0;
+            padding:    fn.dim(--body --pad-y) fn.dim(--body --pad-x);
+        }
+
+        @include iro.bem-elem('footer') {
+            grid-area:       footer;
+            justify-content: flex-end;
+            padding:         fn.dim(--body --pad-y) fn.dim(--body --pad-x);
+        }
+
+        @include iro.bem-modifier('scrollable') {
+            flex-shrink: 1;
+
+            @include iro.bem-elem('body') {
+                overflow:        auto;
+                scrollbar-color: fn.global-color(--obj-lo) transparent;
+            }
+        }
+
+        @include iro.bem-modifier('flat') {
+            @include iro.bem-elem('body') {
+                padding-top: 0;
+            }
+        }
+    }
+}