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