summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--src/_utils.scss4
-rw-r--r--src/objects/_backdrop.scss1
-rw-r--r--src/objects/_dialog.scss48
-rw-r--r--tpl/index.pug11
-rw-r--r--tpl/objects/backdrop.pug2
-rw-r--r--tpl/objects/dialog.pug2
-rw-r--r--tpl/objects/rule.pug2
7 files changed, 49 insertions, 21 deletions
diff --git a/src/_utils.scss b/src/_utils.scss
index 7525f34..f663733 100644
--- a/src/_utils.scss
+++ b/src/_utils.scss
@@ -20,3 +20,7 @@
20@include iro.bem-utility('pr') { 20@include iro.bem-utility('pr') {
21 position: relative; 21 position: relative;
22} 22}
23
24@include iro.bem-utility('mt-0') {
25 margin-top: 0;
26}
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}
diff --git a/tpl/index.pug b/tpl/index.pug
index 605fa35..a6a8f87 100644
--- a/tpl/index.pug
+++ b/tpl/index.pug
@@ -1,5 +1,5 @@
1- 1-
2 let loremIpsum = 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat' 2 let loremIpsum = 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.';
3 3
4include layouts/container.pug 4include layouts/container.pug
5 5
@@ -528,4 +528,13 @@ html
528 +dialog('Lorem ipsum') 528 +dialog('Lorem ipsum')
529 = loremIpsum 529 = loremIpsum
530 530
531 +box
532 +backdrop
533 +dialog('Lorem ipsum')
534 p.u-mt-0= loremIpsum
535 p= loremIpsum
536 p= loremIpsum
537 p= loremIpsum
538 p= loremIpsum
539
531 540
diff --git a/tpl/objects/backdrop.pug b/tpl/objects/backdrop.pug
index 6ad72d7..3e3eb7f 100644
--- a/tpl/objects/backdrop.pug
+++ b/tpl/objects/backdrop.pug
@@ -1,3 +1,3 @@
1mixin backdrop 1mixin backdrop
2 .o-backdrop.u-ps(style={ width: '100%', 'min-height': '5em' }) 2 .o-backdrop.u-ps(style={ width: '100%', 'min-height': '5em', 'max-height': '40em' })
3 block 3 block
diff --git a/tpl/objects/dialog.pug b/tpl/objects/dialog.pug
index 3cbe95e..7e3e2d6 100644
--- a/tpl/objects/dialog.pug
+++ b/tpl/objects/dialog.pug
@@ -7,7 +7,7 @@ mixin dialog(title)
7 header.o-dialog__header 7 header.o-dialog__header
8 +div-heading('lg')(class='o-dialog__title') 8 +div-heading('lg')(class='o-dialog__title')
9 = title 9 = title
10 +rule('medium') 10 +rule('medium')(class='o-dialog__rule')
11 section.o-dialog__body 11 section.o-dialog__body
12 block 12 block
13 footer.o-dialog__footer.l-button-group 13 footer.o-dialog__footer.l-button-group
diff --git a/tpl/objects/rule.pug b/tpl/objects/rule.pug
index 63a039f..b2f3a38 100644
--- a/tpl/objects/rule.pug
+++ b/tpl/objects/rule.pug
@@ -6,7 +6,7 @@ mixin rule(level)
6 ['o-rule--' + level]: true 6 ['o-rule--' + level]: true
7 } 7 }
8 8
9 div(class=classes) 9 div(class=classes)&attributes(attributes)
10 if block 10 if block
11 .o-rule__label 11 .o-rule__label
12 block 12 block