From bdd534a2fea536f4143d29dd26138a4705c1f825 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Tue, 8 Mar 2022 22:00:33 +0100 Subject: Improved dialog --- src/_layouts.scss | 2 + src/layouts/_card.scss | 9 ++++ src/layouts/_flex.scss | 23 +++++++++ src/layouts/_overflow.scss | 9 ++++ src/objects/_dialog.scss | 115 ++++++++++++++++++++++++++++----------------- src/objects/_lightbox.scss | 2 +- src/objects/_menu.scss | 18 +++---- src/objects/_rule.scss | 8 ++++ 8 files changed, 135 insertions(+), 51 deletions(-) create mode 100644 src/layouts/_flex.scss create mode 100644 src/layouts/_overflow.scss (limited to 'src') diff --git a/src/_layouts.scss b/src/_layouts.scss index 99a003e..3a4c32b 100644 --- a/src/_layouts.scss +++ b/src/_layouts.scss @@ -2,3 +2,5 @@ @use 'layouts/container'; @use 'layouts/button-group'; @use 'layouts/form'; +@use 'layouts/flex'; +@use 'layouts/overflow'; diff --git a/src/layouts/_card.scss b/src/layouts/_card.scss index 3022da0..e6c379d 100644 --- a/src/layouts/_card.scss +++ b/src/layouts/_card.scss @@ -14,6 +14,10 @@ --200: ( --pad-x: fn.global-dim(--size --300), --pad-y: fn.global-dim(--size --150), + ), + --300: ( + --pad-x: fn.global-dim(--size --450), + --pad-y: fn.global-dim(--size --225), ) ) ), 'dims'); @@ -35,6 +39,11 @@ gap: fn.dim(--200 --pad-x); } + @include iro.bem-modifier('300') { + padding: fn.dim(--300 --pad-y) fn.dim(--300 --pad-x); + gap: fn.dim(--300 --pad-x); + } + @include iro.bem-modifier('flush') { padding: 0; } diff --git a/src/layouts/_flex.scss b/src/layouts/_flex.scss new file mode 100644 index 0000000..e8cdbaa --- /dev/null +++ b/src/layouts/_flex.scss @@ -0,0 +1,23 @@ +@use 'iro-sass/src/index' as iro; + +@include iro.props-namespace('flex') { + @include iro.bem-layout(iro.props-namespace()) { + display: flex; + + @include iro.bem-modifier('align-stretch') { + align-items: stretch; + } + + @include iro.bem-modifier('align-center') { + align-items: center; + } + + @include iro.bem-modifier('align-start') { + align-items: flex-start; + } + + @include iro.bem-modifier('align-end') { + align-items: flex-end; + } + } +} diff --git a/src/layouts/_overflow.scss b/src/layouts/_overflow.scss new file mode 100644 index 0000000..d3af570 --- /dev/null +++ b/src/layouts/_overflow.scss @@ -0,0 +1,9 @@ +@use 'iro-sass/src/index' as iro; +@use '../functions' as fn; + +@include iro.props-namespace('overflow') { + @include iro.bem-layout(iro.props-namespace()) { + overflow: auto; + scrollbar-color: fn.global-color(--obj-lo) transparent; + } +} diff --git a/src/objects/_dialog.scss b/src/objects/_dialog.scss index d5b6ed9..9c61e93 100644 --- a/src/objects/_dialog.scss +++ b/src/objects/_dialog.scss @@ -4,13 +4,15 @@ @include iro.props-namespace('dialog') { @include iro.props-store(( --dims: ( - --pad-x: fn.global-dim(--size --300), - --pad-y: fn.global-dim(--size --300), - --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(--size --200), + --pad-x: fn.global-dim(--size --300), + --pad-y: fn.global-dim(--size --300), + --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, + --sidebar: ( + --pad-x: fn.global-dim(--size --150), + ) ), ), 'dims'); @@ -24,24 +26,40 @@ @include iro.props-store(( --colors: ( --shadow: 0 .2em .5em rgba(#000, .2), + --sidebar: ( + --bg: fn.global-color(--bg), + --border: fn.global-color(--obj), + ) ), ), 'colors'); + @include iro.props-store(( + --colors: ( + --sidebar: ( + --bg: fn.global-color(--bg-hi), + --border: fn.global-color(--bg-hi), + ), + ), + ), 'colors-dark'); + @include iro.bem-object(iro.props-namespace()) { - display: grid; - grid-template-rows: auto auto 1fr auto; - grid-template-areas: 'header' 'rule' 'body' 'footer'; - position: relative; - box-sizing: border-box; - width: 100%; - 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 1fr auto; + grid-template-columns: auto 1fr; + grid-template-areas: + 'sidebar header' + 'sidebar body' + 'sidebar footer'; + position: relative; + box-sizing: border-box; + width: 100%; + max-width: fn.dim(--width-md); + margin: 0 auto; + 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); @@ -51,39 +69,52 @@ max-width: fn.dim(--width-lg); } - @include iro.bem-elem('header') { - grid-area: header; - margin-bottom: fn.dim(--title-body-spacing); + @include iro.bem-elem('sidebar') { + grid-area: sidebar; + padding: fn.dim(--pad-y) fn.dim(--sidebar --pad-x); + border-right: 1px solid fn.color(--sidebar --border); + background-color: fn.color(--sidebar --bg); } - @include iro.bem-elem('close-btn') { - position: absolute; - top: iro.fn-px-to-rem(12px); - right: iro.fn-px-to-rem(12px); - font-size: fn.global-dim(--font-size --150); - } + @include iro.bem-elem('header') { + grid-area: header; + margin: fn.dim(--pad-y) fn.dim(--pad-x) 0; - @include iro.bem-elem('rule') { - grid-area: rule; - margin: 0; + @include iro.bem-sibling-elem('body') { + &::before { + display: none; + } + } } - @include iro.bem-elem('title') { - margin-top: 0; + @include iro.bem-elem('body') { + grid-area: body; + min-height: 0; + margin: fn.dim(--pad-y) fn.dim(--pad-x); + + &::before { + content: ''; + width: fn.global-dim(--size --500); + height: fn.global-dim(--size --500); + float: right; + } } - @include iro.bem-elem('body') { - grid-area: body; - min-height: 0; - margin-top: fn.dim(--title-body-spacing); - overflow: auto; - scrollbar-color: fn.global-color(--obj-lo) transparent; + @include iro.bem-elem('close-btn') { + position: absolute; + top: fn.global-dim(--size --150); + right: fn.global-dim(--size --150); + font-size: fn.global-dim(--font-size --150); } @include iro.bem-elem('footer') { grid-area: footer; justify-content: flex-end; - margin-top: fn.dim(--pad-y); + margin: fn.dim(--pad-y) fn.dim(--pad-x); + } + + @include iro.bem-elem('title') { + margin-top: 0; } } } diff --git a/src/objects/_lightbox.scss b/src/objects/_lightbox.scss index 6d83f01..f3addf7 100644 --- a/src/objects/_lightbox.scss +++ b/src/objects/_lightbox.scss @@ -10,7 +10,7 @@ --thumbnail: ( --size: fn.global-dim(--size --800), --spacing: fn.global-dim(--size --100), - --selected: 3px, //fn.global-dim(--border-width --medium), + --selected: 2px, //fn.global-dim(--border-width --medium), ), --button: ( --font-size: fn.global-dim(--font-size --200), diff --git a/src/objects/_menu.scss b/src/objects/_menu.scss index f03dbc1..40610e0 100644 --- a/src/objects/_menu.scss +++ b/src/objects/_menu.scss @@ -9,8 +9,9 @@ ), --separator: fn.global-dim(--size --150), --item: ( - --pad-x: fn.global-dim(--size --150), - --pad-y: fn.global-dim(--size --100), + --pad-x: fn.global-dim(--size --150), + --pad-y: fn.global-dim(--size --100), + --rounding: 3px, ), ), ), 'dims'); @@ -52,12 +53,13 @@ } @include iro.bem-elem('item') { - display: block; - box-sizing: border-box; - width: 100%; - padding: calc(fn.dim(--item --pad-y) - 2px) calc(fn.dim(--item --pad-x) - 2px); - border: 2px solid transparent; - color: fn.color(--item --disabled --label); + display: block; + box-sizing: border-box; + width: 100%; + padding: calc(fn.dim(--item --pad-y) - 2px) calc(fn.dim(--item --pad-x) - 2px); + border: 2px solid transparent; + border-radius: fn.dim(--item --rounding); + color: fn.color(--item --disabled --label); &:link, &:visited, diff --git a/src/objects/_rule.scss b/src/objects/_rule.scss index 777e864..693729a 100644 --- a/src/objects/_rule.scss +++ b/src/objects/_rule.scss @@ -45,6 +45,14 @@ margin-bottom: fn.dim(--margin-y); background-color: fn.color(--strong --bg); + @include iro.bem-modifier('vertical') { + width: 1px; + height: auto; + margin-top: 0; + margin-bottom: 0; + background-color: fn.color(--faint --bg); + } + @include iro.bem-modifier('medium') { height: fn.dim(--medium --border-width); background-color: fn.color(--medium --bg); -- cgit v1.2.3-70-g09d2