@egovernments/digit-ui-components-css 0.2.1 → 2.0.0-dev-01

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