diff options
| -rw-r--r-- | src/_apply-vars.scss | 10 | ||||
| -rw-r--r-- | src/objects/_dialog.scss | 9 | ||||
| -rw-r--r-- | 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 @@ | |||
| 45 | } | 45 | } |
| 46 | } | 46 | } |
| 47 | 47 | ||
| 48 | @include iro.bem-theme('lo') { | ||
| 49 | @include iro.props-assign('colors'); | ||
| 50 | @include iro.props-assign('palette-light-lo'); | ||
| 51 | |||
| 52 | @media (prefers-color-scheme: dark) { | ||
| 53 | @include iro.props-assign('colors-dark'); | ||
| 54 | @include iro.props-assign('palette-dark-lo'); | ||
| 55 | } | ||
| 56 | } | ||
| 57 | |||
| 48 | @include iro.bem-theme('up') { | 58 | @include iro.bem-theme('up') { |
| 49 | @include iro.props-assign('colors'); | 59 | @include iro.props-assign('colors'); |
| 50 | @include iro.props-assign('palette-light-hi'); | 60 | @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 @@ | |||
| 69 | } | 69 | } |
| 70 | 70 | ||
| 71 | @include iro.bem-elem('header') { | 71 | @include iro.bem-elem('header') { |
| 72 | grid-area: sidebar-header / sidebar-header / header / header; | 72 | grid-area: sidebar-header / sidebar-header / header / header; |
| 73 | padding: fn.dim(--header --pad-y) fn.dim(--header --pad-x); | 73 | padding: fn.dim(--header --pad-y) fn.dim(--header --pad-x); |
| 74 | border-bottom: 1px solid fn.color(--border); | ||
| 75 | 74 | ||
| 76 | @include iro.bem-modifier('sidebar') { | 75 | @include iro.bem-modifier('sidebar') { |
| 77 | grid-area: sidebar-header; | 76 | grid-area: sidebar-header; |
| @@ -122,10 +121,6 @@ | |||
| 122 | } | 121 | } |
| 123 | 122 | ||
| 124 | @include iro.bem-modifier('flat') { | 123 | @include iro.bem-modifier('flat') { |
| 125 | @include iro.bem-elem('header') { | ||
| 126 | border-bottom: 0; | ||
| 127 | } | ||
| 128 | |||
| 129 | @include iro.bem-elem('body') { | 124 | @include iro.bem-elem('body') { |
| 130 | padding-top: 0; | 125 | padding-top: 0; |
| 131 | } | 126 | } |
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) | |||
| 17 | 17 | ||
| 18 | let headerClass = { | 18 | let headerClass = { |
| 19 | 'o-dialog__header': true, | 19 | 'o-dialog__header': true, |
| 20 | 'u-themed': !attributes.flat, | 20 | 'l-media': true, |
| 21 | 't-down': !attributes.flat, | ||
| 22 | 'l-media': true, | ||
| 23 | } | 21 | } |
| 24 | 22 | ||
| 25 | let sidebarHeaderClass = { | 23 | let sidebarHeaderClass = { |
| 24 | 'o-dialog__header': true, | ||
| 26 | 'o-dialog__header--sidebar': true, | 25 | 'o-dialog__header--sidebar': true, |
| 26 | 'u-themed': true, | ||
| 27 | 't-lo': true, | ||
| 28 | 'l-media': true, | ||
| 27 | } | 29 | } |
| 28 | 30 | ||
| 29 | Object.assign(sidebarHeaderClass, headerClass); | ||
| 30 | |||
| 31 | let bodyClass = { | 31 | let bodyClass = { |
| 32 | 'o-dialog__body': true | 32 | 'o-dialog__body': true |
| 33 | } | 33 | } |
| @@ -44,7 +44,7 @@ mixin dialog(title) | |||
| 44 | +div-heading('xl')(class='o-dialog__title l-media__block l-media__block--main')= attributes.sidebarTitle | 44 | +div-heading('xl')(class='o-dialog__title l-media__block l-media__block--main')= attributes.sidebarTitle |
| 45 | 45 | ||
| 46 | if slots.sidebar | 46 | if slots.sidebar |
| 47 | .o-dialog__sidebar.l-overflow | 47 | .o-dialog__sidebar.l-overflow.u-themed.t-lo |
| 48 | - slots.sidebar() | 48 | - slots.sidebar() |
| 49 | 49 | ||
| 50 | div(class=headerClass) | 50 | div(class=headerClass) |
