diff options
Diffstat (limited to 'src/objects')
-rw-r--r-- | src/objects/_backdrop.scss | 1 | ||||
-rw-r--r-- | src/objects/_dialog.scss | 48 |
2 files changed, 32 insertions, 17 deletions
diff --git a/src/objects/_backdrop.scss b/src/objects/_backdrop.scss index bc63a27..e989e53 100644 --- a/src/objects/_backdrop.scss +++ b/src/objects/_backdrop.scss | |||
@@ -23,6 +23,7 @@ | |||
23 | ), 'sm'); | 23 | ), 'sm'); |
24 | 24 | ||
25 | @include iro.bem-object(iro.props-namespace()) { | 25 | @include iro.bem-object(iro.props-namespace()) { |
26 | display: flex; | ||
26 | position: fixed; | 27 | position: fixed; |
27 | z-index: fn.dim(--z-index); | 28 | z-index: fn.dim(--z-index); |
28 | top: 0; | 29 | top: 0; |
diff --git a/src/objects/_dialog.scss b/src/objects/_dialog.scss index 4f18b08..d83f348 100644 --- a/src/objects/_dialog.scss +++ b/src/objects/_dialog.scss | |||
@@ -4,12 +4,13 @@ | |||
4 | @include iro.props-namespace('dialog') { | 4 | @include iro.props-namespace('dialog') { |
5 | @include iro.props-store(( | 5 | @include iro.props-store(( |
6 | --dims: ( | 6 | --dims: ( |
7 | --pad-x: iro.fn-px-to-rem(40px), | 7 | --pad-x: iro.fn-px-to-rem(40px), |
8 | --pad-y: iro.fn-px-to-rem(40px), | 8 | --pad-y: iro.fn-px-to-rem(40px), |
9 | --width-sm: iro.fn-px-to-rem(500px), | 9 | --width-sm: iro.fn-px-to-rem(500px), |
10 | --width-md: iro.fn-px-to-rem(800px), | 10 | --width-md: iro.fn-px-to-rem(800px), |
11 | --width-lg: iro.fn-px-to-rem(1100px), | 11 | --width-lg: iro.fn-px-to-rem(1100px), |
12 | --rounding: 3px, | 12 | --rounding: 3px, |
13 | --title-body-spacing: fn.global-dim(--spacing --y --sm), | ||
13 | ), | 14 | ), |
14 | ), 'dims'); | 15 | ), 'dims'); |
15 | 16 | ||
@@ -20,14 +21,17 @@ | |||
20 | ), 'colors'); | 21 | ), 'colors'); |
21 | 22 | ||
22 | @include iro.bem-object(iro.props-namespace()) { | 23 | @include iro.bem-object(iro.props-namespace()) { |
23 | max-width: fn.dim(--width-md); | 24 | display: grid; |
24 | margin: 0 auto; | 25 | grid-template-rows: auto auto 1fr auto; |
25 | padding: fn.dim(--pad-y) fn.dim(--pad-x); | 26 | grid-template-areas: 'header' 'rule' 'body' 'footer'; |
26 | overflow: hidden; | 27 | max-width: fn.dim(--width-md); |
27 | border-radius: fn.dim(--rounding); | 28 | margin: 0 auto; |
28 | background-color: fn.global-color(--bg); | 29 | padding: fn.dim(--pad-y) fn.dim(--pad-x); |
29 | box-shadow: fn.color(--shadow); | 30 | overflow: hidden; |
30 | color: fn.global-color(--fg); | 31 | border-radius: fn.dim(--rounding); |
32 | background-color: fn.global-color(--bg); | ||
33 | box-shadow: fn.color(--shadow); | ||
34 | color: fn.global-color(--fg); | ||
31 | 35 | ||
32 | @include iro.bem-modifier('sm') { | 36 | @include iro.bem-modifier('sm') { |
33 | max-width: fn.dim(--width-sm); | 37 | max-width: fn.dim(--width-sm); |
@@ -38,7 +42,13 @@ | |||
38 | } | 42 | } |
39 | 43 | ||
40 | @include iro.bem-elem('header') { | 44 | @include iro.bem-elem('header') { |
41 | padding-bottom: .5rem; | 45 | grid-area: header; |
46 | margin-bottom: fn.dim(--title-body-spacing); | ||
47 | } | ||
48 | |||
49 | @include iro.bem-elem('rule') { | ||
50 | grid-area: rule; | ||
51 | margin: 0; | ||
42 | } | 52 | } |
43 | 53 | ||
44 | @include iro.bem-elem('title') { | 54 | @include iro.bem-elem('title') { |
@@ -46,12 +56,16 @@ | |||
46 | } | 56 | } |
47 | 57 | ||
48 | @include iro.bem-elem('body') { | 58 | @include iro.bem-elem('body') { |
49 | padding-top: .5rem; | 59 | grid-area: body; |
60 | min-height: 0; | ||
61 | margin-top: fn.dim(--title-body-spacing); | ||
62 | overflow: auto; | ||
50 | } | 63 | } |
51 | 64 | ||
52 | @include iro.bem-elem('footer') { | 65 | @include iro.bem-elem('footer') { |
66 | grid-area: footer; | ||
53 | justify-content: flex-end; | 67 | justify-content: flex-end; |
54 | padding-top: fn.dim(--pad-y); | 68 | margin-top: fn.dim(--pad-y); |
55 | } | 69 | } |
56 | } | 70 | } |
57 | } | 71 | } |