@egovernments/digit-ui-components-css 0.0.2-beta.37 → 0.0.2-beta.39

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 (11) hide show
  1. package/dist/index.css +217 -20
  2. package/dist/index.min.css +2 -2
  3. package/package.json +1 -1
  4. package/src/digitv2/components/bottomSheetV2.scss +8 -1
  5. package/src/digitv2/components/buttonsV2.scss +7 -0
  6. package/src/digitv2/components/chipV2.scss +15 -1
  7. package/src/digitv2/components/fieldV1.scss +7 -0
  8. package/src/digitv2/components/headerdropdownV2.scss +20 -0
  9. package/src/digitv2/components/multiSelectDropdownV2.scss +54 -2
  10. package/src/digitv2/components/selectDropdownV2.scss +135 -5
  11. package/src/digitv2/components/textInputV2.scss +2 -2
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@egovernments/digit-ui-components-css",
3
- "version": "0.0.2-beta.37",
3
+ "version": "0.0.2-beta.39",
4
4
  "license": "MIT",
5
5
  "main": "dist/index.css",
6
6
  "author": "Jagankumar <jagan.kumar@egovernments.org>",
package/src/digitv2/components/bottomSheetV2.scss CHANGED
@@ -24,7 +24,6 @@
24
24
 
25
25
  .digit-bottom-sheet-header {
26
26
  display: flex;
27
- align-items: center;
28
27
  justify-content: center;
29
28
  height: theme(digitv2.spacers.spacer10);
30
29
 
@@ -95,6 +94,14 @@
95
94
  flex: 1;
96
95
  }
97
96
  }
97
+
98
+ @media (max-aspect-ratio: 9/16) {
99
+ justify-content: flex-start;
100
+
101
+ button {
102
+ flex: 1;
103
+ }
104
+ }
98
105
  }
99
106
 
100
107
  .digit-bottom-sheet-content::-webkit-scrollbar {
package/src/digitv2/components/buttonsV2.scss CHANGED
@@ -144,6 +144,9 @@
144
144
  @apply bg-white;
145
145
  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;
146
146
 
147
+ h2 {
148
+ font-weight: theme(digitv2.fontWeight.bold);
149
+ }
147
150
  }
148
151
 
149
152
  h2 {
@@ -152,6 +155,10 @@
152
155
  color: theme(digitv2.lightTheme.primary-1);
153
156
  }
154
157
 
158
+ .digit-button-label{
159
+ color: theme(digitv2.lightTheme.primary-1);
160
+ }
161
+
155
162
  &.disabled {
156
163
  @apply opacity-50;
157
164
  border: 0.063rem solid theme(digitv2.lightTheme.text-disabled);
package/src/digitv2/components/chipV2.scss CHANGED
@@ -46,6 +46,14 @@
46
46
  }
47
47
 
48
48
 
49
+ &.clickable:hover{
50
+ box-shadow: 0.125rem 0.125rem 0.25rem 0rem #36363633;
51
+ }
52
+
53
+ svg{
54
+ flex-shrink: 0;
55
+ }
56
+
49
57
  .digit-text {
50
58
  @extend .typography.body-xs;
51
59
  @apply overflow-hidden items-center whitespace-no-wrap;
@@ -141,7 +149,13 @@
141
149
 
142
150
  .digit-tag{
143
151
  &.noClose{
144
- display: inline;
152
+ display: flex;
153
+ align-items: center;
154
+ justify-content: center;
155
+
156
+ &.noIcon{
157
+ display: unset;
158
+ }
145
159
  }
146
160
  }
147
161
 
package/src/digitv2/components/fieldV1.scss CHANGED
@@ -1,5 +1,12 @@
1
1
  @import url("../index.scss");
2
2
 
3
+ .label-field-wrapper{
4
+ display: flex;
5
+ flex-direction: column;
6
+ justify-content: flex-start;
7
+ gap: theme(digitv2.spacers.spacer1);
8
+ }
9
+
3
10
  .digit-header-content {
4
11
 
5
12
  &.label {
package/src/digitv2/components/headerdropdownV2.scss CHANGED
@@ -195,6 +195,26 @@
195
195
  @extend .typography.heading-s;
196
196
  background: theme(digitv2.lightTheme.primary-1) !important;
197
197
  color: theme(digitv2.lightTheme.paper-primary);
198
+
199
+ font-family: theme(digitv2.fontFamily.sans);
200
+ font-style: theme(digitv2.fontStyle.normal);
201
+ font-weight: theme(digitv2.fontWeight.bold);
202
+ line-height: theme(digitv2.lineHeight.lineheight1);
203
+
204
+ @media (max-aspect-ratio: 9/16) {
205
+ /* Media query for mobile */
206
+ font-size: theme(digitv2.fontSize.heading-s.mobile);
207
+ }
208
+
209
+ @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
210
+ /* Media query for tablets */
211
+ font-size: theme(digitv2.fontSize.heading-s.tablet);
212
+ }
213
+
214
+ @media (min-aspect-ratio: 3/4) {
215
+ /* Media query for desktop */
216
+ font-size: theme(digitv2.fontSize.heading-s.desktop);
217
+ }
198
218
  }
199
219
 
200
220
  .header-dropdown-options::-webkit-scrollbar {
package/src/digitv2/components/multiSelectDropdownV2.scss CHANGED
@@ -24,7 +24,33 @@
24
24
  @apply relative h-10 w-full bg-white;
25
25
  border: 0.063rem solid theme(digitv2.lightTheme.generic-inputborder);
26
26
  input[type="text"] {
27
- @extend .typography.body-l;
27
+ @extend .typography.body-s;
28
+ @media (max-aspect-ratio: 9/16) {
29
+ /* Media query for mobile */
30
+ font-size: theme(digitv2.fontSize.body-s.mobile);
31
+ font-family: theme(digitv2.fontFamily.sans);
32
+ font-style: theme(digitv2.fontStyle.normal);
33
+ font-weight: theme(digitv2.fontWeight.regular);
34
+ line-height: theme(digitv2.lineHeight.lineheight2);
35
+ }
36
+
37
+ @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
38
+ /* Media query for tablets */
39
+ font-size: theme(digitv2.fontSize.body-s.tablet);
40
+ font-family: theme(digitv2.fontFamily.sans);
41
+ font-style: theme(digitv2.fontStyle.normal);
42
+ font-weight: theme(digitv2.fontWeight.regular);
43
+ line-height: theme(digitv2.lineHeight.lineheight2);
44
+ }
45
+
46
+ @media (min-aspect-ratio: 3/4) {
47
+ /* Media query for desktop */
48
+ font-size: theme(digitv2.fontSize.body-s.desktop);
49
+ font-family: theme(digitv2.fontFamily.sans);
50
+ font-style: theme(digitv2.fontStyle.normal);
51
+ font-weight: theme(digitv2.fontWeight.regular);
52
+ line-height: theme(digitv2.lineHeight.lineheight2);
53
+ }
28
54
  @apply absolute top-0 left-0 p-sm min-h-full min-w-full opacity-0;
29
55
  letter-spacing: theme(digitv2.spacers.spacer0);
30
56
  padding-left: 1%;
@@ -463,7 +489,33 @@
463
489
  .digit-multiselectdropdown-master-active {
464
490
  .digit-multiselectdropdown-label {
465
491
  p {
466
- @extend .typography.body-l;
492
+ @extend .typography.body-s;
493
+ @media (max-aspect-ratio: 9/16) {
494
+ /* Media query for mobile */
495
+ font-size: theme(digitv2.fontSize.body-s.mobile);
496
+ font-family: theme(digitv2.fontFamily.sans);
497
+ font-style: theme(digitv2.fontStyle.normal);
498
+ font-weight: theme(digitv2.fontWeight.regular);
499
+ line-height: theme(digitv2.lineHeight.lineheight2);
500
+ }
501
+
502
+ @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
503
+ /* Media query for tablets */
504
+ font-size: theme(digitv2.fontSize.body-s.tablet);
505
+ font-family: theme(digitv2.fontFamily.sans);
506
+ font-style: theme(digitv2.fontStyle.normal);
507
+ font-weight: theme(digitv2.fontWeight.regular);
508
+ line-height: theme(digitv2.lineHeight.lineheight2);
509
+ }
510
+
511
+ @media (min-aspect-ratio: 3/4) {
512
+ /* Media query for desktop */
513
+ font-size: theme(digitv2.fontSize.body-s.desktop);
514
+ font-family: theme(digitv2.fontFamily.sans);
515
+ font-style: theme(digitv2.fontStyle.normal);
516
+ font-weight: theme(digitv2.fontWeight.regular);
517
+ line-height: theme(digitv2.lineHeight.lineheight2);
518
+ }
467
519
  white-space: pre;
468
520
  margin: auto;
469
521
  margin-left: theme(digitv2.spacers.spacer0);
package/src/digitv2/components/selectDropdownV2.scss CHANGED
@@ -27,7 +27,33 @@
27
27
  color: theme(digitv2.lightTheme.generic-divider) !important;
28
28
  }
29
29
  input[type="text"] {
30
- @extend .typography.body-l;
30
+ @extend .typography.body-s;
31
+ @media (max-aspect-ratio: 9/16) {
32
+ /* Media query for mobile */
33
+ font-size: theme(digitv2.fontSize.body-s.mobile);
34
+ font-family: theme(digitv2.fontFamily.sans);
35
+ font-style: theme(digitv2.fontStyle.normal);
36
+ font-weight: theme(digitv2.fontWeight.regular);
37
+ line-height: theme(digitv2.lineHeight.lineheight2);
38
+ }
39
+
40
+ @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
41
+ /* Media query for tablets */
42
+ font-size: theme(digitv2.fontSize.body-s.tablet);
43
+ font-family: theme(digitv2.fontFamily.sans);
44
+ font-style: theme(digitv2.fontStyle.normal);
45
+ font-weight: theme(digitv2.fontWeight.regular);
46
+ line-height: theme(digitv2.lineHeight.lineheight2);
47
+ }
48
+
49
+ @media (min-aspect-ratio: 3/4) {
50
+ /* Media query for desktop */
51
+ font-size: theme(digitv2.fontSize.body-s.desktop);
52
+ font-family: theme(digitv2.fontFamily.sans);
53
+ font-style: theme(digitv2.fontStyle.normal);
54
+ font-weight: theme(digitv2.fontWeight.regular);
55
+ line-height: theme(digitv2.lineHeight.lineheight2);
56
+ }
31
57
  @apply absolute z-10 h-full outline-none;
32
58
  width:calc(100%- (theme(digitv2.spacers.spacer7)));
33
59
  background-color: transparent;
@@ -52,7 +78,33 @@
52
78
  @apply relative block w-full h-10 bg-white;
53
79
  border: 0.063rem solid theme(digitv2.lightTheme.primary-1);
54
80
  input[type="text"] {
55
- @extend .typography.body-l;
81
+ @extend .typography.body-s;
82
+ @media (max-aspect-ratio: 9/16) {
83
+ /* Media query for mobile */
84
+ font-size: theme(digitv2.fontSize.body-s.mobile);
85
+ font-family: theme(digitv2.fontFamily.sans);
86
+ font-style: theme(digitv2.fontStyle.normal);
87
+ font-weight: theme(digitv2.fontWeight.regular);
88
+ line-height: theme(digitv2.lineHeight.lineheight2);
89
+ }
90
+
91
+ @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
92
+ /* Media query for tablets */
93
+ font-size: theme(digitv2.fontSize.body-s.tablet);
94
+ font-family: theme(digitv2.fontFamily.sans);
95
+ font-style: theme(digitv2.fontStyle.normal);
96
+ font-weight: theme(digitv2.fontWeight.regular);
97
+ line-height: theme(digitv2.lineHeight.lineheight2);
98
+ }
99
+
100
+ @media (min-aspect-ratio: 3/4) {
101
+ /* Media query for desktop */
102
+ font-size: theme(digitv2.fontSize.body-s.desktop);
103
+ font-family: theme(digitv2.fontFamily.sans);
104
+ font-style: theme(digitv2.fontStyle.normal);
105
+ font-weight: theme(digitv2.fontWeight.regular);
106
+ line-height: theme(digitv2.lineHeight.lineheight2);
107
+ }
56
108
  @apply absolute z-10 h-full outline-none;
57
109
  width:calc(100%- (theme(digitv2.spacers.spacer7)));
58
110
  background-color: transparent;
@@ -369,7 +421,33 @@
369
421
  }
370
422
  }
371
423
  .digit-dropdown-employee-select-wrap--elipses {
372
- @extend .typography.body-l;
424
+ @extend .typography.body-s;
425
+ @media (max-aspect-ratio: 9/16) {
426
+ /* Media query for mobile */
427
+ font-size: theme(digitv2.fontSize.body-s.mobile);
428
+ font-family: theme(digitv2.fontFamily.sans);
429
+ font-style: theme(digitv2.fontStyle.normal);
430
+ font-weight: theme(digitv2.fontWeight.regular);
431
+ line-height: theme(digitv2.lineHeight.lineheight2);
432
+ }
433
+
434
+ @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
435
+ /* Media query for tablets */
436
+ font-size: theme(digitv2.fontSize.body-s.tablet);
437
+ font-family: theme(digitv2.fontFamily.sans);
438
+ font-style: theme(digitv2.fontStyle.normal);
439
+ font-weight: theme(digitv2.fontWeight.regular);
440
+ line-height: theme(digitv2.lineHeight.lineheight2);
441
+ }
442
+
443
+ @media (min-aspect-ratio: 3/4) {
444
+ /* Media query for desktop */
445
+ font-size: theme(digitv2.fontSize.body-s.desktop);
446
+ font-family: theme(digitv2.fontFamily.sans);
447
+ font-style: theme(digitv2.fontStyle.normal);
448
+ font-weight: theme(digitv2.fontWeight.regular);
449
+ line-height: theme(digitv2.lineHeight.lineheight2);
450
+ }
373
451
  @apply overflow-hidden whitespace-no-wrap;
374
452
  width:calc(100%- (theme(digitv2.spacers.spacer7)));
375
453
  text-overflow: ellipsis;
@@ -398,7 +476,33 @@
398
476
  @apply relative block w-full h-10 bg-white;
399
477
  border: 0.063rem solid theme(digitv2.lightTheme.text-secondary);
400
478
  input[type="text"] {
401
- @extend .typography.body-l;
479
+ @extend .typography.body-s;
480
+ @media (max-aspect-ratio: 9/16) {
481
+ /* Media query for mobile */
482
+ font-size: theme(digitv2.fontSize.body-s.mobile);
483
+ font-family: theme(digitv2.fontFamily.sans);
484
+ font-style: theme(digitv2.fontStyle.normal);
485
+ font-weight: theme(digitv2.fontWeight.regular);
486
+ line-height: theme(digitv2.lineHeight.lineheight2);
487
+ }
488
+
489
+ @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
490
+ /* Media query for tablets */
491
+ font-size: theme(digitv2.fontSize.body-s.tablet);
492
+ font-family: theme(digitv2.fontFamily.sans);
493
+ font-style: theme(digitv2.fontStyle.normal);
494
+ font-weight: theme(digitv2.fontWeight.regular);
495
+ line-height: theme(digitv2.lineHeight.lineheight2);
496
+ }
497
+
498
+ @media (min-aspect-ratio: 3/4) {
499
+ /* Media query for desktop */
500
+ font-size: theme(digitv2.fontSize.body-s.desktop);
501
+ font-family: theme(digitv2.fontFamily.sans);
502
+ font-style: theme(digitv2.fontStyle.normal);
503
+ font-weight: theme(digitv2.fontWeight.regular);
504
+ line-height: theme(digitv2.lineHeight.lineheight2);
505
+ }
402
506
  @apply absolute z-10 h-full outline-none;
403
507
  width:calc(100%- (theme(digitv2.spacers.spacer7)));
404
508
  background-color: transparent;
@@ -428,7 +532,33 @@
428
532
  @apply relative block w-full h-10;
429
533
  border: 0.063rem solid theme(digitv2.lightTheme.primary-1);
430
534
  input[type="text"] {
431
- @extend .typography.body-l;
535
+ @extend .typography.body-s;
536
+ @media (max-aspect-ratio: 9/16) {
537
+ /* Media query for mobile */
538
+ font-size: theme(digitv2.fontSize.body-s.mobile);
539
+ font-family: theme(digitv2.fontFamily.sans);
540
+ font-style: theme(digitv2.fontStyle.normal);
541
+ font-weight: theme(digitv2.fontWeight.regular);
542
+ line-height: theme(digitv2.lineHeight.lineheight2);
543
+ }
544
+
545
+ @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
546
+ /* Media query for tablets */
547
+ font-size: theme(digitv2.fontSize.body-s.tablet);
548
+ font-family: theme(digitv2.fontFamily.sans);
549
+ font-style: theme(digitv2.fontStyle.normal);
550
+ font-weight: theme(digitv2.fontWeight.regular);
551
+ line-height: theme(digitv2.lineHeight.lineheight2);
552
+ }
553
+
554
+ @media (min-aspect-ratio: 3/4) {
555
+ /* Media query for desktop */
556
+ font-size: theme(digitv2.fontSize.body-s.desktop);
557
+ font-family: theme(digitv2.fontFamily.sans);
558
+ font-style: theme(digitv2.fontStyle.normal);
559
+ font-weight: theme(digitv2.fontWeight.regular);
560
+ line-height: theme(digitv2.lineHeight.lineheight2);
561
+ }
432
562
  @apply absolute z-10 h-full outline-none;
433
563
  width:calc(100%- (theme(digitv2.spacers.spacer7)));
434
564
  background-color: transparent;
package/src/digitv2/components/textInputV2.scss CHANGED
@@ -139,13 +139,13 @@
139
139
  pointer-events: none !important;
140
140
  border: 0.063rem solid theme(digitv2.lightTheme.generic-inputborder);
141
141
  background: theme(digitv2.lightTheme.generic-background);
142
- color: theme(digitv2.lightTheme.text-disabled);
142
+ color: theme(digitv2.lightTheme.text-secondary);
143
143
  }
144
144
 
145
145
  input {
146
146
  border: 0.063rem solid theme(digitv2.lightTheme.generic-inputborder);
147
147
  background: theme(digitv2.lightTheme.generic-background);
148
- color: theme(digitv2.lightTheme.text-disabled);
148
+ color: theme(digitv2.lightTheme.text-secondary);
149
149
  }
150
150
 
151
151
  .digit-numeric-button-prefix,