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.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 / _processes.scss
latepoint / lib / assets / stylesheets / admin Last commit date
_activities.scss 1 year ago _addons.scss 1 year ago _agents.scss 1 year ago _animations.scss 1 year ago _booking_form_preview.scss 1 year ago _bookings.scss 1 year ago _bundles.scss 1 year ago _buttons.scss 1 year ago _calendars.scss 1 year ago _categories.scss 1 year ago _customers.scss 1 year ago _dark.scss 1 year ago _daterangepicker.scss 1 year ago _elements.scss 1 year ago _forms.scss 1 year ago _grid.scss 1 year ago _grid_variables.scss 1 year ago _icons.scss 1 year ago _latecheckbox.scss 1 year ago _lateselect.scss 1 year ago _layout.scss 1 year ago _lightbox.scss 1 year ago _menu.scss 1 year ago _messages.scss 1 year ago _misc.scss 1 year ago _mixins.scss 1 year ago _notifications.scss 1 year ago _orders.scss 1 year ago _pickr.scss 1 year ago _processes.scss 1 year ago _quick_availability.scss 1 year ago _reminders.scss 1 year ago _responsive.scss 1 year ago _roles.scss 1 year ago _schedule.scss 1 year ago _services.scss 1 year ago _settings.scss 1 year ago _side-panel.scss 1 year ago _steps.scss 1 year ago _tables.scss 1 year ago _type.scss 1 year ago _updates.scss 1 year ago _utilities.scss 1 year ago _variables.scss 1 year ago _widgets.scss 1 year ago _wizard.scss 1 year ago
_processes.scss
694 lines
1 /*!
2 * Copyright (c) 2022 LatePoint LLC. All rights reserved.
3 */
4
5 .process-event-condition-wrapper {
6 .sub-section-row:first-child {
7 border-top: 1px solid #dcdcea;
8 }
9 }
10
11 .process-action-form {
12 margin-bottom: 10px;
13 @include white-box-stack();
14
15
16 &:not(.is-editing) .process-action-heading:hover {
17 .process-action-remove {
18 display: block;
19 }
20 }
21 .process-action-heading {
22 display: flex;
23 align-items: center;
24 background-color: #fff;
25 padding: 15px;
26 color: $headings-color;
27 font-weight: $body-font-weight-bold;
28 font-size: $body-font-size-s;
29 line-height: 1;
30 cursor: pointer;
31 position: relative;
32 border-radius: 4px;
33 .process-action-icon {
34 line-height: 1;
35 width: 30px;
36 margin-left: 15px;
37 padding-left: 10px;
38 font-size: 15px;
39 border-left: 1px solid $border-color-lightest;
40 &:before {
41 @include latepointfont_admin("\e967");
42 }
43 }
44 .process-action-name {
45 margin-left: 10px;
46 }
47 .process-action-descriptive-setting {
48 background-color: #f0f5ff;
49 padding: 2px 3px;
50 margin-left: 10px;
51 font-size: floor($font-size-base * 0.8);
52 color: $brand-primary;
53 border-radius: 4px;
54 }
55 .process-action-chevron {
56 margin-left: auto;
57 font-size: 16px;
58 }
59 .process-action-remove {
60 @include remove-block-x();
61 }
62 .process-action-status {
63 color: #fff;
64 width: 8px;
65 height: 8px;
66 text-align: center;
67 border-radius: 50%;
68 z-index: 3;
69 }
70 }
71 &.pa-type-send_email {
72 .process-action-icon:before {
73 @include latepointfont_admin("\e927");
74 }
75 }
76 &.pa-type-send_sms {
77 .process-action-icon:before {
78 @include latepointfont_admin("\e92c");
79 }
80 }
81 &.pa-type-trigger_webhook {
82 .process-action-icon:before {
83 @include latepointfont_admin("\e971");
84 }
85 }
86 &.pa-type-send_whatsapp {
87 .process-action-icon:before {
88 @include latepointfont_admin("\e950");
89 }
90 }
91 &.pa-status-active {
92 .process-action-status {
93 background-image: linear-gradient(180deg, #5aff77, #00f842);
94 box-shadow: 0px 1px 0px 0px rgba(#8aff9a, 0.5), 0px 0px 0px 4px rgba(#8aff9a, 0.25), 0px 0px 0px 7px rgba(#8aff9a, 0.15), inset 0px 2px 0px 0px rgba(255, 255, 255, 0.4);
95 border: 1px solid #35d431;
96 border-bottom-color: #33c82f;
97 }
98 }
99 &.pa-status-disabled {
100 .process-action-status {
101 background-image: linear-gradient(180deg, #ff5839, #f50e0e);
102 box-shadow: 0px 1px 0px 0px rgba(#ff8a8a, 0.5), 0px 0px 0px 4px rgba(#ff8a8a, 0.1), 0px 0px 0px 7px rgba(#ff8a8a, 0.05), inset 0px 2px 0px 0px rgba(255, 255, 255, 0.2);
103 border: 1px solid #ee1b1b;
104 border-bottom-color: #ce0a0a;
105 }
106 }
107 .process-action-content {
108 padding: 20px;
109 display: none;
110 > div + div {
111 margin-top: 15px;
112 }
113 }
114
115 .process-action-settings {
116 margin-top: 10px;
117 position: relative;
118 > div + div {
119 margin-top: 15px;
120 }
121 &.os-loading {
122 &:before {
123 @include loading-circle($brand-primary, 12px);
124 top: -33px;
125 left: -10px;
126 }
127 }
128 }
129 &:not(.is-editing){
130 &:hover {
131 box-shadow: 0px 0px 0px 2px $brand-primary;
132 border-color: transparent;
133 }
134 }
135 &.is-editing {
136 .process-action-chevron {
137 i.latepoint-icon-chevron-down:before {
138 content: "\e96d";
139 }
140 }
141 .process-action-descriptive-setting {
142 visibility: hidden;
143 }
144 .process-action-status {
145 box-shadow: none;
146 border-color: $brand-primary;
147 &:before {
148 $color: #fff;
149 background-color: $color;
150 box-shadow: 6px 6px 0px 0px $color, 0px 6px 0px 0px $color, 6px 0px 0px 0px $color, 6px 12px 0px 0px $color, 0px 12px 0px 0px $color;
151 }
152 }
153 .process-action-heading {
154 background-color: $brand-primary;
155 box-shadow: 0px 0px 0px 1px $brand-primary;
156 color: #fff;
157 }
158 .process-action-icon {
159 border-color: rgba(255,255,255,0.1);
160 }
161 .process-action-content {
162 display: block;
163 }
164 }
165 .process-buttons {
166 display: flex;
167 .pull-left {
168 margin-right: auto;
169 }
170 }
171 }
172
173
174 .process-condition-values-w {
175 flex: 1;
176 }
177
178 .pe-condition {
179 display: flex;
180 border: 1px solid $border-color-main;
181 padding: 15px;
182 align-items: center;
183 position: relative;
184 &:hover {
185 .pe-remove-condition {
186 display: block;
187 }
188 }
189
190 .pe-remove-condition {
191 outline: none;
192 border: none;
193 position: absolute;
194 left: 0px;
195 top: 50%;
196 transform: translate(-50%, -50%);
197 font-size: 14px;
198 color: #eb3a3a;
199 text-decoration: none;
200 padding: 0px 2px;
201 line-height: 20px;
202 width: 20px;
203 height: 20px;
204 border-radius: 10px;
205 background-color: #fff;
206 box-shadow: $box-shadow;
207 text-align: center;
208 z-index: 3;
209 display: none;
210 cursor: pointer;
211 &:focus {
212 outline: none;
213 }
214 &:hover {
215 color: #dc5858;
216 box-shadow: 0px 0px 0px 2px #dc5858;
217 }
218 i {
219 vertical-align: middle;
220 line-height: 21px;
221 display: block;
222 }
223 &.os-loading {
224 &:after {
225 display: block;
226 content: "";
227 width: 19px;
228 height: 19px;
229 border-bottom: 2px solid #dc5858;
230 border-left: 2px solid #dc5858;
231 border-top: 2px solid #dc5858;
232 border-right: 2px solid rgba(255,255,255,0);
233 border-radius: 20px;
234 position: absolute;
235 top: 50%;
236 left: 50%;
237 transform: translate(-50%, -50%);
238 animation: os-loading 700ms infinite linear;
239 }
240 i {
241 color: transparent;
242 }
243 }
244 }
245 .os-form-group {
246 margin-right: 10px;
247 }
248 .custom-field-condition-values-w {
249 flex: 1;
250 }
251 & + .pe-condition {
252 border-top-left-radius: 0px;
253 border-top-right-radius: 0px;
254 border-top: none;
255 }
256 &:last-child {
257 border-bottom-left-radius: $form-controls-border-radius;
258 border-bottom-right-radius: $form-controls-border-radius;
259 }
260 }
261
262 .pe-conditions {
263 display: none;
264 &.is-active {
265 display: block;
266 }
267 .time-offset-actions {
268 display: flex;
269 padding: 10px 15px;
270 border: 1px solid $border-color-main;
271 border-radius: 6px;
272 align-items: center;
273 margin-top: 10px;
274 .time-offset-label {
275 font-weight: $body-font-weight-bold;
276 font-size: $font-size-base;
277 }
278
279 .os-form-group, .time-offset-label{
280 margin: 0px;
281 margin-right: 10px;
282 input[type="number"]="number""]{
283 max-width: 60px;
284 }
285 }
286 }
287 .pe-conditions-heading {
288 font-size: $font-size-base;
289 margin-top: 15px;
290 background-color: #fbfcfd;
291 color: $color-faded;
292 font-weight: $body-font-weight-bold;
293 border: 1px solid $border-color-main;
294 border-bottom: none;
295 padding: 10px 15px;
296 border-radius: 4px 4px 0px 0px;
297 }
298 }
299
300
301 .process-action-controls-wrapper {
302 border-bottom: 1px solid $border-color-light;
303 padding-bottom: 10px;
304 margin-bottom: 10px;
305 .latepoint-btn + .latepoint-btn {
306 margin-left: 10px;
307 }
308 }
309
310
311 // templates
312
313 .os-templates-wrapper {
314 display: flex;
315 height: 100%;
316 .os-templates-list {
317 flex: 0 0 380px;
318 overflow-y: auto;
319 .template-type-selector-wrapper {
320 z-index: 2;
321 .template-type-selector {
322 white-space: nowrap;
323 padding: 20px 30px;
324 font-size: $body-font-size-m;
325 font-weight: $body-font-weight-bold;
326 color: $headings-color;
327 position: relative;
328 cursor: pointer;
329 border-bottom: 1px solid $border-color-lightest;
330 &:after {
331 position: absolute;
332 top: 50%;
333 transform: translateY(-50%);
334 right: 10px;
335 content: "";
336 @include latepointfont_admin("\e911");
337 color: $headings-color;
338 }
339 &:hover {
340 color: $headings-color;
341 }
342 &.is-selected {
343 &:after {
344 @include latepointfont_admin("\e914");
345 }
346 }
347 }
348 }
349 h4 {
350 font-size: floor($headings-font-size * 0.8);
351 margin: 0px;
352 padding-bottom: 20px;
353 color: $color-faded;
354 padding-left: 30px;
355 }
356 .os-template-items {
357 border-bottom: 1px solid $border-color-lightest;
358 &.hidden {
359 display: none;
360 }
361 }
362 .os-template-item {
363 padding: 12px 30px;
364 position: relative;
365 cursor: pointer;
366 &.selected {
367 background-color: #f8f8f8;
368 .os-template-name {
369 color: $headings-color;
370 }
371 .os-template-user-type {
372 }
373 }
374 &:hover:not(.selected) {
375 background-color: #f8f8f8;
376 .os-template-name {
377 }
378 }
379 }
380 .os-template-user-type {
381 color: $color-faded;
382 font-weight: $body-font-weight-bold;
383 display: inline-block;
384 font-size: floor($font-size-base * 0.9);
385 &.type-agent {
386 }
387 &.type-customer {
388 }
389 }
390 .os-template-name {
391 font-size: floor($font-size-base * 1);
392 font-weight: $body-font-weight-bold;
393 }
394 }
395 .os-template-previews {
396 flex: 1;
397 border-left: 1px solid $border-color-light;
398 display: flex;
399 flex-direction: column;
400 .os-template-previews-main-heading {
401 padding: 20px 30px;
402 font-size: $body-font-size-m;
403 border-bottom: 1px solid $border-color-lightest;
404 }
405 .os-template-use-button-wrapper {
406 padding: 15px 30px;
407 border-top: 1px solid $border-color-light;
408 display: flex;
409 button {
410 margin-left: auto;
411 }
412 &.hidden {
413 display: none;
414 }
415 }
416 .os-no-template-selected-message {
417 background-color: #f8f8f8;
418 color: $color-faded;
419 font-size: $body-font-size-m;
420 text-align: center;
421 padding: 20px;
422 height: 100%;
423 display: flex;
424 flex-direction: column;
425 justify-content: center;
426 align-items: center;
427 gap: 15px;
428 line-height: 1.5;
429 .latepoint-icon {
430 font-size: 20px;
431 }
432 div {
433 width: 320px;
434 }
435 }
436 .os-template-preview-headings {
437 padding: 30px;
438 border-bottom: 1px solid #eee;
439 }
440 .os-template-preview-to {
441 display: flex;
442 font-weight: $body-font-weight-bold;
443 .os-label {
444 color: $color-faded;
445 display: block;
446 margin-right: 5px;
447 }
448 .os-value {
449 display: block;
450 flex: 1;
451 }
452 }
453 .os-template-preview-subject {
454 display: flex;
455 font-size: $body-font-size-m;
456 font-weight: $body-font-weight-bold;
457 margin-bottom: 5px;
458 .os-label {
459 color: $color-faded;
460 display: block;
461 margin-right: 5px;
462 }
463 .os-value {
464 display: block;
465 flex: 1;
466 color: $headings-color;
467 }
468 }
469 .os-template-preview-content {
470 flex: 1;
471 overflow-y: auto;
472 }
473
474 .os-template-preview {
475 display: flex;
476 flex-direction: column;
477 overflow: hidden;
478 max-height: 100%;
479 flex: 1;
480 &.type-send_sms {
481 padding-top: 40px;
482 .os-template-preview-content-wrapper {
483 padding: 20px;
484 margin: 0px auto;
485 width: 340px;
486 padding-right: 50px;
487 border: 14px solid #e1e1e5;
488 border-bottom: none;
489 padding-bottom: 40px;
490 border-radius: 60px 60px 0px 0px;
491 }
492 .os-template-preview-to {
493 margin-bottom: 20px;
494 }
495 .os-template-preview-content {
496 padding: 22px;
497 border-radius: 20px 20px 20px 0px;
498 display: inline-block;
499 background-color: #54a7ff;
500 background-image: linear-gradient(45deg, #004fff, transparent);
501 box-shadow: 0px 1px 4px #b4dbff;
502 color: #fff;
503 font-size: floor($font-size-base * 0.9);
504 line-height: 1.5;
505 font-weight: $body-font-weight-bold;
506
507 }
508 }
509 }
510 }
511 }
512
513 .os-template-var {
514 background-color: #e0efff;
515 color: #0043c7;
516 border-radius: 4px;
517 padding: 1px 2px;
518 display: inline-block;
519 font-size: $body-font-size-s;
520 }
521
522 .action-settings-wrapper {
523 border-bottom: 1px solid $border-color-main;
524 padding: 15px 30px 5px 30px;
525 }
526 .action-preview-wrapper {
527 position: relative;
528 > h3 {
529 margin-bottom: 10px;
530 font-size: $headings-font-size-l;
531 }
532 .action-to-run {
533 padding: 5px 0px;
534 .os-form-group.os-form-toggler-group {
535 margin-bottom: 0px;
536 }
537 label {
538 font-size: 18px;
539 color: $headings-color;
540 }
541 &:not(:last-child){
542 border-bottom: 1px solid $border-color-lightest;
543 }
544 }
545 .action-preview-error {
546 padding: 15px;
547 font-size: ($font-size-base * 1.2);
548 font-weight: $body-font-weight-bold;
549 background-color: #fff5e5;
550 color: #8f6b3e;
551 border-radius: 6px;
552 text-align: center;
553 margin-bottom: 20px;
554 }
555 .action-preview-content-wrapper {
556 transition: opacity 0.3s ease;
557 }
558 &.os-loading {
559 .action-preview-content-wrapper {
560 opacity: 0;
561 }
562 &:before {
563 @include loading-circle($brand-primary, 20px);
564 top: 50px;
565 }
566 }
567 .action-preview-to {
568 display: flex;
569 font-weight: $body-font-weight-bold;
570 margin-bottom: 20px;
571 .os-label {
572 color: $color-faded;
573 display: block;
574 margin-right: 5px;
575 }
576 .os-value {
577 display: block;
578 flex: 1;
579 }
580 }
581 .action-preview-subject {
582 display: flex;
583 font-size: $body-font-size-s;
584 font-weight: $body-font-weight-bold;
585 margin-bottom: 5px;
586 color: $headings-color;
587 .os-label {
588 color: $color-faded;
589 display: block;
590 margin-right: 5px;
591 }
592 .os-value {
593 display: block;
594 flex: 1;
595 }
596 }
597 &.type-send_email {
598 .action-preview-content {
599 border-top: 1px solid rgba(0,0,0,0.1);
600 }
601 }
602 &.type-send_sms {
603 .action-preview-content-wrapper {
604 padding: 20px;
605 margin: 0px auto;
606 width: 340px;
607 padding-right: 50px;
608 border: 14px solid #e1e1e5;
609 border-bottom: none;
610 padding-bottom: 40px;
611 border-radius: 60px 60px 0px 0px;
612 }
613 .action-preview-to {
614 margin-bottom: 20px;
615 }
616 .action-preview-content {
617 padding: 22px;
618 border-radius: 20px 20px 20px 0px;
619 display: inline-block;
620 background-color: #54a7ff;
621 background-image: linear-gradient(45deg, #004fff, transparent);
622 box-shadow: 0px 1px 4px #b4dbff;
623 color: #fff;
624 font-size: floor($font-size-base * 1.1);
625 font-weight: $body-font-weight-bold;
626
627 }
628 }
629 }
630
631 .action-run-info-pill {
632 display: flex;
633 align-items: center;
634 border: 1px solid #ddd;
635 border-bottom-color: #aaa;
636 box-shadow: 0px 1px 0px 0px rgba(0,0,0,0.1);
637 border-radius: 6px;
638 padding: 5px 6px;
639 font-size: 12px;
640 line-height: 1;
641 cursor: pointer;
642 background-color: #fff;
643 font-weight: $body-font-weight-bold;
644 position: relative;
645 &.os-loading {
646 &:before {
647 @include loading-circle($brand-primary, 12px);
648 right: 0px;
649 left: auto;
650 }
651
652 i:last-child {
653 color: transparent!important;
654 }
655 }
656 & + .action-run-info-pill {
657 margin-top: 7px;
658 }
659 &:hover {
660 border-color: $brand-primary;
661 color: $brand-primary;
662 box-shadow: 0px 0px 0px 2px lighten($brand-primary, 40%);
663 }
664 span {
665 display: inline-block;
666 margin-right: 5px;
667 }
668 span + .latepoint-icon {
669 display: inline-block;
670 margin-left: auto;
671 font-size: 12px;
672 }
673 .latepoint-icon:first-child {
674 margin-right: 5px;
675 }
676 }
677
678 .os-jobs-list {
679 tr:hover {
680 .os-column-status-scheduled {
681 cursor: pointer;
682 &:hover {
683 border-color: #c13c3c!important;
684 background-color: #f8d1d1!important;
685 color: #aa2a2a!important;
686 }
687 &:before {
688 content: "\e94b"!important;
689 }
690 }
691 }
692 }
693
694