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 / frontend / _elements.less
ameliabooking / assets / less / frontend Last commit date
_animations.less 7 years ago _base.less 4 years ago _customize.less 4 years ago _elements.less 1 year ago _overrides.less 4 years ago _utils.less 6 years ago _variables.less 4 years ago amelia-booking.less 1 year ago booking.less 2 years ago cabinet.less 1 year ago catalog.less 2 years ago dialog-appointment.less 3 years ago dialog-attendees.less 2 years ago dialog-event.less 3 years ago events.less 2 years ago quill.less 4 years ago rtl.less 4 years ago search.less 2 years ago service.less 4 years ago
_elements.less
1346 lines
1 @import "_variables";
2
3 @keyframes spinner {
4 form {transform: rotate(0deg);}
5 to {transform: rotate(360deg);}
6 }
7
8 /* WP Admin Bar Override */
9 body.admin-bar {
10 .el-popper[x-placement^=bottom] {
11 margin-top: 44px;
12 }
13
14 .el-popper[x-placement^=top] {
15 /*margin-top: -36px;*/
16 }
17 }
18
19 .amelia-app-booking {
20 position: relative;
21 }
22
23 //fix for phonecode on front-end
24 .el-select-dropdown {
25
26 .am-phone-input-nicename {
27 float: left;
28 }
29
30 .am-phone-input-phonecode {
31 float: right;
32 color: @color-text-second;
33 font-size: 13px
34 }
35 }
36
37 .am-drop-parent {
38 padding: @padding-small @padding-small+4px;
39 cursor: pointer;
40 font-size: @small-fs;
41 border-bottom: 1px solid @color-divider-gray;
42 color: @color-text-second;
43
44 &:hover {
45 background-color: @color-highlight;
46 }
47 }
48
49 .am-drop-child {
50 padding: 0 @padding-big;
51 }
52
53 .amelia-app-booking #amelia-booking-wrap, #am-modal.am-modal.am-in-body {
54
55 .am-payment-type {
56 label {
57 margin-bottom: 12px;
58 }
59 }
60
61 //helpers
62 .am-align-right {
63 text-align: right;
64 }
65
66 .am-align-left {
67 text-align: left;
68 }
69
70 .am-align-center {
71 text-align: center;
72 }
73
74 .am-strong {
75 font-weight: @bold;
76 }
77
78 .am-semi-strong {
79 font-weight: @medium;
80 }
81
82 .am-align-justify {
83 text-align: justify;
84 }
85
86 ::-moz-placeholder {
87 color: #ccc;
88 }
89
90 :-ms-input-placeholder {
91 color: #ccc !important;
92 }
93
94 //v-calendar
95 .am-calendar-picker {
96 color: @color-text-prime;
97
98 .c-header .c-title-layout .c-title-popover .c-title-anchor .c-title {
99 font-weight: 400;
100 font-size: @regular-fs;
101 }
102
103 .c-header .c-arrow-layout .c-arrow {
104 font-size: @medium-fs;
105 }
106
107 .c-weekdays {
108 font-size: @small-fs;
109 }
110
111 .c-day-content {
112 width: 28px;
113 height: 28px;
114 font-size: @small-fs;
115 font-weight: @regular;
116 line-height: 1.5;
117 }
118
119 .c-day-background {
120 width: 28px !important;
121 height: 28px !important;
122 background-color: @color-accent !important;
123 }
124 }
125
126 .el-input .el-icon-circle-close {
127 color: @color-text-prime;
128 }
129
130 .el-select {
131 &.am-sort {
132 position: relative;
133
134 &:before {
135 width: 18px;
136 height: 18px;
137 position: absolute;
138 z-index: 1;
139 top: 14px;
140 left: 12px;
141 //content: url('../../img/sort.svg');
142 content: ' ';
143 background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNCIgaGVpZ2h0PSIxMiIgdmlld0JveD0iMCAwIDE0IDEyIj4NCiAgICA8cGF0aCBmaWxsPSIjNjE2RTdDIiBmaWxsLXJ1bGU9Im5vbnplcm8iDQogICAgICAgICAgZD0iTTMgMTFhMSAxIDAgMCAwLTEtMUgxYTEgMSAwIDAgMCAwIDJoMWExIDEgMCAwIDAgMS0xek0xIDJoMTJhMSAxIDAgMCAwIDAtMkgxYTEgMSAwIDAgMCAwIDJ6bTggNGExIDEgMCAwIDAtMS0xSDFhMSAxIDAgMCAwIDAgMmg3YTEgMSAwIDAgMCAxLTF6Ii8+DQo8L3N2Zz4NCg==") no-repeat top;
144 line-height: 1;
145 text-align: left;
146 vertical-align: top;
147 color: @color-text-second;
148 display: inline-block;
149 }
150
151 input {
152 padding-left: @padding-medium * 2;
153 }
154 }
155 }
156
157 .el-button--primary.el-button {
158 background-color: @color-accent;
159 border-color: @color-accent;
160 color: @color-white;
161
162 &:hover, &:focus {
163 color: @color-white;
164 background-color: fade(@color-accent, 75%);
165 border-color: fade(@color-accent, 75%);
166
167 span {
168 color: @color-white;
169 }
170 }
171
172 span {
173 color: @color-white;
174 }
175 }
176
177 .el-button--danger.el-button {
178 background-color: @color-red;
179 border-color: @color-red;
180 color: @color-white;
181
182 &:hover, &:focus {
183 color: @color-white;
184 background-color: darken(@color-red, 5%);
185 border-color: darken(@color-red, 5%);
186
187 span {
188 color: @color-white;
189 }
190 }
191
192 span {
193 color: @color-white;
194 }
195 }
196
197 .el-button {
198 height: auto;
199
200 &:hover, &:focus {
201 color: @color-accent;
202 border-color: fade(@color-accent, 10%);
203 background-color: fade(@color-accent, 10%);
204
205 span {
206 color: @color-accent;
207 }
208 }
209
210 span {
211 color: @color-text-prime;
212 }
213
214 @media @less-then-xsmall {
215 font-size: 12px;
216 }
217 }
218
219 .am-flex-row-middle-align {
220 display: flex;
221 align-items: center;
222 @media @less-then-small {
223 display: block;
224 }
225 }
226
227 .am-flex-row-middle-align-mobile {
228 display: flex;
229 align-items: center;
230 }
231
232 .am-spinner-wrapper {
233 text-align: center;
234 height: 244px;
235 display: flex;
236 align-items: center;
237 position: relative;
238
239 .am-spinner-service {
240 margin: 0 auto;
241
242 .am-spin {
243 width: 80px;
244 padding: 0;
245 margin: 0;
246
247 path {
248 stroke: @color-accent;
249 }
250 }
251
252 .am-hourglass {
253 position: absolute;
254 top: 50%;
255 left: 50%;
256 width: 18px;
257 height: 24px;
258 padding: 0;
259 margin-left: -9px;
260 margin-top: -16px;
261
262 path {
263 fill: @color-accent;
264 }
265 }
266 }
267 }
268
269 .am-spinner {
270 margin: 0 auto;
271 position: relative;
272
273 .am-spin {
274 width: 80px;
275 padding: 0;
276 margin: 0;
277
278 path {
279 stroke: @color-accent;
280 }
281 }
282
283 .am-hourglass {
284 position: absolute;
285 top: 50%;
286 left: 50%;
287 width: 18px;
288 height: 24px;
289 padding: 0;
290 margin-left: -9px;
291 margin-top: -16px;
292
293 path {
294 fill: @color-accent;
295 }
296 }
297 }
298
299 .am-loader {
300 position: relative;
301 width: 80px;
302 height: 80px;
303 margin: 0 auto;
304
305 &-spin {
306 position: absolute;
307 top: 0;
308 left: 0;
309 width: 100%;
310 height: 100%;
311 stroke: @color-accent;
312
313 use {
314 transform-origin: center;
315 animation-name: spinner;
316 animation-duration: 1s;
317 animation-iteration-count: infinite;
318 }
319 }
320
321 &-hourglass {
322 position: absolute;
323 top: 50%;
324 left: 50%;
325 width: 18px;
326 height: 24px;
327 transform: translate(-50%, -50%);
328 fill: @color-accent;
329 }
330 }
331
332 .am-scroll {
333 padding-right: 8px;
334 padding-left: 8px;
335 scroll-color: @color-divider-gray @color-search-filters-bg;
336 scrollbar-width: thin;
337
338 &::-webkit-scrollbar {
339 position: absolute;
340 width: 8px;
341 }
342
343 &::-webkit-scrollbar-track {
344 background: @color-search-filters-bg;
345 }
346
347 &::-webkit-scrollbar-thumb {
348 background: @color-divider-gray;
349 }
350
351 &::-webkit-scrollbar-thumb:hover {
352 background: darken(@color-divider-gray, 5%);
353 }
354 }
355
356 .am-search-filters {
357 .am-search-filter {
358
359 }
360 }
361
362 .el-switch.is-checked .el-switch__core {
363 background-color: @color-accent;
364 border-color: @color-accent;
365 }
366
367 .am-add-element {
368 color: @color-accent;
369 display: inline-block;
370 vertical-align: middle;
371 padding: 0 4px 0 4px;
372 cursor: pointer;
373 background: transparent;
374
375 i {
376 margin-right: @margin-small/2;
377 border-radius: 50%;
378 //border: 1px solid @color-divider-gray;
379 padding: @padding-small/2;
380 //font-size: @mini-fs - 2;
381 vertical-align: middle;
382 border: 1px solid #E2E6EC;
383 background-color: @color-white;
384 color: @color-accent;
385 font-size: 14px;
386
387 &::before {
388 font-weight: 600;
389 }
390
391 &:hover {
392 background-color: @color-accent;
393 color: @color-white;
394 }
395 }
396
397 span {
398 vertical-align: middle;
399 color: @color-accent;
400 }
401
402 &:hover {
403 color: darken(@color-accent, 10%);
404
405 i {
406 background-color: @color-accent;
407 color: @color-white;
408 }
409 }
410 }
411
412 .am-delete-element {
413 color: @color-red;
414 display: inline-block;
415 vertical-align: middle;
416 cursor: pointer;
417
418 i {
419 border-radius: 50%;
420 //border: 1px solid @color-divider-gray;
421 padding: @padding-small/2;
422 font-size: @mini-fs - 2;
423 vertical-align: middle;
424 border: 1px solid #E2E6EC;
425 background-color: @color-white;
426 color: @color-red;
427
428 &::before {
429 font-weight: 600;
430 }
431
432 &:hover {
433 background-color: @color-red;
434 color: @color-white;
435 }
436 }
437
438 span {
439 vertical-align: middle;
440 color: @color-red;
441 }
442
443 &:hover {
444 color: darken(@color-red, 10%);
445
446 i {
447 background-color: @color-red;
448 color: @color-white;
449 }
450 }
451 }
452
453 .hide-on-mobile {
454 @media @less-then-small {
455 display: none;
456 }
457 }
458
459 .am-edit-element {
460 display: inline-block;
461 vertical-align: middle;
462 padding: @padding-small/2;
463 cursor: pointer;
464
465 i {
466 color: @color-text-second
467 }
468
469 &:hover i {
470 color: darken(@color-accent, 10%);
471 }
472 }
473
474 .is-error {
475 input {
476 border-color: @color-red;
477 }
478
479 .el-form-item__error {
480 color: @color-red;
481 font-size: 10px;
482 padding-top: 4px;
483 }
484 }
485
486 .v-calendar-column {
487 overflow: visible;
488
489 .el-form-item__content, .am-calendar-picker {
490 &:after {
491 content: "";
492 display: block;
493 position: absolute;
494 top: 2px;
495 bottom: 2px;
496 right: 8px;
497 width: 16px;
498 background: #fff url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMiIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDIyIDI0Ij4NCiAgICA8cGF0aCBmaWxsPSIjRTJFNkVDIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiDQogICAgICAgICAgZD0iTTE1LjcxNCAyLjY2N0g2LjI4NlYwSDIuNzV2Mi42NjdILjc4QS43ODMuNzgzIDAgMCAwIDAgMy40NXYxOS43NjRBLjc4Ljc4IDAgMCAwIC43ODMgMjRoMjAuNDM0YS43ODUuNzg1IDAgMCAwIC43ODMtLjc4NVYzLjQ1MWEuNzgyLjc4MiAwIDAgMC0uNzgtLjc4NGgtMS45N1YwaC0zLjUzNnYyLjY2N3pNMi43NSAyMS40MjlWOGgxNi41djEzLjQyOUgyLjc1ek0xMiAxNHY2aDZ2LTZoLTZ6Ii8+DQo8L3N2Zz4NCg==') no-repeat center / contain;
499 }
500 }
501
502 .popover-container {
503 width: 100%;
504
505 .popover-origin .popover-content-wrapper .popover-content {
506 background-color: @color-bgr;
507 }
508
509 input {
510 width: 100%;
511 padding-right: @padding-medium*2;
512 }
513 }
514
515 .c-pane-container {
516 background-color: transparent !important;
517 }
518
519 .c-day-content {
520 font-size: @mini-fs;
521 font-weight: 400;
522 color: inherit;
523
524 div {
525 color: inherit;
526 }
527 }
528
529 .c-weekdays {
530 border-bottom: 1px solid @color-divider-gray;
531 padding-bottom: @padding-small / 2;
532 }
533
534 .c-pane-container {
535 font-family: @font;
536 padding: 0 @padding-small;
537
538 @media @less-then-medium {
539 padding: 0;
540 }
541 }
542 }
543
544 .am-btns {
545 margin-top: @margin-medium;
546 border-top: 1px solid @color-divider-gray;
547 padding: @padding-medium 0 0;
548
549 .el-button {
550 margin-left: 0;
551 }
552 }
553
554 .am-round-icon {
555 background-color: @color-accent;
556 width: 40px;
557 height: 40px;
558 line-height: 40px;
559 border-radius: 50%;
560 margin-right: @margin-medium;
561 text-align: center;
562
563 img, svg {
564 vertical-align: middle;
565 }
566 }
567 }
568
569 .am-appointment-status.small {
570 .am-appointment-status-symbol:before {
571 margin-top: -8px;
572 }
573 .am-appointment-dialog-status-option {
574 .am-appointment-status-symbol {
575 &:before {
576 margin-top: -14px;
577 }
578 }
579 }
580 }
581
582 .am-appointment-dialog-status-option {
583 .am-appointment-status-symbol {
584 &:before {
585 margin-top: -14px;
586 }
587 }
588 }
589
590 .am-appointment-status-symbol, .am-employee-status-symbol {
591 vertical-align: sub;
592
593 &.am-status-label {
594 padding-left: 20px;
595
596 &:before {
597 left: 0;
598 }
599 }
600
601 &:before {
602 width: 16px;
603 height: 16px;
604 display: block;
605 position: absolute;
606 z-index: 1;
607 top: 50%;
608 margin-top: -5px;
609 left: 10px;
610 pointer-events: none;
611 }
612
613 &-approved {
614 &:before {
615 content: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0wIDhDMCAzLjU4MTcyIDMuNTgxNzIgMCA4IDBDMTIuNDE4MyAwIDE2IDMuNTgxNzIgMTYgOEMxNiAxMi40MTgzIDEyLjQxODMgMTYgOCAxNkMzLjU4MTcyIDE2IDAgMTIuNDE4MyAwIDhaTTggMS41QzQuNDEwMTUgMS41IDEuNSA0LjQxMDE1IDEuNSA4QzEuNSAxMS41ODk5IDQuNDEwMTUgMTQuNSA4IDE0LjVDMTEuNTg5OSAxNC41IDE0LjUgMTEuNTg5OSAxNC41IDhDMTQuNSA0LjQxMDE1IDExLjU4OTkgMS41IDggMS41Wk0xMC42MjMzIDUuMDk5NDhDMTAuOTgyNSA1LjMwNTYzIDExLjEwNjcgNS43NjM5OSAxMC45MDA1IDYuMTIzMjZMOC42MDY5IDEwLjEyMDZDNy45MDIxMSAxMS4zNDg4IDYuMTA2MjkgMTEuMjc1IDUuNTA0NzUgOS45OTI5Nkw1LjA3MTAzIDkuMDY4NThDNC44OTUwOCA4LjY5MzU5IDUuMDU2NDMgOC4yNDY5NyA1LjQzMTQyIDguMDcxMDNDNS44MDY0MSA3Ljg5NTA4IDYuMjUzMDMgOC4wNTY0MyA2LjQyODk3IDguNDMxNDJMNi44NjI3IDkuMzU1OEM2Ljk0ODY0IDkuNTM4OTUgNy4yMDUxOCA5LjU0OTUgNy4zMDU4NiA5LjM3NDAzTDkuNTk5NDggNS4zNzY3NEM5LjgwNTYzIDUuMDE3NDcgMTAuMjY0IDQuODkzMzMgMTAuNjIzMyA1LjA5OTQ4WiIgZmlsbD0iIzFCQkMzNSIvPgo8L3N2Zz4K');
616 }
617 }
618
619 &-canceled {
620 &:before {
621 content: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0wIDhDMCAzLjU4MTcyIDMuNTgxNzIgMCA4IDBDMTIuNDE4MyAwIDE2IDMuNTgxNzIgMTYgOEMxNiAxMi40MTgzIDEyLjQxODMgMTYgOCAxNkMzLjU4MTcyIDE2IDAgMTIuNDE4MyAwIDhaTTggMS41QzQuNDEwMTUgMS41IDEuNSA0LjQxMDE1IDEuNSA4QzEuNSAxMS41ODk5IDQuNDEwMTUgMTQuNSA4IDE0LjVDMTEuNTg5OSAxNC41IDE0LjUgMTEuNTg5OSAxNC41IDhDMTQuNSA0LjQxMDE1IDExLjU4OTkgMS41IDggMS41Wk01LjIxOTY3IDUuMjE5NjdDNS41MTI1NiA0LjkyNjc4IDUuOTg3NDQgNC45MjY3OCA2LjI4MDMzIDUuMjE5NjdMOCA2LjkzOTM0TDkuNzE5NjcgNS4yMTk2N0MxMC4wMTI2IDQuOTI2NzggMTAuNDg3NCA0LjkyNjc4IDEwLjc4MDMgNS4yMTk2N0MxMS4wNzMyIDUuNTEyNTYgMTEuMDczMiA1Ljk4NzQ0IDEwLjc4MDMgNi4yODAzM0w5LjA2MDY2IDhMMTAuNzgwMyA5LjcxOTY3QzExLjA3MzIgMTAuMDEyNiAxMS4wNzMyIDEwLjQ4NzQgMTAuNzgwMyAxMC43ODAzQzEwLjQ4NzQgMTEuMDczMiAxMC4wMTI2IDExLjA3MzIgOS43MTk2NyAxMC43ODAzTDggOS4wNjA2Nkw2LjI4MDMzIDEwLjc4MDNDNS45ODc0NCAxMS4wNzMyIDUuNTEyNTYgMTEuMDczMiA1LjIxOTY3IDEwLjc4MDNDNC45MjY3OCAxMC40ODc0IDQuOTI2NzggMTAuMDEyNiA1LjIxOTY3IDkuNzE5NjdMNi45MzkzNCA4TDUuMjE5NjcgNi4yODAzM0M0LjkyNjc4IDUuOTg3NDQgNC45MjY3OCA1LjUxMjU2IDUuMjE5NjcgNS4yMTk2N1oiIGZpbGw9IiNFMzQ2M0MiLz4KPC9zdmc+Cg==');
622 }
623 }
624
625 &-pending {
626 &:before {
627 content: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik03LjgwNzQ3IDAuMjQ4MjgzQzguMDg0NTYgMC41NTYxNjUgOC4wNTk2MSAxLjAzMDM4IDcuNzUxNzIgMS4zMDc0OEw2LjcwNDQ3IDIuMjUwMDFIOS4yNUMxMi45Nzc5IDIuMjUwMDEgMTYgNS4yNzIwOCAxNiA5LjAwMDAxVjkuMjUwMDFDMTYgOS42NjQyMiAxNS42NjQyIDEwIDE1LjI1IDEwQzE0LjgzNTggMTAgMTQuNSA5LjY2NDIyIDE0LjUgOS4yNTAwMVY5LjAwMDAxQzE0LjUgNi4xMDA1MSAxMi4xNDk1IDMuNzUwMDEgOS4yNSAzLjc1MDAxSDYuNzA0NDdMNy43NTE3MiA0LjY5MjU0QzguMDU5NjEgNC45Njk2MyA4LjA4NDU2IDUuNDQzODUgNy44MDc0NyA1Ljc1MTczQzcuNTMwMzggNi4wNTk2MSA3LjA1NjE2IDYuMDg0NTcgNi43NDgyOCA1LjgwNzQ4TDQuMjQ4MjggMy41NTc0OEM0LjA5MDI0IDMuNDE1MjUgNCAzLjIxMjYyIDQgMy4wMDAwMUM0IDIuNzg3MzkgNC4wOTAyNCAyLjU4NDc3IDQuMjQ4MjggMi40NDI1NEw2Ljc0ODI4IDAuMTkyNTM2QzcuMDU2MTYgLTAuMDg0NTU4NCA3LjUzMDM4IC0wLjA1OTU5OTYgNy44MDc0NyAwLjI0ODI4M1pNMC43NSA2LjAwMDAxQzEuMTY0MjEgNi4wMDAwMSAxLjUgNi4zMzU3OSAxLjUgNi43NTAwMVY3LjAwMDAxQzEuNSA5Ljg5OTUgMy44NTA1MSAxMi4yNSA2Ljc1IDEyLjI1SDkuMjk1NTNMOC4yNDgyOCAxMS4zMDc1QzcuOTQwMzkgMTEuMDMwNCA3LjkxNTQ0IDEwLjU1NjIgOC4xOTI1MyAxMC4yNDgzQzguNDY5NjIgOS45NDA0IDguOTQzODQgOS45MTU0NCA5LjI1MTcyIDEwLjE5MjVMMTEuNzUxNyAxMi40NDI1QzExLjkwOTggMTIuNTg0OCAxMiAxMi43ODc0IDEyIDEzQzEyIDEzLjIxMjYgMTEuOTA5OCAxMy40MTUyIDExLjc1MTcgMTMuNTU3NUw5LjI1MTcyIDE1LjgwNzVDOC45NDM4NCAxNi4wODQ2IDguNDY5NjIgMTYuMDU5NiA4LjE5MjUzIDE1Ljc1MTdDNy45MTU0NCAxNS40NDM4IDcuOTQwMzkgMTQuOTY5NiA4LjI0ODI4IDE0LjY5MjVMOS4yOTU1MyAxMy43NUg2Ljc1QzMuMDIyMDggMTMuNzUgMCAxMC43Mjc5IDAgNy4wMDAwMVY2Ljc1MDAxQzAgNi4zMzU3OSAwLjMzNTc4NiA2LjAwMDAxIDAuNzUgNi4wMDAwMVoiIGZpbGw9IiNFQkJDMTYiLz4KPC9zdmc+Cg==');
628 }
629 }
630
631 &-rejected {
632 &:before {
633 content: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0yLjkwMzk5IDMuOTY0NjVDMi4wMjQ5NiA1LjA3MzIzIDEuNSA2LjQ3NTMxIDEuNSA4QzEuNSAxMS41ODk5IDQuNDEwMTUgMTQuNSA4IDE0LjVDOS41MjQ2OSAxNC41IDEwLjkyNjggMTMuOTc1IDEyLjAzNTQgMTMuMDk2TDIuOTAzOTkgMy45NjQ2NVpNMy45NjQ2NSAyLjkwMzk5TDEzLjA5NiAxMi4wMzU0QzEzLjk3NSAxMC45MjY4IDE0LjUgOS41MjQ2OSAxNC41IDhDMTQuNSA0LjQxMDE1IDExLjU4OTkgMS41IDggMS41QzYuNDc1MzEgMS41IDUuMDczMjMgMi4wMjQ5NiAzLjk2NDY1IDIuOTAzOTlaTTAgOEMwIDMuNTgxNzIgMy41ODE3MiAwIDggMEMxMi40MTgzIDAgMTYgMy41ODE3MiAxNiA4QzE2IDEyLjQxODMgMTIuNDE4MyAxNiA4IDE2QzMuNTgxNzIgMTYgMCAxMi40MTgzIDAgOFoiIGZpbGw9IiMxQTJDMzciLz4KPC9zdmc+Cg==');
634 }
635 }
636
637 &-waiting {
638 &:before {
639 content: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik04IDEuNUM0LjQxMDE1IDEuNSAxLjUgNC40MTAxNSAxLjUgOEMxLjUgMTEuNTg5OSA0LjQxMDE1IDE0LjUgOCAxNC41QzExLjU4OTkgMTQuNSAxNC41IDExLjU4OTkgMTQuNSA4QzE0LjUgNC40MTAxNSAxMS41ODk5IDEuNSA4IDEuNVpNMCA4QzAgMy41ODE3MiAzLjU4MTcyIDAgOCAwQzEyLjQxODMgMCAxNiAzLjU4MTcyIDE2IDhDMTYgMTIuNDE4MyAxMi40MTgzIDE2IDggMTZDMy41ODE3MiAxNiAwIDEyLjQxODMgMCA4Wk04IDMuMjVDOC40MTQyMSAzLjI1IDguNzUgMy41ODU3OSA4Ljc1IDRWNy42ODkzNEwxMC41MzAzIDkuNDY5NjdDMTAuODIzMiA5Ljc2MjU2IDEwLjgyMzIgMTAuMjM3NCAxMC41MzAzIDEwLjUzMDNDMTAuMjM3NCAxMC44MjMyIDkuNzYyNTYgMTAuODIzMiA5LjQ2OTY3IDEwLjUzMDNMNy4yNSA4LjMxMDY2VjRDNy4yNSAzLjU4NTc5IDcuNTg1NzkgMy4yNSA4IDMuMjVaIiBmaWxsPSIjQ0NBMjBDIi8+Cjwvc3ZnPgo=');
640 }
641 }
642
643 &-no-show {
644 &:before {
645 content: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTciIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNyAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTUuNjI2OTUgN0M1LjA3NDY3IDcgNC42MjY5NSA3LjQ0NzcyIDQuNjI2OTUgOEM0LjYyNjk1IDguNTUyMjkgNS4wNzQ2NyA5IDUuNjI2OTUgOUgxMS4yNjM2QzExLjgxNTkgOSAxMi4yNjM2IDguNTUyMjkgMTIuMjYzNiA4QzEyLjI2MzYgNy40NDc3MiAxMS44MTU5IDcgMTEuMjYzNiA3SDUuNjI2OTVaIiBmaWxsPSIjODA4QTkwIi8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNOC40NDUzMSAwQzQuMDI3MDMgMCAwLjQ0NTMxMiAzLjU4MTcyIDAuNDQ1MzEyIDhDMC40NDUzMTIgMTIuNDE4MyA0LjAyNzAzIDE2IDguNDQ1MzEgMTZDMTIuODYzNiAxNiAxNi40NDUzIDEyLjQxODMgMTYuNDQ1MyA4QzE2LjQ0NTMgMy41ODE3MiAxMi44NjM2IDAgOC40NDUzMSAwWk0xLjk0NTMxIDhDMS45NDUzMSA0LjQxMDE1IDQuODU1NDYgMS41IDguNDQ1MzEgMS41QzEyLjAzNTIgMS41IDE0Ljk0NTMgNC40MTAxNSAxNC45NDUzIDhDMTQuOTQ1MyAxMS41ODk5IDEyLjAzNTIgMTQuNSA4LjQ0NTMxIDE0LjVDNC44NTU0NiAxNC41IDEuOTQ1MzEgMTEuNTg5OSAxLjk0NTMxIDhaIiBmaWxsPSIjODA4QTkwIi8+Cjwvc3ZnPgo=');
646 }
647 }
648
649 &.am-relative {
650 &:before {
651 position: relative;
652 left: 0;
653 }
654 }
655
656 &.approved, &.opened, &.available {
657 &:before {
658 border-color: @color-green;
659 }
660 }
661
662 &.pending, &.busy {
663 &:before {
664 border-color: @color-orange;
665 }
666 }
667
668 &.canceled, &.away {
669 &:before {
670 border-color: @color-red;
671 }
672 }
673
674 &.full {
675 color: @color-blue;
676 }
677
678 &.upcoming {
679 color: @color-orange;
680 }
681
682 &.rejected, &.closed {
683 &:before {
684 border-color: @color-text-prime;
685 }
686 }
687
688 &.no-show {
689 &:before {
690 border-color: @color-dark-gray;
691 }
692 }
693
694 &-wl-status {
695 padding-left: 10px;
696 }
697 }
698
699 i.am-tooltip-icon {
700 color: @color-icon;
701 cursor: help;
702 }
703
704 .am-dialog-loader {
705 position: absolute;
706 z-index: 10000;
707 top: 0;
708 bottom: 0;
709 left: 0;
710 right: 0;
711 background-color: #ffffff;
712 padding: @padding-big;
713 text-align: center;
714 display: flex;
715 align-items: center;
716 justify-content: center;
717 }
718
719
720 .am-appointment-status-option, .am-employee-status-option {
721 padding-left: 30px;
722
723 .am-appointment-status-symbol {
724 &:before {
725 margin-top: -14px;
726 }
727 }
728
729 span {
730 display: flex;
731 align-items: center;
732 }
733 }
734
735 .am-gallery-images {
736 .am-event-section-title {
737 margin-bottom: 8px;
738 }
739
740 .am-gallery-image-wrapper {
741 margin-bottom: @margin-big;
742 border-radius: 3px;
743 overflow: hidden;
744 }
745
746 .am-gallery-image {
747 height: 120px;
748 line-height: 120px;
749 width: 100%;
750 overflow: hidden;
751 text-align: center;
752 background-position: center;
753 background-size: cover;
754 cursor: pointer;
755 position: relative;
756
757 i {
758 display: none;
759 color: @color-white;
760 position: absolute;
761 top: 50%;
762 left: 50%;
763 z-index: 1;
764 font-size: @medium-fs+4px;
765 margin-left: -12px;
766 margin-top: -12px;
767 }
768
769 &:hover {
770 i {
771 display: block;
772 }
773
774 &:before {
775 display: block;
776 position: absolute;
777 top: 0;
778 bottom: 0;
779 left: 0;
780 right: 0;
781 content: " ";
782 background-color: fade(@color-text-prime, 60%);
783 }
784 }
785
786 img {
787 width: 100%;
788 }
789 }
790
791 .am-gallery-image-title {
792 border: 1px solid @color-divider-gray;
793 border-bottom-left-radius: 3px;
794 border-bottom-right-radius: 3px;
795 padding: @padding-small;
796 font-size: @mini-fs - 1px;
797 overflow: hidden;
798 white-space: nowrap;
799 text-overflow: ellipsis;
800
801 .am-drag-handle {
802 cursor: move;
803 cursor: -webkit-grabbing;
804 margin-right: 2px;
805
806 img, svg {
807 display: inline-block;
808 vertical-align: middle;
809
810 rect {
811 fill: @color-text-second;
812 }
813 }
814
815 &:hover {
816 rect {
817 fill: @color-text-prime;
818 }
819 }
820 }
821 }
822
823 .am-gallery-image-add {
824 border: 2px dashed @color-blue;
825 height: 160px;
826 width: 100%;
827 text-align: center;
828 cursor: pointer;
829 position: relative;
830 border-radius: 4px;
831 display: flex;
832 justify-content: center;
833 align-items: center;
834 color: @color-blue;
835 box-sizing: border-box;
836 margin-bottom: @margin-big;
837
838 &:hover {
839 i {
840 border-radius: 50%;
841 border: 1px solid @color-blue;
842 background-color: @color-blue;
843 color: @color-white;
844 }
845 }
846
847 i {
848 display: inline;
849 padding: @padding-small/4;
850 color: @color-blue;
851 font-size: @medium-fs+4px;
852 line-height: 36px;
853 }
854
855 span {
856 display: block;
857 color: @color-blue;
858 }
859 }
860 }
861
862 #am-modal.am-modal.am-in-body {
863 .am-event-modal {
864 font-family: @font;
865 box-sizing: border-box;
866 margin: @margin-big;
867
868 * {
869 font-family: @font;
870 box-sizing: border-box;
871 }
872
873 @modal-selector-gallery: am-event-modal__gallery;
874 @modal-selector-mini-info: am-event-modal__mini-info;
875
876 &__header {
877 display: flex;
878 align-items: flex-start;
879 justify-content: space-between;
880 padding: @padding-big;
881
882 @media @less-then-xsmall {
883 flex-wrap: wrap;
884 }
885
886 &-title {
887 width: 100%;
888 font-size: @big-fs;
889 font-weight: @bold;
890 margin-right: 6px;
891
892 @media @less-then-xsmall {
893 display: flex;
894 max-width: 100%;
895 align-items: flex-start;
896 justify-content: space-between;
897 margin: 0 0 @margin-medium;
898 }
899
900 &-standard {
901 @media @less-then-xsmall {
902 flex-wrap: wrap;
903 }
904 }
905
906 &-text {
907 display: block;
908 width: 100%;
909 word-break: break-word;
910 font-size: inherit;
911 line-height: 1.5;
912 color: @color-text-prime;
913 }
914
915 &-subtext {
916 font-size: @medium-fs;
917 font-weight: @medium;
918 line-height: 1.8;
919 color: @color-text-prime;
920 padding-bottom: @padding-small;
921 }
922
923 &-status {
924 display: inline-flex;
925 font-size: @regular-fs;
926 font-weight: @medium;
927 line-height: 1.3;
928 padding: @padding-small/2 @padding-small @padding-small/2 @padding-small/2;
929 border-radius: 14px;
930
931 @media @less-then-xsmall {
932 flex: 0 0 auto;
933 margin-top: @margin-small/4*3;
934 }
935
936 img {
937 margin-right: @margin-small;
938 }
939
940 &.canceled {
941 background-color: fade(@color-red, 10%);
942 color: @color-red;
943 }
944
945 &.closed {
946 background-color: @color-gray;
947 color: @color-icon;
948 }
949
950 &.full {
951 background-color: fade(@color-blue, 10%);
952 color: @color-blue;
953 }
954
955 &.upcoming {
956 background-color: fade(@color-orange, 10%);
957 color: @color-orange;
958 }
959
960 &.open {
961 background-color: fade(@color-green, 10%);
962 color: @color-green;
963 }
964 }
965
966 & .@{modal-selector-mini-info} {
967 padding: 0;
968 margin: 12px 0 0;
969 border: none;
970 }
971 }
972
973 &-booking-btn {
974 font-size: @regular-fs;
975 font-weight: 600;
976 padding: @padding-small/2*3;
977 margin: 0;
978
979 @media @less-then-xsmall {
980 margin: 0 auto;
981 }
982
983 &.is-disabled {
984 opacity: 0.5;
985 }
986
987 &-price {
988 display: inline-block;
989 position: relative;
990 padding-left: @padding-big;
991
992 &:before {
993 content: '';
994 display: block;
995 height: 100%;
996 width: 1px;
997 background-color: fade(#fff, 40%);
998 position: absolute;
999 top: 50%;
1000 left: 11px;
1001 transform: translateY(-50%);
1002 }
1003 }
1004 }
1005 }
1006
1007 &__body {
1008 padding: @padding-big;
1009 }
1010
1011 &__gallery {
1012 display: flex;
1013 transition: all 0.3s ease-in-out;
1014 padding-bottom: @padding-big;
1015
1016 &-full {
1017 flex-direction: column;
1018 }
1019
1020 &-selected-image {
1021 width: 65%;
1022 border-radius: @border-radius;
1023 margin-bottom: @margin-small;
1024 background-size: cover;
1025 background-repeat: no-repeat;
1026 background-position: center;
1027 transition: all 0.3s ease-in-out;
1028 overflow: hidden;
1029
1030 &.@{modal-selector-gallery}-item-full {
1031 padding-top: 50%;
1032 }
1033 }
1034
1035 &-images {
1036 width: 35%;
1037 transition: all 0.3s ease-in-out;
1038
1039 &:before, &:after {
1040 content: '';
1041 display: block;
1042 clear: both;
1043 }
1044
1045 > div {
1046 position: relative;
1047 display: inline-block;
1048 width: ~"calc(50% - 8px)";
1049 padding-top: ~"calc(50% - 8px)";
1050 margin: 0 0 @margin-small @margin-small;
1051 border-radius: @border-radius;
1052 background-size: cover;
1053 background-repeat: no-repeat;
1054 background-position: center;
1055 overflow: hidden;
1056 cursor: pointer;
1057 float: left;
1058
1059 span {
1060 position: absolute;
1061 display: block;
1062 }
1063 }
1064
1065 &-more {}
1066
1067 &-less {
1068 font-size: @small-fs;
1069 font-weight: 600;
1070 text-align: center;
1071 color: @color-accent;
1072 padding: @padding-small/2;
1073 border-bottom: 1px solid @color-divider-gray;
1074 cursor: pointer;
1075 }
1076
1077 &-number {
1078 width: 100%;
1079 top: 50%;
1080 left: 50%;
1081 transform: translate(-50%, -50%);
1082 font-size: 32px;
1083 font-weight: 600;
1084 text-align: center;
1085 color: @color-accent;
1086
1087 &-background {
1088 top: 0;
1089 left: 0;
1090 width: 100%;
1091 height: 100%;
1092 opacity: 0.1;
1093 background-color: @color-accent;
1094 //background-color: fade(@color-accent, 10%);
1095 }
1096 }
1097
1098 &.@{modal-selector-gallery}-item-full {
1099 > div {
1100 width: ~"calc(20% - 8px)";
1101 padding-top: ~"calc(20% - 8px)";
1102 margin: 0 @margin-small/2 @margin-small @margin-small/2;
1103 }
1104 }
1105 }
1106
1107 &-item-full {
1108 width: 100%;
1109 }
1110 }
1111
1112 &__mini-info {
1113 display: flex;
1114 flex-wrap: wrap;
1115 align-items: center;
1116 justify-content: space-between;
1117 padding-bottom: @padding-big;
1118 margin-bottom: @margin-big;
1119 border-bottom: 1px solid @color-divider-gray;
1120
1121 &-inner {
1122 display: flex;
1123 align-items: center;
1124 justify-content: flex-start;
1125
1126 @media @less-then-xsmall {
1127 width: 100%;
1128 align-items: flex-start;
1129 }
1130
1131 img {
1132 height: 24px;
1133 }
1134 }
1135
1136 &-text {
1137 font-size: @small-fs;
1138 font-weight: 500;
1139 line-height: 1.75;
1140 word-break: break-word;
1141 color: @color-text-prime;
1142 margin-left: @margin-small/2*3;
1143 }
1144 }
1145
1146 &__tags-description {
1147 padding-bottom: @padding-big;
1148 margin-bottom: @margin-big;
1149 border-bottom: 1px solid @color-divider-gray;
1150 }
1151
1152 &__tags {
1153 display: flex;
1154 flex-wrap: wrap;
1155
1156 &-inner {
1157 display: flex;
1158 align-items: center;
1159 justify-content: flex-start;
1160 background-color: @color-gray;
1161 padding: 6px @padding-small;
1162 margin-right: @margin-small;
1163 margin-bottom: @margin-small/2;
1164 border-radius: @border-radius;
1165 }
1166
1167 &-text {
1168 font-size: @mini-fs;
1169 font-weight: 500;
1170 line-height: 1.35;
1171 word-break: break-word;
1172 margin-left: @margin-small;
1173 }
1174 }
1175
1176 &__description {
1177 font-size: @regular-fs;
1178 font-weight: 400;
1179 color: @color-text-prime;
1180 white-space: pre-line;
1181 word-break: break-word;
1182 margin-top: @margin-small;
1183 }
1184
1185 &__periods {
1186 p {
1187 font-size: @small-fs;
1188 font-weight: 400;
1189 line-height: 1.7;
1190 margin-bottom: 12px;
1191 }
1192
1193 &-wrapper {
1194 display: flex;
1195 padding: 12px 0;
1196 overflow-y: hidden;
1197 }
1198
1199 &-inner {
1200 display: flex;
1201 flex-direction: column;
1202 flex: 0 0 auto;
1203 padding-right: 20px;
1204 margin-right: 20px;
1205 border-right: 1px solid @color-divider-gray;
1206
1207 &:last-of-type {
1208 border-right: none;
1209 margin-right: 0;
1210 padding-right: 0;
1211 }
1212 }
1213
1214 &-week {
1215 font-size: @mini-fs;
1216 font-weight: 500;
1217 line-height: 1.35;
1218 text-transform: uppercase;
1219 color: #26313D;
1220 margin-bottom: @margin-small/2;
1221 }
1222
1223 &-month {
1224 font-size: @small-fs;
1225 font-weight: 500;
1226 line-height: 1.15;
1227 color: @color-text-prime;
1228 margin-bottom: 12px;
1229 }
1230
1231 &-time {
1232 font-size: @small-fs;
1233 font-weight: 500;
1234 line-height: 1.45;
1235 color: @color-dark-gray;
1236 }
1237 }
1238
1239 &__employees {
1240 padding-top: @padding-big;
1241 margin-top: @margin-big;
1242 border-top: 1px solid @color-divider-gray;
1243
1244 p {
1245 font-size: @small-fs;
1246 font-weight: 400;
1247 line-height: 1.7;
1248 margin-bottom: 12px;
1249 }
1250
1251 &-wrapper {
1252 display: flex;
1253 padding: 12px 0;
1254 overflow-y: hidden;
1255 }
1256
1257 &-inner {
1258 display: flex;
1259 flex: 0 0 auto;
1260 align-items: center;
1261 padding-right: @padding-small*4;
1262
1263 &:last-of-type {
1264 padding-right: 0;
1265 }
1266
1267 img {
1268 flex: 0 0 auto;
1269 width: 28px;
1270 height: 28px;
1271 margin-right: @margin-small/2*3;
1272 border-radius: 50%;
1273 }
1274 }
1275
1276 &-name {
1277 width: 100%;
1278 font-size: @regular-fs;
1279 font-weight: 500;
1280 line-height: 1.15;
1281 color: @color-text-prime;
1282 }
1283 }
1284
1285 &__invite {
1286 .el-form-item {
1287 &__label {
1288 font-size: 20px;
1289 font-weight: @medium;
1290 text-align: center;
1291 line-height: 1;
1292 word-break: break-word;
1293 margin-bottom: 20px;
1294 }
1295
1296 &__content {
1297 text-align: center;
1298 }
1299 }
1300 }
1301
1302 &__invite-wrapper {
1303 display: flex;
1304 flex-direction: column;
1305 align-items: center;
1306 }
1307
1308 &__invite-svg {
1309 width: 102px;
1310 height: 102px;
1311 margin: 20px 0 @margin-medium;
1312 }
1313 }
1314
1315 &.am-event-modal {
1316 .el-dialog {
1317 &__headerbtn {
1318 top: -32px;
1319 right: 0;
1320 width: 24px;
1321 height: 24px;
1322 border-radius: 50%;
1323 display: flex;
1324 align-items: center;
1325 justify-content: center;
1326
1327 > i {
1328 font-weight: 600;
1329 }
1330 }
1331
1332 .el-dialog__body {
1333 padding: 0;
1334 border-radius: @border-radius;
1335 overflow: hidden;
1336 }
1337 }
1338
1339 .am-add-coupon {
1340 .el-input-group__append {
1341 border-color: @color-divider-gray;
1342 }
1343 }
1344 }
1345 }
1346