summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--src/objects/_backdrop.scss1
-rw-r--r--src/objects/_dialog.scss10
-rw-r--r--tpl/objects/dialog.pug5
-rw-r--r--tpl/views/dialog.pug12
4 files changed, 25 insertions, 3 deletions
diff --git a/src/objects/_backdrop.scss b/src/objects/_backdrop.scss
index 7653a99..fee5577 100644
--- a/src/objects/_backdrop.scss
+++ b/src/objects/_backdrop.scss
@@ -31,6 +31,7 @@
31 left: 0; 31 left: 0;
32 box-sizing: border-box; 32 box-sizing: border-box;
33 flex-direction: column; 33 flex-direction: column;
34 overflow: auto;
34 background-color: fn.color(--bg); 35 background-color: fn.color(--bg);
35 color: fn.global-color(--fg); 36 color: fn.global-color(--fg);
36 backdrop-filter: blur(fn.dim(--blur)); 37 backdrop-filter: blur(fn.dim(--blur));
diff --git a/src/objects/_dialog.scss b/src/objects/_dialog.scss
index b935f8d..a85fd1f 100644
--- a/src/objects/_dialog.scss
+++ b/src/objects/_dialog.scss
@@ -58,6 +58,7 @@
58 'sidebar footer'; 58 'sidebar footer';
59 position: relative; 59 position: relative;
60 box-sizing: border-box; 60 box-sizing: border-box;
61 flex: 0 0 auto;
61 width: 100%; 62 width: 100%;
62 max-width: fn.dim(--width-md); 63 max-width: fn.dim(--width-md);
63 margin: 0 auto; 64 margin: 0 auto;
@@ -120,6 +121,15 @@
120 padding: fn.dim(--body --pad-y) fn.dim(--body --pad-x); 121 padding: fn.dim(--body --pad-y) fn.dim(--body --pad-x);
121 } 122 }
122 123
124 @include iro.bem-modifier('scrollable') {
125 flex-shrink: 1;
126
127 @include iro.bem-elem('body') {
128 overflow: auto;
129 scrollbar-color: fn.global-color(--obj-lo) transparent;
130 }
131 }
132
123 @include iro.bem-modifier('flat') { 133 @include iro.bem-modifier('flat') {
124 @include iro.bem-elem('header') { 134 @include iro.bem-elem('header') {
125 border-bottom: 0; 135 border-bottom: 0;
diff --git a/tpl/objects/dialog.pug b/tpl/objects/dialog.pug
index 2a2530f..26b953b 100644
--- a/tpl/objects/dialog.pug
+++ b/tpl/objects/dialog.pug
@@ -10,8 +10,9 @@ mixin dialog(title)
10 block ? block() : undefined 10 block ? block() : undefined
11 11
12 let classes = { 12 let classes = {
13 'o-dialog': true, 13 'o-dialog': true,
14 'o-dialog--flat': attributes.flat, 14 'o-dialog--flat': attributes.flat,
15 'o-dialog--scrollable': attributes.scrollable,
15 } 16 }
16 17
17 let headerClass = { 18 let headerClass = {
diff --git a/tpl/views/dialog.pug b/tpl/views/dialog.pug
index 6ef06df..5a659dd 100644
--- a/tpl/views/dialog.pug
+++ b/tpl/views/dialog.pug
@@ -8,7 +8,17 @@ mixin view-dialog
8 8
9 .c-box 9 .c-box
10 +backdrop(pad=true) 10 +backdrop(pad=true)
11 +dialog('Lorem ipsum')(bodyClass='l-overflow') 11 +dialog('Lorem ipsum')
12 +slot('body')
13 p.u-mt-0= loremIpsum
14 p= loremIpsum
15 p= loremIpsum
16 p= loremIpsum
17 p= loremIpsum
18
19 .c-box
20 +backdrop(pad=true)
21 +dialog('Lorem ipsum')(scrollable=true)
12 +slot('body') 22 +slot('body')
13 p.u-mt-0= loremIpsum 23 p.u-mt-0= loremIpsum
14 p= loremIpsum 24 p= loremIpsum