elbe-ui 0.2.34 → 0.2.37
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/elbe.css +203 -284
- package/dist/elbe.css.map +1 -1
- package/package.json +2 -2
package/dist/elbe.css
CHANGED
|
@@ -3,183 +3,200 @@
|
|
|
3
3
|
- sass style/elbe.scss dist/elbe.css
|
|
4
4
|
*/
|
|
5
5
|
@import url("https://fonts.googleapis.com/css2?display=swap&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Calistoga&family=Noto+Color+Emoji");
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
.
|
|
9
|
-
|
|
10
|
-
.
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
6
|
+
:root {
|
|
7
|
+
--g-size: 1rem;
|
|
8
|
+
--g-radius: 0.75rem;
|
|
9
|
+
--g-padding: 1rem;
|
|
10
|
+
--g-border-width: 0.125rem;
|
|
11
|
+
--c-context-back: #ffffff;
|
|
12
|
+
--c-context-front: #000;
|
|
13
|
+
--c-context-border: #000;
|
|
14
|
+
line-height: 1.3;
|
|
15
|
+
color: #222;
|
|
16
|
+
background-color: #ffffff;
|
|
17
|
+
font-synthesis: none;
|
|
18
|
+
text-rendering: optimizeLegibility;
|
|
19
|
+
-webkit-font-smoothing: antialiased;
|
|
20
|
+
-moz-osx-font-smoothing: grayscale;
|
|
21
|
+
-webkit-text-size-adjust: 100%;
|
|
22
|
+
box-sizing: border-box;
|
|
23
|
+
font-size: 1rem;
|
|
24
|
+
border-collapse: separate;
|
|
25
|
+
font-family: "Inter", sans-serif;
|
|
20
26
|
}
|
|
21
27
|
|
|
22
|
-
|
|
23
|
-
|
|
28
|
+
*,
|
|
29
|
+
*:before,
|
|
30
|
+
*:after {
|
|
31
|
+
box-sizing: inherit;
|
|
32
|
+
font-size: inherit;
|
|
33
|
+
font-family: inherit;
|
|
34
|
+
font-weight: inherit;
|
|
35
|
+
border-color: inherit;
|
|
24
36
|
}
|
|
25
37
|
|
|
26
|
-
|
|
27
|
-
|
|
38
|
+
body,
|
|
39
|
+
#app {
|
|
40
|
+
margin: 0;
|
|
41
|
+
display: block;
|
|
42
|
+
min-height: 100vh;
|
|
43
|
+
background-color: white;
|
|
28
44
|
}
|
|
29
45
|
|
|
30
|
-
.
|
|
46
|
+
.elbe {
|
|
47
|
+
/* ========= SPACING ========= */
|
|
48
|
+
/* ========= ELEMENT_STYLE ========= */
|
|
49
|
+
/* ========= CARD ========= */
|
|
50
|
+
/* ========= UTIL ========= */
|
|
51
|
+
/* ========= MARKUP ========= */
|
|
52
|
+
/* ========= ANIMATIONS ========= */
|
|
53
|
+
/* ========== GAP =========== */
|
|
54
|
+
/* ========== EXPAND =========== */
|
|
55
|
+
/* ========== ALIGN =========== */
|
|
56
|
+
/* ========== JUSTIFY =========== */
|
|
57
|
+
/* ========== RESPONSIVE =========== */
|
|
58
|
+
}
|
|
59
|
+
.elbe .padded,
|
|
60
|
+
.elbe .card,
|
|
61
|
+
.elbe input[type=text],
|
|
62
|
+
.elbe input[type=number],
|
|
63
|
+
.elbe input[type=password],
|
|
64
|
+
.elbe input[type=email],
|
|
65
|
+
.elbe input[type=date],
|
|
66
|
+
.elbe input[type=time],
|
|
67
|
+
.elbe textarea,
|
|
68
|
+
.elbe select,
|
|
69
|
+
.elbe .toast,
|
|
70
|
+
.elbe button {
|
|
71
|
+
padding: var(--g-padding);
|
|
72
|
+
}
|
|
73
|
+
.elbe .padding-none {
|
|
74
|
+
padding: 0rem;
|
|
75
|
+
}
|
|
76
|
+
.elbe .margined {
|
|
77
|
+
margin: var(--g-padding);
|
|
78
|
+
}
|
|
79
|
+
.elbe .margined-none {
|
|
31
80
|
margin: 0rem;
|
|
32
81
|
}
|
|
33
|
-
|
|
34
|
-
/* ========= ELEMENT_STYLE ========= */
|
|
35
|
-
.sharp {
|
|
82
|
+
.elbe .sharp {
|
|
36
83
|
border-radius: 0;
|
|
37
84
|
}
|
|
38
|
-
|
|
39
|
-
.
|
|
40
|
-
.
|
|
41
|
-
|
|
42
|
-
.
|
|
43
|
-
|
|
44
|
-
input[type=
|
|
45
|
-
input[type=
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
textarea {
|
|
85
|
+
.elbe .rounded,
|
|
86
|
+
.elbe .card,
|
|
87
|
+
.elbe input[type=text],
|
|
88
|
+
.elbe input[type=number],
|
|
89
|
+
.elbe input[type=password],
|
|
90
|
+
.elbe input[type=email],
|
|
91
|
+
.elbe input[type=date],
|
|
92
|
+
.elbe input[type=time],
|
|
93
|
+
.elbe textarea,
|
|
94
|
+
.elbe select,
|
|
95
|
+
.elbe .toast,
|
|
96
|
+
.elbe button {
|
|
51
97
|
border-radius: var(--g-radius);
|
|
52
98
|
border-color: inherit;
|
|
53
99
|
overflow: hidden;
|
|
54
100
|
}
|
|
55
|
-
|
|
56
|
-
.round {
|
|
101
|
+
.elbe .round {
|
|
57
102
|
border-radius: 50%;
|
|
58
103
|
}
|
|
59
|
-
|
|
60
|
-
img.
|
|
61
|
-
img.rounded {
|
|
104
|
+
.elbe img.round,
|
|
105
|
+
.elbe img.rounded {
|
|
62
106
|
object-fit: cover;
|
|
63
107
|
}
|
|
64
|
-
|
|
65
|
-
.borderless {
|
|
108
|
+
.elbe .borderless {
|
|
66
109
|
border: none;
|
|
67
110
|
}
|
|
68
|
-
|
|
69
|
-
.raised, .toast {
|
|
111
|
+
.elbe .raised, .elbe .toast {
|
|
70
112
|
box-shadow: 0 0.1rem 1rem rgba(0, 0, 0, 0.2);
|
|
71
113
|
}
|
|
72
|
-
|
|
73
|
-
.scrollbars-none {
|
|
114
|
+
.elbe .scrollbars-none {
|
|
74
115
|
scrollbar-width: none;
|
|
75
116
|
-ms-overflow-style: none;
|
|
76
117
|
}
|
|
77
|
-
.scrollbars-none::-webkit-scrollbar {
|
|
118
|
+
.elbe .scrollbars-none::-webkit-scrollbar {
|
|
78
119
|
display: none;
|
|
79
120
|
}
|
|
80
|
-
|
|
81
|
-
.pointer {
|
|
121
|
+
.elbe .pointer {
|
|
82
122
|
cursor: pointer;
|
|
83
123
|
}
|
|
84
|
-
|
|
85
|
-
.text-centered {
|
|
124
|
+
.elbe .text-centered {
|
|
86
125
|
text-align: center;
|
|
87
126
|
}
|
|
88
|
-
|
|
89
|
-
.text-start {
|
|
127
|
+
.elbe .text-start {
|
|
90
128
|
text-align: start;
|
|
91
129
|
}
|
|
92
|
-
|
|
93
|
-
.text-end {
|
|
130
|
+
.elbe .text-end {
|
|
94
131
|
text-align: end;
|
|
95
132
|
}
|
|
96
|
-
|
|
97
|
-
body:has(dialog[open=""]) {
|
|
133
|
+
.elbe body:has(dialog[open=""]) {
|
|
98
134
|
overflow: hidden;
|
|
99
135
|
}
|
|
100
|
-
|
|
101
|
-
.transparent {
|
|
136
|
+
.elbe .transparent {
|
|
102
137
|
background-color: transparent;
|
|
103
138
|
}
|
|
104
|
-
|
|
105
|
-
.disabled {
|
|
139
|
+
.elbe .disabled {
|
|
106
140
|
cursor: not-allowed;
|
|
107
141
|
}
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
.
|
|
111
|
-
.
|
|
112
|
-
|
|
113
|
-
.
|
|
114
|
-
|
|
115
|
-
input[type=
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
input[type=time],
|
|
121
|
-
textarea {
|
|
142
|
+
.elbe .box, .elbe .header, .elbe .base-limited,
|
|
143
|
+
.elbe .card,
|
|
144
|
+
.elbe input[type=text],
|
|
145
|
+
.elbe input[type=number],
|
|
146
|
+
.elbe input[type=password],
|
|
147
|
+
.elbe input[type=email],
|
|
148
|
+
.elbe input[type=date],
|
|
149
|
+
.elbe input[type=time],
|
|
150
|
+
.elbe textarea,
|
|
151
|
+
.elbe select,
|
|
152
|
+
.elbe .toast,
|
|
153
|
+
.elbe button {
|
|
122
154
|
border-style: solid;
|
|
123
155
|
border-width: var(--g-border-width);
|
|
124
156
|
}
|
|
125
|
-
|
|
126
|
-
/* ========= UTIL ========= */
|
|
127
|
-
.action {
|
|
157
|
+
.elbe .action {
|
|
128
158
|
cursor: pointer;
|
|
129
159
|
}
|
|
130
|
-
|
|
131
|
-
.base-limited {
|
|
160
|
+
.elbe .base-limited {
|
|
132
161
|
max-width: 700px;
|
|
133
162
|
width: 100%;
|
|
134
163
|
margin: 0 auto;
|
|
135
164
|
}
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
i,
|
|
139
|
-
.i {
|
|
165
|
+
.elbe i,
|
|
166
|
+
.elbe .i {
|
|
140
167
|
font-style: italic;
|
|
141
168
|
}
|
|
142
|
-
|
|
143
|
-
b,
|
|
144
|
-
.
|
|
145
|
-
button
|
|
146
|
-
.toast {
|
|
169
|
+
.elbe b,
|
|
170
|
+
.elbe .b,
|
|
171
|
+
.elbe .toast,
|
|
172
|
+
.elbe button {
|
|
147
173
|
font-weight: bold;
|
|
148
174
|
}
|
|
149
|
-
|
|
150
|
-
.u {
|
|
175
|
+
.elbe .u {
|
|
151
176
|
text-decoration: underline;
|
|
152
177
|
}
|
|
153
|
-
|
|
154
|
-
.ni {
|
|
178
|
+
.elbe .ni {
|
|
155
179
|
font-style: normal;
|
|
156
180
|
}
|
|
157
|
-
|
|
158
|
-
.nb {
|
|
181
|
+
.elbe .nb {
|
|
159
182
|
font-weight: normal;
|
|
160
183
|
}
|
|
161
|
-
|
|
162
|
-
.nu {
|
|
184
|
+
.elbe .nu {
|
|
163
185
|
text-decoration: none;
|
|
164
186
|
}
|
|
165
|
-
|
|
166
|
-
.striked {
|
|
187
|
+
.elbe .striked {
|
|
167
188
|
text-decoration: line-through;
|
|
168
189
|
}
|
|
169
|
-
|
|
170
|
-
.code {
|
|
190
|
+
.elbe .code {
|
|
171
191
|
font-family: monospace;
|
|
172
192
|
white-space: pre-wrap;
|
|
173
193
|
}
|
|
174
|
-
|
|
175
|
-
/* ========= ANIMATIONS ========= */
|
|
176
|
-
.rotate {
|
|
194
|
+
.elbe .rotate {
|
|
177
195
|
display: flex;
|
|
178
196
|
align-items: center;
|
|
179
197
|
justify-content: center;
|
|
180
198
|
animation: rotation 1.5s infinite linear;
|
|
181
199
|
}
|
|
182
|
-
|
|
183
200
|
@keyframes rotation {
|
|
184
201
|
from {
|
|
185
202
|
transform: rotate(0deg);
|
|
@@ -188,195 +205,152 @@ button,
|
|
|
188
205
|
transform: rotate(359deg);
|
|
189
206
|
}
|
|
190
207
|
}
|
|
191
|
-
.column, dialog,
|
|
192
|
-
.row,
|
|
193
|
-
|
|
194
|
-
.
|
|
195
|
-
.row-resp {
|
|
208
|
+
.elbe .column, .elbe dialog,
|
|
209
|
+
.elbe .row,
|
|
210
|
+
.elbe .header,
|
|
211
|
+
.elbe button,
|
|
212
|
+
.elbe .row-resp {
|
|
196
213
|
display: flex;
|
|
197
214
|
justify-content: start;
|
|
198
215
|
align-items: stretch;
|
|
199
216
|
gap: 1rem;
|
|
200
217
|
}
|
|
201
|
-
|
|
202
|
-
.column, dialog {
|
|
218
|
+
.elbe .column, .elbe dialog {
|
|
203
219
|
flex-direction: column;
|
|
204
220
|
}
|
|
205
|
-
|
|
206
|
-
.row, button, .header {
|
|
221
|
+
.elbe .row, .elbe .header, .elbe button {
|
|
207
222
|
flex-direction: row;
|
|
208
223
|
align-items: center;
|
|
209
224
|
}
|
|
210
|
-
|
|
211
|
-
.centered {
|
|
225
|
+
.elbe .centered {
|
|
212
226
|
display: flex;
|
|
213
227
|
align-items: center;
|
|
214
228
|
justify-content: center;
|
|
215
229
|
}
|
|
216
|
-
|
|
217
|
-
/* ========== GAP =========== */
|
|
218
|
-
.gap-none {
|
|
230
|
+
.elbe .gap-none {
|
|
219
231
|
gap: 0;
|
|
220
232
|
}
|
|
221
|
-
|
|
222
|
-
.gap-quarter {
|
|
233
|
+
.elbe .gap-quarter {
|
|
223
234
|
gap: 0.25rem;
|
|
224
235
|
}
|
|
225
|
-
|
|
226
|
-
.gap-half {
|
|
236
|
+
.elbe .gap-half {
|
|
227
237
|
gap: 0.5rem;
|
|
228
238
|
}
|
|
229
|
-
|
|
230
|
-
.gap-one {
|
|
239
|
+
.elbe .gap-one {
|
|
231
240
|
gap: 1rem;
|
|
232
241
|
}
|
|
233
|
-
|
|
234
|
-
.gap-double {
|
|
242
|
+
.elbe .gap-double {
|
|
235
243
|
gap: 2rem;
|
|
236
244
|
}
|
|
237
|
-
|
|
238
|
-
.gap-triple {
|
|
245
|
+
.elbe .gap-triple {
|
|
239
246
|
gap: 3rem;
|
|
240
247
|
}
|
|
241
|
-
|
|
242
|
-
/* ========== EXPAND =========== */
|
|
243
|
-
.flex-none {
|
|
248
|
+
.elbe .flex-none {
|
|
244
249
|
flex: 0 0 auto;
|
|
245
250
|
}
|
|
246
|
-
|
|
247
|
-
.flex-1 {
|
|
251
|
+
.elbe .flex-1 {
|
|
248
252
|
flex: 1 1 0%;
|
|
249
253
|
}
|
|
250
|
-
|
|
251
|
-
.flex-2 {
|
|
254
|
+
.elbe .flex-2 {
|
|
252
255
|
flex: 2 2 0%;
|
|
253
256
|
}
|
|
254
|
-
|
|
255
|
-
.flex-3 {
|
|
257
|
+
.elbe .flex-3 {
|
|
256
258
|
flex: 3 3 0%;
|
|
257
259
|
}
|
|
258
|
-
|
|
259
|
-
.flex-4 {
|
|
260
|
+
.elbe .flex-4 {
|
|
260
261
|
flex: 4 4 0%;
|
|
261
262
|
}
|
|
262
|
-
|
|
263
|
-
.flex-5 {
|
|
263
|
+
.elbe .flex-5 {
|
|
264
264
|
flex: 5 5 0%;
|
|
265
265
|
}
|
|
266
|
-
|
|
267
|
-
.flex-6 {
|
|
266
|
+
.elbe .flex-6 {
|
|
268
267
|
flex: 6 6 0%;
|
|
269
268
|
}
|
|
270
|
-
|
|
271
|
-
.flex-7 {
|
|
269
|
+
.elbe .flex-7 {
|
|
272
270
|
flex: 7 7 0%;
|
|
273
271
|
}
|
|
274
|
-
|
|
275
|
-
.flex-8 {
|
|
272
|
+
.elbe .flex-8 {
|
|
276
273
|
flex: 8 8 0%;
|
|
277
274
|
}
|
|
278
|
-
|
|
279
|
-
.flex-9 {
|
|
275
|
+
.elbe .flex-9 {
|
|
280
276
|
flex: 9 9 0%;
|
|
281
277
|
}
|
|
282
|
-
|
|
283
|
-
.flex-10 {
|
|
278
|
+
.elbe .flex-10 {
|
|
284
279
|
flex: 10 10 0%;
|
|
285
280
|
}
|
|
286
|
-
|
|
287
|
-
.flex-11 {
|
|
281
|
+
.elbe .flex-11 {
|
|
288
282
|
flex: 11 11 0%;
|
|
289
283
|
}
|
|
290
|
-
|
|
291
|
-
.flex-12 {
|
|
284
|
+
.elbe .flex-12 {
|
|
292
285
|
flex: 12 12 0%;
|
|
293
286
|
}
|
|
294
|
-
|
|
295
|
-
/* ========== ALIGN =========== */
|
|
296
|
-
.cross-start {
|
|
287
|
+
.elbe .cross-start {
|
|
297
288
|
align-items: flex-start;
|
|
298
289
|
}
|
|
299
|
-
|
|
300
|
-
.cross-center, dialog {
|
|
290
|
+
.elbe .cross-center, .elbe dialog {
|
|
301
291
|
align-items: center;
|
|
302
292
|
}
|
|
303
|
-
|
|
304
|
-
.cross-end {
|
|
293
|
+
.elbe .cross-end {
|
|
305
294
|
align-items: flex-end;
|
|
306
295
|
}
|
|
307
|
-
|
|
308
|
-
.cross-stretch {
|
|
296
|
+
.elbe .cross-stretch {
|
|
309
297
|
align-items: stretch;
|
|
310
298
|
}
|
|
311
|
-
|
|
312
|
-
.cross-baseline {
|
|
299
|
+
.elbe .cross-baseline {
|
|
313
300
|
align-items: baseline;
|
|
314
301
|
}
|
|
315
|
-
|
|
316
|
-
/* ========== JUSTIFY =========== */
|
|
317
|
-
.main-start {
|
|
302
|
+
.elbe .main-start {
|
|
318
303
|
justify-content: flex-start;
|
|
319
304
|
}
|
|
320
|
-
|
|
321
|
-
.main-center, dialog {
|
|
305
|
+
.elbe .main-center, .elbe dialog {
|
|
322
306
|
justify-content: center;
|
|
323
307
|
}
|
|
324
|
-
|
|
325
|
-
.main-end {
|
|
308
|
+
.elbe .main-end {
|
|
326
309
|
justify-content: flex-end;
|
|
327
310
|
}
|
|
328
|
-
|
|
329
|
-
.main-between {
|
|
311
|
+
.elbe .main-between {
|
|
330
312
|
justify-content: space-between;
|
|
331
313
|
}
|
|
332
|
-
|
|
333
|
-
.main-around {
|
|
314
|
+
.elbe .main-around {
|
|
334
315
|
justify-content: space-around;
|
|
335
316
|
}
|
|
336
|
-
|
|
337
|
-
.main-evenly {
|
|
317
|
+
.elbe .main-evenly {
|
|
338
318
|
justify-content: space-evenly;
|
|
339
319
|
}
|
|
340
|
-
|
|
341
|
-
/* ========== RESPONSIVE =========== */
|
|
342
320
|
@media (max-width: 700px) {
|
|
343
|
-
.row-resp {
|
|
321
|
+
.elbe .row-resp {
|
|
344
322
|
flex-direction: column;
|
|
345
323
|
}
|
|
346
|
-
.if-wide {
|
|
324
|
+
.elbe .if-wide {
|
|
347
325
|
display: none;
|
|
348
326
|
}
|
|
349
327
|
}
|
|
350
328
|
@media (min-width: 700px) {
|
|
351
|
-
.if-narrow {
|
|
329
|
+
.elbe .if-narrow {
|
|
352
330
|
display: none;
|
|
353
331
|
}
|
|
354
332
|
}
|
|
355
|
-
.wrap {
|
|
333
|
+
.elbe .wrap {
|
|
356
334
|
flex-wrap: wrap;
|
|
357
335
|
}
|
|
358
|
-
|
|
359
|
-
.
|
|
360
|
-
input[type=
|
|
361
|
-
input[type=
|
|
362
|
-
input[type=
|
|
363
|
-
input[type=
|
|
364
|
-
|
|
365
|
-
textarea, select {
|
|
336
|
+
.elbe .c_from_context, .elbe input[type=text],
|
|
337
|
+
.elbe input[type=number],
|
|
338
|
+
.elbe input[type=password],
|
|
339
|
+
.elbe input[type=email],
|
|
340
|
+
.elbe input[type=date],
|
|
341
|
+
.elbe input[type=time],
|
|
342
|
+
.elbe textarea, .elbe select {
|
|
366
343
|
background-color: var(--c-context-back);
|
|
367
344
|
color: var(--c-context-front);
|
|
368
345
|
border: var(--g-border-width) solid var(--c-context-border);
|
|
369
346
|
}
|
|
370
|
-
|
|
371
|
-
.borderless {
|
|
347
|
+
.elbe .borderless {
|
|
372
348
|
border: none;
|
|
373
349
|
}
|
|
374
|
-
|
|
375
|
-
.bordered {
|
|
350
|
+
.elbe .bordered {
|
|
376
351
|
border: var(--g-border-width) solid var(--c-context-border);
|
|
377
352
|
}
|
|
378
|
-
|
|
379
|
-
button {
|
|
353
|
+
.elbe button {
|
|
380
354
|
justify-content: center;
|
|
381
355
|
padding: 0.25rem 0.75rem;
|
|
382
356
|
gap: 0.5rem;
|
|
@@ -400,17 +374,15 @@ button {
|
|
|
400
374
|
}
|
|
401
375
|
}*/
|
|
402
376
|
}
|
|
403
|
-
button:not(.dummy_class_001) {
|
|
377
|
+
.elbe button:not(.dummy_class_001) {
|
|
404
378
|
border: none;
|
|
405
379
|
}
|
|
406
|
-
|
|
407
|
-
.icon {
|
|
380
|
+
.elbe .icon {
|
|
408
381
|
aspect-ratio: 1;
|
|
409
382
|
border-radius: 25%;
|
|
410
383
|
object-fit: cover;
|
|
411
384
|
}
|
|
412
|
-
|
|
413
|
-
.toast {
|
|
385
|
+
.elbe .toast {
|
|
414
386
|
position: fixed;
|
|
415
387
|
bottom: 1rem;
|
|
416
388
|
right: 1rem;
|
|
@@ -419,15 +391,13 @@ button:not(.dummy_class_001) {
|
|
|
419
391
|
width: min(40rem, 90%);
|
|
420
392
|
transform: translateX(-50%);
|
|
421
393
|
}
|
|
422
|
-
|
|
423
|
-
select {
|
|
394
|
+
.elbe select {
|
|
424
395
|
padding: 0 0.75rem;
|
|
425
396
|
height: 3rem;
|
|
426
397
|
min-width: 12rem;
|
|
427
398
|
width: 100%;
|
|
428
399
|
}
|
|
429
|
-
|
|
430
|
-
dialog {
|
|
400
|
+
.elbe dialog {
|
|
431
401
|
z-index: 100;
|
|
432
402
|
position: fixed;
|
|
433
403
|
top: 0;
|
|
@@ -440,30 +410,27 @@ dialog {
|
|
|
440
410
|
transition: background-color 0.3s ease-in-out;
|
|
441
411
|
transition: backdrop-filter 0.3s ease-in-out;
|
|
442
412
|
}
|
|
443
|
-
dialog > * {
|
|
413
|
+
.elbe dialog > * {
|
|
444
414
|
display: none;
|
|
445
415
|
}
|
|
446
|
-
dialog[open=""] {
|
|
416
|
+
.elbe dialog[open=""] {
|
|
447
417
|
background-color: rgba(0, 0, 0, 0.2);
|
|
448
418
|
backdrop-filter: blur(5px);
|
|
449
419
|
pointer-events: all;
|
|
450
420
|
}
|
|
451
|
-
dialog[open=""] > * {
|
|
421
|
+
.elbe dialog[open=""] > * {
|
|
452
422
|
display: unset;
|
|
453
423
|
}
|
|
454
|
-
|
|
455
|
-
.expandable {
|
|
424
|
+
.elbe .expandable {
|
|
456
425
|
max-height: 0px;
|
|
457
426
|
transition: max-height 0.25s ease-out;
|
|
458
427
|
overflow: hidden;
|
|
459
428
|
}
|
|
460
|
-
|
|
461
|
-
.expandable:has(*) {
|
|
429
|
+
.elbe .expandable:has(*) {
|
|
462
430
|
max-height: 500px;
|
|
463
431
|
transition: max-height 0.25s ease-in;
|
|
464
432
|
}
|
|
465
|
-
|
|
466
|
-
.header {
|
|
433
|
+
.elbe .header {
|
|
467
434
|
width: 100%;
|
|
468
435
|
position: fixed;
|
|
469
436
|
left: 0;
|
|
@@ -484,46 +451,43 @@ dialog[open=""] > * {
|
|
|
484
451
|
justify-content: space-between;
|
|
485
452
|
align-items: center;
|
|
486
453
|
}
|
|
487
|
-
|
|
488
|
-
input[type=
|
|
489
|
-
input[type=
|
|
490
|
-
input[type=
|
|
491
|
-
input[type=
|
|
492
|
-
input[type=
|
|
493
|
-
|
|
494
|
-
textarea {
|
|
454
|
+
.elbe input[type=text],
|
|
455
|
+
.elbe input[type=number],
|
|
456
|
+
.elbe input[type=password],
|
|
457
|
+
.elbe input[type=email],
|
|
458
|
+
.elbe input[type=date],
|
|
459
|
+
.elbe input[type=time],
|
|
460
|
+
.elbe textarea {
|
|
495
461
|
padding: 0 0.75rem;
|
|
496
462
|
height: 3rem;
|
|
497
463
|
min-width: 12rem;
|
|
498
464
|
width: 100%;
|
|
499
465
|
}
|
|
500
|
-
|
|
501
|
-
textarea {
|
|
466
|
+
.elbe textarea {
|
|
502
467
|
height: 6rem;
|
|
503
468
|
padding: 0.6rem 0.75rem;
|
|
504
469
|
resize: vertical;
|
|
505
470
|
min-height: 3rem;
|
|
506
471
|
}
|
|
507
|
-
|
|
508
|
-
input[type=range] {
|
|
472
|
+
.elbe input[type=range] {
|
|
509
473
|
-webkit-appearance: none;
|
|
510
474
|
appearance: none;
|
|
511
475
|
background: transparent;
|
|
512
476
|
cursor: pointer;
|
|
513
477
|
width: 15rem;
|
|
514
478
|
}
|
|
515
|
-
input[type=range]::-moz-range-track {
|
|
479
|
+
.elbe input[type=range]::-moz-range-track {
|
|
516
480
|
background-color: var(--c-context-border);
|
|
517
481
|
border-radius: 100px;
|
|
518
482
|
border: none;
|
|
519
483
|
height: 0.5rem;
|
|
520
484
|
}
|
|
521
|
-
input[type=range]::-webkit-slider-runnable-track {
|
|
485
|
+
.elbe input[type=range]::-webkit-slider-runnable-track {
|
|
522
486
|
border-radius: 100px;
|
|
523
487
|
border: none;
|
|
524
488
|
height: 0.5rem;
|
|
525
489
|
}
|
|
526
|
-
input[type=range]::-webkit-slider-thumb {
|
|
490
|
+
.elbe input[type=range]::-webkit-slider-thumb {
|
|
527
491
|
border: none;
|
|
528
492
|
-webkit-appearance: none;
|
|
529
493
|
appearance: none;
|
|
@@ -532,8 +496,7 @@ input[type=range]::-webkit-slider-thumb {
|
|
|
532
496
|
height: 1.2rem;
|
|
533
497
|
width: 1.2rem;
|
|
534
498
|
}
|
|
535
|
-
|
|
536
|
-
input[type=checkbox] {
|
|
499
|
+
.elbe input[type=checkbox] {
|
|
537
500
|
-webkit-appearance: none;
|
|
538
501
|
appearance: none;
|
|
539
502
|
margin: 0;
|
|
@@ -548,8 +511,7 @@ input[type=checkbox] {
|
|
|
548
511
|
place-content: center;
|
|
549
512
|
outline: none;
|
|
550
513
|
}
|
|
551
|
-
|
|
552
|
-
input[type=checkbox]::before {
|
|
514
|
+
.elbe input[type=checkbox]::before {
|
|
553
515
|
content: "";
|
|
554
516
|
width: 0.95rem;
|
|
555
517
|
height: 0.75rem;
|
|
@@ -558,64 +520,21 @@ input[type=checkbox]::before {
|
|
|
558
520
|
transform-origin: center;
|
|
559
521
|
transition: 0.2s all ease-in-out;
|
|
560
522
|
}
|
|
561
|
-
|
|
562
|
-
input[type=checkbox]:checked {
|
|
523
|
+
.elbe input[type=checkbox]:checked {
|
|
563
524
|
border-color: var(--c-accent);
|
|
564
525
|
background: color-mix(in srgb, var(--c-accent) 20%, transparent);
|
|
565
526
|
}
|
|
566
|
-
input[type=checkbox]:checked::before {
|
|
527
|
+
.elbe input[type=checkbox]:checked::before {
|
|
567
528
|
transform: scale(1);
|
|
568
529
|
background-color: var(--c-accent);
|
|
569
530
|
}
|
|
570
|
-
|
|
571
|
-
input[type=checkbox]:focus {
|
|
531
|
+
.elbe input[type=checkbox]:focus {
|
|
572
532
|
outline: max(2px, 0.15em) solid var(--c-accent);
|
|
573
533
|
outline-offset: 0;
|
|
574
534
|
}
|
|
575
|
-
|
|
576
|
-
input[type=checkbox]:not(:checked):disabled {
|
|
535
|
+
.elbe input[type=checkbox]:not(:checked):disabled {
|
|
577
536
|
cursor: not-allowed;
|
|
578
537
|
border: 0.16em solid var(--c-context-border);
|
|
579
538
|
}
|
|
580
539
|
|
|
581
|
-
:root {
|
|
582
|
-
--g-size: 1rem;
|
|
583
|
-
--g-radius: 0.75rem;
|
|
584
|
-
--g-padding: 1rem;
|
|
585
|
-
--g-border-width: 0.125rem;
|
|
586
|
-
--c-context-back: #ffffff;
|
|
587
|
-
--c-context-front: #000;
|
|
588
|
-
--c-context-border: #000;
|
|
589
|
-
line-height: 1.3;
|
|
590
|
-
color: #222;
|
|
591
|
-
background-color: #ffffff;
|
|
592
|
-
font-synthesis: none;
|
|
593
|
-
text-rendering: optimizeLegibility;
|
|
594
|
-
-webkit-font-smoothing: antialiased;
|
|
595
|
-
-moz-osx-font-smoothing: grayscale;
|
|
596
|
-
-webkit-text-size-adjust: 100%;
|
|
597
|
-
box-sizing: border-box;
|
|
598
|
-
font-size: 1rem;
|
|
599
|
-
border-collapse: separate;
|
|
600
|
-
font-family: "Inter", sans-serif;
|
|
601
|
-
}
|
|
602
|
-
|
|
603
|
-
*,
|
|
604
|
-
*:before,
|
|
605
|
-
*:after {
|
|
606
|
-
box-sizing: inherit;
|
|
607
|
-
font-size: inherit;
|
|
608
|
-
font-family: inherit;
|
|
609
|
-
font-weight: inherit;
|
|
610
|
-
border-color: inherit;
|
|
611
|
-
}
|
|
612
|
-
|
|
613
|
-
body,
|
|
614
|
-
#app {
|
|
615
|
-
margin: 0;
|
|
616
|
-
display: block;
|
|
617
|
-
min-height: 100vh;
|
|
618
|
-
background-color: white;
|
|
619
|
-
}
|
|
620
|
-
|
|
621
540
|
/*# sourceMappingURL=elbe.css.map */
|
package/dist/elbe.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sourceRoot":"","sources":["../style/elbe.scss","../style/_base.scss","../style/_flex.scss","../style/_components.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA;AAOQ;
|
|
1
|
+
{"version":3,"sourceRoot":"","sources":["../style/elbe.scss","../style/_base.scss","../style/_flex.scss","../style/_components.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA;AAOQ;AAMR;EACE;EACA;EACA;EACA;EAEA;EACA;EACA;EAGA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;;;AAGF;AAAA;AAAA;EAGE;EACA;EACA;EACA;EACA;;;AAGF;AAAA;EAEE;EACA;EACA;EACA;;;AAIF;AC3DA;AAoBA;AA6DA;AAUA;AAaA;AA8BA;AC9GA;AAqBA;AAYA;AAkBA;AAqBA;;AD9FA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAEE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAMF;EACE;;AAEF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAEE;EACA;EACA;;AAEF;EACE;;AAGF;AAAA;EAEE;;AAGF;EACE;;AAEF;EACE;;AAGF;EACE;EACA;;AACA;EACE;;AAIJ;EACE;;AAGF;EACE;;AAEF;EACE;;AAEF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAKF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAEE;EACA;;AAOF;EACE;;AAGF;EAEE;EACA;EACA;;AAKF;AAAA;EAEE;;AAEF;AAAA;AAAA;AAAA;EAEE;;AAEF;EACE;;AAEF;EACE;;AAEF;EACE;;AAEF;EACE;;AAEF;EACE;;AAEF;EACE;EACA;;AAKF;EACE;EACA;EACA;EACA;;AAGF;EACE;IACE;;EAEF;IACE;;;ACpJJ;AAAA;AAAA;AAAA;AAAA;EAGE;EACA;EACA;EACA;;AAGF;EACE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;;AAKF;EACE;;AAEF;EACE;;AAEF;EACE;;AAEF;EACE;;AAEF;EACE;;AAEF;EACE;;AAKF;EACE;;AAIA;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AAMJ;EACE;;AAEF;EACE;;AAEF;EACE;;AAEF;EACE;;AAEF;EACE;;AAKF;EACE;;AAEF;EACE;;AAEF;EACE;;AAEF;EACE;;AAEF;EACE;;AAEF;EACE;;AAKF;EACE;IACE;;EAEF;IACE;;;AAIJ;EACE;IACE;;;AAIJ;EACE;;AClHF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EACE;EACA;EACA;;AAGF;EACE;;AAGF;EACE;;AAIF;EAIE;EACA;EACA;EACA;EACA;EACA;EACA;AAMA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAJA;EACE;;AAoBJ;EACE;EACA;EACA;;AAGF;EAIE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EAGE;EACA;EACA;EACA;;AAGF;EAKE;EAEA;EACA;EACA;EACA;EACA;EAEA;EAEA;EAEA;EAEA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;;AACA;EACE;;AAKN;EACE;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EAGC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACC;EAGD;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;;AAKD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAWE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAGF;EAEE;EACA;EACA;;AAGF;EAGE;EACA;EACA;EACA;EACA;EACA;EACA;;AAOJ;EACE;EACA;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EAEA;EACA;EACA;;AAIF;EACE;EACA;;AACA;EACE;EACA;;AAMJ;EACE;EACA;;AAGF;EACE;EACA","file":"elbe.css"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "elbe-ui",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.37",
|
|
4
4
|
"author": "Robin Naumann",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"repository": {
|
|
@@ -20,7 +20,7 @@
|
|
|
20
20
|
"scripts": {
|
|
21
21
|
"build:ts": "tsc",
|
|
22
22
|
"build:dts": "tsc --declaration",
|
|
23
|
-
"build:css": "sass
|
|
23
|
+
"build:css": "sass -q style/elbe.scss dist/elbe.css",
|
|
24
24
|
"build": "rm -rf ./dist && bun run build:ts && bun run build:dts && bun run build:css"
|
|
25
25
|
},
|
|
26
26
|
"devDependencies": {
|