@egovernments/digit-ui-components-css 0.0.2-beta.22 → 0.0.2-beta.24

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 (9) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/dist/index.css +260 -133
  3. package/dist/index.min.css +2 -2
  4. package/package.json +1 -1
  5. package/src/digitv2/components/accordionV2.scss +105 -0
  6. package/src/digitv2/components/sidebarV2.scss +82 -75
  7. package/src/digitv2/components/switchV2.scss +4 -0
  8. package/src/digitv2/index.scss +1 -0
  9. package/src/digitv2/pages/employee/workbench.scss +9 -9
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@egovernments/digit-ui-components-css",
3
- "version": "0.0.2-beta.22",
3
+ "version": "0.0.2-beta.24",
4
4
  "license": "MIT",
5
5
  "main": "dist/index.css",
6
6
  "author": "Jagankumar <jagan.kumar@egovernments.org>",
package/src/digitv2/components/accordionV2.scss ADDED
@@ -0,0 +1,105 @@
1
+ .digit-accordion-header {
2
+ display: flex;
3
+ align-items: center;
4
+ cursor: pointer;
5
+ background-color: transparent;
6
+ gap: theme(digitv2.spacers.spacer5);
7
+
8
+ @media (max-aspect-ratio: 9/16) {
9
+ padding: theme(digitv2.spacers.spacer4);
10
+ }
11
+
12
+ @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
13
+ padding: theme(digitv2.spacers.spacer5);
14
+ }
15
+
16
+ @media (min-aspect-ratio: 3/4) {
17
+ padding: theme(digitv2.spacers.spacer6);
18
+ }
19
+
20
+ }
21
+
22
+ .digit-accordion-icon {
23
+ width: theme(digitv2.spacers.spacer6);
24
+ height: theme(digitv2.spacers.spacer6);
25
+ flex-shrink: 0;
26
+ }
27
+
28
+ .digit-accordion-number {
29
+ @extend .typography.heading-s;
30
+ color: theme(digitv2.lightTheme.text-primary);
31
+ min-width: theme(digitv2.spacers.spacer6);
32
+ height: theme(digitv2.spacers.spacer6);
33
+ display: flex;
34
+ align-items: center;
35
+ }
36
+
37
+ .digit-accordion-title {
38
+ @extend .typography.heading-s;
39
+ color: theme(digitv2.lightTheme.text-primary);
40
+ flex-grow: 1;
41
+ }
42
+
43
+ .digit-accordion-toggle {
44
+ width: theme(digitv2.spacers.spacer8);
45
+ height: theme(digitv2.spacers.spacer8);
46
+ flex-shrink: 0;
47
+ }
48
+
49
+ .digit-accordion-content {
50
+ background-color: transparent;
51
+ display: flex;
52
+ gap:0.625rem;
53
+ flex-direction: column;
54
+ @extend .typography.body-s;
55
+ font-family: theme(digitv2.fontFamily.sans);
56
+ font-style: theme(digitv2.fontStyle.normal);
57
+ font-weight: theme(digitv2.fontWeight.regular);
58
+ line-height: theme(digitv2.lineHeight.lineheight2);
59
+ @media (max-aspect-ratio: 9/16) {
60
+ /* Media query for mobile */
61
+ font-size: theme(digitv2.fontSize.body-s.mobile);
62
+ padding: theme(digitv2.spacers.spacer4);
63
+ }
64
+
65
+ @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
66
+ /* Media query for tablets */
67
+ font-size: theme(digitv2.fontSize.body-s.tablet);
68
+ padding: theme(digitv2.spacers.spacer5);
69
+ }
70
+
71
+ @media (min-aspect-ratio: 3/4) {
72
+ /* Media query for desktop */
73
+ font-size: theme(digitv2.fontSize.body-s.desktop);
74
+ padding: theme(digitv2.spacers.spacer6);
75
+ }
76
+ color: theme(digitv2.lightTheme.text-primary);
77
+ }
78
+
79
+
80
+ .digit-accordion-container {
81
+
82
+ &.border{
83
+ border: 0.063rem solid theme(digitv2.lightTheme.generic-divider);
84
+ }
85
+
86
+ &.borderRadius{
87
+ border-radius: theme(digitv2.spacers.spacer1);
88
+ }
89
+
90
+ &.divider{
91
+ .digit-accordion-content{
92
+ border-top: 1px solid theme(digitv2.lightTheme.generic-divider);
93
+ }
94
+ }
95
+
96
+ &.no-divider{
97
+ .digit-accordion-header{
98
+ padding-bottom: theme(digitv2.spacers.spacer0);
99
+ }
100
+ }
101
+
102
+ &.cardBg{
103
+ background-color: theme(digitv2.lightTheme.paper-secondary);
104
+ }
105
+ }
package/src/digitv2/components/sidebarV2.scss CHANGED
@@ -1,4 +1,4 @@
1
- .sidebar {
1
+ .digit-sidebar {
2
2
  position: fixed;
3
3
  height: 100%;
4
4
  background-color: theme(digitv2.lightTheme.primary-2);
@@ -19,13 +19,13 @@
19
19
  }
20
20
 
21
21
 
22
- .sidebar-search-container {
22
+ .digit-sidebar-search-container {
23
23
  height: 4.5rem;
24
24
  min-width: 15rem;
25
25
  width: auto;
26
26
  padding: theme(digitv2.spacers.spacer4) !important;
27
27
 
28
- .sidebar-search {
28
+ .digit-sidebar-search {
29
29
  height: theme(digitv2.spacers.spacer10) !important;
30
30
  min-width: 13rem;
31
31
 
@@ -65,8 +65,8 @@
65
65
  }
66
66
  }
67
67
 
68
- .sidebar-search-container.light {
69
- .sidebar-search {
68
+ .digit-sidebar-search-container.light {
69
+ .digit-sidebar-search {
70
70
  input {
71
71
  background-color: theme(digitv2.lightTheme.paper-primary);
72
72
  border: 0.063rem solid theme(digitv2.lightTheme.generic-divider);
@@ -97,13 +97,13 @@
97
97
 
98
98
  }
99
99
 
100
- .sidebar-items-container {
100
+ .digit-sidebar-items-container {
101
101
  flex: 1;
102
102
  overflow-y: auto;
103
103
  overflow-x: hidden;
104
104
  }
105
105
 
106
- .sidebar-item {
106
+ .digit-sidebar-item {
107
107
  display: flex;
108
108
  align-items: center;
109
109
  padding: theme(digitv2.spacers.spacer4);
@@ -113,40 +113,44 @@
113
113
  cursor: pointer;
114
114
  outline: none;
115
115
  position: relative;
116
+
117
+ &.collapsed{
118
+ justify-content: center;
119
+ }
116
120
  }
117
121
 
118
- .sidebar-items-container::-webkit-scrollbar {
122
+ .digit-sidebar-items-container::-webkit-scrollbar {
119
123
  width: 0.375rem;
120
124
  }
121
125
 
122
- .sidebar-items-container.dark::-webkit-scrollbar-track {
126
+ .digit-sidebar-items-container.dark::-webkit-scrollbar-track {
123
127
  background: theme(digitv2.lightTheme.primary-2);
124
128
  }
125
129
 
126
- .sidebar-items-container.dark::-webkit-scrollbar-thumb {
130
+ .digit-sidebar-items-container.dark::-webkit-scrollbar-thumb {
127
131
  background-color: #89ABBA;
128
132
  border-radius: 0.563rem;
129
133
  }
130
134
 
131
- .sidebar-items-container.dark::-webkit-scrollbar-thumb:hover {
135
+ .digit-sidebar-items-container.dark::-webkit-scrollbar-thumb:hover {
132
136
  background-color: #6C98A8;
133
137
  }
134
138
 
135
- .sidebar-items-container.dark::-webkit-scrollbar-thumb:active {
139
+ .digit-sidebar-items-container.dark::-webkit-scrollbar-thumb:active {
136
140
  background-color: #56818E;
137
141
  }
138
142
 
139
- .sidebar-items-container.light::-webkit-scrollbar {
143
+ .digit-sidebar-items-container.light::-webkit-scrollbar {
140
144
  width: 0.375rem;
141
145
  background-color: theme(digitv2.lightTheme.generic-background);
142
146
  }
143
147
 
144
- .sidebar-items-container.light::-webkit-scrollbar-track {
148
+ .digit-sidebar-items-container.light::-webkit-scrollbar-track {
145
149
  background-color: theme(digitv2.lightTheme.generic-background);
146
150
  border-radius: 0.563rem;
147
151
  }
148
152
 
149
- .sidebar-items-container.light::-webkit-scrollbar-thumb {
153
+ .digit-sidebar-items-container.light::-webkit-scrollbar-thumb {
150
154
  background-color: theme(digitv2.lightTheme.generic-divider);
151
155
  border-radius: 0.563rem;
152
156
  }
@@ -189,24 +193,24 @@
189
193
  margin-left: auto !important;
190
194
  }
191
195
 
192
- .sidebar-item:hover {
196
+ .digit-sidebar-item:hover {
193
197
  background-color: #FFFFFF4D;
194
198
  }
195
199
 
196
- .sidebar-item.light:hover {
200
+ .digit-sidebar-item.light:hover {
197
201
  background-color: theme(digitv2.lightTheme.generic-background);
198
202
  }
199
203
 
200
- .sidebar-item.light {
204
+ .digit-sidebar-item.light {
201
205
  .item-label {
202
206
  color: theme(digitv2.lightTheme.primary-2);
203
207
  }
204
208
  }
205
209
 
206
- .sidebar-item:active,
207
- .sidebar-item.selected,
208
- .sidebar-item:active:hover,
209
- .sidebar-item.selected:hover {
210
+ .digit-sidebar-item:active,
211
+ .digit-sidebar-item.selected,
212
+ .digit-sidebar-item:active:hover,
213
+ .digit-sidebar-item.selected:hover {
210
214
  background: theme(digitv2.lightTheme.primary-1);
211
215
 
212
216
  .item-label {
@@ -215,10 +219,10 @@
215
219
  }
216
220
  }
217
221
 
218
- .sidebar-item.selected::before,
219
- .sidebar-item:active::before,
220
- .sidebar-item:active:hover::before,
221
- .sidebar-item.selected:hover::before {
222
+ .digit-sidebar-item.selected::before,
223
+ .digit-sidebar-item:active::before,
224
+ .digit-sidebar-item:active:hover::before,
225
+ .digit-sidebar-item.selected:hover::before {
222
226
  content: '';
223
227
  position: absolute;
224
228
  top: 0.062rem;
@@ -230,17 +234,17 @@
230
234
  border-bottom-right-radius: theme(digitv2.spacers.spacer1);
231
235
  }
232
236
 
233
- .sidebar-item.secondary:active,
234
- .sidebar-item.secondary.selected,
235
- .sidebar-item.secondary:active:hover,
236
- .sidebar-item.secondary.selected:hover {
237
+ .digit-sidebar-item.secondary:active,
238
+ .digit-sidebar-item.secondary.selected,
239
+ .digit-sidebar-item.secondary:active:hover,
240
+ .digit-sidebar-item.secondary.selected:hover {
237
241
  background: #FFFFFF4D;
238
242
  }
239
243
 
240
- .sidebar-item.light.secondary:active,
241
- .sidebar-item.light.secondary.selected,
242
- .sidebar-item.light.secondary:active:hover,
243
- .sidebar-item.light.secondary.selected:hover {
244
+ .digit-sidebar-item.light.secondary:active,
245
+ .digit-sidebar-item.light.secondary.selected,
246
+ .digit-sidebar-item.light.secondary:active:hover,
247
+ .digit-sidebar-item.light.secondary.selected:hover {
244
248
  background: #c84c0e1a;
245
249
 
246
250
  .item-label {
@@ -248,10 +252,10 @@
248
252
  }
249
253
  }
250
254
 
251
- .sidebar-item.light.secondary.selected::before,
252
- .sidebar-item.light.secondary:active::before,
253
- .sidebar-item.light.secondary:active:hover::before,
254
- .sidebar-item.light.secondary.selected:hover::before {
255
+ .digit-sidebar-item.light.secondary.selected::before,
256
+ .digit-sidebar-item.light.secondary:active::before,
257
+ .digit-sidebar-item.light.secondary:active:hover::before,
258
+ .digit-sidebar-item.light.secondary.selected:hover::before {
255
259
  content: '';
256
260
  position: absolute;
257
261
  top: 0.063rem;
@@ -263,16 +267,16 @@
263
267
  border-bottom-right-radius: theme(digitv2.spacers.spacer1);
264
268
  }
265
269
 
266
- .sidebar.hovered .item-label {
270
+ .digit-sidebar.hovered .item-label {
267
271
  opacity: 1;
268
272
  }
269
273
 
270
- .sidebar-children {
274
+ .digit-sidebar-children {
271
275
  margin-left: theme(digitv2.spacers.spacer6);
272
276
  border-left: 0.031rem solid theme(digitv2.lightTheme.text-disabled);
273
277
  }
274
278
 
275
- .sidebar-bottom {
279
+ .digit-sidebar-bottom {
276
280
  background-color: #FFFFFF33;
277
281
  z-index: 5;
278
282
  padding: theme(digitv2.spacers.spacer4);
@@ -282,7 +286,7 @@
282
286
  padding-right: theme(digitv2.spacers.spacer0);
283
287
  padding-left: theme(digitv2.spacers.spacer0);
284
288
 
285
- .sidebar-bottom-item {
289
+ .digit-sidebar-bottom-item {
286
290
  display: flex;
287
291
  align-items: center;
288
292
  gap: theme(digitv2.spacers.spacer2);
@@ -298,7 +302,7 @@
298
302
  margin-left: theme(digitv2.spacers.spacer6);
299
303
  }
300
304
 
301
- .sidebar-bottom-item-text {
305
+ .digit-sidebar-bottom-item-text {
302
306
 
303
307
  font-family: theme(digitv2.fontFamily.sans);
304
308
  font-style: theme(digitv2.fontStyle.normal);
@@ -324,14 +328,14 @@
324
328
  }
325
329
  }
326
330
 
327
- &.light .sidebar-bottom-item .sidebar-bottom-item-text {
331
+ &.light .digit-sidebar-bottom-item .digit-sidebar-bottom-item-text {
328
332
  color: theme(digitv2.lightTheme.primary-2);
329
333
  }
330
334
 
331
335
  &.light {
332
336
  border-top: 0.063rem solid theme(digitv2.lightTheme.generic-divider);
333
337
 
334
- .sidebar-bottom-item:hover {
338
+ .digit-sidebar-bottom-item:hover {
335
339
  background-color: theme(digitv2.lightTheme.generic-background);
336
340
  }
337
341
 
@@ -344,18 +348,21 @@
344
348
  }
345
349
  }
346
350
 
347
- .sidebar {
351
+ .digit-sidebar {
348
352
  &.collapsed {
349
353
 
350
354
  padding-left: theme(digitv2.spacers.spacer0);
351
355
  padding-right: theme(digitv2.spacers.spacer0);
352
356
 
353
- .sidebar-search-container-collapsed {
357
+ .digit-sidebar-search-container-collapsed {
354
358
  padding-left: theme(digitv2.spacers.spacer3);
355
359
  padding-right: theme(digitv2.spacers.spacer3);
360
+ display: flex;
361
+ align-items: center;
362
+ justify-content: center;
356
363
  }
357
364
 
358
- .sidebar-items-container {
365
+ .digit-sidebar-items-container {
359
366
 
360
367
  display: flex !important;
361
368
  flex-direction: column;
@@ -369,7 +376,7 @@
369
376
  align-items: center;
370
377
  justify-content: center;
371
378
 
372
- .sidebar-item {
379
+ .digit-sidebar-item {
373
380
  padding: theme(digitv2.spacers.spacer0);
374
381
  width: theme(digitv2.spacers.spacer6);
375
382
  height: 100%;
@@ -385,20 +392,20 @@
385
392
  }
386
393
  }
387
394
 
388
- .sidebar-item:active,
389
- .sidebar-item.selected,
390
- .sidebar-item.selectedAsParent {
395
+ .digit-sidebar-item:active,
396
+ .digit-sidebar-item.selected,
397
+ .digit-sidebar-item.selectedAsParent {
391
398
  background: theme(digitv2.lightTheme.primary-1);
392
399
  display: flex;
393
400
  align-items: center;
394
401
  justify-content: center;
395
402
  }
396
403
 
397
- .sidebar-item.selected::before,
398
- .sidebar-item:active::before,
399
- .sidebar-item.selectedAsParent::before,
400
- .sidebar-item:active:hover::before,
401
- .sidebar-item.selected:hover::before {
404
+ .digit-sidebar-item.selected::before,
405
+ .digit-sidebar-item:active::before,
406
+ .digit-sidebar-item.selectedAsParent::before,
407
+ .digit-sidebar-item:active:hover::before,
408
+ .digit-sidebar-item.selected:hover::before {
402
409
  content: '';
403
410
  position: absolute;
404
411
  top: 0.062rem;
@@ -410,21 +417,21 @@
410
417
  border-bottom-right-radius: theme(digitv2.spacers.spacer1);
411
418
  }
412
419
 
413
- .sidebar-item.secondary:active,
414
- .sidebar-item.secondary.selected,
415
- .sidebar-item.secondary:active:hover,
416
- .sidebar-item.secondary.selected:hover ,
417
- .sidebar-item.secondary.selectedAsParent,
418
- .sidebar-item.secondary.selectedAsParent:hover{
420
+ .digit-sidebar-item.secondary:active,
421
+ .digit-sidebar-item.secondary.selected,
422
+ .digit-sidebar-item.secondary:active:hover,
423
+ .digit-sidebar-item.secondary.selected:hover ,
424
+ .digit-sidebar-item.secondary.selectedAsParent,
425
+ .digit-sidebar-item.secondary.selectedAsParent:hover{
419
426
  background: #FFFFFF4D;
420
427
  }
421
428
 
422
- .sidebar-item.light.secondary:active,
423
- .sidebar-item.light.secondary.selected,
424
- .sidebar-item.light.secondary:active:hover,
425
- .sidebar-item.light.secondary.selected:hover,
426
- .sidebar-item.light.secondary.selectedAsParent,
427
- .sidebar-item.light.secondary.selectedAsParent:hover {
429
+ .digit-sidebar-item.light.secondary:active,
430
+ .digit-sidebar-item.light.secondary.selected,
431
+ .digit-sidebar-item.light.secondary:active:hover,
432
+ .digit-sidebar-item.light.secondary.selected:hover,
433
+ .digit-sidebar-item.light.secondary.selectedAsParent,
434
+ .digit-sidebar-item.light.secondary.selectedAsParent:hover {
428
435
  background: #c84c0e1a;
429
436
 
430
437
  .item-label {
@@ -432,12 +439,12 @@
432
439
  }
433
440
  }
434
441
 
435
- .sidebar-item.light.secondary.selected::before,
436
- .sidebar-item.light.secondary:active::before,
437
- .sidebar-item.light.secondary:active:hover::before,
438
- .sidebar-item.light.secondary.selected:hover::before,
439
- .sidebar-item.light.secondary.selectedAsParent::before,
440
- .sidebar-item.light.secondary.selectedAsParent:hover::before{
442
+ .digit-sidebar-item.light.secondary.selected::before,
443
+ .digit-sidebar-item.light.secondary:active::before,
444
+ .digit-sidebar-item.light.secondary:active:hover::before,
445
+ .digit-sidebar-item.light.secondary.selected:hover::before,
446
+ .digit-sidebar-item.light.secondary.selectedAsParent::before,
447
+ .digit-sidebar-item.light.secondary.selectedAsParent:hover::before{
441
448
  content: '';
442
449
  position: absolute;
443
450
  top: 0.063rem;
package/src/digitv2/components/switchV2.scss CHANGED
@@ -21,6 +21,10 @@
21
21
  &:focus-within{
22
22
  outline: none;
23
23
  }
24
+
25
+ &.switch-disabled{
26
+ background-color: theme(digitv2.lightTheme.text-disabled);
27
+ }
24
28
  }
25
29
 
26
30
  .digit-switch.checked {
package/src/digitv2/index.scss CHANGED
@@ -1,3 +1,4 @@
1
+ @import url("./components/accordionV2.scss");
1
2
  @import url("./components/backLinkV2.scss");
2
3
  @import url("./components/bodyContainerV2.scss");
3
4
  @import url("./components/bottomSheetV2.scss");
package/src/digitv2/pages/employee/workbench.scss CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  .bread-crumb.workbench-bredcrumb{
4
4
  a{
5
- color: theme(digitv2.lightTheme.primary-orange);
5
+ color: theme(digitv2.lightTheme.primary-1);
6
6
  }
7
7
  }
8
8
  .workbench{
@@ -142,7 +142,7 @@ a{
142
142
  }
143
143
 
144
144
  .digit__control--is-focused {
145
- border-color: theme(digitv2.lightTheme.primary-orange) !important;
145
+ border-color: theme(digitv2.lightTheme.primary-1) !important;
146
146
  box-shadow: none;
147
147
  box-sizing: unset;
148
148
  @apply outline-none;
@@ -158,10 +158,10 @@ a{
158
158
  }
159
159
 
160
160
  .digit__control:focus {
161
- border-color: theme(digitv2.lightTheme.primary-orange);
161
+ border-color: theme(digitv2.lightTheme.primary-1);
162
162
 
163
163
  .digit__value-container:focus {
164
- border-color: theme(digitv2.lightTheme.primary-orange);
164
+ border-color: theme(digitv2.lightTheme.primary-1);
165
165
 
166
166
  }
167
167
  }
@@ -169,7 +169,7 @@ a{
169
169
 
170
170
  &.form-select:focus {
171
171
  @apply outline-none;
172
- border-color: theme(digitv2.lightTheme.primary-orange);
172
+ border-color: theme(digitv2.lightTheme.primary-1);
173
173
 
174
174
  }
175
175
  }
@@ -182,7 +182,7 @@ a{
182
182
  .form-control:focus {
183
183
 
184
184
  @apply outline-none;
185
- border-color: theme(digitv2.lightTheme.primary-orange);
185
+ border-color: theme(digitv2.lightTheme.primary-1);
186
186
  }
187
187
 
188
188
  textarea.form-control {
@@ -236,7 +236,7 @@ a{
236
236
  }
237
237
 
238
238
  input[type="checkbox"]#digit_root_active {
239
- accent-color: theme(digitv2.lightTheme.primary-orange);
239
+ accent-color: theme(digitv2.lightTheme.primary-1);
240
240
  }
241
241
 
242
242
  input:checked,
@@ -573,11 +573,11 @@ a{
573
573
  text-decoration: none;
574
574
  .browse-text {
575
575
  text-decoration: none;
576
- color: #F47738;
576
+ color: theme(digitv2.lightTheme.primary-1);
577
577
  transition: color 0.3s;
578
578
  }
579
579
  .browse-text:hover {
580
- color: #F47738;
580
+ color: theme(digitv2.lightTheme.primary-1);
581
581
  text-decoration: underline;
582
582
  cursor: pointer;
583
583
  }