@happychef/reservation-sidebar 2.5.1 → 2.5.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.
package/dist/index.css ADDED
@@ -0,0 +1,805 @@
1
+ /* src/components/ReservationStepOne/css/valueSelector.css */
2
+ .valueSelector_new-reservation-page .valueSelector_value-selector {
3
+ display: flex;
4
+ flex-direction: column;
5
+ gap: 15px;
6
+ margin-bottom: 20px;
7
+ }
8
+ .valueSelector_new-reservation-page .valueSelector_non-absolute {
9
+ position: relative !important;
10
+ }
11
+ .valueSelector_new-reservation-page .valueSelector_non-absolute::before {
12
+ background: none;
13
+ }
14
+ .valueSelector_new-reservation-page .valueSelector_predefined-values {
15
+ display: flex;
16
+ gap: 10px;
17
+ }
18
+ .valueSelector_new-reservation-page .valueSelector_predefined-value-button {
19
+ flex: 1;
20
+ padding: 10px;
21
+ border: 1px solid #ccc;
22
+ border-radius: var(--border-radius);
23
+ background-color: var(--color-white);
24
+ cursor: pointer;
25
+ font-size: 1rem;
26
+ transition: background-color 0.3s ease;
27
+ }
28
+ .valueSelector_new-reservation-page .valueSelector_predefined-value-button.valueSelector_active,
29
+ .valueSelector_new-reservation-page .valueSelector_predefined-value-button:hover {
30
+ background-color: var(--color-blue);
31
+ color: var(--color-white);
32
+ }
33
+ .valueSelector_new-reservation-page .valueSelector_slider-container {
34
+ display: flex;
35
+ align-items: center;
36
+ gap: 15px;
37
+ }
38
+ .valueSelector_new-reservation-page .valueSelector_slider {
39
+ flex: 1;
40
+ appearance: none;
41
+ -webkit-appearance: none;
42
+ height: 5px;
43
+ background: #ddd;
44
+ border-radius: 5px;
45
+ outline: none;
46
+ }
47
+ .valueSelector_new-reservation-page .valueSelector_slider::-webkit-slider-thumb {
48
+ -webkit-appearance: none;
49
+ appearance: none;
50
+ width: 20px;
51
+ height: 20px;
52
+ background: var(--color-blue);
53
+ cursor: pointer;
54
+ border-radius: 50%;
55
+ }
56
+ .valueSelector_new-reservation-page .valueSelector_value-input {
57
+ width: 80px;
58
+ padding: 10px;
59
+ border: 1px solid #ccc;
60
+ border-radius: var(--border-radius);
61
+ font-size: 1rem;
62
+ }
63
+
64
+ /* src/components/ReservationStepOne/css/calendar.css */
65
+ .calendar_new-reservation-page .calendar_calendar-container {
66
+ position: relative;
67
+ width: 100%;
68
+ }
69
+ .calendar_new-reservation-page .calendar_calendar-container .calendar_calendar-display {
70
+ display: flex;
71
+ align-items: center;
72
+ justify-content: space-between;
73
+ width: 100%;
74
+ padding: 10px;
75
+ background-color: #fff;
76
+ border: #ccc 1px solid;
77
+ cursor: pointer;
78
+ user-select: none;
79
+ text-align: left;
80
+ border-radius: 5px;
81
+ }
82
+ .calendar_new-reservation-page .calendar_calendar-container .calendar_calendar-display span:first-child {
83
+ flex-grow: 1;
84
+ }
85
+ .calendar_new-reservation-page .calendar_calendar-container .calendar_calendar {
86
+ position: absolute;
87
+ z-index: 1000;
88
+ width: 100%;
89
+ background-color: rgba(255, 255, 255, 1);
90
+ border: 1px solid #ccc;
91
+ margin-top: 5px;
92
+ padding: 10px;
93
+ border-radius: 10px;
94
+ animation: calendar_fadeInCalendar 0.3s ease-in-out;
95
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
96
+ }
97
+ @keyframes calendar_fadeInCalendar {
98
+ from {
99
+ opacity: 0;
100
+ }
101
+ to {
102
+ opacity: 1;
103
+ }
104
+ }
105
+ .calendar_new-reservation-page .calendar_calendar-container .calendar_availability-hold-btn {
106
+ font-size: 10px;
107
+ }
108
+ .calendar_new-reservation-page .calendar_calendar-container .calendar_calendar-header {
109
+ display: flex;
110
+ justify-content: space-between;
111
+ align-items: center;
112
+ margin-bottom: 10px;
113
+ gap: 8px;
114
+ flex-wrap: wrap;
115
+ }
116
+ .calendar_new-reservation-page .calendar_calendar-container .calendar_calendar-header button {
117
+ background-color: transparent;
118
+ border: none;
119
+ cursor: pointer;
120
+ font-size: 18px;
121
+ }
122
+ .calendar_new-reservation-page .calendar_calendar-container .calendar_calendar-header span {
123
+ font-size: 15px;
124
+ color: gray;
125
+ font-weight: 500;
126
+ }
127
+ .calendar_new-reservation-page .calendar_calendar-container .calendar_calendar-weeks-wrapper {
128
+ overflow: hidden;
129
+ position: relative;
130
+ width: 100%;
131
+ }
132
+ .calendar_new-reservation-page .calendar_calendar-container .calendar_calendar-table {
133
+ width: 100%;
134
+ border-collapse: collapse;
135
+ }
136
+ .calendar_new-reservation-page .calendar_calendar-container .calendar_calendar-table th,
137
+ .calendar_new-reservation-page .calendar_calendar-container .calendar_calendar-table td {
138
+ width: 14.28%;
139
+ text-align: center;
140
+ padding: 5px;
141
+ }
142
+ .calendar_calendar-container .calendar_calendar-table th {
143
+ color: #666;
144
+ font-weight: normal;
145
+ padding-bottom: 10px;
146
+ }
147
+ .calendar_new-reservation-page .calendar_calendar-container .calendar_calendar-table td {
148
+ vertical-align: middle;
149
+ cursor: pointer;
150
+ border: none;
151
+ opacity: 1;
152
+ position: relative;
153
+ }
154
+ .calendar_new-reservation-page .calendar_calendar-container .calendar_calendar-table td.calendar_empty-day {
155
+ cursor: default;
156
+ }
157
+ .calendar_new-reservation-page .calendar_calendar-container .calendar_calendar-table td:hover .calendar_day-square.calendar_available {
158
+ transform: scale(1.05);
159
+ }
160
+ .calendar_new-reservation-page .calendar_calendar-container .calendar_day-square {
161
+ position: relative;
162
+ width: 38px;
163
+ height: 38px;
164
+ border-radius: 4px;
165
+ display: inline-flex;
166
+ align-items: center;
167
+ justify-content: center;
168
+ flex-direction: column;
169
+ transition: all 0.2s ease;
170
+ font-size: 16px;
171
+ margin: 0 auto;
172
+ }
173
+ .calendar_new-reservation-page .calendar_calendar-container .calendar_day-number {
174
+ line-height: 1;
175
+ z-index: 2;
176
+ }
177
+ .calendar_new-reservation-page .calendar_calendar-container .calendar_available .calendar_day-square {
178
+ background-color: #ccffcc;
179
+ color: #006600;
180
+ }
181
+ .calendar_new-reservation-page .calendar_calendar-container .calendar_available:hover .calendar_day-square {
182
+ background-color: #b3ffb3;
183
+ }
184
+ .calendar_new-reservation-page .calendar_calendar-container .calendar_available:active .calendar_day-square {
185
+ background-color: #99ff99;
186
+ }
187
+ .calendar_new-reservation-page .calendar_calendar-container .calendar_unavailable .calendar_day-square {
188
+ background-color: rgba(139, 0, 0, 0.13);
189
+ color: darkred;
190
+ }
191
+ .calendar_new-reservation-page .calendar_calendar-container .calendar_gray-out .calendar_day-square {
192
+ background-color: #e0e0e0;
193
+ color: #999;
194
+ cursor: not-allowed;
195
+ }
196
+ .calendar_new-reservation-page .calendar_calendar-container .calendar_selected .calendar_day-square {
197
+ background-color: #006600;
198
+ color: #ccffcc;
199
+ }
200
+ .calendar_new-reservation-page .calendar_calendar-container .calendar_calendar-table td.calendar_unavailable,
201
+ .calendar_new-reservation-page .calendar_calendar-container .calendar_calendar-table td.calendar_gray-out {
202
+ cursor: not-allowed;
203
+ }
204
+ .calendar_new-reservation-page .calendar_calendar-container .calendar_calendar-table td.calendar_unavailable:hover .calendar_day-square,
205
+ .calendar_new-reservation-page .calendar_calendar-container .calendar_calendar-table td.calendar_gray-out:hover .calendar_day-square {
206
+ transform: none;
207
+ }
208
+ .calendar_new-reservation-page .calendar_calendar-container .calendar_calendar-table td {
209
+ border: none;
210
+ }
211
+ .calendar_new-reservation-page .calendar_calendar-container .calendar_arrow {
212
+ margin-left: auto;
213
+ color: gray;
214
+ display: flex;
215
+ align-items: center;
216
+ }
217
+ .calendar_new-reservation-page .calendar_calendar-container .calendar_available .calendar_availability-badge {
218
+ background: #38a169;
219
+ }
220
+ .calendar_new-reservation-page .calendar_calendar-container .calendar_selected .calendar_availability-badge {
221
+ background: #2d3748;
222
+ }
223
+ @media screen and (max-width: 900px) {
224
+ .calendar_calendar-container .calendar_day-square {
225
+ width: 35px !important;
226
+ height: 35px !important;
227
+ font-size: 15px !important;
228
+ }
229
+ .calendar_calendar-container .calendar_calendar-header span {
230
+ font-size: 12px;
231
+ }
232
+ .calendar_new-reservation-page .calendar_calendar-container .calendar_availability-toggle-btn {
233
+ padding: 5px 8px;
234
+ font-size: 11px;
235
+ }
236
+ }
237
+
238
+ /* src/components/ReservationStepOne/css/timeSelector.css */
239
+ .timeSelector_new-reservation-page .timeSelector_time-selector-container {
240
+ position: relative;
241
+ }
242
+ .timeSelector_new-reservation-page .timeSelector_time-display {
243
+ display: flex;
244
+ align-items: center;
245
+ justify-content: space-between;
246
+ width: 100%;
247
+ padding: 10px;
248
+ background-color: #fff;
249
+ border: #ccc 1px solid;
250
+ cursor: pointer;
251
+ user-select: none;
252
+ text-align: left;
253
+ border-radius: 5px;
254
+ }
255
+ .timeSelector_new-reservation-page .timeSelector_time-display span:first-child {
256
+ flex-grow: 1;
257
+ }
258
+ .timeSelector_new-reservation-page .timeSelector_time-selector {
259
+ position: absolute;
260
+ z-index: 1000;
261
+ width: 100%;
262
+ max-height: 300px;
263
+ overflow-y: auto;
264
+ background-color: rgba(255, 255, 255, 1);
265
+ border: 1px solid #ccc;
266
+ margin-top: 5px;
267
+ padding: 10px;
268
+ border-radius: 10px;
269
+ animation: timeSelector_fadeInTimeSelector 0.3s ease-in-out;
270
+ top: 75px;
271
+ }
272
+ @keyframes timeSelector_fadeInTimeSelector {
273
+ from {
274
+ opacity: 0;
275
+ }
276
+ to {
277
+ opacity: 1;
278
+ }
279
+ }
280
+ .timeSelector_new-reservation-page .timeSelector_time-period {
281
+ margin-bottom: 15px;
282
+ }
283
+ .timeSelector_new-reservation-page .timeSelector_time-period-label {
284
+ font-weight: bold;
285
+ margin-bottom: 5px;
286
+ }
287
+ .timeSelector_new-reservation-page .timeSelector_time-options {
288
+ display: flex;
289
+ flex-wrap: wrap;
290
+ gap: 5px;
291
+ }
292
+ .timeSelector_new-reservation-page .timeSelector_time-option {
293
+ padding: 8px 12px;
294
+ background-color: #ccffcc;
295
+ color: #006600;
296
+ border-radius: 5px;
297
+ cursor: pointer;
298
+ transition: background-color 0.2s ease;
299
+ }
300
+ .timeSelector_new-reservation-page .timeSelector_time-option:hover {
301
+ background-color: #b3ffb3;
302
+ }
303
+ .timeSelector_new-reservation-page .timeSelector_time-option.timeSelector_selected {
304
+ background-color: #006600;
305
+ color: #ccffcc;
306
+ }
307
+ .timeSelector_new-reservation-page .timeSelector_info-text {
308
+ color: #666;
309
+ font-style: italic;
310
+ }
311
+ .timeSelector_new-reservation-page .timeSelector_arrow {
312
+ margin-left: auto;
313
+ color: gray;
314
+ display: flex;
315
+ align-items: center;
316
+ }
317
+ @media screen and (max-width: 480px) {
318
+ .timeSelector_new-reservation-page .timeSelector_time-option {
319
+ padding: 6px 10px;
320
+ font-size: 14px;
321
+ }
322
+ }
323
+
324
+ /* src/components/ReservationStepOne/css/tableSelector.css */
325
+ .tableSelector_new-reservation-page .tableSelector_table-selector-container {
326
+ margin-top: 15px;
327
+ padding: 10px;
328
+ border: 1px solid #eee;
329
+ border-radius: 4px;
330
+ background-color: #f9f9f9;
331
+ }
332
+ .tableSelector_new-reservation-page .tableSelector_table-selector-label {
333
+ display: block;
334
+ margin-bottom: 10px;
335
+ font-weight: bold;
336
+ color: #333;
337
+ font-size: 0.95rem;
338
+ }
339
+ .tableSelector_new-reservation-page .tableSelector_table-options {
340
+ display: flex;
341
+ flex-wrap: wrap;
342
+ gap: 10px;
343
+ }
344
+ .tableSelector_new-reservation-page .tableSelector_table-option {
345
+ display: inline-block;
346
+ margin-right: 15px;
347
+ margin-bottom: 5px;
348
+ padding: 5px 8px;
349
+ border: 1px solid #ccc;
350
+ border-radius: 4px;
351
+ background-color: #fff;
352
+ transition: background-color 0.2s ease;
353
+ }
354
+ .tableSelector_new-reservation-page .tableSelector_table-option label {
355
+ display: flex;
356
+ align-items: center;
357
+ cursor: pointer;
358
+ font-size: 0.9rem;
359
+ color: #555;
360
+ }
361
+ .tableSelector_new-reservation-page .tableSelector_table-option input[type=checkbox] {
362
+ margin-right: 8px;
363
+ cursor: pointer;
364
+ accent-color: var(--primary-color, #006600);
365
+ }
366
+ .tableSelector_new-reservation-page .tableSelector_table-option:has(input[type=checkbox]:checked) {
367
+ background-color: #e0f2e0;
368
+ border-color: #006600;
369
+ }
370
+ .tableSelector_new-reservation-page .tableSelector_table-option:hover {
371
+ background-color: #f0f0f0;
372
+ }
373
+ .tableSelector_new-reservation-page .tableSelector_info-text {
374
+ margin-top: 10px;
375
+ font-size: 0.85rem;
376
+ color: #666;
377
+ }
378
+ .tableSelector_new-reservation-page .tableSelector_selected-tables-info {
379
+ margin-top: 10px;
380
+ font-style: italic;
381
+ }
382
+ .tableSelector_new-reservation-page .tableSelector_info-text.tableSelector_loading-tables {
383
+ font-style: italic;
384
+ color: #006600;
385
+ }
386
+
387
+ /* src/components/ReservationStepOne/css/reservationMode.css */
388
+ .reservationMode_new-reservation-page .reservationMode_form-row .reservationMode_field-label {
389
+ display: block;
390
+ margin-bottom: 6px;
391
+ font-weight: 600;
392
+ }
393
+ .reservationMode_new-reservation-page .reservationMode_form-row .reservationMode_reservation-mode-buttons {
394
+ margin-top: 0;
395
+ }
396
+ .reservationMode_new-reservation-page .reservationMode_reservation-mode-buttons {
397
+ display: flex;
398
+ gap: 10px;
399
+ margin-top: 10px;
400
+ }
401
+ .reservationMode_new-reservation-page .reservationMode_reservation-mode-button {
402
+ flex: 1;
403
+ padding: 10px;
404
+ border: 1px solid #ccc;
405
+ border-radius: var(--border-radius);
406
+ background-color: var(--color-white);
407
+ cursor: pointer;
408
+ font-size: 1rem;
409
+ transition: background-color 0.3s ease, color 0.3s ease;
410
+ }
411
+ .reservationMode_new-reservation-page .reservationMode_reservation-mode-button.reservationMode_active,
412
+ .reservationMode_new-reservation-page .reservationMode_reservation-mode-button:hover {
413
+ background-color: var(--color-blue);
414
+ color: var(--color-white);
415
+ }
416
+ .reservationMode_new-reservation-page .reservationMode_reservation-modes-container {
417
+ display: flex;
418
+ flex-wrap: wrap;
419
+ margin: 0 -5px;
420
+ width: 100%;
421
+ }
422
+ .reservationMode_new-reservation-page .reservationMode_reservation-mode-button {
423
+ flex: 0 0 calc(50% - 10px);
424
+ margin: 5px;
425
+ padding: 10px;
426
+ box-sizing: border-box;
427
+ text-align: center;
428
+ border: 1px solid #ccc;
429
+ background: #f7f7f7;
430
+ cursor: pointer;
431
+ }
432
+ .reservationMode_new-reservation-page .reservationMode_reservation-mode-button:nth-child(3) {
433
+ flex: 0 0 100%;
434
+ }
435
+ .reservationMode_new-reservation-page .reservationMode_reservation-modes-container {
436
+ display: flex;
437
+ flex-wrap: wrap;
438
+ margin: 0 -5px;
439
+ width: 100%;
440
+ }
441
+ .reservationMode_new-reservation-page .reservationMode_reservation-mode-button {
442
+ flex: 0 0 calc(50% - 10px);
443
+ margin: 5px;
444
+ padding: 10px;
445
+ box-sizing: border-box;
446
+ text-align: center;
447
+ border: 1px solid #ccc;
448
+ background: #f7f7f7;
449
+ cursor: pointer;
450
+ }
451
+ .reservationMode_new-reservation-page .reservationMode_reservation-mode-button.reservationMode_active,
452
+ .reservationMode_new-reservation-page .reservationMode_reservation-mode-button:hover {
453
+ background-color: var(--color-blue);
454
+ color: var(--color-white);
455
+ }
456
+ .reservationMode_new-reservation-page .reservationMode_unlimited-mode-warning {
457
+ display: flex;
458
+ align-items: flex-start;
459
+ gap: 10px;
460
+ margin: 15px 0;
461
+ padding: 12px 15px;
462
+ background-color: #fff3cd;
463
+ border: 1px solid #ffeaa7;
464
+ border-radius: var(--border-radius, 4px);
465
+ border-left: 4px solid #e67e22;
466
+ font-size: 0.9rem;
467
+ line-height: 1.4;
468
+ }
469
+ .reservationMode_new-reservation-page .reservationMode_unlimited-mode-warning .reservationMode_warning-icon {
470
+ color: #e67e22;
471
+ font-size: 1.1rem;
472
+ margin-top: 2px;
473
+ flex-shrink: 0;
474
+ }
475
+ .reservationMode_new-reservation-page .reservationMode_unlimited-mode-warning .reservationMode_warning-text {
476
+ color: #856404;
477
+ margin: 0;
478
+ }
479
+ @media screen and (max-width: 480px) {
480
+ .reservationMode_new-reservation-page .reservationMode_unlimited-mode-warning {
481
+ margin: 10px 0;
482
+ padding: 10px 12px;
483
+ font-size: 0.85rem;
484
+ }
485
+ .reservationMode_new-reservation-page .reservationMode_unlimited-mode-warning .reservationMode_warning-icon {
486
+ font-size: 1rem;
487
+ }
488
+ }
489
+ .reservationMode_new-reservation-page .reservationMode_reservation-sidebar-component {
490
+ position: fixed;
491
+ top: 0;
492
+ right: -400px;
493
+ width: 400px;
494
+ height: 100%;
495
+ background-color: #fff;
496
+ box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
497
+ z-index: var(--z-index-sidebar-reservation);
498
+ display: flex;
499
+ flex-direction: column;
500
+ overflow-y: auto;
501
+ transition: right 0.3s ease-in-out;
502
+ }
503
+ .reservationMode_new-reservation-page .reservationMode_admin-title {
504
+ text-align: center;
505
+ margin-bottom: 30px;
506
+ }
507
+ .reservationMode_new-reservation-page .reservationMode_reservation-sidebar-component.reservationMode_open {
508
+ right: 0;
509
+ }
510
+ .reservationMode_new-reservation-page .reservationMode_reservation-sidebar-content {
511
+ padding: 20px;
512
+ padding-top: 60px;
513
+ }
514
+ .reservationMode_new-reservation-page .reservationMode_close-sidebar-button {
515
+ position: absolute;
516
+ top: 10px;
517
+ left: 10px;
518
+ background-color: transparent;
519
+ border: none;
520
+ cursor: pointer;
521
+ }
522
+ .reservationMode_new-reservation-page .reservationMode_close-sidebar-button svg {
523
+ color: #000;
524
+ }
525
+ .reservationMode_new-reservation-page .reservationMode_sidebar-section-one,
526
+ .reservationMode_new-reservation-page .reservationMode_sidebar-section-two {
527
+ margin-bottom: 20px;
528
+ }
529
+ .reservationMode_new-reservation-page .reservationMode_reservation-footer {
530
+ margin-top: auto;
531
+ }
532
+ .reservationMode_new-reservation-page .reservationMode_store-reservation-button {
533
+ width: 100%;
534
+ padding: 12px;
535
+ background-color: var(--color-blue);
536
+ color: #fff;
537
+ border: none;
538
+ border-radius: 5px;
539
+ cursor: pointer;
540
+ font-size: 1.1rem;
541
+ }
542
+ .reservationMode_new-reservation-page .reservationMode_open-sidebar-button {
543
+ position: fixed;
544
+ bottom: 20px;
545
+ right: 20px;
546
+ background-color: var(--color-blue);
547
+ color: #fff;
548
+ border: none;
549
+ border-radius: 50%;
550
+ width: 50px;
551
+ height: 50px;
552
+ cursor: pointer;
553
+ z-index: var(--z-index-modal) !important;
554
+ transition: all 0.3s ease;
555
+ }
556
+ .reservationMode_new-reservation-page .reservationMode_open-sidebar-button:hover {
557
+ background-color: var(--color-blue-hover-accent) !important;
558
+ }
559
+ .reservationMode_new-reservation-page .reservationMode_open-sidebar-button svg {
560
+ position: relative;
561
+ top: 2px;
562
+ }
563
+ @media screen and (max-width: 480px) {
564
+ .reservationMode_new-reservation-page .reservationMode_reservation-sidebar-component {
565
+ width: 100%;
566
+ }
567
+ }
568
+ .reservationMode_new-reservation-page .reservationMode_sidebar-section-personeel {
569
+ margin-bottom: 10px;
570
+ }
571
+
572
+ /* src/components/FormField/formField.css */
573
+ .formField_new-reservation-page .formField_form-group .formField_magic-tooltip {
574
+ transition: transform 0.2s ease;
575
+ transform-origin: bottom right;
576
+ }
577
+ .formField_new-reservation-page .formField_form-group .formField_magic-tooltip:hover {
578
+ transform: scale(1.05);
579
+ }
580
+
581
+ /* src/components/ReservationStepTwo/reservationStepTwo.css */
582
+ .reservationStepTwo_new-reservation-page .reservationStepTwo_name-fields {
583
+ display: flex;
584
+ gap: 20px;
585
+ }
586
+ .reservationStepTwo_input-container .reservationStepTwo_form-control {
587
+ display: flex;
588
+ align-items: center;
589
+ justify-content: space-between;
590
+ width: 100%;
591
+ padding: 10px;
592
+ background-color: #fff;
593
+ border: #ccc 1px solid;
594
+ cursor: pointer;
595
+ -webkit-user-select: none;
596
+ user-select: none;
597
+ text-align: left;
598
+ border-radius: 5px;
599
+ font-size: 16px;
600
+ }
601
+
602
+ /* src/components/ReservationSummary/reservationSummary.css */
603
+ .reservationSummary_new-reservation-page .reservationSummary_reservation-sidebar-component .reservationSummary_reservation-summary .reservationSummary_modal-title {
604
+ margin-top: 0;
605
+ margin-bottom: 20px;
606
+ }
607
+ .reservationSummary_new-reservation-page .reservationSummary_reservation-sidebar-component .reservationSummary_reservation-summary .reservationSummary_reservation-details {
608
+ list-style-type: none;
609
+ padding: 0;
610
+ margin: 0 0 20px 0;
611
+ width: 100%;
612
+ }
613
+ .reservationSummary_new-reservation-page .reservationSummary_reservation-sidebar-component .reservationSummary_reservation-summary .reservationSummary_reservation-details li {
614
+ margin-bottom: 10px;
615
+ font-size: 15px;
616
+ align-items: left;
617
+ text-align: left;
618
+ }
619
+ .reservationSummary_new-reservation-page .reservationSummary_reservation-sidebar-component .reservationSummary_reservation-summary .reservationSummary_reservation-details li strong {
620
+ font-weight: bold;
621
+ }
622
+ .reservationSummary_new-reservation-page .reservationSummary_reservation-sidebar-component .reservationSummary_reservation-summary {
623
+ align-items: left;
624
+ }
625
+
626
+ /* src/components/GiftcardSelection/giftcardSelection.css */
627
+ .giftcardSelection_new-reservation-page .giftcardSelection_giftcard-selection {
628
+ margin-bottom: 20px;
629
+ }
630
+ .giftcardSelection_new-reservation-page .giftcardSelection_giftcard-options {
631
+ display: flex;
632
+ gap: 20px;
633
+ margin: 10px 0;
634
+ }
635
+ .giftcardSelection_new-reservation-page .giftcardSelection_giftcard-option {
636
+ display: flex;
637
+ align-items: center;
638
+ gap: 8px;
639
+ cursor: pointer;
640
+ }
641
+ .giftcardSelection_new-reservation-page .giftcardSelection_form-label {
642
+ font-weight: 500;
643
+ margin-bottom: 8px;
644
+ display: block;
645
+ }
646
+ .giftcardSelection_new-reservation-page .giftcardSelection_giftcard-option input[type=radio] {
647
+ margin: 0;
648
+ cursor: pointer;
649
+ }
650
+ .giftcardSelection_new-reservation-page .giftcardSelection_giftcard-option label {
651
+ cursor: pointer;
652
+ }
653
+
654
+ /* src/components/ZitplaatsSelection/zitplaatsSelection.css */
655
+ .zitplaatsSelection_new-reservation-page .zitplaatsSelection_zitplaats-selection {
656
+ margin-bottom: 15px;
657
+ }
658
+ .zitplaatsSelection_new-reservation-page .zitplaatsSelection_zitplaats-selection select {
659
+ width: 100%;
660
+ padding: 10px;
661
+ border-radius: 4px;
662
+ border: 1px solid #ccc;
663
+ background-color: white;
664
+ }
665
+
666
+ /* src/styles/reservationSidebar.css */
667
+ .reservationSidebar_reservation-sidebar-component {
668
+ position: fixed;
669
+ top: 0;
670
+ right: -400px;
671
+ width: 400px;
672
+ height: 100%;
673
+ background-color: #fff;
674
+ box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
675
+ z-index: var(--z-index-sidebar-reservation);
676
+ display: flex;
677
+ flex-direction: column;
678
+ overflow-y: auto;
679
+ transition: right 0.3s ease-in-out;
680
+ }
681
+ .reservationSidebar_admin-title {
682
+ text-align: center;
683
+ margin-bottom: 30px;
684
+ }
685
+ .reservationSidebar_reservation-sidebar-component.reservationSidebar_open {
686
+ right: 0;
687
+ }
688
+ .reservationSidebar_reservation-sidebar-content {
689
+ padding: 20px;
690
+ padding-top: 60px;
691
+ }
692
+ .reservationSidebar_close-sidebar-button {
693
+ position: absolute;
694
+ top: 10px;
695
+ left: 10px;
696
+ background-color: transparent;
697
+ border: none;
698
+ cursor: pointer;
699
+ }
700
+ .reservationSidebar_close-sidebar-button svg {
701
+ color: #000;
702
+ }
703
+ .reservationSidebar_sidebar-section-one,
704
+ .reservationSidebar_sidebar-section-two {
705
+ margin-bottom: 20px;
706
+ }
707
+ .reservationSidebar_reservation-footer {
708
+ margin-top: auto;
709
+ }
710
+ .reservationSidebar_store-reservation-button {
711
+ width: 100%;
712
+ padding: 12px;
713
+ background-color: var(--color-blue);
714
+ color: #fff;
715
+ border: none;
716
+ border-radius: 5px;
717
+ cursor: pointer;
718
+ font-size: 1.1rem;
719
+ }
720
+ .reservationSidebar_open-sidebar-button {
721
+ position: fixed;
722
+ bottom: 20px;
723
+ right: 20px;
724
+ background-color: var(--color-blue);
725
+ color: #fff;
726
+ border: none;
727
+ border-radius: 50%;
728
+ width: 50px;
729
+ height: 50px;
730
+ cursor: pointer;
731
+ z-index: var(--z-index-modal) !important;
732
+ transition: all 0.3s ease;
733
+ }
734
+ .reservationSidebar_open-sidebar-button:hover {
735
+ background-color: var(--color-blue-hover-accent) !important;
736
+ }
737
+ .reservationSidebar_open-sidebar-button svg {
738
+ position: relative;
739
+ top: 2px;
740
+ }
741
+ @media screen and (max-width: 480px) {
742
+ .reservationSidebar_reservation-sidebar-component {
743
+ width: 100%;
744
+ }
745
+ }
746
+ .reservationSidebar_sidebar-section-personeel {
747
+ margin-bottom: 10px;
748
+ }
749
+
750
+ /* src/styles/newReservationAdmin.css */
751
+ .newReservationAdmin_account-manage-title {
752
+ text-align: center;
753
+ margin-bottom: 30px;
754
+ }
755
+ .newReservationAdmin_account-manage-container {
756
+ max-width: 800px;
757
+ margin: 0 auto;
758
+ }
759
+ .newReservationAdmin_account-manage-form {
760
+ display: flex;
761
+ flex-direction: column;
762
+ gap: 15px;
763
+ }
764
+ .newReservationAdmin_input-container {
765
+ position: relative;
766
+ }
767
+ .newReservationAdmin_input-icon {
768
+ position: absolute;
769
+ top: 50%;
770
+ left: 10px;
771
+ transform: translateY(-50%);
772
+ color: #6c757d;
773
+ pointer-events: none;
774
+ }
775
+ .newReservationAdmin_input-container input,
776
+ .newReservationAdmin_input-container textarea {
777
+ width: 100%;
778
+ padding: 10px 10px 10px 35px;
779
+ border: 1px solid #ccc;
780
+ border-radius: 5px;
781
+ font-size: 1rem;
782
+ transition: border-color 0.3s ease;
783
+ }
784
+ .newReservationAdmin_form-error {
785
+ color: #dc3545;
786
+ font-size: 0.9rem;
787
+ margin-top: 5px;
788
+ display: flex;
789
+ align-items: center;
790
+ gap: 5px;
791
+ }
792
+ .newReservationAdmin_account-manage__button {
793
+ padding: 12px;
794
+ background-color: var(--color-blue);
795
+ color: #fff;
796
+ border: none;
797
+ border-radius: 5px;
798
+ cursor: pointer;
799
+ font-size: 1.1rem;
800
+ display: flex;
801
+ align-items: center;
802
+ justify-content: center;
803
+ gap: 10px;
804
+ transition: background-color 0.3s ease;
805
+ }