@egovernments/digit-ui-components-css 0.0.2-beta.25 → 0.0.2-beta.26
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/index.css +261 -128
- package/dist/index.min.css +2 -2
- package/package.json +1 -1
- package/src/digitv2/components/accordionV2.scss +67 -0
- package/src/digitv2/components/mobilesidebarV2.scss +133 -56
package/package.json
CHANGED
|
@@ -102,4 +102,71 @@
|
|
|
102
102
|
&.cardBg{
|
|
103
103
|
background-color: theme(digitv2.lightTheme.paper-secondary);
|
|
104
104
|
}
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
@keyframes rotateOpen {
|
|
108
|
+
from {
|
|
109
|
+
transform: rotate(-180deg);
|
|
110
|
+
}
|
|
111
|
+
to {
|
|
112
|
+
transform: rotate(-90deg);
|
|
113
|
+
}
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
@keyframes rotateClose {
|
|
117
|
+
from {
|
|
118
|
+
transform: rotate(-90deg);
|
|
119
|
+
}
|
|
120
|
+
to {
|
|
121
|
+
transform: rotate(-180deg);
|
|
122
|
+
}
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
.digit-accordion-toggle.animate-open svg {
|
|
126
|
+
animation: rotateOpen 0.5s ease forwards;
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
.digit-accordion-toggle.animate-close svg {
|
|
130
|
+
animation: rotateClose 0.5s ease forwards;
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
|
|
134
|
+
/* .digit-accordion-content {
|
|
135
|
+
transform: scaleY(0);
|
|
136
|
+
transform-origin: top;
|
|
137
|
+
opacity: 0;
|
|
138
|
+
height: 0;
|
|
139
|
+
overflow: hidden;
|
|
140
|
+
transition: transform 0.3s ease, opacity 0.3s ease;
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
.digit-accordion-content.open {
|
|
144
|
+
transform: scaleY(1);
|
|
145
|
+
opacity: 1;
|
|
146
|
+
height: auto;
|
|
147
|
+
overflow: visible;
|
|
148
|
+
}*/
|
|
149
|
+
|
|
150
|
+
.digit-accordion-wrapper{
|
|
151
|
+
display: flex;
|
|
152
|
+
flex-direction: column;
|
|
153
|
+
|
|
154
|
+
@media (max-aspect-ratio: 9/16) {
|
|
155
|
+
/* Media query for mobile */
|
|
156
|
+
gap: theme(digitv2.spacers.spacer4);
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
@media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
|
|
160
|
+
/* Media query for tablets */
|
|
161
|
+
gap: theme(digitv2.spacers.spacer5);
|
|
162
|
+
}
|
|
163
|
+
|
|
164
|
+
@media (min-aspect-ratio: 3/4) {
|
|
165
|
+
/* Media query for desktop */
|
|
166
|
+
gap: theme(digitv2.spacers.spacer6);
|
|
167
|
+
}
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
.digit-accordion-divider{
|
|
171
|
+
width: 100%;
|
|
105
172
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
.msb-sidebar {
|
|
1
|
+
.digit-msb-sidebar {
|
|
2
2
|
background-color: theme(digitv2.lightTheme.paper-primary);
|
|
3
3
|
color: theme(digitv2.lightTheme.primary-2);
|
|
4
4
|
display: flex;
|
|
@@ -10,6 +10,7 @@
|
|
|
10
10
|
left: 0;
|
|
11
11
|
top: 0;
|
|
12
12
|
min-width: 17.5rem;
|
|
13
|
+
z-index: 1000;
|
|
13
14
|
flex-direction: column;
|
|
14
15
|
|
|
15
16
|
&.dark {
|
|
@@ -18,7 +19,7 @@
|
|
|
18
19
|
}
|
|
19
20
|
}
|
|
20
21
|
|
|
21
|
-
.msb-profile {
|
|
22
|
+
.digit-msb-profile {
|
|
22
23
|
display: flex;
|
|
23
24
|
align-items: center;
|
|
24
25
|
padding: theme(digitv2.spacers.spacer6);
|
|
@@ -26,21 +27,20 @@
|
|
|
26
27
|
gap: theme(digitv2.spacers.spacer3);
|
|
27
28
|
}
|
|
28
29
|
|
|
29
|
-
.msb-profile-icon {
|
|
30
|
+
.digit-msb-profile-icon {
|
|
30
31
|
width: 3.875rem;
|
|
31
32
|
height: 4rem;
|
|
32
33
|
margin-right: theme(digitv2.spacers.spacer4);
|
|
33
34
|
}
|
|
34
35
|
|
|
35
|
-
.msb-profile-details {
|
|
36
|
+
.digit-msb-profile-details {
|
|
36
37
|
display: flex;
|
|
37
38
|
flex-direction: column;
|
|
38
39
|
gap: theme(digitv2.spacers.spacer1);
|
|
39
|
-
;
|
|
40
40
|
text-align: center;
|
|
41
41
|
}
|
|
42
42
|
|
|
43
|
-
.msb-profile-name {
|
|
43
|
+
.digit-msb-profile-name {
|
|
44
44
|
font-family: theme(digitv2.fontFamily.sans);
|
|
45
45
|
font-style: theme(digitv2.fontStyle.normal);
|
|
46
46
|
font-weight: theme(digitv2.fontWeight.bold);
|
|
@@ -68,7 +68,7 @@
|
|
|
68
68
|
}
|
|
69
69
|
}
|
|
70
70
|
|
|
71
|
-
.msb-profile-phone {
|
|
71
|
+
.digit-msb-profile-phone {
|
|
72
72
|
font-family: theme(digitv2.fontFamily.sans);
|
|
73
73
|
font-style: theme(digitv2.fontStyle.normal);
|
|
74
74
|
font-weight: theme(digitv2.fontWeight.regular);
|
|
@@ -96,45 +96,49 @@
|
|
|
96
96
|
}
|
|
97
97
|
}
|
|
98
98
|
|
|
99
|
-
.msb-sidebar-items {
|
|
99
|
+
.digit-msb-sidebar-items {
|
|
100
100
|
flex: 1;
|
|
101
101
|
overflow-y: auto;
|
|
102
102
|
overflow-x: hidden;
|
|
103
103
|
}
|
|
104
104
|
|
|
105
|
-
.msb-item-child-wrapper {
|
|
105
|
+
.digit-msb-item-child-wrapper {
|
|
106
106
|
display: flex;
|
|
107
107
|
flex-direction: column;
|
|
108
108
|
height: theme(digitv2.spacers.spacer12);
|
|
109
109
|
padding: theme(digitv2.spacers.spacer3) theme(digitv2.spacers.spacer6);
|
|
110
|
-
;
|
|
111
110
|
justify-content: space-between;
|
|
112
111
|
border-top: 0.063rem solid theme(digitv2.lightTheme.generic-divider);
|
|
112
|
+
|
|
113
|
+
&.usermanuals{
|
|
114
|
+
padding: theme(digitv2.spacers.spacer4) theme(digitv2.spacers.spacer6);
|
|
115
|
+
height: 3.5rem;
|
|
116
|
+
}
|
|
113
117
|
}
|
|
114
118
|
|
|
115
|
-
.msb-item-child-wrapper:last-child,
|
|
116
|
-
.msb-item-child-wrapper.expanded {
|
|
119
|
+
.digit-msb-item-child-wrapper:last-child,
|
|
120
|
+
.digit-msb-item-child-wrapper.expanded {
|
|
117
121
|
border-bottom: 0.063rem solid theme(digitv2.lightTheme.generic-divider);
|
|
118
122
|
}
|
|
119
123
|
|
|
120
|
-
.msb-item-child-wrapper:not(.dark):nth-child(2n+1) {
|
|
124
|
+
.digit-msb-item-child-wrapper:not(.dark):nth-child(2n+1) {
|
|
121
125
|
background-color: theme(digitv2.lightTheme.paper-secondary);
|
|
122
126
|
}
|
|
123
127
|
|
|
124
|
-
.msb-item-child-wrapper.expanded {
|
|
128
|
+
.digit-msb-item-child-wrapper.expanded {
|
|
125
129
|
height: auto;
|
|
126
130
|
}
|
|
127
131
|
|
|
128
|
-
.msb-sidebar-item {
|
|
132
|
+
.digit-msb-sidebar-item {
|
|
129
133
|
display: flex;
|
|
130
134
|
align-items: center;
|
|
131
135
|
cursor: pointer;
|
|
132
136
|
}
|
|
133
137
|
|
|
134
|
-
.msb-sidebar-item.msb-parentLevel {
|
|
138
|
+
.digit-msb-sidebar-item.digit-msb-parentLevel {
|
|
135
139
|
height: theme(digitv2.spacers.spacer6);
|
|
136
140
|
|
|
137
|
-
.msb-item-label {
|
|
141
|
+
.digit-msb-item-label {
|
|
138
142
|
font-family: theme(digitv2.fontFamily.sans);
|
|
139
143
|
font-style: theme(digitv2.fontStyle.normal);
|
|
140
144
|
font-weight: theme(digitv2.fontWeight.bold);
|
|
@@ -157,19 +161,52 @@
|
|
|
157
161
|
}
|
|
158
162
|
}
|
|
159
163
|
|
|
160
|
-
.msb-
|
|
164
|
+
.digit-msb-item-label{
|
|
165
|
+
&.usermanuals{
|
|
166
|
+
@extend .typography.body-xs;
|
|
167
|
+
font-family: theme(digitv2.fontFamily.sans);
|
|
168
|
+
font-style: theme(digitv2.fontStyle.normal);
|
|
169
|
+
font-weight: theme(digitv2.fontWeight.regular);
|
|
170
|
+
line-height: theme(digitv2.lineHeight.lineheight2);
|
|
171
|
+
|
|
172
|
+
@media (max-aspect-ratio: 9/16) {
|
|
173
|
+
/* Media query for mobile */
|
|
174
|
+
font-size: theme(digitv2.fontSize.body-xs.mobile);
|
|
175
|
+
}
|
|
176
|
+
|
|
177
|
+
@media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
|
|
178
|
+
/* Media query for tablets */
|
|
179
|
+
font-size: theme(digitv2.fontSize.body-xs.tablet);
|
|
180
|
+
}
|
|
181
|
+
|
|
182
|
+
@media (min-aspect-ratio: 3/4) {
|
|
183
|
+
/* Media query for desktop */
|
|
184
|
+
font-size: theme(digitv2.fontSize.body-xs.desktop);
|
|
185
|
+
}
|
|
186
|
+
}
|
|
187
|
+
}
|
|
188
|
+
.digit-msb-sidebar-item .digit-msb-icon {
|
|
161
189
|
margin-right: theme(digitv2.spacers.spacer4);
|
|
190
|
+
|
|
191
|
+
&.usermanuals{
|
|
192
|
+
display: flex;
|
|
193
|
+
width: theme(digitv2.spacers.spacer6);
|
|
194
|
+
height: theme(digitv2.spacers.spacer6);
|
|
195
|
+
justify-content: center;
|
|
196
|
+
align-items: center;
|
|
197
|
+
margin-right: theme(digitv2.spacers.spacer2);
|
|
198
|
+
}
|
|
162
199
|
}
|
|
163
200
|
|
|
164
|
-
.msb-expand-icon {
|
|
201
|
+
.digit-msb-expand-icon {
|
|
165
202
|
margin-left: auto;
|
|
166
203
|
}
|
|
167
204
|
|
|
168
|
-
.msb-sidebar-children {
|
|
205
|
+
.digit-msb-sidebar-children {
|
|
169
206
|
width: "100%";
|
|
170
207
|
transition: height 0.3s ease;
|
|
171
208
|
|
|
172
|
-
.inner-level-child {
|
|
209
|
+
.digit-inner-level-child {
|
|
173
210
|
margin-left: 3.5rem;
|
|
174
211
|
border-left: 0.063rem solid theme(digitv2.lightTheme.generic-divider);
|
|
175
212
|
|
|
@@ -179,19 +216,49 @@
|
|
|
179
216
|
}
|
|
180
217
|
}
|
|
181
218
|
|
|
219
|
+
.digit-msb-no-results{
|
|
220
|
+
@extend .typography.body-s;
|
|
221
|
+
display: flex;
|
|
222
|
+
flex-direction: column;
|
|
223
|
+
height: theme(digitv2.spacers.spacer12);
|
|
224
|
+
padding: theme(digitv2.spacers.spacer3) theme(digitv2.spacers.spacer6);
|
|
225
|
+
justify-content: space-between;
|
|
226
|
+
border-top: 0.063rem solid theme(digitv2.lightTheme.generic-divider);
|
|
227
|
+
color:theme(digitv2.lightTheme.text-disabled);
|
|
228
|
+
font-family: theme(digitv2.fontFamily.sans);
|
|
229
|
+
font-style: theme(digitv2.fontStyle.normal);
|
|
230
|
+
font-weight: theme(digitv2.fontWeight.regular);
|
|
231
|
+
line-height: theme(digitv2.lineHeight.lineheight2);
|
|
232
|
+
|
|
233
|
+
@media (max-aspect-ratio: 9/16) {
|
|
234
|
+
/* Media query for mobile */
|
|
235
|
+
font-size: theme(digitv2.fontSize.body-s.mobile);
|
|
236
|
+
}
|
|
237
|
+
|
|
238
|
+
@media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
|
|
239
|
+
/* Media query for tablets */
|
|
240
|
+
font-size: theme(digitv2.fontSize.body-s.tablet);
|
|
241
|
+
}
|
|
182
242
|
|
|
183
|
-
|
|
243
|
+
@media (min-aspect-ratio: 3/4) {
|
|
244
|
+
/* Media query for desktop */
|
|
245
|
+
font-size: theme(digitv2.fontSize.body-s.desktop);
|
|
246
|
+
}
|
|
247
|
+
}
|
|
248
|
+
|
|
249
|
+
|
|
250
|
+
.digit-msb-sidebar-children.expanded {
|
|
184
251
|
height: auto;
|
|
185
252
|
}
|
|
186
253
|
|
|
187
254
|
|
|
188
|
-
.mb-search-container {
|
|
255
|
+
.digit-mb-search-container {
|
|
189
256
|
height: 4.5rem;
|
|
190
257
|
min-width: 15rem;
|
|
191
258
|
width: auto;
|
|
192
259
|
padding: theme(digitv2.spacers.spacer4) !important;
|
|
193
260
|
|
|
194
|
-
.mb-search {
|
|
261
|
+
.digit-mb-search {
|
|
195
262
|
height: theme(digitv2.spacers.spacer10) !important;
|
|
196
263
|
min-width: 13rem;
|
|
197
264
|
|
|
@@ -251,13 +318,13 @@
|
|
|
251
318
|
}
|
|
252
319
|
}
|
|
253
320
|
|
|
254
|
-
.mb-search-container.dark {
|
|
321
|
+
.digit-mb-search-container.dark {
|
|
255
322
|
height: 4.5rem;
|
|
256
323
|
min-width: 15rem;
|
|
257
324
|
width: auto;
|
|
258
325
|
padding: theme(digitv2.spacers.spacer4) !important;
|
|
259
326
|
|
|
260
|
-
.mb-search {
|
|
327
|
+
.digit-mb-search {
|
|
261
328
|
height: theme(digitv2.spacers.spacer10) !important;
|
|
262
329
|
min-width: 13rem;
|
|
263
330
|
|
|
@@ -316,7 +383,7 @@
|
|
|
316
383
|
}
|
|
317
384
|
}
|
|
318
385
|
|
|
319
|
-
.msb-sidebar-bottom {
|
|
386
|
+
.digit-msb-sidebar-bottom {
|
|
320
387
|
background-color: theme(digitv2.lightTheme.paper-secondary);
|
|
321
388
|
z-index: 5;
|
|
322
389
|
padding: theme(digitv2.spacers.spacer4);
|
|
@@ -342,14 +409,14 @@
|
|
|
342
409
|
}
|
|
343
410
|
}
|
|
344
411
|
|
|
345
|
-
.icon-msb {
|
|
412
|
+
.digit-icon-msb {
|
|
346
413
|
margin-right: theme(digitv2.spacers.spacer3);
|
|
347
414
|
width: theme(digitv2.spacers.spacer6);
|
|
348
415
|
height: theme(digitv2.spacers.spacer6);
|
|
349
416
|
margin-left: theme(digitv2.spacers.spacer7);
|
|
350
417
|
}
|
|
351
418
|
|
|
352
|
-
.item-label-msb {
|
|
419
|
+
.digit-item-label-msb {
|
|
353
420
|
|
|
354
421
|
font-family: theme(digitv2.fontFamily.sans);
|
|
355
422
|
font-style: theme(digitv2.fontStyle.normal);
|
|
@@ -370,9 +437,13 @@
|
|
|
370
437
|
/* Media query for desktop */
|
|
371
438
|
font-size: theme(digitv2.fontSize.body-s.desktop);
|
|
372
439
|
}
|
|
440
|
+
|
|
441
|
+
&.withoutIcon{
|
|
442
|
+
margin-left: theme(digitv2.spacers.spacer7);
|
|
443
|
+
}
|
|
373
444
|
}
|
|
374
445
|
|
|
375
|
-
.expand-icon-msb {
|
|
446
|
+
.digit-expand-icon-msb {
|
|
376
447
|
width: theme(digitv2.spacers.spacer6);
|
|
377
448
|
height: theme(digitv2.spacers.spacer6);
|
|
378
449
|
margin-left: auto !important;
|
|
@@ -382,7 +453,7 @@
|
|
|
382
453
|
}
|
|
383
454
|
}
|
|
384
455
|
|
|
385
|
-
.sidebar-item-msb {
|
|
456
|
+
.digit-sidebar-item-msb {
|
|
386
457
|
display: flex;
|
|
387
458
|
align-items: center;
|
|
388
459
|
text-decoration: none;
|
|
@@ -395,33 +466,33 @@
|
|
|
395
466
|
}
|
|
396
467
|
|
|
397
468
|
|
|
398
|
-
.item-child-wrapper-msb {
|
|
469
|
+
.digit-item-child-wrapper-msb {
|
|
399
470
|
width: 100%;
|
|
400
471
|
height: theme(digitv2.spacers.spacer12);
|
|
401
472
|
display: flex;
|
|
402
473
|
align-items: center;
|
|
403
474
|
justify-content: center;
|
|
404
475
|
|
|
405
|
-
.sidebar-item-msb:hover {
|
|
476
|
+
.digit-sidebar-item-msb:hover {
|
|
406
477
|
background-color: #FFFFFF4D;
|
|
407
478
|
}
|
|
408
479
|
|
|
409
|
-
.sidebar-item-msb:active,
|
|
410
|
-
.sidebar-item-msb.selected,
|
|
411
|
-
.sidebar-item-msb.selectedAsParent {
|
|
480
|
+
.digit-sidebar-item-msb:active,
|
|
481
|
+
.digit-sidebar-item-msb.selected,
|
|
482
|
+
.digit-sidebar-item-msb.selectedAsParent {
|
|
412
483
|
background: #c84c0e1a;
|
|
413
484
|
|
|
414
|
-
.item-label-msb {
|
|
485
|
+
.digit-item-label-msb {
|
|
415
486
|
color: theme(digitv2.lightTheme.primary-2);
|
|
416
487
|
}
|
|
417
488
|
}
|
|
418
489
|
|
|
419
|
-
.sidebar-item-msb.selected::before,
|
|
420
|
-
.sidebar-item-msb:active::before,
|
|
421
|
-
.sidebar-item-msb:active:hover::before,
|
|
422
|
-
.sidebar-item-msb.selected:hover::before,
|
|
423
|
-
.sidebar-item-msb.selectedAsParent::before,
|
|
424
|
-
.sidebar-item-msb.selectedAsParent:hover::before {
|
|
490
|
+
.digit-sidebar-item-msb.selected::before,
|
|
491
|
+
.digit-sidebar-item-msb:active::before,
|
|
492
|
+
.digit-sidebar-item-msb:active:hover::before,
|
|
493
|
+
.digit-sidebar-item-msb.selected:hover::before,
|
|
494
|
+
.digit-sidebar-item-msb.selectedAsParent::before,
|
|
495
|
+
.digit-sidebar-item-msb.selectedAsParent:hover::before {
|
|
425
496
|
content: '';
|
|
426
497
|
position: absolute;
|
|
427
498
|
top: 0.062rem;
|
|
@@ -433,21 +504,21 @@
|
|
|
433
504
|
border-bottom-right-radius: theme(digitv2.spacers.spacer1);
|
|
434
505
|
}
|
|
435
506
|
|
|
436
|
-
.sidebar-item-msb.dark:active,
|
|
437
|
-
.sidebar-item-msb.dark.selected,
|
|
438
|
-
.sidebar-item-msb.dark.selectedAsParent {
|
|
507
|
+
.digit-sidebar-item-msb.dark:active,
|
|
508
|
+
.digit-sidebar-item-msb.dark.selected,
|
|
509
|
+
.digit-sidebar-item-msb.dark.selectedAsParent {
|
|
439
510
|
background: theme(digitv2.lightTheme.primary-1);
|
|
440
|
-
.item-label-msb {
|
|
511
|
+
.digit-item-label-msb {
|
|
441
512
|
color: theme(digitv2.lightTheme.paper-primary);
|
|
442
513
|
}
|
|
443
514
|
}
|
|
444
515
|
|
|
445
|
-
.sidebar-item-msb.dark.selected::before,
|
|
446
|
-
.sidebar-item-msb.dark:active::before,
|
|
447
|
-
.sidebar-item-msb.dark.selectedAsParent::before,
|
|
448
|
-
.sidebar-item-msb.dark:active:hover::before,
|
|
449
|
-
.sidebar-item-msb.dark.selected:hover::before,
|
|
450
|
-
.sidebar-item-msb.dark.selectedAsParent:hover::before {
|
|
516
|
+
.digit-sidebar-item-msb.dark.selected::before,
|
|
517
|
+
.digit-sidebar-item-msb.dark:active::before,
|
|
518
|
+
.digit-sidebar-item-msb.dark.selectedAsParent::before,
|
|
519
|
+
.digit-sidebar-item-msb.dark:active:hover::before,
|
|
520
|
+
.digit-sidebar-item-msb.dark.selected:hover::before,
|
|
521
|
+
.digit-sidebar-item-msb.dark.selectedAsParent:hover::before {
|
|
451
522
|
content: '';
|
|
452
523
|
position: absolute;
|
|
453
524
|
top: 0.062rem;
|
|
@@ -461,17 +532,23 @@
|
|
|
461
532
|
}
|
|
462
533
|
|
|
463
534
|
|
|
464
|
-
.msb-sidebar-items::-webkit-scrollbar {
|
|
535
|
+
.digit-msb-sidebar-items::-webkit-scrollbar {
|
|
465
536
|
width: 0.375rem;
|
|
466
537
|
background-color: theme(digitv2.lightTheme.generic-background);
|
|
467
538
|
}
|
|
468
539
|
|
|
469
|
-
.msb-sidebar-items::-webkit-scrollbar-track {
|
|
540
|
+
.digit-msb-sidebar-items::-webkit-scrollbar-track {
|
|
470
541
|
background-color: theme(digitv2.lightTheme.generic-background);
|
|
471
542
|
border-radius: 0.563rem;
|
|
472
543
|
}
|
|
473
544
|
|
|
474
|
-
.msb-sidebar-items::-webkit-scrollbar-thumb {
|
|
545
|
+
.digit-msb-sidebar-items::-webkit-scrollbar-thumb {
|
|
475
546
|
background-color: theme(digitv2.lightTheme.generic-divider);
|
|
476
547
|
border-radius: 0.563rem;
|
|
548
|
+
}
|
|
549
|
+
|
|
550
|
+
.digit-hamburger-profile{
|
|
551
|
+
width: 3.875rem;
|
|
552
|
+
height: 4rem;
|
|
553
|
+
object-fit: cover;
|
|
477
554
|
}
|