PluginProbe ʕ •ᴥ•ʔ
Appointment Booking Plugin – LatePoint | Calendar & Scheduling for WordPress / 5.6.8
Appointment Booking Plugin – LatePoint | Calendar & Scheduling for WordPress v5.6.8
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 / admin / _side-panel.scss
latepoint / lib / assets / stylesheets / admin Last commit date
_activities.scss 9 months ago _addons.scss 9 months ago _agents.scss 9 months ago _animations.scss 9 months ago _booking_form_preview.scss 9 months ago _bookings.scss 3 weeks ago _bundles.scss 9 months ago _buttons.scss 9 months ago _calendars.scss 9 months ago _categories.scss 9 months ago _customers.scss 9 months ago _dark.scss 9 months ago _daterangepicker.scss 9 months ago _elements.scss 1 month ago _forms.scss 9 months ago _grid.scss 1 year ago _grid_variables.scss 1 year ago _icons.scss 1 year ago _latecheckbox.scss 9 months ago _lateselect.scss 1 year ago _layout.scss 9 months ago _lightbox.scss 9 months ago _menu.scss 9 months ago _messages.scss 9 months ago _misc.scss 9 months ago _mixins.scss 9 months ago _notifications.scss 9 months ago _orders.scss 9 months ago _pickr.scss 1 year ago _processes.scss 1 month ago _quick_availability.scss 9 months ago _reminders.scss 1 year ago _responsive.scss 9 months ago _roles.scss 1 year ago _schedule.scss 3 months ago _services.scss 9 months ago _settings.scss 1 day ago _side-panel.scss 9 months ago _steps.scss 1 year ago _tables.scss 9 months ago _type.scss 1 year ago _updates.scss 9 months ago _utilities.scss 1 year ago _variables.scss 9 months ago _widgets.scss 9 months ago _wizard.scss 2 weeks ago
_side-panel.scss
697 lines
1 .latepoint-side-panel-w {
2
3 position: fixed;
4 top: 0px;
5 left: 0px;
6 bottom: 0px;
7 right: 0px;
8 transition: all 0.2s ease;
9 z-index: 9999;
10 background-color: rgba(65,73,90,0.13);
11 display: flex;
12 align-items: stretch;
13 padding: 1vh;
14 padding: 1dvh;
15 .latepoint-side-panel-shadow {
16 flex: 1;
17 }
18 .latepoint-side-panels {
19 display: flex;
20 flex-direction: row-reverse;
21 box-shadow: 0px 10px 60px rgba(0,0,0, 0.15), 0px 2px 6px rgba(0,0,0,0.2);
22 height: 98vh;
23 height: 98dvh;
24 overflow: hidden;
25 border-radius: $lightbox-border-radius;
26 }
27
28 .side-sub-panel-wrapper {
29 width: 550px;
30 background-color: #fff;
31 z-index: 9999;
32 border-right: 1px solid rgba(0, 0, 0, 0.1);
33 display: flex;
34 flex-direction: column;
35 .side-sub-panel-header {
36
37 select {
38 display: inline-block;
39 vertical-align: middle;
40 margin-left: 5px;
41 }
42 .latepoint-side-sub-panel-close {
43 font-size: 18px;
44 color: #333;
45 text-decoration: none;
46 display: block;
47 outline: none;
48 box-shadow: none;
49 z-index: 3;
50 background-color: #f8f8f8;
51 border-radius: $border-radius;
52 width: 34px;
53 height: 34px;
54 text-align: center;
55 line-height: 34px;
56 i {
57 display: block;
58 line-height: 34px;
59 }
60 &:focus {
61 outline: none;
62 }
63 &:hover {
64 background-color: #eee;
65 }
66 }
67 }
68 .side-sub-panel-content {
69 flex: 1;
70 overflow-y: auto;
71 max-height: 100%;
72 padding: 30px;
73 &.no-padding {
74 padding: 0;
75 }
76 &.pattern-dotted {
77 background-image: radial-gradient(rgba(0, 0, 0, 0.08) 1px, transparent 0);
78 background-size: 15px 15px;
79 background-color: #f1f1f1;
80 }
81 }
82 .side-sub-panel-footer {
83 border-top: 1px solid $border-color-main;
84 padding: 15px 30px;
85 }
86 &.width-full {
87 flex: 1;
88 }
89 &.width-400 {
90 flex: 0 0 400px;
91 }
92 }
93
94 .clear-missing-lateselect {
95 padding: 10px;
96 margin-bottom: 10px;
97 border-radius: 6px;
98 background-color: #fff8dd;
99 border: 1px solid #d9c06e;
100 color: #604a1c;
101 a {
102 text-decoration: underline;
103 color: #111;
104 font-weight: $body-font-weight-bold;
105 margin-left: 5px;
106 }
107 }
108
109 .os-upload-file-input-w {
110 label {
111 margin-bottom: 3px;
112 }
113 input[type="file"]="file""]{
114 padding: 7px 6px 8px 6px;
115 border-radius: 6px;
116 border: 1px solid $border-color-strong;
117 width: 100%;
118 display: block;
119 line-height: 1;
120 &:hover {
121 border-color: $brand-primary;
122 }
123 }
124 }
125
126 .reloadable-field-wrapper {
127 &.os-loading {
128 opacity: 0.4;
129 position: relative;
130 &:before {
131 @include loading-circle($brand-primary, 12px);
132 }
133
134 }
135 }
136
137 .os-time-group.as-period {
138 padding: 0;
139 display: block;
140 margin-bottom: 15px;
141 label {
142 padding: 0;
143 margin-bottom: 3px;
144 }
145 .os-time-input-fields {
146 justify-content: flex-start;
147 border: 1px solid $border-color-strong;
148 border-radius: $border-radius;
149 padding-right: 7px;
150 &:has(input:focus){
151 border-color: $brand-primary;
152 }
153 input.os-form-control {
154 transform-origin: left;
155 max-width: initial;
156 flex: 1;
157 margin-left: 0;
158 background-color: transparent;
159 border: none;
160 font-size: $font-size-base;
161 padding: 7px 8px 6px!important;
162 text-align: left;
163 font-weight: $body-font-weight-normal;
164 }
165 .time-ampm-w {
166 margin-left: auto;
167 background-color: #fff;
168 .time-ampm-select {
169 padding: 2px 5px 3px 5px;
170 }
171 }
172 }
173 }
174
175 .booking-order-info-wrapper {
176 margin-bottom: 20px;
177 position: relative;
178 .booking-order-info-inner {
179 z-index: 3;
180 position: relative;
181 .order-link {
182 cursor: pointer;
183 background-color: #fff;
184 border: 2px solid $brand-primary;
185 border-radius: $border-radius;
186 padding: 15px;
187 text-decoration: none;
188 display: flex;
189 align-items: center;
190 gap: 10px;
191 font-weight: $body-font-weight-black;
192 font-size: floor($font-size-base * 1.1);
193 .latepoint-icon-arrow-left {
194 font-size: 20px;
195 color: $brand-primary;
196 }
197 }
198 }
199 }
200
201 .quick-booking-preselected-service-info {
202 background-color: $faded-bg;
203 border-radius: $border-radius;
204 padding: 10px;
205 font-size: $body-font-size-xs;
206 margin-bottom: 15px;
207 color: $color-faded;
208 span {
209 color: $headings-color;
210 font-weight: $body-font-weight-black;
211 }
212 }
213
214 .quick-booking-info {
215 margin-bottom: 15px;
216 padding-bottom: 15px;
217 border-bottom: 1px solid $border-color-lightest;
218 font-size: floor($font-size-base * 0.8);
219 display: flex;
220 align-items: center;
221 color: $headings-color;
222 span, strong, a {
223 display: inline-block;
224 }
225 span {
226 margin-right: 2px;
227 color: $color-faded;
228 }
229 strong {
230 margin-right: 6px;
231 font-weight: $body-font-weight-black;
232 }
233 a {
234 margin-left: auto;
235 color: $headings-color;
236 text-decoration: none;
237 border-bottom: 1px dotted $headings-color;
238 white-space: nowrap;
239 display: flex;
240 align-items: center;
241 gap: 5px;
242 position: relative;
243 & + a {
244 margin-left: 15px;
245 }
246 &:hover {
247 border-bottom-style: solid;
248 }
249 &.os-loading {
250 color: transparent;
251 &:before {
252 @include loading-circle($headings-color, 10px);
253 }
254 }
255 i {
256 font-size: 10px;
257 }
258 }
259 }
260
261 .os-form-group.os-form-group-transparent {
262 margin-bottom: 15px;
263 }
264 .os-form-content,
265 .os-form-buttons,
266 .os-form-header {
267 }
268
269 &.os-loading {
270 .latepoint-side-panel-i {
271 &:before {
272 @include loading-circle($brand-primary, 40px);
273 }
274 }
275 .quick-order-form-w {
276 .os-form-content {
277 opacity: 0;
278 transform: translateY(20px);
279 }
280 .os-form-header {
281 opacity: 0;
282 }
283 .os-form-buttons {
284 opacity: 0;
285 }
286 }
287 }
288
289 .latepoint-side-panel-close {
290 font-size: 18px;
291 color: #333;
292 text-decoration: none;
293 display: block;
294 outline: none;
295 box-shadow: none;
296 z-index: 3;
297 background-color: #f8f8f8;
298 border-radius: $border-radius;
299 width: 34px;
300 height: 34px;
301 text-align: center;
302 line-height: 34px;
303 i {
304 display: block;
305 line-height: 34px;
306 }
307 &:focus {
308 outline: none;
309 }
310 &:hover {
311 background-color: #eee;
312 }
313 }
314
315 .latepoint-side-panel-i {
316 transition: all 0.2s ease;
317 border-radius: $side-panel-border-radius;
318 background-color: #fff;
319 width: $side-panel-width;
320 z-index: 2;
321 display: flex;
322 flex-direction: column;
323 > .os-form-w {
324 max-height: 100%;
325 min-height: 100%;
326 > form {
327 min-height: 100%;
328 max-height: 100%;
329 display: flex;
330 flex-direction: column;
331 }
332 }
333 }
334
335 &.width-400 .latepoint-side-panel-i{ width: 400px; }
336 &.width-500 .latepoint-side-panel-i{ width: 500px; }
337 &.width-600 .latepoint-side-panel-i{ width: 600px; }
338 &.width-700 .latepoint-side-panel-i{ width: 700px; }
339 &.width-800 .latepoint-side-panel-i{ width: 800px; }
340 &.width-1000 .latepoint-side-panel-i{ width: 1000px; }
341 &.width-1200 .latepoint-side-panel-i{ width: 1200px; }
342 &.width-max .latepoint-side-panel-i{ width: 90%; }
343 &.width-full .latepoint-side-panel-i{ width: 100%; }
344
345 .os-form-header {
346 padding: (15px + calc($side-panel-offset/2)) $side-panel-padding-x;
347 border-bottom: 1px solid $border-color-lightest;
348 margin-bottom: 0px;
349 background-color: #fff;
350 display: flex;
351 align-items: center;
352 h2 {
353 margin: 0px;
354 font-size: $headings-font-size-l;
355 line-height: 1;
356 font-weight: $body-font-weight-black;
357 flex: 1;
358 }
359 }
360
361 .os-form-sub-header-actions {
362 margin-top: 0px;
363 select.os-form-control {
364 padding: 5px 20px 4px 8px !important;
365 }
366 .latepoint-btn + .latepoint-btn {
367 margin-left: 5px;
368 }
369 .latepoint-btn.latepoint-btn-link {
370 span {
371 border-bottom: 1px dotted lighten($brand-primary, 10%);
372 }
373 }
374 }
375 .os-form-sub-header {
376 margin-bottom: 15px;
377 background-color: #fff;
378 margin-top: 20px;
379 padding-top: 10px;
380 border-bottom: 2px solid $headings-color;
381 padding-bottom: 5px;
382 h3 {
383 color: $headings-color;
384 font-weight: $body-font-weight-black;
385 margin: 0px;
386 padding: 0px;
387 font-size: $headings-font-size-m;
388 }
389 }
390
391 .os-form-content {
392 padding: $side-panel-padding-y $side-panel-padding-x;
393 flex: 1;
394 max-height: 100%;
395 overflow-y: auto;
396
397 &.no-padding {
398 padding: 0;
399 }
400 &.no-overflow {
401 overflow: hidden;
402 }
403 }
404
405 .os-form-buttons {
406 padding: 15px $side-panel-padding-x;
407 border-top: 1px solid $border-color-lightest;
408 background-color: #fff;
409 display: flex;
410 .latepoint-btn {
411 }
412 &.right-aligned {
413 justify-content: flex-end;
414 align-items: center;
415 }
416 }
417
418 .os-form-w {
419 margin: 0px;
420
421 .open-quick-availability-btn.latepoint-btn-white.latepoint-btn {
422 padding: 8px 10px;
423 text-align: center;
424 background-color: #fff;
425 text-decoration: none;
426 color: $brand-primary;
427 border: 1px dotted $brand-primary;
428 margin-top: 18px;
429 box-shadow: none;
430 display: flex;
431 align-items: center;
432 gap: 10px;
433 justify-content: flex-start;
434 &:hover {
435 border-color: #08214c;
436 color: #08214c;
437 }
438 &:focus {
439 box-shadow: 0px 0px 0px 4px lighten($brand-primary, 40%);
440 }
441 i {
442 font-size: 13px;
443 margin-left: auto;
444 }
445 span {
446 font-weight: $body-font-weight-normal;
447 }
448 }
449 }
450
451 &.active {
452 .latepoint-side-panel-i {
453 }
454 }
455
456
457 .quick-add-item-button {
458 border: 2px dotted rgba(0, 0, 0, 0.1);
459 padding: 7px 10px;
460 text-align: center;
461 border-radius: $border-radius;
462 color: $brand-primary;
463 cursor: pointer;
464 position: relative;
465 &.os-loading {
466 color: transparent;
467 &:before {
468 @include loading-circle($brand-primary);
469 }
470 }
471 &:hover {
472 border: 2px solid $brand-primary;
473 }
474 i, span {
475 display: inline-block;
476 vertical-align: middle;
477 }
478 span {
479 margin-left: 5px;
480 font-weight: $body-font-weight-bold;
481 }
482 }
483
484 .quick-add-transaction {
485 border: 2px dotted rgba(0, 0, 0, 0.1);
486 padding: 7px 10px;
487 text-align: center;
488 border-radius: 6px;
489 color: $brand-primary;
490 cursor: pointer;
491 position: relative;
492 &.os-loading {
493 color: transparent;
494 &:before {
495 @include loading-circle($brand-primary);
496 }
497 }
498 &:hover {
499 border: 2px solid $brand-primary;
500 }
501 i, span {
502 display: inline-block;
503 vertical-align: middle;
504 }
505 span {
506 margin-left: 5px;
507 font-weight: $body-font-weight-bold;
508 }
509 }
510
511 .quick-transaction-info-w {
512 background-color: #fff;
513 border: 1px solid $border-color-main;
514 box-shadow: 0 2px 0 0 #eee;
515 border-radius: $border-radius;
516 border-bottom-color: darken($border-color-main, 20%);
517 animation: 0.3s cubic-bezier(.45,1.1,.4,1.2) 0s wizardWrapperAnimation;
518 animation-fill-mode: both;
519 cursor: pointer;
520 margin-bottom: 15px;
521 position: relative;
522 &.os-loading {
523 &:before {
524 @include loading-circle($brand-primary, 16px);
525 left: 20px;
526 top: 20px;
527 }
528 .quick-transaction-amount {
529 color: transparent;
530 }
531 }
532 &:hover {
533 border-color: $brand-primary;
534 box-shadow: 0px 0px 0px 1px $brand-primary;
535 }
536 .quick-transaction-refunds-info {
537 margin: 10px;
538 margin-bottom: 0;
539 background-color: #ffd5d5;
540 border: 1px solid #db8181;
541 padding: 7px;
542 border-radius: 6px;
543 color: #6b0404;
544 text-align: center;
545 font-weight: $body-font-weight-bold;
546 }
547 .quick-transaction-head {
548 display: flex;
549 justify-content: space-between;
550 align-items: center;
551 padding: 10px;
552 }
553 .quick-transaction-sub {
554 border-top: 1px solid rgba(0,0,0,0.1);
555 color: $color-faded;
556 font-size: floor($font-size-base * 0.8);
557 display: flex;
558 justify-content: space-between;
559 padding: 10px;
560 align-items: center;
561 border-radius: 0 0 $border-radius $border-radius;
562 }
563
564 .lp-processor-logo {
565 margin-left: 5px;
566 margin-right: 10px;
567 width: 70px;
568 background-position: center right;
569 background-repeat: no-repeat;
570 overflow: hidden;
571 }
572
573 .lp-transaction-status {
574 padding: 4px 5px;
575 font-size: floor($font-size-base * 0.8);
576 margin-left: 10px;
577 }
578
579 .quick-transaction-amount {
580 font-weight: $body-font-weight-bold;
581 font-size: floor($font-size-base * 1.2);
582 margin-right: auto;
583 }
584
585 .lp-method-logo {
586 &.lp-method-logo-card {
587 &:before {
588 @include latepointfont_admin("\e916");
589 }
590 span {
591 display: none;
592 }
593 }
594 }
595
596 }
597
598 .quick-add-transaction-box-w {
599 animation: 0.3s cubic-bezier(.45,1.1,.4,1.2) 0s wizardWrapperAnimation;
600 animation-fill-mode: both;
601 margin-bottom: 15px;
602 &.show-refund-settings {
603 .transaction-refund-settings {
604 display: block;
605 }
606 .transaction-refund-button-w {
607 display: none;
608 }
609 }
610 }
611 .quick-add-transaction-box {
612 position: relative;
613 background-color: #fff;
614 border: 2px solid $brand-primary;
615 border-radius: $border-radius-lg;
616 .quick-add-transaction-box-header {
617 padding: 5px 15px 7px 5px;
618 display: flex;
619 align-items: center;
620 border-radius: $border-radius $border-radius 0 0;
621 background-color: $brand-primary;
622 gap: 10px;
623 .transaction-fold-wrapper {
624 padding: 5px;
625 gap: 6px;
626 display: flex;
627 align-items: center;
628 flex: 1;
629 color: #fff;
630 font-size: floor($font-size-base * 1.1);
631 cursor: pointer;
632 border-radius: $border-radius;
633 &:hover {
634 background-color: rgba(255,255,255,0.1);
635 }
636 }
637 }
638 .quick-add-transaction-box-content {
639 padding: 20px;
640 }
641 .quick-transaction-refunds-info {
642 margin-bottom: 20px;
643 background-color: #ffd5d5;
644 border: 1px solid #db8181;
645 padding: 7px;
646 border-radius: 6px;
647 color: #6b0404;
648 text-align: center;
649 font-weight: $body-font-weight-bold;
650 }
651 .form-close-btn {
652 color: #fff;
653 font-size: 14px;
654 border-bottom: 1px dotted #fff;
655 text-decoration: none;
656 &:hover {
657 border-bottom-style: solid;
658 }
659 }
660 .os-form-group.os-form-group-transparent.os-form-textfield-group.has-value.no-label .os-form-control,
661 .os-form-group.os-form-group-transparent.os-form-textfield-group .os-form-control {
662 }
663 }
664 }
665
666 body.has-side-sub-panel {
667 .latepoint-side-panel-w {
668 .latepoint-side-panel-i {
669 border-bottom-left-radius: 0;
670 border-top-left-radius: 0;
671 .os-form-header {
672 border-top-left-radius: 0;
673 }
674 .os-form-buttons {
675 border-bottom-left-radius: 0;
676 }
677 }
678 }
679 }
680
681 .latepoint-full-panel-w {
682 position: fixed;
683 top: 0px;
684 left: 0px;
685 bottom: 0px;
686 right: 0px;
687 z-index: 9999;
688 background-color: #fff;
689 display: flex;
690 align-items: stretch;
691
692 &.os-loading {
693 &:before {
694 @include loading-circle($brand-primary, 40px);
695 }
696 }
697 }