@webilix/ngx-helper-m3 0.0.7 → 0.0.9
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/ngx-helper-m3.css
CHANGED
|
@@ -1,8 +1,5 @@
|
|
|
1
1
|
/* GLOBAL VALUES */
|
|
2
2
|
:root {
|
|
3
|
-
--ngx-helper-m3-font-small: 90%;
|
|
4
|
-
--ngx-helper-m3-font-large: 110%;
|
|
5
|
-
|
|
6
3
|
--ngx-helper-m3-toolbar-height: 40px;
|
|
7
4
|
}
|
|
8
5
|
|
|
@@ -11,7 +8,7 @@
|
|
|
11
8
|
display: block;
|
|
12
9
|
margin: 1.5rem 1.5rem 1rem 1.5rem;
|
|
13
10
|
|
|
14
|
-
content {
|
|
11
|
+
.confirm-content {
|
|
15
12
|
display: flex;
|
|
16
13
|
align-items: flex-start;
|
|
17
14
|
column-gap: 1rem;
|
|
@@ -29,20 +26,20 @@
|
|
|
29
26
|
|
|
30
27
|
.description {
|
|
31
28
|
text-align: justify;
|
|
32
|
-
font-size:
|
|
29
|
+
font-size: 90%;
|
|
33
30
|
}
|
|
34
31
|
|
|
35
32
|
.data {
|
|
36
33
|
display: flex;
|
|
37
34
|
align-items: center;
|
|
38
35
|
column-gap: 1rem;
|
|
39
|
-
font-size:
|
|
36
|
+
font-size: 90%;
|
|
40
37
|
margin-top: 1rem;
|
|
41
38
|
}
|
|
42
39
|
}
|
|
43
40
|
}
|
|
44
41
|
|
|
45
|
-
footer {
|
|
42
|
+
.confirm-footer {
|
|
46
43
|
display: flex;
|
|
47
44
|
align-items: center;
|
|
48
45
|
justify-content: flex-end;
|
|
@@ -57,13 +54,13 @@
|
|
|
57
54
|
max-height: 80vh;
|
|
58
55
|
overflow: hidden;
|
|
59
56
|
|
|
60
|
-
header {
|
|
57
|
+
.container-header {
|
|
61
58
|
display: flex;
|
|
62
59
|
align-items: center;
|
|
63
60
|
|
|
64
61
|
height: 65px;
|
|
65
62
|
line-height: 65px;
|
|
66
|
-
font-size:
|
|
63
|
+
font-size: 110%;
|
|
67
64
|
padding: 0 0.5rem;
|
|
68
65
|
border-bottom: 1px solid var(--outline-variant);
|
|
69
66
|
background-color: var(--surface-container);
|
|
@@ -74,7 +71,7 @@
|
|
|
74
71
|
}
|
|
75
72
|
}
|
|
76
73
|
|
|
77
|
-
content {
|
|
74
|
+
.container-content {
|
|
78
75
|
display: block;
|
|
79
76
|
max-height: calc(80vh - 67px);
|
|
80
77
|
overflow: auto;
|
|
@@ -82,6 +79,153 @@
|
|
|
82
79
|
}
|
|
83
80
|
}
|
|
84
81
|
|
|
82
|
+
/* NGX HELPER VALUE LIST */
|
|
83
|
+
.ngx-helper-m3-box {
|
|
84
|
+
display: block;
|
|
85
|
+
direction: rtl;
|
|
86
|
+
|
|
87
|
+
position: relative;
|
|
88
|
+
overflow: hidden;
|
|
89
|
+
border-radius: 4px;
|
|
90
|
+
border: 1px solid var(--outline-variant);
|
|
91
|
+
background-color: var(--surface-container-low);
|
|
92
|
+
}
|
|
93
|
+
.ngx-helper-m3-box:not(.hide-shadow)::after {
|
|
94
|
+
display: block;
|
|
95
|
+
content: ' ';
|
|
96
|
+
|
|
97
|
+
position: absolute;
|
|
98
|
+
top: 0;
|
|
99
|
+
right: 0;
|
|
100
|
+
bottom: 0;
|
|
101
|
+
left: 0;
|
|
102
|
+
|
|
103
|
+
pointer-events: none;
|
|
104
|
+
box-shadow: inset 0 0 5px 0 var(--outline-variant);
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
/* NGX HELPER CARD */
|
|
108
|
+
.ngx-helper-m3-card {
|
|
109
|
+
display: block;
|
|
110
|
+
direction: rtl;
|
|
111
|
+
|
|
112
|
+
overflow: hidden;
|
|
113
|
+
position: relative;
|
|
114
|
+
border-radius: 8px;
|
|
115
|
+
border: 1px solid var(--outline-variant);
|
|
116
|
+
|
|
117
|
+
.card-header {
|
|
118
|
+
display: flex;
|
|
119
|
+
align-items: center;
|
|
120
|
+
column-gap: 0.5rem;
|
|
121
|
+
|
|
122
|
+
height: 55px;
|
|
123
|
+
padding-right: 1rem;
|
|
124
|
+
border-radius: 8px 8px 0 0;
|
|
125
|
+
border-bottom: 1px solid var(--outline-variant);
|
|
126
|
+
background-color: var(--surface-container-high);
|
|
127
|
+
|
|
128
|
+
mat-icon {
|
|
129
|
+
margin: 0;
|
|
130
|
+
margin-left: 0.5rem;
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
.content {
|
|
134
|
+
flex: 1;
|
|
135
|
+
width: 0;
|
|
136
|
+
|
|
137
|
+
display: flex;
|
|
138
|
+
flex-direction: column;
|
|
139
|
+
padding: 0.75rem 0;
|
|
140
|
+
|
|
141
|
+
.title {
|
|
142
|
+
font-size: 110%;
|
|
143
|
+
|
|
144
|
+
white-space: nowrap;
|
|
145
|
+
overflow: hidden;
|
|
146
|
+
text-overflow: ellipsis;
|
|
147
|
+
}
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
.buttons {
|
|
151
|
+
display: flex;
|
|
152
|
+
align-items: center;
|
|
153
|
+
column-gap: 0.5rem;
|
|
154
|
+
padding-left: 0.5rem;
|
|
155
|
+
|
|
156
|
+
button {
|
|
157
|
+
display: flex;
|
|
158
|
+
justify-content: center;
|
|
159
|
+
column-gap: 0.25rem;
|
|
160
|
+
|
|
161
|
+
padding: 0 0.75rem;
|
|
162
|
+
min-width: auto;
|
|
163
|
+
height: 55px;
|
|
164
|
+
|
|
165
|
+
.title {
|
|
166
|
+
font-size: 90%;
|
|
167
|
+
}
|
|
168
|
+
|
|
169
|
+
mat-icon {
|
|
170
|
+
padding: 0;
|
|
171
|
+
margin: 0;
|
|
172
|
+
font-size: 120%;
|
|
173
|
+
line-height: 1;
|
|
174
|
+
}
|
|
175
|
+
}
|
|
176
|
+
}
|
|
177
|
+
|
|
178
|
+
.buttons.mobile-view {
|
|
179
|
+
column-gap: 0;
|
|
180
|
+
padding-left: 0;
|
|
181
|
+
|
|
182
|
+
button {
|
|
183
|
+
padding: 0 0.5rem;
|
|
184
|
+
}
|
|
185
|
+
}
|
|
186
|
+
}
|
|
187
|
+
|
|
188
|
+
.card-header.has-sub-title {
|
|
189
|
+
height: 65px;
|
|
190
|
+
|
|
191
|
+
.content {
|
|
192
|
+
.sub-title {
|
|
193
|
+
font-size: 85%;
|
|
194
|
+
|
|
195
|
+
white-space: nowrap;
|
|
196
|
+
overflow: hidden;
|
|
197
|
+
text-overflow: ellipsis;
|
|
198
|
+
}
|
|
199
|
+
}
|
|
200
|
+
|
|
201
|
+
.buttons {
|
|
202
|
+
button {
|
|
203
|
+
height: 65px;
|
|
204
|
+
}
|
|
205
|
+
}
|
|
206
|
+
}
|
|
207
|
+
|
|
208
|
+
.card-content {
|
|
209
|
+
display: block;
|
|
210
|
+
overflow: hidden;
|
|
211
|
+
border-radius: 0 0 8px 8px;
|
|
212
|
+
background-color: var(--surface-container-low);
|
|
213
|
+
}
|
|
214
|
+
}
|
|
215
|
+
.ngx-helper-m3-card.has-shadow::after {
|
|
216
|
+
display: block;
|
|
217
|
+
content: ' ';
|
|
218
|
+
|
|
219
|
+
position: absolute;
|
|
220
|
+
top: 0;
|
|
221
|
+
right: 0;
|
|
222
|
+
bottom: 0;
|
|
223
|
+
left: 0;
|
|
224
|
+
|
|
225
|
+
pointer-events: none;
|
|
226
|
+
box-shadow: inset 0 0 5px 0 var(--outline-variant);
|
|
227
|
+
}
|
|
228
|
+
|
|
85
229
|
/* NGX HELPER PAGE GROUP */
|
|
86
230
|
.ngx-helper-m3-page-group {
|
|
87
231
|
direction: rtl;
|
|
@@ -89,7 +233,7 @@
|
|
|
89
233
|
align-items: flex-start;
|
|
90
234
|
column-gap: 1rem;
|
|
91
235
|
|
|
92
|
-
aside {
|
|
236
|
+
.page-group-aside {
|
|
93
237
|
display: flex;
|
|
94
238
|
flex-direction: column;
|
|
95
239
|
row-gap: 1rem;
|
|
@@ -126,7 +270,7 @@
|
|
|
126
270
|
}
|
|
127
271
|
}
|
|
128
272
|
|
|
129
|
-
content {
|
|
273
|
+
.page-group-content {
|
|
130
274
|
flex: 1;
|
|
131
275
|
display: block;
|
|
132
276
|
|
|
@@ -146,7 +290,7 @@
|
|
|
146
290
|
flex-direction: column;
|
|
147
291
|
column-gap: 0;
|
|
148
292
|
|
|
149
|
-
nav {
|
|
293
|
+
.page-group-nav {
|
|
150
294
|
display: flex;
|
|
151
295
|
align-items: center;
|
|
152
296
|
|
|
@@ -168,7 +312,7 @@
|
|
|
168
312
|
|
|
169
313
|
.title {
|
|
170
314
|
flex: 1;
|
|
171
|
-
font-size:
|
|
315
|
+
font-size: 90%;
|
|
172
316
|
white-space: nowrap;
|
|
173
317
|
overflow: hidden;
|
|
174
318
|
text-overflow: ellipsis;
|
|
@@ -187,131 +331,18 @@
|
|
|
187
331
|
}
|
|
188
332
|
}
|
|
189
333
|
|
|
190
|
-
.
|
|
334
|
+
.page-group-spacer {
|
|
191
335
|
height: 1rem;
|
|
192
336
|
width: 100%;
|
|
193
337
|
background-color: var(--background);
|
|
194
338
|
}
|
|
195
339
|
|
|
196
|
-
content {
|
|
340
|
+
.page-group-content {
|
|
197
341
|
flex: none;
|
|
198
342
|
width: 100%;
|
|
199
343
|
}
|
|
200
344
|
}
|
|
201
345
|
|
|
202
|
-
/* NGX HELPER CARD */
|
|
203
|
-
.ngx-helper-m3-card {
|
|
204
|
-
display: block;
|
|
205
|
-
direction: rtl;
|
|
206
|
-
|
|
207
|
-
overflow: hidden;
|
|
208
|
-
position: relative;
|
|
209
|
-
border-radius: 8px;
|
|
210
|
-
border: 1px solid var(--outline-variant);
|
|
211
|
-
|
|
212
|
-
header {
|
|
213
|
-
display: flex;
|
|
214
|
-
align-items: center;
|
|
215
|
-
column-gap: 0.5rem;
|
|
216
|
-
|
|
217
|
-
height: 55px;
|
|
218
|
-
padding-right: 1rem;
|
|
219
|
-
border-radius: 8px 8px 0 0;
|
|
220
|
-
border-bottom: 1px solid var(--outline-variant);
|
|
221
|
-
background-color: var(--surface-container-high);
|
|
222
|
-
|
|
223
|
-
mat-icon {
|
|
224
|
-
margin: 0;
|
|
225
|
-
margin-left: 0.5rem;
|
|
226
|
-
}
|
|
227
|
-
|
|
228
|
-
.content {
|
|
229
|
-
flex: 1;
|
|
230
|
-
width: 0;
|
|
231
|
-
|
|
232
|
-
display: flex;
|
|
233
|
-
flex-direction: column;
|
|
234
|
-
row-gap: 0.25rem;
|
|
235
|
-
padding: 0.75rem 0;
|
|
236
|
-
|
|
237
|
-
.title {
|
|
238
|
-
font-size: var(--ngx-helper-m3-font-large);
|
|
239
|
-
line-height: 1;
|
|
240
|
-
|
|
241
|
-
white-space: nowrap;
|
|
242
|
-
overflow: hidden;
|
|
243
|
-
text-overflow: ellipsis;
|
|
244
|
-
}
|
|
245
|
-
|
|
246
|
-
.sub-title {
|
|
247
|
-
font-size: var(--ngx-helper-m3-font-small);
|
|
248
|
-
line-height: 1;
|
|
249
|
-
|
|
250
|
-
white-space: nowrap;
|
|
251
|
-
overflow: hidden;
|
|
252
|
-
text-overflow: ellipsis;
|
|
253
|
-
}
|
|
254
|
-
}
|
|
255
|
-
|
|
256
|
-
.buttons {
|
|
257
|
-
display: flex;
|
|
258
|
-
align-items: center;
|
|
259
|
-
column-gap: 0.5rem;
|
|
260
|
-
padding-left: 0.5rem;
|
|
261
|
-
|
|
262
|
-
button {
|
|
263
|
-
display: flex;
|
|
264
|
-
justify-content: center;
|
|
265
|
-
column-gap: 0.25rem;
|
|
266
|
-
|
|
267
|
-
padding: 0 0.75rem;
|
|
268
|
-
min-width: auto;
|
|
269
|
-
height: 50px;
|
|
270
|
-
|
|
271
|
-
.title {
|
|
272
|
-
font-size: var(--ngx-helper-m3-font-small);
|
|
273
|
-
}
|
|
274
|
-
|
|
275
|
-
mat-icon {
|
|
276
|
-
padding: 0;
|
|
277
|
-
margin: 0;
|
|
278
|
-
font-size: 120%;
|
|
279
|
-
line-height: 1;
|
|
280
|
-
}
|
|
281
|
-
}
|
|
282
|
-
}
|
|
283
|
-
|
|
284
|
-
.buttons.mobile-view {
|
|
285
|
-
column-gap: 0;
|
|
286
|
-
padding-left: 0;
|
|
287
|
-
|
|
288
|
-
button {
|
|
289
|
-
padding: 0 0.5rem;
|
|
290
|
-
}
|
|
291
|
-
}
|
|
292
|
-
}
|
|
293
|
-
|
|
294
|
-
content {
|
|
295
|
-
display: block;
|
|
296
|
-
overflow: hidden;
|
|
297
|
-
border-radius: 0 0 8px 8px;
|
|
298
|
-
background-color: var(--surface-container-low);
|
|
299
|
-
}
|
|
300
|
-
}
|
|
301
|
-
.ngx-helper-m3-card.has-shadow::after {
|
|
302
|
-
display: block;
|
|
303
|
-
content: ' ';
|
|
304
|
-
|
|
305
|
-
position: absolute;
|
|
306
|
-
top: 0;
|
|
307
|
-
right: 0;
|
|
308
|
-
bottom: 0;
|
|
309
|
-
left: 0;
|
|
310
|
-
|
|
311
|
-
pointer-events: none;
|
|
312
|
-
box-shadow: inset 0 0 5px 0 var(--outline-variant);
|
|
313
|
-
}
|
|
314
|
-
|
|
315
346
|
/* NGX HELPER VALUE BOX */
|
|
316
347
|
.ngx-helper-m3-value-box {
|
|
317
348
|
display: grid;
|
|
@@ -320,7 +351,7 @@
|
|
|
320
351
|
|
|
321
352
|
direction: rtl;
|
|
322
353
|
|
|
323
|
-
.box {
|
|
354
|
+
.value-box {
|
|
324
355
|
display: flex;
|
|
325
356
|
flex-direction: column;
|
|
326
357
|
align-items: center;
|
|
@@ -329,7 +360,7 @@
|
|
|
329
360
|
|
|
330
361
|
.title {
|
|
331
362
|
width: 100%;
|
|
332
|
-
font-size:
|
|
363
|
+
font-size: 90%;
|
|
333
364
|
font-weight: 500;
|
|
334
365
|
padding: 1rem 1rem 0.5rem 1rem;
|
|
335
366
|
text-align: center;
|
|
@@ -352,7 +383,7 @@
|
|
|
352
383
|
.value.empty {
|
|
353
384
|
opacity: 0.75;
|
|
354
385
|
font-style: italic;
|
|
355
|
-
font-size:
|
|
386
|
+
font-size: 90%;
|
|
356
387
|
}
|
|
357
388
|
|
|
358
389
|
button {
|
|
@@ -370,18 +401,18 @@
|
|
|
370
401
|
}
|
|
371
402
|
}
|
|
372
403
|
|
|
373
|
-
.box.click {
|
|
404
|
+
.value-box.click {
|
|
374
405
|
cursor: pointer;
|
|
375
406
|
}
|
|
376
407
|
|
|
377
|
-
.box:not(.clear
|
|
408
|
+
.value-box:not(.clear) {
|
|
378
409
|
border-radius: 4px;
|
|
379
410
|
border: 1px solid var(--outline-variant);
|
|
380
411
|
background-color: var(--surface-container-low);
|
|
381
412
|
}
|
|
382
413
|
}
|
|
383
414
|
.ngx-helper-m3-value-box:not(.hide-shadow) {
|
|
384
|
-
.box:not(.clear
|
|
415
|
+
.value-box:not(.clear)::after {
|
|
385
416
|
display: block;
|
|
386
417
|
content: ' ';
|
|
387
418
|
|
|
@@ -402,7 +433,7 @@
|
|
|
402
433
|
flex-direction: column;
|
|
403
434
|
direction: rtl;
|
|
404
435
|
|
|
405
|
-
.item {
|
|
436
|
+
.value-list-item {
|
|
406
437
|
display: flex;
|
|
407
438
|
align-items: flex-start;
|
|
408
439
|
column-gap: 1rem;
|
|
@@ -410,7 +441,7 @@
|
|
|
410
441
|
min-height: 40px;
|
|
411
442
|
|
|
412
443
|
.title {
|
|
413
|
-
font-size:
|
|
444
|
+
font-size: 90%;
|
|
414
445
|
font-weight: 500;
|
|
415
446
|
padding: 0.5rem 1rem 0.5rem 0;
|
|
416
447
|
|
|
@@ -436,7 +467,7 @@
|
|
|
436
467
|
.empty {
|
|
437
468
|
opacity: 0.75;
|
|
438
469
|
font-style: italic;
|
|
439
|
-
font-size:
|
|
470
|
+
font-size: 90%;
|
|
440
471
|
}
|
|
441
472
|
|
|
442
473
|
.click {
|
|
@@ -455,36 +486,11 @@
|
|
|
455
486
|
}
|
|
456
487
|
}
|
|
457
488
|
|
|
458
|
-
.item.odd {
|
|
489
|
+
.value-list-item.odd {
|
|
459
490
|
background-color: var(--surface-container);
|
|
460
491
|
}
|
|
461
492
|
|
|
462
|
-
.item.even {
|
|
493
|
+
.value-list-item.even {
|
|
463
494
|
background-color: var(--background);
|
|
464
495
|
}
|
|
465
496
|
}
|
|
466
|
-
|
|
467
|
-
/* NGX HELPER VALUE LIST */
|
|
468
|
-
.ngx-helper-m3-box {
|
|
469
|
-
display: block;
|
|
470
|
-
direction: rtl;
|
|
471
|
-
|
|
472
|
-
position: relative;
|
|
473
|
-
overflow: hidden;
|
|
474
|
-
border-radius: 4px;
|
|
475
|
-
border: 1px solid var(--outline-variant);
|
|
476
|
-
background-color: var(--surface-container-low);
|
|
477
|
-
}
|
|
478
|
-
.ngx-helper-m3-box:not(.hide-shadow)::after {
|
|
479
|
-
display: block;
|
|
480
|
-
content: ' ';
|
|
481
|
-
|
|
482
|
-
position: absolute;
|
|
483
|
-
top: 0;
|
|
484
|
-
right: 0;
|
|
485
|
-
bottom: 0;
|
|
486
|
-
left: 0;
|
|
487
|
-
|
|
488
|
-
pointer-events: none;
|
|
489
|
-
box-shadow: inset 0 0 5px 0 var(--outline-variant);
|
|
490
|
-
}
|