@egovernments/digit-ui-components-css 0.0.2-beta.11 → 0.0.2-beta.13

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 (51) hide show
  1. package/CHANGELOG.md +92 -88
  2. package/README.md +80 -80
  3. package/dist/index.css +810 -16
  4. package/dist/index.min.css +2 -2
  5. package/package.json +69 -69
  6. package/src/digitv2/components/FormComposerV2.scss +118 -118
  7. package/src/digitv2/components/actionbarV2.scss +206 -206
  8. package/src/digitv2/components/backLinkV2.scss +36 -36
  9. package/src/digitv2/components/bodyContainerV2.scss +39 -39
  10. package/src/digitv2/components/breadcrumbV2.scss +56 -56
  11. package/src/digitv2/components/buttonsV2.scss +450 -451
  12. package/src/digitv2/components/cardV2.scss +497 -497
  13. package/src/digitv2/components/cardbasedoptionsV2.scss +46 -46
  14. package/src/digitv2/components/cardlabelV2.scss +7 -7
  15. package/src/digitv2/components/checkboxV2.scss +83 -83
  16. package/src/digitv2/components/chipV2.scss +129 -129
  17. package/src/digitv2/components/dividerV2.scss +10 -10
  18. package/src/digitv2/components/errorMessageV2.scss +20 -20
  19. package/src/digitv2/components/fieldV1.scss +96 -96
  20. package/src/digitv2/components/headerdropdownV2.scss +151 -151
  21. package/src/digitv2/components/infoCardV2.scss +139 -139
  22. package/src/digitv2/components/infobuttonV2.scss +75 -75
  23. package/src/digitv2/components/labelFieldPairV2.scss +66 -66
  24. package/src/digitv2/components/mobileNumberV2.scss +65 -65
  25. package/src/digitv2/components/mobilesidebarV2.scss +439 -0
  26. package/src/digitv2/components/multiSelectDropdownV2.scss +315 -315
  27. package/src/digitv2/components/panelCardV2.scss +160 -160
  28. package/src/digitv2/components/panelV2.scss +114 -114
  29. package/src/digitv2/components/popUpV2.scss +330 -330
  30. package/src/digitv2/components/radiobtnV2.scss +115 -115
  31. package/src/digitv2/components/selectDropdownV2.scss +364 -364
  32. package/src/digitv2/components/sidebarV2.scss +409 -0
  33. package/src/digitv2/components/stepperV2.scss +147 -147
  34. package/src/digitv2/components/textInputV2.scss +462 -462
  35. package/src/digitv2/components/textareaV2.scss +99 -99
  36. package/src/digitv2/components/textblockV2.scss +46 -46
  37. package/src/digitv2/components/timelineV2.scss +170 -170
  38. package/src/digitv2/components/toastV2.scss +80 -80
  39. package/src/digitv2/components/toggleV2.scss +72 -72
  40. package/src/digitv2/components/tooltipwrapperV2.scss +96 -0
  41. package/src/digitv2/components/topbarV2.scss +387 -387
  42. package/src/digitv2/components/treeSelectV2.scss +132 -132
  43. package/src/digitv2/components/uploaderV2.scss +556 -556
  44. package/src/digitv2/components/viewCardFieldPairV2.scss +44 -44
  45. package/src/digitv2/index.scss +172 -169
  46. package/src/digitv2/pages/employee/index.scss +1 -1
  47. package/src/digitv2/pages/employee/workbench.scss +615 -615
  48. package/src/digitv2/typography.scss +638 -638
  49. package/src/index.scss +677 -681
  50. package/src/pages/employee/index.scss +625 -625
  51. package/src/pages/employee/login.scss +220 -220
package/src/digitv2/components/buttonsV2.scss CHANGED
@@ -1,451 +1,450 @@
1
- @import url("../index.scss");
2
-
3
- .icon-label-container {
4
- @apply flex max-w-full items-center;
5
- gap: theme(digitv2.spacers.spacer2);
6
-
7
- &.small,
8
- &.medium {
9
- gap: theme(digitv2.spacers.spacer1);
10
- }
11
-
12
- .digit-button-customIcon {
13
- @apply flex-shrink-0 w-6 h-6;
14
-
15
- &.medium {
16
- @apply w-5 h-5;
17
- }
18
-
19
- &.small {
20
- width: 0.875rem;
21
- height: 0.875rem;
22
- }
23
- }
24
-
25
- &.link {
26
- @apply items-start;
27
- gap: theme(digitv2.spacers.spacer1);
28
-
29
- .digit-button-customIcon {
30
- @apply w-5 h-5 flex-shrink-0;
31
-
32
- &.small {
33
- width: 0.875rem;
34
- height: 0.875rem;
35
- margin-top:theme(digitv2.spacers.spacer1);
36
- }
37
- }
38
- }
39
- }
40
-
41
- .digit-button-label {
42
- @extend .typography.button.large;
43
- @apply text-center text-white w-full overflow-hidden whitespace-no-wrap;
44
- text-overflow: ellipsis;
45
- }
46
-
47
- .digit-button-default {
48
- @apply text-center cursor-pointer outline-none inline-flex bg-white max-w-full items-center;
49
- height: fit-content;
50
- width: fit-content;
51
- gap: theme(digitv2.spacers.spacer2);
52
- border: 0.063rem solid #000000;
53
- padding-left: theme(digitv2.spacers.spacer6);
54
- padding-right: theme(digitv2.spacers.spacer6);
55
- min-width: 6.5625rem;
56
- min-height: theme(digitv2.spacers.spacer10);
57
-
58
- h2 {
59
- @extend .typography.button.large;
60
- @apply text-black h-5;
61
- margin: 0;
62
- }
63
- }
64
-
65
- .digit-button-primary {
66
- @apply text-center cursor-pointer outline-none flex max-w-full items-center justify-center h-10;
67
- width: fit-content;
68
- padding-left: theme(digitv2.spacers.spacer6);
69
- padding-right: theme(digitv2.spacers.spacer6);
70
- gap: theme(digitv2.spacers.spacer2);
71
- min-width: 6.5625rem;
72
- background-color: theme(digitv2.lightTheme.primary-1);
73
-
74
- h2 {
75
- @extend .typography.button.large;
76
- @apply text-white;
77
- margin: 0;
78
- }
79
-
80
- &.disabled {
81
- @apply opacity-50;
82
- background: theme(digitv2.lightTheme.text-disabled);
83
- }
84
-
85
- &:focus {
86
- @apply outline-none;
87
- }
88
-
89
- &:hover {
90
- box-shadow: theme(digitv2.spacers.spacer0) -0.125rem theme(digitv2.spacers.spacer0) theme(digitv2.spacers.spacer0) theme(digitv2.lightTheme.text-primary) inset;
91
- }
92
-
93
- &:active {
94
- box-shadow: theme(digitv2.spacers.spacer0) -0.125rem theme(digitv2.spacers.spacer0) theme(digitv2.spacers.spacer0) #0B0C0C inset, theme(digitv2.spacers.spacer0) 0.063rem 0.175rem theme(digitv2.spacers.spacer0) #00000040;
95
-
96
- h2 {
97
- font-weight: theme(digitv2.fontWeight.bold);
98
- }
99
- }
100
-
101
- &.large{
102
- h2{
103
- @apply h-5;
104
- margin-top: 0.125rem;
105
- }
106
- }
107
-
108
- &.medium {
109
- @apply h-8;
110
-
111
- h2 {
112
- @extend .typography.button.medium;
113
- }
114
- }
115
-
116
- &.small {
117
- @apply h-6;
118
-
119
- h2 {
120
- @extend .typography.button.small;
121
- }
122
- }
123
-
124
- }
125
-
126
- .digit-button-secondary {
127
- @apply text-center cursor-pointer outline-none bg-white flex max-w-full items-center justify-center h-10;
128
- padding-left: theme(digitv2.spacers.spacer6);
129
- padding-right: theme(digitv2.spacers.spacer6);
130
- gap: theme(digitv2.spacers.spacer2);
131
- min-width: 6.5625rem;
132
- border: 0.063rem solid theme(digitv2.lightTheme.primary-1);
133
- width: fit-content;
134
-
135
- &:focus {
136
- @apply outline-none;
137
- }
138
-
139
- &:hover {
140
- @apply bg-white;
141
- box-shadow: theme(digitv2.spacers.spacer0) -0.125rem theme(digitv2.spacers.spacer0) theme(digitv2.spacers.spacer0) theme(digitv2.lightTheme.primary-1) inset;
142
- }
143
-
144
- &:active {
145
- @apply bg-white;
146
- box-shadow: theme(digitv2.spacers.spacer0) -0.125rem theme(digitv2.spacers.spacer0) theme(digitv2.spacers.spacer0) theme(digitv2.lightTheme.primary-1) inset, theme(digitv2.spacers.spacer0) theme(digitv2.spacers.spacer1) theme(digitv2.spacers.spacer1) theme(digitv2.spacers.spacer0) #C84C0E33;
147
-
148
- }
149
-
150
- h2 {
151
- @extend .typography.button.large;
152
- margin: 0;
153
- color: theme(digitv2.lightTheme.primary-1);
154
- }
155
-
156
- &.disabled {
157
- @apply opacity-50;
158
- border: 0.063rem solid theme(digitv2.lightTheme.text-disabled);
159
-
160
- h2 {
161
- color: theme(digitv2.lightTheme.text-disabled);
162
- }
163
- }
164
-
165
- &.large{
166
- h2{
167
- @apply h-5;
168
- margin-top: theme(digitv2.spacers.spacer1);
169
- }
170
- }
171
-
172
- &.medium {
173
- @apply h-8;
174
-
175
- h2 {
176
- @extend .typography.button.medium;
177
- }
178
- }
179
-
180
- &.small {
181
- @apply h-6;
182
-
183
- h2 {
184
- @extend .typography.button.small;
185
- }
186
- }
187
- }
188
-
189
- .digit-button-teritiary {
190
- @apply text-center cursor-pointer outline-none flex max-w-full items-center justify-center h-10;
191
- background: none;
192
- width: fit-content;
193
- padding-left: theme(digitv2.spacers.spacer2);
194
- padding-right: theme(digitv2.spacers.spacer2);
195
- gap: theme(digitv2.spacers.spacer2);
196
- min-width: 6.5625rem;
197
-
198
- &:focus {
199
- @apply outline-none;
200
- }
201
-
202
- h2 {
203
- @apply w-auto;
204
- @extend .typography.button.large;
205
- margin: 0;
206
- color: theme(digitv2.lightTheme.primary-1);
207
- }
208
-
209
- &.disabled {
210
- @apply opacity-50;
211
-
212
- h2 {
213
- color: theme(digitv2.lightTheme.text-disabled);
214
- }
215
- }
216
-
217
- &.large{
218
- h2{
219
- @apply h-5;
220
- margin-top: 0.125rem;
221
- }
222
- }
223
-
224
- &.medium {
225
- @apply h-8;
226
-
227
- h2 {
228
- @extend .typography.button.medium;
229
- }
230
- }
231
-
232
- &.small {
233
- @apply h-6;
234
-
235
- h2 {
236
- @extend .typography.button.small;
237
- }
238
- }
239
-
240
- &:active{
241
- h2{
242
- font-weight: theme(digitv2.fontWeight.bold);
243
- }
244
- }
245
- }
246
-
247
- .digit-button-link {
248
- @apply text-center cursor-pointer outline-none flex max-w-full items-center justify-center;
249
- background: none;
250
- width: fit-content;
251
- height: fit-content;
252
- padding-left: theme(digitv2.spacers.spacer2);
253
- padding-right: theme(digitv2.spacers.spacer2);
254
- gap: theme(digitv2.spacers.spacer2);
255
- min-width: 4.875rem;
256
-
257
- &:focus {
258
- @apply outline-none;
259
- }
260
-
261
- h2 {
262
- @extend .typography.link-L;
263
- @apply h-auto whitespace-normal text-left w-auto;
264
- margin: 0;
265
- word-break: break-word;
266
- color: theme(digitv2.lightTheme.primary-1);
267
- height: fit-content;
268
- }
269
-
270
- &:hover {
271
- h2 {
272
- @extend .typography.link-L;
273
- @apply h-auto whitespace-normal text-left;
274
- margin: 0;
275
- word-break: break-word;
276
- color: theme(digitv2.lightTheme.primary-1);
277
- height: fit-content;
278
- text-decoration-thickness: 0.125rem;
279
- }
280
- }
281
-
282
- &.disabled {
283
- @apply opacity-50;
284
-
285
- h2 {
286
- color: theme(digitv2.lightTheme.text-disabled);
287
- }
288
- }
289
-
290
- &.medium {
291
-
292
- h2 {
293
- @extend .typography.link-S;
294
- }
295
- }
296
-
297
- &.small {
298
-
299
- h2 {
300
- @extend .typography.link-XS;
301
- }
302
- }
303
- }
304
-
305
- .digit-button-digit-action-cancel {
306
- @apply bg-border text-center outline-none px-lg text-center;
307
- border-color: #464646;
308
- border-bottom: 0.063rem;
309
- border-style: solid;
310
- min-width: 5.2rem;
311
-
312
- &.disabled {
313
- @apply opacity-50;
314
- }
315
-
316
- &:focus {
317
- @apply outline-none;
318
- }
319
-
320
- h2 {
321
- @apply font-medium text-black flex justify-center items-center;
322
- margin: 0;
323
- font-family: theme(digitv2.fontFamily.sans)
324
- }
325
- }
326
-
327
- .digit-submit-bar {
328
- /* @extend .light-primary-button;*/
329
- @apply h-10 text-center w-full outline-none cursor-pointer;
330
- box-shadow: inset theme(digitv2.spacers.spacer0) -0.125rem theme(digitv2.spacers.spacer0) theme(colors.text.primary);
331
- background-color: theme(digitv2.lightTheme.primary-1);
332
-
333
- &:focus {
334
- @apply outline-none;
335
- }
336
-
337
- h2 {
338
- @apply font-medium text-legend text-white leading-normal;
339
- margin: 0;
340
- font-family: theme(digitv2.fontFamily.sans)
341
- }
342
- }
343
-
344
- .digit-submit-bar-disabled {
345
- @apply h-10 text-center w-full outline-none opacity-50;
346
- background-color: theme(digitv2.lightTheme.primary-1);
347
-
348
- &:focus {
349
- @apply outline-none;
350
- }
351
-
352
- h2 {
353
- @apply font-medium text-legend text-white leading-normal;
354
- margin: 0;
355
- font-family: theme(digitv2.fontFamily.sans)
356
- }
357
- }
358
-
359
- .digit-selector-button-primary {
360
- @apply h-8 text-center border-b-2 border-input-border border-solid outline-none px-lg;
361
- background-color: theme(digitv2.lightTheme.primary-1);
362
-
363
- &:focus {
364
- @apply outline-none;
365
- }
366
-
367
- h2 {
368
- @apply font-rc font-medium text-legend text-white;
369
- }
370
- }
371
-
372
- .digit-selector-button-border {
373
- @apply h-8 bg-border text-center border-b-2 border-input-border border-solid outline-none px-lg;
374
-
375
- &:focus {
376
- @apply outline-none;
377
- }
378
-
379
- h2 {
380
- @apply font-rc font-medium text-legend text-text-primary;
381
- }
382
- }
383
-
384
- .digit-selector-button-primary-disabled {
385
- @apply h-8 text-center border-b-2 border-input-border border-solid outline-none px-lg opacity-50;
386
- background-color: theme(digitv2.lightTheme.primary-1);
387
-
388
- &:focus {
389
- @apply outline-none;
390
- }
391
-
392
- h2 {
393
- @apply font-rc font-medium text-legend text-white;
394
- }
395
- }
396
-
397
- @screen dt {
398
-
399
- .digit-submit-bar,
400
- .digit-submit-bar-disabled {
401
- width: 15rem;
402
- }
403
- }
404
-
405
- .digit-submit-bar:focus {
406
- @apply outline-none !important;
407
- }
408
-
409
- .digit-buttons-group {
410
- display: flex;
411
- flex-direction: row;
412
- height: fit-content;
413
- gap:theme(digitv2.spacers.spacer4);
414
-
415
- @media (max-width: 30rem) {
416
- flex-direction: column;
417
-
418
- button{
419
- width: 100%;
420
- }
421
- }
422
-
423
- button{
424
- flex: 1;
425
- }
426
- }
427
-
428
- .header-dropdown-container {
429
- position: relative;
430
-
431
- .header-dropdown-menu {
432
- @apply absolute z-30;
433
- bottom: theme(digitv2.spacers.spacer5);
434
- right: 0;
435
- max-height: unset;
436
- margin-top: unset;
437
-
438
- &.showBottom{
439
- bottom: unset;
440
- }
441
-
442
- @media (max-width: 30rem) {
443
- width: 100% !important;
444
- }
445
-
446
- @media (max-width: 15.625rem) {
447
- left:0 ;
448
- }
449
- }
450
- }
451
-
1
+ @import url("../index.scss");
2
+
3
+ .icon-label-container {
4
+ @apply flex max-w-full items-center;
5
+ gap: theme(digitv2.spacers.spacer2);
6
+
7
+ &.small,
8
+ &.medium {
9
+ gap: theme(digitv2.spacers.spacer1);
10
+ }
11
+
12
+ .digit-button-customIcon {
13
+ @apply flex-shrink-0 w-6 h-6;
14
+
15
+ &.medium {
16
+ @apply w-5 h-5;
17
+ }
18
+
19
+ &.small {
20
+ width: 0.875rem;
21
+ height: 0.875rem;
22
+ }
23
+ }
24
+
25
+ &.link {
26
+ @apply items-start;
27
+ gap: theme(digitv2.spacers.spacer1);
28
+
29
+ .digit-button-customIcon {
30
+ @apply w-5 h-5 flex-shrink-0;
31
+
32
+ &.small {
33
+ width: 0.875rem;
34
+ height: 0.875rem;
35
+ margin-top:theme(digitv2.spacers.spacer1);
36
+ }
37
+ }
38
+ }
39
+ }
40
+
41
+ .digit-button-label {
42
+ @extend .typography.button.large;
43
+ @apply text-center text-white w-full overflow-hidden whitespace-no-wrap;
44
+ text-overflow: ellipsis;
45
+ }
46
+
47
+ .digit-button-default {
48
+ @apply text-center cursor-pointer outline-none inline-flex bg-white max-w-full items-center;
49
+ height: fit-content;
50
+ width: fit-content;
51
+ gap: theme(digitv2.spacers.spacer2);
52
+ border: 0.063rem solid #000000;
53
+ padding-left: theme(digitv2.spacers.spacer6);
54
+ padding-right: theme(digitv2.spacers.spacer6);
55
+ min-width: 6.5625rem;
56
+ min-height: theme(digitv2.spacers.spacer10);
57
+
58
+ h2 {
59
+ @extend .typography.button.large;
60
+ @apply text-black h-5;
61
+ margin: 0;
62
+ }
63
+ }
64
+
65
+ .digit-button-primary {
66
+ @apply text-center cursor-pointer outline-none flex max-w-full items-center justify-center h-10;
67
+ width: fit-content;
68
+ padding-left: theme(digitv2.spacers.spacer6);
69
+ padding-right: theme(digitv2.spacers.spacer6);
70
+ gap: theme(digitv2.spacers.spacer2);
71
+ min-width: 6.5625rem;
72
+ background-color: theme(digitv2.lightTheme.primary-1);
73
+
74
+ h2 {
75
+ @extend .typography.button.large;
76
+ @apply text-white;
77
+ margin: 0;
78
+ }
79
+
80
+ &.disabled {
81
+ @apply opacity-50;
82
+ background: theme(digitv2.lightTheme.text-disabled);
83
+ }
84
+
85
+ &:focus {
86
+ @apply outline-none;
87
+ }
88
+
89
+ &:hover {
90
+ box-shadow: theme(digitv2.spacers.spacer0) -0.125rem theme(digitv2.spacers.spacer0) theme(digitv2.spacers.spacer0) theme(digitv2.lightTheme.text-primary) inset;
91
+ }
92
+
93
+ &:active {
94
+ box-shadow: theme(digitv2.spacers.spacer0) -0.125rem theme(digitv2.spacers.spacer0) theme(digitv2.spacers.spacer0) #0B0C0C inset, theme(digitv2.spacers.spacer0) 0.063rem 0.175rem theme(digitv2.spacers.spacer0) #00000040;
95
+
96
+ h2 {
97
+ font-weight: theme(digitv2.fontWeight.bold);
98
+ }
99
+ }
100
+
101
+ &.large{
102
+ h2{
103
+ @apply h-5;
104
+ margin-top: 0.125rem;
105
+ }
106
+ }
107
+
108
+ &.medium {
109
+ @apply h-8;
110
+
111
+ h2 {
112
+ @extend .typography.button.medium;
113
+ }
114
+ }
115
+
116
+ &.small {
117
+ @apply h-6;
118
+
119
+ h2 {
120
+ @extend .typography.button.small;
121
+ }
122
+ }
123
+
124
+ }
125
+
126
+ .digit-button-secondary {
127
+ @apply text-center cursor-pointer outline-none bg-white flex max-w-full items-center justify-center h-10;
128
+ padding-left: theme(digitv2.spacers.spacer6);
129
+ padding-right: theme(digitv2.spacers.spacer6);
130
+ gap: theme(digitv2.spacers.spacer2);
131
+ min-width: 6.5625rem;
132
+ border: 0.063rem solid theme(digitv2.lightTheme.primary-1);
133
+ width: fit-content;
134
+
135
+ &:focus {
136
+ @apply outline-none;
137
+ }
138
+
139
+ &:hover {
140
+ @apply bg-white;
141
+ box-shadow: theme(digitv2.spacers.spacer0) -0.125rem theme(digitv2.spacers.spacer0) theme(digitv2.spacers.spacer0) theme(digitv2.lightTheme.primary-1) inset;
142
+ }
143
+
144
+ &:active {
145
+ @apply bg-white;
146
+ box-shadow: theme(digitv2.spacers.spacer0) -0.125rem theme(digitv2.spacers.spacer0) theme(digitv2.spacers.spacer0) theme(digitv2.lightTheme.primary-1) inset, theme(digitv2.spacers.spacer0) theme(digitv2.spacers.spacer1) theme(digitv2.spacers.spacer1) theme(digitv2.spacers.spacer0) #C84C0E33;
147
+
148
+ }
149
+
150
+ h2 {
151
+ @extend .typography.button.large;
152
+ margin: 0;
153
+ color: theme(digitv2.lightTheme.primary-1);
154
+ }
155
+
156
+ &.disabled {
157
+ @apply opacity-50;
158
+ border: 0.063rem solid theme(digitv2.lightTheme.text-disabled);
159
+
160
+ h2 {
161
+ color: theme(digitv2.lightTheme.text-disabled);
162
+ }
163
+ }
164
+
165
+ &.large{
166
+ h2{
167
+ @apply h-5;
168
+ }
169
+ }
170
+
171
+ &.medium {
172
+ @apply h-8;
173
+
174
+ h2 {
175
+ @extend .typography.button.medium;
176
+ }
177
+ }
178
+
179
+ &.small {
180
+ @apply h-6;
181
+
182
+ h2 {
183
+ @extend .typography.button.small;
184
+ }
185
+ }
186
+ }
187
+
188
+ .digit-button-teritiary {
189
+ @apply text-center cursor-pointer outline-none flex max-w-full items-center justify-center h-10;
190
+ background: none;
191
+ width: fit-content;
192
+ padding-left: theme(digitv2.spacers.spacer2);
193
+ padding-right: theme(digitv2.spacers.spacer2);
194
+ gap: theme(digitv2.spacers.spacer2);
195
+ min-width: 6.5625rem;
196
+
197
+ &:focus {
198
+ @apply outline-none;
199
+ }
200
+
201
+ h2 {
202
+ @apply w-auto;
203
+ @extend .typography.button.large;
204
+ margin: 0;
205
+ color: theme(digitv2.lightTheme.primary-1);
206
+ }
207
+
208
+ &.disabled {
209
+ @apply opacity-50;
210
+
211
+ h2 {
212
+ color: theme(digitv2.lightTheme.text-disabled);
213
+ }
214
+ }
215
+
216
+ &.large{
217
+ h2{
218
+ @apply h-5;
219
+ margin-top: 0.125rem;
220
+ }
221
+ }
222
+
223
+ &.medium {
224
+ @apply h-8;
225
+
226
+ h2 {
227
+ @extend .typography.button.medium;
228
+ }
229
+ }
230
+
231
+ &.small {
232
+ @apply h-6;
233
+
234
+ h2 {
235
+ @extend .typography.button.small;
236
+ }
237
+ }
238
+
239
+ &:active{
240
+ h2{
241
+ font-weight: theme(digitv2.fontWeight.bold);
242
+ }
243
+ }
244
+ }
245
+
246
+ .digit-button-link {
247
+ @apply text-center cursor-pointer outline-none flex max-w-full items-center justify-center;
248
+ background: none;
249
+ width: fit-content;
250
+ height: fit-content;
251
+ padding-left: theme(digitv2.spacers.spacer2);
252
+ padding-right: theme(digitv2.spacers.spacer2);
253
+ gap: theme(digitv2.spacers.spacer2);
254
+ min-width: 4.875rem;
255
+
256
+ &:focus {
257
+ @apply outline-none;
258
+ }
259
+
260
+ h2 {
261
+ @extend .typography.link-L;
262
+ @apply h-auto whitespace-normal text-left w-auto;
263
+ margin: 0;
264
+ word-break: break-word;
265
+ color: theme(digitv2.lightTheme.primary-1);
266
+ height: fit-content;
267
+ }
268
+
269
+ &:hover {
270
+ h2 {
271
+ @extend .typography.link-L;
272
+ @apply h-auto whitespace-normal text-left;
273
+ margin: 0;
274
+ word-break: break-word;
275
+ color: theme(digitv2.lightTheme.primary-1);
276
+ height: fit-content;
277
+ text-decoration-thickness: 0.125rem;
278
+ }
279
+ }
280
+
281
+ &.disabled {
282
+ @apply opacity-50;
283
+
284
+ h2 {
285
+ color: theme(digitv2.lightTheme.text-disabled);
286
+ }
287
+ }
288
+
289
+ &.medium {
290
+
291
+ h2 {
292
+ @extend .typography.link-S;
293
+ }
294
+ }
295
+
296
+ &.small {
297
+
298
+ h2 {
299
+ @extend .typography.link-XS;
300
+ }
301
+ }
302
+ }
303
+
304
+ .digit-button-digit-action-cancel {
305
+ @apply bg-border text-center outline-none px-lg text-center;
306
+ border-color: #464646;
307
+ border-bottom: 0.063rem;
308
+ border-style: solid;
309
+ min-width: 5.2rem;
310
+
311
+ &.disabled {
312
+ @apply opacity-50;
313
+ }
314
+
315
+ &:focus {
316
+ @apply outline-none;
317
+ }
318
+
319
+ h2 {
320
+ @apply font-medium text-black flex justify-center items-center;
321
+ margin: 0;
322
+ font-family: theme(digitv2.fontFamily.sans)
323
+ }
324
+ }
325
+
326
+ .digit-submit-bar {
327
+ /* @extend .light-primary-button;*/
328
+ @apply h-10 text-center w-full outline-none cursor-pointer;
329
+ box-shadow: inset theme(digitv2.spacers.spacer0) -0.125rem theme(digitv2.spacers.spacer0) theme(colors.text.primary);
330
+ background-color: theme(digitv2.lightTheme.primary-1);
331
+
332
+ &:focus {
333
+ @apply outline-none;
334
+ }
335
+
336
+ h2 {
337
+ @apply font-medium text-legend text-white leading-normal;
338
+ margin: 0;
339
+ font-family: theme(digitv2.fontFamily.sans)
340
+ }
341
+ }
342
+
343
+ .digit-submit-bar-disabled {
344
+ @apply h-10 text-center w-full outline-none opacity-50;
345
+ background-color: theme(digitv2.lightTheme.primary-1);
346
+
347
+ &:focus {
348
+ @apply outline-none;
349
+ }
350
+
351
+ h2 {
352
+ @apply font-medium text-legend text-white leading-normal;
353
+ margin: 0;
354
+ font-family: theme(digitv2.fontFamily.sans)
355
+ }
356
+ }
357
+
358
+ .digit-selector-button-primary {
359
+ @apply h-8 text-center border-b-2 border-input-border border-solid outline-none px-lg;
360
+ background-color: theme(digitv2.lightTheme.primary-1);
361
+
362
+ &:focus {
363
+ @apply outline-none;
364
+ }
365
+
366
+ h2 {
367
+ @apply font-rc font-medium text-legend text-white;
368
+ }
369
+ }
370
+
371
+ .digit-selector-button-border {
372
+ @apply h-8 bg-border text-center border-b-2 border-input-border border-solid outline-none px-lg;
373
+
374
+ &:focus {
375
+ @apply outline-none;
376
+ }
377
+
378
+ h2 {
379
+ @apply font-rc font-medium text-legend text-text-primary;
380
+ }
381
+ }
382
+
383
+ .digit-selector-button-primary-disabled {
384
+ @apply h-8 text-center border-b-2 border-input-border border-solid outline-none px-lg opacity-50;
385
+ background-color: theme(digitv2.lightTheme.primary-1);
386
+
387
+ &:focus {
388
+ @apply outline-none;
389
+ }
390
+
391
+ h2 {
392
+ @apply font-rc font-medium text-legend text-white;
393
+ }
394
+ }
395
+
396
+ @screen dt {
397
+
398
+ .digit-submit-bar,
399
+ .digit-submit-bar-disabled {
400
+ width: 15rem;
401
+ }
402
+ }
403
+
404
+ .digit-submit-bar:focus {
405
+ @apply outline-none !important;
406
+ }
407
+
408
+ .digit-buttons-group {
409
+ display: flex;
410
+ flex-direction: row;
411
+ height: fit-content;
412
+ gap:theme(digitv2.spacers.spacer4);
413
+
414
+ @media (max-width: 30rem) {
415
+ flex-direction: column;
416
+
417
+ button{
418
+ width: 100%;
419
+ }
420
+ }
421
+
422
+ button{
423
+ flex: 1;
424
+ }
425
+ }
426
+
427
+ .header-dropdown-container {
428
+ position: relative;
429
+
430
+ .header-dropdown-menu {
431
+ @apply absolute z-30;
432
+ bottom: theme(digitv2.spacers.spacer5);
433
+ right: 0;
434
+ max-height: unset;
435
+ margin-top: unset;
436
+
437
+ &.showBottom{
438
+ bottom: unset;
439
+ }
440
+
441
+ @media (max-width: 30rem) {
442
+ width: 100% !important;
443
+ }
444
+
445
+ @media (max-width: 15.625rem) {
446
+ left:0 ;
447
+ }
448
+ }
449
+ }
450
+