@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/selectDropdownV2.scss CHANGED
@@ -1,365 +1,365 @@
1
- .digit-dropdown-employee-select-wrap {
2
- @apply w-full relative;
3
- @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
4
- /* Media query for tablets */
5
- max-width: 27.5rem;
6
- }
7
- @media (max-aspect-ratio: 9/16) {
8
- /* Media query for mobile */
9
- max-width: 100%;
10
- width: 100%;
11
- }
12
- @media (min-aspect-ratio: 3/4) {
13
- /* Media query for desktop */
14
- max-width: 37.5rem;
15
- }
16
- .digit-dropdown-select {
17
- @extend .light-input-border;
18
- @apply relative block w-full h-10 bg-white;
19
- border: 0.063rem solid theme(digitv2.lightTheme.text-secondary);
20
- &.digit-field-error {
21
- border: 0.063rem solid;
22
- border-color: theme(digitv2.lightTheme.alert-error);
23
- }
24
- &.disabled {
25
- pointer-events: none !important;
26
- border: 0.063rem solid theme(digitv2.lightTheme.generic-divider) !important;
27
- color: theme(digitv2.lightTheme.generic-divider) !important;
28
- }
29
- input[type="text"] {
30
- @extend .typography.body-l;
31
- @apply absolute z-10 h-full outline-none;
32
- width:calc(100%- (theme(digitv2.spacers.spacer7)));
33
- background-color: transparent;
34
- padding-top:theme(digitv2.spacers.spacer2);
35
- padding-bottom: theme(digitv2.spacers.spacer2);
36
- padding-left:theme(digitv2.spacers.spacer3);
37
- color: theme(digitv2.lightTheme.text-primary);
38
- }
39
- p {
40
- @extend .light-text-color-primary;
41
- padding-top: 0.563rem;
42
- @apply text-form-field text-text-primary float-left ml-sm;
43
- }
44
- img {
45
- @apply float-right h-6 w-6 mt-sm mr-sm;
46
- }
47
- svg {
48
- @apply absolute right-0 float-right h-6 w-6 mt-sm mr-sm mb-sm;
49
- }
50
- }
51
- .digit-dropdown-select-active {
52
- @apply relative block w-full h-10;
53
- border: 0.063rem solid theme(digitv2.lightTheme.primary-1);
54
- input[type="text"] {
55
- @extend .typography.body-l;
56
- @apply absolute z-10 h-full outline-none;
57
- width:calc(100%- (theme(digitv2.spacers.spacer7)));
58
- background-color: transparent;
59
- font-size: theme(digitv2.spacers.spacer4);
60
- padding-top: theme(digitv2.spacers.spacer2);
61
- padding-bottom: theme(digitv2.spacers.spacer2);
62
- padding-left: theme(digitv2.spacers.spacer3);
63
- color: theme(digitv2.lightTheme.text-primary);
64
- }
65
- p {
66
- @extend .light-text-color-primary;
67
- @apply text-form-field text-text-primary float-left ml-sm;
68
- }
69
- p {
70
- padding-top: 0.563rem;
71
- }
72
- img {
73
- @apply float-right h-6 w-6 mt-sm mr-sm;
74
- }
75
- svg {
76
- @apply absolute right-0 float-right h-6 w-6 mt-sm mr-sm mb-sm;
77
- }
78
- }
79
- .digit-dropdown-options-card {
80
- width: 100% !important;
81
- box-shadow: theme(digitv2.spacers.spacer0) 0.063rem 0.275rem theme(digitv2.spacers.spacer0) #00000026;
82
- max-height: 20vmax;
83
- @apply absolute z-20 bg-white max-w-full overflow-y-auto overflow-x-hidden;
84
- p {
85
- @extend .light-text-color-primary;
86
- padding-top: 0.875rem;
87
- @apply w-full h-12 pl-sm text-text-primary text-form-field;
88
- &:hover {
89
- @extend .light-background;
90
- @apply bg-grey-mid;
91
- }
92
- }
93
- }
94
- .digit-dropdown-select,
95
- .digit-dropdown-select-active {
96
- &.treedropdown,
97
- &.notSearchable {
98
- @apply cursor-pointer;
99
- }
100
- }
101
- }
102
- .digit-dropdown-options-card::-webkit-scrollbar {
103
- width: theme(digitv2.spacers.spacer2);
104
- background-color: theme(digitv2.lightTheme.generic-background);
105
- }
106
- .digit-dropdown-options-card::-webkit-scrollbar-track {
107
- background-color: theme(digitv2.lightTheme.generic-background);
108
- border-radius: 0.563rem;
109
- }
110
- .digit-dropdown-options-card::-webkit-scrollbar-thumb {
111
- background-color: theme(digitv2.lightTheme.generic-divider);
112
- border-radius: 0.563rem;
113
- }
114
- .digit-nested-category {
115
- @apply flex items-center flex-shrink-0;
116
- background: theme(digitv2.lightTheme.background);
117
- height: 2.4375rem;
118
- padding: theme(digitv2.spacers.spacer4) 0.625rem;
119
- gap: 0.625rem;
120
- }
121
- .digit-nested-category:not(:first-child) {
122
- margin-top: theme(digitv2.spacers.spacer4);
123
- }
124
- .digit-category-name {
125
- @extend .typography.heading-s;
126
- @apply flex items-center overflow-hidden whitespace-no-wrap;
127
- color: theme(digitv2.lightTheme.text-primary);
128
- gap: theme(digitv2.spacers.spacer1);
129
- }
130
- .digit-dropdown-item {
131
- @apply flex flex-row;
132
- padding: 0.625rem;
133
- gap: 0.625rem;
134
- min-height: 2.438rem;
135
- color: theme(digitv2.lightTheme.text-primary) !important;
136
- .profile-icon-container {
137
- flex-shrink: 0;
138
- border-radius: 4.5rem;
139
- background-size: cover;
140
- background-position: center;
141
- }
142
- .option-des-container {
143
- @apply flex-col justify-center w-full max-w-full overflow-hidden box-border;
144
- display: flex !important;
145
- align-items: center;
146
- min-height: 1.125rem;
147
- .icon-option{
148
- @apply w-full items-center;
149
- display: flex !important;
150
- gap:theme(digitv2.spacers.spacer1);
151
- svg{
152
- flex-shrink: 0;
153
- }
154
- }
155
- .main-option {
156
- @extend .typography.body-s;
157
- @apply whitespace-no-wrap w-full max-w-full overflow-hidden;
158
- text-overflow: ellipsis;
159
- &.nestedtextdropdown,
160
- &.profilenestedtext {
161
- @extend .typography.body-l;
162
- color: theme(digitv2.lightTheme.text-secondary);
163
- }
164
- }
165
- .option-description {
166
- @extend .typography.body-xs;
167
- color: theme(digitv2.lightTheme.text-secondary);
168
- }
169
- }
170
- &:not(.nesteddropdown, .treedropdown):not(:active):nth-of-type(even) {
171
- background: theme(digitv2.lightTheme.paper-secondary);
172
- }
173
- &.nesteddropdown {
174
- position: relative;
175
- height: 2.4375rem;
176
- &::before {
177
- content: "";
178
- position: absolute;
179
- bottom: 0;
180
- left: 0.625rem;
181
- right: 0.635rem;
182
- border-bottom: 0.063rem solid theme(digitv2.lightTheme.generic-divider);
183
- }
184
- &:hover,
185
- &:active {
186
- &::before {
187
- border-bottom: none;
188
- }
189
- }
190
- }
191
- &:hover,
192
- &.keyChange{
193
- background: theme(digitv2.lightTheme.primary-bg) !important;
194
- border: 0.031rem solid theme(digitv2.lightTheme.primary-1);
195
- }
196
- &:active {
197
- background: theme(digitv2.lightTheme.primary-1) !important;
198
- span,
199
- .option-description {
200
- color: theme(digitv2.lightTheme.paper-primary);
201
- }
202
- .svg {
203
- width: 6.25rem;
204
- }
205
- .option-des-container {
206
- .main-option {
207
- @extend .typography.heading-s;
208
- }
209
- }
210
- }
211
- &.nestedtextdropdown {
212
- min-height: 4.75rem;
213
- padding: theme(digitv2.spacers.spacer2) 0.635rem theme(digitv2.spacers.spacer2) 0.635rem;
214
- color: theme(digitv2.lightTheme.text-secondary) !important;
215
- &:hover {
216
- border: 0.063rem solid theme(digitv2.lightTheme.primary-1);
217
- }
218
- .option-des-container {
219
- padding-right: 0.125rem !important;
220
- }
221
- &:active {
222
- .option-des-container {
223
- .main-option {
224
- @extend .typography.heading-s;
225
- color: theme(digitv2.lightTheme.paper-primary);
226
- }
227
- }
228
- }
229
- }
230
- &.profiledropdown {
231
- min-height: theme(digitv2.spacers.spacer12);
232
- padding: theme(digitv2.spacers.spacer2) 0.625rem;
233
- }
234
- &.profilenestedtext {
235
- min-height: 4.75rem;
236
- padding: theme(digitv2.spacers.spacer2) theme(digitv2.spacers.spacer4);
237
- gap: theme(digitv2.spacers.spacer4);
238
- align-items: center;
239
- color: theme(digitv2.lightTheme.text-secondary) !important;
240
- &:active {
241
- .option-des-container {
242
- .main-option {
243
- @extend .typography.heading-s;
244
- color: theme(digitv2.lightTheme.paper-primary);
245
- }
246
- }
247
- }
248
- }
249
- &.unsuccessfulresults {
250
- background-color: theme(digitv2.lightTheme.paper-secondary);
251
- pointer-events: none;
252
- span {
253
- @extend .typography.body-s;
254
- color: theme(digitv2.lightTheme.text-disabled);
255
- }
256
- }
257
- }
258
- .digit-dropdown-employee-select-wrap--elipses {
259
- @apply overflow-hidden whitespace-no-wrap;
260
- width:calc(100%- (theme(digitv2.spacers.spacer7)));
261
- text-overflow: ellipsis;
262
- &.treedropdown,
263
- &.notSearchable {
264
- @apply pointer-events-none;
265
- }
266
- }
267
- .digit-dropdown-select-wrap {
268
- @apply relative bg-white w-full;
269
- @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
270
- /* Media query for tablets */
271
- max-width: 27.5rem;
272
- }
273
- @media (max-aspect-ratio: 9/16) {
274
- /* Media query for mobile */
275
- max-width: 20.5rem;
276
- width: 100%;
277
- }
278
- @media (min-aspect-ratio: 3/4) {
279
- /* Media query for desktop */
280
- max-width: 37.5rem;
281
- }
282
- .digit-dropdown-select {
283
- @extend .light-input-border;
284
- @apply relative block w-full h-10 bg-white;
285
- border: 0.063rem solid theme(digitv2.lightTheme.text-secondary);
286
- input[type="text"] {
287
- @extend .typography.body-l;
288
- @apply absolute z-10 h-full outline-none;
289
- width:calc(100%- (theme(digitv2.spacers.spacer7)));
290
- background-color: transparent;
291
- padding-top: theme(digitv2.spacers.spacer2);
292
- padding-bottom: theme(digitv2.spacers.spacer2);
293
- padding-left: theme(digitv2.spacers.spacer3);
294
- color: theme(digitv2.lightTheme.text-primary);
295
- }
296
- &.disabled {
297
- pointer-events: none !important;
298
- border: 0.063rem solid theme(digitv2.lightTheme.generic-divider) !important;
299
- color: theme(digitv2.lightTheme.generic-divider) !important;
300
- }
301
- p {
302
- @extend .light-text-color-primary;
303
- padding-top: 0.563rem;
304
- @apply text-form-field text-text-primary float-left ml-sm;
305
- }
306
- img {
307
- @apply float-right h-6 w-6 mt-sm mr-sm;
308
- }
309
- svg {
310
- @apply absolute right-0 float-right h-6 w-6 mt-sm mr-sm mb-sm;
311
- }
312
- }
313
- .digit-dropdown-select-active {
314
- @apply relative block w-full h-10;
315
- border: 0.063rem solid theme(digitv2.lightTheme.primary-1);
316
- input[type="text"] {
317
- @extend .typography.body-l;
318
- @apply absolute z-10 h-full outline-none;
319
- width:calc(100%- (theme(digitv2.spacers.spacer7)));
320
- background-color: transparent;
321
- padding-top: theme(digitv2.spacers.spacer2);
322
- padding-bottom: theme(digitv2.spacers.spacer2);
323
- padding-left: theme(digitv2.spacers.spacer3);
324
- color: theme(digitv2.lightTheme.text-primary);
325
- }
326
- p {
327
- @extend .light-text-color-primary;
328
- @apply text-form-field text-text-primary float-left ml-sm;
329
- }
330
- p {
331
- padding-top: 0.563rem;
332
- }
333
- img {
334
- @apply float-right h-6 w-6 mt-sm mr-sm;
335
- }
336
- svg {
337
- @apply absolute right-0 float-right h-6 w-6 mt-sm mr-sm mb-sm;
338
- }
339
- }
340
- .digit-dropdown-select,
341
- .digit-dropdown-select-active {
342
- &.treedropdown,
343
- &.notSearchable {
344
- @apply cursor-pointer;
345
- }
346
- }
347
- .digit-dropdown-options-card {
348
- width: 100% !important;
349
- box-shadow: theme(digitv2.spacers.spacer0) 0.063rem 0.275rem theme(digitv2.spacers.spacer0) #00000026;
350
- @apply absolute z-20 bg-white overflow-y-auto overflow-x-hidden;
351
- max-height: 20vmax;
352
- p {
353
- @extend .light-text-color-primary;
354
- padding-top: 0.875rem;
355
- @apply w-full h-12 pl-sm text-text-primary text-form-field;
356
- &:hover {
357
- @apply bg-grey-mid;
358
- }
359
- }
360
- }
361
- }
362
-
363
- .cp{
364
- cursor: pointer;
1
+ .digit-dropdown-employee-select-wrap {
2
+ @apply w-full relative;
3
+ @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
4
+ /* Media query for tablets */
5
+ max-width: 27.5rem;
6
+ }
7
+ @media (max-aspect-ratio: 9/16) {
8
+ /* Media query for mobile */
9
+ max-width: 100%;
10
+ width: 100%;
11
+ }
12
+ @media (min-aspect-ratio: 3/4) {
13
+ /* Media query for desktop */
14
+ max-width: 37.5rem;
15
+ }
16
+ .digit-dropdown-select {
17
+ @extend .light-input-border;
18
+ @apply relative block w-full h-10 bg-white;
19
+ border: 0.063rem solid theme(digitv2.lightTheme.text-secondary);
20
+ &.digit-field-error {
21
+ border: 0.063rem solid;
22
+ border-color: theme(digitv2.lightTheme.alert-error);
23
+ }
24
+ &.disabled {
25
+ pointer-events: none !important;
26
+ border: 0.063rem solid theme(digitv2.lightTheme.generic-divider) !important;
27
+ color: theme(digitv2.lightTheme.generic-divider) !important;
28
+ }
29
+ input[type="text"] {
30
+ @extend .typography.body-l;
31
+ @apply absolute z-10 h-full outline-none;
32
+ width:calc(100%- (theme(digitv2.spacers.spacer7)));
33
+ background-color: transparent;
34
+ padding-top:theme(digitv2.spacers.spacer2);
35
+ padding-bottom: theme(digitv2.spacers.spacer2);
36
+ padding-left:theme(digitv2.spacers.spacer3);
37
+ color: theme(digitv2.lightTheme.text-primary);
38
+ }
39
+ p {
40
+ @extend .light-text-color-primary;
41
+ padding-top: 0.563rem;
42
+ @apply text-form-field text-text-primary float-left ml-sm;
43
+ }
44
+ img {
45
+ @apply float-right h-6 w-6 mt-sm mr-sm;
46
+ }
47
+ svg {
48
+ @apply absolute right-0 float-right h-6 w-6 mt-sm mr-sm mb-sm;
49
+ }
50
+ }
51
+ .digit-dropdown-select-active {
52
+ @apply relative block w-full h-10;
53
+ border: 0.063rem solid theme(digitv2.lightTheme.primary-1);
54
+ input[type="text"] {
55
+ @extend .typography.body-l;
56
+ @apply absolute z-10 h-full outline-none;
57
+ width:calc(100%- (theme(digitv2.spacers.spacer7)));
58
+ background-color: transparent;
59
+ font-size: theme(digitv2.spacers.spacer4);
60
+ padding-top: theme(digitv2.spacers.spacer2);
61
+ padding-bottom: theme(digitv2.spacers.spacer2);
62
+ padding-left: theme(digitv2.spacers.spacer3);
63
+ color: theme(digitv2.lightTheme.text-primary);
64
+ }
65
+ p {
66
+ @extend .light-text-color-primary;
67
+ @apply text-form-field text-text-primary float-left ml-sm;
68
+ }
69
+ p {
70
+ padding-top: 0.563rem;
71
+ }
72
+ img {
73
+ @apply float-right h-6 w-6 mt-sm mr-sm;
74
+ }
75
+ svg {
76
+ @apply absolute right-0 float-right h-6 w-6 mt-sm mr-sm mb-sm;
77
+ }
78
+ }
79
+ .digit-dropdown-options-card {
80
+ width: 100% !important;
81
+ box-shadow: theme(digitv2.spacers.spacer0) 0.063rem 0.275rem theme(digitv2.spacers.spacer0) #00000026;
82
+ max-height: 20vmax;
83
+ @apply absolute z-20 bg-white max-w-full overflow-y-auto overflow-x-hidden;
84
+ p {
85
+ @extend .light-text-color-primary;
86
+ padding-top: 0.875rem;
87
+ @apply w-full h-12 pl-sm text-text-primary text-form-field;
88
+ &:hover {
89
+ @extend .light-background;
90
+ @apply bg-grey-mid;
91
+ }
92
+ }
93
+ }
94
+ .digit-dropdown-select,
95
+ .digit-dropdown-select-active {
96
+ &.treedropdown,
97
+ &.notSearchable {
98
+ @apply cursor-pointer;
99
+ }
100
+ }
101
+ }
102
+ .digit-dropdown-options-card::-webkit-scrollbar {
103
+ width: theme(digitv2.spacers.spacer2);
104
+ background-color: theme(digitv2.lightTheme.generic-background);
105
+ }
106
+ .digit-dropdown-options-card::-webkit-scrollbar-track {
107
+ background-color: theme(digitv2.lightTheme.generic-background);
108
+ border-radius: 0.563rem;
109
+ }
110
+ .digit-dropdown-options-card::-webkit-scrollbar-thumb {
111
+ background-color: theme(digitv2.lightTheme.generic-divider);
112
+ border-radius: 0.563rem;
113
+ }
114
+ .digit-nested-category {
115
+ @apply flex items-center flex-shrink-0;
116
+ background: theme(digitv2.lightTheme.background);
117
+ height: 2.4375rem;
118
+ padding: theme(digitv2.spacers.spacer4) 0.625rem;
119
+ gap: 0.625rem;
120
+ }
121
+ .digit-nested-category:not(:first-child) {
122
+ margin-top: theme(digitv2.spacers.spacer4);
123
+ }
124
+ .digit-category-name {
125
+ @extend .typography.heading-s;
126
+ @apply flex items-center overflow-hidden whitespace-no-wrap;
127
+ color: theme(digitv2.lightTheme.text-primary);
128
+ gap: theme(digitv2.spacers.spacer1);
129
+ }
130
+ .digit-dropdown-item {
131
+ @apply flex flex-row;
132
+ padding: 0.625rem;
133
+ gap: 0.625rem;
134
+ min-height: 2.438rem;
135
+ color: theme(digitv2.lightTheme.text-primary) !important;
136
+ .profile-icon-container {
137
+ flex-shrink: 0;
138
+ border-radius: 4.5rem;
139
+ background-size: cover;
140
+ background-position: center;
141
+ }
142
+ .option-des-container {
143
+ @apply flex-col justify-center w-full max-w-full overflow-hidden box-border;
144
+ display: flex !important;
145
+ align-items: center;
146
+ min-height: 1.125rem;
147
+ .icon-option{
148
+ @apply w-full items-center;
149
+ display: flex !important;
150
+ gap:theme(digitv2.spacers.spacer1);
151
+ svg{
152
+ flex-shrink: 0;
153
+ }
154
+ }
155
+ .main-option {
156
+ @extend .typography.body-s;
157
+ @apply whitespace-no-wrap w-full max-w-full overflow-hidden;
158
+ text-overflow: ellipsis;
159
+ &.nestedtextdropdown,
160
+ &.profilenestedtext {
161
+ @extend .typography.body-l;
162
+ color: theme(digitv2.lightTheme.text-secondary);
163
+ }
164
+ }
165
+ .option-description {
166
+ @extend .typography.body-xs;
167
+ color: theme(digitv2.lightTheme.text-secondary);
168
+ }
169
+ }
170
+ &:not(.nesteddropdown, .treedropdown):not(:active):nth-of-type(even) {
171
+ background: theme(digitv2.lightTheme.paper-secondary);
172
+ }
173
+ &.nesteddropdown {
174
+ position: relative;
175
+ height: 2.4375rem;
176
+ &::before {
177
+ content: "";
178
+ position: absolute;
179
+ bottom: 0;
180
+ left: 0.625rem;
181
+ right: 0.635rem;
182
+ border-bottom: 0.063rem solid theme(digitv2.lightTheme.generic-divider);
183
+ }
184
+ &:hover,
185
+ &:active {
186
+ &::before {
187
+ border-bottom: none;
188
+ }
189
+ }
190
+ }
191
+ &:hover,
192
+ &.keyChange{
193
+ background: theme(digitv2.lightTheme.primary-bg) !important;
194
+ border: 0.031rem solid theme(digitv2.lightTheme.primary-1);
195
+ }
196
+ &:active {
197
+ background: theme(digitv2.lightTheme.primary-1) !important;
198
+ span,
199
+ .option-description {
200
+ color: theme(digitv2.lightTheme.paper-primary);
201
+ }
202
+ .svg {
203
+ width: 6.25rem;
204
+ }
205
+ .option-des-container {
206
+ .main-option {
207
+ @extend .typography.heading-s;
208
+ }
209
+ }
210
+ }
211
+ &.nestedtextdropdown {
212
+ min-height: 4.75rem;
213
+ padding: theme(digitv2.spacers.spacer2) 0.635rem theme(digitv2.spacers.spacer2) 0.635rem;
214
+ color: theme(digitv2.lightTheme.text-secondary) !important;
215
+ &:hover {
216
+ border: 0.063rem solid theme(digitv2.lightTheme.primary-1);
217
+ }
218
+ .option-des-container {
219
+ padding-right: 0.125rem !important;
220
+ }
221
+ &:active {
222
+ .option-des-container {
223
+ .main-option {
224
+ @extend .typography.heading-s;
225
+ color: theme(digitv2.lightTheme.paper-primary);
226
+ }
227
+ }
228
+ }
229
+ }
230
+ &.profiledropdown {
231
+ min-height: theme(digitv2.spacers.spacer12);
232
+ padding: theme(digitv2.spacers.spacer2) 0.625rem;
233
+ }
234
+ &.profilenestedtext {
235
+ min-height: 4.75rem;
236
+ padding: theme(digitv2.spacers.spacer2) theme(digitv2.spacers.spacer4);
237
+ gap: theme(digitv2.spacers.spacer4);
238
+ align-items: center;
239
+ color: theme(digitv2.lightTheme.text-secondary) !important;
240
+ &:active {
241
+ .option-des-container {
242
+ .main-option {
243
+ @extend .typography.heading-s;
244
+ color: theme(digitv2.lightTheme.paper-primary);
245
+ }
246
+ }
247
+ }
248
+ }
249
+ &.unsuccessfulresults {
250
+ background-color: theme(digitv2.lightTheme.paper-secondary);
251
+ pointer-events: none;
252
+ span {
253
+ @extend .typography.body-s;
254
+ color: theme(digitv2.lightTheme.text-disabled);
255
+ }
256
+ }
257
+ }
258
+ .digit-dropdown-employee-select-wrap--elipses {
259
+ @apply overflow-hidden whitespace-no-wrap;
260
+ width:calc(100%- (theme(digitv2.spacers.spacer7)));
261
+ text-overflow: ellipsis;
262
+ &.treedropdown,
263
+ &.notSearchable {
264
+ @apply pointer-events-none;
265
+ }
266
+ }
267
+ .digit-dropdown-select-wrap {
268
+ @apply relative bg-white w-full;
269
+ @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
270
+ /* Media query for tablets */
271
+ max-width: 27.5rem;
272
+ }
273
+ @media (max-aspect-ratio: 9/16) {
274
+ /* Media query for mobile */
275
+ max-width: 20.5rem;
276
+ width: 100%;
277
+ }
278
+ @media (min-aspect-ratio: 3/4) {
279
+ /* Media query for desktop */
280
+ max-width: 37.5rem;
281
+ }
282
+ .digit-dropdown-select {
283
+ @extend .light-input-border;
284
+ @apply relative block w-full h-10 bg-white;
285
+ border: 0.063rem solid theme(digitv2.lightTheme.text-secondary);
286
+ input[type="text"] {
287
+ @extend .typography.body-l;
288
+ @apply absolute z-10 h-full outline-none;
289
+ width:calc(100%- (theme(digitv2.spacers.spacer7)));
290
+ background-color: transparent;
291
+ padding-top: theme(digitv2.spacers.spacer2);
292
+ padding-bottom: theme(digitv2.spacers.spacer2);
293
+ padding-left: theme(digitv2.spacers.spacer3);
294
+ color: theme(digitv2.lightTheme.text-primary);
295
+ }
296
+ &.disabled {
297
+ pointer-events: none !important;
298
+ border: 0.063rem solid theme(digitv2.lightTheme.generic-divider) !important;
299
+ color: theme(digitv2.lightTheme.generic-divider) !important;
300
+ }
301
+ p {
302
+ @extend .light-text-color-primary;
303
+ padding-top: 0.563rem;
304
+ @apply text-form-field text-text-primary float-left ml-sm;
305
+ }
306
+ img {
307
+ @apply float-right h-6 w-6 mt-sm mr-sm;
308
+ }
309
+ svg {
310
+ @apply absolute right-0 float-right h-6 w-6 mt-sm mr-sm mb-sm;
311
+ }
312
+ }
313
+ .digit-dropdown-select-active {
314
+ @apply relative block w-full h-10;
315
+ border: 0.063rem solid theme(digitv2.lightTheme.primary-1);
316
+ input[type="text"] {
317
+ @extend .typography.body-l;
318
+ @apply absolute z-10 h-full outline-none;
319
+ width:calc(100%- (theme(digitv2.spacers.spacer7)));
320
+ background-color: transparent;
321
+ padding-top: theme(digitv2.spacers.spacer2);
322
+ padding-bottom: theme(digitv2.spacers.spacer2);
323
+ padding-left: theme(digitv2.spacers.spacer3);
324
+ color: theme(digitv2.lightTheme.text-primary);
325
+ }
326
+ p {
327
+ @extend .light-text-color-primary;
328
+ @apply text-form-field text-text-primary float-left ml-sm;
329
+ }
330
+ p {
331
+ padding-top: 0.563rem;
332
+ }
333
+ img {
334
+ @apply float-right h-6 w-6 mt-sm mr-sm;
335
+ }
336
+ svg {
337
+ @apply absolute right-0 float-right h-6 w-6 mt-sm mr-sm mb-sm;
338
+ }
339
+ }
340
+ .digit-dropdown-select,
341
+ .digit-dropdown-select-active {
342
+ &.treedropdown,
343
+ &.notSearchable {
344
+ @apply cursor-pointer;
345
+ }
346
+ }
347
+ .digit-dropdown-options-card {
348
+ width: 100% !important;
349
+ box-shadow: theme(digitv2.spacers.spacer0) 0.063rem 0.275rem theme(digitv2.spacers.spacer0) #00000026;
350
+ @apply absolute z-20 bg-white overflow-y-auto overflow-x-hidden;
351
+ max-height: 20vmax;
352
+ p {
353
+ @extend .light-text-color-primary;
354
+ padding-top: 0.875rem;
355
+ @apply w-full h-12 pl-sm text-text-primary text-form-field;
356
+ &:hover {
357
+ @apply bg-grey-mid;
358
+ }
359
+ }
360
+ }
361
+ }
362
+
363
+ .cp{
364
+ cursor: pointer;
365
365
  }