Added backdrop and dialog

5 files changed, 105 insertions, 8 deletions

diff --git a/src/_utils.scss b/src/_utils.scss
index 72c1f2f..7525f34 100644
--- a/src/_utils.scss
+++ b/src/_utils.scss
@@ -12,3 +12,11 @@
     overflow:      hidden;
     text-overflow: ellipsis;
 }
+
+@include iro.bem-utility('ps') {
+    position: static;
+}
+
+@include iro.bem-utility('pr') {
+    position: relative;
+}
diff --git a/src/index.scss b/src/index.scss
index 44fba76..3796c18 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -21,6 +21,8 @@
 @use 'objects/avatar';
 @use 'objects/action-menu';
 @use 'objects/menu';
+@use 'objects/backdrop';
+@use 'objects/dialog';
 
 @use 'layouts/form';
 
diff --git a/src/objects/_action-menu.scss b/src/objects/_action-menu.scss
index 1e95b39..3c10604 100644
--- a/src/objects/_action-menu.scss
+++ b/src/objects/_action-menu.scss
@@ -4,8 +4,6 @@
 @include iro.props-namespace('action-menu') {
     @include iro.props-store((
         --dims: (
-            --x:         0,
-            --y:         0,
             --pad-x:     0,
             --pad-y:     .3rem,
             --separator: .3rem,
@@ -45,8 +43,8 @@
     @include iro.bem-object(iro.props-namespace()) {
         position:         absolute;
         z-index:          10000;
-        top:              fn.dim(--y);
-        left:             fn.dim(--x);
+        top:              var(--y);
+        left:             var(--x);
         padding:          fn.dim(--pad-y) fn.dim(--pad-x);
         border:           fn.dim(--border) solid fn.color(--border);
         border-radius:    fn.dim(--rounding);
@@ -54,10 +52,6 @@
         box-shadow:       fn.color(--shadow);
         color:            fn.global-color(--fg);
 
-        @include iro.bem-modifier('static') {
-            position: static;
-        }
-
         @include iro.bem-modifier('up-left') {
             transform: translate(0, -100%);
         }
diff --git a/src/objects/_backdrop.scss b/src/objects/_backdrop.scss
new file mode 100644
index 0000000..bc63a27
--- /dev/null
+++ b/src/objects/_backdrop.scss
@@ -0,0 +1,36 @@
+@use 'iro-sass/src/index' as iro;
+@use '../functions' as fn;
+
+@include iro.props-namespace('backdrop') {
+    @include iro.props-store((
+        --dims: (
+            --z-index: 10000,
+            --pad-x:   iro.fn-px-to-rem(14px),
+            --pad-y:   iro.fn-px-to-rem(60px),
+        ),
+    ), 'dims');
+
+    @include iro.props-store((
+        --colors: (
+            --bg: rgba(#000, .3),
+        ),
+    ), 'colors');
+
+    @include iro.props-store((
+        --dims: (
+            --pad-y: iro.fn-px-to-rem(30px),
+        )
+    ), 'sm');
+
+    @include iro.bem-object(iro.props-namespace()) {
+        position:         fixed;
+        z-index:          fn.dim(--z-index);
+        top:              0;
+        right:            0;
+        bottom:           0;
+        left:             0;
+        box-sizing:       border-box;
+        padding:          fn.dim(--pad-y) fn.dim(--pad-x);
+        background-color: fn.color(--bg);
+    }
+}
diff --git a/src/objects/_dialog.scss b/src/objects/_dialog.scss
new file mode 100644
index 0000000..453b32b
--- /dev/null
+++ b/src/objects/_dialog.scss
@@ -0,0 +1,57 @@
+@use 'iro-sass/src/index' as iro;
+@use '../functions' as fn;
+
+@include iro.props-namespace('dialog') {
+    @include iro.props-store((
+        --dims: (
+            --pad-x:     iro.fn-px-to-rem(40px),
+            --pad-y:     iro.fn-px-to-rem(40px),
+            --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:  3px,
+        ),
+    ), 'dims');
+
+    @include iro.props-store((
+        --colors: (
+            --shadow: 0 .2em .5em rgba(#000, .2),
+        ),
+    ), 'colors');
+
+    @include iro.bem-object(iro.props-namespace()) {
+        max-width:        fn.dim(--width-md);
+        margin:           0 auto;
+        padding:          fn.dim(--pad-y) fn.dim(--pad-x);
+        overflow:         hidden;
+        border-radius:    fn.dim(--rounding);
+        background-color: fn.global-color(--bg);
+        box-shadow:       fn.color(--shadow);
+        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') {
+            padding-bottom: .5rem;
+        }
+
+        @include iro.bem-elem('title') {
+            margin-top: 0;
+        }
+
+        @include iro.bem-elem('body') {
+            padding-top: .5rem;
+        }
+
+        @include iro.bem-elem('footer') {
+            padding-top: fn.dim(--pad-y);
+            text-align:  right;
+        }
+    }
+}