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 / _customers.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 2 days 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
_customers.scss
686 lines
1 .customer-info-w {
2 &.selected {
3 .customer-edit-form-w {
4 display: none;
5 }
6 .customers-selector-search-w {
7 display: none;
8 }
9 .customers-options-list {
10 display: none;
11 }
12 }
13 &.selecting {
14 .customer-quick-edit-form-w {
15 display: none;
16 }
17 .customers-selector-w {
18 }
19 .customers-selector-search-w {
20 }
21 .customers-options-list {
22 }
23 .customer-info-create-btn,
24 .customer-info-load-btn {
25 opacity: 0;
26 }
27 }
28 }
29 .customers-selector-w {
30 margin-bottom: 20px;
31
32 .customers-selector-search-w {
33 position: relative;
34 background-color: $form-controls-background-color;
35 border: none;
36 margin-bottom: 10px;
37 border-radius: $form-controls-border-radius;
38 > .latepoint-icon {
39 position: absolute;
40 top: 50%;
41 left: 8px;
42 color: $color-faded;
43 transform: translateY(-50%);
44 font-size: 16px;
45 }
46 .customers-selector-search-input {
47 border: none;
48 background-color: transparent;
49 box-shadow: none;
50 display: block;
51 width: 100%;
52 padding: 10px;
53 padding-left: 35px;
54 font-size: $font-size-base;
55 &::placeholder {
56 opacity: 1;
57 color: $color-faded;
58 }
59 }
60 &.os-loading {
61 > .latepoint-icon {
62 display: none;
63 }
64 &:before {
65 @include loading-circle($brand-primary, 13px);
66 left: 16px;
67 }
68 }
69 .customers-selector-cancel {
70 position: absolute;
71 top: 48%;
72 right: 10px;
73 color: #C06363;
74 transform: translateY(-50%);
75 cursor: pointer;
76 i, span {
77 display: inline-block;
78 vertical-align: middle;
79 }
80 i {
81 font-size: 10px;
82 }
83 }
84 }
85 .customers-options-list {
86 max-height: 300px;
87 overflow-y: auto;
88 .os-no-matched-customers {
89 text-align: center;
90 padding: 10px;
91 color: $color-faded;
92 font-weight: $body-font-weight-bold;
93 }
94 .customer-option {
95 display: flex;
96 align-items: center;
97 padding: 10px 0px 10px 10px;
98 border-bottom: 1px solid rgba(0,0,0,0.05);
99 cursor: pointer;
100 &.os-loading {
101 .customer-option-avatar {
102 &:before {
103 @include loading-circle($brand-primary, 56px);
104 }
105 }
106 }
107 &:hover {
108 background-color: #f8f8f8;
109 border-bottom-color: transparent;
110 }
111 .customer-option-avatar {
112 flex: 0 0 44px;
113 height: 44px;
114 border-radius: 50px;
115 background-size: cover;
116 position: relative;
117 }
118 .customer-option-info {
119 padding-left: 20px;
120 .customer-option-info-name {
121 margin-top: 0px;
122 margin-bottom: 3px;
123 font-size: floor($font-size-base * 1);
124 color: $brand-primary;
125 a {
126 text-decoration: none;
127 margin-left: 5px;
128 display: inline-block;
129 }
130 span.os-query-match {
131 background-color: rgba(255, 231, 18, 0.62);
132 }
133 }
134 ul {
135 list-style: none;
136 margin: 0px;
137 color: lighten($body-color, 30%);
138 font-size: floor($font-size-base * 0.85);
139 strong {
140 color: $body-color;
141 span.os-query-match {
142 background-color: rgba(255, 231, 18, 0.62);
143 }
144 }
145 li {
146 margin-bottom: 3px;
147 &:last-child {
148 margin-bottom: 0px;
149 }
150 }
151 }
152 }
153 }
154 }
155 }
156
157
158 .customer-appointments {
159 .no-results-w {
160 padding: 10px;
161 color: $color-faded;
162 background-color: #f8f8f8;
163 border-radius: $border-radius;
164 text-align: center;
165 }
166 }
167
168 .customer-appointments-list {
169 .order-item {
170 padding: $order-item-padding;
171 border: 1px solid $border-color-main;
172 border-bottom-color: darken($border-color-main, 20%);
173 border-radius: $border-radius;
174 box-shadow: 0 2px 0 0 #eee;
175 display: flex;
176 gap: 15px;
177 cursor: pointer;
178 align-items: center;
179 margin-bottom: 10px;
180 .avatar-w {
181 @include avatar(40px);
182 position: relative;
183 .agent-info-tooltip {
184 display: none;
185 position: absolute;
186 bottom: 100%;
187 left: 50%;
188 background-color: #111;
189 color: #fff;
190 font-size: floor($font-size-base * 0.8);
191 font-weight: $body-font-weight-bold;
192 padding: 5px 10px;
193 z-index: 9999;
194 transform: translate(-50%, -5px);
195 white-space: nowrap;
196 border-radius: $tooltip-border-radius;
197 }
198 &:hover {
199 .agent-info-tooltip {
200 display: block;
201 }
202 }
203 }
204 .oi-info {
205 flex: 1;
206 .oi-service-name {
207 font-size: floor($font-size-base * 1.1);
208 color: $headings-color;
209 margin-bottom: 5px;
210 }
211 .oi-date-w {
212 color: $color-faded;
213 }
214 }
215 &:hover {
216 box-shadow: 0 0 0 2px $brand-primary;
217 border-color: transparent;
218 }
219 }
220 }
221
222 .customer-password-info {
223 background-color: #fbf6e9;
224 border: 1px solid #decfaa;
225 color: #736b60;
226 padding: 10px;
227 padding-left: 30px;
228 border-radius: $border-radius;
229 font-weight: $body-font-weight-bold;
230 margin-bottom: 15px;
231 position: relative;
232 font-size: floor($font-size-base * 0.8);
233 display: flex;
234 align-items: center;
235 a {
236 border-bottom: 1px dotted #111;
237 color: #111;
238 display: block;
239 align-items: center;
240 margin-left: 10px;
241 text-decoration: none;
242 margin-left: auto;
243 &:hover {
244 border-bottom-style: solid;
245 }
246 }
247 &:before {
248 font-size: 12px;
249 position: absolute;
250 top: 50%;
251 left: 10px;
252 transform: translateY(-50%);
253 }
254 &.password-set {
255 &:before {
256 @include latepointfont_admin('\e925');
257 }
258 }
259 &.password-not-set {
260 &:before {
261 @include latepointfont_admin('\e941');
262 }
263 }
264 }
265 .not-connected-pill {
266 width: 8px;
267 height: 8px;
268 background-color: #ff4343;
269 border-radius: 50%;
270 display: inline-block;
271 content: "";
272 }
273
274 .connected-wp-user-status {
275 background-color: #edf9ff;
276 border: 1px solid #7dcce4;
277 padding: 10px;
278 color: #0c6588;
279 border-radius: $border-radius;
280 position: relative;
281 padding-left: 30px;
282 display: flex;
283 gap: 10px;
284 font-size: floor($font-size-base * 0.8);
285 margin-bottom: 15px;
286 .connected-note {
287 }
288 .connected-buttons {
289 margin-left: auto;
290 display: flex;
291 align-items: center;
292 justify-content: flex-start;
293 gap: 10px;
294 > span, > a {
295 display: block;
296 }
297 }
298 &:before {
299 @include latepointfont_admin("\e95b");
300 font-size: 14px;
301 color: #1397dc;
302 position: absolute;
303 top: 50%;
304 left: 9px;
305 transform: translateY(-50%);
306 display: block;
307 }
308 a {
309 display: block;
310 border-bottom: 1px dotted $headings-color;
311 color: $headings-color;
312 text-decoration: none;
313 position: relative;
314 &:hover {
315 border-bottom-style: solid;
316 }
317 span {
318 margin-left: 5px;
319 }
320 i {
321 }
322 &.os-loading {
323 color: transparent;
324 &:after {
325 @include loading-circle($brand-primary);
326 }
327 }
328 }
329 }
330
331 .os-mini-customer-profile-w {
332 padding: 20px;
333 .os-mc-info-w {
334 display: flex;
335 align-items: flex-start;
336 .os-mc-avatar {
337 flex: 0 0 80px;
338 height: 80px;
339 border-radius: 80px;
340 background-size: cover;
341 background-position: center center;
342 }
343 .os-mc-info {
344 padding-left: 20px;
345 .mc-name {
346 font-size: floor($headings-font-size * 0.9);
347 font-weight: $body-font-weight-bold;
348 margin-bottom: 8px;
349 a {
350 text-decoration: none;
351 box-shadow: none;
352 outline: none;
353 font-size: 17px;
354 margin-left: 8px;
355 }
356 }
357 .mc-info-list-item {
358 margin-bottom: 3px;
359 span {
360 color: $color-faded;
361 margin-right: 2px;
362 }
363 }
364 }
365 }
366 .os-mc-sub-info {
367 display: flex;
368 border-top: 1px solid $border-color-sub;
369 padding-top: 15px;
370 margin-top: 10px;
371 .os-mc-heading {
372 color: $color-faded;
373 font-size: floor($font-size-base * 0.8);
374 margin-bottom: 2px;
375 text-transform: uppercase;
376 font-weight: $body-font-weight-bold;
377 letter-spacing: 1px;
378 }
379 .os-mc-upcoming-appointments-w {
380 padding-left: 20px;
381 margin-left: 5px;
382 border-left: 1px solid $border-color-sub;
383 flex: 1;
384 }
385 .os-nothing {
386 background-color: #eef1f9;
387 border-radius: 6px;
388 padding: 27px;
389 text-align: center;
390 color: $color-faded;
391 font-weight: $body-font-weight-bold;
392 }
393 }
394 .os-customer-donut-chart {
395 position: relative;
396 }
397 .os-mc-chart {
398 .os-mc-chart-i {
399 position: relative;
400 }
401 .os-mc-heading {
402 text-align: center;
403 }
404 .os-mc-totals {
405 display: block;
406 font-weight: $body-font-weight-bold;
407 font-size: floor($font-size-base * 1.8);
408 line-height: 1;
409 position: absolute;
410 top: 50%;
411 left: 50%;
412 transform: translate(-50%, -50%);
413 }
414 }
415 .os-mc-upcoming-appointments {
416 display: flex;
417 gap: 10px;
418 padding-top: 10px;
419 }
420 .os-upcoming-appointment {
421 padding: 7px 10px;
422 flex: 0 0 230px;
423 border: 1px solid rgba(0,0,0,0.1);
424 border-bottom-color: rgba(0,0,0,0.2);
425 box-shadow: 0 2px 0 0 rgba(0,0,0,0.05);
426 border-radius: $border-radius;
427 position: relative;
428 cursor: pointer;
429 &:hover {
430 border-color: $brand-primary;
431 box-shadow: 0 0 0 1px $brand-primary;
432 }
433 .appointment-color-elem {
434 display: none;
435 position: absolute;
436 top: 13px;
437 left: 10px;
438 width: 10px;
439 height: 10px;
440 border-radius: 2px;
441 }
442 .appointment-service-name {
443 font-weight: $body-font-weight-bold;
444 font-size: floor($font-size-base * 1);
445 margin-bottom: 5px;
446 color: $headings-color;
447 }
448
449 .appointment-date-w {
450 display: flex;
451 align-items: center;
452 .appointment-date {
453 font-size: floor($font-size-base * 0.8);
454 margin-bottom: 1px;
455 font-weight: $body-font-weight-bold;
456 }
457 .appointment-time {
458 color: $color-faded;
459 font-size: floor($font-size-base * 0.8);
460 }
461 .avatar-w {
462 margin-left: auto;
463 @include avatar(30px);
464 position: relative;
465 .agent-info-tooltip {
466 display: none;
467 position: absolute;
468 bottom: 100%;
469 left: 50%;
470 background-color: #111;
471 color: #fff;
472 font-size: floor($font-size-base * 0.8);
473 font-weight: $body-font-weight-bold;
474 padding: 5px 10px;
475 z-index: 9999;
476 transform: translate(-50%, -5px);
477 white-space: nowrap;
478 border-radius: $tooltip-border-radius;
479 }
480 &:hover {
481 .agent-info-tooltip {
482 display: block;
483 }
484 }
485 }
486 }
487 .os-form-group {
488 margin-bottom: 0px;
489 }
490 }
491
492 }
493
494 .avatar-uploader-w {
495 .avatar-self {
496 background-repeat: no-repeat;
497 background-size: cover;
498 border-radius: 50%;
499 width: 50px;
500 height: 50px;
501 }
502 }
503
504 .fields-with-avatar {
505 display: flex;
506 gap: 15px;
507 margin-bottom: 20px;
508 .field-column {
509 flex: 1;
510 }
511 }
512
513 .payment-processor-customer-link-wrapper {
514 background-color: #eee;
515 border: 1px solid #bbb;
516 color: #333;
517 padding: 10px;
518 padding-left: 30px;
519 border-radius: $border-radius;
520 font-weight: $body-font-weight-bold;
521 margin-bottom: 15px;
522 position: relative;
523 font-size: floor($font-size-base * 0.8);
524 display: flex;
525 align-items: center;
526 a {
527 border-bottom: 1px dotted #111;
528 color: #111;
529 display: block;
530 align-items: center;
531 margin-left: 10px;
532 text-decoration: none;
533 margin-left: auto;
534 &:hover {
535 border-bottom-style: solid;
536 }
537 }
538 &:before {
539 font-size: 12px;
540 position: absolute;
541 top: 50%;
542 left: 10px;
543 transform: translateY(-50%);
544 @include latepointfont_admin("\e91a");
545 }
546 }
547
548 .customer-csv-step {
549 .os-upload-file-input-w input[type=file]=file] {
550 border: 1px solid $border-color-main;
551 padding: 10px 10px 11px 10px;
552 border-radius: $border-radius;
553 width: 100%;
554 display: block;
555 line-height: 1;
556 cursor: pointer;
557 &:hover {
558 border-color: $brand-primary;
559 }
560 }
561
562 .customer-csv-mapping-wrapper {
563 margin-top: 15px;
564 }
565
566 .customer-csv-confirmation-table-wrapper {
567 border-radius: $border-radius;
568 margin-bottom: 15px;
569 overflow: hidden;
570 box-shadow: inset 0 0 0 1px $border-color-main;
571 }
572 .customer-csv-confirmation-table {
573 width: 100%;
574 border: none;
575 border-collapse: collapse;
576 margin: 0;
577
578 td {
579 border: 1px solid $border-color-main;
580 padding: 10px;
581 }
582 }
583
584 .customer-csv-mapping-header {
585 font-size: $body-font-size-xxs;
586 text-transform: uppercase;
587 letter-spacing: 0.5px;
588 font-weight: $body-font-weight-black;
589 color: $color-faded;
590 padding-bottom: 10px;
591 margin-bottom: 10px;
592 border-bottom: 1px solid $border-color-lightest;
593 }
594 .customer-csv-mapping-row {
595 padding-bottom: 10px;
596 margin-bottom: 10px;
597 border-bottom: 1px solid $border-color-lightest;
598 .label-desc {
599 margin-bottom: 0;
600 }
601 .os-form-group.os-form-group-transparent {
602 margin-bottom: 0;
603 }
604 }
605
606 .customer-import-conflicts ul{
607 margin-bottom: 0;
608 }
609
610 .customer-import-result{
611 .customer-import-result-success {
612 margin-bottom: 25px;
613 text-align: center;
614 font-size: $body-font-size-l;
615
616 .latepoint-icon{
617 display: block;
618 margin: 0 auto;
619 margin-bottom: 15px;
620 color: #13c667;
621 text-align: center;
622 font-size: 32px;
623 }
624 }
625 .result-item{
626 display: flex;
627 gap: 20px;
628 padding: 15px;
629 align-items: center;
630 border: 1px solid $border-color-main;
631
632 &:not(:last-child){
633 margin-bottom: 10px;
634 }
635 &.import-status-success .latepoint-icon{
636 background-color: #2fe67f;
637 }
638 &.import-status-warning .latepoint-icon{
639 background: #b8b8b8;
640 }
641 .latepoint-icon{
642 width: 25px;
643 height: 25px;
644 background-color: #2fe67f;
645 box-shadow: 0px 0px 0px 4px rgba(255, 255, 255, 0.6);
646 color: #fff;
647 border-radius: 15px;
648 text-align: center;
649 line-height: 25px;
650 }
651 }
652 }
653 }
654
655
656 .latepoint-fix-records-warning {
657 padding: 15px;
658 border-radius: $border-radius;
659 background-color: #ffe4e4;
660 border: 1px solid #f37b7b;
661 margin-bottom: 15px;
662 position: relative;
663 display: flex;
664 gap: 10px;
665 font-size: $body-font-size-s;
666 color: #731919;
667
668 .latepoint-icon {
669 font-size: 16px;
670 color: #f15555;
671 }
672
673 .latepoint-fix-records-values {
674 font-size: $body-font-size-xs;
675 margin-top: 5px;
676 }
677
678 ul {
679 font-size: $body-font-size-xs;
680 margin: 0;
681 margin-top: 5px;
682 padding: 0;
683 padding-left: 20px;
684 list-style: square;
685 }
686 }