@awes-io/ui 2.88.0 → 2.89.1
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/CHANGELOG.md +29 -0
- package/assets/css/components/_index.css +2 -0
- package/assets/css/components/action-button.css +12 -1
- package/assets/css/components/button.css +4 -0
- package/assets/css/components/image-upload.css +81 -0
- package/assets/css/components/label.css +12 -1
- package/assets/css/components/list.css +23 -0
- package/assets/css/components/modal.css +37 -37
- package/assets/css/components/nav.css +1 -0
- package/assets/css/components/page-header.css +17 -1
- package/assets/css/components/page-headline.css +0 -56
- package/assets/css/components/tags.css +12 -8
- package/assets/css/typography.css +23 -1
- package/assets/js/icons/mono.js +11 -3
- package/assets/js/icons/multicolor.js +6 -0
- package/assets/js/styles.js +18 -12
- package/assets/js/url.js +3 -0
- package/components/1_atoms/AwActionIcon.vue +1 -1
- package/components/1_atoms/AwLabel.vue +23 -35
- package/components/1_atoms/AwList.vue +27 -0
- package/components/1_atoms/AwTag.vue +54 -0
- package/components/2_molecules/AwActionButton.vue +7 -1
- package/components/2_molecules/AwButton.vue +1 -1
- package/components/3_organisms/AwImageUpload.vue +267 -0
- package/components/3_organisms/AwModalButtons.vue +1 -1
- package/components/3_organisms/AwPreviewCard.vue +73 -0
- package/components/3_organisms/AwTags.vue +5 -7
- package/components/5_layouts/_AwNoty.vue +12 -23
- package/components/_config.js +9 -0
- package/nuxt/index.js +2 -1
- package/package.json +4 -3
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,35 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [2.89.1](https://github.com/awes-io/client/compare/@awes-io/ui@2.89.0...@awes-io/ui@2.89.1) (2024-01-12)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Bug Fixes
|
|
10
|
+
|
|
11
|
+
* typo fixed ([db3bfd1](https://github.com/awes-io/client/commit/db3bfd13f8d0c731ba1cc4403ad3ccf1ea64177e))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
# [2.89.0](https://github.com/awes-io/client/compare/@awes-io/ui@2.88.0...@awes-io/ui@2.89.0) (2023-12-27)
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
### Bug Fixes
|
|
21
|
+
|
|
22
|
+
* **aw-action-button:** empty first icon allowed ([4d17819](https://github.com/awes-io/client/commit/4d17819000fe2e90d2b848d5d97cd34d499b9627))
|
|
23
|
+
* label markup updated ([77e3250](https://github.com/awes-io/client/commit/77e32501fe429efb61880c8790bc67ca07d50cba))
|
|
24
|
+
|
|
25
|
+
|
|
26
|
+
### Features
|
|
27
|
+
|
|
28
|
+
* **aw-image-upload:** component added ([d801ab4](https://github.com/awes-io/client/commit/d801ab40fe6b8023aee66e3a1396686ae5ec26a2))
|
|
29
|
+
* change padding in label ([f37d82d](https://github.com/awes-io/client/commit/f37d82dba7da4c52e1347885ad9c7e43faea6f49))
|
|
30
|
+
|
|
31
|
+
|
|
32
|
+
|
|
33
|
+
|
|
34
|
+
|
|
6
35
|
# [2.88.0](https://github.com/awes-io/client/compare/@awes-io/ui@2.87.0...@awes-io/ui@2.88.0) (2023-12-26)
|
|
7
36
|
|
|
8
37
|
|
|
@@ -40,6 +40,7 @@
|
|
|
40
40
|
@import './dropdown-button.css';
|
|
41
41
|
@import './flow.css';
|
|
42
42
|
@import './filter-date-range.css';
|
|
43
|
+
@import './list.css';
|
|
43
44
|
|
|
44
45
|
@import './form.css';
|
|
45
46
|
@import './switch-field.css';
|
|
@@ -47,6 +48,7 @@
|
|
|
47
48
|
@import './date.css';
|
|
48
49
|
@import './filter-month.css';
|
|
49
50
|
@import './headline.css';
|
|
51
|
+
@import './image-upload.css';
|
|
50
52
|
@import './info.css';
|
|
51
53
|
@import './island.css';
|
|
52
54
|
@import './island-avatar.css';
|
|
@@ -16,6 +16,16 @@
|
|
|
16
16
|
transition: 60ms color, 60ms background-color;
|
|
17
17
|
}
|
|
18
18
|
|
|
19
|
+
&__icon-empty {
|
|
20
|
+
display: block;
|
|
21
|
+
width: 1px;
|
|
22
|
+
margin-left: -1px;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
&__icon-empty + &__text {
|
|
26
|
+
margin-left: -1rem;
|
|
27
|
+
}
|
|
28
|
+
|
|
19
29
|
&:hover &__icon-wrapper {
|
|
20
30
|
color: var(--bg-color);
|
|
21
31
|
background-color: var(--color);
|
|
@@ -44,7 +54,8 @@
|
|
|
44
54
|
}
|
|
45
55
|
|
|
46
56
|
&--outline {
|
|
47
|
-
box-shadow: 0 0 0 2px var(--c-mono-
|
|
57
|
+
box-shadow: 0 0 0 2px var(--c-mono-800) inset;
|
|
58
|
+
background: transparent;
|
|
48
59
|
}
|
|
49
60
|
|
|
50
61
|
&--narrow {
|
|
@@ -0,0 +1,81 @@
|
|
|
1
|
+
.aw-image-upload {
|
|
2
|
+
display: grid;
|
|
3
|
+
gap: 1rem;
|
|
4
|
+
|
|
5
|
+
@screen sm {
|
|
6
|
+
gap: 0 1.5rem;
|
|
7
|
+
grid-template-columns: 5rem auto;
|
|
8
|
+
grid-template-rows: minmax(0, max-content) 1fr;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
&__title {
|
|
12
|
+
display: flex;
|
|
13
|
+
align-items: center;
|
|
14
|
+
gap: 0.5rem;
|
|
15
|
+
min-width: 0;
|
|
16
|
+
margin-bottom: 0.5rem;
|
|
17
|
+
|
|
18
|
+
@screen sm {
|
|
19
|
+
grid-column: 2;
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
&__delete {
|
|
24
|
+
display: flex;
|
|
25
|
+
align-items: center;
|
|
26
|
+
justify-content: center;
|
|
27
|
+
|
|
28
|
+
width: 2rem;
|
|
29
|
+
height: 2rem;
|
|
30
|
+
flex-shrink: 0;
|
|
31
|
+
border-radius: 0.5rem;
|
|
32
|
+
|
|
33
|
+
color: var(--c-on-red);
|
|
34
|
+
background-color: none;
|
|
35
|
+
|
|
36
|
+
&:hover,
|
|
37
|
+
&:focus-visible {
|
|
38
|
+
/* color: var(--c-accent); */
|
|
39
|
+
background-color: var(--c-red);
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
&__description {
|
|
44
|
+
font-size: 0.875rem;
|
|
45
|
+
color: var(--c-mono-400);
|
|
46
|
+
|
|
47
|
+
@screen sm {
|
|
48
|
+
grid-row: 2;
|
|
49
|
+
grid-column: 2;
|
|
50
|
+
align-self: center;
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
&__file:hover .aw-action-icon {
|
|
55
|
+
--color: var(--c-accent) !important;
|
|
56
|
+
--icon-color: var(--c-accent) !important;
|
|
57
|
+
--bg-color: rgba(var(--c-accent-rgb), 0.2) !important;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
&__image,
|
|
61
|
+
&__file {
|
|
62
|
+
width: 5rem;
|
|
63
|
+
height: 5rem;
|
|
64
|
+
border-radius: 1.25rem;
|
|
65
|
+
object-fit: cover;
|
|
66
|
+
overflow: hidden;
|
|
67
|
+
text-overflow: ellipsis;
|
|
68
|
+
|
|
69
|
+
@screen sm {
|
|
70
|
+
grid-row: 1 / span 2;
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
&__image:where(img) {
|
|
75
|
+
background-color: var(--c-mono-900);
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
&__aw-cropper .croppie-container .cr-viewport {
|
|
79
|
+
border-radius: 3.125rem;
|
|
80
|
+
}
|
|
81
|
+
}
|
|
@@ -1,6 +1,17 @@
|
|
|
1
1
|
.aw-label {
|
|
2
|
-
|
|
2
|
+
display: inline-flex;
|
|
3
|
+
align-items: center;
|
|
4
|
+
gap: 0.25rem;
|
|
5
|
+
|
|
6
|
+
font-size: 0.75rem;
|
|
7
|
+
line-height: 1.25rem;
|
|
8
|
+
white-space: nowrap;
|
|
3
9
|
|
|
4
10
|
color: var(--aw-label-on-color, var(--c-on-surface, '#121212'));
|
|
5
11
|
background-color: var(--aw-label-bg, var(--c-surface, '#fafafa'));
|
|
12
|
+
|
|
13
|
+
padding: 0.125rem 0.5rem;
|
|
14
|
+
border-radius: 0.375rem;
|
|
15
|
+
|
|
16
|
+
position: relative;
|
|
6
17
|
}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
.aw-list {
|
|
2
|
+
display: flex;
|
|
3
|
+
flex-direction: column;
|
|
4
|
+
padding-left: 0;
|
|
5
|
+
list-style: none;
|
|
6
|
+
|
|
7
|
+
li {
|
|
8
|
+
padding-top: 1.5rem;
|
|
9
|
+
padding-bottom: 1.5rem;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
li + li {
|
|
13
|
+
border-top: 1px solid var(--c-mono-800);
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
li:first-child {
|
|
17
|
+
padding-top: 0;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
li:last-child {
|
|
21
|
+
padding-bottom: 0;
|
|
22
|
+
}
|
|
23
|
+
}
|
|
@@ -42,9 +42,9 @@ $modal-aside-width-large: 75vw;
|
|
|
42
42
|
}
|
|
43
43
|
|
|
44
44
|
&__content &__unwrap {
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
45
|
+
margin-left: -1.5rem;
|
|
46
|
+
margin-right: -1.5rem;
|
|
47
|
+
width: calc(100% + 3rem);
|
|
48
48
|
}
|
|
49
49
|
|
|
50
50
|
&.is-fullscreen &__content,
|
|
@@ -83,7 +83,7 @@ $modal-aside-width-large: 75vw;
|
|
|
83
83
|
padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 1.25rem);
|
|
84
84
|
|
|
85
85
|
& > .aw-button {
|
|
86
|
-
|
|
86
|
+
flex-grow: 1;
|
|
87
87
|
}
|
|
88
88
|
}
|
|
89
89
|
|
|
@@ -192,35 +192,35 @@ $modal-aside-width-large: 75vw;
|
|
|
192
192
|
@screen md {
|
|
193
193
|
.aw-modal {
|
|
194
194
|
&__header {
|
|
195
|
-
|
|
196
|
-
|
|
195
|
+
padding-top: 1.5rem;
|
|
196
|
+
min-height: auto;
|
|
197
197
|
}
|
|
198
198
|
|
|
199
199
|
&__close {
|
|
200
|
-
|
|
201
|
-
|
|
200
|
+
width: 2.5rem;
|
|
201
|
+
height: 2.5rem;
|
|
202
202
|
}
|
|
203
203
|
|
|
204
204
|
&__buttons {
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
205
|
+
padding-left: 2rem;
|
|
206
|
+
padding-right: 2rem;
|
|
207
|
+
border-bottom-left-radius: 1rem;
|
|
208
|
+
border-bottom-right-radius: 1rem;
|
|
209
209
|
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
210
|
+
& > .aw-button {
|
|
211
|
+
flex-grow: 0;
|
|
212
|
+
/* margin-right: 1rem;
|
|
213
213
|
margin-bottom: 1rem; */
|
|
214
|
-
|
|
214
|
+
}
|
|
215
215
|
}
|
|
216
216
|
|
|
217
217
|
&__content &__unwrap {
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
218
|
+
margin-left: -2rem;
|
|
219
|
+
margin-right: -2rem;
|
|
220
|
+
width: calc(100% + 4rem);
|
|
221
221
|
}
|
|
222
222
|
|
|
223
|
-
&:not(.is-aside):not([class*=
|
|
223
|
+
&:not(.is-aside):not([class*='is-overlay-aside']) &__header {
|
|
224
224
|
@apply items-center justify-center px-8;
|
|
225
225
|
}
|
|
226
226
|
|
|
@@ -228,25 +228,25 @@ $modal-aside-width-large: 75vw;
|
|
|
228
228
|
@apply px-16 pt-32 pb-8;
|
|
229
229
|
}
|
|
230
230
|
|
|
231
|
-
&:not(.is-aside):not([class*=
|
|
231
|
+
&:not(.is-aside):not([class*='is-overlay-aside']) &__title {
|
|
232
232
|
@apply font-normal pr-0 text-3xl mt-3;
|
|
233
233
|
}
|
|
234
234
|
|
|
235
|
-
&:not(.is-aside):not([class*=
|
|
236
|
-
&:not(.is-aside):not([class*=
|
|
235
|
+
&:not(.is-aside):not([class*='is-overlay-aside']) &__title,
|
|
236
|
+
&:not(.is-aside):not([class*='is-overlay-aside']) &__subtitle {
|
|
237
237
|
@apply text-center;
|
|
238
238
|
}
|
|
239
239
|
|
|
240
|
-
&:not(.is-aside):not([class*=
|
|
240
|
+
&:not(.is-aside):not([class*='is-overlay-aside']) &__subtitle {
|
|
241
241
|
@apply px-8;
|
|
242
242
|
}
|
|
243
243
|
|
|
244
|
-
&:not(.is-aside):not([class*=
|
|
244
|
+
&:not(.is-aside):not([class*='is-overlay-aside']) &__content,
|
|
245
245
|
&__content--buttons {
|
|
246
246
|
@apply p-8;
|
|
247
247
|
}
|
|
248
248
|
|
|
249
|
-
&[class*=
|
|
249
|
+
&[class*='is-overlay-aside'] &__content--buttons {
|
|
250
250
|
padding-bottom: 7rem;
|
|
251
251
|
}
|
|
252
252
|
|
|
@@ -271,7 +271,7 @@ $modal-aside-width-large: 75vw;
|
|
|
271
271
|
}
|
|
272
272
|
|
|
273
273
|
&[class*='is-overlay-aside'] &__body {
|
|
274
|
-
flex-grow: 1
|
|
274
|
+
flex-grow: 1;
|
|
275
275
|
}
|
|
276
276
|
|
|
277
277
|
&[class*='is-overlay-aside'] &__content--buttons {
|
|
@@ -284,11 +284,11 @@ $modal-aside-width-large: 75vw;
|
|
|
284
284
|
bottom: 0;
|
|
285
285
|
|
|
286
286
|
& > .aw-button {
|
|
287
|
-
|
|
287
|
+
flex-grow: 1;
|
|
288
288
|
}
|
|
289
289
|
}
|
|
290
290
|
|
|
291
|
-
&[class*=
|
|
291
|
+
&[class*='is-overlay-aside'] &__dialog {
|
|
292
292
|
max-height: var(--viewport-height, 100vh);
|
|
293
293
|
}
|
|
294
294
|
|
|
@@ -313,14 +313,13 @@ $modal-aside-width-large: 75vw;
|
|
|
313
313
|
font-weight: 700;
|
|
314
314
|
}
|
|
315
315
|
|
|
316
|
-
|
|
317
|
-
&[class*="is-overlay-aside"] &__header {
|
|
316
|
+
&[class*='is-overlay-aside'] &__header {
|
|
318
317
|
padding-top: 1.5rem;
|
|
319
318
|
padding-left: 1.5rem;
|
|
320
319
|
padding-right: 1.5rem;
|
|
321
320
|
}
|
|
322
321
|
|
|
323
|
-
&[class*=
|
|
322
|
+
&[class*='is-overlay-aside'] &__close {
|
|
324
323
|
top: 0;
|
|
325
324
|
right: 0;
|
|
326
325
|
}
|
|
@@ -363,11 +362,13 @@ $modal-aside-width-large: 75vw;
|
|
|
363
362
|
right: theme('spacing.16');
|
|
364
363
|
}
|
|
365
364
|
|
|
366
|
-
&:not(.is-aside):not([class*='is-overlay-aside']):not(.is-fullscreen)
|
|
365
|
+
&:not(.is-aside):not([class*='is-overlay-aside']):not(.is-fullscreen)
|
|
366
|
+
&__header {
|
|
367
367
|
justify-content: space-between;
|
|
368
368
|
}
|
|
369
369
|
|
|
370
|
-
&:not(.is-aside):not([class*='is-overlay-aside']):not(.is-fullscreen)
|
|
370
|
+
&:not(.is-aside):not([class*='is-overlay-aside']):not(.is-fullscreen)
|
|
371
|
+
&__title {
|
|
371
372
|
margin-top: 0;
|
|
372
373
|
font-size: 1.25rem;
|
|
373
374
|
line-height: 1.5rem;
|
|
@@ -375,7 +376,7 @@ $modal-aside-width-large: 75vw;
|
|
|
375
376
|
}
|
|
376
377
|
|
|
377
378
|
&:not(.is-aside):not([class*='is-overlay-aside']) &__content {
|
|
378
|
-
padding-top:
|
|
379
|
+
padding-top: 1rem;
|
|
379
380
|
padding-bottom: 2rem;
|
|
380
381
|
}
|
|
381
382
|
|
|
@@ -383,7 +384,7 @@ $modal-aside-width-large: 75vw;
|
|
|
383
384
|
opacity: 1;
|
|
384
385
|
}
|
|
385
386
|
|
|
386
|
-
&--md.is-default
|
|
387
|
+
&--md.is-default {
|
|
387
388
|
.aw-modal__dialog {
|
|
388
389
|
max-width: 53.375rem;
|
|
389
390
|
width: 100%;
|
|
@@ -554,7 +555,6 @@ $modal-t-dur: 250ms;
|
|
|
554
555
|
}
|
|
555
556
|
}
|
|
556
557
|
|
|
557
|
-
|
|
558
558
|
/* aside */
|
|
559
559
|
.modal-transition-bottom {
|
|
560
560
|
&-enter,
|
|
@@ -20,7 +20,7 @@
|
|
|
20
20
|
&__title {
|
|
21
21
|
@apply font-body;
|
|
22
22
|
|
|
23
|
-
flex: 1
|
|
23
|
+
flex: 1 1 50%;
|
|
24
24
|
|
|
25
25
|
display: -webkit-box;
|
|
26
26
|
-webkit-line-clamp: 2;
|
|
@@ -45,6 +45,22 @@
|
|
|
45
45
|
|
|
46
46
|
&__buttons {
|
|
47
47
|
justify-content: flex-end;
|
|
48
|
+
/* align-items: center; */
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
@screen md {
|
|
53
|
+
.aw-page-header {
|
|
54
|
+
|
|
55
|
+
&__title,
|
|
56
|
+
&__breadcrumbs {
|
|
57
|
+
flex: 1 1 calc(100% / 3);
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
&__buttons {
|
|
61
|
+
flex: 1 0 auto;
|
|
62
|
+
min-width: calc(100% / 3);
|
|
63
|
+
}
|
|
48
64
|
}
|
|
49
65
|
}
|
|
50
66
|
|
|
@@ -57,30 +57,7 @@
|
|
|
57
57
|
|
|
58
58
|
&__back {
|
|
59
59
|
margin-left: var(--container-padding, theme('spacing.4', 1rem));
|
|
60
|
-
background: var(--c-mono-800);
|
|
61
|
-
color: var(--c-on-mono-800);
|
|
62
|
-
border-radius: 0.9375rem;
|
|
63
|
-
width: 3rem;
|
|
64
|
-
height: 3rem;
|
|
65
|
-
display: flex;
|
|
66
|
-
align-items: center;
|
|
67
|
-
justify-content: center;
|
|
68
60
|
margin-right: 10px;
|
|
69
|
-
|
|
70
|
-
&:hover {
|
|
71
|
-
background: var(--c-mono-700);
|
|
72
|
-
}
|
|
73
|
-
|
|
74
|
-
svg {
|
|
75
|
-
color: inherit;
|
|
76
|
-
margin: 0;
|
|
77
|
-
}
|
|
78
|
-
|
|
79
|
-
&-wrapper {
|
|
80
|
-
a:last-child {
|
|
81
|
-
color: var(--c-mono-400);
|
|
82
|
-
}
|
|
83
|
-
}
|
|
84
61
|
}
|
|
85
62
|
|
|
86
63
|
&__heading {
|
|
@@ -106,38 +83,5 @@
|
|
|
106
83
|
}
|
|
107
84
|
}
|
|
108
85
|
}
|
|
109
|
-
|
|
110
|
-
&__back {
|
|
111
|
-
border-radius: 0.625rem;
|
|
112
|
-
width: 2.5rem;
|
|
113
|
-
height: 2.5rem;
|
|
114
|
-
}
|
|
115
|
-
}
|
|
116
|
-
}
|
|
117
|
-
|
|
118
|
-
[data-dark='false'] {
|
|
119
|
-
.aw-page-headline {
|
|
120
|
-
&__back {
|
|
121
|
-
background: var(--c-mono-800);
|
|
122
|
-
color: var(--c-on-mono-800);
|
|
123
|
-
|
|
124
|
-
&:hover {
|
|
125
|
-
background: var(--c-mono-700);
|
|
126
|
-
}
|
|
127
|
-
}
|
|
128
|
-
}
|
|
129
|
-
}
|
|
130
|
-
|
|
131
|
-
[data-dark='true'] {
|
|
132
|
-
.aw-page-headline {
|
|
133
|
-
&__back {
|
|
134
|
-
background: var(--c-mono-800);
|
|
135
|
-
box-shadow: 0 0 0 1px rgba(var(--c-on-surface-rgb), 0.1) inset;
|
|
136
|
-
color: var(--c-on-mono-800);
|
|
137
|
-
|
|
138
|
-
&:hover {
|
|
139
|
-
background: var(--c-mono-200);
|
|
140
|
-
}
|
|
141
|
-
}
|
|
142
86
|
}
|
|
143
87
|
}
|
|
@@ -3,21 +3,25 @@
|
|
|
3
3
|
}
|
|
4
4
|
|
|
5
5
|
.aw-tag {
|
|
6
|
-
color: var(--c-on-overlay);
|
|
6
|
+
color: var(--tag-color, var(--c-on-overlay));
|
|
7
|
+
background-color: var(--tag-bg-color, var(--c-mono-100));
|
|
7
8
|
|
|
8
|
-
|
|
9
|
-
|
|
9
|
+
display: inline-flex;
|
|
10
|
+
align-items: center;
|
|
11
|
+
gap: 0.5rem;
|
|
12
|
+
|
|
13
|
+
border-radius: 1rem;
|
|
14
|
+
padding: 0.25rem 1rem;
|
|
15
|
+
min-height: 2rem;
|
|
10
16
|
min-width: calc(
|
|
11
17
|
theme('spacing.2', 0.5rem) + theme('fontSize.xs', 0.625rem)
|
|
12
18
|
);
|
|
13
19
|
|
|
14
20
|
text-align: center;
|
|
15
|
-
font-size:
|
|
16
|
-
font-
|
|
17
|
-
|
|
18
|
-
line-height: 1;
|
|
21
|
+
font-size: 0.75rem;
|
|
22
|
+
font-weight: 400;
|
|
23
|
+
line-height: 1.25rem;
|
|
19
24
|
white-space: nowrap;
|
|
20
|
-
text-shadow: 1px 1px 1px rgba(var(--c-overlay-rgb, 0, 0, 0), 0.1);
|
|
21
25
|
|
|
22
26
|
&--clickable {
|
|
23
27
|
&:focus:not(:focus-visible) {
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
html {
|
|
3
3
|
@apply font-body;
|
|
4
4
|
|
|
5
|
-
background-color: var(--page-bg);
|
|
5
|
+
background-color: var(--c-page-bg);
|
|
6
6
|
color: var(--c-on-page-bg);
|
|
7
7
|
|
|
8
8
|
line-height: 1.5;
|
|
@@ -107,6 +107,28 @@
|
|
|
107
107
|
margin: theme('spacing.4') 0;
|
|
108
108
|
}
|
|
109
109
|
|
|
110
|
+
hr[data-separator] {
|
|
111
|
+
margin-left: 2rem;
|
|
112
|
+
margin-right: 2rem;
|
|
113
|
+
width: calc(100% - 4rem);
|
|
114
|
+
|
|
115
|
+
&:after {
|
|
116
|
+
content: attr(data-separator);
|
|
117
|
+
|
|
118
|
+
display: block;
|
|
119
|
+
height: 1.5rem;
|
|
120
|
+
width: min-content;
|
|
121
|
+
padding-left: 1.5rem;
|
|
122
|
+
padding-right: 1.5rem;
|
|
123
|
+
margin: -0.75rem auto;
|
|
124
|
+
|
|
125
|
+
text-align: center;
|
|
126
|
+
font-size: 0.875rem;
|
|
127
|
+
color: var(--c-mono-400);
|
|
128
|
+
background-color: var(--c-surface);
|
|
129
|
+
}
|
|
130
|
+
}
|
|
131
|
+
|
|
110
132
|
pre {
|
|
111
133
|
@apply bg-mono-900;
|
|
112
134
|
font-family: theme('fontFamily.body', monospace);
|
package/assets/js/icons/mono.js
CHANGED
|
@@ -17,6 +17,8 @@ export const ICONS = {
|
|
|
17
17
|
'M5.4 5.6a1.4 1.4 0 0 1 1.9 0l4.4 4.5 4.5-4.5a1.3 1.3 0 1 1 1.9 2L13.6 12l4.5 4.5a1.3 1.3 0 1 1-2 1.9l-4.4-4.5-4.4 4.5a1.4 1.4 0 0 1-2-2L9.9 12 5.4 7.5a1.3 1.3 0 0 1 0-1.9Z',
|
|
18
18
|
'close-circle':
|
|
19
19
|
'M12 1a11 11 0 1 1 0 22 11 11 0 0 1 0-22Zm0 1.65a9.35 9.35 0 1 0 0 18.7 9.35 9.35 0 0 0 0-18.7Zm3.8 5.39.09.08a.82.82 0 0 1 .08 1.07l-.08.1L13.17 12l2.72 2.72a.83.83 0 0 1 .08 1.07l-.08.1a.82.82 0 0 1-1.08.07l-.09-.08L12 13.17 9.3 15.88a.83.83 0 0 1-1.08.08l-.09-.08a.83.83 0 0 1-.08-1.07l.08-.1L10.84 12 8.12 9.28a.83.83 0 0 1-.08-1.07l.08-.1a.83.83 0 0 1 1.08-.07l.09.08L12 10.83l2.72-2.71a.82.82 0 0 1 1.08-.08Z',
|
|
20
|
+
delete:
|
|
21
|
+
'M12.05 1a3.53 3.53 0 0 1 3.53 3.33v.2h5.7a.82.82 0 0 1 .12 1.62l-.11.01h-.87l-1.39 14.15a2.99 2.99 0 0 1-2.78 2.68l-.19.01H8.05a2.99 2.99 0 0 1-2.95-2.5l-.02-.2-1.4-14.14h-.86a.81.81 0 0 1-.8-.7L2 5.35a.81.81 0 0 1 .7-.81h5.82A3.53 3.53 0 0 1 12.05 1Zm6.74 5.16H5.32L6.7 20.15a1.36 1.36 0 0 0 1.21 1.21l.14.01h8.01c.65 0 1.2-.46 1.33-1.09l.02-.13L18.8 6.16Zm-4.83 2.99a.81.81 0 0 1 .8.7l.01.11v7.6a.81.81 0 0 1-1.62.12V9.97a.81.81 0 0 1 .8-.82Zm-3.8 0a.81.81 0 0 1 .8.7v7.71a.81.81 0 0 1-1.61.12l-.01-.11v-7.6a.81.81 0 0 1 .81-.82Zm1.9-6.52a1.9 1.9 0 0 0-1.9 1.74v.16h3.8a1.9 1.9 0 0 0-1.9-1.9Z',
|
|
20
22
|
download:
|
|
21
23
|
'M12.27 7.77c.43 0 .78.32.84.73V19.57l3-3 .1-.08a.85.85 0 0 1 1.18 1.18l-.08.1-4.43 4.42-.1.08c-.3.22-.7.22-1 .01l-.1-.09-4.43-4.43-.08-.1a.85.85 0 0 1 0-.99l.08-.1.1-.08c.3-.22.7-.23 1-.01l.1.09 2.97 2.97V8.62c0-.47.38-.85.85-.85ZM12 1c2.94 0 5.5 1.9 6.41 4.6h.12a4.47 4.47 0 1 1 0 8.94h-3.15a.85.85 0 0 1 0-1.7h3.15a2.78 2.78 0 1 0-.57-5.48.85.85 0 0 1-.97-.55l-.03-.12-.05-.23a5.08 5.08 0 0 0-9.82 0l-.05.21v.03a.84.84 0 0 1-.47.59l-.1.04-.05.01-.07.02h-.31a2.78 2.78 0 1 0-.75 5.49h3.33a.85.85 0 0 1 .11 1.68H5.47a4.47 4.47 0 0 1 0-8.93h.11A6.77 6.77 0 0 1 12 1Z',
|
|
22
24
|
drag:
|
|
@@ -41,6 +43,8 @@ export const ICONS = {
|
|
|
41
43
|
'm18.72 5.21-3.35-3.6A1.85 1.85 0 0 0 14.02 1h-8.1C4.85 1 4 1.92 4 3.07v17.87C4 22.08 4.86 23 5.91 23h11.44c1.06 0 1.92-.92 1.92-2.06V6.68c0-.55-.21-1.08-.56-1.47Zm-1.5 1.29h-3.03V3.23L17.2 6.5ZM5.9 20.94V3.07h6.37v4.46c0 .58.43 1.04.96 1.04h4.13v12.37H5.91Zm9.96-6.18c-.49-.52-1.87-.37-2.56-.27a3.69 3.69 0 0 1-1.47-1.98c.16-.7.4-1.76.22-2.42-.17-1.13-1.5-1.02-1.7-.26-.17.7-.01 1.65.28 2.88-.4 1.04-.99 2.42-1.4 3.2-.8.45-1.88 1.13-2.04 1.99-.13.68 1.03 2.37 3.04-1.33.88-.34 1.86-.72 2.71-.87.75.44 1.63.72 2.22.72 1.02 0 1.12-1.2.7-1.65Zm-7.89 3.35c.21-.59 1-1.27 1.21-1.51-.75 1.3-1.2 1.54-1.2 1.5Zm3.26-8.19c.3 0 .26 1.38.06 1.76-.17-.6-.16-1.76-.06-1.76Zm-.98 5.86c.4-.72.72-1.58.99-2.34a4.5 4.5 0 0 0 1.2 1.52c-.84.19-1.55.56-2.2.82Zm5.24-.22s-.2.27-1.48-.33c1.4-.1 1.63.23 1.48.33Z',
|
|
42
44
|
'file-csv':
|
|
43
45
|
'm19.9 5.21-3.61-3.6c-.39-.4-.91-.6-1.45-.61H6.06C4.92 1 4 1.92 4 3.07v17.87C4 22.08 4.92 23 6.06 23h12.37c1.15 0 2.07-.92 2.07-2.06V6.68c0-.55-.22-1.08-.6-1.47ZM15 3.23l3.27 3.27H15V3.23Zm3.44 17.71H6.06V3.07h6.87v4.46c0 .58.46 1.04 1.04 1.04h4.46v12.37h.01Zm-4.82-8.6v.9c0 1.53.56 2.96 1.57 4.04a.7.7 0 0 0 1 0 5.9 5.9 0 0 0 1.56-4.05v-.88a.34.34 0 0 0-.34-.35h-.7a.34.34 0 0 0-.34.34v.9c0 .87-.24 1.72-.69 2.45a4.69 4.69 0 0 1-.68-2.45v-.9a.34.34 0 0 0-.34-.34h-.7a.34.34 0 0 0-.34.34ZM9.16 12H8.8c-1.14 0-2.06.92-2.06 2.07v1.36c0 1.15.92 2.07 2.07 2.07h.33c.2 0 .35-.15.35-.34v-.7a.34.34 0 0 0-.34-.34H8.8a.68.68 0 0 1-.69-.69v-1.36c0-.39.31-.7.7-.7h.33c.2 0 .35-.15.35-.34v-.69a.34.34 0 0 0-.34-.34Zm2.55 1.83c-.05-.06-.09-.11-.09-.17 0-.13.19-.29.44-.29h.53c.2 0 .34-.15.34-.34v-.69a.34.34 0 0 0-.33-.34h-.54c-1 0-1.81.75-1.81 1.65 0 .47.2.91.57 1.21l.94.81c.06.06.1.11.1.17 0 .13-.2.29-.46.29h-.53a.34.34 0 0 0-.34.34v.69c0 .19.16.34.35.34h.52c1 0 1.83-.75 1.83-1.65 0-.47-.22-.91-.57-1.21l-.95-.81Z',
|
|
46
|
+
image:
|
|
47
|
+
'M17.75 3A3.25 3.25 0 0 1 21 6.25v11.5A3.25 3.25 0 0 1 17.75 21H6.25A3.25 3.25 0 0 1 3 17.75V6.25A3.25 3.25 0 0 1 6.25 3h11.5Zm.58 16.401-5.805-5.686a.75.75 0 0 0-.966-.071l-.084.07-5.807 5.687c.182.064.378.099.582.099h11.5c.203 0 .399-.035.58-.099l-5.805-5.686L18.33 19.4ZM17.75 4.5H6.25A1.75 1.75 0 0 0 4.5 6.25v11.5c0 .208.036.408.103.594l5.823-5.701a2.25 2.25 0 0 1 3.02-.116l.128.116 5.822 5.702c.067-.186.104-.386.104-.595V6.25a1.75 1.75 0 0 0-1.75-1.75Zm-2.498 2a2.252 2.252 0 1 1 0 4.504 2.252 2.252 0 0 1 0-4.504Zm0 1.5a.752.752 0 1 0 0 1.504.752.752 0 0 0 0-1.504Z',
|
|
44
48
|
'info-circle':
|
|
45
49
|
'M12 1a11 11 0 1 1 0 22 11 11 0 0 1 0-22Zm0 1.6a9.4 9.4 0 1 0 0 18.8 9.4 9.4 0 0 0 0-18.8Zm0 7.7c.4 0 .8.4.8.8v6.1a.8.8 0 0 1-1.6.1v-6.1c0-.5.3-.9.8-.9Zm0-3.8a1.1 1.1 0 1 1 0 2.2 1.1 1.1 0 0 1 0-2.2Z',
|
|
46
50
|
light: [
|
|
@@ -56,9 +60,9 @@ export const ICONS = {
|
|
|
56
60
|
'menu-dots':
|
|
57
61
|
'M6.11 8.23a2.115 2.115 0 0 0 2.28-2.112 2.12 2.12 0 0 0-2.28-2.112 2.116 2.116 0 0 0-1.953 2.112A2.12 2.12 0 0 0 6.11 8.23Zm2.117 9.488A2.12 2.12 0 0 1 6.117 20a2.116 2.116 0 0 1-2.11-2.282 2.119 2.119 0 0 1 2.11-1.954 2.115 2.115 0 0 1 2.11 1.954ZM17.72 8.23A2.115 2.115 0 0 0 20 6.118a2.119 2.119 0 0 0-2.28-2.112 2.116 2.116 0 0 0-1.953 2.112A2.119 2.119 0 0 0 17.72 8.23Zm2.104 9.488a2.122 2.122 0 0 1-1.263 2.105 2.116 2.116 0 0 1-2.958-2.105 2.119 2.119 0 0 1 2.11-1.954 2.115 2.115 0 0 1 2.11 1.954Z',
|
|
58
62
|
more:
|
|
59
|
-
'
|
|
63
|
+
'M4.5 14.25a2.25 2.25 0 1 0 0-4.5 2.25 2.25 0 0 0 0 4.5ZM12 14.25a2.25 2.25 0 1 0 0-4.5 2.25 2.25 0 0 0 0 4.5ZM19.5 14.25a2.25 2.25 0 1 0 0-4.5 2.25 2.25 0 0 0 0 4.5Z',
|
|
60
64
|
'more-v':
|
|
61
|
-
'
|
|
65
|
+
'M14.25 19.5a2.25 2.25 0 1 0-4.5 0 2.25 2.25 0 0 0 4.5 0ZM14.25 12a2.25 2.25 0 1 0-4.5 0 2.25 2.25 0 0 0 4.5 0ZM14.25 4.5a2.25 2.25 0 1 0-4.5 0 2.25 2.25 0 0 0 4.5 0Z',
|
|
62
66
|
phone:
|
|
63
67
|
'm7 1.5 1.4-.4A3 3 0 0 1 12 2.8L13 5a3 3 0 0 1-.7 3.4L10.6 10v.2c-.1.4.2 1.3.9 2.5l1.3 1.8c.2.2.4.2.5.2l2.2-.7a3 3 0 0 1 3.3 1.2l1.4 2a3 3 0 0 1-.4 3.9l-1 .9c-1 1-2.5 1.3-3.9 1-3-.9-5.7-3.4-8.1-7.6C4.3 11 3.5 7.5 4.3 4.4A4.1 4.1 0 0 1 7 1.5Zm.5 1.6c-.8.2-1.4.9-1.6 1.7-.7 2.6 0 5.8 2.3 9.6 2.2 3.9 4.6 6.2 7.2 6.9.8.2 1.7 0 2.3-.6l1-1c.5-.4.6-1.2.2-1.7l-1.5-2c-.3-.4-.9-.7-1.5-.5l-2.2.7c-1.2.4-2.4-.7-3.7-2.8-.8-1.5-1.2-2.6-1-3.5 0-.4.2-.9.5-1.2l1.6-1.5c.5-.4.6-1 .4-1.6l-1-2.2c-.3-.6-1-.9-1.7-.7l-1.3.4Z',
|
|
64
68
|
plus:
|
|
@@ -75,7 +79,11 @@ export const ICONS = {
|
|
|
75
79
|
undo:
|
|
76
80
|
'm2.54 2.6 2.17 2.17a10.24 10.24 0 0 1 15.81 12.8 10.24 10.24 0 0 1-15.45 2.01.48.48 0 0 1 0-.72l.85-.84h.6a8.07 8.07 0 1 0-.36-11.8L8.45 8.5c.36.36 0 .84-.37.84H2.3a.48.48 0 0 1-.48-.48V2.84c0-.36.48-.6.84-.24h-.12Z',
|
|
77
81
|
user:
|
|
78
|
-
'M11.9 4c-2.7 0-5 2-5 4.6 0 1.5.9 3 2.1 3.8-2.9 1-5 3.7-5 6.9 0 .2 0 .3.2.5l.6.2c.2 0 .4 0 .5-.2.2-.2.3-.3.3-.5 0-3.4 2.8-6 6.4-6 3.6 0 6.4 2.6 6.4 6 0 .2.1.4.3.5l.5.2c.2 0 .4 0 .6-.2l.2-.5c0-3.2-2.2-6-5.2-7 1.2-.8 2-2.2 2-3.7 0-2.5-2.2-4.6-5-4.6Zm0 1.5c1.9 0 3.4 1.4 3.4 3.1 0 1.7-1.5 3.1-3.4 3.1s-3.4-1.4-3.4-3.1c0-1.7 1.5-3.1 3.4-3.1Z'
|
|
82
|
+
'M11.9 4c-2.7 0-5 2-5 4.6 0 1.5.9 3 2.1 3.8-2.9 1-5 3.7-5 6.9 0 .2 0 .3.2.5l.6.2c.2 0 .4 0 .5-.2.2-.2.3-.3.3-.5 0-3.4 2.8-6 6.4-6 3.6 0 6.4 2.6 6.4 6 0 .2.1.4.3.5l.5.2c.2 0 .4 0 .6-.2l.2-.5c0-3.2-2.2-6-5.2-7 1.2-.8 2-2.2 2-3.7 0-2.5-2.2-4.6-5-4.6Zm0 1.5c1.9 0 3.4 1.4 3.4 3.1 0 1.7-1.5 3.1-3.4 3.1s-3.4-1.4-3.4-3.1c0-1.7 1.5-3.1 3.4-3.1Z',
|
|
83
|
+
warning: [
|
|
84
|
+
'M12 14.9c.47 0 .86-.4.86-.87V8.88a.86.86 0 0 0-1.72 0v5.15c0 .48.39.86.86.86ZM12 18.33a.86.86 0 1 0 0-1.72.86.86 0 0 0 0 1.72Z',
|
|
85
|
+
'M9 3.75a3.44 3.44 0 0 1 6 0v.01l7.56 13.75a3.43 3.43 0 0 1-3 5.12H4.44a3.44 3.44 0 0 1-3-5.12L9 3.76Zm1.5.84L2.94 18.34a1.72 1.72 0 0 0 1.5 2.56h15.12a1.72 1.72 0 0 0 1.5-2.55v-.01L13.5 4.59a1.72 1.72 0 0 0-3 0Z'
|
|
86
|
+
]
|
|
79
87
|
}
|
|
80
88
|
|
|
81
89
|
export const SIZE = 24
|
|
@@ -17,5 +17,11 @@ export default{
|
|
|
17
17
|
height: 100,
|
|
18
18
|
viewBox: '0 0 100 100',
|
|
19
19
|
content: '<rect width="22" height="22" x="39" y="5" fill="#7fc876" rx="11" ry="11"><animate attributeName="opacity" begin="-0.8333333333333334s" dur="1s" keyTimes="0;1" repeatCount="indefinite" values="1;0"/></rect><rect width="22" height="22" x="39" y="5" fill="#202873" rx="11" ry="11" transform="rotate(60 50 50)"><animate attributeName="opacity" begin="-0.6666666666666666s" dur="1s" keyTimes="0;1" repeatCount="indefinite" values="1;0"/></rect><rect width="22" height="22" x="39" y="5" fill="#7fc876" rx="11" ry="11" transform="rotate(120 50 50)"><animate attributeName="opacity" begin="-0.5s" dur="1s" keyTimes="0;1" repeatCount="indefinite" values="1;0"/></rect><rect width="22" height="22" x="39" y="5" fill="#202873" rx="11" ry="11" transform="rotate(180 50 50)"><animate attributeName="opacity" begin="-0.3333333333333333s" dur="1s" keyTimes="0;1" repeatCount="indefinite" values="1;0"/></rect><rect width="22" height="22" x="39" y="5" fill="#7fc876" rx="11" ry="11" transform="rotate(240 50 50)"><animate attributeName="opacity" begin="-0.16666666666666666s" dur="1s" keyTimes="0;1" repeatCount="indefinite" values="1;0"/></rect><rect width="22" height="22" x="39" y="5" fill="#202873" rx="11" ry="11" transform="rotate(300 50 50)"><animate attributeName="opacity" begin="0s" dur="1s" keyTimes="0;1" repeatCount="indefinite" values="1;0"/></rect>'
|
|
20
|
+
},
|
|
21
|
+
circle: {
|
|
22
|
+
width: 10,
|
|
23
|
+
height: 10,
|
|
24
|
+
viewBox: '0 0 10 10',
|
|
25
|
+
content: '<path fill="currentColor" fill-opacity=".5" d="M8 5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"/>'
|
|
20
26
|
}
|
|
21
27
|
}
|