@egovernments/digit-ui-health-css 0.3.2 → 0.3.3

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.
@@ -0,0 +1,345 @@
1
+
2
+
3
+ .camp-drawer-caption{
4
+ font-size: 1rem !important;
5
+ font-weight: 400 !important;
6
+ padding-bottom: 1.5rem;
7
+ }
8
+
9
+ .camp-app-help-tutorial-popup{
10
+ bottom: 0;
11
+ top: 62vh !important;
12
+ width: 100%;
13
+ max-width:90% !important;
14
+ overflow: hidden !important;
15
+ .digit-popup-children-wrap{
16
+ overflow: hidden!important;
17
+ }
18
+ .tutorial-wrapper {
19
+ display: flex;
20
+ flex-direction: column;
21
+ gap: 1rem;
22
+ }
23
+
24
+ .tutorial-row {
25
+ display: flex;
26
+ flex-direction: row;
27
+ overflow-x: auto;
28
+ gap: 1rem;
29
+ padding-bottom: 1rem;
30
+ }
31
+
32
+ .tutorial-card {
33
+ flex: 0 0 auto;
34
+ width: 16rem;
35
+ min-height: 10rem;
36
+ background: #ffffff;
37
+ border-radius: 0.75rem;
38
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
39
+ display: flex;
40
+ flex-direction: column;
41
+ align-items: center;
42
+ justify-content: center;
43
+ padding: 1rem;
44
+ text-align: center;
45
+ cursor: pointer;
46
+ transition: transform 0.2s ease-in-out;
47
+
48
+ &:hover {
49
+ transform: translateY(-4px);
50
+ }
51
+ }
52
+
53
+ .tutorial-icon {
54
+ background-color: #f0f0f0;
55
+ border-radius: 50%;
56
+ width: 3rem;
57
+ height: 3rem;
58
+ display: flex;
59
+ align-items: center;
60
+ justify-content: center;
61
+ margin-bottom: 0.75rem;
62
+ font-size: 1.5rem;
63
+ }
64
+
65
+ .tutorial-title {
66
+ font-size: 0.95rem;
67
+ font-weight: 500;
68
+ }
69
+
70
+ }
71
+
72
+
73
+ @keyframes fadeIn {
74
+ from {
75
+ background-color: rgba(0, 0, 0, 0);
76
+ }
77
+ to {
78
+ background-color: rgba(0, 0, 0, 0.3);
79
+ }
80
+ }
81
+
82
+ @keyframes fadeOut {
83
+ from {
84
+ background-color: rgba(0, 0, 0, 0.3);
85
+ }
86
+ to {
87
+ background-color: rgba(0, 0, 0, 0);
88
+ }
89
+ }
90
+
91
+ @keyframes slideInUp {
92
+ from {
93
+ transform: translateY(100%);
94
+ opacity: 0;
95
+ }
96
+ to {
97
+ transform: translateY(0);
98
+ opacity: 1;
99
+ }
100
+ }
101
+
102
+ @keyframes slideOutDown {
103
+ from {
104
+ transform: translateY(0);
105
+ opacity: 1;
106
+ }
107
+ to {
108
+ transform: translateY(100%);
109
+ opacity: 0;
110
+ }
111
+ }
112
+
113
+ .tutorial-overlay {
114
+ position: fixed;
115
+ inset: 0;
116
+ z-index: 2999;
117
+ animation-duration: 0.3s;
118
+ animation-fill-mode: forwards;
119
+ display: flex;
120
+ justify-content: center;
121
+ align-items: flex-end;
122
+
123
+ &.fade-in {
124
+ animation-name: fadeIn;
125
+ }
126
+
127
+ &.fade-out {
128
+ animation-name: fadeOut;
129
+ }
130
+ }
131
+
132
+ .tutorial-drawer {
133
+ position: fixed;
134
+ bottom: 0;
135
+ right: 0;
136
+ left: 0;
137
+ width: 100%;
138
+ border-radius:1rem 1rem 0rem 0rem;
139
+ background: #ffffff;
140
+ box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
141
+ padding: 1rem;
142
+ z-index: 1000;
143
+ display: flex;
144
+ flex-direction: column;
145
+ animation-duration: 0.3s;
146
+ animation-fill-mode: forwards;
147
+
148
+ &.slide-in {
149
+ animation-name: slideInUp;
150
+ }
151
+
152
+ &.slide-out {
153
+ animation-name: slideOutDown;
154
+ }
155
+ }
156
+
157
+ .tutorial-header {
158
+ display: flex;
159
+ justify-content: space-between;
160
+ align-items: center;
161
+ font-weight: 600;
162
+ font-size: 1.5rem;
163
+ padding: 0.5rem;
164
+ color: theme(digitv2.lightTheme.primary-2);
165
+
166
+ }
167
+
168
+ .tutorial-close {
169
+ background: none;
170
+ border: none;
171
+ font-size: 1.25rem;
172
+ cursor: pointer;
173
+ line-height: 1;
174
+ }
175
+
176
+ .tutorial-row {
177
+ display: flex;
178
+ flex-direction: row;
179
+ overflow-x: auto;
180
+ gap: 1rem;
181
+ padding: 0.25rem;
182
+
183
+ /* Optional mobile smooth scrolling */
184
+ scroll-behavior: smooth;
185
+ -webkit-overflow-scrolling: touch;
186
+ scrollbar-width:thin;
187
+ }
188
+
189
+ .tutorial-card {
190
+ flex: 0 0 auto;
191
+ width: 18rem;
192
+ min-height: 10rem;
193
+ background: #ffffff;
194
+ border-radius: 0.5rem;
195
+ box-shadow: none;
196
+ padding: 1rem;
197
+ display: flex;
198
+ flex-direction: column;
199
+ overflow: hidden;
200
+ cursor: pointer;
201
+ transition: transform 0.2s ease-in-out;
202
+ box-shadow: 0px 2px 4px 0px #00000026;
203
+
204
+
205
+
206
+ &:hover {
207
+ transform: translateY(-4px);
208
+ }
209
+
210
+ .tutorial-card-image {
211
+ height: 5rem;
212
+ background-color: #f5f5f5;
213
+ display: flex;
214
+ align-items: center;
215
+ justify-content: center;
216
+ padding: 1rem;
217
+ img{
218
+ max-width: 5rem;
219
+ max-height: 4rem;
220
+ }
221
+ }
222
+
223
+ .tutorial-card-content {
224
+ margin: 1rem 0rem;
225
+ display: flex;
226
+ flex-direction: column;
227
+ gap: 0.25rem;
228
+
229
+ .tutorial-card-title {
230
+ font-weight: 500;
231
+ color: theme(digitv2.lightTheme.primary-2)
232
+ }
233
+
234
+ .tutorial-card-subtext {
235
+ font-size: 0.9rem;
236
+ color: #555;
237
+ }
238
+
239
+ .tutorial-card-link {
240
+ margin-top: 0.5rem;
241
+ font-size: 0.875rem;
242
+ color: theme(digitv2.lightTheme.primary);
243
+ display: flex;
244
+ align-items: center;
245
+ gap: 0.25rem;
246
+
247
+ .arrow {
248
+ font-weight: bold;
249
+ }
250
+ }
251
+ }
252
+ }
253
+
254
+
255
+ .tutorial-icon {
256
+ background-color: #f0f0f0;
257
+ border-radius: 50%;
258
+ width: 3rem;
259
+ height: 3rem;
260
+ display: flex;
261
+ align-items: center;
262
+ justify-content: center;
263
+ margin-bottom: 0.75rem;
264
+ font-size: 1.5rem;
265
+
266
+ @media (max-width: 480px) {
267
+ width: 2.5rem;
268
+ height: 2.5rem;
269
+ font-size: 1.25rem;
270
+ }
271
+ }
272
+
273
+ .tutorial-title {
274
+ font-size: 0.95rem;
275
+ font-weight: 500;
276
+
277
+ @media (max-width: 480px) {
278
+ font-size: 0.85rem;
279
+ }
280
+ }
281
+
282
+ .camp-help-button-app-configuration-redesign{
283
+ margin-right: 24rem;
284
+ }
285
+ .boldLabel{
286
+ margin-bottom: 0rem;
287
+ .digit-header-content{
288
+ font-weight: 700;
289
+ }
290
+
291
+ &.withoutMargin{
292
+ margin-bottom: 0rem !important;
293
+ }
294
+ }
295
+ .clickable:hover{
296
+ border: 0.063rem solid theme(digitv2.lightTheme.primary);
297
+ box-shadow: 0.063rem theme(digitv2.spacers.spacer1) theme(digitv2.spacers.spacer1) theme(digitv2.spacers.spacer0) #00000029;
298
+ }
299
+
300
+ .setup-campaign{
301
+ .digit-label-field-pair{
302
+ margin-bottom: 0rem;
303
+ }
304
+ }
305
+
306
+ .cmn-help-info-card{
307
+ margin: 1.5rem 1rem;
308
+ max-width: 100%;
309
+ display: column;
310
+ .cmn-help-info-card-elements-wrapper{
311
+ margin-bottom: 0.5rem;
312
+ flex-direction: column;
313
+ .digit-text-block-header-content {
314
+ flex-direction: column;
315
+ .digit-text-block-header{
316
+ line-height: 0.75rem;
317
+ font-weight:500;
318
+ font-size: 1.5rem;
319
+ }
320
+ }
321
+ ul,ol{
322
+ list-style:auto;
323
+ font-size: 1rem;
324
+ font-weight: 400;
325
+ margin-top: 0;
326
+ color: #787878;
327
+ font-weight: .875rem;
328
+ }
329
+
330
+ }
331
+
332
+ }
333
+
334
+ .digit-text-block-header-content {
335
+ flex-direction: column !important;
336
+ }
337
+ .copy-campaign-popup{
338
+ .digit-popup-heading{
339
+ color: theme(digitv2.lightTheme.primary-2);
340
+ }
341
+ .digit-popup-children-wrap{
342
+ overflow: unset !important;
343
+ }
344
+ }
345
+
@@ -198,6 +198,7 @@
198
198
  border-bottom: 4px solid theme(digitv2.lightTheme.primary);
199
199
  box-sizing: border-box;
200
200
  font-size: 1.5rem;
201
+ cursor: default;
201
202
  }
202
203
  :focus {
203
204
  outline: none;
@@ -222,6 +223,7 @@
222
223
  font-family: "Roboto";
223
224
  font-weight: 700;
224
225
  font-size: 1rem;
226
+ cursor: default;
225
227
  }
226
228
  }
227
229
  .tab-content-header {
@@ -232,7 +234,6 @@
232
234
  .card-header-delivery{
233
235
  display: flex;
234
236
  justify-content: space-between;
235
- margin-top: 1.5rem !important;
236
237
  }
237
238
 
238
239
  .deliveryType-labelfield{
@@ -241,6 +242,7 @@
241
242
 
242
243
  .delivery-rule-container {
243
244
  margin-top: 1.5rem;
245
+ margin-bottom: 1.5rem;
244
246
  .digit-card-header {
245
247
  .title {
246
248
  margin: 0 !important;
@@ -256,7 +258,6 @@
256
258
  border: 1px solid #d6d5d4;
257
259
  background-color: #fafafa;
258
260
  padding: 1rem;
259
- padding-top: 0;
260
261
  .add-attribute {
261
262
  width: 74.5%;
262
263
  justify-content: center;
@@ -105,15 +105,22 @@ header {
105
105
  @extend .typography.text-heading-xl;
106
106
  margin-bottom: 0rem;
107
107
  }
108
- .digit-button-primary {
109
- background-color: theme(digitv2.lightTheme.primary) !important;
110
- }
111
108
  .digit-button-secondary {
112
109
  .icon-label-container {
113
110
  h2 {
114
- color: theme(digitv2.lightTheme.primary) !important;
111
+ color: theme(digitv2.lightTheme.primary);
112
+ }
113
+ }
114
+ }
115
+
116
+ .card-container-delivery{
117
+ .additional-elements-column{
118
+ .icon-label-container{
119
+ .digit-button-label{
120
+ margin-top: 0.125rem;
115
121
  }
116
122
  }
123
+ }
117
124
  }
118
125
 
119
126
  /*.digit-popup-wrap {
@@ -202,10 +209,36 @@ header {
202
209
  .action-bar-wrap .actionBarClass {
203
210
  z-index: 10;
204
211
  }
205
- .campaign-flow-stepper{
212
+ .campaign-flow-stepper {
206
213
  margin-left: -5.625rem;
207
214
  margin-right: -6.875rem;
208
215
  }
209
- .wbh-header-container{
216
+ .wbh-header-container {
210
217
  margin: 0rem;
211
218
  }
219
+ .digit-description {
220
+ display: contents !important;
221
+ }
222
+ .create-campaign-disable {
223
+ opacity: 0.5;
224
+ background: #c5c5c5 !important;
225
+ }
226
+ .date-field-container {
227
+ .digit-new-date-format {
228
+ z-index: 0;
229
+ }
230
+ }
231
+
232
+ .employee-app-wrapper {
233
+ &.digit-home-app-wrapper {
234
+ .ground-container {
235
+ &.digit-home-ground {
236
+ margin-left: 0.75rem;
237
+ }
238
+ }
239
+ }
240
+ }
241
+
242
+ .digit-landing-page-card {
243
+ border-radius: 0.25rem;
244
+ }