From 511a47c8964c43927563ee88b62b3f215bf9b7d1 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Mon, 28 Mar 2022 20:25:21 +0200 Subject: Update --- src/objects/_dialog.scss | 66 +++++++++++++++++++++++++++++++----------------- 1 file changed, 43 insertions(+), 23 deletions(-) (limited to 'src/objects/_dialog.scss') diff --git a/src/objects/_dialog.scss b/src/objects/_dialog.scss index 094e09b..ac77a66 100644 --- a/src/objects/_dialog.scss +++ b/src/objects/_dialog.scss @@ -1,8 +1,6 @@ @use 'iro-sass/src/index' as iro; @use '../functions' as fn; -@use 'header'; - @include iro.props-namespace('dialog') { @include iro.props-store(( --dims: ( @@ -12,6 +10,16 @@ --rounding: 8px, --border: 1px, + --header: ( + --pad-x: fn.global-dim(--size --75), + --pad-y: fn.global-dim(--size --75), + ), + + --sidebar: ( + --pad-x: fn.global-dim(--size --75), + --pad-y: fn.global-dim(--size --75), + ), + --body: ( --pad-x: fn.global-dim(--size --200), --pad-y: fn.global-dim(--size --200), @@ -28,18 +36,15 @@ @include iro.props-store(( --colors: ( - --border: rgba(#000, .2), - --shadow: 0 .2em .5em rgba(#000, .2), - - --sidebar: ( - --border: fn.global-color(--obj), - ), + --outer-border: rgba(#000, .2), + --inner-border: fn.global-color(--obj), + --shadow: 0 .2em .5em rgba(#000, .2), ), ), 'colors'); @include iro.props-store(( --colors: ( - --border: rgba(#fff, .2), + --outer-border: rgba(#fff, .2), ), ), 'colors-dark'); @@ -57,7 +62,7 @@ max-width: fn.dim(--width-md); margin: 0 auto; overflow: hidden; - border: fn.dim(--border) solid fn.color(--border); + border: fn.dim(--border) solid fn.color(--outer-border); border-radius: fn.dim(--rounding); background-clip: padding-box; background-color: fn.global-color(--bg); @@ -72,29 +77,34 @@ max-width: fn.dim(--width-lg); } - @include iro.bem-elem('sidebar-header') { - grid-area: sidebar-header; - border-right: 1px solid fn.color(--sidebar --border); - - @include iro.bem-sibling-elem('header') { - grid-area: header; + @include iro.bem-elem('header') { + grid-area: sidebar-header / sidebar-header / header / header; + padding: fn.dim(--header --pad-y) fn.dim(--header --pad-x); + border-bottom: 1px solid fn.color(--inner-border); + + @include iro.bem-modifier('sidebar') { + grid-area: sidebar-header; + border-right: 1px solid fn.color(--inner-border); + + @include iro.bem-sibling-elem('header') { + grid-area: header; + } } } - @include iro.bem-elem('header') { - grid-area: sidebar-header / sidebar-header / header / header; + @include iro.bem-elem('title') { + padding-right: calc(fn.dim(--body --pad-x) - fn.dim(--header --pad-x)); + padding-left: calc(fn.dim(--body --pad-x) - fn.dim(--header --pad-x)); } @include iro.bem-elem('close-btn') { margin-left: auto; } - @include iro.bem-elem('label') { - padding: 0 calc(fn.dim(--body --pad-x) - fn.foreign-dim(--header, --pad-x)); - } - @include iro.bem-elem('sidebar') { - grid-area: sidebar; + grid-area: sidebar; + padding: fn.dim(--sidebar --pad-y) fn.dim(--sidebar --pad-x); + border-right: 1px solid fn.color(--inner-border); } @include iro.bem-elem('body') { @@ -108,5 +118,15 @@ justify-content: flex-end; padding: fn.dim(--body --pad-y) fn.dim(--body --pad-x); } + + @include iro.bem-modifier('flat') { + @include iro.bem-elem('header') { + border-bottom: 0; + } + + @include iro.bem-elem('body') { + padding-top: 0; + } + } } } -- cgit v1.2.3-70-g09d2