@gomusdev/web-components 0.0.9 → 0.1.1
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/README.md +6 -0
- package/dist-js/gomus-webcomponents.css +977 -0
- package/dist-js/gomus-webcomponents.iife.js +239 -128
- package/package.json +2 -1
|
@@ -0,0 +1,977 @@
|
|
|
1
|
+
|
|
2
|
+
/* General reset for list items */
|
|
3
|
+
|
|
4
|
+
:global .innerZoomElementWrapper h3 {
|
|
5
|
+
margin-top: 4rem;
|
|
6
|
+
margin-bottom: 1rem;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
:global .innerZoomElementWrapper go-tickets {
|
|
10
|
+
display: flex;
|
|
11
|
+
flex-direction: column;
|
|
12
|
+
gap: 1rem;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
:global .innerZoomElementWrapper go-tickets label {
|
|
16
|
+
display: inline-block;
|
|
17
|
+
padding: 10px 20px;
|
|
18
|
+
border: 2px solid #ccc;
|
|
19
|
+
border-radius: 5px;
|
|
20
|
+
cursor: pointer;
|
|
21
|
+
transition:
|
|
22
|
+
background-color 0.3s, border-color 0.3s;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
/* Available timeslot */
|
|
26
|
+
|
|
27
|
+
:global .innerZoomElementWrapper go-tickets .available {
|
|
28
|
+
background-color: #fff;
|
|
29
|
+
color: #333;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
:global .innerZoomElementWrapper go-tickets input[type='checkbox'] {
|
|
33
|
+
display: none; /* Hide the radio button */
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
/* When a timeslot is selected (checked radio button) */
|
|
37
|
+
|
|
38
|
+
:global .innerZoomElementWrapper go-tickets label:has(input[type='checkbox']:checked) {
|
|
39
|
+
background-color: #12826a;
|
|
40
|
+
background-color: var(--primary); /* blue-green color */
|
|
41
|
+
border-color: #12826a;
|
|
42
|
+
border-color: var(--primary);
|
|
43
|
+
color: white;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
/* Finished (unavailable) timeslot */
|
|
47
|
+
|
|
48
|
+
:global .innerZoomElementWrapper go-tickets .finished {
|
|
49
|
+
background-color: #f0f0f0;
|
|
50
|
+
color: #999;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
:global .innerZoomElementWrapper go-tickets .finished input {
|
|
54
|
+
display: none;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
:global .innerZoomElementWrapper go-tickets .finished {
|
|
58
|
+
pointer-events: none;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
/* Disabled radio button appearance */
|
|
62
|
+
|
|
63
|
+
:global .innerZoomElementWrapper go-tickets input:disabled + label {
|
|
64
|
+
background-color: #e0e0e0;
|
|
65
|
+
color: #bbb;
|
|
66
|
+
cursor: not-allowed;
|
|
67
|
+
border-color: #ddd;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
:global .innerZoomElementWrapper go-tickets label:hover {
|
|
71
|
+
background-color: #f0f0f0;
|
|
72
|
+
border-color: #aaa;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
/* Focus state for better accessibility */
|
|
76
|
+
|
|
77
|
+
:global .innerZoomElementWrapper go-tickets input:focus + label {
|
|
78
|
+
outline: 2px solid #0052cc;
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
:global .innerZoomElementWrapper .events ul {
|
|
82
|
+
list-style: none;
|
|
83
|
+
display: grid;
|
|
84
|
+
grid-template-columns: repeat(auto-fit, 10rem);
|
|
85
|
+
grid-gap: 1rem;
|
|
86
|
+
gap: 1rem;
|
|
87
|
+
grid-template-rows: auto auto auto;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
:global .innerZoomElementWrapper .events li {
|
|
91
|
+
display: flex;
|
|
92
|
+
flex-direction: column;
|
|
93
|
+
justify-content: space-between;
|
|
94
|
+
height: 100%;
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
:global .innerZoomElementWrapper .events go-event {
|
|
98
|
+
background: #fff0dd; /* Soft light gray for a modern look */
|
|
99
|
+
padding: 1.5rem;
|
|
100
|
+
display: flex;
|
|
101
|
+
flex-direction: column;
|
|
102
|
+
border-radius: 1rem; /* Larger radius for a smoother, rounded appearance */
|
|
103
|
+
height: 100%; /* Ensures cells stretch to fill the row height */
|
|
104
|
+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
|
|
105
|
+
transition: box-shadow 0.3s ease; /* Smooth shadow transition on hover */
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
:global .innerZoomElementWrapper .events go-event:hover {
|
|
109
|
+
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15); /* Slightly stronger shadow on hover */
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
:global .innerZoomElementWrapper .events go-event-title {
|
|
113
|
+
font-weight: bold;
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
:global .innerZoomElementWrapper .events go-event-kind {
|
|
117
|
+
font-size: 0.8rem;
|
|
118
|
+
flex: 100;
|
|
119
|
+
margin-bottom: 1rem;
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
:global .innerZoomElementWrapper .events go-event-date {
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
:host,
|
|
126
|
+
:root {
|
|
127
|
+
--black: #111;
|
|
128
|
+
--red: red;
|
|
129
|
+
--light-red: #fff0f0;
|
|
130
|
+
--primary: #12826a;
|
|
131
|
+
--invalid-border: 4px solid var(--red);
|
|
132
|
+
--color-contrast: #111;
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
:host,
|
|
136
|
+
:root {
|
|
137
|
+
--color-contrast: #111;
|
|
138
|
+
--black: #111;
|
|
139
|
+
--red: red;
|
|
140
|
+
--light-red: #fff0f0;
|
|
141
|
+
--primary: #12826a;
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
:host .is-invalid {
|
|
145
|
+
--color-contrast: #ff0000;
|
|
146
|
+
background-color: #fff0f0;
|
|
147
|
+
background-color: var(--light-red);
|
|
148
|
+
border-left: 4px solid red;
|
|
149
|
+
border-left: var(--invalid-border);
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
:root .is-invalid {
|
|
153
|
+
--color-contrast: #ff0000;
|
|
154
|
+
background-color: #fff0f0;
|
|
155
|
+
background-color: var(--light-red);
|
|
156
|
+
border-left: 4px solid red;
|
|
157
|
+
border-left: var(--invalid-border);
|
|
158
|
+
}
|
|
159
|
+
|
|
160
|
+
:host .form-group {
|
|
161
|
+
margin-bottom: 0.5rem;
|
|
162
|
+
display: flex;
|
|
163
|
+
flex-direction: column;
|
|
164
|
+
--invalid-border: 4px solid var(--red);
|
|
165
|
+
|
|
166
|
+
padding: 0.5rem;
|
|
167
|
+
}
|
|
168
|
+
|
|
169
|
+
:root .form-group {
|
|
170
|
+
margin-bottom: 0.5rem;
|
|
171
|
+
display: flex;
|
|
172
|
+
flex-direction: column;
|
|
173
|
+
--invalid-border: 4px solid var(--red);
|
|
174
|
+
|
|
175
|
+
padding: 0.5rem;
|
|
176
|
+
}
|
|
177
|
+
|
|
178
|
+
:host .go-field {
|
|
179
|
+
margin-bottom: 0.5rem;
|
|
180
|
+
display: flex;
|
|
181
|
+
flex-direction: column;
|
|
182
|
+
--invalid-border: 4px solid var(--red);
|
|
183
|
+
|
|
184
|
+
padding: 0.5rem;
|
|
185
|
+
}
|
|
186
|
+
|
|
187
|
+
:root .go-field {
|
|
188
|
+
margin-bottom: 0.5rem;
|
|
189
|
+
display: flex;
|
|
190
|
+
flex-direction: column;
|
|
191
|
+
--invalid-border: 4px solid var(--red);
|
|
192
|
+
|
|
193
|
+
padding: 0.5rem;
|
|
194
|
+
}
|
|
195
|
+
|
|
196
|
+
:host .form-group label {
|
|
197
|
+
font-weight: bold;
|
|
198
|
+
margin-bottom: 0.25rem;
|
|
199
|
+
color: #111;
|
|
200
|
+
color: var(--color-contrast);
|
|
201
|
+
}
|
|
202
|
+
|
|
203
|
+
:root .form-group label {
|
|
204
|
+
font-weight: bold;
|
|
205
|
+
margin-bottom: 0.25rem;
|
|
206
|
+
color: #111;
|
|
207
|
+
color: var(--color-contrast);
|
|
208
|
+
}
|
|
209
|
+
|
|
210
|
+
:host .go-field label {
|
|
211
|
+
font-weight: bold;
|
|
212
|
+
margin-bottom: 0.25rem;
|
|
213
|
+
color: #111;
|
|
214
|
+
color: var(--color-contrast);
|
|
215
|
+
}
|
|
216
|
+
|
|
217
|
+
:root .go-field label {
|
|
218
|
+
font-weight: bold;
|
|
219
|
+
margin-bottom: 0.25rem;
|
|
220
|
+
color: #111;
|
|
221
|
+
color: var(--color-contrast);
|
|
222
|
+
}
|
|
223
|
+
|
|
224
|
+
:host .form-group input {
|
|
225
|
+
padding: 0.5rem;
|
|
226
|
+
font-size: 1rem;
|
|
227
|
+
border: 1px solid #111;
|
|
228
|
+
border: 1px solid var(--color-contrast);
|
|
229
|
+
border-radius: 0.25rem;
|
|
230
|
+
background-color: #fff;
|
|
231
|
+
color: #111;
|
|
232
|
+
color: var(--color-contrast);
|
|
233
|
+
transition: border-color 0.3s ease;
|
|
234
|
+
}
|
|
235
|
+
|
|
236
|
+
:root .form-group input {
|
|
237
|
+
padding: 0.5rem;
|
|
238
|
+
font-size: 1rem;
|
|
239
|
+
border: 1px solid #111;
|
|
240
|
+
border: 1px solid var(--color-contrast);
|
|
241
|
+
border-radius: 0.25rem;
|
|
242
|
+
background-color: #fff;
|
|
243
|
+
color: #111;
|
|
244
|
+
color: var(--color-contrast);
|
|
245
|
+
transition: border-color 0.3s ease;
|
|
246
|
+
}
|
|
247
|
+
|
|
248
|
+
:host .go-field input {
|
|
249
|
+
padding: 0.5rem;
|
|
250
|
+
font-size: 1rem;
|
|
251
|
+
border: 1px solid #111;
|
|
252
|
+
border: 1px solid var(--color-contrast);
|
|
253
|
+
border-radius: 0.25rem;
|
|
254
|
+
background-color: #fff;
|
|
255
|
+
color: #111;
|
|
256
|
+
color: var(--color-contrast);
|
|
257
|
+
transition: border-color 0.3s ease;
|
|
258
|
+
}
|
|
259
|
+
|
|
260
|
+
:root .go-field input {
|
|
261
|
+
padding: 0.5rem;
|
|
262
|
+
font-size: 1rem;
|
|
263
|
+
border: 1px solid #111;
|
|
264
|
+
border: 1px solid var(--color-contrast);
|
|
265
|
+
border-radius: 0.25rem;
|
|
266
|
+
background-color: #fff;
|
|
267
|
+
color: #111;
|
|
268
|
+
color: var(--color-contrast);
|
|
269
|
+
transition: border-color 0.3s ease;
|
|
270
|
+
}
|
|
271
|
+
|
|
272
|
+
:host .form-group select {
|
|
273
|
+
padding: 0.5rem;
|
|
274
|
+
font-size: 1rem;
|
|
275
|
+
border: 1px solid #111;
|
|
276
|
+
border: 1px solid var(--color-contrast);
|
|
277
|
+
border-radius: 0.25rem;
|
|
278
|
+
background-color: #fff;
|
|
279
|
+
color: #111;
|
|
280
|
+
color: var(--color-contrast);
|
|
281
|
+
transition: border-color 0.3s ease;
|
|
282
|
+
}
|
|
283
|
+
|
|
284
|
+
:root .form-group select {
|
|
285
|
+
padding: 0.5rem;
|
|
286
|
+
font-size: 1rem;
|
|
287
|
+
border: 1px solid #111;
|
|
288
|
+
border: 1px solid var(--color-contrast);
|
|
289
|
+
border-radius: 0.25rem;
|
|
290
|
+
background-color: #fff;
|
|
291
|
+
color: #111;
|
|
292
|
+
color: var(--color-contrast);
|
|
293
|
+
transition: border-color 0.3s ease;
|
|
294
|
+
}
|
|
295
|
+
|
|
296
|
+
:host .go-field select {
|
|
297
|
+
padding: 0.5rem;
|
|
298
|
+
font-size: 1rem;
|
|
299
|
+
border: 1px solid #111;
|
|
300
|
+
border: 1px solid var(--color-contrast);
|
|
301
|
+
border-radius: 0.25rem;
|
|
302
|
+
background-color: #fff;
|
|
303
|
+
color: #111;
|
|
304
|
+
color: var(--color-contrast);
|
|
305
|
+
transition: border-color 0.3s ease;
|
|
306
|
+
}
|
|
307
|
+
|
|
308
|
+
:root .go-field select {
|
|
309
|
+
padding: 0.5rem;
|
|
310
|
+
font-size: 1rem;
|
|
311
|
+
border: 1px solid #111;
|
|
312
|
+
border: 1px solid var(--color-contrast);
|
|
313
|
+
border-radius: 0.25rem;
|
|
314
|
+
background-color: #fff;
|
|
315
|
+
color: #111;
|
|
316
|
+
color: var(--color-contrast);
|
|
317
|
+
transition: border-color 0.3s ease;
|
|
318
|
+
}
|
|
319
|
+
|
|
320
|
+
:host .form-group textarea {
|
|
321
|
+
padding: 0.5rem;
|
|
322
|
+
font-size: 1rem;
|
|
323
|
+
border: 1px solid #111;
|
|
324
|
+
border: 1px solid var(--color-contrast);
|
|
325
|
+
border-radius: 0.25rem;
|
|
326
|
+
background-color: #fff;
|
|
327
|
+
color: #111;
|
|
328
|
+
color: var(--color-contrast);
|
|
329
|
+
transition: border-color 0.3s ease;
|
|
330
|
+
}
|
|
331
|
+
|
|
332
|
+
:root .form-group textarea {
|
|
333
|
+
padding: 0.5rem;
|
|
334
|
+
font-size: 1rem;
|
|
335
|
+
border: 1px solid #111;
|
|
336
|
+
border: 1px solid var(--color-contrast);
|
|
337
|
+
border-radius: 0.25rem;
|
|
338
|
+
background-color: #fff;
|
|
339
|
+
color: #111;
|
|
340
|
+
color: var(--color-contrast);
|
|
341
|
+
transition: border-color 0.3s ease;
|
|
342
|
+
}
|
|
343
|
+
|
|
344
|
+
:host .go-field textarea {
|
|
345
|
+
padding: 0.5rem;
|
|
346
|
+
font-size: 1rem;
|
|
347
|
+
border: 1px solid #111;
|
|
348
|
+
border: 1px solid var(--color-contrast);
|
|
349
|
+
border-radius: 0.25rem;
|
|
350
|
+
background-color: #fff;
|
|
351
|
+
color: #111;
|
|
352
|
+
color: var(--color-contrast);
|
|
353
|
+
transition: border-color 0.3s ease;
|
|
354
|
+
}
|
|
355
|
+
|
|
356
|
+
:root .go-field textarea {
|
|
357
|
+
padding: 0.5rem;
|
|
358
|
+
font-size: 1rem;
|
|
359
|
+
border: 1px solid #111;
|
|
360
|
+
border: 1px solid var(--color-contrast);
|
|
361
|
+
border-radius: 0.25rem;
|
|
362
|
+
background-color: #fff;
|
|
363
|
+
color: #111;
|
|
364
|
+
color: var(--color-contrast);
|
|
365
|
+
transition: border-color 0.3s ease;
|
|
366
|
+
}
|
|
367
|
+
|
|
368
|
+
:host .form-group input:focus {
|
|
369
|
+
outline: none;
|
|
370
|
+
border-color: #111;
|
|
371
|
+
border-color: var(--color-contrast);
|
|
372
|
+
}
|
|
373
|
+
|
|
374
|
+
:root .form-group input:focus {
|
|
375
|
+
outline: none;
|
|
376
|
+
border-color: #111;
|
|
377
|
+
border-color: var(--color-contrast);
|
|
378
|
+
}
|
|
379
|
+
|
|
380
|
+
:host .go-field input:focus {
|
|
381
|
+
outline: none;
|
|
382
|
+
border-color: #111;
|
|
383
|
+
border-color: var(--color-contrast);
|
|
384
|
+
}
|
|
385
|
+
|
|
386
|
+
:root .go-field input:focus {
|
|
387
|
+
outline: none;
|
|
388
|
+
border-color: #111;
|
|
389
|
+
border-color: var(--color-contrast);
|
|
390
|
+
}
|
|
391
|
+
|
|
392
|
+
:host .form-group select:focus {
|
|
393
|
+
outline: none;
|
|
394
|
+
border-color: #111;
|
|
395
|
+
border-color: var(--color-contrast);
|
|
396
|
+
}
|
|
397
|
+
|
|
398
|
+
:root .form-group select:focus {
|
|
399
|
+
outline: none;
|
|
400
|
+
border-color: #111;
|
|
401
|
+
border-color: var(--color-contrast);
|
|
402
|
+
}
|
|
403
|
+
|
|
404
|
+
:host .go-field select:focus {
|
|
405
|
+
outline: none;
|
|
406
|
+
border-color: #111;
|
|
407
|
+
border-color: var(--color-contrast);
|
|
408
|
+
}
|
|
409
|
+
|
|
410
|
+
:root .go-field select:focus {
|
|
411
|
+
outline: none;
|
|
412
|
+
border-color: #111;
|
|
413
|
+
border-color: var(--color-contrast);
|
|
414
|
+
}
|
|
415
|
+
|
|
416
|
+
:host .form-group textarea:focus {
|
|
417
|
+
outline: none;
|
|
418
|
+
border-color: #111;
|
|
419
|
+
border-color: var(--color-contrast);
|
|
420
|
+
}
|
|
421
|
+
|
|
422
|
+
:root .form-group textarea:focus {
|
|
423
|
+
outline: none;
|
|
424
|
+
border-color: #111;
|
|
425
|
+
border-color: var(--color-contrast);
|
|
426
|
+
}
|
|
427
|
+
|
|
428
|
+
:host .go-field textarea:focus {
|
|
429
|
+
outline: none;
|
|
430
|
+
border-color: #111;
|
|
431
|
+
border-color: var(--color-contrast);
|
|
432
|
+
}
|
|
433
|
+
|
|
434
|
+
:root .go-field textarea:focus {
|
|
435
|
+
outline: none;
|
|
436
|
+
border-color: #111;
|
|
437
|
+
border-color: var(--color-contrast);
|
|
438
|
+
}
|
|
439
|
+
|
|
440
|
+
:host .form-group .error {
|
|
441
|
+
color: red;
|
|
442
|
+
font-size: 0.875rem;
|
|
443
|
+
margin-top: 0.25rem;
|
|
444
|
+
}
|
|
445
|
+
|
|
446
|
+
:root .form-group .error {
|
|
447
|
+
color: red;
|
|
448
|
+
font-size: 0.875rem;
|
|
449
|
+
margin-top: 0.25rem;
|
|
450
|
+
}
|
|
451
|
+
|
|
452
|
+
:host .go-field .error {
|
|
453
|
+
color: red;
|
|
454
|
+
font-size: 0.875rem;
|
|
455
|
+
margin-top: 0.25rem;
|
|
456
|
+
}
|
|
457
|
+
|
|
458
|
+
:root .go-field .error {
|
|
459
|
+
color: red;
|
|
460
|
+
font-size: 0.875rem;
|
|
461
|
+
margin-top: 0.25rem;
|
|
462
|
+
}
|
|
463
|
+
|
|
464
|
+
:host .form-group .success {
|
|
465
|
+
margin-top: 1rem;
|
|
466
|
+
color: green;
|
|
467
|
+
font-weight: bold;
|
|
468
|
+
}
|
|
469
|
+
|
|
470
|
+
:root .form-group .success {
|
|
471
|
+
margin-top: 1rem;
|
|
472
|
+
color: green;
|
|
473
|
+
font-weight: bold;
|
|
474
|
+
}
|
|
475
|
+
|
|
476
|
+
:host .go-field .success {
|
|
477
|
+
margin-top: 1rem;
|
|
478
|
+
color: green;
|
|
479
|
+
font-weight: bold;
|
|
480
|
+
}
|
|
481
|
+
|
|
482
|
+
:root .go-field .success {
|
|
483
|
+
margin-top: 1rem;
|
|
484
|
+
color: green;
|
|
485
|
+
font-weight: bold;
|
|
486
|
+
}
|
|
487
|
+
|
|
488
|
+
:host ul {
|
|
489
|
+
list-style: none;
|
|
490
|
+
padding: 0;
|
|
491
|
+
margin: 0;
|
|
492
|
+
}
|
|
493
|
+
|
|
494
|
+
:root ul {
|
|
495
|
+
list-style: none;
|
|
496
|
+
padding: 0;
|
|
497
|
+
margin: 0;
|
|
498
|
+
}
|
|
499
|
+
|
|
500
|
+
:host .go-error {
|
|
501
|
+
color: red;
|
|
502
|
+
font-size: 0.875rem;
|
|
503
|
+
margin-top: 0.25rem;
|
|
504
|
+
min-height: 1rem;
|
|
505
|
+
min-height: 1lh;
|
|
506
|
+
}
|
|
507
|
+
|
|
508
|
+
:root .go-error {
|
|
509
|
+
color: red;
|
|
510
|
+
font-size: 0.875rem;
|
|
511
|
+
margin-top: 0.25rem;
|
|
512
|
+
min-height: 1rem;
|
|
513
|
+
min-height: 1lh;
|
|
514
|
+
}
|
|
515
|
+
|
|
516
|
+
:host .go-field-star {
|
|
517
|
+
color: red;
|
|
518
|
+
font-size: 0.875rem;
|
|
519
|
+
margin-left: 0.25rem;
|
|
520
|
+
}
|
|
521
|
+
|
|
522
|
+
:root .go-field-star {
|
|
523
|
+
color: red;
|
|
524
|
+
font-size: 0.875rem;
|
|
525
|
+
margin-left: 0.25rem;
|
|
526
|
+
}
|
|
527
|
+
|
|
528
|
+
:host .sr-only {
|
|
529
|
+
position: absolute;
|
|
530
|
+
width: 1px;
|
|
531
|
+
height: 1px;
|
|
532
|
+
padding: 0;
|
|
533
|
+
margin: -1px;
|
|
534
|
+
overflow: hidden;
|
|
535
|
+
clip: rect(0, 0, 0, 0);
|
|
536
|
+
white-space: nowrap;
|
|
537
|
+
border-width: 0;
|
|
538
|
+
}
|
|
539
|
+
|
|
540
|
+
:root .sr-only {
|
|
541
|
+
position: absolute;
|
|
542
|
+
width: 1px;
|
|
543
|
+
height: 1px;
|
|
544
|
+
padding: 0;
|
|
545
|
+
margin: -1px;
|
|
546
|
+
overflow: hidden;
|
|
547
|
+
clip: rect(0, 0, 0, 0);
|
|
548
|
+
white-space: nowrap;
|
|
549
|
+
border-width: 0;
|
|
550
|
+
}
|
|
551
|
+
|
|
552
|
+
:host .go-feedback {
|
|
553
|
+
margin-bottom: 1rem;
|
|
554
|
+
margin-top: 2rem;
|
|
555
|
+
padding: 0.5rem;
|
|
556
|
+
}
|
|
557
|
+
|
|
558
|
+
:root .go-feedback {
|
|
559
|
+
margin-bottom: 1rem;
|
|
560
|
+
margin-top: 2rem;
|
|
561
|
+
padding: 0.5rem;
|
|
562
|
+
}
|
|
563
|
+
|
|
564
|
+
:host .go-feedback p {
|
|
565
|
+
margin: 0;
|
|
566
|
+
}
|
|
567
|
+
|
|
568
|
+
:root .go-feedback p {
|
|
569
|
+
margin: 0;
|
|
570
|
+
}
|
|
571
|
+
|
|
572
|
+
:host .go-feedback.is-invalid {
|
|
573
|
+
background-color: #fff0f0;
|
|
574
|
+
background-color: var(--light-red);
|
|
575
|
+
border-left: 4px solid red;
|
|
576
|
+
border-left: var(--invalid-border);
|
|
577
|
+
}
|
|
578
|
+
|
|
579
|
+
:root .go-feedback.is-invalid {
|
|
580
|
+
background-color: #fff0f0;
|
|
581
|
+
background-color: var(--light-red);
|
|
582
|
+
border-left: 4px solid red;
|
|
583
|
+
border-left: var(--invalid-border);
|
|
584
|
+
}
|
|
585
|
+
|
|
586
|
+
:host .go-feedback.is-successful {
|
|
587
|
+
background-color: #f0fff0;
|
|
588
|
+
border-left: 4px solid #3c763d;
|
|
589
|
+
}
|
|
590
|
+
|
|
591
|
+
:root .go-feedback.is-successful {
|
|
592
|
+
background-color: #f0fff0;
|
|
593
|
+
border-left: 4px solid #3c763d;
|
|
594
|
+
}
|
|
595
|
+
|
|
596
|
+
:host a {
|
|
597
|
+
color: #12826a;
|
|
598
|
+
color: var(--primary);
|
|
599
|
+
}
|
|
600
|
+
|
|
601
|
+
:root a {
|
|
602
|
+
color: #12826a;
|
|
603
|
+
color: var(--primary);
|
|
604
|
+
}
|
|
605
|
+
|
|
606
|
+
:host button {
|
|
607
|
+
margin-top: 2rem;
|
|
608
|
+
background-color: #12826a;
|
|
609
|
+
background-color: var(--primary);
|
|
610
|
+
color: white;
|
|
611
|
+
font-size: 1.2rem;
|
|
612
|
+
padding: 20px 60px;
|
|
613
|
+
border: none;
|
|
614
|
+
border-radius: 5px;
|
|
615
|
+
cursor: pointer;
|
|
616
|
+
transition: background-color 0.3s ease;
|
|
617
|
+
}
|
|
618
|
+
|
|
619
|
+
:root button {
|
|
620
|
+
margin-top: 2rem;
|
|
621
|
+
background-color: #12826a;
|
|
622
|
+
background-color: var(--primary);
|
|
623
|
+
color: white;
|
|
624
|
+
font-size: 1.2rem;
|
|
625
|
+
padding: 20px 60px;
|
|
626
|
+
border: none;
|
|
627
|
+
border-radius: 5px;
|
|
628
|
+
cursor: pointer;
|
|
629
|
+
transition: background-color 0.3s ease;
|
|
630
|
+
}
|
|
631
|
+
|
|
632
|
+
:host button:hover {
|
|
633
|
+
background-color: #125948;
|
|
634
|
+
}
|
|
635
|
+
|
|
636
|
+
:root button:hover {
|
|
637
|
+
background-color: #125948;
|
|
638
|
+
}
|
|
639
|
+
|
|
640
|
+
:host go-events {
|
|
641
|
+
/* Ensure CSS variables are defined */
|
|
642
|
+
--primary: #12826a;
|
|
643
|
+
}
|
|
644
|
+
|
|
645
|
+
:root go-events {
|
|
646
|
+
/* Ensure CSS variables are defined */
|
|
647
|
+
--primary: #12826a;
|
|
648
|
+
}
|
|
649
|
+
|
|
650
|
+
:host go-events ul {
|
|
651
|
+
display: grid;
|
|
652
|
+
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
|
|
653
|
+
grid-gap: 1rem;
|
|
654
|
+
gap: 1rem;
|
|
655
|
+
padding: 0;
|
|
656
|
+
list-style: none;
|
|
657
|
+
}
|
|
658
|
+
|
|
659
|
+
:root go-events ul {
|
|
660
|
+
display: grid;
|
|
661
|
+
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
|
|
662
|
+
grid-gap: 1rem;
|
|
663
|
+
gap: 1rem;
|
|
664
|
+
padding: 0;
|
|
665
|
+
list-style: none;
|
|
666
|
+
}
|
|
667
|
+
|
|
668
|
+
:host go-events ul li {
|
|
669
|
+
background-color: #fff;
|
|
670
|
+
border-radius: 10px;
|
|
671
|
+
overflow: hidden;
|
|
672
|
+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
|
|
673
|
+
transition:
|
|
674
|
+
transform 0.2s ease, box-shadow 0.2s ease, border 0.2s ease;
|
|
675
|
+
display: flex;
|
|
676
|
+
flex-direction: column;
|
|
677
|
+
cursor: pointer;
|
|
678
|
+
border: 1px solid transparent;
|
|
679
|
+
}
|
|
680
|
+
|
|
681
|
+
:root go-events ul li {
|
|
682
|
+
background-color: #fff;
|
|
683
|
+
border-radius: 10px;
|
|
684
|
+
overflow: hidden;
|
|
685
|
+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
|
|
686
|
+
transition:
|
|
687
|
+
transform 0.2s ease, box-shadow 0.2s ease, border 0.2s ease;
|
|
688
|
+
display: flex;
|
|
689
|
+
flex-direction: column;
|
|
690
|
+
cursor: pointer;
|
|
691
|
+
border: 1px solid transparent;
|
|
692
|
+
}
|
|
693
|
+
|
|
694
|
+
:host go-events ul li:hover {
|
|
695
|
+
transform: translateY(-4px);
|
|
696
|
+
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
|
|
697
|
+
border: 1px solid #12826a;
|
|
698
|
+
border: 1px solid var(--primary);
|
|
699
|
+
}
|
|
700
|
+
|
|
701
|
+
:root go-events ul li:hover {
|
|
702
|
+
transform: translateY(-4px);
|
|
703
|
+
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
|
|
704
|
+
border: 1px solid #12826a;
|
|
705
|
+
border: 1px solid var(--primary);
|
|
706
|
+
}
|
|
707
|
+
|
|
708
|
+
:host go-events ul li go-event {
|
|
709
|
+
display: flex;
|
|
710
|
+
flex-direction: column;
|
|
711
|
+
height: 100%;
|
|
712
|
+
|
|
713
|
+
/* Image container */
|
|
714
|
+
}
|
|
715
|
+
|
|
716
|
+
:root go-events ul li go-event {
|
|
717
|
+
display: flex;
|
|
718
|
+
flex-direction: column;
|
|
719
|
+
height: 100%;
|
|
720
|
+
|
|
721
|
+
/* Image container */
|
|
722
|
+
}
|
|
723
|
+
|
|
724
|
+
:host go-events ul li go-event go-event-image {
|
|
725
|
+
display: block;
|
|
726
|
+
width: 100%;
|
|
727
|
+
aspect-ratio: 3 / 2;
|
|
728
|
+
-o-object-fit: cover;
|
|
729
|
+
object-fit: cover;
|
|
730
|
+
height: 200px;
|
|
731
|
+
overflow: hidden;
|
|
732
|
+
}
|
|
733
|
+
|
|
734
|
+
:root go-events ul li go-event go-event-image {
|
|
735
|
+
display: block;
|
|
736
|
+
width: 100%;
|
|
737
|
+
aspect-ratio: 3 / 2;
|
|
738
|
+
-o-object-fit: cover;
|
|
739
|
+
object-fit: cover;
|
|
740
|
+
height: 200px;
|
|
741
|
+
overflow: hidden;
|
|
742
|
+
}
|
|
743
|
+
|
|
744
|
+
:host go-events ul li go-event img {
|
|
745
|
+
max-width: 100%;
|
|
746
|
+
max-height: 100%;
|
|
747
|
+
}
|
|
748
|
+
|
|
749
|
+
:root go-events ul li go-event img {
|
|
750
|
+
max-width: 100%;
|
|
751
|
+
max-height: 100%;
|
|
752
|
+
}
|
|
753
|
+
|
|
754
|
+
/* Title container */
|
|
755
|
+
|
|
756
|
+
:host go-events ul li go-event go-event-title {
|
|
757
|
+
padding: 0.75rem 1rem;
|
|
758
|
+
font-size: 1rem;
|
|
759
|
+
font-weight: 600;
|
|
760
|
+
color: #12826a;
|
|
761
|
+
color: var(--primary);
|
|
762
|
+
}
|
|
763
|
+
|
|
764
|
+
:root go-events ul li go-event go-event-title {
|
|
765
|
+
padding: 0.75rem 1rem;
|
|
766
|
+
font-size: 1rem;
|
|
767
|
+
font-weight: 600;
|
|
768
|
+
color: #12826a;
|
|
769
|
+
color: var(--primary);
|
|
770
|
+
}
|
|
771
|
+
|
|
772
|
+
:host go-events ul li go-event go-event-title * {
|
|
773
|
+
margin: 0;
|
|
774
|
+
}
|
|
775
|
+
|
|
776
|
+
:root go-events ul li go-event go-event-title * {
|
|
777
|
+
margin: 0;
|
|
778
|
+
}
|
|
779
|
+
|
|
780
|
+
:host img {
|
|
781
|
+
max-width: 100%;
|
|
782
|
+
max-height: 100%;
|
|
783
|
+
}
|
|
784
|
+
|
|
785
|
+
:global go-ticket-selection go-cal {
|
|
786
|
+
display: none;
|
|
787
|
+
}
|
|
788
|
+
|
|
789
|
+
:global go-ticket-selection.is-date-selected go-cal {
|
|
790
|
+
display: block;
|
|
791
|
+
}
|
|
792
|
+
|
|
793
|
+
:global .azin {
|
|
794
|
+
outline: 20px solid green;
|
|
795
|
+
}
|
|
796
|
+
|
|
797
|
+
.azin {
|
|
798
|
+
border: 20px solid green !important;
|
|
799
|
+
}
|
|
800
|
+
|
|
801
|
+
/*CALENDARUI CSS*/
|
|
802
|
+
|
|
803
|
+
[data-calendar-wrapper] {
|
|
804
|
+
max-width: 650px;
|
|
805
|
+
}
|
|
806
|
+
|
|
807
|
+
[data-calendar-wrapper] [data-calendar-prev-button],[data-calendar-wrapper] [data-calendar-next-button] {
|
|
808
|
+
padding: 5px !important;
|
|
809
|
+
background-color: transparent !important;
|
|
810
|
+
border: none !important;
|
|
811
|
+
font-size: 1rem !important;
|
|
812
|
+
color: black !important;
|
|
813
|
+
margin-top: 0px !important;
|
|
814
|
+
}
|
|
815
|
+
|
|
816
|
+
[data-calendar-wrapper] [data-calendar-cell] {
|
|
817
|
+
text-align: -webkit-center;
|
|
818
|
+
text-align: -moz-center;
|
|
819
|
+
}
|
|
820
|
+
|
|
821
|
+
[data-calendar-wrapper] [data-bits-day] {
|
|
822
|
+
display: flex;
|
|
823
|
+
height: 1.5rem;
|
|
824
|
+
width: 1.5rem;
|
|
825
|
+
cursor: pointer;
|
|
826
|
+
-webkit-user-select: none;
|
|
827
|
+
-moz-user-select: none;
|
|
828
|
+
user-select: none;
|
|
829
|
+
align-items: center;
|
|
830
|
+
justify-content: center;
|
|
831
|
+
border-radius: 0.5rem;
|
|
832
|
+
padding: 1rem;
|
|
833
|
+
}
|
|
834
|
+
|
|
835
|
+
[data-calendar-wrapper] [data-calendar-header] {
|
|
836
|
+
display: flex;
|
|
837
|
+
padding: 20px 10px;
|
|
838
|
+
}
|
|
839
|
+
|
|
840
|
+
[data-calendar-wrapper] [data-calendar-heading] {
|
|
841
|
+
font-weight: 700;
|
|
842
|
+
font-size: 1.125rem;
|
|
843
|
+
line-height: 1.5;
|
|
844
|
+
flex-grow: 1;
|
|
845
|
+
padding: 0 5px;
|
|
846
|
+
text-align: center;
|
|
847
|
+
}
|
|
848
|
+
|
|
849
|
+
[data-calendar-wrapper] [data-calendar-grid] {
|
|
850
|
+
width: 100%;
|
|
851
|
+
padding: 5px 6px 7px 6px;
|
|
852
|
+
}
|
|
853
|
+
|
|
854
|
+
[data-calendar-wrapper] [data-calendar-grid-row] {
|
|
855
|
+
display: grid;
|
|
856
|
+
grid-template-columns: repeat(7, 1fr);
|
|
857
|
+
grid-gap: 8px;
|
|
858
|
+
gap: 8px;
|
|
859
|
+
padding: 10px 5px;
|
|
860
|
+
}
|
|
861
|
+
|
|
862
|
+
[data-calendar-wrapper] [data-calendar-cell] {
|
|
863
|
+
display: flex;
|
|
864
|
+
justify-content: center;
|
|
865
|
+
align-items: center;
|
|
866
|
+
font-size: 0.875rem;
|
|
867
|
+
font-weight: 500;
|
|
868
|
+
border-radius: 100%;
|
|
869
|
+
width: 28px;
|
|
870
|
+
height: 28px;
|
|
871
|
+
}
|
|
872
|
+
|
|
873
|
+
[data-calendar-wrapper] [data-calendar-root] {
|
|
874
|
+
padding: 1.25rem;
|
|
875
|
+
border: 1px solid #274779;
|
|
876
|
+
border-radius: 0.25rem;
|
|
877
|
+
}
|
|
878
|
+
|
|
879
|
+
[data-calendar-wrapper] [data-calendar-cell][data-unavailable] {
|
|
880
|
+
color: #757575;
|
|
881
|
+
pointer-events: none;
|
|
882
|
+
}
|
|
883
|
+
|
|
884
|
+
[data-calendar-wrapper] [data-calendar-cell][data-disabled] {
|
|
885
|
+
color: #757575;
|
|
886
|
+
pointer-events: none;
|
|
887
|
+
}
|
|
888
|
+
|
|
889
|
+
[data-calendar-wrapper] [data-calendar-cell][data-selected] {
|
|
890
|
+
color: #ffffff;
|
|
891
|
+
background-color: #274779;
|
|
892
|
+
}
|
|
893
|
+
|
|
894
|
+
[data-calendar-wrapper] [data-calendar-cell][data-today] {
|
|
895
|
+
border: 1px solid #274779;
|
|
896
|
+
border-width: 1px;
|
|
897
|
+
}
|
|
898
|
+
/*END CALENDARUI CSS*/
|
|
899
|
+
|
|
900
|
+
ul[data-go-timeslots] {
|
|
901
|
+
max-width: 650px;
|
|
902
|
+
list-style: none;
|
|
903
|
+
padding: 0;
|
|
904
|
+
margin: 0;
|
|
905
|
+
display: flex;
|
|
906
|
+
flex-wrap: wrap;
|
|
907
|
+
}
|
|
908
|
+
|
|
909
|
+
ul[data-go-timeslots] li {
|
|
910
|
+
margin: 5px;
|
|
911
|
+
}
|
|
912
|
+
|
|
913
|
+
ul[data-go-timeslots] label {
|
|
914
|
+
display: inline-block;
|
|
915
|
+
padding: 10px 20px;
|
|
916
|
+
border: 2px solid #ccc;
|
|
917
|
+
border-radius: 5px;
|
|
918
|
+
cursor: pointer;
|
|
919
|
+
transition:
|
|
920
|
+
background-color 0.3s, border-color 0.3s;
|
|
921
|
+
}
|
|
922
|
+
|
|
923
|
+
/* Available timeslot */
|
|
924
|
+
|
|
925
|
+
ul[data-go-timeslots] .available {
|
|
926
|
+
background-color: #fff;
|
|
927
|
+
color: #333;
|
|
928
|
+
}
|
|
929
|
+
|
|
930
|
+
ul[data-go-timeslots] input[type='radio'] {
|
|
931
|
+
display: none; /* Hide the radio button */
|
|
932
|
+
}
|
|
933
|
+
|
|
934
|
+
/* When a timeslot is selected (checked radio button) */
|
|
935
|
+
|
|
936
|
+
ul[data-go-timeslots] label:has(input[type='radio']:checked) {
|
|
937
|
+
background-color: #12826a;
|
|
938
|
+
background-color: var(--primary); /* blue-green color */
|
|
939
|
+
border-color: #12826a;
|
|
940
|
+
border-color: var(--primary);
|
|
941
|
+
color: white;
|
|
942
|
+
}
|
|
943
|
+
|
|
944
|
+
/* Finished (unavailable) timeslot */
|
|
945
|
+
|
|
946
|
+
ul[data-go-timeslots] .finished {
|
|
947
|
+
background-color: #f0f0f0;
|
|
948
|
+
color: #999;
|
|
949
|
+
}
|
|
950
|
+
|
|
951
|
+
ul[data-go-timeslots] .finished input {
|
|
952
|
+
display: none;
|
|
953
|
+
}
|
|
954
|
+
|
|
955
|
+
ul[data-go-timeslots] .finished {
|
|
956
|
+
pointer-events: none;
|
|
957
|
+
}
|
|
958
|
+
|
|
959
|
+
/* Disabled radio button appearance */
|
|
960
|
+
|
|
961
|
+
ul[data-go-timeslots] input:disabled + label {
|
|
962
|
+
background-color: #e0e0e0;
|
|
963
|
+
color: #bbb;
|
|
964
|
+
cursor: not-allowed;
|
|
965
|
+
border-color: #ddd;
|
|
966
|
+
}
|
|
967
|
+
|
|
968
|
+
ul[data-go-timeslots] label:hover {
|
|
969
|
+
background-color: #f0f0f0;
|
|
970
|
+
border-color: #aaa;
|
|
971
|
+
}
|
|
972
|
+
|
|
973
|
+
/* Focus state for better accessibility */
|
|
974
|
+
|
|
975
|
+
ul[data-go-timeslots] input:focus + label {
|
|
976
|
+
outline: 2px solid #0052cc;
|
|
977
|
+
}
|