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) |