@djb25/digit-ui-css 1.0.52 → 1.0.54
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/CitizenHomeCard.scss +197 -30
- package/src/components/actionbar.scss +11 -1
- package/src/components/card.scss +1 -2
- package/src/components/staticSideBar.scss +3 -4
- package/src/index.scss +9 -3
- package/src/pages/citizen/HomePageWrapper.scss +18 -73
- package/src/pages/employee/EmployeeModuleCard.scss +135 -0
- package/src/pages/employee/index.scss +13 -16
- package/src/pages/employee/popupmodule.scss +2 -2
package/package.json
CHANGED
|
@@ -1,56 +1,223 @@
|
|
|
1
1
|
.CitizenHomeCard {
|
|
2
|
-
|
|
2
|
+
position: relative;
|
|
3
|
+
overflow: hidden;
|
|
4
|
+
padding: 28px;
|
|
5
|
+
border-radius: 28px;
|
|
6
|
+
background: rgba(255, 255, 255, 0.72);
|
|
7
|
+
backdrop-filter: blur(20px);
|
|
8
|
+
-webkit-backdrop-filter: blur(20px);
|
|
9
|
+
border: 1px solid rgba(255, 255, 255, 0.65);
|
|
10
|
+
box-shadow: 0 0 10px rgba(15, 23, 42, 0.08);
|
|
11
|
+
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
|
12
|
+
max-width: 460px;
|
|
13
|
+
|
|
14
|
+
&:hover {
|
|
15
|
+
transform: translateY(-4px);
|
|
16
|
+
|
|
17
|
+
box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.08), 0 6px 12px rgba(15, 23, 42, 0.06);
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
.cardGlow {
|
|
21
|
+
position: absolute;
|
|
22
|
+
top: -90px;
|
|
23
|
+
right: -90px;
|
|
24
|
+
width: 240px;
|
|
25
|
+
height: 240px;
|
|
26
|
+
border-radius: 9999px;
|
|
27
|
+
background: rgba(96, 165, 250, 0.12);
|
|
28
|
+
filter: blur(60px);
|
|
29
|
+
pointer-events: none;
|
|
30
|
+
}
|
|
3
31
|
|
|
4
32
|
.header {
|
|
5
|
-
|
|
33
|
+
position: relative;
|
|
34
|
+
z-index: 2;
|
|
35
|
+
display: flex;
|
|
36
|
+
align-items: center;
|
|
37
|
+
justify-content: space-between;
|
|
38
|
+
margin-bottom: 8px;
|
|
39
|
+
border-bottom: 0;
|
|
40
|
+
background-color: transparent;
|
|
41
|
+
|
|
42
|
+
gap: 16px;
|
|
43
|
+
font-family: "Inter", system-ui, -apple-system, sans-serif;
|
|
44
|
+
.titleWrapper {
|
|
45
|
+
min-width: 0;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
.subTitle {
|
|
49
|
+
margin-bottom: 8px;
|
|
50
|
+
font-size: 12px;
|
|
51
|
+
font-weight: 600;
|
|
52
|
+
text-transform: uppercase;
|
|
53
|
+
letter-spacing: 0.2em;
|
|
54
|
+
color: #64748b;
|
|
55
|
+
}
|
|
6
56
|
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
57
|
+
h2 {
|
|
58
|
+
margin: 0;
|
|
59
|
+
font-size: 24px;
|
|
60
|
+
font-weight: 700;
|
|
61
|
+
line-height: 1.1;
|
|
62
|
+
letter-spacing: -0.03em;
|
|
63
|
+
color: #0f172a;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
.iconWrapper {
|
|
67
|
+
display: flex;
|
|
68
|
+
align-items: center;
|
|
69
|
+
justify-content: center;
|
|
70
|
+
width: 64px;
|
|
71
|
+
height: 64px;
|
|
72
|
+
border-radius: 20px;
|
|
73
|
+
background: linear-gradient(135deg, rgba(219, 234, 254, 1), rgba(224, 231, 255, 1));
|
|
74
|
+
color: #2563eb;
|
|
75
|
+
box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.8);
|
|
76
|
+
flex-shrink: 0;
|
|
77
|
+
|
|
78
|
+
svg {
|
|
79
|
+
width: 34px;
|
|
80
|
+
height: 34px;
|
|
81
|
+
}
|
|
10
82
|
}
|
|
11
83
|
}
|
|
12
84
|
|
|
13
85
|
.links {
|
|
14
|
-
|
|
86
|
+
position: relative;
|
|
87
|
+
z-index: 2;
|
|
88
|
+
display: grid;
|
|
89
|
+
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
90
|
+
gap: 16px;
|
|
91
|
+
|
|
92
|
+
.linksWrapper {
|
|
93
|
+
min-width: 0;
|
|
94
|
+
}
|
|
15
95
|
|
|
16
96
|
a {
|
|
17
|
-
|
|
97
|
+
display: flex;
|
|
98
|
+
align-items: center;
|
|
99
|
+
justify-content: space-between;
|
|
100
|
+
width: 100%;
|
|
101
|
+
padding: 16px;
|
|
102
|
+
border-radius: 18px;
|
|
103
|
+
background: rgba(255, 255, 255, 0.82);
|
|
104
|
+
border: 1px solid rgba(226, 232, 240, 0.8);
|
|
105
|
+
color: #334155;
|
|
106
|
+
font-size: 14px;
|
|
107
|
+
font-weight: 500;
|
|
108
|
+
text-decoration: none;
|
|
109
|
+
transition: all 0.25s ease;
|
|
110
|
+
overflow: hidden;
|
|
111
|
+
|
|
112
|
+
&:hover {
|
|
113
|
+
background: rgba(239, 246, 255, 0.95);
|
|
114
|
+
border-color: rgba(191, 219, 254, 1);
|
|
115
|
+
color: #2563eb;
|
|
116
|
+
transform: translateX(4px);
|
|
117
|
+
box-shadow: 0 8px 20px rgba(37, 99, 235, 0.08);
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
.linkText {
|
|
121
|
+
overflow: hidden;
|
|
122
|
+
text-overflow: ellipsis;
|
|
123
|
+
white-space: nowrap;
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
.arrow {
|
|
127
|
+
margin-left: 12px;
|
|
128
|
+
opacity: 0;
|
|
129
|
+
transform: translateX(-6px);
|
|
130
|
+
transition: all 0.25s ease;
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
&:hover .arrow {
|
|
134
|
+
opacity: 1;
|
|
135
|
+
transform: translateX(0);
|
|
136
|
+
}
|
|
137
|
+
}
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
.bottomInfo {
|
|
141
|
+
position: relative;
|
|
142
|
+
z-index: 2;
|
|
143
|
+
margin-top: 24px;
|
|
144
|
+
display: flex;
|
|
145
|
+
align-items: center;
|
|
146
|
+
justify-content: space-between;
|
|
147
|
+
padding: 14px 18px;
|
|
148
|
+
border-radius: 18px;
|
|
149
|
+
background: rgba(248, 250, 252, 0.8);
|
|
150
|
+
border: 1px solid rgba(226, 232, 240, 0.7);
|
|
151
|
+
|
|
152
|
+
.quickText {
|
|
153
|
+
margin-bottom: 2px;
|
|
154
|
+
font-size: 12px;
|
|
155
|
+
color: #64748b;
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
.quickSubText {
|
|
159
|
+
font-size: 14px;
|
|
160
|
+
font-weight: 600;
|
|
161
|
+
color: #1e293b;
|
|
162
|
+
}
|
|
163
|
+
|
|
164
|
+
.statusDot {
|
|
165
|
+
width: 10px;
|
|
166
|
+
height: 10px;
|
|
167
|
+
border-radius: 9999px;
|
|
168
|
+
background: #22c55e;
|
|
169
|
+
animation: pulse 1.5s infinite;
|
|
18
170
|
}
|
|
19
171
|
}
|
|
20
172
|
}
|
|
21
173
|
|
|
174
|
+
@keyframes pulse {
|
|
175
|
+
0% {
|
|
176
|
+
opacity: 0.5;
|
|
177
|
+
transform: scale(1);
|
|
178
|
+
}
|
|
179
|
+
|
|
180
|
+
50% {
|
|
181
|
+
opacity: 1;
|
|
182
|
+
transform: scale(1.15);
|
|
183
|
+
}
|
|
184
|
+
|
|
185
|
+
100% {
|
|
186
|
+
opacity: 0.5;
|
|
187
|
+
transform: scale(1);
|
|
188
|
+
}
|
|
189
|
+
}
|
|
190
|
+
|
|
22
191
|
@screen dt {
|
|
23
|
-
.
|
|
24
|
-
|
|
25
|
-
flex-direction: column;
|
|
26
|
-
justify-content: center;
|
|
27
|
-
flex: 1;
|
|
192
|
+
.CitizenHomeCard {
|
|
193
|
+
min-height: 100%;
|
|
28
194
|
}
|
|
195
|
+
}
|
|
29
196
|
|
|
197
|
+
@media (max-width: 640px) {
|
|
30
198
|
.CitizenHomeCard {
|
|
31
|
-
|
|
199
|
+
padding: 22px;
|
|
200
|
+
|
|
32
201
|
.header {
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
202
|
+
margin-bottom: 24px;
|
|
203
|
+
|
|
204
|
+
h2 {
|
|
205
|
+
font-size: 26px;
|
|
206
|
+
}
|
|
207
|
+
|
|
208
|
+
.iconWrapper {
|
|
209
|
+
width: 56px;
|
|
210
|
+
height: 56px;
|
|
211
|
+
|
|
212
|
+
svg {
|
|
213
|
+
width: 28px;
|
|
214
|
+
height: 28px;
|
|
215
|
+
}
|
|
36
216
|
}
|
|
37
217
|
}
|
|
38
218
|
|
|
39
219
|
.links {
|
|
40
|
-
|
|
41
|
-
.linksWrapper {
|
|
42
|
-
height: 25px;
|
|
43
|
-
margin-bottom: 0.5em;
|
|
44
|
-
}
|
|
45
|
-
a {
|
|
46
|
-
@apply pb-md;
|
|
47
|
-
padding-left: 0.2em;
|
|
48
|
-
margin-bottom: 16px;
|
|
49
|
-
width: 100%;
|
|
50
|
-
overflow: hidden;
|
|
51
|
-
text-overflow: ellipsis;
|
|
52
|
-
min-width: 0;
|
|
53
|
-
}
|
|
220
|
+
grid-template-columns: 1fr;
|
|
54
221
|
}
|
|
55
222
|
}
|
|
56
223
|
}
|
|
@@ -8,6 +8,7 @@
|
|
|
8
8
|
div {
|
|
9
9
|
@apply w-full;
|
|
10
10
|
}
|
|
11
|
+
|
|
11
12
|
.menu-wrap {
|
|
12
13
|
@apply absolute bg-white text-left mb-xs z-30 cursor-pointer;
|
|
13
14
|
bottom: 45px;
|
|
@@ -83,6 +84,7 @@
|
|
|
83
84
|
div {
|
|
84
85
|
@apply w-full;
|
|
85
86
|
}
|
|
87
|
+
|
|
86
88
|
.menu-wrap {
|
|
87
89
|
@apply absolute bg-white text-left mb-xs z-30 cursor-pointer;
|
|
88
90
|
box-shadow: rgba(0, 0, 0, 0.14) 0 8px 10px 1px, rgba(0, 0, 0, 0.12) 0 3px 14px 2px, rgba(0, 0, 0, 0.2) 0 5px 5px -3px;
|
|
@@ -92,6 +94,14 @@
|
|
|
92
94
|
div {
|
|
93
95
|
@apply h-12 pl-sm py-md text-body-l text-text-primary;
|
|
94
96
|
|
|
97
|
+
p {
|
|
98
|
+
word-wrap: break-word;
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
&:hover {
|
|
102
|
+
@apply bg-grey-mid w-full;
|
|
103
|
+
}
|
|
104
|
+
|
|
95
105
|
&:hover {
|
|
96
106
|
@apply bg-grey-mid w-full;
|
|
97
107
|
}
|
|
@@ -119,4 +129,4 @@
|
|
|
119
129
|
align-items: center;
|
|
120
130
|
margin-left: 10px;
|
|
121
131
|
}
|
|
122
|
-
}
|
|
132
|
+
}
|
package/src/components/card.scss
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
.card {
|
|
2
|
-
@apply bg-white
|
|
2
|
+
@apply bg-white px-md pt-md pb-lg shadow-card;
|
|
3
3
|
border-radius: 4px;
|
|
4
4
|
max-width: 960px;
|
|
5
5
|
|
|
@@ -485,7 +485,6 @@
|
|
|
485
485
|
|
|
486
486
|
.employeeCard-override {
|
|
487
487
|
margin-left: 0px !important;
|
|
488
|
-
padding: 40px;
|
|
489
488
|
}
|
|
490
489
|
|
|
491
490
|
.BPAemployeeCard {
|
|
@@ -26,7 +26,6 @@
|
|
|
26
26
|
}
|
|
27
27
|
}
|
|
28
28
|
|
|
29
|
-
|
|
30
29
|
.citizen-static-sidebar {
|
|
31
30
|
--sidebar-expanded: 260px;
|
|
32
31
|
--sidebar-collapsed: 76px;
|
|
@@ -49,7 +48,7 @@
|
|
|
49
48
|
position: relative;
|
|
50
49
|
z-index: 101;
|
|
51
50
|
padding-top: 70px;
|
|
52
|
-
min-height:
|
|
51
|
+
min-height: 100%;
|
|
53
52
|
}
|
|
54
53
|
|
|
55
54
|
.citizen-static-sidebar.expanded {
|
|
@@ -159,7 +158,7 @@
|
|
|
159
158
|
float: none;
|
|
160
159
|
}
|
|
161
160
|
|
|
162
|
-
.citizen-static-sidebar .drawer-desktop .menu-item .icon
|
|
161
|
+
.citizen-static-sidebar .drawer-desktop .menu-item .icon + .menu-label {
|
|
163
162
|
margin-left: 0;
|
|
164
163
|
}
|
|
165
164
|
|
|
@@ -334,4 +333,4 @@
|
|
|
334
333
|
.citizen-static-sidebar .profile-section .label-container {
|
|
335
334
|
display: flex !important;
|
|
336
335
|
}
|
|
337
|
-
}
|
|
336
|
+
}
|
package/src/index.scss
CHANGED
|
@@ -312,6 +312,7 @@ input[readonly] {
|
|
|
312
312
|
@apply border-grey-dark text-grey-dark !important;
|
|
313
313
|
pointer-events: none !important;
|
|
314
314
|
}
|
|
315
|
+
|
|
315
316
|
.disabled-label {
|
|
316
317
|
@apply border-grey-dark text-grey-dark !important;
|
|
317
318
|
pointer-events: none !important;
|
|
@@ -489,6 +490,7 @@ input[type="number"] {
|
|
|
489
490
|
.phone-input-wrapper {
|
|
490
491
|
display: flex;
|
|
491
492
|
}
|
|
493
|
+
|
|
492
494
|
.phone-input-wrapper:hover {
|
|
493
495
|
.employee-card-input--front {
|
|
494
496
|
border: 2px solid #a1a1aa;
|
|
@@ -499,6 +501,7 @@ input[type="number"] {
|
|
|
499
501
|
input {
|
|
500
502
|
border: 2px solid #a1a1aa;
|
|
501
503
|
color: #a1a1aa;
|
|
504
|
+
|
|
502
505
|
&:focus-within {
|
|
503
506
|
outline: none;
|
|
504
507
|
border-color: #007bff;
|
|
@@ -515,6 +518,7 @@ input[type="number"] {
|
|
|
515
518
|
box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
|
|
516
519
|
z-index: 1;
|
|
517
520
|
}
|
|
521
|
+
|
|
518
522
|
input {
|
|
519
523
|
outline: none;
|
|
520
524
|
border-color: #007bff;
|
|
@@ -698,9 +702,6 @@ input[type="number"] {
|
|
|
698
702
|
}
|
|
699
703
|
}
|
|
700
704
|
|
|
701
|
-
.applications-list-container {
|
|
702
|
-
}
|
|
703
|
-
|
|
704
705
|
.complaint-summary {
|
|
705
706
|
@media (min-width: 780px) {
|
|
706
707
|
flex: 1 0 auto;
|
|
@@ -767,6 +768,10 @@ input[type="number"] {
|
|
|
767
768
|
min-width: 0;
|
|
768
769
|
}
|
|
769
770
|
|
|
771
|
+
.min-width-full {
|
|
772
|
+
min-width: 100%;
|
|
773
|
+
}
|
|
774
|
+
|
|
770
775
|
.employee-app-wrapper {
|
|
771
776
|
min-height: calc(100vh - 8em);
|
|
772
777
|
height: calc(100vh - 102px);
|
|
@@ -907,6 +912,7 @@ input[type="number"] {
|
|
|
907
912
|
display: flex;
|
|
908
913
|
width: 100%;
|
|
909
914
|
height: 100%;
|
|
915
|
+
max-width: 100%;
|
|
910
916
|
}
|
|
911
917
|
|
|
912
918
|
.flex-box-center {
|
|
@@ -52,17 +52,6 @@
|
|
|
52
52
|
position: relative;
|
|
53
53
|
margin: 0px !important;
|
|
54
54
|
|
|
55
|
-
&::before {
|
|
56
|
-
content: "";
|
|
57
|
-
position: absolute;
|
|
58
|
-
left: 32px;
|
|
59
|
-
right: 32px;
|
|
60
|
-
top: 0;
|
|
61
|
-
height: 4px;
|
|
62
|
-
border-radius: 999px;
|
|
63
|
-
background: linear-gradient(90deg, rgba(59, 130, 246, 0.1), rgba(59, 130, 246, 0.8), rgba(59, 130, 246, 0.1));
|
|
64
|
-
}
|
|
65
|
-
|
|
66
55
|
.headSection {
|
|
67
56
|
@apply flex mb-sm justify-between;
|
|
68
57
|
align-items: center;
|
|
@@ -119,8 +108,7 @@
|
|
|
119
108
|
display: flex;
|
|
120
109
|
flex-direction: column;
|
|
121
110
|
gap: 30px;
|
|
122
|
-
padding:
|
|
123
|
-
margin-top: 10px;
|
|
111
|
+
padding: 32px;
|
|
124
112
|
background: rgba(255, 255, 255, 0.7);
|
|
125
113
|
backdrop-filter: blur(20px);
|
|
126
114
|
-webkit-backdrop-filter: blur(20px);
|
|
@@ -131,7 +119,7 @@
|
|
|
131
119
|
overflow: hidden;
|
|
132
120
|
}
|
|
133
121
|
|
|
134
|
-
.citizen-app-container
|
|
122
|
+
.citizen-app-container > * {
|
|
135
123
|
position: relative;
|
|
136
124
|
z-index: 1;
|
|
137
125
|
}
|
|
@@ -214,9 +202,7 @@
|
|
|
214
202
|
min-height: 82px !important;
|
|
215
203
|
overflow: hidden !important;
|
|
216
204
|
position: relative;
|
|
217
|
-
transition: border-color 0.25s ease,
|
|
218
|
-
transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1),
|
|
219
|
-
background 0.2s ease !important;
|
|
205
|
+
transition: border-color 0.25s ease, transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.2s ease !important;
|
|
220
206
|
|
|
221
207
|
&:hover {
|
|
222
208
|
border-color: #93c5fd !important;
|
|
@@ -234,8 +220,7 @@
|
|
|
234
220
|
align-items: center !important;
|
|
235
221
|
justify-content: center !important;
|
|
236
222
|
padding: 10px;
|
|
237
|
-
transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1),
|
|
238
|
-
background 0.25s ease;
|
|
223
|
+
transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.25s ease;
|
|
239
224
|
|
|
240
225
|
svg {
|
|
241
226
|
width: 22px !important;
|
|
@@ -270,8 +255,7 @@
|
|
|
270
255
|
font-weight: 500 !important;
|
|
271
256
|
color: #1e293b !important;
|
|
272
257
|
line-height: 1.35 !important;
|
|
273
|
-
transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1),
|
|
274
|
-
opacity 0.25s ease !important;
|
|
258
|
+
transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease !important;
|
|
275
259
|
transform: translateY(0);
|
|
276
260
|
opacity: 1;
|
|
277
261
|
}
|
|
@@ -287,8 +271,7 @@
|
|
|
287
271
|
font-weight: 400 !important;
|
|
288
272
|
color: #2563eb !important;
|
|
289
273
|
line-height: 1.4 !important;
|
|
290
|
-
transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1),
|
|
291
|
-
opacity 0.25s ease !important;
|
|
274
|
+
transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease !important;
|
|
292
275
|
transform: translateY(110%);
|
|
293
276
|
/* starts hidden below */
|
|
294
277
|
opacity: 0;
|
|
@@ -314,16 +297,13 @@
|
|
|
314
297
|
.SideBarStatic {
|
|
315
298
|
display: flex;
|
|
316
299
|
align-items: flex-start;
|
|
317
|
-
position: sticky;
|
|
318
|
-
top: 70px;
|
|
319
|
-
height: calc(100vh - 70px);
|
|
320
|
-
min-height: calc(100vh - 70px);
|
|
321
300
|
align-self: flex-start;
|
|
301
|
+
height: calc(100vh - 72px);
|
|
302
|
+
overflow-y: scroll;
|
|
322
303
|
}
|
|
323
304
|
}
|
|
324
305
|
|
|
325
306
|
@media (max-width: 780px) {
|
|
326
|
-
|
|
327
307
|
/* On mobile, SideBarStatic shouldn't prevent the drawer from appearing. */
|
|
328
308
|
.SideBarStatic {
|
|
329
309
|
display: block;
|
|
@@ -341,35 +321,9 @@
|
|
|
341
321
|
flex: 1;
|
|
342
322
|
min-width: 0;
|
|
343
323
|
position: relative;
|
|
344
|
-
overflow: hidden;
|
|
345
324
|
padding-bottom: 40px;
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
content: "";
|
|
349
|
-
position: absolute;
|
|
350
|
-
right: -5%;
|
|
351
|
-
top: -5%;
|
|
352
|
-
width: 50vw;
|
|
353
|
-
height: 50vw;
|
|
354
|
-
border-radius: 50%;
|
|
355
|
-
opacity: 0.8;
|
|
356
|
-
z-index: 0;
|
|
357
|
-
pointer-events: none;
|
|
358
|
-
}
|
|
359
|
-
|
|
360
|
-
&::after {
|
|
361
|
-
content: "";
|
|
362
|
-
position: absolute;
|
|
363
|
-
left: -10%;
|
|
364
|
-
bottom: -10%;
|
|
365
|
-
width: 60vw;
|
|
366
|
-
height: 60vw;
|
|
367
|
-
background: radial-gradient(circle, rgba(147, 197, 253, 0.15) 0%, rgba(147, 197, 253, 0) 70%);
|
|
368
|
-
border-radius: 50%;
|
|
369
|
-
opacity: 0.8;
|
|
370
|
-
z-index: 0;
|
|
371
|
-
pointer-events: none;
|
|
372
|
-
}
|
|
325
|
+
height: calc(100vh - 72px);
|
|
326
|
+
overflow-y: scroll;
|
|
373
327
|
}
|
|
374
328
|
|
|
375
329
|
.moduleLinkHomePage {
|
|
@@ -432,17 +386,19 @@
|
|
|
432
386
|
}
|
|
433
387
|
|
|
434
388
|
.moduleLinkHomePageModuleLinks {
|
|
435
|
-
@apply mt-
|
|
389
|
+
@apply mt-lg px-md;
|
|
436
390
|
|
|
437
391
|
.CitizenHomeCard {
|
|
438
|
-
background: rgba(255, 255, 255, 0.
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
392
|
+
background: rgba(255, 255, 255, 0.72) !important;
|
|
393
|
+
|
|
394
|
+
backdrop-filter: blur(24px);
|
|
395
|
+
|
|
442
396
|
border: 1px solid rgba(255, 255, 255, 0.9);
|
|
443
397
|
|
|
398
|
+
box-shadow: 0 12px 40px rgba(15, 23, 42, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.5);
|
|
399
|
+
|
|
444
400
|
.header {
|
|
445
|
-
|
|
401
|
+
display: flex !important;
|
|
446
402
|
}
|
|
447
403
|
}
|
|
448
404
|
}
|
|
@@ -501,14 +457,3 @@
|
|
|
501
457
|
padding: 0 2rem;
|
|
502
458
|
}
|
|
503
459
|
}
|
|
504
|
-
|
|
505
|
-
.citizen-home-container {
|
|
506
|
-
display: flex;
|
|
507
|
-
width: 100%;
|
|
508
|
-
align-items: flex-start;
|
|
509
|
-
justify-content: flex-start;
|
|
510
|
-
}
|
|
511
|
-
|
|
512
|
-
.citizen .citizen-home-container {
|
|
513
|
-
justify-content: flex-start;
|
|
514
|
-
}
|
|
@@ -0,0 +1,135 @@
|
|
|
1
|
+
.emtb-root {
|
|
2
|
+
display: none;
|
|
3
|
+
}
|
|
4
|
+
|
|
5
|
+
@media (max-width: 768px) {
|
|
6
|
+
.emtb-root {
|
|
7
|
+
display: flex;
|
|
8
|
+
position: fixed;
|
|
9
|
+
left: 0;
|
|
10
|
+
right: 0;
|
|
11
|
+
z-index: 9999;
|
|
12
|
+
background: #ffffff;
|
|
13
|
+
border-bottom: 2px solid #e5e7eb;
|
|
14
|
+
overflow-x: auto;
|
|
15
|
+
overflow-y: hidden;
|
|
16
|
+
-webkit-overflow-scrolling: touch;
|
|
17
|
+
scrollbar-width: none;
|
|
18
|
+
padding: 0 8px;
|
|
19
|
+
gap: 0;
|
|
20
|
+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
|
21
|
+
height: 48px;
|
|
22
|
+
align-items: stretch;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
.emtb-root::-webkit-scrollbar {
|
|
26
|
+
display: none;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
.emtb-page-push {
|
|
30
|
+
padding-top: 48px !important;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
.emtb-tab {
|
|
34
|
+
display: inline-flex;
|
|
35
|
+
align-items: center;
|
|
36
|
+
gap: 6px;
|
|
37
|
+
padding: 0 16px;
|
|
38
|
+
white-space: nowrap;
|
|
39
|
+
cursor: pointer;
|
|
40
|
+
position: relative;
|
|
41
|
+
color: #6b7280;
|
|
42
|
+
font-size: 13px;
|
|
43
|
+
font-weight: 500;
|
|
44
|
+
height: 100%;
|
|
45
|
+
border-bottom: 2px solid transparent;
|
|
46
|
+
margin-bottom: -2px; /* overlap the nav border-bottom */
|
|
47
|
+
transition: color 0.15s ease, border-color 0.15s ease;
|
|
48
|
+
flex-shrink: 0;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
.emtb-tab:hover {
|
|
52
|
+
color: #1a67a3;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
.emtb-tab--active {
|
|
56
|
+
color: #1a67a3;
|
|
57
|
+
font-weight: 600;
|
|
58
|
+
border-bottom-color: #1a67a3;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
.emtb-tab--disabled {
|
|
62
|
+
opacity: 0.4;
|
|
63
|
+
pointer-events: none;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
.emtb-tab__icon {
|
|
67
|
+
width: 18px;
|
|
68
|
+
height: 18px;
|
|
69
|
+
display: flex;
|
|
70
|
+
align-items: center;
|
|
71
|
+
justify-content: center;
|
|
72
|
+
flex-shrink: 0;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
.emtb-tab__icon svg {
|
|
76
|
+
width: 16px;
|
|
77
|
+
height: 16px;
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
.emtb-tab__initials {
|
|
81
|
+
font-size: 10px;
|
|
82
|
+
font-weight: 700;
|
|
83
|
+
background: #e5e7eb;
|
|
84
|
+
color: #6b7280;
|
|
85
|
+
border-radius: 4px;
|
|
86
|
+
width: 18px;
|
|
87
|
+
height: 18px;
|
|
88
|
+
display: flex;
|
|
89
|
+
align-items: center;
|
|
90
|
+
justify-content: center;
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
.emtb-tab--active .emtb-tab__initials {
|
|
94
|
+
background: #dbeafe;
|
|
95
|
+
color: #1a67a3;
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
.emtb-tab__label {
|
|
99
|
+
line-height: 1;
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
.emtb-tab__content {
|
|
103
|
+
display: flex;
|
|
104
|
+
flex-direction: column;
|
|
105
|
+
align-items: flex-start;
|
|
106
|
+
gap: 2px;
|
|
107
|
+
min-width: 0;
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
.emtb-tab__sublabel {
|
|
111
|
+
font-size: 10px;
|
|
112
|
+
line-height: 1;
|
|
113
|
+
color: #94a3b8;
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
.emtb-tab--active .emtb-tab__sublabel {
|
|
117
|
+
color: #1a67a3;
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
.emtb-tab__count {
|
|
121
|
+
display: inline-flex;
|
|
122
|
+
align-items: center;
|
|
123
|
+
justify-content: center;
|
|
124
|
+
min-width: 18px;
|
|
125
|
+
height: 18px;
|
|
126
|
+
padding: 0 6px;
|
|
127
|
+
border-radius: 9999px;
|
|
128
|
+
background: #e0f2fe;
|
|
129
|
+
color: #1a67a3;
|
|
130
|
+
font-size: 10px;
|
|
131
|
+
font-weight: 700;
|
|
132
|
+
line-height: 1;
|
|
133
|
+
margin-left: 2px;
|
|
134
|
+
}
|
|
135
|
+
}
|