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

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 (51) hide show
  1. package/CHANGELOG.md +92 -88
  2. package/README.md +80 -80
  3. package/dist/index.css +810 -16
  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 +206 -206
  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 +450 -451
  12. package/src/digitv2/components/cardV2.scss +497 -497
  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 +151 -151
  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/mobilesidebarV2.scss +439 -0
  26. package/src/digitv2/components/multiSelectDropdownV2.scss +315 -315
  27. package/src/digitv2/components/panelCardV2.scss +160 -160
  28. package/src/digitv2/components/panelV2.scss +114 -114
  29. package/src/digitv2/components/popUpV2.scss +330 -330
  30. package/src/digitv2/components/radiobtnV2.scss +115 -115
  31. package/src/digitv2/components/selectDropdownV2.scss +364 -364
  32. package/src/digitv2/components/sidebarV2.scss +409 -0
  33. package/src/digitv2/components/stepperV2.scss +147 -147
  34. package/src/digitv2/components/textInputV2.scss +462 -462
  35. package/src/digitv2/components/textareaV2.scss +99 -99
  36. package/src/digitv2/components/textblockV2.scss +46 -46
  37. package/src/digitv2/components/timelineV2.scss +170 -170
  38. package/src/digitv2/components/toastV2.scss +80 -80
  39. package/src/digitv2/components/toggleV2.scss +72 -72
  40. package/src/digitv2/components/tooltipwrapperV2.scss +96 -0
  41. package/src/digitv2/components/topbarV2.scss +387 -387
  42. package/src/digitv2/components/treeSelectV2.scss +132 -132
  43. package/src/digitv2/components/uploaderV2.scss +556 -556
  44. package/src/digitv2/components/viewCardFieldPairV2.scss +44 -44
  45. package/src/digitv2/index.scss +172 -169
  46. package/src/digitv2/pages/employee/index.scss +1 -1
  47. package/src/digitv2/pages/employee/workbench.scss +615 -615
  48. package/src/digitv2/typography.scss +638 -638
  49. package/src/index.scss +677 -681
  50. package/src/pages/employee/index.scss +625 -625
  51. package/src/pages/employee/login.scss +220 -220
package/src/digitv2/components/panelCardV2.scss CHANGED
@@ -1,161 +1,161 @@
1
- .digit-panelcard-wrap {
2
- @apply w-full flex-col;
3
- display: flex;
4
- height: fit-content;
5
- border-radius: theme(digitv2.spacers.spacer1);
6
- box-shadow: theme(digitv2.spacers.spacer0) 0.063rem 0.125rem theme(digitv2.spacers.spacer0) #00000029;
7
- background: theme(digitv2.lightTheme.paper-primary);
8
-
9
- .digit-panelcard-header{
10
-
11
- &.with-shadow {
12
- box-shadow: theme(digitv2.spacers.spacer0) 0.063rem 0.125rem theme(digitv2.spacers.spacer0) #00000026;
13
- }
14
-
15
- @media (min-width: 48rem) {
16
- padding: theme(digitv2.spacers.spacer6);
17
- padding-bottom: theme(digitv2.spacers.spacer0);
18
-
19
- &.with-shadow {
20
- padding-bottom: theme(digitv2.spacers.spacer6);
21
- }
22
- }
23
-
24
- @media (min-width: 30.063rem) and (max-width: 47.938rem) {
25
- padding: theme(digitv2.spacers.spacer5);
26
- padding-bottom: theme(digitv2.spacers.spacer0);
27
-
28
- &.with-shadow {
29
- padding-bottom: theme(digitv2.spacers.spacer5);
30
- }
31
- }
32
-
33
- @media (max-width: 30rem) {
34
- padding: theme(digitv2.spacers.spacer4);
35
- padding-bottom: theme(digitv2.spacers.spacer0);
36
-
37
- &.with-shadow {
38
- padding-bottom: theme(digitv2.spacers.spacer4);
39
- }
40
- }
41
- }
42
-
43
- .digit-panelcard-children-wrap {
44
- @apply flex-col overflow-hidden overflow-y-auto ;
45
-
46
- display: flex;
47
- flex: 1;
48
-
49
- &.inline {
50
- flex-direction: row;
51
- }
52
-
53
- @media (min-width: 48rem) {
54
- gap: theme(digitv2.spacers.spacer6);
55
- padding: theme(digitv2.spacers.spacer6) theme(digitv2.spacers.spacer6) theme(digitv2.spacers.spacer0) theme(digitv2.spacers.spacer6);
56
-
57
- &.with-shadow,
58
- &.without-footer{
59
- padding: theme(digitv2.spacers.spacer6);
60
- }
61
-
62
- }
63
-
64
- @media (min-width: 30.063rem) and (max-width: 47.938rem) {
65
- gap: theme(digitv2.spacers.spacer5);
66
- padding: theme(digitv2.spacers.spacer5) theme(digitv2.spacers.spacer5) theme(digitv2.spacers.spacer0) theme(digitv2.spacers.spacer5);
67
-
68
- &.with-shadow,
69
- &.without-footer{
70
- padding: theme(digitv2.spacers.spacer5);
71
- }
72
-
73
- }
74
-
75
- @media (max-width: 30rem) {
76
- gap: theme(digitv2.spacers.spacer4);
77
- padding: theme(digitv2.spacers.spacer4) theme(digitv2.spacers.spacer4) theme(digitv2.spacers.spacer0) theme(digitv2.spacers.spacer4);
78
-
79
- &.with-shadow,
80
- &.without-footer{
81
- padding: theme(digitv2.spacers.spacer4);
82
- }
83
- }
84
-
85
- .digit-panelcard-description {
86
- @extend .typography.body-s;
87
- color: theme(digitv2.lightTheme.generic-inputborder);
88
- }
89
-
90
- }
91
-
92
- .digit-panelcard-footer {
93
- @apply flex-wrap;
94
- display: flex;
95
- gap: theme(digitv2.spacers.spacer4);
96
-
97
- &.with-shadow {
98
- box-shadow: theme(digitv2.spacers.spacer0) -0.063rem 0.125rem theme(digitv2.spacers.spacer0) #00000026;
99
- }
100
-
101
- @media (min-width: 48rem) {
102
- padding: theme(digitv2.spacers.spacer6);
103
- }
104
-
105
- @media (min-width: 30.063rem) and (max-width: 47.938rem) {
106
- @apply w-full;
107
- padding: theme(digitv2.spacers.spacer5);
108
- }
109
-
110
- @media (max-width: 30rem) {
111
- @apply flex-col;
112
- padding: theme(digitv2.spacers.spacer4);
113
- }
114
- }
115
-
116
- .digit-panelcard-footer-buttons {
117
- margin-left: auto;
118
- display: flex;
119
- gap: theme(digitv2.spacers.spacer4);
120
- @apply max-w-full flex-wrap;
121
-
122
- @media (min-width: 30.063rem) and (max-width: 47.938rem) {
123
- @apply w-full;
124
-
125
- button {
126
- flex: 1;
127
- }
128
- }
129
-
130
- @media (max-width: 30rem) {
131
- @apply flex-col;
132
- margin: theme(digitv2.spacers.spacer0);
133
-
134
- button {
135
- width: 100%;
136
- }
137
- }
138
- }
139
-
140
- .panelcard-infocard{
141
- margin: theme(digitv2.spacers.spacer0);
142
- width: 100%;
143
- max-width: 100%;
144
- min-width: 100%;
145
- }
146
- }
147
-
148
- .digit-panelcard-children-wrap::-webkit-scrollbar {
149
- width: theme(digitv2.spacers.spacer2);
150
- background-color: theme(digitv2.lightTheme.generic-background);
151
- }
152
-
153
- .digit-panelcard-children-wrap::-webkit-scrollbar-track {
154
- background-color: theme(digitv2.lightTheme.generic-background);
155
- border-radius: 0.563rem;
156
- }
157
-
158
- .digit-panelcard-children-wrap::-webkit-scrollbar-thumb {
159
- background-color: theme(digitv2.lightTheme.generic-divider);
160
- border-radius: 0.563rem;
1
+ .digit-panelcard-wrap {
2
+ @apply w-full flex-col;
3
+ display: flex;
4
+ height: fit-content;
5
+ border-radius: theme(digitv2.spacers.spacer1);
6
+ box-shadow: theme(digitv2.spacers.spacer0) 0.063rem 0.125rem theme(digitv2.spacers.spacer0) #00000029;
7
+ background: theme(digitv2.lightTheme.paper-primary);
8
+
9
+ .digit-panelcard-header{
10
+
11
+ &.with-shadow {
12
+ box-shadow: theme(digitv2.spacers.spacer0) 0.063rem 0.125rem theme(digitv2.spacers.spacer0) #00000026;
13
+ }
14
+
15
+ @media (min-width: 48rem) {
16
+ padding: theme(digitv2.spacers.spacer6);
17
+ padding-bottom: theme(digitv2.spacers.spacer0);
18
+
19
+ &.with-shadow {
20
+ padding-bottom: theme(digitv2.spacers.spacer6);
21
+ }
22
+ }
23
+
24
+ @media (min-width: 30.063rem) and (max-width: 47.938rem) {
25
+ padding: theme(digitv2.spacers.spacer5);
26
+ padding-bottom: theme(digitv2.spacers.spacer0);
27
+
28
+ &.with-shadow {
29
+ padding-bottom: theme(digitv2.spacers.spacer5);
30
+ }
31
+ }
32
+
33
+ @media (max-width: 30rem) {
34
+ padding: theme(digitv2.spacers.spacer4);
35
+ padding-bottom: theme(digitv2.spacers.spacer0);
36
+
37
+ &.with-shadow {
38
+ padding-bottom: theme(digitv2.spacers.spacer4);
39
+ }
40
+ }
41
+ }
42
+
43
+ .digit-panelcard-children-wrap {
44
+ @apply flex-col overflow-hidden overflow-y-auto ;
45
+
46
+ display: flex;
47
+ flex: 1;
48
+
49
+ &.inline {
50
+ flex-direction: row;
51
+ }
52
+
53
+ @media (min-width: 48rem) {
54
+ gap: theme(digitv2.spacers.spacer6);
55
+ padding: theme(digitv2.spacers.spacer6) theme(digitv2.spacers.spacer6) theme(digitv2.spacers.spacer0) theme(digitv2.spacers.spacer6);
56
+
57
+ &.with-shadow,
58
+ &.without-footer{
59
+ padding: theme(digitv2.spacers.spacer6);
60
+ }
61
+
62
+ }
63
+
64
+ @media (min-width: 30.063rem) and (max-width: 47.938rem) {
65
+ gap: theme(digitv2.spacers.spacer5);
66
+ padding: theme(digitv2.spacers.spacer5) theme(digitv2.spacers.spacer5) theme(digitv2.spacers.spacer0) theme(digitv2.spacers.spacer5);
67
+
68
+ &.with-shadow,
69
+ &.without-footer{
70
+ padding: theme(digitv2.spacers.spacer5);
71
+ }
72
+
73
+ }
74
+
75
+ @media (max-width: 30rem) {
76
+ gap: theme(digitv2.spacers.spacer4);
77
+ padding: theme(digitv2.spacers.spacer4) theme(digitv2.spacers.spacer4) theme(digitv2.spacers.spacer0) theme(digitv2.spacers.spacer4);
78
+
79
+ &.with-shadow,
80
+ &.without-footer{
81
+ padding: theme(digitv2.spacers.spacer4);
82
+ }
83
+ }
84
+
85
+ .digit-panelcard-description {
86
+ @extend .typography.body-s;
87
+ color: theme(digitv2.lightTheme.generic-inputborder);
88
+ }
89
+
90
+ }
91
+
92
+ .digit-panelcard-footer {
93
+ @apply flex-wrap;
94
+ display: flex;
95
+ gap: theme(digitv2.spacers.spacer4);
96
+
97
+ &.with-shadow {
98
+ box-shadow: theme(digitv2.spacers.spacer0) -0.063rem 0.125rem theme(digitv2.spacers.spacer0) #00000026;
99
+ }
100
+
101
+ @media (min-width: 48rem) {
102
+ padding: theme(digitv2.spacers.spacer6);
103
+ }
104
+
105
+ @media (min-width: 30.063rem) and (max-width: 47.938rem) {
106
+ @apply w-full;
107
+ padding: theme(digitv2.spacers.spacer5);
108
+ }
109
+
110
+ @media (max-width: 30rem) {
111
+ @apply flex-col;
112
+ padding: theme(digitv2.spacers.spacer4);
113
+ }
114
+ }
115
+
116
+ .digit-panelcard-footer-buttons {
117
+ margin-left: auto;
118
+ display: flex;
119
+ gap: theme(digitv2.spacers.spacer4);
120
+ @apply max-w-full flex-wrap;
121
+
122
+ @media (min-width: 30.063rem) and (max-width: 47.938rem) {
123
+ @apply w-full;
124
+
125
+ button {
126
+ flex: 1;
127
+ }
128
+ }
129
+
130
+ @media (max-width: 30rem) {
131
+ @apply flex-col;
132
+ margin: theme(digitv2.spacers.spacer0);
133
+
134
+ button {
135
+ width: 100%;
136
+ }
137
+ }
138
+ }
139
+
140
+ .panelcard-infocard{
141
+ margin: theme(digitv2.spacers.spacer0);
142
+ width: 100%;
143
+ max-width: 100%;
144
+ min-width: 100%;
145
+ }
146
+ }
147
+
148
+ .digit-panelcard-children-wrap::-webkit-scrollbar {
149
+ width: theme(digitv2.spacers.spacer2);
150
+ background-color: theme(digitv2.lightTheme.generic-background);
151
+ }
152
+
153
+ .digit-panelcard-children-wrap::-webkit-scrollbar-track {
154
+ background-color: theme(digitv2.lightTheme.generic-background);
155
+ border-radius: 0.563rem;
156
+ }
157
+
158
+ .digit-panelcard-children-wrap::-webkit-scrollbar-thumb {
159
+ background-color: theme(digitv2.lightTheme.generic-divider);
160
+ border-radius: 0.563rem;
161
161
  }
package/src/digitv2/components/panelV2.scss CHANGED
@@ -1,115 +1,115 @@
1
- .digit-panel-wrapper {
2
- @apply flex flex-col items-center;
3
- gap: theme(digitv2.spacers.spacer6);
4
-
5
- &.success {
6
- background-color: theme(digitv2.lightTheme.alert-success);
7
-
8
- @media (min-width: 48rem) {
9
- padding: theme(digitv2.spacers.spacer10);
10
- padding-top: 0.703rem;
11
- }
12
-
13
- @media (min-width: 30.063rem) and (max-width: 47.938rem) {
14
- padding: theme(digitv2.spacers.spacer10);
15
- padding-top: theme(digitv2.spacers.spacer4);
16
- }
17
-
18
- @media (max-width: 30rem) {
19
- padding: theme(digitv2.spacers.spacer8) theme(digitv2.spacers.spacer10);
20
- padding-top: theme(digitv2.spacers.spacer4);
21
- }
22
-
23
- }
24
-
25
- &.error,
26
- &.with-svg {
27
-
28
- @media (min-width: 48rem) {
29
- padding: theme(digitv2.spacers.spacer10);
30
- }
31
-
32
- @media (min-width: 30.063rem) and (max-width: 47.938rem) {
33
- padding: theme(digitv2.spacers.spacer10);
34
- }
35
-
36
- @media (max-width: 30rem) {
37
- padding: theme(digitv2.spacers.spacer8) theme(digitv2.spacers.spacer10);
38
- }
39
- }
40
-
41
- &.error {
42
- background-color: theme(digitv2.lightTheme.alert-error);
43
- }
44
-
45
- .digit-panel-message-wrapper {
46
- @apply items-center;
47
- display: flex;
48
- flex-direction: column !important;
49
-
50
- &.success {
51
-
52
- @media (min-width: 48rem) {
53
- gap: 0.422rem;
54
- }
55
-
56
- @media (min-width: 30.063rem) and (max-width: 47.938rem) {
57
- gap: theme(digitv2.spacers.spacer2);
58
- }
59
-
60
- @media (max-width: 30rem) {
61
- gap: theme(digitv2.spacers.spacer2);
62
- }
63
- }
64
-
65
-
66
- &.error,
67
- &.with-svg {
68
-
69
- @media (min-width: 48rem) {
70
- gap: theme(digitv2.spacers.spacer6);
71
- }
72
-
73
- @media (min-width: 30.063rem) and (max-width: 47.938rem) {
74
- gap: theme(digitv2.spacers.spacer5);
75
- }
76
-
77
- @media (max-width: 30rem) {
78
- gap: theme(digitv2.spacers.spacer4);
79
- }
80
-
81
- }
82
-
83
- .digit-panel-message {
84
- @extend .typography.heading-xl;
85
- @apply whitespace-pre-wrap break-words text-center;
86
- line-height: normal;
87
- color: theme(digitv2.lightTheme.paper-primary);
88
- }
89
- }
90
-
91
- .digit-panel-info-wrapper {
92
- display: flex;
93
- flex-direction: column !important;
94
- align-items: center;
95
- gap: theme(digitv2.spacers.spacer1);
96
-
97
- .digit-panel-info {
98
- @extend .typography.body-l;
99
- color: theme(digitv2.lightTheme.paper-primary);
100
- }
101
-
102
- .digit-panel-multiple-responses {
103
- display: flex;
104
- flex-direction: column;
105
- gap: theme(digitv2.spacers.spacer1);
106
- }
107
-
108
- .digit-panel-response {
109
- @extend .typography.heading-m;
110
- color: theme(digitv2.lightTheme.paper-primary);
111
- line-height: normal;
112
- }
113
-
114
- }
1
+ .digit-panel-wrapper {
2
+ @apply flex flex-col items-center;
3
+ gap: theme(digitv2.spacers.spacer6);
4
+
5
+ &.success {
6
+ background-color: theme(digitv2.lightTheme.alert-success);
7
+
8
+ @media (min-width: 48rem) {
9
+ padding: theme(digitv2.spacers.spacer10);
10
+ padding-top: 0.703rem;
11
+ }
12
+
13
+ @media (min-width: 30.063rem) and (max-width: 47.938rem) {
14
+ padding: theme(digitv2.spacers.spacer10);
15
+ padding-top: theme(digitv2.spacers.spacer4);
16
+ }
17
+
18
+ @media (max-width: 30rem) {
19
+ padding: theme(digitv2.spacers.spacer8) theme(digitv2.spacers.spacer10);
20
+ padding-top: theme(digitv2.spacers.spacer4);
21
+ }
22
+
23
+ }
24
+
25
+ &.error,
26
+ &.with-svg {
27
+
28
+ @media (min-width: 48rem) {
29
+ padding: theme(digitv2.spacers.spacer10);
30
+ }
31
+
32
+ @media (min-width: 30.063rem) and (max-width: 47.938rem) {
33
+ padding: theme(digitv2.spacers.spacer10);
34
+ }
35
+
36
+ @media (max-width: 30rem) {
37
+ padding: theme(digitv2.spacers.spacer8) theme(digitv2.spacers.spacer10);
38
+ }
39
+ }
40
+
41
+ &.error {
42
+ background-color: theme(digitv2.lightTheme.alert-error);
43
+ }
44
+
45
+ .digit-panel-message-wrapper {
46
+ @apply items-center;
47
+ display: flex;
48
+ flex-direction: column !important;
49
+
50
+ &.success {
51
+
52
+ @media (min-width: 48rem) {
53
+ gap: 0.422rem;
54
+ }
55
+
56
+ @media (min-width: 30.063rem) and (max-width: 47.938rem) {
57
+ gap: theme(digitv2.spacers.spacer2);
58
+ }
59
+
60
+ @media (max-width: 30rem) {
61
+ gap: theme(digitv2.spacers.spacer2);
62
+ }
63
+ }
64
+
65
+
66
+ &.error,
67
+ &.with-svg {
68
+
69
+ @media (min-width: 48rem) {
70
+ gap: theme(digitv2.spacers.spacer6);
71
+ }
72
+
73
+ @media (min-width: 30.063rem) and (max-width: 47.938rem) {
74
+ gap: theme(digitv2.spacers.spacer5);
75
+ }
76
+
77
+ @media (max-width: 30rem) {
78
+ gap: theme(digitv2.spacers.spacer4);
79
+ }
80
+
81
+ }
82
+
83
+ .digit-panel-message {
84
+ @extend .typography.heading-xl;
85
+ @apply whitespace-pre-wrap break-words text-center;
86
+ line-height: normal;
87
+ color: theme(digitv2.lightTheme.paper-primary);
88
+ }
89
+ }
90
+
91
+ .digit-panel-info-wrapper {
92
+ display: flex;
93
+ flex-direction: column !important;
94
+ align-items: center;
95
+ gap: theme(digitv2.spacers.spacer1);
96
+
97
+ .digit-panel-info {
98
+ @extend .typography.body-l;
99
+ color: theme(digitv2.lightTheme.paper-primary);
100
+ }
101
+
102
+ .digit-panel-multiple-responses {
103
+ display: flex;
104
+ flex-direction: column;
105
+ gap: theme(digitv2.spacers.spacer1);
106
+ }
107
+
108
+ .digit-panel-response {
109
+ @extend .typography.heading-m;
110
+ color: theme(digitv2.lightTheme.paper-primary);
111
+ line-height: normal;
112
+ }
113
+
114
+ }
115
115
  }