PluginProbe ʕ •ᴥ•ʔ
Booking for Appointments and Events Calendar – Amelia / 1.2.20
Booking for Appointments and Events Calendar – Amelia v1.2.20
2.4.4 2.4.3 2.4.2 2.4.1 2.4 trunk 1.2.1 1.2.10 1.2.11 1.2.12 1.2.13 1.2.14 1.2.15 1.2.16 1.2.17 1.2.18 1.2.19 1.2.2 1.2.20 1.2.21 1.2.22 1.2.23 1.2.24 1.2.25 1.2.26 1.2.27 1.2.28 1.2.29 1.2.3 1.2.30 1.2.31 1.2.32 1.2.33 1.2.34 1.2.35 1.2.36 1.2.37 1.2.38 1.2.4 1.2.5 1.2.6 1.2.7 1.2.8 1.2.9 2.0 2.0.1 2.0.2 2.1 2.1.1 2.1.2 2.1.3 2.2 2.2.1 2.3
ameliabooking / assets / less / common / _elements.less
ameliabooking / assets / less / common Last commit date
_animations.less 7 years ago _base.less 7 years ago _country-flags.less 5 years ago _elements.less 1 year ago _overrides.less 1 year ago _variables.less 4 years ago font.less 4 years ago rtl.less 3 years ago
_elements.less
2422 lines
1 @import "_variables";
2
3 // Helpers
4 .am-body {
5 a {
6 text-decoration: none;
7 color: @color-text-prime;
8 font-weight: @medium;
9 }
10
11 .goto {
12 color: @color-blue;
13 font-weight: @regular;
14 }
15
16 .am-section {
17 padding: @padding-big;
18 background-color: @color-white;
19 }
20
21 .am-divider {
22 height: 1px;
23 width: 100%;
24 background-color: @color-divider-gray;
25 margin: @margin-medium 0;
26 }
27
28 .am-strong {
29 font-weight: @bold;
30 }
31
32 .am-semi-strong {
33 font-weight: @medium;
34 }
35
36 .am-link {
37 color: @color-blue;
38 cursor: pointer;
39 font-weight: 500;
40 box-shadow: none;
41
42 &:hover {
43 text-decoration: underline;
44 }
45 }
46
47 .am-margin-bottom {
48 margin-bottom: @margin-medium;
49 }
50
51 .am-no-padding {
52 padding: 0 !important;
53 }
54
55 .am-no-min-height {
56 min-height: inherit !important;
57
58 .el-row:first-child {
59 display: flex;
60 }
61 }
62
63 .am-no-margin {
64 margin: 0 !important;
65 }
66
67
68 .am-small {
69 font-size: @small-fs;
70 }
71
72 .am-email {
73 font-size: @small-fs;
74 }
75
76 .hide-on-mobile {
77 @media @less-then-small {
78 display: none;
79 }
80 }
81
82 .hide-on-desktop {
83 @media @more-then-small {
84 display: none;
85 }
86 }
87
88 .am-empty-state {
89 text-align: center;
90 padding: @padding-big*4 @padding-medium;
91
92 h2 {
93 font-size: @big-fs;
94 }
95 }
96
97 .el-form-item__error {
98 top: auto;
99 bottom: 3px;
100 font-size: 10px;
101 color: #ff4949;
102 }
103
104 .flexed-left-middle {
105 display: flex;
106 justify-items: flex-start;
107 align-items: center;
108 }
109
110 .flexed-between {
111 display: flex;
112 justify-content: space-between;
113 align-items: baseline;
114 }
115
116 .am-col-title {
117 display: none;
118 font-size: @small-fs;
119 margin: 0;
120 color: @color-text-second;
121 @media @less-then-large {
122 display: block;
123 }
124 }
125
126 .el-row.am-flexed {
127 display: flex;
128 flex-wrap: wrap;
129 }
130
131 .am-flexed2 {
132 display: flex;
133 //flex-wrap: wrap;
134
135 &:last-of-type {
136 position: absolute;
137 display: flex;
138 right: 0;
139 justify-content: flex-end;
140 }
141
142 &.mobile {
143 position: absolute;
144 display: flex;
145 right: 0;
146 justify-content: flex-end;
147 }
148 }
149
150 a.am-help-button {
151 display: inline-block;
152 color: @color-text-second;
153 cursor: pointer;
154 padding-top: @padding-medium;
155 padding-left: @padding-medium;
156 box-shadow: none !important;
157 font-weight: @regular;
158
159 &:hover {
160 color: @color-blue;
161 }
162 }
163
164 .am-three-dots {
165 display: block;
166 white-space: nowrap;
167 overflow: hidden;
168 text-overflow: ellipsis;
169 }
170
171 .am-overflow-ellipsis {
172 text-overflow: ellipsis;
173 white-space: nowrap;
174 overflow-x: hidden;
175 }
176 }
177
178 .am-spinner {
179 text-align: center;
180
181 img {
182 margin: 12vh 0;
183 }
184 }
185
186 .am-alert {
187 padding: @padding-medium;
188 margin-bottom: @margin-medium;
189 }
190
191 .am-page-header {
192 border-bottom: 2px solid @color-divider-gray;
193
194 .el-row {
195 min-height: 42px;
196 }
197
198 .am-logo {
199 display: inline-block;
200 padding-right: @padding-big;
201 vertical-align: middle;
202
203 * {
204 display: inline-block;
205 vertical-align: middle;
206 }
207
208 @media @less-then-small {
209 padding-right: @padding-small;
210 }
211
212 .logo-big {
213 @media @less-then-small {
214 display: none;
215 }
216 }
217
218 .logo-small {
219 display: none;
220 @media @less-then-small {
221 display: block;
222 }
223 }
224 }
225
226 h1.am-page-title {
227 display: inline-block;
228 border-left: 1px solid @color-divider-gray;
229 padding-left: @padding-big;
230 vertical-align: middle;
231 line-height: 1.9;
232 @media @less-then-small {
233 padding-left: @padding-small;
234 }
235
236 span {
237 line-height: 1.9;
238 display: inline-block;
239 vertical-align: middle;
240 font-size: @mini-fs;
241 @media @less-then-small {
242 display: none;
243 }
244 }
245
246 .am-appointments-number, .total-number, .total-number {
247 line-height: 1.8;
248 display: inline-block;
249 padding: 0 @padding-small;
250 margin-left: @margin-small/2;
251 border-radius: 20px;
252 font-size: @small-fs;
253 text-align: center;
254 background-color: fade(@color-text-prime, 10%);
255 @media @less-then-small {
256 display: none;
257 }
258
259 &.approved {
260 background-color: fade(@color-green, 10%);
261 color: @color-green;
262 }
263
264 &.pending {
265 background-color: fade(@color-orange, 10%);
266 color: @color-orange;
267 }
268
269 &.paid {
270 background-color: fade(@color-green, 10%);
271 color: @color-green;
272 }
273 }
274 }
275
276 .am-calendar-header-filters {
277 @media @less-then-large {
278 margin-top: @margin-medium;
279 }
280
281 .el-form {
282 display: inline-block;
283 vertical-align: middle;
284 }
285
286 .el-form-item__label {
287 padding-right: @padding-small;
288 @media @less-then-large {
289 display: block;
290 text-align: left;
291 }
292 }
293
294 .el-form-item {
295 margin: 0 0 0 @margin-small;
296
297 @media @less-then-small {
298 display: block;
299 }
300 }
301
302 .el-input {
303 margin: 0;
304 }
305
306 .el-button {
307 margin-left: @margin-small;
308
309 @media @less-then-large {
310 /*margin: @margin-medium 0 0;
311 display: block;*/
312 position: absolute;
313 top: 0;
314 right: 0;
315
316 }
317
318 span.button-text {
319 @media only screen and ( max-width: 1367px) {
320 display: none;
321 }
322 }
323 }
324 }
325 }
326
327 .am-border-bottom {
328 border-bottom: 1px solid @color-divider-gray;
329 }
330
331 .am-border-right {
332 border-right: 1px solid @color-divider-gray;
333 }
334
335 .am-big-num {
336 font-family: @roboto;
337 font-weight: @light;
338 font-size: @huge-fs;
339 line-height: 1;
340 margin-bottom: @margin-medium;
341 position: relative;
342 word-break: break-all;
343 @media @less-then-large {
344 font-size: 32px;
345 }
346 }
347
348 .am-search {
349 .el-input {
350 &:before {
351 content: "\e778";
352 font-family: element-icons !important;
353 -webkit-font-smoothing: antialiased;
354 vertical-align: baseline;
355 display: inline-block;
356 position: absolute;
357 top: 50%;
358 left: 11px;
359 margin-top: -7px;
360 color: @color-text-second;
361 line-height: 1;
362 }
363
364 input {
365 background-color: @color-light-gray;
366 padding-left: @padding-medium*2;
367 }
368 }
369 }
370
371 .am-rotate45 {
372 -ms-transform: rotate(45deg); /* IE 9 */
373 -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
374 transform: rotate(45deg);
375 }
376
377 .el-tabs__nav .el-tabs__item:nth-child(2) {
378 padding-left: 0;
379 }
380
381 #doughnut-chart {
382 margin-bottom: @margin-big;
383 }
384
385 .align-right, .am-align-right {
386 text-align: right;
387 }
388
389 .align-left, .am-align-left {
390 text-align: left;
391 }
392
393 .am-button-new {
394 position: fixed;
395 bottom: 32px;
396 right: 32px;
397 z-index: 1000;
398
399 .el-button {
400 border-radius: 40px;
401 padding: 20px;
402 background-color: @color-blue;
403 box-shadow: 0 8px 8px 0 rgba(0, 0, 0, 0.24), 0 0 8px 0 rgba(0, 0, 0, 0.12);
404
405 &:hover, &:focus {
406 color: @color-white;
407 }
408 }
409 }
410
411 .am-dialog-create {
412 @media @less-then-medium {
413 span.button-text {
414 display: none;
415 }
416 }
417 }
418
419 .am-dialog-service {
420 .am-dialog-table {
421 margin-top: @margin-medium;
422
423 .am-delete-element {
424 margin-top: @margin-big - 2px;
425 @media @less-then-small {
426 padding-left: 0 !important;
427 }
428 }
429 }
430 }
431
432 .am-dialog-loader {
433 position: fixed;
434 z-index: 3;
435 top: 0;
436 bottom: 0;
437 left: 0;
438 right: 0;
439 background-color: @color-white;
440 padding: @padding-big;
441 text-align: center;
442 display: flex;
443 align-items: center;
444 justify-content: center;
445
446 img {
447
448 }
449 }
450
451 .am-appointments,
452 .am-customers,
453 .am-resources,
454 .am-finances {
455 .am-section-header {
456 padding: @padding-medium @padding-big;
457 border-bottom: 1px solid @color-divider-gray;
458
459 h2 {
460 line-height: 2;
461 display: inline-block;
462 }
463
464 .el-button {
465 float: right;
466 }
467 }
468
469 .am-appointments-list,
470 .am-customers-list,
471 .am-resources-list,
472 .am-finance-list {
473 .am-appointment,
474 .am-customer,
475 .am-resource,
476 .am-finance {
477 padding: 0 @padding-big;
478 border-bottom: 1px solid @color-divider-gray;
479
480 &.is-active {
481 background-color: @color-highlight;
482 }
483
484 &:hover {
485 background-color: @color-highlight;
486 }
487
488 .el-col {
489 @media @less-then-small {
490 //margin-bottom: @margin-medium;
491 }
492 }
493
494 p {
495 margin-top: 0;
496 margin-bottom: @margin-small;
497 color: @color-text-second;
498 }
499
500 h3 {
501 margin-top: 0;
502 font-weight: @bold;
503 margin-bottom: @margin-small
504 }
505
506 h3 + span {
507 color: @color-text-second;
508 display: block;
509 line-height: 1.1;
510 }
511
512 h3 + span + span {
513 color: @color-text-second;
514 display: block;
515 line-height: 1.1;
516 }
517
518 h4 {
519 margin-top: 0;
520 margin-bottom: 0;
521 display: inline-block;
522 line-height: 1.1;
523 vertical-align: middle;
524 white-space: nowrap;
525 overflow: hidden;
526 text-overflow: ellipsis;
527 width: 100%;
528
529 span {
530 vertical-align: middle;
531 }
532 }
533
534 .am-assigned {
535 img {
536 border-radius: 50%;
537 border: 2px solid @color-white;
538 display: inline-block;
539 vertical-align: top;
540 width: 32px;
541 height: 32px;
542 min-width: 32px;
543 max-width: 32px;
544 }
545 }
546
547 .el-button {
548 margin-top: @margin-small;
549 pointer-events: all;
550 }
551
552 &.am-customer-blocked {
553 background-color: #fcfcfc;
554
555 &:hover {
556 background-color: #f9f9f9;
557 }
558 }
559 }
560
561 .el-collapse-item__header {
562 position: relative;
563 //pointer-events: none;
564 }
565
566 .el-collapse-item__header__arrow, .el-collapse-item__arrow {
567 position: absolute;
568 z-index: 1;
569 top: 50%;
570 right: -20px;
571 cursor: pointer;
572 margin-top: -@margin-medium;
573 margin-right: 0;
574 pointer-events: all;
575 padding: 8px;
576 line-height: 1;
577 @media @less-then-large {
578 top: 0;
579 margin-top: 16px;
580 }
581 }
582
583 .am-appointment-data, .am-customer-data, .am-finance-data {
584 padding: @padding-medium 0;
585 position: relative;
586 width: 100%;
587
588 .el-col {
589 @media @less-then-small {
590 //margin-bottom: @margin-medium;
591 }
592 }
593 }
594
595 .am-appointment-details, .am-customer-details, .am-finance-details {
596 padding: @padding-medium 0;
597 border-top: 1px solid @color-divider-gray;
598
599 h3 {
600 margin-bottom: @margin-medium;
601 line-height: 1;
602 }
603
604 .am-data {
605 color: @color-text-second;
606 font-weight: @regular;
607 }
608
609 .am-value {
610 color: @color-text-prime;
611 font-weight: @regular;
612 @media @less-then-small {
613 margin-bottom: @margin-medium;
614 }
615 }
616
617 .am-appointment-payment {
618 display: flex;
619 align-items: center;
620
621 img {
622 width: 25px;
623 }
624
625 &-mollie, &-razorpay, &-square {
626 img {
627 width: 70px;
628 }
629 }
630
631 &-oliver {
632 img {
633 width: 15px;
634 height: 15px;
635 }
636 }
637 }
638
639 .el-row {
640 &.has-divider {
641 border-bottom: 1px solid @color-divider-gray;
642 margin-bottom: @margin-medium;
643
644 &:first-child {
645 padding-top: 0;
646 }
647
648 &:last-child {
649 border-bottom: none;
650 padding-bottom: 0;
651 }
652 }
653
654 .el-row {
655 padding: 0 0 @padding-small;
656
657 &:last-child {
658 padding: 0;
659 }
660 }
661 }
662
663 .am-appointment-collapsed-field:nth-child(odd) {
664 clear: both;
665 }
666
667 .am-zoom {
668 .am-zoom-col-icon {
669 display: flex;
670 align-items: end;
671
672 svg {
673 width: 25px;
674 margin-right: 8px;
675 }
676 }
677 }
678 }
679 }
680 }
681
682 .am-appointment-status, .am-employee-status {
683 position: relative;
684
685 .el-select .el-input__inner {
686 padding-left: 30px;
687 background-color: @color-white;
688 }
689
690 .el-input {
691 margin-bottom: 0;
692 }
693 }
694
695 .am-appointment-dialog-status-option {
696 .am-appointment-status-symbol {
697 &:before {
698 margin-top: -14px;
699 }
700
701 &-wl-status {
702 padding-left: 10px;
703 }
704 }
705 }
706
707
708 .am-appointment-status-option, .am-employee-status-option {
709 padding-left: 30px;
710
711 .am-appointment-status-symbol {
712 &:before {
713 margin-top: -14px;
714 }
715 }
716
717 span {
718 line-height: 2.5;
719 }
720 }
721
722 .am-appointment-status-symbol, .am-employee-status-symbol {
723 &.am-status-label {
724 padding-left: 20px;
725
726 &:before {
727 left: 0;
728 }
729 }
730
731 &:before {
732 width: 16px;
733 height: 16px;
734 display: block;
735 position: absolute;
736 z-index: 1;
737 top: 50%;
738 margin-top: -8px;
739 left: 10px;
740 pointer-events: none;
741 }
742
743 &-approved {
744 &:before {
745 content: url("../../img/am-status-approved.svg");
746 }
747 }
748
749 &-canceled {
750 &:before {
751 content: url("../../img/am-status-canceled.svg");
752 }
753 }
754
755 &-pending {
756 &:before {
757 content: url("../../img/am-status-pending.svg");
758 }
759 }
760
761 &-rejected {
762 &:before {
763 content: url("../../img/am-status-rejected.svg");
764 }
765 }
766
767 &-waiting {
768 &:before {
769 content: url("../../img/am-status-waiting.svg");
770 }
771 }
772
773 &-no-show {
774 &:before {
775 content: url("../../img/am-status-no-show.svg");
776 }
777 }
778
779 &-paid {
780 &:before {
781 content: url("../../img/am-status-approved.svg");
782 }
783 }
784
785 &-partiallyPaid {
786 &:before {
787 content: url("../../img/am-status-partiallyPaid.svg");
788 }
789 }
790
791
792 &-refunded {
793 &:before {
794 content: url("../../img/am-status-refunded.svg");
795 }
796 }
797
798 &.approved {
799 &:before {
800 border-color: @color-green;
801 }
802 }
803
804 &.pending {
805 &:before {
806 border-color: @color-orange;
807 }
808 }
809
810 &.canceled {
811 &:before {
812 border-color: @color-red;
813 }
814 }
815
816 &.rejected {
817 &:before {
818 border-color: @color-text-prime;
819 }
820 }
821
822 &.no-show {
823 &:before {
824 border-color: @color-dark-gray;
825 }
826 }
827
828 &.available {
829 &:before {
830 border-color: @color-green;
831 }
832 }
833
834 &.busy {
835 &:before {
836 border-color: @color-orange;
837 }
838 }
839
840 &.away {
841 &:before {
842 border-color: @color-red;
843 }
844 }
845 }
846
847 .am-no-show {
848 &-gray {
849 //border: 1px solid #D1D5D7;
850 //background: #FBFBFB;
851 &::before {
852 content: url("../../img/am-user-single-no-show.svg");
853 }
854 }
855 &-yellow {
856 //border: 1px solid #F7E4A2;
857 //background: #FDF9E8;
858 &::before {
859 content: url("../../img/am-user-double-no-show.svg");
860 }
861 }
862 &-red {
863 //border: 1px solid #F1A29D;
864 //background: #FCE8E7;
865 &::before {
866 content: url("../../img/am-user-multiple-no-show.svg");
867 }
868 }
869 }
870
871 .el-select-dropdown__list {
872 padding: 0 !important;
873 }
874
875 .am-drop {
876 li.el-select-dropdown__item {
877 height: auto;
878
879 &:hover, .hover {
880 background-color: @color-highlight;
881 }
882
883 &.am-has-option-meta {
884 padding: @padding-small @padding-small @padding-small @padding-medium*3;
885 border-bottom: 1px solid @color-divider-gray;
886
887 &.selected::after {
888 left: 12px;
889 top: 50%;
890 transform: translateY(-50%);
891 font-size: 8px;
892 line-height: 1.9;
893 color: @color-green;
894 border: 1px solid @color-divider-gray;
895 border-radius: 50%;
896 width: 14px;
897 height: 14px;
898 text-align: center;
899 padding: @padding-small/2;
900 }
901 }
902 }
903
904 .el-select-dropdown__item {
905 background-color: transparent;
906 color: inherit;
907
908 &.hover {
909 background-color: transparent;
910 }
911
912 &:hover {
913 background-color: @color-highlight;
914 }
915
916 &.selected {
917 background-color: transparent;
918 color: inherit;
919
920 &.hover {
921 background-color: transparent;
922 }
923
924 &:hover {
925 background-color: @color-highlight;
926 }
927 }
928
929 .am-customer-name {
930 position: relative;
931 padding: 0px 4px 0 24px;
932 height: 22px;
933 width: fit-content;
934 max-width: 80%;
935 border-radius: 6px;
936 white-space: nowrap;
937 overflow: hidden;
938 text-overflow: ellipsis;
939 display: block;
940 line-height: 24px;
941
942 &.am-customer-blocked {
943 padding: 0px 4px 0 20px;
944 &::before {
945 content: url("../../img/block.svg");
946 }
947 }
948
949 &.am-no-show {
950
951 &-gray {
952 border: 1px solid #D1D5D7;
953 background: #FBFBFB;
954 &::before {
955 content: url("../../img/am-user-single-no-show.svg");
956 }
957 }
958 &-yellow {
959 border: 1px solid #F7E4A2;
960 background: #FDF9E8;
961 &::before {
962 content: url("../../img/am-user-double-no-show.svg");
963 }
964 }
965 &-red {
966 border: 1px solid #F1A29D;
967 background: #FCE8E7;
968 &::before {
969 content: url("../../img/am-user-multiple-no-show.svg");
970 }
971 }
972 }
973
974 &::before {
975 height: 24px;
976 position: absolute;
977 left: 0;
978 display: block;
979 }
980 }
981 }
982
983 .am-drop-create-item {
984 color: @color-blue;
985 line-height: 2;
986 border-bottom: 1px solid @color-divider-gray;
987 padding: @padding-small @padding-small @padding-small @padding-medium*3;
988 font-size: @small-fs;
989 font-weight: @medium;
990 cursor: pointer;
991 position: relative;
992
993 &:before {
994 content: "+";
995 width: 14px;
996 height: 14px;
997 line-height: 1;
998 border: 1px solid @color-divider-gray;
999 border-radius: 16px;
1000 padding: @padding-small/2;
1001 position: absolute;
1002 top: 10px;
1003 left: 14px;
1004 text-align: center;
1005 }
1006
1007 &:hover {
1008 background-color: @color-highlight;
1009 }
1010 }
1011
1012 .am-drop-item-data {
1013 display: block;
1014 color: @color-text-prime;
1015 font-size: @small-fs;
1016 }
1017
1018 .am-drop-item-name {
1019 display: block;
1020 line-height: 1.8 !important;
1021 }
1022
1023 .am-drop-item-meta {
1024 display: block;
1025 font-size: 12px;
1026 line-height: 1 !important;
1027 }
1028 }
1029
1030 .no-tags {
1031 .el-select__tags {
1032 /*display: none;*/
1033 }
1034 }
1035
1036 .el-select-dropdown {
1037 .pin-icon {
1038 height: auto;
1039 padding: @padding-small/4 @padding-small;
1040
1041 * {
1042 width: 24px;
1043 display: inline-block;
1044 vertical-align: middle;
1045 }
1046 }
1047
1048 .am-phone-input-nicename, .am-payment-settings-currency-name {
1049 float: left;
1050 }
1051
1052 .am-phone-input-phonecode, .am-payment-settings-currency-symbol {
1053 float: right;
1054 color: @color-text-second;
1055 font-size: 13px
1056 }
1057 }
1058
1059 .am-drop-parent {
1060 padding: @padding-small @padding-small+4px;
1061 cursor: pointer;
1062 font-size: @small-fs;
1063 border-bottom: 1px solid @color-divider-gray;
1064 color: @color-text-second;
1065
1066 &:hover {
1067 background-color: @color-highlight;
1068 }
1069 }
1070
1071 .am-drop-child {
1072 padding: 0 @padding-big;
1073 }
1074
1075 .am-selected-dropdown-items {
1076 margin-bottom: @margin-medium;
1077
1078 .am-selected-dropdown-item {
1079 border-bottom: 1px solid @color-divider-gray;
1080 padding: @padding-medium 0;
1081
1082 &:first-child {
1083 padding-top: 0;
1084 }
1085
1086 &__inner {
1087 display: flex;
1088 align-items: center;
1089 }
1090
1091 h3 {
1092 margin: 0 0 @margin-small/2;
1093 line-height: 1;
1094
1095 &.am-customer-name {
1096 position: relative;
1097 padding: 0px 4px 0 24px;
1098 height: 22px;
1099 width: fit-content;
1100 max-width: 80%;
1101 border-radius: 6px;
1102 white-space: nowrap;
1103 overflow: hidden;
1104 text-overflow: ellipsis;
1105 display: block;
1106 line-height: 24px;
1107 margin-bottom: 2px;
1108
1109 &.am-customer-blocked {
1110 padding: 0px 4px 0 20px;
1111 &::before {
1112 content: url("../../img/block.svg");
1113 }
1114 }
1115
1116 &.am-no-show {
1117
1118 &-gray {
1119 border: 1px solid #D1D5D7;
1120 background: #FBFBFB;
1121 &::before {
1122 content: url("../../img/am-user-single-no-show.svg");
1123 }
1124 }
1125 &-yellow {
1126 border: 1px solid #F7E4A2;
1127 background: #FDF9E8;
1128 &::before {
1129 content: url("../../img/am-user-double-no-show.svg");
1130 }
1131 }
1132 &-red {
1133 border: 1px solid #F1A29D;
1134 background: #FCE8E7;
1135 &::before {
1136 content: url("../../img/am-user-multiple-no-show.svg");
1137 }
1138 }
1139 }
1140
1141 &::before {
1142 height: 24px;
1143 position: absolute;
1144 left: 0;
1145 display: block;
1146 }
1147
1148 .am-attendees-plus {
1149 display: unset;
1150 }
1151 }
1152 }
1153
1154 span {
1155 margin: 0;
1156 line-height: 1.1;
1157 color: @color-text-second;
1158 /*display: block;*/
1159 font-size: @mini-fs;
1160 }
1161
1162 .am-customer-link {
1163 display: block;
1164 font-size: @mini-fs;
1165 line-height: 1.1;
1166 color: @color-text-second;
1167 margin: 0 0 4px 0;
1168 outline: none;
1169 box-shadow: none;
1170
1171 &:focus, &:active {
1172 outline: none;
1173 box-shadow: none;
1174 }
1175
1176 &:last-child {
1177 margin: 0;
1178 }
1179 }
1180
1181 .am-appointment-status.small {
1182 display: inline-block;
1183
1184 .am-appointment-status-symbol:before {
1185 left: 11px;
1186 }
1187
1188 .el-select {
1189 i {
1190 display: none;
1191 }
1192
1193 input {
1194 width: 0;
1195 padding: 0 @padding-medium + 2px;
1196 color: @color-white;
1197 }
1198 }
1199 }
1200
1201 .am-appointment-persons.small {
1202 display: inline-block;
1203 position: relative;
1204
1205 .el-select {
1206 width: 64px;
1207
1208 input {
1209 padding: 0 @padding-big;
1210 text-align: center;
1211 }
1212
1213 i {
1214 width: 26px;
1215 }
1216 }
1217
1218 svg, img {
1219 position: absolute;
1220 top: 14px;
1221 left: 7px;
1222 }
1223 }
1224
1225 .am-appointment-duration.small {
1226 display: inline-block;
1227 position: relative;
1228
1229 .el-select {
1230 width: 114px;
1231
1232 input {
1233 padding: 0 @padding-big;
1234 }
1235
1236 i {
1237 width: 26px;
1238 }
1239 }
1240
1241 svg, img {
1242 position: absolute;
1243 top: 11px;
1244 left: 7px;
1245 z-index: 1;
1246 }
1247 }
1248
1249 .am-appointment-remove.small {
1250 display: inline-block;
1251 position: relative;
1252
1253 .el-icon-question {
1254 margin-left: 25px;
1255 }
1256
1257 .el-icon-close {
1258 margin-right: 20px;
1259 }
1260 }
1261
1262 .el-select {
1263 display: inline-block;
1264
1265 .el-input {
1266 margin-bottom: 0;
1267
1268 input {
1269 padding-right: @padding-medium;
1270 }
1271 }
1272 }
1273
1274 i.remove {
1275 cursor: pointer;
1276 color: @color-text-second;
1277 font-size: @regular-fs;
1278 position: absolute;
1279 top: 50%;
1280 right: 0;
1281 margin-top: -12px;
1282 padding: @padding-small/2;
1283
1284 &:hover {
1285 color: @color-text-prime;
1286 }
1287 }
1288
1289 @media @less-then-small {
1290 .am-align-right {
1291 text-align: left;
1292 margin-top: @margin-small;
1293 }
1294 }
1295 }
1296
1297 label.el-form-item__label {
1298 padding-bottom: 0;
1299 }
1300
1301 .group-status-change {
1302 h3 {
1303 margin: @margin-small - 2px 0;
1304 font-size: @small-fs;
1305 }
1306
1307 margin-top: @margin-medium;
1308 }
1309 }
1310
1311 .am-dialog-table {
1312 line-height: 2;
1313
1314 .am-customer-extras {
1315 .am-customer-extras-data {
1316 border-bottom: 1px solid @color-divider-gray;
1317 padding: @padding-medium 0;
1318
1319 h3 {
1320 margin: 0 0 @margin-small - 1px;
1321 line-height: 1;
1322 }
1323
1324 span {
1325 margin: 0;
1326 line-height: 1.1;
1327 color: @color-text-second;
1328 display: block;
1329 font-size: @mini-fs;
1330 }
1331 }
1332
1333 .am-appointment-payments-dialog {
1334 & > .am-customer-extras-payment {
1335 & > .el-col {
1336 & > .el-row {
1337 margin-bottom: 0;
1338 }
1339 margin-bottom: 5px;
1340 }
1341 }
1342 }
1343
1344 .am-customer-extras-payment {
1345 margin-bottom: @margin-medium*2;
1346
1347 .el-icon-circle-check {
1348 color: @color-green;
1349
1350 &.partially-paid {
1351 color: @color-blue;
1352 }
1353 }
1354
1355 .am-payment-status {
1356 padding-left: 25px;
1357 padding-top: 7px;
1358 position: relative;
1359 .am-payment-status-symbol{
1360 &:before {
1361 width: 16px;
1362 height: 16px;
1363 display: block;
1364 position: absolute;
1365 z-index: 1;
1366 top: 50%;
1367 margin-top: -8px;
1368 left: 0;
1369 pointer-events: none;
1370 }
1371
1372 &-paid {
1373 &:before {
1374 content: url("../../img/am-status-approved.svg");
1375 }
1376 }
1377
1378 &-pending {
1379 &:before {
1380 content: url("../../img/am-status-pending.svg");
1381 }
1382 }
1383
1384 &-partiallyPaid {
1385 &:before {
1386 content: url("../../img/am-status-partiallyPaid.svg");
1387 }
1388 }
1389
1390 &-refunded {
1391 &:before {
1392 content: url("../../img/am-status-refunded.svg");
1393 }
1394 }
1395 }
1396 }
1397
1398 .el-icon-refresh {
1399 color: @color-orange;
1400 }
1401
1402 img, svg {
1403
1404 }
1405
1406 .am-payment-package-name {
1407 display: flex;
1408
1409 img {
1410 margin-right: 5px;
1411 }
1412 }
1413 }
1414
1415 .subtotal {
1416 background: @color-highlight;
1417 /*font-weight: @bold;*/
1418 padding-right: @padding-medium;
1419 margin-bottom: 0;
1420
1421 .el-col:last-child {
1422 }
1423
1424 .am-payment-package-deal {
1425 display: flex;
1426 margin: @margin-medium;
1427 background: @color-white;
1428
1429 img {
1430 margin: @margin-small;
1431 }
1432 }
1433 }
1434 }
1435
1436 .total {
1437 background-color: @color-light-gray;
1438 padding: @padding-medium;
1439
1440 .el-row {
1441 margin-bottom: 0;
1442 }
1443
1444 .am-strong {
1445 font-size: @medium-fs;
1446 }
1447 }
1448
1449 .el-checkbox {
1450 margin-left: 5px;
1451 @media @less-then-xsmall {
1452 margin-left: 0;
1453 }
1454 }
1455
1456 .am-period-break {
1457 color: @color-red;
1458 }
1459
1460 .am-period {
1461 padding: 0 @padding-small;
1462 border-left: 1px solid @color-light-gray;
1463 border-right: 1px solid @color-light-gray;
1464 border-bottom: 1px solid @color-light-gray;
1465
1466 //.el-row--flex {
1467 // @media @less-then-small {
1468 // display: grid;
1469 // }
1470 //}
1471
1472 .el-row {
1473 margin-bottom: 0 !important;
1474 line-height: 40px;
1475 flex-wrap: wrap;
1476 }
1477
1478 .am-delete-element {
1479 margin-right: @margin-small;
1480 }
1481
1482 .am-edit-element {
1483 display: flex !important;
1484 padding-top: 0 !important;
1485 padding-bottom: 0 !important;
1486 }
1487 }
1488
1489
1490 .am-break {
1491 //margin-top: @margin-small;
1492 //display: flex;
1493 padding-bottom: @padding-small/2;
1494
1495 &:first-child {
1496 margin-top: @margin-small;
1497 }
1498
1499 .el-row {
1500 margin-bottom: @margin-small;
1501 }
1502
1503 .el-date-editor.el-input {
1504 width: auto;
1505 display: inline-block;
1506 }
1507 }
1508
1509 .el-row {
1510 margin-bottom: @margin-medium;
1511
1512 &.am-dialog-table-head {
1513 background-color: @color-light-gray;
1514 font-weight: @bold;
1515 margin-top: @margin-medium;
1516
1517 &.hours, &.days {
1518 .el-col:first-child span {
1519 margin-left: @margin-small;
1520 }
1521 }
1522
1523 &.hours {
1524 padding: @padding-small/2 0;
1525 border-top-left-radius: 3px;
1526 border-top-right-radius: 3px;
1527 margin-bottom: 0;
1528 }
1529 }
1530
1531 .el-col {
1532 .el-input, .el-date-editor {
1533 margin-bottom: 0;
1534
1535 input[type=number] {
1536 @media @less-then-small {
1537 padding: 6px 2px;
1538 text-align: center;
1539 }
1540 }
1541 }
1542 }
1543 }
1544 }
1545
1546 .am-dialog-confirmation, .am-confirmation {
1547 padding: @padding-medium @padding-big;
1548 border-bottom: 1px solid @color-divider-gray;
1549
1550 h3 {
1551 margin-top: 0;
1552 font-size: @small-fs;
1553 span {
1554 display: block;
1555 font-size: 13px;
1556 margin: 0;
1557 }
1558 }
1559
1560 .el-alert--warning {
1561 background-color: transparent;
1562 margin-bottom: @margin-medium;
1563 padding: 0;
1564 }
1565
1566 .el-alert__icon {
1567 color: @color-yellow;
1568 font-size: @big-fs;
1569 }
1570
1571 .el-alert__content {
1572 padding-bottom: 0;
1573
1574 .el-alert__description {
1575 color: @color-text-prime;
1576 }
1577 }
1578 }
1579
1580 .am-dialog-confirmation {
1581 z-index: 1;
1582 position: absolute;
1583 bottom: 73px;
1584 background: @color-white;
1585 width: 100%;
1586 border-top: 1px solid @color-divider-gray;
1587 border-bottom: none;
1588 box-sizing: border-box;
1589
1590 form.el-form {
1591 padding: 0 !important;
1592 }
1593
1594 .am-dialog-action-close {
1595 position: absolute;
1596 top: 12px;
1597 right: 12px;
1598 padding: 4px;
1599 border-radius: 50%;
1600
1601 i {
1602 line-height: 1;
1603 }
1604 }
1605
1606 @media @less-then-small {
1607 z-index: 1;
1608 border-bottom: 1px solid @color-divider-gray;
1609 bottom: 72px;
1610 }
1611 }
1612
1613 .am-pagination {
1614 p {
1615 font-size: @small-fs;
1616 @media @less-then-small {
1617 text-align: center;
1618 }
1619 }
1620
1621 .el-pagination {
1622 text-align: right;
1623 padding: @padding-small 0 0;
1624 @media @less-then-small {
1625 text-align: center;
1626 }
1627
1628 .el-pager li {
1629 height: 32px;
1630 line-height: 32px;
1631 padding: 0 @padding-small;
1632 color: @color-text-prime;
1633 border-top: 1px solid @color-divider-gray;
1634 border-bottom: 1px solid @color-divider-gray;
1635 border-left: 1px solid @color-divider-gray;
1636
1637 &:first-child {
1638 border-left: none;
1639 }
1640
1641 @media @less-then-small {
1642 padding: 0 @padding-small/3;
1643 min-width: 24px;
1644 }
1645
1646 &.active {
1647 background-color: @color-blue;
1648 border-color: @color-blue;
1649 color: @color-white;
1650
1651 &:hover {
1652 color: @color-white;
1653 }
1654 }
1655
1656 &:hover {
1657 color: @color-blue;
1658 }
1659 }
1660
1661 button {
1662 border: 1px solid @color-divider-gray;
1663 height: 32px;
1664 padding: 0 @padding-small;
1665 }
1666 }
1667 }
1668
1669 .el-tooltip__popper {
1670 text-align: center;
1671
1672 span {
1673 display: inline-block;
1674 vertical-align: top;
1675 margin-bottom: @margin-small/2;
1676
1677 &:last-child {
1678 margin-bottom: 0;
1679 }
1680
1681 &.am-appointment-status-symbol {
1682 &:before {
1683 display: inline-block;
1684 margin-right: @margin-small;
1685 margin-top: 0;
1686 position: static;
1687 }
1688 }
1689 }
1690
1691 .am-all-event-employees {
1692 text-align: left;
1693 }
1694
1695 &.am-tooltip-popper {
1696 max-width: 300px;
1697 }
1698 }
1699
1700 .el-form-item {
1701 .is-spinner {
1702 width: 22px;
1703 height: 22px;
1704 display: none;
1705 position: absolute;
1706 right: 35px;
1707 top: 8px;
1708 stroke: @color-text-second;
1709
1710 &.is-spinner-right {
1711 right: 12px;
1712 }
1713 }
1714
1715 &.active {
1716 .is-spinner {
1717 display: block;
1718 }
1719 }
1720 }
1721
1722 .am-days-off {
1723 margin-top: @margin-medium;
1724
1725 .am-dialog-table {
1726 .el-date-editor.el-input {
1727 width: 200px !important;
1728 margin-left: 10px;
1729 margin-bottom: 0;
1730
1731 input {
1732 width: 200px;
1733 }
1734 }
1735 }
1736
1737 &__header {
1738 display: flex;
1739 flex-wrap: wrap;
1740 align-items: center;
1741 justify-content: space-between;
1742 }
1743
1744 &__legend {
1745 margin-left: auto;
1746 margin-right: 10px;
1747 order: 2;
1748
1749 @media @less-then-xsmall {
1750 width: 100%;
1751 }
1752
1753 & > div {
1754 margin-top: @margin-medium;
1755 }
1756
1757 .am-legend-once {
1758 margin-left: 10px;
1759 }
1760 }
1761
1762 &__legend {
1763 display: flex;
1764 }
1765
1766 h4 {
1767 margin-bottom: 0;
1768 }
1769
1770 .am-dialog-table-head {
1771 margin-top: @margin-small !important;
1772 }
1773
1774 .type {
1775 display: inline-block;
1776 width: 16px;
1777 min-width: 16px;
1778 height: 16px;
1779 background-color: @color-gray;
1780 vertical-align: text-top;
1781 margin-right: @margin-small;
1782 border-radius: 3px;
1783
1784 &.once {
1785 background-color: @color-red;
1786 }
1787
1788 &.repeat {
1789 background-color: @color-orange;
1790 }
1791
1792 }
1793
1794 .am-day-off {
1795 border-bottom: 1px solid @color-divider-gray;
1796 }
1797 }
1798
1799 .folded {
1800 .am-bottom-popover {
1801 width: calc(~'100% - 36px');
1802 }
1803 }
1804
1805 .auto-fold {
1806 .am-bottom-popover {
1807 @media only screen and (max-width: 960px) {
1808 width: calc(~'100% - 36px');
1809 }
1810
1811 @media only screen and (max-width: 782px) {
1812 width: 100%;
1813 }
1814 }
1815 }
1816
1817 [dir="rtl"] {
1818 .am-bottom-popover {
1819 left: 0;
1820 right: auto;
1821 }
1822 }
1823
1824 .am-bottom-popover {
1825 position: fixed;
1826 bottom: 0;
1827 left: auto;
1828 right: 0;
1829 width: calc(~'100% - 160px');
1830 z-index: 999;
1831 background-color: @color-white;
1832 padding: @padding-medium @padding-big;
1833 border: 1px solid @color-divider-gray;
1834 min-height: 74px;
1835 box-sizing: border-box;
1836
1837 .el-button.am-button-icon {
1838 position: absolute;
1839 }
1840
1841 .el-checkbox {
1842 margin-right: @margin-medium;
1843 }
1844
1845 @media only screen and (max-width: 782px) {
1846 margin-left: 0;
1847 }
1848
1849 .am-bottom-popover-confirmation {
1850 /* display: inline-block;*/
1851
1852 h3 {
1853 margin: 0 @margin-medium 0 0;
1854 @media @less-then-small {
1855 margin: 0 0 @margin-small;
1856 text-align: center;
1857 }
1858 }
1859
1860 .el-row {
1861 min-height: 38px;
1862 @media @less-then-small {
1863 flex-direction: column;
1864 }
1865 }
1866 }
1867 }
1868
1869 .am-gallery-images {
1870 padding-top: @padding-small;
1871
1872 .am-gallery-image-wrapper {
1873 margin-bottom: @margin-big;
1874 border-radius: 3px;
1875 overflow: hidden;
1876 }
1877
1878 .am-gallery-image {
1879 height: 120px;
1880 line-height: 120px;
1881 width: 100%;
1882 overflow: hidden;
1883 text-align: center;
1884 background-position: center;
1885 background-size: cover;
1886 cursor: pointer;
1887 position: relative;
1888
1889 i {
1890 display: none;
1891 color: @color-white;
1892 position: absolute;
1893 top: 50%;
1894 left: 50%;
1895 z-index: 1;
1896 font-size: @medium-fs+4px;
1897 margin-left: -12px;
1898 margin-top: -12px;
1899 }
1900
1901 &:hover {
1902 i {
1903 display: block;
1904 }
1905
1906 &:before {
1907 display: block;
1908 position: absolute;
1909 top: 0;
1910 bottom: 0;
1911 left: 0;
1912 right: 0;
1913 content: " ";
1914 background-color: fade(@color-text-prime, 60%);
1915 }
1916 }
1917
1918 img {
1919 width: 100%;
1920 }
1921 }
1922
1923 .am-gallery-image-title {
1924 border: 1px solid @color-divider-gray;
1925 border-bottom-left-radius: 3px;
1926 border-bottom-right-radius: 3px;
1927 padding: @padding-small;
1928 font-size: @mini-fs - 1px;
1929 overflow: hidden;
1930 white-space: nowrap;
1931 text-overflow: ellipsis;
1932
1933 .am-drag-handle {
1934 cursor: move;
1935 cursor: -webkit-grabbing;
1936 margin-right: 2px;
1937
1938 img, svg {
1939 display: inline-block;
1940 vertical-align: middle;
1941
1942 rect {
1943 fill: @color-text-second;
1944 }
1945 }
1946
1947 &:hover {
1948 rect {
1949 fill: @color-text-prime;
1950 }
1951 }
1952 }
1953 }
1954
1955 .am-gallery-image-add {
1956 border: 2px dashed @color-blue;
1957 height: 160px;
1958 width: 100%;
1959 text-align: center;
1960 cursor: pointer;
1961 position: relative;
1962 border-radius: 4px;
1963 display: flex;
1964 justify-content: center;
1965 align-items: center;
1966 color: @color-blue;
1967 box-sizing: border-box;
1968 margin-bottom: @margin-big;
1969
1970 &:hover {
1971 i {
1972 border-radius: 50%;
1973 border: 1px solid @color-blue;
1974 background-color: @color-blue;
1975 color: @color-white;
1976 }
1977 }
1978
1979 i {
1980 display: inline;
1981 padding: @padding-small/4;
1982 color: @color-blue;
1983 font-size: @medium-fs+4px;
1984 line-height: 36px;
1985 }
1986
1987 span {
1988 display: block;
1989 color: @color-blue;
1990 }
1991 }
1992 }
1993
1994 .am-extra-list {
1995 padding: @padding-medium 0;
1996
1997 .el-button {
1998 width: 100%;
1999 margin-bottom: @margin-medium;
2000 }
2001
2002 .am-extra-item {
2003 background-color: @color-white;
2004 border-radius: 4px;
2005 border: 1px solid @color-divider-gray;
2006 padding: @padding-medium;
2007 margin-bottom: @margin-medium;
2008
2009 &.sortable-ghost {
2010 background-color: @color-highlight;
2011 }
2012
2013 &.sortable-chosen {
2014 opacity: .5;
2015 cursor: move;
2016 cursor: -webkit-grabbing;
2017 }
2018
2019 .am-drag-handle {
2020 line-height: 1;
2021 cursor: move;
2022 cursor: -webkit-grabbing;
2023 margin-right: @margin-small;
2024 vertical-align: sub;
2025
2026 svg {
2027 rect {
2028 fill: @color-text-second;
2029 }
2030 }
2031 }
2032
2033 h3 {
2034 margin: 0;
2035 }
2036
2037 .extra-item-actions {
2038 span {
2039 margin-left: @margin-small/2;
2040 cursor: pointer;
2041
2042 &:hover, &.active {
2043 svg {
2044 path {
2045 fill: @color-blue;
2046 }
2047 }
2048 }
2049 }
2050 }
2051
2052 .el-form {
2053 padding-bottom: 0;
2054 }
2055
2056 .am-confirmation {
2057 padding: @padding-medium 0 0 0;
2058 border: none;
2059
2060 p {
2061 margin: 0;
2062 font-size: @small-fs;
2063 padding-bottom: @padding-medium;
2064 }
2065
2066 .el-button {
2067 margin: 0 0 0 @margin-small/2;
2068 width: auto;
2069 }
2070 }
2071
2072 .am-extra-item-data {
2073 margin-top: @margin-medium;
2074
2075 .el-col {
2076 margin-bottom: @margin-small;
2077 }
2078
2079 span {
2080 display: block;
2081 font-size: @small-fs;
2082 white-space: nowrap;
2083 @media @less-then-small {
2084 white-space: normal;
2085 }
2086
2087 &.data-title {
2088 color: fade(@color-text-prime, 75%);
2089 }
2090 }
2091 }
2092
2093 .el-button {
2094 margin: @margin-medium 0 0 @margin-small;
2095 width: auto;
2096 }
2097
2098 .el-button-group {
2099 .el-button {
2100 margin: 0;
2101 }
2102 }
2103 }
2104 }
2105
2106 .el-select {
2107 &.sort {
2108 position: relative;
2109
2110 &:before {
2111 width: 18px;
2112 height: 18px;
2113 position: absolute;
2114 top: 14px;
2115 left: 12px;
2116 content: url('../../img/sort.svg');
2117 }
2118
2119 input {
2120 padding-left: @padding-medium * 2;
2121 }
2122 }
2123 }
2124
2125 .el-popover {
2126 &.am-color-popover {
2127 padding: @padding-medium;
2128
2129 .am-service-color {
2130 width: 24px;
2131 height: 24px;
2132 display: inline-block;
2133 border: 4px solid @color-white;
2134 border-radius: 50%;
2135 cursor: pointer;
2136 position: relative;
2137
2138 &.color-active:before {
2139 position: absolute;
2140 top: 0;
2141 bottom: 0;
2142 left: 0;
2143 right: 0;
2144 color: @color-white;
2145 text-align: center;
2146 font-family: element-icons;
2147 content: "\e6da";
2148 line-height: 1.9;
2149 }
2150 }
2151
2152 .el-input input {
2153 box-shadow: none;
2154 }
2155
2156 .align-right {
2157 border-top: 1px solid @color-divider-gray;
2158 padding-top: @padding-medium;
2159 }
2160 }
2161 }
2162
2163 // V-calendar
2164 .amelia-booking {
2165 .v-calendar-column {
2166 overflow: visible;
2167
2168 .el-form-item__content {
2169 height: 100%;
2170 //&:after {
2171 // content: "";
2172 // display: block;
2173 // position: absolute;
2174 // top: 12px;
2175 // bottom: 2px;
2176 // right: 8px;
2177 // height: 16px;
2178 // width: 16px;
2179 // background: #fff url('../../img/calendar-grey.svg') no-repeat center / contain;
2180 //}
2181 input {
2182 padding-right: @padding-big;
2183 }
2184 }
2185 }
2186
2187 .popover-container {
2188 width: 100%;
2189
2190 .popover-origin .popover-content-wrapper .popover-content {
2191 background-color: @color-white;
2192 }
2193
2194 input {
2195 width: 100%;
2196 }
2197 }
2198
2199 .c-pane-container {
2200 background-color: transparent !important;
2201 }
2202
2203 .c-day-content {
2204 font-size: @mini-fs;
2205 font-weight: 400;
2206 color: inherit;
2207
2208 div {
2209 color: inherit;
2210 }
2211 }
2212
2213 .c-weekdays {
2214 border-bottom: 1px solid @color-divider-gray;
2215 padding-bottom: @padding-small / 2;
2216 }
2217
2218 .c-header .c-title-layout .c-title-popover .c-title-anchor .c-title {
2219 font-size: 1rem;
2220
2221 }
2222
2223 .c-pane-container {
2224 font-family: @roboto;
2225 padding: 0 @padding-small;
2226 }
2227 }
2228
2229 // Icons & Buttons
2230 .el-button {
2231 vertical-align: middle;
2232
2233 i {
2234 line-height: 0.9;
2235 }
2236
2237 &.am-button-icon {
2238 line-height: 1;
2239 padding: @padding-small+3px @padding-small+6px;
2240
2241 span {
2242 margin: 0;
2243 display: block;
2244 width: 16px;
2245 height: 16px;
2246
2247 svg {
2248 vertical-align: middle;
2249 }
2250 }
2251
2252 &:hover, &:focus, &.active {
2253 span {
2254 svg {
2255 path {
2256 fill: @color-blue;
2257 }
2258 }
2259 }
2260 }
2261 }
2262
2263 &.am-button-block {
2264 line-height: 1;
2265 padding: @padding-small+3px @padding-small+6px;
2266
2267 & > span {
2268 display: flex;
2269 align-items: center;
2270
2271 img {
2272 width: 16px;
2273 height: 16px;
2274 margin-right: 5px;
2275 }
2276 }
2277
2278 }
2279
2280 &.am-text-button-icon {
2281 margin-bottom: @margin-medium;
2282
2283 &:hover {
2284 border-color: transparent;
2285 }
2286
2287 span {
2288 margin: 0;
2289 display: inline-block;
2290 width: 16px;
2291 height: 16px;
2292
2293 svg {
2294 vertical-align: middle;
2295 }
2296 }
2297 }
2298 }
2299
2300 .am-email-codes {
2301 padding: @padding-big 0;
2302
2303 .am-email-code {
2304
2305 p {
2306 cursor: pointer;
2307 position: relative;
2308 margin: 2px 0;
2309
2310 &:hover {
2311 i {
2312 color: @color-blue;
2313 }
2314
2315 .am-copy-code {
2316 display: inline-block;
2317 }
2318 }
2319
2320 &.am-clicked-code {
2321
2322 }
2323
2324 i {
2325 color: @color-text-second;
2326 display: inline-block;
2327 vertical-align: middle;
2328 }
2329
2330 .am-copy-code, .am-copied-code {
2331 position: absolute;
2332 right: 0;
2333 top: 4px;
2334 display: none;
2335 color: @color-blue;
2336 font-size: @mini-fs;
2337 }
2338 }
2339 }
2340 }
2341
2342 i.am-tooltip-icon {
2343 color: @color-icon;
2344 cursor: help;
2345 }
2346
2347 .am-pop-modal {
2348 .el-dialog {
2349 width: 580px;
2350 @media @less-then-medium {
2351 width: 90%;
2352 }
2353 }
2354 }
2355
2356 .am-dialog-scrollable {
2357
2358 }
2359
2360 .am-dialog-table {
2361 &.am-custom-fields-container {
2362 padding-bottom: 400px;
2363 }
2364 }
2365
2366 .am-custom-fields {
2367 .el-form-item__content {
2368 max-height: none !important;
2369
2370 .am-front-texarea, .el-checkbox-group, .el-radio-group {
2371 margin-bottom: 16px;
2372 }
2373
2374 .el-date-editor {
2375 width: 100% !important;
2376 }
2377 }
2378
2379 .am-front-texarea {
2380 .el-form-item__content {
2381 max-height: none !important;
2382 }
2383 }
2384
2385 .el-checkbox, .el-radio {
2386 width: 100%;
2387 margin-left: 0;
2388 font-weight: 400;
2389 line-height: 1.5;
2390 color: @color-text-prime;
2391 }
2392
2393 .el-checkbox-group, .el-radio-group {
2394 display: block;
2395 margin-left: 3px;
2396 }
2397
2398 .am-text-content {
2399 border-radius: 4px;
2400 border: 1px solid @color-divider-gray;
2401 padding: @padding-small;
2402 margin-bottom: @margin-medium;
2403
2404 p {
2405 line-height: 1.5;
2406 }
2407 }
2408 }
2409
2410 .am-align-left {
2411 text-align: left;
2412 }
2413
2414 .el-table .cell {
2415 display: flex;
2416 align-items: center;
2417
2418 img, svg {
2419 margin-right: @margin-small;
2420 }
2421 }
2422