@egovernments/digit-ui-components-css 2.0.0-dev-10 → 2.0.0-dev-12

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