From 2c48ef85de28539fd088b9114a6ca28351f593af Mon Sep 17 00:00:00 2001 From: Volpeon Date: Sat, 12 Feb 2022 08:02:14 +0100 Subject: Made dialog scrollable --- src/_utils.scss | 4 ++++ src/objects/_backdrop.scss | 1 + src/objects/_dialog.scss | 48 ++++++++++++++++++++++++++++++---------------- tpl/index.pug | 11 ++++++++++- tpl/objects/backdrop.pug | 2 +- tpl/objects/dialog.pug | 2 +- tpl/objects/rule.pug | 2 +- 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 @@ @include iro.bem-utility('pr') { position: relative; } + +@include iro.bem-utility('mt-0') { + margin-top: 0; +} 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 @@ ), 'sm'); @include iro.bem-object(iro.props-namespace()) { + display: flex; position: fixed; z-index: fn.dim(--z-index); 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 @@ @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, + --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, + --title-body-spacing: fn.global-dim(--spacing --y --sm), ), ), 'dims'); @@ -20,14 +21,17 @@ ), '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); + display: grid; + grid-template-rows: auto auto 1fr auto; + grid-template-areas: 'header' 'rule' 'body' 'footer'; + 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); @@ -38,7 +42,13 @@ } @include iro.bem-elem('header') { - padding-bottom: .5rem; + grid-area: header; + margin-bottom: fn.dim(--title-body-spacing); + } + + @include iro.bem-elem('rule') { + grid-area: rule; + margin: 0; } @include iro.bem-elem('title') { @@ -46,12 +56,16 @@ } @include iro.bem-elem('body') { - padding-top: .5rem; + grid-area: body; + min-height: 0; + margin-top: fn.dim(--title-body-spacing); + overflow: auto; } @include iro.bem-elem('footer') { + grid-area: footer; justify-content: flex-end; - padding-top: fn.dim(--pad-y); + margin-top: fn.dim(--pad-y); } } } 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 @@ - - let loremIpsum = 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat' + 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.'; include layouts/container.pug @@ -528,4 +528,13 @@ html +dialog('Lorem ipsum') = loremIpsum + +box + +backdrop + +dialog('Lorem ipsum') + p.u-mt-0= loremIpsum + p= loremIpsum + p= loremIpsum + p= loremIpsum + p= loremIpsum + 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 @@ mixin backdrop - .o-backdrop.u-ps(style={ width: '100%', 'min-height': '5em' }) + .o-backdrop.u-ps(style={ width: '100%', 'min-height': '5em', 'max-height': '40em' }) 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) header.o-dialog__header +div-heading('lg')(class='o-dialog__title') = title - +rule('medium') + +rule('medium')(class='o-dialog__rule') section.o-dialog__body block 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) ['o-rule--' + level]: true } - div(class=classes) + div(class=classes)&attributes(attributes) if block .o-rule__label block -- cgit v1.2.3-54-g00ecf