@egovernments/digit-ui-components-css 2.0.0-dev-02 → 2.0.0-dev-04

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.
Files changed (5) hide show
  1. package/dist/index.css +2 -2
  2. package/package.json +1 -1
  3. package/src/digitv2/components/checkboxV2.scss +1 -0
  4. package/src/digitv2/components/multiSelectDropdownV2.scss +500 -416
  5. package/src/digitv2/components/selectDropdownV2.scss +22 -0
package/src/digitv2/components/multiSelectDropdownV2.scss CHANGED
@@ -19,516 +19,600 @@
19
19
  /* Media query for desktop */
20
20
  max-width: 37.5rem;
21
21
  }
22
-
23
22
  @apply relative text-form-field text-text-primary w-full;
24
- .digit-multiselectdropdown-master,
25
- .digit-multiselectdropdown-master-active {
26
- @apply relative h-10 w-full bg-white;
27
- border: 0.063rem solid theme("digitv2.lightTheme.generic-inputborder");
23
+ }
24
+
25
+ .digit-multiselectdropdown-master,
26
+ .digit-multiselectdropdown-master-active {
27
+ @apply relative h-10 w-full bg-white;
28
+ border: 0.063rem solid theme("digitv2.lightTheme.generic-inputborder");
29
+
30
+ input[type="text"] {
31
+ @include typography-body-s;
32
+
33
+ @media (max-aspect-ratio: 9/16) {
34
+ /* Media query for mobile */
35
+ font-size: theme("digitv2.fontSize.body-s.mobile");
36
+ font-family: theme("digitv2.fontFamily.sans");
37
+ font-style: theme("digitv2.fontStyle.normal");
38
+ font-weight: theme("digitv2.fontWeight.regular");
39
+ line-height: theme("digitv2.lineHeight.lineheight2");
40
+ }
41
+
42
+ @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
43
+ /* Media query for tablets */
44
+ font-size: theme("digitv2.fontSize.body-s.tablet");
45
+ font-family: theme("digitv2.fontFamily.sans");
46
+ font-style: theme("digitv2.fontStyle.normal");
47
+ font-weight: theme("digitv2.fontWeight.regular");
48
+ line-height: theme("digitv2.lineHeight.lineheight2");
49
+ }
50
+
51
+ @media (min-aspect-ratio: 3/4) {
52
+ /* Media query for desktop */
53
+ font-size: theme("digitv2.fontSize.body-s.desktop");
54
+ font-family: theme("digitv2.fontFamily.sans");
55
+ font-style: theme("digitv2.fontStyle.normal");
56
+ font-weight: theme("digitv2.fontWeight.regular");
57
+ line-height: theme("digitv2.lineHeight.lineheight2");
58
+ }
59
+
60
+ @apply absolute top-0 left-0 p-sm min-h-full min-w-full opacity-0;
61
+ letter-spacing: theme("digitv2.spacers.spacer0");
62
+ padding-left: 1%;
63
+
64
+ &:focus {
65
+ @apply outline-none;
66
+ }
67
+ }
68
+
69
+ .digit-multiselectdropdown-label {
70
+ @apply flex justify-between p-sm w-full h-full;
71
+
72
+ svg {
73
+ @apply h-6 w-6;
74
+ }
75
+ }
76
+ }
77
+
78
+ .digit-multiselectdropdown-master-active {
79
+ &.searchable {
28
80
  input[type="text"] {
29
- @include typography-body-s;
30
- @media (max-aspect-ratio: 9/16) {
31
- /* Media query for mobile */
32
- font-size: theme("digitv2.fontSize.body-s.mobile");
33
- font-family: theme("digitv2.fontFamily.sans");
34
- font-style: theme("digitv2.fontStyle.normal");
35
- font-weight: theme("digitv2.fontWeight.regular");
36
- line-height: theme("digitv2.lineHeight.lineheight2");
37
- }
38
-
39
- @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
40
- /* Media query for tablets */
41
- font-size: theme("digitv2.fontSize.body-s.tablet");
42
- font-family: theme("digitv2.fontFamily.sans");
43
- font-style: theme("digitv2.fontStyle.normal");
44
- font-weight: theme("digitv2.fontWeight.regular");
45
- line-height: theme("digitv2.lineHeight.lineheight2");
46
- }
47
-
48
- @media (min-aspect-ratio: 3/4) {
49
- /* Media query for desktop */
50
- font-size: theme("digitv2.fontSize.body-s.desktop");
51
- font-family: theme("digitv2.fontFamily.sans");
52
- font-style: theme("digitv2.fontStyle.normal");
53
- font-weight: theme("digitv2.fontWeight.regular");
54
- line-height: theme("digitv2.lineHeight.lineheight2");
55
- }
56
- @apply absolute top-0 left-0 p-sm min-h-full min-w-full opacity-0;
57
- letter-spacing: theme("digitv2.spacers.spacer0");
58
- padding-left: 1%;
59
- &:focus {
60
- @apply outline-none;
61
- }
81
+ opacity: 1;
82
+ width: calc(100% - 24px);
62
83
  }
84
+
63
85
  .digit-multiselectdropdown-label {
64
- @apply flex justify-between p-sm w-full h-full;
65
86
  svg {
66
- @apply h-6 w-6;
87
+ z-index: 1;
88
+ cursor: pointer;
67
89
  }
68
90
  }
69
91
  }
92
+ }
70
93
 
71
- .digit-multiselectdropdown-master-active{
72
- &.searchable{
73
- input[type="text"]{
74
- opacity: 1;
75
- width: calc(100% - 24px);
76
- }
94
+ .digit-multiselectdropdown-master {
95
+ &.disabled {
96
+ pointer-events: none !important;
97
+ border: 0.063rem solid theme("digitv2.lightTheme.generic-divider") !important;
98
+ color: theme("digitv2.lightTheme.generic-divider") !important;
99
+ }
100
+ }
77
101
 
78
- .digit-multiselectdropdown-label {
79
- svg {
80
- z-index: 1;
81
- cursor: pointer;
82
- }
102
+ .digit-multiselectdropdown-master-active {
103
+ border: 0.063rem solid theme("digitv2.lightTheme.primary-1");
104
+ }
105
+
106
+ .digit-multiselectdropdown-server {
107
+ top: theme("digitv2.spacers.spacer10");
108
+ @apply absolute z-20 bg-white overflow-x-hidden overflow-y-auto;
109
+ max-height: 20vmax;
110
+ box-shadow: theme("digitv2.spacers.spacer0") 0.063rem 0.275rem theme("digitv2.spacers.spacer0") #00000026;
111
+ width: 100% !important;
112
+ }
113
+
114
+ .digit-multiselectdropdown-server::-webkit-scrollbar {
115
+ width: theme("digitv2.spacers.spacer2");
116
+ background-color: theme("digitv2.lightTheme.generic-background");
117
+ }
118
+
119
+ .digit-multiselectdropdown-server::-webkit-scrollbar-track {
120
+ background-color: theme("digitv2.lightTheme.generic-background");
121
+ border-radius: 0.563rem;
122
+ }
123
+
124
+ .digit-multiselectdropdown-server::-webkit-scrollbar-thumb {
125
+ background-color: theme("digitv2.lightTheme.generic-divider");
126
+ border-radius: 0.563rem;
127
+ }
128
+
129
+ .digit-nested-category {
130
+ @apply flex items-center flex-shrink-0;
131
+ background: theme("digitv2.lightTheme.generic-background");
132
+ height: 2.4375rem;
133
+ padding: theme("digitv2.spacers.spacer4") 0.625rem;
134
+ gap: 0.625rem;
135
+ margin-top: theme("digitv2.spacers.spacer4");
136
+
137
+ &.selectAll {
138
+ justify-content: space-between;
139
+ }
140
+ }
141
+
142
+ .digit-nested-category:nth-child(-n+2) {
143
+ margin-top: theme("digitv2.spacers.spacer0");
144
+ }
145
+
146
+ .digit-category-name {
147
+ @include typography-heading-s;
148
+ font-family: theme("digitv2.fontFamily.sans");
149
+ font-style: theme("digitv2.fontStyle.normal");
150
+ font-weight: theme("digitv2.fontWeight.bold");
151
+ line-height: theme("digitv2.lineHeight.lineheight1");
152
+
153
+ @media (max-aspect-ratio: 9/16) {
154
+ /* Media query for mobile */
155
+ font-size: theme("digitv2.fontSize.heading-s.mobile");
156
+ }
157
+
158
+ @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
159
+ /* Media query for tablets */
160
+ font-size: theme("digitv2.fontSize.heading-s.tablet");
161
+ }
162
+
163
+ @media (min-aspect-ratio: 3/4) {
164
+ /* Media query for desktop */
165
+ font-size: theme("digitv2.fontSize.heading-s.desktop");
166
+ }
167
+
168
+ color: theme("digitv2.lightTheme.text-primary");
169
+ }
170
+
171
+ .digit-category-selectAll {
172
+ @apply flex relative;
173
+ gap: 0.625rem;
174
+ cursor: pointer !important;
175
+ align-items: center;
176
+
177
+ .category-selectAll-label {
178
+ @include typography-body-s;
179
+ font-family: theme("digitv2.fontFamily.sans");
180
+ font-style: theme("digitv2.fontStyle.normal");
181
+ font-weight: theme("digitv2.fontWeight.regular");
182
+ line-height: theme("digitv2.lineHeight.lineheight2");
183
+
184
+ @media (max-aspect-ratio: 9/16) {
185
+ /* Media query for mobile */
186
+ font-size: theme("digitv2.fontSize.body-s.mobile");
187
+ }
188
+
189
+ @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
190
+ /* Media query for tablets */
191
+ font-size: theme("digitv2.fontSize.body-s.tablet");
192
+ }
193
+
194
+ @media (min-aspect-ratio: 3/4) {
195
+ /* Media query for desktop */
196
+ font-size: theme("digitv2.fontSize.body-s.desktop");
197
+ }
198
+
199
+ text-align: left;
200
+ color: theme("digitv2.lightTheme.primary-1");
201
+ }
202
+
203
+ input {
204
+ @apply absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer;
205
+ margin: theme("digitv2.spacers.spacer0");
206
+ }
207
+
208
+ .digit-multiselectdropodwn-custom-checkbox-selectAll {
209
+ height: theme("digitv2.spacers.spacer5");
210
+ width: theme("digitv2.spacers.spacer5");
211
+ border: 0.063rem solid theme("digitv2.lightTheme.text-secondary");
212
+
213
+ svg {
214
+ @apply opacity-0 z-10;
215
+ }
216
+ }
217
+
218
+ input:active~.digit-multiselectdropodwn-custom-checkbox-selectAll,
219
+ input:checked~.digit-multiselectdropodwn-custom-checkbox-selectAll {
220
+ border: 0.125rem solid theme("digitv2.lightTheme.primary-1");
221
+ background-color: theme("digitv2.lightTheme.paper-secondary");
222
+ }
223
+
224
+ input:active~.digit-multiselectdropodwn-custom-checkbox-selectAll svg,
225
+ input:checked~.digit-multiselectdropodwn-custom-checkbox-selectAll svg {
226
+ @apply opacity-100;
227
+ width: theme("digitv2.spacers.spacer4");
228
+ height: theme("digitv2.spacers.spacer4");
229
+ }
230
+ }
231
+
232
+ .digit-multiselectdropodwn-menuitem {
233
+ @apply flex w-full bg-white justify-start items-center;
234
+
235
+ &.frozen {
236
+ pointer-events: none;
237
+ opacity: 0.6;
238
+ }
239
+
240
+ min-height: 2.438rem;
241
+
242
+ .option-des-container {
243
+ @apply w-full max-w-full overflow-hidden box-border;
244
+ margin: 0.594rem theme("digitv2.spacers.spacer0") 0.594rem theme("digitv2.spacers.spacer0");
245
+
246
+ .multiselectdropdown-icon-option {
247
+ @apply w-full items-center;
248
+ display: flex !important;
249
+ gap: theme("digitv2.spacers.spacer1");
250
+
251
+ svg {
252
+ flex-shrink: 0;
83
253
  }
84
254
  }
85
255
  }
86
256
 
87
- .digit-multiselectdropdown-master {
88
- &.disabled {
89
- pointer-events: none !important;
90
- border: 0.063rem solid theme("digitv2.lightTheme.generic-divider") !important;
91
- color: theme("digitv2.lightTheme.generic-divider") !important;
257
+ &.nestedmultiselect:not(.unsuccessfulresults) {
258
+ position: relative;
259
+
260
+ &:not(.selectAll)::before {
261
+ content: "";
262
+ position: absolute;
263
+ bottom: 0;
264
+ left: 0.625rem;
265
+ right: 0.625rem;
266
+ border-bottom: 0.063rem solid theme("digitv2.lightTheme.generic-divider");
267
+ }
268
+
269
+ &:not(.selectAll):hover,
270
+ &:not(.selectAll):active {
271
+ &::before {
272
+ border-bottom: none;
273
+ }
92
274
  }
93
275
  }
94
- .digit-multiselectdropdown-master-active {
95
- border: 0.063rem solid theme("digitv2.lightTheme.primary-1");
96
- }
97
- .digit-multiselectdropdown-server {
98
- top: theme("digitv2.spacers.spacer10");
99
- @apply absolute z-20 bg-white overflow-x-hidden overflow-y-auto;
100
- max-height: 20vmax;
101
- box-shadow: theme("digitv2.spacers.spacer0") 0.063rem 0.275rem theme("digitv2.spacers.spacer0") #00000026;
102
- width: 100% !important;
103
- }
104
- .digit-multiselectdropdown-server::-webkit-scrollbar {
105
- width: theme("digitv2.spacers.spacer2");
106
- background-color: theme("digitv2.lightTheme.generic-background");
107
- }
108
- .digit-multiselectdropdown-server::-webkit-scrollbar-track {
109
- background-color: theme("digitv2.lightTheme.generic-background");
110
- border-radius: 0.563rem;
111
- }
112
- .digit-multiselectdropdown-server::-webkit-scrollbar-thumb {
113
- background-color: theme("digitv2.lightTheme.generic-divider");
114
- border-radius: 0.563rem;
115
- }
116
- .digit-nested-category {
117
- @apply flex items-center flex-shrink-0;
118
- background: theme("digitv2.lightTheme.generic-background");
119
- height: 2.4375rem;
120
- padding: theme("digitv2.spacers.spacer4") 0.625rem;
121
- gap: 0.625rem;
122
- margin-top: theme("digitv2.spacers.spacer4");
123
- &.selectAll {
124
- justify-content: space-between;
276
+
277
+ &:not(.nestedmultiselect, .keyChange, .checked):not(:active):not(:hover):nth-of-type(even) {
278
+ background: theme("digitv2.lightTheme.paper-secondary");
279
+ }
280
+
281
+ &:hover,
282
+ &.keyChange {
283
+ background: theme("digitv2.lightTheme.primary-bg");
284
+ border: 0.031rem solid theme("digitv2.lightTheme.primary-1");
285
+ }
286
+
287
+ &:active,
288
+ &:active:hover {
289
+ background: theme("digitv2.lightTheme.primary-1");
290
+ border: 0.031rem solid theme("digitv2.lightTheme.primary-1");
291
+
292
+ p {
293
+ @include typography-heading-s;
294
+ font-family: theme("digitv2.fontFamily.sans");
295
+ font-style: theme("digitv2.fontStyle.normal");
296
+ font-weight: theme("digitv2.fontWeight.bold");
297
+ line-height: theme("digitv2.lineHeight.lineheight1");
298
+
299
+ @media (max-aspect-ratio: 9/16) {
300
+ /* Media query for mobile */
301
+ font-size: theme("digitv2.fontSize.heading-s.mobile");
302
+ }
303
+
304
+ @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
305
+ /* Media query for tablets */
306
+ font-size: theme("digitv2.fontSize.heading-s.tablet");
307
+ }
308
+
309
+ @media (min-aspect-ratio: 3/4) {
310
+ /* Media query for desktop */
311
+ font-size: theme("digitv2.fontSize.heading-s.desktop");
312
+ }
313
+
314
+ color: theme("digitv2.lightTheme.paper-primary");
315
+ }
316
+
317
+ .digit-label {
318
+ &.selectAll {
319
+ @include typography-body-l;
320
+ color: theme("digitv2.lightTheme.primary-1");
321
+ }
125
322
  }
126
323
  }
127
- .digit-nested-category:nth-child(-n+2) {
128
- margin-top: theme("digitv2.spacers.spacer0");
324
+
325
+ input {
326
+ min-height: 2.438rem;
327
+ @apply absolute min-w-full opacity-0 z-20 cursor-pointer;
129
328
  }
130
- .digit-category-name {
131
- @include typography-heading-s;
329
+
330
+ p {
331
+ @include typography-body-s;
332
+ @apply w-full overflow-hidden whitespace-nowrap max-w-full;
132
333
  font-family: theme("digitv2.fontFamily.sans");
133
334
  font-style: theme("digitv2.fontStyle.normal");
134
- font-weight: theme("digitv2.fontWeight.bold");
135
- line-height: theme("digitv2.lineHeight.lineheight1");
335
+ font-weight: theme("digitv2.fontWeight.regular");
336
+ line-height: theme("digitv2.lineHeight.lineheight2");
136
337
 
137
338
  @media (max-aspect-ratio: 9/16) {
138
339
  /* Media query for mobile */
139
- font-size: theme("digitv2.fontSize.heading-s.mobile");
340
+ font-size: theme("digitv2.fontSize.body-s.mobile");
140
341
  }
141
342
 
142
343
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
143
344
  /* Media query for tablets */
144
- font-size: theme("digitv2.fontSize.heading-s.tablet");
345
+ font-size: theme("digitv2.fontSize.body-s.tablet");
145
346
  }
146
347
 
147
348
  @media (min-aspect-ratio: 3/4) {
148
349
  /* Media query for desktop */
149
- font-size: theme("digitv2.fontSize.heading-s.desktop");
350
+ font-size: theme("digitv2.fontSize.body-s.desktop");
150
351
  }
352
+
151
353
  color: theme("digitv2.lightTheme.text-primary");
354
+ margin: theme("digitv2.spacers.spacer0");
355
+ text-overflow: ellipsis;
152
356
  }
153
- .digit-category-selectAll {
154
- @apply flex relative;
155
- gap: 0.625rem;
156
- cursor: pointer !important;
157
- align-items: center;
158
- .category-selectAll-label {
159
- @include typography-body-s;
357
+
358
+ &.checked {
359
+ background: theme("digitv2.lightTheme.primary-1");
360
+
361
+ p {
362
+ @include typography-heading-s;
160
363
  font-family: theme("digitv2.fontFamily.sans");
161
364
  font-style: theme("digitv2.fontStyle.normal");
162
- font-weight: theme("digitv2.fontWeight.regular");
163
- line-height: theme("digitv2.lineHeight.lineheight2");
164
-
365
+ font-weight: theme("digitv2.fontWeight.bold");
366
+ line-height: theme("digitv2.lineHeight.lineheight1");
367
+
165
368
  @media (max-aspect-ratio: 9/16) {
166
369
  /* Media query for mobile */
167
- font-size: theme("digitv2.fontSize.body-s.mobile");
370
+ font-size: theme("digitv2.fontSize.heading-s.mobile");
168
371
  }
169
-
372
+
170
373
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
171
374
  /* Media query for tablets */
172
- font-size: theme("digitv2.fontSize.body-s.tablet");
375
+ font-size: theme("digitv2.fontSize.heading-s.tablet");
173
376
  }
174
-
377
+
175
378
  @media (min-aspect-ratio: 3/4) {
176
379
  /* Media query for desktop */
177
- font-size: theme("digitv2.fontSize.body-s.desktop");
380
+ font-size: theme("digitv2.fontSize.heading-s.desktop");
178
381
  }
179
- text-align: left;
180
- color: theme("digitv2.lightTheme.primary-1");
181
- }
182
- input {
183
- @apply absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer;
184
- margin: theme("digitv2.spacers.spacer0");
382
+
383
+ color: theme("digitv2.lightTheme.paper-primary");
185
384
  }
186
- .digit-multiselectdropodwn-custom-checkbox-selectAll {
187
- height: theme("digitv2.spacers.spacer5");
188
- width: theme("digitv2.spacers.spacer5");
189
- border: 0.063rem solid theme("digitv2.lightTheme.text-secondary");
190
- svg {
191
- @apply opacity-0 z-10;
385
+
386
+ .digit-label {
387
+ &.selectAll {
388
+ @include typography-body-l;
389
+ color: theme("digitv2.lightTheme.primary-1");
192
390
  }
193
391
  }
194
- input:active~.digit-multiselectdropodwn-custom-checkbox-selectAll,
195
- input:checked~.digit-multiselectdropodwn-custom-checkbox-selectAll {
196
- border: 0.125rem solid theme("digitv2.lightTheme.primary-1");
197
- background-color: theme("digitv2.lightTheme.paper-secondary");
198
- }
199
- input:active~.digit-multiselectdropodwn-custom-checkbox-selectAll svg,
200
- input:checked~.digit-multiselectdropodwn-custom-checkbox-selectAll svg {
201
- @apply opacity-100;
202
- width: theme("digitv2.spacers.spacer4");
203
- height: theme("digitv2.spacers.spacer4");
392
+ }
393
+
394
+ .digit-multiselectdropodwn-custom-checkbox,
395
+ .digit-multiselectdropodwn-custom-checkbox-selectAll {
396
+ height: theme("digitv2.spacers.spacer5");
397
+ width: theme("digitv2.spacers.spacer5");
398
+ border: 0.063rem solid theme("digitv2.lightTheme.text-secondary");
399
+ margin: 0.594rem 0.75rem 0.594rem 0.625rem;
400
+
401
+ svg {
402
+ @apply opacity-0 z-10;
204
403
  }
205
404
  }
206
- .digit-multiselectdropodwn-menuitem {
207
- @apply flex w-full bg-white justify-start items-center;
208
405
 
209
- &.frozen{
210
- pointer-events: none;
211
- opacity: 0.6;
406
+ input:active~.digit-multiselectdropodwn-custom-checkbox,
407
+ input:checked~.digit-multiselectdropodwn-custom-checkbox {
408
+ border: 0.125rem solid theme("digitv2.lightTheme.paper-primary");
409
+ background-color: theme("digitv2.lightTheme.primary-1");
410
+ }
411
+
412
+ input:active~.digit-multiselectdropodwn-custom-checkbox-selectAll,
413
+ input:checked~.digit-multiselectdropodwn-custom-checkbox-selectAll {
414
+ border: 0.125rem solid theme("digitv2.lightTheme.primary-1");
415
+ background-color: theme("digitv2.lightTheme.paper-secondary");
416
+ }
417
+
418
+ input:active~.digit-multiselectdropodwn-custom-checkbox svg,
419
+ input:checked~.digit-multiselectdropodwn-custom-checkbox svg,
420
+ input:active~.digit-multiselectdropodwn-custom-checkbox-selectAll svg,
421
+ input:checked~.digit-multiselectdropodwn-custom-checkbox-selectAll svg {
422
+ @apply opacity-100;
423
+ width: theme("digitv2.spacers.spacer4");
424
+ height: theme("digitv2.spacers.spacer4");
425
+ }
426
+
427
+ &.nestedtextmultiselect {
428
+ padding: theme("digitv2.spacers.spacer2") theme("digitv2.spacers.spacer4");
429
+ gap: theme("digitv2.spacers.spacer3");
430
+ align-items: flex-start !important;
431
+
432
+ &:not(.selectAll) {
433
+ min-height: 4.75rem;
434
+
435
+ .input {
436
+ min-height: 3.75rem;
437
+ }
212
438
  }
213
- min-height: 2.438rem;
439
+
214
440
  .option-des-container {
215
- @apply w-full max-w-full overflow-hidden box-border;
216
- margin: 0.594rem theme("digitv2.spacers.spacer0") 0.594rem theme("digitv2.spacers.spacer0");
217
- .multiselectdropdown-icon-option {
218
- @apply w-full items-center;
219
- display: flex !important;
220
- gap: theme("digitv2.spacers.spacer1");
221
- svg {
222
- flex-shrink: 0;
223
- }
441
+ @apply flex flex-col justify-center items-start;
442
+ width: 100% !important;
443
+ margin: theme("digitv2.spacers.spacer0");
444
+
445
+ p {
446
+ @include typography-body-l;
447
+ color: theme("digitv2.lightTheme.text-secondary");
448
+ padding: theme("digitv2.spacers.spacer0");
449
+ margin-bottom: theme("digitv2.spacers.spacer0");
450
+ margin-top: theme("digitv2.spacers.spacer0");
224
451
  }
225
- }
226
- &.nestedmultiselect:not(.unsuccessfulresults){
227
- position: relative;
228
- &:not(.selectAll)::before {
229
- content: "";
230
- position: absolute;
231
- bottom: 0;
232
- left: 0.625rem;
233
- right: 0.625rem;
234
- border-bottom: 0.063rem solid theme("digitv2.lightTheme.generic-divider");
452
+
453
+ .option-description {
454
+ color: theme("digitv2.lightTheme.text-secondary");
455
+ font-family: theme("digitv2.fontFamily.sans");
456
+ font-size: theme("digitv2.spacers.spacer3");
457
+ font-style: theme("digitv2.fontStyle.normal");
458
+ font-weight: theme("digitv2.fontWeight.regular");
459
+ line-height: 1.125rem;
235
460
  }
236
- &:not(.selectAll):hover,
237
- &:not(.selectAll):active {
238
- &::before {
239
- border-bottom: none;
240
- }
461
+
462
+ .svg {
463
+ flex-shrink: 0;
241
464
  }
242
465
  }
243
- &:not(.nestedmultiselect, .keyChange, .checked):not(:active):not(:hover):nth-of-type(even) {
244
- background: theme("digitv2.lightTheme.paper-secondary");
245
- }
246
- &:hover,
247
- &.keyChange {
248
- background: theme("digitv2.lightTheme.primary-bg");
249
- border: 0.031rem solid theme("digitv2.lightTheme.primary-1");
466
+
467
+ .digit-multiselectdropodwn-custom-checkbox {
468
+ margin: theme("digitv2.spacers.spacer0");
469
+ margin-top: 0.125rem;
250
470
  }
471
+
251
472
  &:active,
252
- &:active:hover {
253
- background: theme("digitv2.lightTheme.primary-1");
254
- border: 0.031rem solid theme("digitv2.lightTheme.primary-1");
473
+ &.checked {
474
+
475
+ .option-description,
255
476
  p {
256
- @include typography-heading-s;
257
- font-family: theme("digitv2.fontFamily.sans");
258
- font-style: theme("digitv2.fontStyle.normal");
259
- font-weight: theme("digitv2.fontWeight.bold");
260
- line-height: theme("digitv2.lineHeight.lineheight1");
261
-
262
- @media (max-aspect-ratio: 9/16) {
263
- /* Media query for mobile */
264
- font-size: theme("digitv2.fontSize.heading-s.mobile");
265
- }
266
-
267
- @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
268
- /* Media query for tablets */
269
- font-size: theme("digitv2.fontSize.heading-s.tablet");
270
- }
271
-
272
- @media (min-aspect-ratio: 3/4) {
273
- /* Media query for desktop */
274
- font-size: theme("digitv2.fontSize.heading-s.desktop");
275
- }
276
477
  color: theme("digitv2.lightTheme.paper-primary");
277
478
  }
278
- .digit-label {
279
- &.selectAll {
280
- @include typography-body-l;
281
- color: theme("digitv2.lightTheme.primary-1");
479
+
480
+ .option-des-container {
481
+ p {
482
+ @include typography-heading-s;
483
+ font-family: theme("digitv2.fontFamily.sans");
484
+ font-style: theme("digitv2.fontStyle.normal");
485
+ font-weight: theme("digitv2.fontWeight.bold");
486
+ line-height: theme("digitv2.lineHeight.lineheight1");
487
+
488
+ @media (max-aspect-ratio: 9/16) {
489
+ /* Media query for mobile */
490
+ font-size: theme("digitv2.fontSize.heading-s.mobile");
491
+ }
492
+
493
+ @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
494
+ /* Media query for tablets */
495
+ font-size: theme("digitv2.fontSize.heading-s.tablet");
496
+ }
497
+
498
+ @media (min-aspect-ratio: 3/4) {
499
+ /* Media query for desktop */
500
+ font-size: theme("digitv2.fontSize.heading-s.desktop");
501
+ }
282
502
  }
283
503
  }
504
+
505
+ .digit-multiselectdropodwn-custom-checkbox {
506
+ margin-top: theme("digitv2.spacers.spacer0");
507
+ }
508
+ }
509
+
510
+ &:active {
511
+ background: theme("digitv2.lightTheme.primary-1");
284
512
  }
285
- input {
286
- min-height: 2.438rem;
287
- @apply absolute min-w-full opacity-0 z-20 cursor-pointer;
513
+
514
+ .digit-multiselectdropodwn-custom-checkbox-selectAll {
515
+ margin: theme("digitv2.spacers.spacer0");
516
+ margin-top: 0.125rem;
288
517
  }
289
- p {
518
+ }
519
+
520
+ &.selectAll {
521
+ background-color: theme("digitv2.lightTheme.paper-secondary") !important;
522
+ border: 0.063rem solid theme("digitv2.lightTheme.generic-divider") !important;
523
+ }
524
+
525
+ .digit-label {
526
+ &.selectAll {
527
+ @include typography-body-l;
528
+ color: theme("digitv2.lightTheme.primary-1");
529
+ }
530
+ }
531
+
532
+ &.unsuccessfulresults {
533
+ background-color: theme("digitv2.lightTheme.paper-secondary");
534
+ pointer-events: none;
535
+
536
+ span {
290
537
  @include typography-body-s;
291
- @apply w-full overflow-hidden whitespace-nowrap max-w-full;
292
538
  font-family: theme("digitv2.fontFamily.sans");
293
539
  font-style: theme("digitv2.fontStyle.normal");
294
540
  font-weight: theme("digitv2.fontWeight.regular");
295
541
  line-height: theme("digitv2.lineHeight.lineheight2");
296
-
542
+ padding-left: theme("digitv2.spacers.spacer3");
543
+
297
544
  @media (max-aspect-ratio: 9/16) {
298
545
  /* Media query for mobile */
299
546
  font-size: theme("digitv2.fontSize.body-s.mobile");
300
547
  }
301
-
548
+
302
549
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
303
550
  /* Media query for tablets */
304
551
  font-size: theme("digitv2.fontSize.body-s.tablet");
305
552
  }
306
-
553
+
307
554
  @media (min-aspect-ratio: 3/4) {
308
555
  /* Media query for desktop */
309
556
  font-size: theme("digitv2.fontSize.body-s.desktop");
310
557
  }
311
- color: theme("digitv2.lightTheme.text-primary");
312
- margin: theme("digitv2.spacers.spacer0");
313
- text-overflow: ellipsis;
558
+
559
+ color: theme("digitv2.lightTheme.text-disabled");
314
560
  }
315
- &.checked {
316
- background: theme("digitv2.lightTheme.primary-1");
317
- p {
318
- @include typography-heading-s;
561
+ }
562
+ }
563
+
564
+ .digit-cursorPointer {
565
+ @apply cursor-pointer;
566
+ }
567
+
568
+ .digit-multiselectdropdown-master,
569
+ .digit-multiselectdropdown-master-active {
570
+ .digit-multiselectdropdown-label {
571
+ p {
572
+ @include typography-body-s;
573
+
574
+ @media (max-aspect-ratio: 9/16) {
575
+ /* Media query for mobile */
576
+ font-size: theme("digitv2.fontSize.body-s.mobile");
319
577
  font-family: theme("digitv2.fontFamily.sans");
320
578
  font-style: theme("digitv2.fontStyle.normal");
321
- font-weight: theme("digitv2.fontWeight.bold");
322
- line-height: theme("digitv2.lineHeight.lineheight1");
323
-
324
- @media (max-aspect-ratio: 9/16) {
325
- /* Media query for mobile */
326
- font-size: theme("digitv2.fontSize.heading-s.mobile");
327
- }
328
-
329
- @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
330
- /* Media query for tablets */
331
- font-size: theme("digitv2.fontSize.heading-s.tablet");
332
- }
333
-
334
- @media (min-aspect-ratio: 3/4) {
335
- /* Media query for desktop */
336
- font-size: theme("digitv2.fontSize.heading-s.desktop");
337
- }
338
- color: theme("digitv2.lightTheme.paper-primary");
339
- }
340
- .digit-label {
341
- &.selectAll {
342
- @include typography-body-l;
343
- color: theme("digitv2.lightTheme.primary-1");
344
- }
345
- }
346
- }
347
- .digit-multiselectdropodwn-custom-checkbox,
348
- .digit-multiselectdropodwn-custom-checkbox-selectAll {
349
- height: theme("digitv2.spacers.spacer5");
350
- width: theme("digitv2.spacers.spacer5");
351
- border: 0.063rem solid theme("digitv2.lightTheme.text-secondary");
352
- margin: 0.594rem 0.75rem 0.594rem 0.625rem;
353
- svg {
354
- @apply opacity-0 z-10;
355
- }
356
- }
357
- input:active~.digit-multiselectdropodwn-custom-checkbox,
358
- input:checked~.digit-multiselectdropodwn-custom-checkbox {
359
- border: 0.125rem solid theme("digitv2.lightTheme.paper-primary");
360
- background-color: theme("digitv2.lightTheme.primary-1");
361
- }
362
- input:active~.digit-multiselectdropodwn-custom-checkbox-selectAll,
363
- input:checked~.digit-multiselectdropodwn-custom-checkbox-selectAll {
364
- border: 0.125rem solid theme("digitv2.lightTheme.primary-1");
365
- background-color: theme("digitv2.lightTheme.paper-secondary");
366
- }
367
- input:active~.digit-multiselectdropodwn-custom-checkbox svg,
368
- input:checked~.digit-multiselectdropodwn-custom-checkbox svg,
369
- input:active~.digit-multiselectdropodwn-custom-checkbox-selectAll svg,
370
- input:checked~.digit-multiselectdropodwn-custom-checkbox-selectAll svg {
371
- @apply opacity-100;
372
- width: theme("digitv2.spacers.spacer4");
373
- height: theme("digitv2.spacers.spacer4");
374
- }
375
- &.nestedtextmultiselect {
376
- padding: theme("digitv2.spacers.spacer2") theme("digitv2.spacers.spacer4");
377
- gap: theme("digitv2.spacers.spacer3");
378
- align-items: flex-start !important;
379
- &:not(.selectAll) {
380
- min-height: 4.75rem;
381
- .input {
382
- min-height: 3.75rem;
383
- }
384
- }
385
- .option-des-container {
386
- @apply flex flex-col justify-center items-start;
387
- width: 100% !important;
388
- margin: theme("digitv2.spacers.spacer0");
389
- p {
390
- @include typography-body-l;
391
- color: theme("digitv2.lightTheme.text-secondary");
392
- padding: theme("digitv2.spacers.spacer0");
393
- margin-bottom: theme("digitv2.spacers.spacer0");
394
- margin-top: theme("digitv2.spacers.spacer0");
395
- }
396
- .option-description {
397
- color: theme("digitv2.lightTheme.text-secondary");
398
- font-family: theme("digitv2.fontFamily.sans");
399
- font-size: theme("digitv2.spacers.spacer3");
400
- font-style: theme("digitv2.fontStyle.normal");
401
- font-weight: theme("digitv2.fontWeight.regular");
402
- line-height: 1.125rem;
403
- }
404
- .svg {
405
- flex-shrink: 0;
406
- }
407
- }
408
- .digit-multiselectdropodwn-custom-checkbox {
409
- margin: theme("digitv2.spacers.spacer0");
410
- margin-top: 0.125rem;
411
- }
412
- &:active,
413
- &.checked {
414
- .option-description,
415
- p {
416
- color: theme("digitv2.lightTheme.paper-primary");
417
- }
418
- .option-des-container {
419
- p {
420
- @include typography-heading-s;
421
- font-family: theme("digitv2.fontFamily.sans");
422
- font-style: theme("digitv2.fontStyle.normal");
423
- font-weight: theme("digitv2.fontWeight.bold");
424
- line-height: theme("digitv2.lineHeight.lineheight1");
425
-
426
- @media (max-aspect-ratio: 9/16) {
427
- /* Media query for mobile */
428
- font-size: theme("digitv2.fontSize.heading-s.mobile");
429
- }
430
-
431
- @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
432
- /* Media query for tablets */
433
- font-size: theme("digitv2.fontSize.heading-s.tablet");
434
- }
435
-
436
- @media (min-aspect-ratio: 3/4) {
437
- /* Media query for desktop */
438
- font-size: theme("digitv2.fontSize.heading-s.desktop");
439
- }
440
- }
441
- }
442
- .digit-multiselectdropodwn-custom-checkbox {
443
- margin-top: theme("digitv2.spacers.spacer0");
444
- }
445
- }
446
- &:active {
447
- background: theme("digitv2.lightTheme.primary-1");
448
- }
449
- .digit-multiselectdropodwn-custom-checkbox-selectAll {
450
- margin: theme("digitv2.spacers.spacer0");
451
- margin-top: 0.125rem;
452
- }
453
- }
454
- &.selectAll {
455
- background-color: theme("digitv2.lightTheme.paper-secondary") !important;
456
- border: 0.063rem solid theme("digitv2.lightTheme.generic-divider") !important;
457
- }
458
- .digit-label {
459
- &.selectAll {
460
- @include typography-body-l;
461
- color: theme("digitv2.lightTheme.primary-1");
579
+ font-weight: theme("digitv2.fontWeight.regular");
580
+ line-height: theme("digitv2.lineHeight.lineheight2");
462
581
  }
463
- }
464
- &.unsuccessfulresults {
465
- background-color: theme("digitv2.lightTheme.paper-secondary");
466
- pointer-events: none;
467
- span {
468
- @include typography-body-s;
582
+
583
+ @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
584
+ /* Media query for tablets */
585
+ font-size: theme("digitv2.fontSize.body-s.tablet");
469
586
  font-family: theme("digitv2.fontFamily.sans");
470
587
  font-style: theme("digitv2.fontStyle.normal");
471
588
  font-weight: theme("digitv2.fontWeight.regular");
472
589
  line-height: theme("digitv2.lineHeight.lineheight2");
473
- padding-left: theme("digitv2.spacers.spacer3");
474
-
475
- @media (max-aspect-ratio: 9/16) {
476
- /* Media query for mobile */
477
- font-size: theme("digitv2.fontSize.body-s.mobile");
478
- }
479
-
480
- @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
481
- /* Media query for tablets */
482
- font-size: theme("digitv2.fontSize.body-s.tablet");
483
- }
484
-
485
- @media (min-aspect-ratio: 3/4) {
486
- /* Media query for desktop */
487
- font-size: theme("digitv2.fontSize.body-s.desktop");
488
- }
489
- color: theme("digitv2.lightTheme.text-disabled");
490
590
  }
491
- }
492
- }
493
- .digit-cursorPointer {
494
- @apply cursor-pointer;
495
- }
496
- .digit-multiselectdropdown-master,
497
- .digit-multiselectdropdown-master-active {
498
- .digit-multiselectdropdown-label {
499
- p {
500
- @include typography-body-s;
501
- @media (max-aspect-ratio: 9/16) {
502
- /* Media query for mobile */
503
- font-size: theme("digitv2.fontSize.body-s.mobile");
504
- font-family: theme("digitv2.fontFamily.sans");
505
- font-style: theme("digitv2.fontStyle.normal");
506
- font-weight: theme("digitv2.fontWeight.regular");
507
- line-height: theme("digitv2.lineHeight.lineheight2");
508
- }
509
-
510
- @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
511
- /* Media query for tablets */
512
- font-size: theme("digitv2.fontSize.body-s.tablet");
513
- font-family: theme("digitv2.fontFamily.sans");
514
- font-style: theme("digitv2.fontStyle.normal");
515
- font-weight: theme("digitv2.fontWeight.regular");
516
- line-height: theme("digitv2.lineHeight.lineheight2");
517
- }
518
-
519
- @media (min-aspect-ratio: 3/4) {
520
- /* Media query for desktop */
521
- font-size: theme("digitv2.fontSize.body-s.desktop");
522
- font-family: theme("digitv2.fontFamily.sans");
523
- font-style: theme("digitv2.fontStyle.normal");
524
- font-weight: theme("digitv2.fontWeight.regular");
525
- line-height: theme("digitv2.lineHeight.lineheight2");
526
- }
527
- white-space: pre;
528
- margin: auto;
529
- margin-left: theme("digitv2.spacers.spacer0");
530
- text-align: left;
591
+
592
+ @media (min-aspect-ratio: 3/4) {
593
+ /* Media query for desktop */
594
+ font-size: theme("digitv2.fontSize.body-s.desktop");
595
+ font-family: theme("digitv2.fontFamily.sans");
596
+ font-style: theme("digitv2.fontStyle.normal");
597
+ font-weight: theme("digitv2.fontWeight.regular");
598
+ line-height: theme("digitv2.lineHeight.lineheight2");
531
599
  }
600
+
601
+ white-space: pre;
602
+ margin: auto;
603
+ margin-left: theme("digitv2.spacers.spacer0");
604
+ text-align: left;
532
605
  }
533
606
  }
607
+ }
608
+
609
+ .digit-multiselectdropdown-server {
610
+ top: 2.5rem;
611
+ position: absolute;
612
+ z-index: 20;
613
+ background-color: #ffffff;
614
+ overflow-x: hidden;
615
+ overflow-y: auto;
616
+ max-height: 20vmax;
617
+ box-shadow: 0rem 0.063rem 0.275rem 0rem #00000026;
534
618
  }