summaryrefslogtreecommitdiffstats
path: root/src/objects/_dialog.scss
diff options
context:
space:
mode:
Diffstat (limited to 'src/objects/_dialog.scss')
-rw-r--r--src/objects/_dialog.scss152
1 files changed, 0 insertions, 152 deletions
diff --git a/src/objects/_dialog.scss b/src/objects/_dialog.scss
deleted file mode 100644
index 9333ce6..0000000
--- a/src/objects/_dialog.scss
+++ /dev/null
@@ -1,152 +0,0 @@
1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
3
4@include iro.props-namespace('dialog') {
5 @include iro.props-store((
6 --dims: (
7 --width-sm: iro.fn-px-to-rem(500px),
8 --width-md: iro.fn-px-to-rem(800px),
9 --width-lg: iro.fn-px-to-rem(1100px),
10 --rounding: 4px,
11 --border: 1px,
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
23 --body: (
24 --pad-x: fn.global-dim(--size --200),
25 --pad-y: fn.global-dim(--size --200),
26 )
27 ),
28 ), 'dims');
29
30 @include iro.props-store((
31 --dims: (
32 --pad-x: fn.global-dim(--size --300),
33 --pad-y: fn.global-dim(--size --300),
34 ),
35 ), 'md');
36
37 @include iro.props-store((
38 --colors: (
39 --border: fn.global-color(--border --stable),
40 ),
41 ), 'colors');
42
43 @include iro.bem-object(iro.props-namespace()) {
44 display: grid;
45 grid-template-rows: auto auto 1fr auto auto;
46 grid-template-columns: auto 1fr;
47 grid-template-areas:
48 'sidebar-header header'
49 'sidebar top'
50 'sidebar body'
51 'sidebar bottom'
52 'sidebar footer';
53 position: relative;
54 box-sizing: border-box;
55 flex: 0 0 auto;
56 width: 100%;
57 max-width: fn.dim(--width-md);
58 margin: 0 auto;
59 overflow: hidden;
60 border-radius: fn.dim(--rounding);
61 background-clip: padding-box;
62 background-color: fn.global-color(--bg);
63 color: fn.global-color(--fg);
64
65 @include iro.bem-modifier('sm') {
66 max-width: fn.dim(--width-sm);
67 }
68
69 @include iro.bem-modifier('lg') {
70 max-width: fn.dim(--width-lg);
71 }
72
73 @include iro.bem-elem('header') {
74 grid-area: sidebar-header / sidebar-header / header / header;
75 padding: fn.dim(--header --pad-y) fn.dim(--header --pad-x);
76
77 @include iro.bem-modifier('sidebar') {
78 grid-area: sidebar-header;
79 border-right: 1px solid fn.color(--border);
80
81 @include iro.bem-sibling-elem('header') {
82 grid-area: header;
83 }
84 }
85 }
86
87 @include iro.bem-elem('title') {
88 margin-top: 0;
89 padding-right: calc(fn.dim(--body --pad-x) - fn.dim(--header --pad-x));
90 padding-left: calc(fn.dim(--body --pad-x) - fn.dim(--header --pad-x));
91 }
92
93 @include iro.bem-elem('close-btn') {
94 margin-left: auto;
95 }
96
97 @include iro.bem-elem('sidebar') {
98 grid-area: sidebar;
99 padding: fn.dim(--sidebar --pad-y) fn.dim(--sidebar --pad-x);
100 overflow: auto;
101 border-right: 1px solid fn.color(--border);
102 }
103
104 @include iro.bem-elem('top') {
105 grid-area: top;
106 min-width: 0;
107 padding: fn.dim(--body --pad-y) fn.dim(--body --pad-x);
108
109 @include iro.bem-sibling-elem('body') {
110 padding-top: 0;
111 }
112 }
113
114 @include iro.bem-elem('bottom') {
115 grid-area: bottom;
116 min-width: 0;
117 padding: fn.dim(--body --pad-y) fn.dim(--body --pad-x);
118
119 @include iro.bem-sibling-elem('body') {
120 padding-bottom: 0;
121 }
122 }
123
124 @include iro.bem-elem('body') {
125 grid-area: body;
126 min-width: 0;
127 min-height: 0;
128 padding: fn.dim(--body --pad-y) fn.dim(--body --pad-x);
129 }
130
131 @include iro.bem-elem('footer') {
132 grid-area: footer;
133 justify-content: flex-end;
134 padding: fn.dim(--body --pad-y) fn.dim(--body --pad-x);
135 }
136
137 @include iro.bem-modifier('scrollable') {
138 flex-shrink: 1;
139
140 @include iro.bem-elem('body') {
141 overflow: auto;
142 scrollbar-color: fn.global-color(--obj-lo) transparent;
143 }
144 }
145
146 @include iro.bem-modifier('flat') {
147 @include iro.bem-elem('body') {
148 padding-top: 0;
149 }
150 }
151 }
152}