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