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

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,357 @@
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
+
346
+
347
+
348
+
349
+ .campaign-popup-wrap{
350
+
351
+ .digit-popup-children-wrap{
352
+ overflow: visible !important;
353
+ }
354
+ }
355
+
356
+
357
+
@@ -1,15 +1,17 @@
1
1
  @import "../../typography.scss";
2
2
 
3
3
  .campaign-cycle-container {
4
- .campaign-tabs-container {
5
- }
4
+ .campaign-tabs-container {}
5
+
6
6
  .sub-tab-container {
7
7
  margin-top: 5px;
8
8
  padding: 1.5rem;
9
+
9
10
  .card-text {
10
11
  margin-bottom: 0;
11
12
  }
12
13
  }
14
+
13
15
  .add-resource-container {
14
16
  background-color: #fafafa;
15
17
  border: 1px solid #d6d5d4;
@@ -17,16 +19,19 @@
17
19
  padding: 1rem;
18
20
  margin-right: 1rem;
19
21
  margin-bottom: 1.5rem;
22
+
20
23
  .digit-card-text {
21
24
  margin: 0;
22
25
  font-weight: 700;
23
26
  }
27
+
24
28
  .header-container {
25
29
  display: flex;
26
30
  align-items: baseline;
27
31
  justify-content: space-between;
28
32
  }
29
33
  }
34
+
30
35
  .delete-resource-icon {
31
36
  cursor: pointer;
32
37
  font-weight: 600;
@@ -36,29 +41,37 @@
36
41
  gap: 0.5rem;
37
42
  align-items: center;
38
43
  }
44
+
39
45
  .add-resource-label-field-container {
40
46
  display: grid;
41
47
  grid-template-columns: 2fr 1fr;
42
48
  grid-gap: 2rem;
49
+
43
50
  .options-card {
44
51
  max-height: 10rem !important;
45
52
  }
46
53
  }
54
+
47
55
  .popup-wrap {
48
56
  .popup-module-main {
49
57
  max-height: 707px;
50
58
  overflow-y: auto;
51
59
  width: 99%;
60
+
52
61
  &::-webkit-scrollbar {
53
62
  width: 0.5rem;
54
63
  background: transparent;
55
64
  }
65
+
56
66
  &::-webkit-scrollbar-thumb {
57
- background: #d6d5d4; /* Color of the scrollbar thumb */
58
- border-radius: 5px; /* Adjust the border-radius for rounded corners */
67
+ background: #d6d5d4;
68
+ /* Color of the scrollbar thumb */
69
+ border-radius: 5px;
70
+ /* Adjust the border-radius for rounded corners */
59
71
  height: 0.5rem;
60
72
  }
61
73
  }
74
+
62
75
  .popup-module-action-bar {
63
76
  .selector-button-primary {
64
77
  padding: 0.6rem 2.5rem;
@@ -69,46 +82,56 @@
69
82
  }
70
83
  }
71
84
  }
85
+
72
86
  .selector-button-primary {
73
87
  background-color: theme(digitv2.lightTheme.primary);
74
88
  }
89
+
75
90
  .campaign-breadcrumb {
76
91
  margin: 0;
77
92
  margin-bottom: 1.5rem;
78
93
  color: theme(digitv2.lightTheme.primary) !important;
79
94
  }
95
+
80
96
  .sc-jlZhew.dVtbRz {
81
97
  overflow: hidden;
82
98
  }
99
+
83
100
  .campaign-popup-module {
84
101
  margin: auto;
85
102
  width: calc(100% - 5rem);
86
103
  }
104
+
87
105
  .campaign-bulk-upload {
88
106
  display: flex;
89
107
  justify-content: space-between;
90
- margin-bottom: 1.5rem;
108
+
91
109
  .campaign-download-template-btn {
92
110
  font-weight: 700;
93
111
  }
94
112
  }
113
+
95
114
  .bulk-info-text {
96
115
  margin-bottom: 1.5rem;
97
116
  }
117
+
98
118
  .delete-and-download-button {
99
119
  display: flex;
100
120
  gap: 1.5rem;
101
121
  }
122
+
102
123
  .bulk-upload-file {
103
124
  .uploaded-file-container {
104
125
  margin: 0;
105
126
  margin-bottom: 1.5rem;
106
127
  }
107
128
  }
129
+
108
130
  .uploaded-file-container {
109
131
  margin: 0rem;
110
132
  padding: 1rem;
111
133
  }
134
+
112
135
  .upload-drag-drop-container {
113
136
  background-color: #fafafa;
114
137
  border: 1.5px dashed #d6d5d4;
@@ -137,9 +160,11 @@
137
160
 
138
161
  .upload-drag-drop-container {
139
162
  margin-left: 0rem;
163
+
140
164
  .drag-drop {
141
165
  color: #b1b4b6;
142
166
  }
167
+
143
168
  .browse-text {
144
169
  text-decoration: underline;
145
170
  color: theme(digitv2.lightTheme.primary);
@@ -150,23 +175,29 @@
150
175
  .campaign-counter-container {
151
176
  padding: 1.5rem;
152
177
  padding-bottom: 0.5rem;
178
+
153
179
  .card-text {
154
180
  margin-top: 0;
155
181
  }
182
+
156
183
  .label-field-pair {
157
184
  margin-bottom: 1rem;
185
+
158
186
  .card-label {
159
187
  font-weight: 700;
160
188
  }
161
189
  }
190
+
162
191
  .date-field-container {
163
192
  display: grid;
164
193
  grid-template-columns: 18.75rem 18.75rem;
165
194
  grid-gap: 1.5rem;
166
195
  width: 100%;
167
196
  }
197
+
168
198
  .PlusMinus {
169
199
  width: 30%;
200
+
170
201
  input {
171
202
  width: 100%;
172
203
  }
@@ -188,6 +219,7 @@
188
219
  margin-bottom: -6px;
189
220
  border: 1px solid #d6d5d4;
190
221
  background-color: #fafafa;
222
+
191
223
  &.active {
192
224
  height: 3.375rem;
193
225
  background-color: #ffffff;
@@ -198,11 +230,14 @@
198
230
  border-bottom: 4px solid theme(digitv2.lightTheme.primary);
199
231
  box-sizing: border-box;
200
232
  font-size: 1.5rem;
233
+ cursor: default;
201
234
  }
235
+
202
236
  :focus {
203
237
  outline: none;
204
238
  }
205
239
  }
240
+
206
241
  .campaign-sub-tab-head {
207
242
  outline: none;
208
243
  background-color: #ffffff;
@@ -212,6 +247,7 @@
212
247
  width: 9.188rem;
213
248
  font-size: 1rem;
214
249
  font-weight: 400;
250
+
215
251
  &.active {
216
252
  background-color: theme(digitv2.lightTheme.primary);
217
253
  color: #ffffff;
@@ -222,29 +258,33 @@
222
258
  font-family: "Roboto";
223
259
  font-weight: 700;
224
260
  font-size: 1rem;
261
+ cursor: default;
225
262
  }
226
263
  }
264
+
227
265
  .tab-content-header {
228
266
  margin-top: 1.5rem;
229
267
  margin-bottom: 1.5rem !important;
230
268
  }
231
269
 
232
- .card-header-delivery{
270
+ .card-header-delivery {
233
271
  display: flex;
234
272
  justify-content: space-between;
235
- margin-top: 1.5rem !important;
236
273
  }
237
274
 
238
- .deliveryType-labelfield{
275
+ .deliveryType-labelfield {
239
276
  margin-top: 0.565rem;
240
277
  }
241
278
 
242
279
  .delivery-rule-container {
243
280
  margin-top: 1.5rem;
281
+ margin-bottom: 1.5rem;
282
+
244
283
  .digit-card-header {
245
284
  .title {
246
285
  margin: 0 !important;
247
286
  }
287
+
248
288
  font-size: 1.5rem !important;
249
289
  margin: 0;
250
290
  display: flex;
@@ -252,14 +292,16 @@
252
292
  justify-content: space-between;
253
293
  font-family: theme(digitv2.fontFamily.sans);
254
294
  }
295
+
255
296
  .attribute-container {
256
297
  border: 1px solid #d6d5d4;
257
298
  background-color: #fafafa;
258
299
  padding: 1rem;
259
- padding-top: 0;
300
+
260
301
  .add-attribute {
261
302
  width: 74.5%;
262
303
  justify-content: center;
304
+
263
305
  h2 {
264
306
  font-size: 1rem;
265
307
  font-family: Roboto;
@@ -269,43 +311,53 @@
269
311
  }
270
312
  }
271
313
  }
314
+
272
315
  .attribute-field-wrapper {
273
316
  margin-top: 0rem;
274
317
  display: grid;
275
318
  grid-template-columns: 1fr 1fr 1fr 1fr;
276
319
  align-items: center;
277
320
  gap: 2.5rem;
321
+
278
322
  .digit-label-field-pair {
279
323
  flex-direction: column;
280
324
  align-items: flex-start !important;
325
+
281
326
  .digit-card-label.card-label-smaller {
282
327
  font-weight: 700;
283
328
  margin-bottom: 0rem;
284
329
  }
330
+
285
331
  .employee-select-wrap.form-field {
286
332
  width: 100%;
287
333
  }
334
+
288
335
  .digit-employee-card-input {
289
336
  margin-bottom: 0;
290
337
  }
291
338
  }
339
+
292
340
  .options-card {
293
341
  max-height: 10rem !important;
294
342
  }
343
+
295
344
  .card-label {
296
345
  margin-bottom: 0.5rem;
297
346
  }
298
347
  }
348
+
299
349
  .add-rule-btn {
300
350
  margin: auto;
301
351
  margin-bottom: 1rem;
302
352
  margin-top: 1.5rem;
353
+
303
354
  h2 {
304
355
  font-family: Roboto;
305
356
  font-size: 1rem;
306
357
  font-weight: 600;
307
358
  }
308
359
  }
360
+
309
361
  .add-product-btn {
310
362
  h2 {
311
363
  font-family: Roboto;
@@ -313,35 +365,43 @@
313
365
  font-weight: 600;
314
366
  }
315
367
  }
368
+
316
369
  .popup-wrap.campaign-product-wrapper {
317
370
  .popup-module {
318
371
  width: 70%;
319
372
  padding-left: 1.5rem;
320
373
  padding-bottom: 1.5rem;
374
+
321
375
  .header-wrap {
322
376
  font-size: 1.5rem;
323
377
  font-weight: 700;
378
+
324
379
  .header-content.popup-header-fix {
325
380
  margin-top: 1.5rem;
326
381
  }
327
382
  }
328
383
  }
384
+
329
385
  .popup-module-action-bar {
330
386
  margin-top: 1.5rem;
331
387
  margin-right: 1.5rem;
332
388
  }
389
+
333
390
  }
391
+
334
392
  .search-button-wrapper {
335
393
  grid-column-end: -1 !important;
336
394
  flex-direction: row !important;
337
395
  }
338
- .add-resource-modal {
339
- }
396
+
397
+ .add-resource-modal {}
398
+
340
399
  .add-resource-wrapper {
341
400
  .link {
342
401
  color: theme(digitv2.lightTheme.primary);
343
402
  }
344
403
  }
404
+
345
405
  .digit-toast-success {
346
406
  margin-bottom: -1.25rem;
347
- }
407
+ }