@egovernments/digit-ui-components-css 0.2.0 → 0.2.3

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.
@@ -0,0 +1,500 @@
1
+ .digit-search-wrapper {
2
+ @extend .light-text-color-primary;
3
+ @extend .light-paper-primary;
4
+ height: 100%;
5
+ width: 100%;
6
+
7
+ .popup-label {
8
+ display: flex;
9
+ font-size: large;
10
+ @extend .light-text-color-primary;
11
+
12
+ .header {
13
+ @extend .light-text-color-primary;
14
+ width: 100%;
15
+ font-weight: normal;
16
+ font-size: large;
17
+
18
+ .icon {
19
+ @extend .light-primary;
20
+ margin-right: 12px;
21
+ margin-top: 5px;
22
+ }
23
+ }
24
+ }
25
+
26
+ .filter-header-wrapper {
27
+ @extend .light-text-color-primary;
28
+ display: grid;
29
+ grid-template-columns: 15% 1fr 15%;
30
+ height: 3rem;
31
+ margin-bottom: 1rem;
32
+
33
+ .icon-refresh {
34
+ display: flex;
35
+ align-items: center;
36
+ justify-content: center;
37
+ border: 1px solid #00000017;
38
+ cursor: pointer;
39
+
40
+ svg {
41
+ height: 60%;
42
+ width: 40%;
43
+ }
44
+ }
45
+
46
+ .label {
47
+ @extend .light-text-color-primary;
48
+ display: flex;
49
+ align-items: center;
50
+ justify-content: flex-start;
51
+ }
52
+
53
+ @media (min-width: 1024px) {
54
+ .label {
55
+ font-size: 24px;
56
+ }
57
+ }
58
+
59
+ @media (max-width: 1024px) {
60
+ .label {
61
+ font-size: 16px;
62
+ }
63
+ }
64
+
65
+ .icon-filter {
66
+ display: flex;
67
+ align-items: center;
68
+ justify-content: flex-start;
69
+ }
70
+ }
71
+ }
72
+
73
+ @screen sm {
74
+ .digit-search-wrapper {
75
+ .digit-search-field-wrapper {
76
+ display: flex;
77
+ flex-direction: column;
78
+ }
79
+ }
80
+ }
81
+
82
+ .digit-inbox-search-wrapper {
83
+
84
+ .digit-inbox-search-component-wrapper {
85
+ height: 100%;
86
+ width: 100%;
87
+
88
+ .digit-sections-parent {
89
+ height: 100%;
90
+ display: grid;
91
+ grid-template-columns: 20% 1fr;
92
+ gap: 1rem;
93
+
94
+ &.inbox {
95
+ @extend .light-text-color-primary;
96
+
97
+ .links {
98
+ .inbox-links-icon {
99
+ color: theme(colors.primary.main);
100
+ fill: theme(colors.primary.main);
101
+
102
+ path {
103
+ fill: theme(colors.primary.main);
104
+ }
105
+ }
106
+ }
107
+ }
108
+
109
+ &.search {
110
+ display: flex;
111
+ flex-direction: column;
112
+
113
+ .digit-section {
114
+ &.links {
115
+ display: none;
116
+ }
117
+
118
+ &.filter {
119
+ display: none;
120
+ }
121
+ }
122
+
123
+ .digit-search-wrapper {
124
+ @extend .light-paper-primary;
125
+
126
+ .digit-search-field-wrapper.search.custom-both-clear-search {
127
+
128
+ .digit-search-button-wrapper {
129
+ .link-label {
130
+ @extend .light-primary;
131
+ white-space: initial;
132
+ }
133
+
134
+ .submit-bar {
135
+ @extend .light-primary-button;
136
+ width: 60%;
137
+ }
138
+ }
139
+ }
140
+ }
141
+ }
142
+
143
+ &.download {
144
+ grid-template-columns: 100%
145
+ }
146
+
147
+ .digit-section {
148
+ @extend .light-paper-primary;
149
+ @extend .light-text-color-primary;
150
+ min-height: 10rem;
151
+
152
+ &.search-results {
153
+ min-height: 0;
154
+ }
155
+
156
+ &.links {
157
+ height: 100%;
158
+ color: theme(colors.primary.main);
159
+
160
+ .inbox-search-links-component {
161
+ height: 100% !important;
162
+ width: 100%;
163
+ }
164
+ }
165
+
166
+ &.filter {
167
+ height: fit-content;
168
+ }
169
+
170
+ &.tab {
171
+ display: block;
172
+ background-color: #eee;
173
+ box-shadow: none;
174
+
175
+ .digit-search-wrapper {
176
+ box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.16);
177
+ }
178
+ }
179
+ }
180
+ }
181
+ }
182
+ }
183
+
184
+ @screen sm {
185
+ .employee-main-application-details-for-modal {
186
+ padding: 0 !important;
187
+ }
188
+
189
+ .digit-inbox-search-wrapper {
190
+ .digit-inbox-search-component-wrapper {
191
+ .digit-sections-parent {
192
+ display: flex;
193
+ flex-direction: column;
194
+
195
+ .digit-section {
196
+ &.search-results {}
197
+
198
+ &.links {}
199
+
200
+ &.filter {}
201
+
202
+ &.as-modal {
203
+ position: fixed;
204
+ top: 0;
205
+ height: 100vh;
206
+ width: 100vw;
207
+ }
208
+ }
209
+ }
210
+ }
211
+ }
212
+ }
213
+
214
+
215
+
216
+
217
+ .digit-inbox-search-wrapper {
218
+ height: 100%;
219
+
220
+ .digit-inbox-search-component-wrapper {
221
+ height: 100%;
222
+ width: 100%;
223
+
224
+ .digit-sections-parent {
225
+
226
+ height: 100%;
227
+ display: grid;
228
+ grid-template-columns: 20% 1fr;
229
+ gap: theme(digitv2.spacers.spacer6);
230
+
231
+ .digit-section {
232
+
233
+ &.links,
234
+ &.search{
235
+ background-color: theme(digitv2.lightTheme.paper-primary);
236
+ box-shadow: 0rem 0.063rem 0.125rem 0rem #00000029;
237
+ border-radius: theme(digitv2.spacers.spacer1);
238
+ padding: theme(digitv2.spacers.spacer6);
239
+ justify-content: flex-start;
240
+ display: flex;
241
+ align-items: center;
242
+ }
243
+
244
+ &.links{
245
+ align-items: flex-start;
246
+ }
247
+
248
+ &.search {
249
+ .digit-tab-main {
250
+ width: 100%;
251
+ }
252
+
253
+ &.tab{
254
+ background: none !important;
255
+ padding: theme(digitv2.spacers.spacer0);
256
+ box-shadow: none;
257
+
258
+ .digit-search-wrapper{
259
+ padding: theme(digitv2.spacers.spacer6);
260
+ }
261
+ }
262
+ }
263
+
264
+ &.filter{
265
+ .digit-inbox-search-composer-filter-card-content{
266
+ gap:theme(digitv2.spacers.spacer4)
267
+ }
268
+ }
269
+
270
+ .digit-search-wrapper {
271
+ .digit-search-field-wrapper {
272
+ .digit-search-button-wrapper {
273
+ display: flex;
274
+ align-items: center;
275
+ justify-content: flex-end;
276
+ gap: theme(digitv2.spacers.spacer6);
277
+
278
+ &.add-margin{
279
+ margin-top:theme(digitv2.spacers.spacer6);
280
+ }
281
+
282
+ &.inbox {
283
+ grid-column: 3 / -1;
284
+
285
+ &.filter {
286
+ button {
287
+ width: 100%;
288
+ }
289
+ }
290
+ }
291
+
292
+ &.search {
293
+ grid-column: 3 / -1;
294
+ }
295
+ }
296
+ }
297
+
298
+ .digit-filter-header-wrapper{
299
+
300
+ }
301
+ }
302
+ }
303
+ }
304
+ }
305
+ }
306
+
307
+ .digit-inbox-search-composer-header {
308
+ @extend .typography.heading-xl;
309
+ color: theme(digitv2.lightTheme.primary-2);
310
+ margin-bottom: theme(digitv2.spacers.spacer6);
311
+ line-height: normal;
312
+ }
313
+
314
+ .digit-inbox-search-composer-header-action-wrapper{
315
+
316
+ display: flex;
317
+ align-items: center;
318
+ justify-content: space-between;
319
+
320
+ .digit-inbox-search-composer-action{
321
+ margin-bottom: theme(digitv2.spacers.spacer6);
322
+ }
323
+ }
324
+
325
+ .digit-inbox-search-links-container {
326
+ .digit-inbox-search-links-header {
327
+ display: flex;
328
+ gap: theme(digitv2.spacers.spacer2);
329
+ align-items: center;
330
+ margin-bottom: theme(digitv2.spacers.spacer6);
331
+
332
+ .digit-inbox-search-links-header-logo {
333
+ width: theme(digitv2.spacers.spacer8);
334
+ height: theme(digitv2.spacers.spacer8);
335
+ }
336
+
337
+ .digit-inbox-search-links-header-text {
338
+ @extend .typography.heading-m;
339
+ font-family: theme(digitv2.fontFamily.sans);
340
+ font-style: theme(digitv2.fontStyle.normal);
341
+ font-weight: theme(digitv2.fontWeight.bold);
342
+ line-height: theme(digitv2.lineHeight.lineheight1);
343
+
344
+ @media (max-aspect-ratio: 9/16) {
345
+ /* Media query for mobile */
346
+ font-size: theme(digitv2.fontSize.heading-m.mobile);
347
+ }
348
+
349
+ @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
350
+ /* Media query for tablets */
351
+ font-size: theme(digitv2.fontSize.heading-m.tablet);
352
+ }
353
+
354
+ @media (min-aspect-ratio: 3/4) {
355
+ /* Media query for desktop */
356
+ font-size: theme(digitv2.fontSize.heading-m.desktop);
357
+ }
358
+
359
+ color:theme(digitv2.lightTheme.primary-2);
360
+ line-height: normal;
361
+ }
362
+ }
363
+
364
+ .digit-inbox-search-links-contents {
365
+ display: flex;
366
+ flex-direction: column;
367
+ gap: theme(digitv2.spacers.spacer4);
368
+
369
+ a {
370
+ color: theme(digitv2.lightTheme.primary-1) !important;
371
+ }
372
+
373
+ .digit-inbox-search-link {
374
+ @extend .typography.link-L;
375
+ color: theme(digitv2.lightTheme.primary-1);
376
+ }
377
+ }
378
+ }
379
+
380
+ .digit-inbox-search-composer-label-pair {
381
+ margin-bottom: theme(digitv2.spacers.spacer0);
382
+ }
383
+
384
+ .digit-search-wrapper {
385
+ .digit-search-field-wrapper {
386
+ display: grid;
387
+ row-gap: theme(digitv2.spacers.spacer6);
388
+ column-gap: theme(digitv2.spacers.spacer4);
389
+ grid-template-columns: repeat(3, 1fr);
390
+
391
+ &.inbox {
392
+ &.filter {
393
+ display: flex;
394
+ flex-direction: column;
395
+ }
396
+ }
397
+
398
+ }
399
+ }
400
+
401
+ @media screen and (max-width: 426px) {
402
+
403
+ .digit-header-content{
404
+ &.digit-inbox-search-composer-header{
405
+ margin-left: 1rem;
406
+ }
407
+ }
408
+
409
+ .digit-inbox-search-wrapper {
410
+ .digit-inbox-search-component-wrapper {
411
+ .digit-sections-parent {
412
+ display: flex;
413
+ flex-direction: column;
414
+
415
+ &.inbox{
416
+ .searchBox{
417
+ margin: 0rem 1rem;
418
+ }
419
+ }
420
+ }
421
+ }
422
+ }
423
+ }
424
+
425
+ .digit-table-loader{
426
+ height: 31.25rem;
427
+ display: flex;
428
+ align-items: center;
429
+ justify-content: center ;
430
+ }
431
+
432
+ .digit-custom-row-wrapper{
433
+ display: flex;
434
+ flex-direction: column;
435
+ gap: theme(digitv2.spacers.spacer6);
436
+ }
437
+
438
+ .footer-pagination-content {
439
+ &.digit-results-table{
440
+ margin-top:1.5rem;
441
+
442
+ td{
443
+ width: 100%;
444
+
445
+ .pagination{
446
+ border-top: none;
447
+ }
448
+ }
449
+ }
450
+ }
451
+ .digit-results-card-component {
452
+ .digit-results-card-heading-tags-wrapper {
453
+ display: flex;
454
+ align-items: center;
455
+ justify-content: space-between;
456
+
457
+ .digit-results-card-heading {
458
+ color: theme(digitv2.lightTheme.primary-2);
459
+ font-family: theme(digitv2.fontFamily.sans);
460
+ font-style: theme(digitv2.fontStyle.normal);
461
+ font-weight: theme(digitv2.fontWeight.bold);
462
+ line-height: theme(digitv2.lineHeight.lineheight1);
463
+
464
+ @media (max-aspect-ratio: 9/16) {
465
+ /* Media query for mobile */
466
+ font-size: theme(digitv2.fontSize.heading-m.mobile);
467
+ }
468
+
469
+ @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
470
+ /* Media query for tablets */
471
+ font-size: theme(digitv2.fontSize.heading-m.tablet);
472
+ }
473
+
474
+ @media (min-aspect-ratio: 3/4) {
475
+ /* Media query for desktop */
476
+ font-size: theme(digitv2.fontSize.heading-m.desktop);
477
+ }
478
+ }
479
+
480
+ .digit-results-card-tags {
481
+ display: flex;
482
+ gap: theme(digitv2.spacers.spacer4);
483
+ }
484
+ }
485
+ }
486
+
487
+ .pagination {
488
+ &.custom-results {
489
+
490
+ button {
491
+ display: flex;
492
+ align-items: center;
493
+ justify-content: center;
494
+
495
+ svg {
496
+ margin-left: theme(digitv2.spacers.spacer0);
497
+ }
498
+ }
499
+ }
500
+ }
@@ -1 +1,4 @@
1
1
  @import url("./workbench.scss");
2
+ @import url("./boundaryFilter.scss");
3
+ @import url("./inboxsearchcomposer.scss");
4
+ @import url("./reactdatatable.scss");
@@ -0,0 +1,132 @@
1
+
2
+ .digit-global-search-results-table-wrapper{
3
+ display: flex;
4
+ flex-direction: column;
5
+ align-items: flex-end;
6
+ }
7
+
8
+ .digit-global-search-results-table{
9
+ margin-bottom: 1.5rem;
10
+
11
+
12
+ @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
13
+ /* Media query for tablets */
14
+ min-width: 27.5rem;
15
+ }
16
+
17
+ @media (max-aspect-ratio: 9/16) {
18
+ /* Media query for mobile */
19
+ min-width: 100%;
20
+ width: 100%;
21
+ }
22
+
23
+ @media (min-aspect-ratio: 3/4) {
24
+ /* Media query for desktop */
25
+ min-width: 37.5rem;
26
+ }
27
+ }
28
+
29
+ .rdt_TableRow {
30
+ &.selectedRow {
31
+ background-color: #FBEEE8 !important;
32
+ border-bottom-color: theme(digitv2.lightTheme.generic-divider) !important;
33
+ }
34
+ }
35
+
36
+ .rdt_TableCol_Sortable {
37
+ display: flex;
38
+ align-items: center;
39
+ gap: theme(digitv2.spacers.spacer1);
40
+
41
+ &:hover {
42
+ opacity: 1 !important;
43
+ }
44
+
45
+ /* Target the first div directly inside .rdt_TableCol_Sortable */
46
+ >div:first-child {
47
+ white-space: normal;
48
+ }
49
+
50
+ .__rdt_custom_sort_icon__ {
51
+ display: flex;
52
+ align-items: center;
53
+ }
54
+ }
55
+
56
+ .rdt_TableCol {
57
+ border-radius: theme(digitv2.spacers.spacer0) !important;
58
+
59
+ &:last-of-type {
60
+ border-left: none !important;
61
+ }
62
+ }
63
+
64
+ .rdt_TableCol {
65
+ border-radius: theme(digitv2.spacers.spacer0) !important;
66
+
67
+ &:last-of-type {
68
+ border-left: none !important;
69
+ }
70
+ }
71
+
72
+ .sc-fzXfNN.sc-fzXfNO.sc-fzXfNP.iSamCd.rdt_TableCell>div:first-of-type {
73
+ width: 100%;
74
+ }
75
+
76
+ .rdt_TableHead {
77
+ z-index: 13 !important;
78
+ }
79
+
80
+ .rdt_TableHeadRow {
81
+ justify-content: space-between;
82
+ }
83
+
84
+ .rdt_TableRow {
85
+ justify-content: space-between;
86
+ }
87
+
88
+ .digit-data-table::-webkit-scrollbar-track {
89
+ background-color: theme(digitv2.lightTheme.generic-divider);
90
+ border-radius: 0.563rem;
91
+ }
92
+
93
+ .digit-data-table::-webkit-scrollbar-thumb {
94
+ background-color: theme(digitv2.lightTheme.generic-divider);
95
+ border-radius: 0.563rem;
96
+ }
97
+
98
+ .digit-data-table::-webkit-scrollbar {
99
+ width: theme(digitv2.spacers.spacer2);
100
+ background-color: theme(digitv2.lightTheme.generic-divider);
101
+ }
102
+
103
+ .digit-data-table::-webkit-scrollbar:horizontal {
104
+ height: theme(digitv2.spacers.spacer2);
105
+ background-color: theme(digitv2.lightTheme.generic-divider);
106
+ }
107
+
108
+ .digit-data-table-select-checkbox {
109
+ margin-bottom: theme(digitv2.spacers.spacer0);
110
+ }
111
+
112
+ .rdt_Pagination {
113
+ margin-top: -1rem;
114
+ border: 0.063rem solid #d6d5d4;
115
+ border-top: theme(digitv2.spacers.spacer0);
116
+ }
117
+
118
+
119
+ .rdt_TableHeadRow {
120
+ justify-content: space-between;
121
+ }
122
+
123
+ .rdt_TableRow {
124
+ justify-content: space-between;
125
+ }
126
+
127
+ .digit-dataTable-actions-container{
128
+ display: flex;
129
+ gap:theme(digitv2.spacers.spacer2);
130
+ align-items: center;
131
+ flex-wrap: wrap;
132
+ }
@@ -549,7 +549,7 @@ a{
549
549
  padding-left:0.8rem ;
550
550
  padding-right:0.8rem ;
551
551
  &-row-mdms:hover{
552
- background-color: theme(digitv2.lightTheme.primary-orangebg); /* Change this to the desired hover color */
552
+ background-color: theme(digitv2.lightTheme.primary-bg); /* Change this to the desired hover color */
553
553
  cursor: pointer;
554
554
  }
555
555
  }
package/src/index.scss CHANGED
@@ -10,6 +10,7 @@
10
10
 
11
11
  @import "react-date-range/dist/styles.css";
12
12
  @import "react-date-range/dist/theme/default.css";
13
+ @import "react-datepicker/dist/react-datepicker.css";
13
14
 
14
15
  @import "./pages/employee/index.scss";
15
16
  @import "./pages/employee/login.scss";