@egovernments/digit-ui-components-css 0.0.2-beta.10 → 0.0.2-beta.11

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 (48) hide show
  1. package/CHANGELOG.md +88 -84
  2. package/README.md +80 -80
  3. package/dist/index.css +612 -26
  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 +207 -0
  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 +451 -426
  12. package/src/digitv2/components/cardV2.scss +497 -484
  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 +152 -0
  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/multiSelectDropdownV2.scss +315 -315
  26. package/src/digitv2/components/panelCardV2.scss +160 -160
  27. package/src/digitv2/components/panelV2.scss +114 -114
  28. package/src/digitv2/components/popUpV2.scss +330 -319
  29. package/src/digitv2/components/radiobtnV2.scss +115 -115
  30. package/src/digitv2/components/selectDropdownV2.scss +364 -364
  31. package/src/digitv2/components/stepperV2.scss +147 -147
  32. package/src/digitv2/components/textInputV2.scss +462 -462
  33. package/src/digitv2/components/textareaV2.scss +99 -99
  34. package/src/digitv2/components/textblockV2.scss +46 -46
  35. package/src/digitv2/components/timelineV2.scss +171 -159
  36. package/src/digitv2/components/toastV2.scss +80 -80
  37. package/src/digitv2/components/toggleV2.scss +72 -72
  38. package/src/digitv2/components/topbarV2.scss +388 -0
  39. package/src/digitv2/components/treeSelectV2.scss +132 -132
  40. package/src/digitv2/components/uploaderV2.scss +556 -556
  41. package/src/digitv2/components/viewCardFieldPairV2.scss +44 -44
  42. package/src/digitv2/index.scss +169 -168
  43. package/src/digitv2/pages/employee/index.scss +1 -1
  44. package/src/digitv2/pages/employee/workbench.scss +615 -615
  45. package/src/digitv2/typography.scss +638 -638
  46. package/src/index.scss +681 -681
  47. package/src/pages/employee/index.scss +625 -625
  48. package/src/pages/employee/login.scss +220 -220
package/src/digitv2/components/stepperV2.scss CHANGED
@@ -1,148 +1,148 @@
1
- .digit-stepper-container {
2
- @apply flex overflow-auto;
3
- min-height: 4rem;
4
-
5
- &.vertical {
6
- @apply flex-col;
7
- }
8
-
9
- .digit-stepper-checkpoint {
10
- @apply relative flex-1;
11
- min-height: 4rem;
12
- z-index: 1;
13
- }
14
-
15
- .digit-stepper-content {
16
- @apply flex flex-col items-center font-sans font-regular;
17
- min-height: 4rem;
18
- gap: theme(digitv2.spacers.spacer2);
19
- color: theme(digitv2.lightTheme.text-secondary);
20
- font-size: theme(digitv2.spacers.spacer4);
21
- line-height: theme(digitv2.spacers.spacer6);
22
- text-align: center;
23
-
24
-
25
- .stepper-label {
26
- @extend .typography.body-s;
27
- @apply text-center;
28
- color: theme(digitv2.lightTheme.text-secondary);
29
- letter-spacing: theme(digitv2.spacers.spacer0);
30
-
31
- &.completed {
32
- color: theme(digitv2.lightTheme.text-primary);
33
- }
34
-
35
- &.current {
36
- @extend .typography.heading-s;
37
- line-height: 1.37rem;
38
- color: theme(digitv2.lightTheme.text-primary);
39
- }
40
-
41
- &.vertical {
42
- @apply text-left;
43
- margin-top: 0.438rem;
44
- }
45
- }
46
-
47
- &.vertical {
48
- @apply flex-row;
49
- }
50
- }
51
-
52
- .stepper-circle {
53
- @apply flex text-center justify-center items-center font-regular w-8 h-8;
54
- background-color: theme(digitv2.lightTheme.paper-primary);
55
- border-radius: 50%;
56
- margin-top: theme(digitv2.spacers.spacer1);
57
- border: 0.125rem solid theme(digitv2.lightTheme.generic-divider);
58
- color: #787878;
59
-
60
- @media (max-aspect-ratio: 9/16) {
61
- @apply w-6 h-6;
62
- }
63
- }
64
-
65
- .active {
66
- @apply font-bold;
67
- background-color: theme(digitv2.lightTheme.primary-1);
68
- border-color: theme(digitv2.lightTheme.primary-1);
69
- color: theme(digitv2.lightTheme.paper-primary);
70
- }
71
-
72
- .stepper-connect {
73
- @apply absolute;
74
- top: theme(digitv2.spacers.spacer5);
75
- left: calc(50% + (theme(digitv2.spacers.spacer2)));
76
- right: calc(-50% + (theme(digitv2.spacers.spacer2)));
77
- border-top: 0.125rem solid theme(colors.border);
78
- z-index: -1;
79
- height: 0.125rem;
80
-
81
- @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
82
- min-width: 6.313rem;
83
- max-width: 39.438rem;
84
- }
85
-
86
- @media (max-aspect-ratio: 9/16) {
87
- min-width: 4.313rem;
88
- max-width: 16.875rem;
89
- top: 0.875rem;
90
- }
91
-
92
- @media (min-aspect-ratio: 3/4) {
93
- min-width: 5.313rem;
94
- max-width: 82.688rem;
95
- }
96
-
97
- &.active {
98
- background-color: theme(digitv2.lightTheme.primary-1);
99
- border-color: theme(digitv2.lightTheme.primary-1);
100
- height: theme(digitv2.spacers.spacer1);
101
- border-top: theme(digitv2.spacers.spacer1) solid theme(digitv2.lightTheme.primary-1);
102
- }
103
-
104
- &.vertical {
105
- top: calc(50% + (theme(digitv2.spacers.spacer2)));
106
- bottom: calc(-50% + (theme(digitv2.spacers.spacer2)));
107
- left: -(theme(digitv2.spacers.spacer12));
108
- width: 0.125rem;
109
- height: auto;
110
- transform: rotate(90deg);
111
-
112
- &.active {
113
- background-color: transparent;
114
- border-color: theme(digitv2.lightTheme.primary-1);
115
- }
116
- }
117
- }
118
-
119
- .digit-stepper-content:hover {
120
- .stepper-circle.active {
121
- outline: theme(digitv2.spacers.spacer1) solid #F477381F;
122
- }
123
-
124
- .stepper-label {
125
- &.completed {
126
- @extend .typography.heading-s;
127
- line-height: 1.37rem;
128
- color: theme(digitv2.lightTheme.text-primary);
129
- }
130
- }
131
- }
132
- }
133
-
134
- .digit-stepper-container::-webkit-scrollbar {
135
- width: theme(digitv2.spacers.spacer2);
136
- height: theme(digitv2.spacers.spacer2);
137
- background-color: theme(digitv2.lightTheme.generic-background);
138
- }
139
-
140
- .digit-stepper-container::-webkit-scrollbar-track {
141
- background-color: theme(digitv2.lightTheme.generic-background);
142
- border-radius: 0.563rem;
143
- }
144
-
145
- .digit-stepper-container::-webkit-scrollbar-thumb {
146
- background-color: theme(digitv2.lightTheme.generic-divider);
147
- border-radius: 0.563rem;
1
+ .digit-stepper-container {
2
+ @apply flex overflow-auto;
3
+ min-height: 4rem;
4
+
5
+ &.vertical {
6
+ @apply flex-col;
7
+ }
8
+
9
+ .digit-stepper-checkpoint {
10
+ @apply relative flex-1;
11
+ min-height: 4rem;
12
+ z-index: 1;
13
+ }
14
+
15
+ .digit-stepper-content {
16
+ @apply flex flex-col items-center font-sans font-regular;
17
+ min-height: 4rem;
18
+ gap: theme(digitv2.spacers.spacer2);
19
+ color: theme(digitv2.lightTheme.text-secondary);
20
+ font-size: theme(digitv2.spacers.spacer4);
21
+ line-height: theme(digitv2.spacers.spacer6);
22
+ text-align: center;
23
+
24
+
25
+ .stepper-label {
26
+ @extend .typography.body-s;
27
+ @apply text-center;
28
+ color: theme(digitv2.lightTheme.text-secondary);
29
+ letter-spacing: theme(digitv2.spacers.spacer0);
30
+
31
+ &.completed {
32
+ color: theme(digitv2.lightTheme.text-primary);
33
+ }
34
+
35
+ &.current {
36
+ @extend .typography.heading-s;
37
+ line-height: 1.37rem;
38
+ color: theme(digitv2.lightTheme.text-primary);
39
+ }
40
+
41
+ &.vertical {
42
+ @apply text-left;
43
+ margin-top: 0.438rem;
44
+ }
45
+ }
46
+
47
+ &.vertical {
48
+ @apply flex-row;
49
+ }
50
+ }
51
+
52
+ .stepper-circle {
53
+ @apply flex text-center justify-center items-center font-regular w-8 h-8;
54
+ background-color: theme(digitv2.lightTheme.paper-primary);
55
+ border-radius: 50%;
56
+ margin-top: theme(digitv2.spacers.spacer1);
57
+ border: 0.125rem solid theme(digitv2.lightTheme.generic-divider);
58
+ color: #787878;
59
+
60
+ @media (max-aspect-ratio: 9/16) {
61
+ @apply w-6 h-6;
62
+ }
63
+ }
64
+
65
+ .active {
66
+ @apply font-bold;
67
+ background-color: theme(digitv2.lightTheme.primary-1);
68
+ border-color: theme(digitv2.lightTheme.primary-1);
69
+ color: theme(digitv2.lightTheme.paper-primary);
70
+ }
71
+
72
+ .stepper-connect {
73
+ @apply absolute;
74
+ top: theme(digitv2.spacers.spacer5);
75
+ left: calc(50% + (theme(digitv2.spacers.spacer2)));
76
+ right: calc(-50% + (theme(digitv2.spacers.spacer2)));
77
+ border-top: 0.125rem solid theme(colors.border);
78
+ z-index: -1;
79
+ height: 0.125rem;
80
+
81
+ @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
82
+ min-width: 6.313rem;
83
+ max-width: 39.438rem;
84
+ }
85
+
86
+ @media (max-aspect-ratio: 9/16) {
87
+ min-width: 4.313rem;
88
+ max-width: 16.875rem;
89
+ top: 0.875rem;
90
+ }
91
+
92
+ @media (min-aspect-ratio: 3/4) {
93
+ min-width: 5.313rem;
94
+ max-width: 82.688rem;
95
+ }
96
+
97
+ &.active {
98
+ background-color: theme(digitv2.lightTheme.primary-1);
99
+ border-color: theme(digitv2.lightTheme.primary-1);
100
+ height: theme(digitv2.spacers.spacer1);
101
+ border-top: theme(digitv2.spacers.spacer1) solid theme(digitv2.lightTheme.primary-1);
102
+ }
103
+
104
+ &.vertical {
105
+ top: calc(50% + (theme(digitv2.spacers.spacer2)));
106
+ bottom: calc(-50% + (theme(digitv2.spacers.spacer2)));
107
+ left: -(theme(digitv2.spacers.spacer12));
108
+ width: 0.125rem;
109
+ height: auto;
110
+ transform: rotate(90deg);
111
+
112
+ &.active {
113
+ background-color: transparent;
114
+ border-color: theme(digitv2.lightTheme.primary-1);
115
+ }
116
+ }
117
+ }
118
+
119
+ .digit-stepper-content:hover {
120
+ .stepper-circle.active {
121
+ outline: theme(digitv2.spacers.spacer1) solid #F477381F;
122
+ }
123
+
124
+ .stepper-label {
125
+ &.completed {
126
+ @extend .typography.heading-s;
127
+ line-height: 1.37rem;
128
+ color: theme(digitv2.lightTheme.text-primary);
129
+ }
130
+ }
131
+ }
132
+ }
133
+
134
+ .digit-stepper-container::-webkit-scrollbar {
135
+ width: theme(digitv2.spacers.spacer2);
136
+ height: theme(digitv2.spacers.spacer2);
137
+ background-color: theme(digitv2.lightTheme.generic-background);
138
+ }
139
+
140
+ .digit-stepper-container::-webkit-scrollbar-track {
141
+ background-color: theme(digitv2.lightTheme.generic-background);
142
+ border-radius: 0.563rem;
143
+ }
144
+
145
+ .digit-stepper-container::-webkit-scrollbar-thumb {
146
+ background-color: theme(digitv2.lightTheme.generic-divider);
147
+ border-radius: 0.563rem;
148
148
  }