summaryrefslogtreecommitdiffstats
path: root/src/objects
diff options
context:
space:
mode:
Diffstat (limited to 'src/objects')
-rw-r--r--src/objects/_backdrop.scss1
-rw-r--r--src/objects/_dialog.scss48
2 files changed, 32 insertions, 17 deletions
diff --git a/src/objects/_backdrop.scss b/src/objects/_backdrop.scss
index bc63a27..e989e53 100644
--- a/src/objects/_backdrop.scss
+++ b/src/objects/_backdrop.scss
@@ -23,6 +23,7 @@
23 ), 'sm'); 23 ), 'sm');
24 24
25 @include iro.bem-object(iro.props-namespace()) { 25 @include iro.bem-object(iro.props-namespace()) {
26 display: flex;
26 position: fixed; 27 position: fixed;
27 z-index: fn.dim(--z-index); 28 z-index: fn.dim(--z-index);
28 top: 0; 29 top: 0;
diff --git a/src/objects/_dialog.scss b/src/objects/_dialog.scss
index 4f18b08..d83f348 100644
--- a/src/objects/_dialog.scss
+++ b/src/objects/_dialog.scss
@@ -4,12 +4,13 @@
4@include iro.props-namespace('dialog') { 4@include iro.props-namespace('dialog') {
5 @include iro.props-store(( 5 @include iro.props-store((
6 --dims: ( 6 --dims: (
7 --pad-x: iro.fn-px-to-rem(40px), 7 --pad-x: iro.fn-px-to-rem(40px),
8 --pad-y: iro.fn-px-to-rem(40px), 8 --pad-y: iro.fn-px-to-rem(40px),
9 --width-sm: iro.fn-px-to-rem(500px), 9 --width-sm: iro.fn-px-to-rem(500px),
10 --width-md: iro.fn-px-to-rem(800px), 10 --width-md: iro.fn-px-to-rem(800px),
11 --width-lg: iro.fn-px-to-rem(1100px), 11 --width-lg: iro.fn-px-to-rem(1100px),
12 --rounding: 3px, 12 --rounding: 3px,
13 --title-body-spacing: fn.global-dim(--spacing --y --sm),
13 ), 14 ),
14 ), 'dims'); 15 ), 'dims');
15 16
@@ -20,14 +21,17 @@
20 ), 'colors'); 21 ), 'colors');
21 22
22 @include iro.bem-object(iro.props-namespace()) { 23 @include iro.bem-object(iro.props-namespace()) {
23 max-width: fn.dim(--width-md); 24 display: grid;
24 margin: 0 auto; 25 grid-template-rows: auto auto 1fr auto;
25 padding: fn.dim(--pad-y) fn.dim(--pad-x); 26 grid-template-areas: 'header' 'rule' 'body' 'footer';
26 overflow: hidden; 27 max-width: fn.dim(--width-md);
27 border-radius: fn.dim(--rounding); 28 margin: 0 auto;
28 background-color: fn.global-color(--bg); 29 padding: fn.dim(--pad-y) fn.dim(--pad-x);
29 box-shadow: fn.color(--shadow); 30 overflow: hidden;
30 color: fn.global-color(--fg); 31 border-radius: fn.dim(--rounding);
32 background-color: fn.global-color(--bg);
33 box-shadow: fn.color(--shadow);
34 color: fn.global-color(--fg);
31 35
32 @include iro.bem-modifier('sm') { 36 @include iro.bem-modifier('sm') {
33 max-width: fn.dim(--width-sm); 37 max-width: fn.dim(--width-sm);
@@ -38,7 +42,13 @@
38 } 42 }
39 43
40 @include iro.bem-elem('header') { 44 @include iro.bem-elem('header') {
41 padding-bottom: .5rem; 45 grid-area: header;
46 margin-bottom: fn.dim(--title-body-spacing);
47 }
48
49 @include iro.bem-elem('rule') {
50 grid-area: rule;
51 margin: 0;
42 } 52 }
43 53
44 @include iro.bem-elem('title') { 54 @include iro.bem-elem('title') {
@@ -46,12 +56,16 @@
46 } 56 }
47 57
48 @include iro.bem-elem('body') { 58 @include iro.bem-elem('body') {
49 padding-top: .5rem; 59 grid-area: body;
60 min-height: 0;
61 margin-top: fn.dim(--title-body-spacing);
62 overflow: auto;
50 } 63 }
51 64
52 @include iro.bem-elem('footer') { 65 @include iro.bem-elem('footer') {
66 grid-area: footer;
53 justify-content: flex-end; 67 justify-content: flex-end;
54 padding-top: fn.dim(--pad-y); 68 margin-top: fn.dim(--pad-y);
55 } 69 }
56 } 70 }
57} 71}