@egovernments/digit-ui-components-css 0.0.2-beta.9 → 0.2.0

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 (61) hide show
  1. package/CHANGELOG.md +150 -0
  2. package/README.md +11 -2
  3. package/dist/index.css +10268 -3591
  4. package/dist/index.min.css +3 -3
  5. package/package.json +8 -9
  6. package/src/digitv2/components/accordionV2.scss +214 -0
  7. package/src/digitv2/components/{infoCardV2.scss → alertCardV2.scss} +1 -4
  8. package/src/digitv2/components/backLinkV2.scss +1 -1
  9. package/src/digitv2/components/bottomSheetV2.scss +121 -0
  10. package/src/digitv2/components/breadcrumbV2.scss +38 -0
  11. package/src/digitv2/components/buttonsV2.scss +82 -31
  12. package/src/digitv2/components/cardV2.scss +498 -0
  13. package/src/digitv2/components/cardbasedoptionsV2.scss +47 -0
  14. package/src/digitv2/components/cardlabelV2.scss +8 -0
  15. package/src/digitv2/components/checkboxV2.scss +54 -6
  16. package/src/digitv2/components/chipV2.scss +39 -0
  17. package/src/digitv2/components/dividerV2.scss +13 -0
  18. package/src/digitv2/components/errorMessageV2.scss +29 -8
  19. package/src/digitv2/components/fieldV1.scss +47 -2
  20. package/src/digitv2/components/{uploaderV2.scss → fileUploadV2.scss} +163 -9
  21. package/src/digitv2/components/filterCardV2.scss +417 -0
  22. package/src/digitv2/components/footerV2.scss +208 -0
  23. package/src/digitv2/components/formCardV2.scss +234 -0
  24. package/src/digitv2/components/hamburgerV2.scss +555 -0
  25. package/src/digitv2/components/headerV2.scss +426 -0
  26. package/src/digitv2/components/headerdropdownV2.scss +233 -0
  27. package/src/digitv2/components/labelFieldPairV2.scss +37 -11
  28. package/src/digitv2/components/landingpagecardV2.scss +278 -0
  29. package/src/digitv2/components/loaderV2.scss +47 -0
  30. package/src/digitv2/components/menuCardV2.scss +116 -0
  31. package/src/digitv2/components/metricCardV2.scss +151 -0
  32. package/src/digitv2/components/mobileNumberV2.scss +1 -1
  33. package/src/digitv2/components/multiSelectDropdownV2.scss +219 -8
  34. package/src/digitv2/components/otpInputV2.scss +99 -0
  35. package/src/digitv2/components/panelCardV2.scss +19 -0
  36. package/src/digitv2/components/panelV2.scss +19 -0
  37. package/src/digitv2/components/popUpV2.scss +86 -2
  38. package/src/digitv2/components/radiobtnV2.scss +35 -6
  39. package/src/digitv2/components/selectDropdownV2.scss +257 -13
  40. package/src/digitv2/components/selectionTagV2.scss +102 -0
  41. package/src/digitv2/components/sidePanelV2.scss +222 -0
  42. package/src/digitv2/components/sidenavV2.scss +516 -0
  43. package/src/digitv2/components/stepperV2.scss +106 -6
  44. package/src/digitv2/components/summaryCardFieldPairV2.scss +83 -0
  45. package/src/digitv2/components/summaryCardV2.scss +100 -0
  46. package/src/digitv2/components/switchV2.scss +112 -0
  47. package/src/digitv2/components/tabV2.scss +126 -0
  48. package/src/digitv2/components/tableV2.scss +697 -0
  49. package/src/digitv2/components/tagV2.scss +108 -0
  50. package/src/digitv2/components/textInputV2.scss +5 -3
  51. package/src/digitv2/components/textareaV2.scss +1 -1
  52. package/src/digitv2/components/textblockV2.scss +38 -0
  53. package/src/digitv2/components/timelineV2.scss +144 -14
  54. package/src/digitv2/components/toastV2.scss +79 -1
  55. package/src/digitv2/components/toggleV2.scss +38 -0
  56. package/src/digitv2/components/tooltipwrapperV2.scss +365 -0
  57. package/src/digitv2/components/treeSelectV2.scss +58 -1
  58. package/src/digitv2/index.scss +171 -5
  59. package/src/digitv2/pages/employee/workbench.scss +9 -9
  60. package/src/digitv2/typography.scss +24 -9
  61. package/src/index.scss +0 -4
package/src/digitv2/components/formCardV2.scss ADDED
@@ -0,0 +1,234 @@
1
+ .digit-form-card{
2
+ width: 100%;
3
+ max-width: 100%;
4
+ height: fit-content;
5
+ background-color: theme(digitv2.lightTheme.paper-primary);
6
+ display: flex;
7
+ flex-direction: column;
8
+ border-radius: theme(digitv2.spacers.spacer1);
9
+ box-shadow: 0rem 0.063rem 0.125rem 0rem #00000029;
10
+
11
+ .digit-form-card-header {
12
+ @apply flex-col;
13
+ display: flex !important;
14
+ gap: theme(digitv2.spacers.spacer4);
15
+
16
+ &.with-shadow {
17
+ box-shadow: theme(digitv2.spacers.spacer0) 0.063rem 0.125rem theme(digitv2.spacers.spacer0) #00000026;
18
+ }
19
+
20
+ @media (min-width: 48rem) {
21
+ padding: theme(digitv2.spacers.spacer6);
22
+ padding-bottom: theme(digitv2.spacers.spacer0);
23
+
24
+ &.with-shadow {
25
+ padding-bottom: theme(digitv2.spacers.spacer6);
26
+ }
27
+ }
28
+
29
+ @media (min-width: 30.063rem) and (max-width: 47.938rem) {
30
+ padding: theme(digitv2.spacers.spacer5);
31
+ padding-bottom: theme(digitv2.spacers.spacer0);
32
+
33
+ &.with-shadow {
34
+ padding-bottom: theme(digitv2.spacers.spacer5);
35
+ }
36
+ }
37
+
38
+ @media (max-width: 30rem) {
39
+ padding: theme(digitv2.spacers.spacer4);
40
+ padding-bottom: theme(digitv2.spacers.spacer0);
41
+
42
+ &.with-shadow {
43
+ padding-bottom: theme(digitv2.spacers.spacer4);
44
+ }
45
+ }
46
+
47
+ }
48
+
49
+ .digit-form-card-content {
50
+ @extend .typography.body-s;
51
+ position: relative;
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
+
57
+ @media (max-aspect-ratio: 9/16) {
58
+ /* Media query for mobile */
59
+ font-size: theme(digitv2.fontSize.body-s.mobile);
60
+ }
61
+
62
+ @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
63
+ /* Media query for tablets */
64
+ font-size: theme(digitv2.fontSize.body-s.tablet);
65
+ }
66
+
67
+ @media (min-aspect-ratio: 3/4) {
68
+ /* Media query for desktop */
69
+ font-size: theme(digitv2.fontSize.body-s.desktop);
70
+ }
71
+ @apply overflow-hidden overflow-y-auto flex-col;
72
+ display: flex;
73
+ flex: 1;
74
+ color: theme(digitv2.lightTheme.text-primary);
75
+
76
+ &.inline {
77
+ flex-direction: row;
78
+ }
79
+
80
+ @media (min-width: 48rem) {
81
+ gap: theme(digitv2.spacers.spacer6);
82
+ padding: theme(digitv2.spacers.spacer6) theme(digitv2.spacers.spacer6) theme(digitv2.spacers.spacer0) theme(digitv2.spacers.spacer6);
83
+
84
+ &.with-shadow,
85
+ &.without-footer{
86
+ padding: theme(digitv2.spacers.spacer6);
87
+ }
88
+
89
+ }
90
+
91
+ @media (min-width: 30.063rem) and (max-width: 47.938rem) {
92
+ gap: theme(digitv2.spacers.spacer5);
93
+ padding: theme(digitv2.spacers.spacer5) theme(digitv2.spacers.spacer5) theme(digitv2.spacers.spacer0) theme(digitv2.spacers.spacer5);
94
+
95
+ &.with-shadow,
96
+ &.without-footer{
97
+ padding: theme(digitv2.spacers.spacer5);
98
+ }
99
+
100
+ }
101
+
102
+ @media (max-width: 30rem) {
103
+ gap: theme(digitv2.spacers.spacer4);
104
+ padding: theme(digitv2.spacers.spacer4) theme(digitv2.spacers.spacer4) theme(digitv2.spacers.spacer0) theme(digitv2.spacers.spacer4);
105
+
106
+ &.with-shadow,
107
+ &.without-footer{
108
+ padding: theme(digitv2.spacers.spacer4);
109
+ }
110
+ }
111
+
112
+ &.with-divider{
113
+ @media (min-width: 48rem) {
114
+ grid-column-gap: theme(digitv2.spacers.spacer12);
115
+ }
116
+
117
+ @media (min-width: 30.063rem) and (max-width: 47.938rem) {
118
+ grid-column-gap: theme(digitv2.spacers.spacer10);
119
+ }
120
+
121
+ @media (max-width: 30rem) {
122
+ grid-column-gap: theme(digitv2.spacers.spacer8);
123
+ }
124
+ }
125
+
126
+ .digit-label-field-pair {
127
+ margin-bottom: unset;
128
+ }
129
+
130
+ .digit-radio-options-wrap {
131
+ margin-bottom: unset;
132
+ }
133
+ }
134
+
135
+ .digit-form-card-footer {
136
+ @apply flex-wrap;
137
+ display: flex;
138
+ gap: theme(digitv2.spacers.spacer4);
139
+
140
+ &.with-shadow {
141
+ box-shadow: theme(digitv2.spacers.spacer0) -0.063rem 0.125rem theme(digitv2.spacers.spacer0) #00000026;
142
+ }
143
+
144
+ @media (min-width: 48rem) {
145
+ padding: theme(digitv2.spacers.spacer6);
146
+ }
147
+
148
+ @media (min-width: 30.063rem) and (max-width: 47.938rem) {
149
+ @apply w-full;
150
+ padding: theme(digitv2.spacers.spacer5);
151
+ }
152
+
153
+ @media (max-width: 30rem) {
154
+ @apply flex-col;
155
+ padding: theme(digitv2.spacers.spacer4);
156
+ }
157
+
158
+
159
+ .digit-form-card-buttons {
160
+ margin-left: auto;
161
+ display: flex;
162
+ gap: theme(digitv2.spacers.spacer4);
163
+ @apply max-w-full flex-wrap;
164
+
165
+ @media (min-width: 30.063rem) and (max-width: 47.938rem) {
166
+ @apply w-full;
167
+
168
+ button {
169
+ flex: 1;
170
+ }
171
+ }
172
+
173
+ @media (max-width: 30rem) {
174
+ @apply flex-col;
175
+ margin: theme(digitv2.spacers.spacer0);
176
+
177
+ button {
178
+ width: 100%;
179
+ }
180
+ }
181
+
182
+ &.equal-buttons{
183
+ width: 100%;
184
+
185
+ @media (min-width: 30.063rem) {
186
+
187
+ button {
188
+ flex: 1;
189
+ }
190
+ }
191
+ }
192
+ }
193
+ }
194
+
195
+ .vertical-formcard-divider{
196
+ position: absolute;
197
+ height: 100%;
198
+
199
+ @media (max-aspect-ratio: 9/16) {
200
+ /* Media query for mobile */
201
+ top: theme(digitv2.spacers.spacer4);
202
+ /*height: calc(100% - 2rem);*/
203
+ }
204
+
205
+ @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
206
+ /* Media query for tablets */
207
+ top: theme(digitv2.spacers.spacer5);
208
+ /*height: calc(100% - 2.5rem);*/
209
+ }
210
+
211
+ @media (min-aspect-ratio: 3/4) {
212
+ /* Media query for desktop */
213
+ top: theme(digitv2.spacers.spacer6);
214
+ /*height: calc(100% - 3rem);*/
215
+ }
216
+ border: 0.063rem solid theme(digitv2.lightTheme.generic-divider);
217
+ z-index: 1;
218
+ }
219
+ }
220
+
221
+
222
+ .digit-form-card-content::-webkit-scrollbar {
223
+ width: theme(digitv2.spacers.spacer2);
224
+ background-color: theme(digitv2.lightTheme.generic-background);
225
+ }
226
+ .digit-form-card-content::-webkit-scrollbar-track {
227
+ background-color: theme(digitv2.lightTheme.generic-background);
228
+ border-radius: 0.563rem;
229
+ }
230
+
231
+ .digit-form-card-content::-webkit-scrollbar-thumb {
232
+ background-color: theme(digitv2.lightTheme.generic-divider);
233
+ border-radius: 0.563rem;
234
+ }