diff options
Diffstat (limited to 'src/objects/_dialog.scss')
-rw-r--r-- | src/objects/_dialog.scss | 66 |
1 files changed, 43 insertions, 23 deletions
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 @@ | |||
1 | @use 'iro-sass/src/index' as iro; | 1 | @use 'iro-sass/src/index' as iro; |
2 | @use '../functions' as fn; | 2 | @use '../functions' as fn; |
3 | 3 | ||
4 | @use 'header'; | ||
5 | |||
6 | @include iro.props-namespace('dialog') { | 4 | @include iro.props-namespace('dialog') { |
7 | @include iro.props-store(( | 5 | @include iro.props-store(( |
8 | --dims: ( | 6 | --dims: ( |
@@ -12,6 +10,16 @@ | |||
12 | --rounding: 8px, | 10 | --rounding: 8px, |
13 | --border: 1px, | 11 | --border: 1px, |
14 | 12 | ||
13 | --header: ( | ||
14 | --pad-x: fn.global-dim(--size --75), | ||
15 | --pad-y: fn.global-dim(--size --75), | ||
16 | ), | ||
17 | |||
18 | --sidebar: ( | ||
19 | --pad-x: fn.global-dim(--size --75), | ||
20 | --pad-y: fn.global-dim(--size --75), | ||
21 | ), | ||
22 | |||
15 | --body: ( | 23 | --body: ( |
16 | --pad-x: fn.global-dim(--size --200), | 24 | --pad-x: fn.global-dim(--size --200), |
17 | --pad-y: fn.global-dim(--size --200), | 25 | --pad-y: fn.global-dim(--size --200), |
@@ -28,18 +36,15 @@ | |||
28 | 36 | ||
29 | @include iro.props-store(( | 37 | @include iro.props-store(( |
30 | --colors: ( | 38 | --colors: ( |
31 | --border: rgba(#000, .2), | 39 | --outer-border: rgba(#000, .2), |
32 | --shadow: 0 .2em .5em rgba(#000, .2), | 40 | --inner-border: fn.global-color(--obj), |
33 | 41 | --shadow: 0 .2em .5em rgba(#000, .2), | |
34 | --sidebar: ( | ||
35 | --border: fn.global-color(--obj), | ||
36 | ), | ||
37 | ), | 42 | ), |
38 | ), 'colors'); | 43 | ), 'colors'); |
39 | 44 | ||
40 | @include iro.props-store(( | 45 | @include iro.props-store(( |
41 | --colors: ( | 46 | --colors: ( |
42 | --border: rgba(#fff, .2), | 47 | --outer-border: rgba(#fff, .2), |
43 | ), | 48 | ), |
44 | ), 'colors-dark'); | 49 | ), 'colors-dark'); |
45 | 50 | ||
@@ -57,7 +62,7 @@ | |||
57 | max-width: fn.dim(--width-md); | 62 | max-width: fn.dim(--width-md); |
58 | margin: 0 auto; | 63 | margin: 0 auto; |
59 | overflow: hidden; | 64 | overflow: hidden; |
60 | border: fn.dim(--border) solid fn.color(--border); | 65 | border: fn.dim(--border) solid fn.color(--outer-border); |
61 | border-radius: fn.dim(--rounding); | 66 | border-radius: fn.dim(--rounding); |
62 | background-clip: padding-box; | 67 | background-clip: padding-box; |
63 | background-color: fn.global-color(--bg); | 68 | background-color: fn.global-color(--bg); |
@@ -72,29 +77,34 @@ | |||
72 | max-width: fn.dim(--width-lg); | 77 | max-width: fn.dim(--width-lg); |
73 | } | 78 | } |
74 | 79 | ||
75 | @include iro.bem-elem('sidebar-header') { | 80 | @include iro.bem-elem('header') { |
76 | grid-area: sidebar-header; | 81 | grid-area: sidebar-header / sidebar-header / header / header; |
77 | border-right: 1px solid fn.color(--sidebar --border); | 82 | padding: fn.dim(--header --pad-y) fn.dim(--header --pad-x); |
78 | 83 | border-bottom: 1px solid fn.color(--inner-border); | |
79 | @include iro.bem-sibling-elem('header') { | 84 | |
80 | grid-area: header; | 85 | @include iro.bem-modifier('sidebar') { |
86 | grid-area: sidebar-header; | ||
87 | border-right: 1px solid fn.color(--inner-border); | ||
88 | |||
89 | @include iro.bem-sibling-elem('header') { | ||
90 | grid-area: header; | ||
91 | } | ||
81 | } | 92 | } |
82 | } | 93 | } |
83 | 94 | ||
84 | @include iro.bem-elem('header') { | 95 | @include iro.bem-elem('title') { |
85 | grid-area: sidebar-header / sidebar-header / header / header; | 96 | padding-right: calc(fn.dim(--body --pad-x) - fn.dim(--header --pad-x)); |
97 | padding-left: calc(fn.dim(--body --pad-x) - fn.dim(--header --pad-x)); | ||
86 | } | 98 | } |
87 | 99 | ||
88 | @include iro.bem-elem('close-btn') { | 100 | @include iro.bem-elem('close-btn') { |
89 | margin-left: auto; | 101 | margin-left: auto; |
90 | } | 102 | } |
91 | 103 | ||
92 | @include iro.bem-elem('label') { | ||
93 | padding: 0 calc(fn.dim(--body --pad-x) - fn.foreign-dim(--header, --pad-x)); | ||
94 | } | ||
95 | |||
96 | @include iro.bem-elem('sidebar') { | 104 | @include iro.bem-elem('sidebar') { |
97 | grid-area: sidebar; | 105 | grid-area: sidebar; |
106 | padding: fn.dim(--sidebar --pad-y) fn.dim(--sidebar --pad-x); | ||
107 | border-right: 1px solid fn.color(--inner-border); | ||
98 | } | 108 | } |
99 | 109 | ||
100 | @include iro.bem-elem('body') { | 110 | @include iro.bem-elem('body') { |
@@ -108,5 +118,15 @@ | |||
108 | justify-content: flex-end; | 118 | justify-content: flex-end; |
109 | padding: fn.dim(--body --pad-y) fn.dim(--body --pad-x); | 119 | padding: fn.dim(--body --pad-y) fn.dim(--body --pad-x); |
110 | } | 120 | } |
121 | |||
122 | @include iro.bem-modifier('flat') { | ||
123 | @include iro.bem-elem('header') { | ||
124 | border-bottom: 0; | ||
125 | } | ||
126 | |||
127 | @include iro.bem-elem('body') { | ||
128 | padding-top: 0; | ||
129 | } | ||
130 | } | ||
111 | } | 131 | } |
112 | } | 132 | } |