PluginProbe ʕ •ᴥ•ʔ
Appointment Booking Plugin – LatePoint | Calendar & Scheduling for WordPress / 5.1.4
Appointment Booking Plugin – LatePoint | Calendar & Scheduling for WordPress v5.1.4
5.6.9 5.6.8 5.6.7 5.6.6 5.6.5 5.6.4 5.6.3 5.6.2 5.6.1 5.6.0 5.5.2 5.5.1 5.5.0 5.4.2 trunk 5.1.0 5.1.1 5.1.2 5.1.3 5.1.4 5.1.5 5.1.6 5.1.7 5.1.8 5.1.9 5.1.91 5.1.92 5.1.93 5.1.94 5.2.0 5.2.1 5.2.10 5.2.11 5.2.2 5.2.3 5.2.4 5.2.5 5.2.6 5.2.7 5.2.8 5.2.9 5.3.0 5.3.1 5.3.2 5.4.0 5.4.1
latepoint / lib / assets / stylesheets / front / _customer_dashboard.scss
latepoint / lib / assets / stylesheets / front Last commit date
_animations.scss 1 year ago _booking.scss 1 year ago _booking_animations.scss 1 year ago _buttons.scss 1 year ago _calendar.scss 1 year ago _customer_dashboard.scss 1 year ago _forms.scss 1 year ago _grid.scss 1 year ago _icons.scss 1 year ago _items.scss 1 year ago _lightbox.scss 1 year ago _login.scss 1 year ago _mixins.scss 1 year ago _notifications.scss 1 year ago _print.scss 1 year ago _responsive.scss 1 year ago _shared.scss 1 year ago _shortcodes.scss 1 year ago _type.scss 1 year ago _utilities.scss 1 year ago _variables.scss 1 year ago
_customer_dashboard.scss
758 lines
1 .latepoint {
2 .customer-dashboard-tabs {
3 display: flex;
4 border-bottom: 1px solid rgba(0, 0, 0, 0.1);
5 margin: 20px 0px 30px;
6
7 a {
8 display: block;
9 padding: 10px 0px;
10 font-weight: $body-font-weight-bold;
11 text-decoration: none;
12 color: $color-faded;
13 position: relative;
14 font-size: floor($font-size-base * 1.4);
15 margin-right: 30px;
16
17 &:focus, &:hover {
18 text-decoration: none;
19 color: $body-color;
20 }
21
22 &:after {
23 content: "";
24 height: 2px;
25 background-color: $brand-primary;
26 left: 0px;
27 bottom: -1px;
28 display: block;
29 position: absolute;
30 }
31
32 &.active {
33 color: $brand-primary;
34
35 &:after {
36 width: 100%;
37 }
38 }
39 }
40 }
41 }
42
43 .customer-orders-tiles {
44 display: grid;
45 grid-gap: 30px;
46 grid-template-columns: 1fr 1fr 1fr;
47
48 .customer-order {
49 background: #FFFFFF;
50 border: 1px solid #ddd;
51 padding: 25px;
52 color: #222;
53 align-self: flex-start;
54 position: relative;
55
56 .customer-order-confirmation {
57 font-size: floor($font-size-base * 1.7);
58 font-weight: $body-font-weight-bold;
59 color: $headings-color;
60 }
61
62 .customer-order-datetime {
63 color: $color-faded;
64 font-size: $font-size-base;
65 margin-bottom: 20px;
66 }
67
68 .summary-price-item-w.spi-total {
69 border-top-width: 2px;
70 }
71
72 .customer-order-bottom-actions {
73 display: flex;
74 gap: 20px;
75 margin-top: 20px;
76 padding-top: 20px;
77 border-top: 1px solid $border-color-light;
78 }
79 }
80 }
81
82 .customer-bookings-tiles {
83 display: grid;
84 grid-gap: 30px;
85 grid-template-columns: 1fr 1fr 1fr;
86
87 .new-booking-tile {
88 border: 2px dotted color-mix(in srgb, $brand-primary 20%, transparent);
89 opacity: 0.7;
90 display: flex;
91 flex-direction: column;
92 text-align: center;
93 color: $brand-primary;
94 position: relative;
95 padding: 30px 20px;
96 min-height: 100px;
97 text-decoration: none!important;
98
99 i, span {
100 display: block;
101 }
102
103 i {
104 margin-top: auto;
105 font-size: floor($font-size-base * 1.4);
106 }
107
108 span {
109 margin-top: 15px;
110 margin-bottom: auto;
111 font-weight: $body-font-weight-bold;
112 font-size: floor($font-size-base * 1.4);
113 }
114
115 &:hover {
116 opacity: 1;
117 border-color: $brand-primary;
118 border-style: solid;
119 }
120
121 &.os-loading {
122 color: transparent;
123
124 &:before {
125 @include loading-circle($brand-primary, 30px);
126 }
127 }
128 }
129
130 .customer-booking {
131 background: #FFFFFF;
132 border: 1px solid #ddd;
133 padding: 25px;
134 color: #222;
135 align-self: flex-start;
136 position: relative;
137 .bt-payment-actions {
138 margin-top: 20px;
139 padding-top: 20px;
140 border-top: 1px solid $border-color-light;
141 .bt-balance-info {
142 display: flex;
143 align-items: center;
144 }
145 .bt-balance-label {
146 color: $color-faded;
147 }
148 .bt-balance-amount {
149 margin-left: auto;
150 font-weight: $body-font-weight-bold;
151 color: $headings-color;
152 font-size: floor($font-size-base * 1.4);
153 }
154 .bt-balance-pay-link {
155 margin-left: auto;
156 display: flex;
157 padding-top: 5px;
158
159 a {
160 font-size: $font-size-base;
161 text-decoration: none;
162 margin-left: auto;
163 color: $brand-primary;
164 border-bottom: 1px dotted $brand-primary;
165 display: inline-block;
166 position: relative;
167 &:hover {
168 border-bottom-style: solid;
169 }
170 &.os-loading {
171 border-bottom-color: transparent;
172 color: transparent;
173 &:before {
174 @include loading-circle($brand-primary, 15px);
175 }
176 }
177 }
178 }
179 }
180 }
181
182 h6.customer-booking-service-name {
183 color: $headings-color;
184 padding-bottom: 5px;
185 margin: 0px;
186 text-align: left;
187 text-transform: none;
188 font-size: floor($headings-font-size * 1.4);
189 line-height: 1.2;
190 }
191
192 .part-of-bundle-message {
193 padding: 8px;
194 background-color: #f1f3ff;
195 margin-bottom: 15px;
196 font-size: floor($font-size-base * 0.8);
197 a {
198 color: $brand-primary;
199 text-decoration: none;
200 border-bottom: 1px dotted $brand-primary;
201 }
202 }
203
204 .customer-booking-datetime {
205 margin-bottom: 10px;
206 color: $headings-color;
207
208 span {
209 color: $color-faded;
210 }
211 }
212
213 .customer-booking-service-color {
214 height: 1px;
215 background-color: #eee;
216 }
217
218 .customer-booking-info {
219 margin: 20px 0px;
220 padding: 0px;
221 font-size: floor($font-size-base * 1.1);
222
223 .customer-booking-info-row {
224 display: flex;
225 margin: 10px 0px;
226 }
227
228 .booking-info-label {
229 flex: 0 1 80px;
230 color: $color-faded;
231 }
232
233 .booking-info-value {
234 font-weight: $body-font-weight-bold;
235
236 &.status-approved,
237 &.status-pending,
238 &.status-cancelled {
239 font-size: 13px;
240 padding: 2px 5px;
241 }
242
243 &.status-approved {
244 background-color: #45b782;
245 color: #fff;
246 }
247
248 &.status-pending {
249 background-color: #fde29f;
250 color: #3a2f15;
251 }
252
253 &.status-cancelled {
254 background-color: #e63c26;
255 color: #fff;
256 }
257 }
258 }
259
260 .customer-booking-buttons {
261 display: flex;
262 gap: 20px;
263 padding-bottom: 10px;
264
265 .latepoint-btn {
266 display: block;
267 padding: 5px 0px;
268 white-space: nowrap;
269 font-size: 14px;
270
271 i + span {
272 margin-left: 4px;
273 }
274
275 &.latepoint-btn {
276 }
277 }
278
279 .latepoint-request-booking-cancellation {
280 }
281 }
282 }
283
284 .latepoint-customer-timezone-selector-w {
285 position: relative;
286 margin-top: -10px;
287
288 &.os-loading {
289 label {
290 position: relative;
291
292 &:before {
293 @include loading-circle($color: $body-color, $width: 12px);
294 right: auto;
295 left: -15px;
296 top: 50%;
297 z-index: 9999;
298 }
299 }
300 }
301
302 .os-form-group.os-form-select-group {
303 display: flex;
304 align-items: center;
305
306 label {
307 display: block !important;
308 font-size: floor($font-size-base * 1.1);
309 font-weight: $body-font-weight-bold;
310 color: $color-faded;
311 white-space: nowrap;
312 margin-right: 5px;
313 margin-bottom: 0px;
314 margin-left: auto;
315 }
316
317 select.os-form-control {
318 width: 240px;
319 height: 34px !important;
320 padding: 0px 3px !important;
321 }
322 }
323 }
324
325 .customer-password-form-w {
326 margin-top: 40px;
327 }
328
329
330 .os-zoom-info-link {
331 background-color: #eff5ff;
332 border: 1px solid #bcc6f1;
333 border-bottom-color: darken(#bcc6f1, 5%);
334 box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.05);
335 display: flex;
336 align-items: center;
337 margin-top: 20px;
338 font-weight: $body-font-weight-bold;
339
340 img {
341 display: block;
342 width: 20px;
343 height: 20px;
344 margin: 5px 10px;
345 flex: 0;
346 }
347
348 a {
349 flex: 1;
350 font-size: floor($font-size-base * 1);
351 display: block;
352 padding: 10px 25px 10px 10px;
353 position: relative;
354 text-decoration: none;
355 background-color: rgba(255, 255, 255, 0.3);
356 white-space: nowrap;
357 color: $brand-primary;
358
359 &:hover {
360 background-color: #fff;
361 }
362
363 &:before {
364 @include latepointfont("\e904");
365 position: absolute;
366 top: 50%;
367 right: 10px;
368 font-size: 8px;
369 transform: translateY(-50%);
370 }
371 }
372 }
373
374 .load-booking-summary-btn-w {
375 a {
376 }
377 }
378
379 .customer-booking-bottom-actions {
380 display: flex;
381 align-items: center;
382 gap: 20px;
383 padding-top: 15px;
384 margin-top: 10px;
385 border-top: 1px solid #eee;
386 justify-content: stretch;
387
388 .latepoint-btn {
389 padding: 7px 10px;
390 }
391
392 > div {
393 }
394 }
395
396
397 .reschedule-calendar-wrapper {
398 @import "../shared/step_datepicker";
399 .os-monthly-calendar-days {
400 grid-gap: 10px;
401 }
402
403
404 .os-weekdays {
405 margin-top: 15px;
406 border-top: 1px solid #f8f8f8;
407 padding-top: 15px;
408 }
409
410 .os-dates-w {
411 margin: 0;
412 }
413
414 .os-current-month-label-w {
415 .os-month-next-btn {
416 right: 0;
417 }
418
419 .os-month-prev-btn {
420 left: 0;
421 }
422
423 .os-current-month-label {
424 margin: 0;
425 }
426 }
427 }
428
429 .latepoint-lightbox-w {
430
431 .reschedule-confirmation-wrapper {
432 text-align: center;
433
434 .icon-w {
435 margin-bottom: 20px;
436
437 i {
438 background: #d1ffdd;
439 padding: 15px;
440 border-radius: 40px;
441 color: #18a35b;
442 font-size: 28px;
443 display: inline-block;
444 }
445 }
446
447 h2 {
448 margin: 0 0 10px 0;
449 font-size: floor($headings-font-size * 2);
450 color: $headings-color;
451 }
452
453 .desc {
454 font-size: floor($font-size-base * 1.4);
455 margin-bottom: 20px;
456 }
457
458 .rescheduled-date-time-info {
459 .info-label {
460 color: $color-faded;
461 margin-bottom: 5px;
462 }
463
464 .info-value {
465 font-weight: $body-font-weight-bold;
466 }
467 }
468 }
469 }
470
471 .bundle-services {
472
473 .bundle-included-service-wrapper {
474 display: flex;
475 padding: 10px 0;
476 font-size: $font-size-base;
477 justify-content: space-between;
478 .bundle-included-service-name {
479 color: $color-faded;
480 }
481 .bundle-included-service-quantity {
482 font-weight: $body-font-weight-bold;
483 }
484
485 & + .bundle-included-service-wrapper {
486 border-top: 1px solid $border-color-light;
487 }
488 }
489 }
490
491
492 .customer-bundle-tile {
493 color: #222;
494 align-self: flex-start;
495 position: relative;
496 .customer-bundle-tile-inner {
497 background: #FFFFFF;
498 border: 1px solid #ddd;
499 border-bottom-color: #ccc;
500 box-shadow: 0 2px 4px -1px rgba(0,0,0,0.1);
501 padding: 25px;
502 position: relative;
503 z-index: 3;
504 }
505
506 .customer-bundle-tile-shadow {
507 z-index: 2;
508 position: absolute;
509 left: 6px;
510 right: 6px;
511 bottom: -5px;
512 height: 10px;
513 box-shadow: 0 0 3px 0 rgba(0,0,0,0.4);
514 background-color: #fff;
515 + .customer-bundle-tile-shadow {
516 bottom: -11px;
517 z-index: 1;
518 left: 12px;
519 right: 12px;
520 box-shadow: 0 0 3px 0 rgba(0,0,0,0.3);
521 }
522 }
523
524 .bundle-main-info-wrapper {
525 display: flex;
526 justify-content: space-between;
527 padding-bottom: 35px;
528 border-bottom: 1px solid $border-color-light;
529 align-items: flex-start;
530 .bundle-icon {
531 padding: 10px;
532 line-height: 20px;
533 font-size: 20px;
534 background-color: color-mix(in srgb, $brand-primary 10%, transparent);
535 border-radius: 30px;
536 color: $brand-primary;
537
538 }
539 }
540
541 .bundle-name {
542 color: $headings-color;
543 padding-bottom: 5px;
544 margin: 0px;
545 text-align: left;
546 text-transform: none;
547 font-size: floor($headings-font-size * 1.4);
548 line-height: 1.2;
549 }
550 .bundle-order-info {
551 a {
552 color: $brand-primary;
553 border-bottom: 1px dotted $brand-primary;
554 text-decoration: none;
555 }
556 }
557
558 .customer-bundle-bottom-actions {
559 display: flex;
560 align-items: center;
561 gap: 20px;
562 padding-top: 25px;
563 border-top: 1px solid #eee;
564 justify-content: stretch;
565
566 .latepoint-btn {
567 padding: 7px 10px;
568 }
569
570 > div {
571 }
572 }
573 }
574
575 .latepoint-customer-bundle-scheduling-summary {
576 padding: 30px;
577 .summary-box {
578 &.main-box {
579 padding: 0;
580 display: block;
581 }
582 .sbc-big-item {
583 font-size: floor($font-size-base * 1.8);
584 }
585 .sbc-subtle-item {
586 display: none;
587 }
588 }
589 .bundle-order-small-info {
590 a {
591 color: $brand-primary;
592 text-decoration: none;
593 border-bottom: 1px dotted $brand-primary;
594 }
595 }
596 .bookable-items-breakdown {
597 border-top: 1px solid $border-color-light;
598 padding-top: 15px;
599 margin-top: 20px;
600
601 .order-item-cancelled-bookings-wrapper {
602 .order-item-cancelled-bookings-heading {
603 padding-top: 5px;
604 padding-bottom: 5px;
605 color: $color-faded;
606 }
607 &:not(:last-child){
608 margin-bottom: 20px;
609 }
610 }
611
612 .bundle-service-info {
613 margin-bottom: 10px;
614 color: $color-faded;
615 }
616
617 .order-item-variant-bundle-booking + .bundle-service-info {
618 margin-top: 20px;
619 }
620
621 .order-item-variant-bundle-booking {
622 display: flex;
623 gap: 8px;
624 align-items: center;
625 margin-bottom: 10px;
626 padding: 8px;
627 border: 1px dotted #aaa;
628 cursor: pointer;
629 position: relative;
630
631 &:hover {
632 border: 1px solid $brand-primary;
633 }
634
635 &.os-loading {
636 &:before {
637 @include loading-circle($brand-primary, 14px);
638 left: auto;
639 right: 0px;
640 }
641 .bib-icon {
642 color: transparent;
643 }
644 }
645
646 .bib-label {
647
648 }
649
650 .bib-datetime {
651
652 }
653
654 .bib-icon {
655 margin-left: auto;
656 font-size: 10px;
657 }
658
659 .booking-item-status-pill {
660 width: 15px;
661 height: 15px;
662 background-color: #eee;
663 }
664
665 &.is-booked {
666 border: 1px solid #ddd;
667 border-bottom-color: #bbb;
668 box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
669 color: $headings-color;
670
671 &:hover {
672 box-shadow: none;
673 border-color: $brand-primary;
674 }
675
676 .booking-item-status-pill {
677 background-color: #bcd96e;
678 }
679
680 &.is-past {
681 .booking-item-status-pill {
682 background-color: #d9eba6;
683 }
684 }
685
686 &.bundle-booking-status-pending {
687 .booking-item-status-pill {
688 background-color: #fad277;
689 }
690 }
691
692 &.bundle-booking-status-cancelled {
693 .booking-item-status-pill {
694 background-color: #fa7b77;
695 }
696 }
697
698 }
699 }
700 }
701
702 .bookable-items {
703 display: none;
704 gap: 5px;
705 margin-top: 20px;
706
707 .bookable-item {
708 flex: 1;
709 border-radius: 2px;
710 background-color: #eee;
711 height: 6px;
712
713 &.is-past.is-booked {
714 background-color: #bcd96e;
715 }
716
717 &.is-booked {
718 background-color: #d9eba6;
719 }
720 }
721 }
722 }
723
724 .latepoint-transaction-payment-form {
725 position: relative;
726
727 .lp-payment-charge-amount {
728 background-color: #fbf6e1;
729 color: #877865;
730 margin-bottom: 20px;
731 padding: 15px;
732 text-align: center;
733 strong {
734 color: #000;
735 }
736 }
737 .latepoint-lightbox-footer {
738 display: flex;
739 align-items: center;
740 gap: 10px;
741 justify-content: space-between;
742 .latepoint-btn-primary {
743 margin-left: auto;
744 }
745 .latepoint-btn {
746 &.latepoint-btn-block {
747 flex: 1;
748 }
749 }
750 }
751 &.os-loading {
752 .latepoint-lightbox-footer {
753 display: none;
754 .latepoint-btn {
755 }
756 }
757 }
758 }