@arsedizioni/ars-utils 22.0.65 → 22.0.67
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/clipper.ui/ui/clipper.scss +51 -63
- package/fesm2022/arsedizioni-ars-utils-clipper.ui.mjs +12 -12
- package/fesm2022/arsedizioni-ars-utils-clipper.ui.mjs.map +1 -1
- package/fesm2022/arsedizioni-ars-utils-ui.application.mjs +4 -4
- package/fesm2022/arsedizioni-ars-utils-ui.application.mjs.map +1 -1
- package/package.json +1 -1
- package/types/arsedizioni-ars-utils-clipper.ui.d.ts +1 -1
- package/types/arsedizioni-ars-utils-ui.application.d.ts +2 -2
- package/types/arsedizioni-ars-utils-ui.d.ts +1 -1
|
@@ -1,5 +1,26 @@
|
|
|
1
1
|
@use '../../styles/ui.scss';
|
|
2
2
|
|
|
3
|
+
// ---------------------------------------------------------------------------
|
|
4
|
+
// Shared helpers
|
|
5
|
+
// ---------------------------------------------------------------------------
|
|
6
|
+
// Clamp text to 3 lines (used by item / tile / stripe titles)
|
|
7
|
+
@mixin line-clamp-3 {
|
|
8
|
+
overflow: hidden;
|
|
9
|
+
text-overflow: ellipsis;
|
|
10
|
+
white-space: initial;
|
|
11
|
+
display: -webkit-box;
|
|
12
|
+
-webkit-line-clamp: 3;
|
|
13
|
+
-webkit-box-orient: vertical;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
// Shared text styling for the .item-content info labels
|
|
17
|
+
@mixin item-info-label {
|
|
18
|
+
font-size: x-small !important;
|
|
19
|
+
font-weight: 700 !important;
|
|
20
|
+
line-height: 18px;
|
|
21
|
+
text-transform: uppercase !important;
|
|
22
|
+
}
|
|
23
|
+
|
|
3
24
|
.clipper-logo {
|
|
4
25
|
background-size: 110px 48px;
|
|
5
26
|
width: 110px;
|
|
@@ -24,41 +45,32 @@
|
|
|
24
45
|
|
|
25
46
|
|
|
26
47
|
|
|
27
|
-
.
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
.expiring {
|
|
36
|
-
color: var(--app-color-warning, #FFC107) !important;
|
|
37
|
-
}
|
|
48
|
+
// State color + background utilities (app-color tokens). name -> fallback
|
|
49
|
+
$state-colors: (
|
|
50
|
+
unread: #f7931c,
|
|
51
|
+
expired: #ff5449,
|
|
52
|
+
expiring: #FFC107,
|
|
53
|
+
closed: #388E3C,
|
|
54
|
+
);
|
|
38
55
|
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
}
|
|
56
|
+
@each $state, $fallback in $state-colors {
|
|
57
|
+
.#{$state} {
|
|
58
|
+
color: var(--app-color-#{$state}, $fallback) !important;
|
|
59
|
+
}
|
|
42
60
|
|
|
43
|
-
|
|
44
|
-
|
|
61
|
+
.#{$state}-bg {
|
|
62
|
+
background-color: var(--app-color-#{$state}, $fallback) !important;
|
|
63
|
+
}
|
|
45
64
|
}
|
|
46
65
|
|
|
66
|
+
// Background-only variant (uses the ars-color design token)
|
|
47
67
|
.error-bg {
|
|
48
68
|
background-color: var(--ars-color-error, #ff5449) !important;
|
|
49
69
|
}
|
|
50
70
|
|
|
51
|
-
.
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
.expiring-bg {
|
|
56
|
-
background-color: var(--app-color-expiring, #FFC107) !important;
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
.popular-bg,
|
|
60
|
-
.closed-bg {
|
|
61
|
-
background-color: var(--ars-color-closed, #388E3C) !important;
|
|
71
|
+
// .popular-bg is an alias of .closed-bg
|
|
72
|
+
.popular-bg {
|
|
73
|
+
background-color: var(--app-color-closed, #388E3C) !important;
|
|
62
74
|
}
|
|
63
75
|
|
|
64
76
|
.very-popular-bg {
|
|
@@ -128,28 +140,19 @@
|
|
|
128
140
|
|
|
129
141
|
.item-info-1,
|
|
130
142
|
.info-1 {
|
|
131
|
-
|
|
132
|
-
font-weight: 700 !important;
|
|
133
|
-
line-height: 18px;
|
|
134
|
-
text-transform: uppercase !important;
|
|
143
|
+
@include item-info-label;
|
|
135
144
|
color: var(--ars-color-accent, #7894ae);
|
|
136
145
|
}
|
|
137
146
|
|
|
138
147
|
.item-info-2,
|
|
139
148
|
.info-2 {
|
|
140
|
-
|
|
141
|
-
font-weight: 700 !important;
|
|
142
|
-
line-height: 18px;
|
|
143
|
-
text-transform: uppercase !important;
|
|
149
|
+
@include item-info-label;
|
|
144
150
|
color: var(--ars-color-accent-low, #456179);
|
|
145
151
|
}
|
|
146
152
|
|
|
147
153
|
.item-info-3,
|
|
148
154
|
.info-3 {
|
|
149
|
-
|
|
150
|
-
font-weight: 700 !important;
|
|
151
|
-
line-height: 18px;
|
|
152
|
-
text-transform: uppercase !important;
|
|
155
|
+
@include item-info-label;
|
|
153
156
|
color: var(--ars-color-error, #ff5449);
|
|
154
157
|
}
|
|
155
158
|
|
|
@@ -164,12 +167,7 @@
|
|
|
164
167
|
white-space: initial !important;
|
|
165
168
|
|
|
166
169
|
@supports (-webkit-line-clamp: 3) {
|
|
167
|
-
|
|
168
|
-
text-overflow: ellipsis;
|
|
169
|
-
white-space: initial;
|
|
170
|
-
display: -webkit-box;
|
|
171
|
-
-webkit-line-clamp: 3;
|
|
172
|
-
-webkit-box-orient: vertical;
|
|
170
|
+
@include line-clamp-3;
|
|
173
171
|
}
|
|
174
172
|
}
|
|
175
173
|
|
|
@@ -201,7 +199,7 @@
|
|
|
201
199
|
cursor: pointer !important;
|
|
202
200
|
color: var(--ars-color-link, #03A9F4);
|
|
203
201
|
font-size: 11px !important;
|
|
204
|
-
font-weight: 500 !important;
|
|
202
|
+
font-weight: 500 !important;
|
|
205
203
|
}
|
|
206
204
|
}
|
|
207
205
|
}
|
|
@@ -314,13 +312,13 @@
|
|
|
314
312
|
text-transform: uppercase !important;
|
|
315
313
|
|
|
316
314
|
.date-day {
|
|
317
|
-
color: var(--ars-accent, #7894ae);
|
|
315
|
+
color: var(--ars-color-accent, #7894ae);
|
|
318
316
|
}
|
|
319
317
|
|
|
320
318
|
.date-divider {
|
|
321
319
|
width: 1px;
|
|
322
320
|
margin: 0 8px;
|
|
323
|
-
border-left: 1px solid var(--ars-color-
|
|
321
|
+
border-left: 1px solid var(--ars-color-divider, #757d87);
|
|
324
322
|
}
|
|
325
323
|
}
|
|
326
324
|
|
|
@@ -342,12 +340,7 @@
|
|
|
342
340
|
overflow: hidden !important;
|
|
343
341
|
|
|
344
342
|
@supports (-webkit-line-clamp: 3) {
|
|
345
|
-
|
|
346
|
-
text-overflow: ellipsis;
|
|
347
|
-
white-space: initial;
|
|
348
|
-
display: -webkit-box;
|
|
349
|
-
-webkit-line-clamp: 3;
|
|
350
|
-
-webkit-box-orient: vertical;
|
|
343
|
+
@include line-clamp-3;
|
|
351
344
|
}
|
|
352
345
|
}
|
|
353
346
|
|
|
@@ -449,13 +442,13 @@
|
|
|
449
442
|
text-transform: uppercase !important;
|
|
450
443
|
|
|
451
444
|
.date-day {
|
|
452
|
-
color: var(--ars-accent, #7894ae);
|
|
445
|
+
color: var(--ars-color-accent, #7894ae);
|
|
453
446
|
}
|
|
454
447
|
|
|
455
448
|
.date-divider {
|
|
456
449
|
width: 1px;
|
|
457
450
|
margin: 0 8px;
|
|
458
|
-
border-left: 1px solid var(--ars-color-
|
|
451
|
+
border-left: 1px solid var(--ars-color-divider, #757d87);
|
|
459
452
|
}
|
|
460
453
|
}
|
|
461
454
|
|
|
@@ -475,12 +468,7 @@
|
|
|
475
468
|
overflow: hidden !important;
|
|
476
469
|
|
|
477
470
|
@supports (-webkit-line-clamp: 3) {
|
|
478
|
-
|
|
479
|
-
text-overflow: ellipsis;
|
|
480
|
-
white-space: initial;
|
|
481
|
-
display: -webkit-box;
|
|
482
|
-
-webkit-line-clamp: 3;
|
|
483
|
-
-webkit-box-orient: vertical;
|
|
471
|
+
@include line-clamp-3;
|
|
484
472
|
}
|
|
485
473
|
}
|
|
486
474
|
|
|
@@ -535,7 +523,7 @@
|
|
|
535
523
|
|
|
536
524
|
@media screen and (max-width: 431px) {
|
|
537
525
|
.legend-container {
|
|
538
|
-
font-size: 9px !important
|
|
526
|
+
font-size: 9px !important;
|
|
539
527
|
}
|
|
540
528
|
}
|
|
541
529
|
|