@djb25/digit-ui-css 1.0.14 → 1.0.16
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.
- package/dist/index.css +1 -1
- package/dist/index.min.css +1 -1
- package/package.json +1 -1
- package/src/components/card.scss +33 -75
- package/src/components/juridictions.scss +23 -0
- package/src/components/landingpage.scss +156 -237
- package/src/components/moduleHeader.scss +27 -5
- package/src/components/textfields.scss +4 -7
- package/src/index.scss +13 -0
- package/src/pages/citizen/HomePageWrapper.scss +107 -0
- package/src/pages/employee/container.scss +10 -2
- package/src/pages/employee/ekyc.scss +61 -8
- package/src/pages/employee/form-fields.scss +14 -8
- package/src/pages/employee/inbox.scss +3 -10
- package/src/pages/employee/index.scss +403 -25
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
.module-header {
|
|
2
|
-
display: flex;
|
|
3
2
|
justify-content: center;
|
|
4
3
|
align-items: center;
|
|
5
4
|
|
|
@@ -10,17 +9,34 @@
|
|
|
10
9
|
border-radius: 11px;
|
|
11
10
|
margin-inline: 42px;
|
|
12
11
|
|
|
13
|
-
|
|
12
|
+
|
|
14
13
|
align-items: center;
|
|
15
14
|
justify-content: center;
|
|
16
15
|
|
|
17
|
-
|
|
16
|
+
/* 3D Box Shadow with Bevel Highlight */
|
|
17
|
+
box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.4),
|
|
18
|
+
0 8px 16px -4px rgba(0, 0, 0, 0.15),
|
|
19
|
+
0 4px 8px -4px rgba(0, 0, 0, 0.1);
|
|
20
|
+
/* Modern Glass Effect */
|
|
21
|
+
backdrop-filter: blur(10px);
|
|
22
|
+
-webkit-backdrop-filter: blur(10px);
|
|
23
|
+
border: 1px solid rgba(255, 255, 255, 0.3);
|
|
24
|
+
/* Hover Lift Effect */
|
|
25
|
+
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
|
26
|
+
|
|
27
|
+
&:hover {
|
|
28
|
+
transform: translateY(-2px);
|
|
29
|
+
box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.5),
|
|
30
|
+
0 12px 20px -4px rgba(0, 0, 0, 0.2),
|
|
31
|
+
0 6px 10px -4px rgba(0, 0, 0, 0.15);
|
|
32
|
+
}
|
|
18
33
|
|
|
19
34
|
.title {
|
|
20
35
|
margin: 0;
|
|
21
36
|
font-size: 25px;
|
|
22
37
|
font-weight: 700;
|
|
23
38
|
color: #000000;
|
|
39
|
+
text-shadow: 0px 1px 2px rgba(255, 255, 255, 0.5);
|
|
24
40
|
}
|
|
25
41
|
}
|
|
26
42
|
|
|
@@ -34,7 +50,13 @@
|
|
|
34
50
|
align-items: center;
|
|
35
51
|
justify-content: flex-start;
|
|
36
52
|
color: #fff;
|
|
37
|
-
|
|
53
|
+
/* Matching 3D Shadow and Bevel for Bottom Section */
|
|
54
|
+
box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.3),
|
|
55
|
+
0 4px 8px -2px rgba(0, 0, 0, 0.1);
|
|
56
|
+
backdrop-filter: blur(10px);
|
|
57
|
+
-webkit-backdrop-filter: blur(10px);
|
|
58
|
+
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
59
|
+
border-top: none;
|
|
38
60
|
font-size: 14px;
|
|
39
61
|
font-weight: 500;
|
|
40
62
|
|
|
@@ -88,4 +110,4 @@
|
|
|
88
110
|
padding-right: 20px;
|
|
89
111
|
}
|
|
90
112
|
}
|
|
91
|
-
}
|
|
113
|
+
}
|
|
@@ -7,8 +7,9 @@
|
|
|
7
7
|
}
|
|
8
8
|
|
|
9
9
|
.employee-card-input {
|
|
10
|
-
@apply
|
|
10
|
+
@apply pl-sm outline-none block border w-full h-10 border-input-border border-solid bg-white leading-10 text-form-field text-text-primary rounded-md;
|
|
11
11
|
}
|
|
12
|
+
|
|
12
13
|
.employee-card-input:disabled {
|
|
13
14
|
@apply border-grey-dark text-grey-dark !important;
|
|
14
15
|
pointer-events: none !important;
|
|
@@ -59,18 +60,14 @@
|
|
|
59
60
|
width: 480px;
|
|
60
61
|
}
|
|
61
62
|
|
|
62
|
-
.employee-card-input {
|
|
63
|
-
@apply w-full;
|
|
64
|
-
}
|
|
65
|
-
|
|
66
63
|
.employee-card-input-error {
|
|
67
64
|
@apply w-full;
|
|
68
65
|
}
|
|
69
66
|
|
|
70
67
|
.card-textarea {
|
|
71
|
-
|
|
68
|
+
/* //width: 480px; */
|
|
72
69
|
@apply w-full;
|
|
73
|
-
max-width:540px;
|
|
70
|
+
max-width: 540px;
|
|
74
71
|
}
|
|
75
72
|
|
|
76
73
|
.employee-card-textarea {
|
package/src/index.scss
CHANGED
|
@@ -114,6 +114,7 @@
|
|
|
114
114
|
@import "./components//sidebar.scss";
|
|
115
115
|
@import "./components/moduleHeader.scss";
|
|
116
116
|
@import "./components/VerticalTimeline.scss";
|
|
117
|
+
@import "./components/juridictions.scss";
|
|
117
118
|
|
|
118
119
|
.display-none {
|
|
119
120
|
display: none;
|
|
@@ -540,6 +541,17 @@ input[type="number"] {
|
|
|
540
541
|
@apply flex;
|
|
541
542
|
}
|
|
542
543
|
|
|
544
|
+
.form-search-wrapper {
|
|
545
|
+
flex: 1;
|
|
546
|
+
min-width: 0;
|
|
547
|
+
}
|
|
548
|
+
|
|
549
|
+
.result {
|
|
550
|
+
display: flex;
|
|
551
|
+
flex-direction: column;
|
|
552
|
+
overflow-x: scroll;
|
|
553
|
+
border-radius: 6px;
|
|
554
|
+
}
|
|
543
555
|
.inbox-search-container {
|
|
544
556
|
.result {
|
|
545
557
|
@apply mt-lg;
|
|
@@ -698,6 +710,7 @@ input[type="number"] {
|
|
|
698
710
|
.app-wrapper {
|
|
699
711
|
width: 100%;
|
|
700
712
|
flex: 1;
|
|
713
|
+
min-width: 0;
|
|
701
714
|
overflow-y: scroll;
|
|
702
715
|
}
|
|
703
716
|
|
|
@@ -62,6 +62,113 @@
|
|
|
62
62
|
width: 100%;
|
|
63
63
|
}
|
|
64
64
|
}
|
|
65
|
+
|
|
66
|
+
/* ===== Citizen Theme (Matching Employee Dashboard) ===== */
|
|
67
|
+
.citizen-app-container {
|
|
68
|
+
width: 100%;
|
|
69
|
+
display: flex;
|
|
70
|
+
flex-direction: column;
|
|
71
|
+
gap: 12px;
|
|
72
|
+
padding: 12px 24px;
|
|
73
|
+
margin-top: 45px;
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
.citizen-module-header {
|
|
77
|
+
display: flex;
|
|
78
|
+
justify-content: center;
|
|
79
|
+
align-items: center;
|
|
80
|
+
width: 100%;
|
|
81
|
+
|
|
82
|
+
.citizen-header-top-section {
|
|
83
|
+
width: 100% !important;
|
|
84
|
+
background: #7a99f1 !important;
|
|
85
|
+
padding: 16px 32px !important;
|
|
86
|
+
border-radius: 8px !important;
|
|
87
|
+
display: flex !important;
|
|
88
|
+
align-items: center !important;
|
|
89
|
+
justify-content: flex-end !important;
|
|
90
|
+
min-height: 56px !important;
|
|
91
|
+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
.citizen-header-title {
|
|
95
|
+
margin: 0;
|
|
96
|
+
font-size: 24px;
|
|
97
|
+
font-weight: 600;
|
|
98
|
+
color: #ffffff;
|
|
99
|
+
}
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
.citizen-module-grid {
|
|
103
|
+
display: grid;
|
|
104
|
+
grid-template-columns: repeat(4, 1fr);
|
|
105
|
+
gap: 16px;
|
|
106
|
+
padding: 0;
|
|
107
|
+
width: 100%;
|
|
108
|
+
|
|
109
|
+
@media (max-width: 1024px) {
|
|
110
|
+
grid-template-columns: repeat(3, 1fr);
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
@media (max-width: 768px) {
|
|
114
|
+
grid-template-columns: repeat(2, 1fr);
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
@media (max-width: 480px) {
|
|
118
|
+
grid-template-columns: repeat(2, 1fr);
|
|
119
|
+
gap: 10px;
|
|
120
|
+
}
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
.citizen-service-card {
|
|
124
|
+
background: #ffffff !important;
|
|
125
|
+
border-radius: 12px !important;
|
|
126
|
+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
|
|
127
|
+
padding: 24px !important;
|
|
128
|
+
display: flex !important;
|
|
129
|
+
flex-direction: row !important;
|
|
130
|
+
align-items: center !important;
|
|
131
|
+
justify-content: flex-start !important;
|
|
132
|
+
cursor: pointer !important;
|
|
133
|
+
transition: all 0.2s ease !important;
|
|
134
|
+
border: 1px solid #eeeeee !important;
|
|
135
|
+
min-height: 100px !important;
|
|
136
|
+
gap: 16px !important;
|
|
137
|
+
|
|
138
|
+
&:hover {
|
|
139
|
+
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
|
|
140
|
+
transform: translateY(-2px);
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
&__icon {
|
|
144
|
+
width: 40px !important;
|
|
145
|
+
height: 40px !important;
|
|
146
|
+
display: flex !important;
|
|
147
|
+
align-items: center !important;
|
|
148
|
+
justify-content: center !important;
|
|
149
|
+
flex-shrink: 0 !important;
|
|
150
|
+
|
|
151
|
+
svg {
|
|
152
|
+
width: 100% !important;
|
|
153
|
+
height: 100% !important;
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
img {
|
|
157
|
+
width: 100% !important;
|
|
158
|
+
height: 100% !important;
|
|
159
|
+
}
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
&__label {
|
|
163
|
+
margin: 0 !important;
|
|
164
|
+
font-size: 16px !important;
|
|
165
|
+
font-weight: 500 !important;
|
|
166
|
+
color: #333333 !important;
|
|
167
|
+
text-align: left !important;
|
|
168
|
+
width: auto !important;
|
|
169
|
+
flex: 1 !important;
|
|
170
|
+
}
|
|
171
|
+
}
|
|
65
172
|
}
|
|
66
173
|
|
|
67
174
|
@media (min-width: 780px) {
|
|
@@ -72,6 +72,13 @@
|
|
|
72
72
|
width: 100%;
|
|
73
73
|
}
|
|
74
74
|
|
|
75
|
+
.gridModuleWrapper {
|
|
76
|
+
display: flex;
|
|
77
|
+
flex-direction: column;
|
|
78
|
+
gap: 20px;
|
|
79
|
+
padding: 10px;
|
|
80
|
+
}
|
|
81
|
+
|
|
75
82
|
@screen dt {
|
|
76
83
|
.employee-app-wrapper {
|
|
77
84
|
flex-direction: row;
|
|
@@ -99,7 +106,8 @@
|
|
|
99
106
|
margin-bottom: 40px;
|
|
100
107
|
}
|
|
101
108
|
|
|
102
|
-
.employee-home-footer {
|
|
109
|
+
.employee-home-footer {
|
|
110
|
+
}
|
|
103
111
|
|
|
104
112
|
.moduleCardWrapper {
|
|
105
113
|
/* @apply flex flex-row flex-wrap !important; */
|
|
@@ -109,4 +117,4 @@
|
|
|
109
117
|
@apply grid grid-cols-4 gap-1;
|
|
110
118
|
gap: 20px;
|
|
111
119
|
}
|
|
112
|
-
}
|
|
120
|
+
}
|
|
@@ -2,13 +2,15 @@
|
|
|
2
2
|
.inbox-main-container {
|
|
3
3
|
flex: 1;
|
|
4
4
|
padding-right: -24px;
|
|
5
|
-
background-color: #
|
|
5
|
+
background-color: #ffffff;
|
|
6
|
+
border-radius: 12px;
|
|
6
7
|
}
|
|
7
8
|
|
|
8
9
|
.inbox-wrapper {
|
|
9
10
|
min-width: 100%;
|
|
10
11
|
padding: 24px;
|
|
11
12
|
background-color: rgb(241 241 241);
|
|
13
|
+
border-radius: 12px;
|
|
12
14
|
}
|
|
13
15
|
|
|
14
16
|
.ekyc-header-container {
|
|
@@ -58,9 +60,11 @@
|
|
|
58
60
|
margin-bottom: 24px;
|
|
59
61
|
padding: 20px;
|
|
60
62
|
background-color: #fff;
|
|
63
|
+
border-radius: 12px;
|
|
61
64
|
}
|
|
62
65
|
|
|
63
66
|
.ekyc-search-container {
|
|
67
|
+
width: 100%;
|
|
64
68
|
flex: 1;
|
|
65
69
|
|
|
66
70
|
.search-inner {
|
|
@@ -69,18 +73,67 @@
|
|
|
69
73
|
border: none;
|
|
70
74
|
}
|
|
71
75
|
|
|
72
|
-
.
|
|
73
|
-
display:
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
76
|
+
.search-field-wrapper {
|
|
77
|
+
display: flex;
|
|
78
|
+
align-items: flex-end;
|
|
79
|
+
gap: 24px;
|
|
80
|
+
width: 100%;
|
|
77
81
|
}
|
|
78
82
|
|
|
79
|
-
.
|
|
83
|
+
.search-fields-container {
|
|
84
|
+
display: flex;
|
|
85
|
+
flex-wrap: wrap;
|
|
86
|
+
gap: 24px;
|
|
87
|
+
flex: 1;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
.search-field {
|
|
91
|
+
display: flex;
|
|
92
|
+
flex-direction: column;
|
|
93
|
+
gap: 8px;
|
|
94
|
+
min-width: 250px;
|
|
95
|
+
flex: 1;
|
|
96
|
+
|
|
97
|
+
label {
|
|
98
|
+
margin-bottom: 0 !important;
|
|
99
|
+
margin-top: 20px !important;
|
|
100
|
+
font-size: 16px !important;
|
|
101
|
+
font-weight: 600 !important;
|
|
102
|
+
color: #344054 !important;
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
input,
|
|
106
|
+
.dropdown-wrapper {
|
|
107
|
+
border-radius: 12px !important;
|
|
108
|
+
height: 40px !important;
|
|
109
|
+
}
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
.search-action-container {
|
|
80
113
|
display: flex;
|
|
81
114
|
align-items: center;
|
|
82
115
|
gap: 20px;
|
|
83
|
-
|
|
116
|
+
margin-left: auto;
|
|
117
|
+
padding-bottom: 4px;
|
|
118
|
+
|
|
119
|
+
.submit-bar {
|
|
120
|
+
height: 40px !important;
|
|
121
|
+
padding: 0 24px !important;
|
|
122
|
+
margin-bottom: 0 !important;
|
|
123
|
+
border-radius: 12px !important;
|
|
124
|
+
position: relative !important;
|
|
125
|
+
top: -20px !important;
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
.link-label {
|
|
129
|
+
margin: 0 !important;
|
|
130
|
+
font-weight: 600 !important;
|
|
131
|
+
cursor: pointer !important;
|
|
132
|
+
white-space: nowrap !important;
|
|
133
|
+
position: relative !important;
|
|
134
|
+
top: -20px !important;
|
|
135
|
+
color: #F47738 !important;
|
|
136
|
+
}
|
|
84
137
|
}
|
|
85
138
|
}
|
|
86
139
|
|
|
@@ -1,13 +1,19 @@
|
|
|
1
|
-
.form-field{
|
|
2
|
-
|
|
1
|
+
.form-field {
|
|
2
|
+
@apply w-full;
|
|
3
3
|
}
|
|
4
4
|
|
|
5
5
|
@screen dt {
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
6
|
+
.form-field {
|
|
7
|
+
@apply w-1/2;
|
|
8
|
+
}
|
|
9
9
|
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
10
|
+
.desktop-w-full {
|
|
11
|
+
@apply w-full !important;
|
|
12
|
+
}
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
.stepper-form-wrapper {
|
|
16
|
+
display: grid;
|
|
17
|
+
grid-template-columns: repeat(2, 1fr);
|
|
18
|
+
gap: 20px;
|
|
13
19
|
}
|
|
@@ -138,9 +138,11 @@
|
|
|
138
138
|
}
|
|
139
139
|
|
|
140
140
|
.inbox-container {
|
|
141
|
+
gap: 16px;
|
|
141
142
|
.filters-container {
|
|
142
143
|
.filter {
|
|
143
144
|
.filter-card {
|
|
145
|
+
border-radius: 6px;
|
|
144
146
|
@apply bg-white;
|
|
145
147
|
padding: 10px;
|
|
146
148
|
|
|
@@ -191,9 +193,6 @@
|
|
|
191
193
|
}
|
|
192
194
|
}
|
|
193
195
|
}
|
|
194
|
-
|
|
195
|
-
.mobile-input {
|
|
196
|
-
}
|
|
197
196
|
}
|
|
198
197
|
}
|
|
199
198
|
}
|
|
@@ -324,6 +323,7 @@
|
|
|
324
323
|
width: 874px;
|
|
325
324
|
|
|
326
325
|
.search-complaint-container {
|
|
326
|
+
border-radius: 6px;
|
|
327
327
|
width: 100%;
|
|
328
328
|
margin: auto;
|
|
329
329
|
@apply flex flex-col items-start mb-md bg-white p-md;
|
|
@@ -407,10 +407,6 @@
|
|
|
407
407
|
}
|
|
408
408
|
}
|
|
409
409
|
}
|
|
410
|
-
|
|
411
|
-
.mobile-input {
|
|
412
|
-
@apply ml-sm;
|
|
413
|
-
}
|
|
414
410
|
}
|
|
415
411
|
|
|
416
412
|
.search-action-wrapper {
|
|
@@ -425,9 +421,6 @@
|
|
|
425
421
|
}
|
|
426
422
|
}
|
|
427
423
|
}
|
|
428
|
-
|
|
429
|
-
.search-complaint-container-for-search {
|
|
430
|
-
}
|
|
431
424
|
}
|
|
432
425
|
}
|
|
433
426
|
}
|