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

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.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@egovernments/digit-ui-components-css",
3
- "version": "0.2.0",
3
+ "version": "0.2.1",
4
4
  "license": "MIT",
5
5
  "main": "dist/index.css",
6
6
  "author": "Jagankumar <jagan.kumar@egovernments.org>",
@@ -337,6 +337,11 @@
337
337
  min-width: 15rem;
338
338
  background-color: theme(digitv2.lightTheme.primary-1);
339
339
 
340
+ &.digit-formcomposer-submitbar{
341
+ width: fit-content;
342
+ margin-left: auto;
343
+ }
344
+
340
345
  h2 {
341
346
  @extend .typography.button.large;
342
347
  @apply text-white;
@@ -5,6 +5,7 @@
5
5
  flex-direction: column;
6
6
  justify-content: flex-start;
7
7
  gap: theme(digitv2.spacers.spacer1);
8
+ width: 100%;
8
9
  }
9
10
 
10
11
  .digit-header-content {
@@ -87,6 +88,10 @@
87
88
  }
88
89
  }
89
90
  }
91
+
92
+ &.search-screen{
93
+ width: 100%;
94
+ }
90
95
  }
91
96
  }
92
97
 
@@ -57,6 +57,14 @@
57
57
  width: 100%;
58
58
  }
59
59
  }
60
+
61
+ &.removeMargin{
62
+ margin-bottom: theme(digitv2.spacers.spacer0);
63
+ }
64
+
65
+ &.digit-formcomposer-fieldpair{
66
+ width: 100%;
67
+ }
60
68
  }
61
69
 
62
70
  @screen dt {
@@ -67,7 +67,7 @@
67
67
  }
68
68
 
69
69
  .digit-multiselectdropdown-master-active{
70
- &.serachable{
70
+ &.searchable{
71
71
  input[type="text"]{
72
72
  opacity: 1;
73
73
  width: calc(100%-24px);
@@ -113,7 +113,7 @@
113
113
  }
114
114
  .digit-nested-category {
115
115
  @apply flex items-center flex-shrink-0;
116
- background: theme(digitv2.lightTheme.background);
116
+ background: theme(digitv2.lightTheme.generic-background);
117
117
  height: 2.4375rem;
118
118
  padding: theme(digitv2.spacers.spacer4) 0.625rem;
119
119
  gap: 0.625rem;
@@ -40,7 +40,7 @@
40
40
  height: 3.125rem;
41
41
  text-align: center;
42
42
  color: theme(digitv2.lightTheme.text-primary);
43
- border: 0.063rem solid theme(digitv2.lightTheme.input-border);
43
+ border: 0.063rem solid theme(digitv2.lightTheme.generic-inputborder);
44
44
  outline: none;
45
45
  transition: border-color 0.3s ease-in-out;
46
46
  font-family: theme(digitv2.fontFamily.sans);
@@ -164,7 +164,7 @@
164
164
  }
165
165
  .digit-nested-category {
166
166
  @apply flex items-center flex-shrink-0;
167
- background: theme(digitv2.lightTheme.background);
167
+ background: theme(digitv2.lightTheme.generic-background);
168
168
  height: 2.4375rem;
169
169
  padding: theme(digitv2.spacers.spacer4) 0.625rem;
170
170
  gap: 0.625rem;
@@ -51,7 +51,7 @@
51
51
  }
52
52
 
53
53
  .timeline-divider {
54
- border: 0.063rem solid theme(digitv2.lightTheme.divider);
54
+ border: 0.063rem solid theme(digitv2.lightTheme.generic-divider);
55
55
  }
56
56
 
57
57
  .timeline-label {
@@ -60,14 +60,14 @@
60
60
  /* important to be remove after fixing the components */
61
61
  .light {
62
62
  &-primary {
63
- color: theme(digitv2.lightTheme.primary-orange) !important;
63
+ color: theme(digitv2.lightTheme.primary-1) !important;
64
64
 
65
65
  &-button {
66
- background-color: theme(digitv2.lightTheme.primary-orange);
66
+ background-color: theme(digitv2.lightTheme.primary-1);
67
67
  }
68
68
 
69
69
  &-bg {
70
- background-color: theme(digitv2.lightTheme.primary-orangebg);
70
+ background-color: theme(digitv2.lightTheme.primary-bg);
71
71
  }
72
72
  }
73
73
 
@@ -120,7 +120,7 @@
120
120
  }
121
121
 
122
122
  &-header-sidenav {
123
- color: theme(digitv2.lightTheme.primary-bluegray);
123
+ color: theme(digitv2.lightTheme.primary-2);
124
124
  }
125
125
 
126
126
  &-input-border {
@@ -0,0 +1,378 @@
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
+
254
+ &.filter{
255
+ .digit-inbox-search-composer-filter-card-content{
256
+ gap:theme(digitv2.spacers.spacer4)
257
+ }
258
+ }
259
+
260
+ .digit-search-wrapper {
261
+ .digit-search-field-wrapper {
262
+ .digit-search-button-wrapper {
263
+ display: flex;
264
+ align-items: center;
265
+ justify-content: flex-end;
266
+ gap: theme(digitv2.spacers.spacer6);
267
+
268
+ &.add-margin{
269
+ margin-top:theme(digitv2.spacers.spacer6);
270
+ }
271
+
272
+ &.inbox {
273
+ grid-column: 3 / -1;
274
+
275
+ &.filter {
276
+ button {
277
+ width: 100%;
278
+ }
279
+ }
280
+ }
281
+
282
+ &.search {
283
+ grid-column: 3 / -1;
284
+ }
285
+ }
286
+ }
287
+
288
+ .digit-filter-header-wrapper{
289
+
290
+ }
291
+ }
292
+ }
293
+ }
294
+ }
295
+ }
296
+
297
+ .digit-inbox-search-composer-header {
298
+ @extend .typography.heading-xl;
299
+ color: theme(digitv2.lightTheme.primary-2);
300
+ margin-bottom: theme(digitv2.spacers.spacer6);
301
+ line-height: normal;
302
+ }
303
+
304
+ .digit-inbox-search-links-container {
305
+ .digit-inbox-search-links-header {
306
+ display: flex;
307
+ gap: theme(digitv2.spacers.spacer2);
308
+ align-items: center;
309
+ margin-bottom: theme(digitv2.spacers.spacer6);
310
+
311
+ .digit-inbox-search-links-header-logo {
312
+ width: theme(digitv2.spacers.spacer8);
313
+ height: theme(digitv2.spacers.spacer8);
314
+ }
315
+
316
+ .digit-inbox-search-links-header-text {
317
+ @extend .typography.heading-m;
318
+ font-family: theme(digitv2.fontFamily.sans);
319
+ font-style: theme(digitv2.fontStyle.normal);
320
+ font-weight: theme(digitv2.fontWeight.bold);
321
+ line-height: theme(digitv2.lineHeight.lineheight1);
322
+
323
+ @media (max-aspect-ratio: 9/16) {
324
+ /* Media query for mobile */
325
+ font-size: theme(digitv2.fontSize.heading-m.mobile);
326
+ }
327
+
328
+ @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
329
+ /* Media query for tablets */
330
+ font-size: theme(digitv2.fontSize.heading-m.tablet);
331
+ }
332
+
333
+ @media (min-aspect-ratio: 3/4) {
334
+ /* Media query for desktop */
335
+ font-size: theme(digitv2.fontSize.heading-m.desktop);
336
+ }
337
+
338
+ color:theme(digitv2.lightTheme.primary-2);
339
+ line-height: normal;
340
+ }
341
+ }
342
+
343
+ .digit-inbox-search-links-contents {
344
+ display: flex;
345
+ flex-direction: column;
346
+ gap: theme(digitv2.spacers.spacer4);
347
+
348
+ a {
349
+ color: theme(digitv2.lightTheme.primary-1) !important;
350
+ }
351
+
352
+ .digit-inbox-search-link {
353
+ @extend .typography.link-L;
354
+ color: theme(digitv2.lightTheme.primary-1);
355
+ }
356
+ }
357
+ }
358
+
359
+ .digit-inbox-search-composer-label-pair {
360
+ margin-bottom: theme(digitv2.spacers.spacer0);
361
+ }
362
+
363
+ .digit-search-wrapper {
364
+ .digit-search-field-wrapper {
365
+ display: grid;
366
+ row-gap: theme(digitv2.spacers.spacer6);
367
+ column-gap: theme(digitv2.spacers.spacer4);
368
+ grid-template-columns: repeat(3, 1fr);
369
+
370
+ &.inbox {
371
+ &.filter {
372
+ display: flex;
373
+ flex-direction: column;
374
+ }
375
+ }
376
+
377
+ }
378
+ }
@@ -1 +1,3 @@
1
1
  @import url("./workbench.scss");
2
+ @import url("./inboxsearchcomposer.scss");
3
+ @import url("./reactdatatable.scss");
@@ -0,0 +1,132 @@
1
+
2
+ .digit-global-serach-results-table-wrapper{
3
+ display: flex;
4
+ flex-direction: column;
5
+ align-items: flex-end;
6
+ }
7
+
8
+ .digit-global-serach-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
  }