From d72fbeb48496084143acfa798b10a9edd84181c6 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Mon, 16 Oct 2023 07:14:40 +0200 Subject: Updated dialog --- src/_apply-vars.scss | 10 ++++++++++ src/objects/_dialog.scss | 9 ++------- tpl/objects/dialog.pug | 12 ++++++------ 3 files changed, 18 insertions(+), 13 deletions(-) diff --git a/src/_apply-vars.scss b/src/_apply-vars.scss index 5cf5742..0fbc5e3 100644 --- a/src/_apply-vars.scss +++ b/src/_apply-vars.scss @@ -45,6 +45,16 @@ } } +@include iro.bem-theme('lo') { + @include iro.props-assign('colors'); + @include iro.props-assign('palette-light-lo'); + + @media (prefers-color-scheme: dark) { + @include iro.props-assign('colors-dark'); + @include iro.props-assign('palette-dark-lo'); + } +} + @include iro.bem-theme('up') { @include iro.props-assign('colors'); @include iro.props-assign('palette-light-hi'); diff --git a/src/objects/_dialog.scss b/src/objects/_dialog.scss index 8a60b51..40fe7c0 100644 --- a/src/objects/_dialog.scss +++ b/src/objects/_dialog.scss @@ -69,9 +69,8 @@ } @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(--border); + grid-area: sidebar-header / sidebar-header / header / header; + padding: fn.dim(--header --pad-y) fn.dim(--header --pad-x); @include iro.bem-modifier('sidebar') { grid-area: sidebar-header; @@ -122,10 +121,6 @@ } @include iro.bem-modifier('flat') { - @include iro.bem-elem('header') { - border-bottom: 0; - } - @include iro.bem-elem('body') { padding-top: 0; } diff --git a/tpl/objects/dialog.pug b/tpl/objects/dialog.pug index 7ac9c3d..55dc8ad 100644 --- a/tpl/objects/dialog.pug +++ b/tpl/objects/dialog.pug @@ -17,17 +17,17 @@ mixin dialog(title) let headerClass = { 'o-dialog__header': true, - 'u-themed': !attributes.flat, - 't-down': !attributes.flat, - 'l-media': true, + 'l-media': true, } let sidebarHeaderClass = { + 'o-dialog__header': true, 'o-dialog__header--sidebar': true, + 'u-themed': true, + 't-lo': true, + 'l-media': true, } - Object.assign(sidebarHeaderClass, headerClass); - let bodyClass = { 'o-dialog__body': true } @@ -44,7 +44,7 @@ mixin dialog(title) +div-heading('xl')(class='o-dialog__title l-media__block l-media__block--main')= attributes.sidebarTitle if slots.sidebar - .o-dialog__sidebar.l-overflow + .o-dialog__sidebar.l-overflow.u-themed.t-lo - slots.sidebar() div(class=headerClass) -- cgit v1.2.3-70-g09d2