PluginProbe
YayExtra – WooCommerce Extra Product Options / 1.2
YayExtra – WooCommerce Extra Product Options v1.2
2.1.0 trunk 1.1.4 1.1.5 1.1.8 1.2 1.2.3 1.2.4 1.2.5 1.2.6 1.2.7 1.2.8 1.2.9 1.3 1.3.1 1.3.4 1.3.6 1.3.7 1.3.8 1.3.9 1.4.0 1.5.2 1.5.3 1.5.5 1.5.6 All 30 releases
yayextra / assets / dist / css / main.css

main.css in YayExtra – WooCommerce Extra Product Options 1.2, at assets/dist/css/main.css

2,728 lines 65.5 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 :root {
2 /* COLOR */
3 --black: #000;
4 --gray: #ccc;
5 --light-gray: #e7e7e7;
6 --primary: #2271b1;
7 --red: #db2445;
8 --white: #fff;
9
10 /* BOX SHADOWS */
11 --box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.05),
12 8px 8px 16px rgba(92, 103, 153, 0.05);
13
14 /* SPACING */
15 --spacing-step: 4px;
16 }
17
18 /* RESET CSS FOR EASIER STYLE */
19 * {
20 box-sizing: border-box;
21 margin: 0;
22 padding: 0;
23 }
24
25 html {
26 scroll-behavior: smooth;
27 }
28
29 body {
30 margin: 0;
31 font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
32 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
33 sans-serif;
34 -webkit-font-smoothing: antialiased;
35 -moz-osx-font-smoothing: grayscale;
36 }
37
38 code {
39 font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
40 monospace;
41 }
42
43 #wpcontent {
44 padding-left: 0 !important;
45 }
46
47 /* #yayextra-section {
48 margin-top: calc(var(--spacing-step) * 2);
49 padding: calc(var(--spacing-step) * 4) calc(var(--spacing-step) * 4)
50 calc(var(--spacing-step) * 4) calc(var(--spacing-step) * 1);
51 } */
52
53 .yaye-main-page {
54 padding: calc(var(--spacing-step) * 5) calc(var(--spacing-step) * 5)
55 calc(var(--spacing-step) * 5) calc(var(--spacing-step) * 5);
56 }
57
58 .yaye-wrap .nav-tab-wrapper {
59 background: var(--white);
60 border-radius: calc(var(--spacing-step) * 1);
61 padding-top: 0px;
62 border-bottom: unset;
63 }
64
65 .yaye-wrap .nav-tab-wrapper .components-tab-panel__tabs {
66 border-bottom: 1px solid #dcdcde;
67 }
68
69 .yaye-wrap .woocommerce-pagination__per-page-picker .components-select-control {
70 display: contents;
71 }
72
73 .yaye-wrap
74 .woocommerce-pagination__per-page-picker
75 .components-select-control
76 label {
77 margin-right: 8px;
78 }
79
80 .yaye-wrap .yaye-content-wrap {
81 margin: 24px;
82 }
83
84 .yaye-wrap .yaye-optset-el-wrap .components-base-control {
85 margin-bottom: 20px;
86 }
87
88 .global-style-wrap
89 .components-panel__body
90 > .components-panel__body-title:hover {
91 background: initial;
92 }
93 .global-style-wrap
94 .components-panel__body
95 > .components-panel__body-title
96 > button:focus {
97 box-shadow: none;
98 }
99 .global-style-wrap
100 .components-panel__body
101 > .components-panel__body-title:focus {
102 outline: none;
103 }
104
105 .yaye-wrap .woocommerce-pagination__per-page-picker .components-base-control {
106 margin-bottom: unset;
107 }
108
109 .yaye-wrap .option-sets-wrap a {
110 text-decoration: none;
111 }
112
113 .yaye-wrap .option-sets-wrap .button-wrap {
114 text-align: right;
115 margin-bottom: 16px;
116 }
117
118 .yaye-wrap .woocommerce-table .components-card__header {
119 display: none;
120 }
121
122 .yaye-optset-el-wrap .optset-el-header-action {
123 margin-top: 15px;
124 }
125 .yaye-optset-el-wrap .optset-el-header-action .dashicons-arrow-left-alt {
126 margin-right: 3px;
127 }
128 .yaye-optset-el-wrap .optset-el-header-action a {
129 text-decoration: none;
130 }
131
132 .yaye-basic-input input[type='text'],
133 .yaye-basic-input input[type='number'],
134 .yaye-basic-input input[type='checkbox'],
135 .yaye-basic-textarea textarea {
136 border: 1px solid var(--gray) !important;
137 border-radius: 3px;
138 outline: 0;
139 position: relative;
140 -webkit-transition: border-color 0.2s;
141 transition: border-color 0.2s;
142 box-sizing: border-box;
143 }
144
145 #yayextra-section .components-text-control__input:focus,
146 #yayextra-section .components-checkbox-control__input:focus,
147 #yayextra-section .components-textarea-control__input:focus,
148 #yayextra-section
149 .components-input-control__input:focus
150 ~ .components-input-control__backdrop {
151 border-color: var(--wp-admin-theme-color) !important;
152 box-shadow: 0 0 0 1px var(--wp-admin-theme-color);
153 outline: 2px solid transparent;
154 }
155
156 .yaye-basic-select {
157 margin-bottom: calc(var(--spacing-step) * 2);
158 width: calc(var(--spacing-step) * 56);
159 }
160
161 .yaye-margin-bottom-unset {
162 margin-bottom: 0 !important;
163 }
164
165 .yaye-content-wrap.general-wrap .components-base-control {
166 width: 50%;
167 }
168
169 .yaye-wrap .components-base-control__label {
170 display: inline-block;
171 margin-bottom: 5px;
172 font-weight: 500;
173 }
174 .yaye-wrap .custom-css-wrap textarea[name='option-set-custom-css'] {
175 height: 200px;
176 }
177
178 /* .yaye-content-wrap.option-sets-wrap .woocommerce-table__header {
179 text-align: center !important;
180 } */
181
182 /* .yaye-content-wrap.option-sets-wrap .woocommerce-table__item {
183 text-align: center !important;
184 } */
185 .yaye-wrap .woocommerce-table {
186 margin-bottom: 20px;
187 }
188 .yaye-wrap .woocommerce-table .components-card__footer {
189 display: none;
190 }
191 .yaye-status-toggle > .components-base-control__field {
192 margin: auto;
193 /* justify-content: center; */
194 }
195
196 .yaye-status-toggle > .components-base-control__field > .components-form-toggle {
197 margin-right: initial;
198 }
199
200 .yaye-content-wrap.option-sets-wrap {
201 position: relative;
202 }
203
204 .yaye-content-wrap.option-sets-wrap table > tbody tr:nth-child(n + 2):hover > th,
205 .yaye-content-wrap.option-sets-wrap
206 table
207 > tbody
208 tr:nth-child(n + 2):hover
209 > td {
210 background-color: rgb(246, 246, 247) !important;
211 }
212
213 .yaye-option-list-loading-layout {
214 position: absolute;
215 width: 100%;
216 height: 100%;
217 z-index: 10;
218 background-color: rgba(200, 200, 200, 0.5);
219 }
220
221 .yaye-spinner-wrap {
222 -webkit-box-align: center;
223 -ms-flex-align: center;
224 align-items: center;
225 display: -webkit-box;
226 display: -ms-flexbox;
227 display: flex;
228 }
229 .yaye-spinner-wrap .yaye-spinner-icon {
230 margin-left: 5px;
231 -webkit-box-align: center;
232 -ms-flex-align: center;
233 -webkit-box-pack: center;
234 -ms-flex-pack: center;
235 align-items: center;
236 cursor: pointer;
237 display: -webkit-inline-box;
238 display: -ms-inline-flexbox;
239 display: inline-flex;
240 font-size: 21px;
241 justify-content: center;
242 padding: 2px;
243 }
244
245 .yaye-spinner-wrap .yaye-spinner-icon.sync-loading {
246 -webkit-animation: rotate 1s linear infinite;
247 animation: rotate 1s linear infinite;
248 }
249
250 .yaye-spinner-icon svg {
251 fill: currentColor;
252 height: 1em;
253 width: 1em;
254 }
255 .yaye-tab-item:focus {
256 box-shadow: inset 0 -4px 0px 0px var(--wp-admin-theme-color) !important;
257 }
258 .yaye-tab-item.is-active {
259 box-shadow: inset 0 -4px 0px 0px var(--wp-admin-theme-color) !important;
260 color: initial !important;
261 }
262
263 .yaye-loading-container {
264 background-color: var(--white);
265 display: flex;
266 justify-content: center;
267 height: 400px;
268 width: 100%;
269 }
270
271 .yaye__control {
272 min-height: 30px !important;
273 cursor: pointer !important;
274 border-color: var(--gray) !important;
275 border-radius: 3px !important;
276 transition: border-color 0.2s !important;
277 -webkit-transition: border-color 0.2s !important;
278 }
279
280 .yaye__input-container {
281 margin: 0 !important;
282 padding: 0 !important;
283 }
284
285 .yaye__indicators {
286 height: 30px;
287 }
288
289 .yaye__control .yaye__indicator-separator {
290 display: none;
291 }
292
293 .yaye__value-container {
294 padding: 0 8px !important;
295 }
296
297 .yaye__indicator {
298 color: var(--gray) !important;
299 }
300
301 .yaye__control.yaye__control--is-focused {
302 border-color: var(--wp-admin-theme-color) !important;
303 box-shadow: 0 0 0 1px var(--wp-admin-theme-color);
304 outline: 2px solid transparent;
305 }
306
307 .yaye__menu-list .yaye__option {
308 cursor: pointer;
309 padding: 8px 15px !important;
310 }
311
312 .yaye__menu-list .yaye__option:hover {
313 background-color: #f5f7fa !important;
314 }
315
316 .yaye__menu-list .yaye__option.yaye__option--is-selected {
317 color: #2271b1 !important;
318 font-weight: 700;
319 background-color: #fff;
320 }
321 .yaye__menu {
322 z-index: 999 !important;
323 }
324
325 .yaye__control .yaye__input {
326 box-shadow: none !important;
327 }
328
329 .yaye__option.yaye__option--is-focused {
330 background-color: #f5f7fa !important;
331 }
332
333 .yaye__multi-value {
334 height: 20px;
335 }
336
337 .yaye__multi-value__label {
338 padding: 2px 2px 2px 6px !important;
339 }
340
341 .yaye-options__save-changes-button {
342 margin-top: calc(var(--spacing-step) * 4);
343 }
344 .yaye-filter-any-all {
345 width: 85px;
346 margin-left: 5px;
347 margin-right: 5px;
348 }
349
350 .yaye-button span {
351 margin-top: 3px;
352 }
353
354 .yaye-required {
355 color: var(--red);
356 line-height: 0.9;
357 position: absolute;
358 margin-top: 3px;
359 }
360 .yaye-required-x-icon {
361 right: -20px;
362 margin-top: 0;
363 }
364
365 .yaye-wrap .components-datetime__time {
366 padding-bottom: unset;
367 }
368 .yaye-wrap .components-datetime__time fieldset:first-child {
369 display: none;
370 }
371 .yaye-wrap .components-datetime__timezone {
372 display: none;
373 }
374 .yaye-wrap .components-datetime__time fieldset:nth-child(2) {
375 width: 87px;
376 }
377
378 #yayextra-section .woocommerce-table__table tbody {
379 /* color: #2C3338; */
380 color: #3c434a;
381 }
382 #yayextra-section .woocommerce-table__table th {
383 background-color: #fff;
384 font-size: 14px;
385 padding: 14px 24px;
386 }
387
388 #yayextra-section .woocommerce-table__table td,
389 #yayextra-section .woocommerce-table__table .woocommerce-table__item {
390 border: none;
391 font-size: 14px;
392 padding: 14px 24px;
393 }
394
395 #yayextra-section .woocommerce-table__table tr:hover,
396 #yayextra-section .woocommerce-table__table tr:focus-within {
397 background-color: transparent;
398 }
399
400 #yayextra-section .yaye-group-actions {
401 display: flex;
402 justify-content: center;
403 gap: 12px;
404 }
405
406 #yayextra-section .components-tab-panel__tabs-item {
407 padding: 25px 20px;
408 font-size: 14px;
409 color: #3c434a;
410 transition: box-shadow 0.2s linear;
411 }
412
413 #yayextra-section .components-tab-panel__tabs-item:hover {
414 /* background-color: #fafafa; */
415 box-shadow: inset 0 -4px 0px 0px #eeeeef;
416 }
417
418 .components-form-toggle.is-checked > .components-form-toggle__track {
419 background-color: #6ea7d6 !important;
420 border-radius: 13px !important;
421 height: 20px !important;
422 width: 40px !important;
423 }
424
425 .components-form-toggle.is-checked > .components-form-toggle__thumb {
426 background-color: var(--primary) !important;
427 left: 4px !important;
428 height: 16px !important;
429 width: 16px !important;
430 transition: 0.5s;
431 }
432 .components-form-toggle .components-form-toggle__thumb {
433 transition: transform 0.5s ease;
434 }
435
436 .components-form-toggle > .components-form-toggle__track {
437 background-color: #ccc !important;
438 border-radius: 13px !important;
439 border: none;
440 height: 20px !important;
441 width: 40px !important;
442 }
443
444 .components-form-toggle > .components-form-toggle__thumb {
445 background-color: var(--white) !important;
446 border: none;
447 height: 16px !important;
448 width: 16px !important;
449 top: 2px !important;
450 left: 2px !important;
451 }
452
453 .yaye-icon-button {
454 cursor: pointer;
455 }
456 .yaye-icon-button img {
457 width: 24px;
458 height: 24px;
459 }
460
461 .yaye-setting-button {
462 filter: invert(33%) sepia(6%) saturate(829%) hue-rotate(169deg)
463 brightness(94%) contrast(88%);
464 }
465
466 .yaye-duplicate-button {
467 filter: invert(46%) sepia(58%) saturate(3411%) hue-rotate(202deg)
468 brightness(97%) contrast(98%);
469 }
470
471 .yaye-delete-button {
472 filter: invert(58%) sepia(95%) saturate(5395%) hue-rotate(337deg)
473 brightness(98%) contrast(95%);
474 }
475
476 .yaye-icon-button:hover {
477 opacity: 0.7;
478 }
479
480 #yayextra-section .option-sets-wrap .woocommerce-table__item:last-child,
481 #yayextra-section .option-sets-wrap .woocommerce-table__header:last-child {
482 background: var(--white);
483 box-shadow: inset 1px 0 #ccc;
484 position: sticky;
485 right: 0;
486 width: 150px;
487 }
488
489 #yayextra-section
490 .option-sets-wrap
491 .woocommerce-table__table.is-loading
492 > table
493 > tbody
494 > tr:nth-child(n + 6) {
495 display: none;
496 }
497
498 #yayextra-section
499 .components-form-toggle__input:focus
500 + .components-form-toggle__track {
501 box-shadow: unset !important;
502 }
503
504 #yayextra-section .yaye-table-link:focus {
505 box-shadow: unset !important;
506 }
507 #yayextra-section .yaye-table-link:hover {
508 color: #135e96 !important ;
509 }
510
511 /* Tippy CSS */
512 .tippy-touch {
513 cursor: pointer !important;
514 }
515 .tippy-notransition {
516 transition: none !important;
517 }
518 .tippy-popper {
519 max-width: 400px;
520 -webkit-perspective: 800px;
521 perspective: 800px;
522 z-index: 9999;
523 outline: 0;
524 transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
525 pointer-events: none;
526 }
527 .tippy-popper.html-template {
528 max-width: 96%;
529 max-width: calc(100% - 20px);
530 }
531 .tippy-popper[x-placement^='top'] [x-arrow] {
532 border-top: 7px solid #333;
533 border-right: 7px solid transparent;
534 border-left: 7px solid transparent;
535 bottom: -7px;
536 margin: 0 9px;
537 }
538 .tippy-popper[x-placement^='top'] [x-arrow].arrow-small {
539 border-top: 5px solid #333;
540 border-right: 5px solid transparent;
541 border-left: 5px solid transparent;
542 bottom: -5px;
543 }
544 .tippy-popper[x-placement^='top'] [x-arrow].arrow-big {
545 border-top: 10px solid #333;
546 border-right: 10px solid transparent;
547 border-left: 10px solid transparent;
548 bottom: -10px;
549 }
550 .tippy-popper[x-placement^='top'] [x-circle] {
551 -webkit-transform-origin: 0 33%;
552 transform-origin: 0 33%;
553 }
554 .tippy-popper[x-placement^='top'] [x-circle].enter {
555 -webkit-transform: scale(1) translate(-50%, -55%);
556 transform: scale(1) translate(-50%, -55%);
557 opacity: 1;
558 }
559 .tippy-popper[x-placement^='top'] [x-circle].leave {
560 -webkit-transform: scale(0.15) translate(-50%, -50%);
561 transform: scale(0.15) translate(-50%, -50%);
562 opacity: 0;
563 }
564 .tippy-popper[x-placement^='top'] .tippy-tooltip.light-theme [x-circle] {
565 background-color: #fff;
566 }
567 .tippy-popper[x-placement^='top'] .tippy-tooltip.light-theme [x-arrow] {
568 border-top: 7px solid #fff;
569 border-right: 7px solid transparent;
570 border-left: 7px solid transparent;
571 }
572 .tippy-popper[x-placement^='top']
573 .tippy-tooltip.light-theme
574 [x-arrow].arrow-small {
575 border-top: 5px solid #fff;
576 border-right: 5px solid transparent;
577 border-left: 5px solid transparent;
578 }
579 .tippy-popper[x-placement^='top']
580 .tippy-tooltip.light-theme
581 [x-arrow].arrow-big {
582 border-top: 10px solid #fff;
583 border-right: 10px solid transparent;
584 border-left: 10px solid transparent;
585 }
586 .tippy-popper[x-placement^='top'] .tippy-tooltip.transparent-theme [x-circle] {
587 background-color: rgba(0, 0, 0, 0.7);
588 }
589 .tippy-popper[x-placement^='top'] .tippy-tooltip.transparent-theme [x-arrow] {
590 border-top: 7px solid rgba(0, 0, 0, 0.7);
591 border-right: 7px solid transparent;
592 border-left: 7px solid transparent;
593 }
594 .tippy-popper[x-placement^='top']
595 .tippy-tooltip.transparent-theme
596 [x-arrow].arrow-small {
597 border-top: 5px solid rgba(0, 0, 0, 0.7);
598 border-right: 5px solid transparent;
599 border-left: 5px solid transparent;
600 }
601 .tippy-popper[x-placement^='top']
602 .tippy-tooltip.transparent-theme
603 [x-arrow].arrow-big {
604 border-top: 10px solid rgba(0, 0, 0, 0.7);
605 border-right: 10px solid transparent;
606 border-left: 10px solid transparent;
607 }
608 .tippy-popper[x-placement^='top'] [data-animation='perspective'] {
609 -webkit-transform-origin: bottom;
610 transform-origin: bottom;
611 }
612 .tippy-popper[x-placement^='top'] [data-animation='perspective'].enter {
613 opacity: 1;
614 -webkit-transform: translateY(-10px) rotateX(0);
615 transform: translateY(-10px) rotateX(0);
616 }
617 .tippy-popper[x-placement^='top'] [data-animation='perspective'].leave {
618 opacity: 0;
619 -webkit-transform: translateY(0) rotateX(90deg);
620 transform: translateY(0) rotateX(90deg);
621 }
622 .tippy-popper[x-placement^='top'] [data-animation='fade'].enter {
623 opacity: 1;
624 -webkit-transform: translateY(-10px);
625 transform: translateY(-10px);
626 }
627 .tippy-popper[x-placement^='top'] [data-animation='fade'].leave {
628 opacity: 0;
629 -webkit-transform: translateY(-10px);
630 transform: translateY(-10px);
631 }
632 .tippy-popper[x-placement^='top'] [data-animation='shift'].enter {
633 opacity: 1;
634 -webkit-transform: translateY(-10px);
635 transform: translateY(-10px);
636 }
637 .tippy-popper[x-placement^='top'] [data-animation='shift'].leave {
638 opacity: 0;
639 -webkit-transform: translateY(0);
640 transform: translateY(0);
641 }
642 .tippy-popper[x-placement^='top'] [data-animation='scale'].enter {
643 opacity: 1;
644 -webkit-transform: translateY(-10px) scale(1);
645 transform: translateY(-10px) scale(1);
646 }
647 .tippy-popper[x-placement^='top'] [data-animation='scale'].leave {
648 opacity: 0;
649 -webkit-transform: translateY(0) scale(0);
650 transform: translateY(0) scale(0);
651 }
652 .tippy-popper[x-placement^='bottom'] [x-arrow] {
653 border-bottom: 7px solid #333;
654 border-right: 7px solid transparent;
655 border-left: 7px solid transparent;
656 top: -7px;
657 margin: 0 9px;
658 }
659 .tippy-popper[x-placement^='bottom'] [x-arrow].arrow-small {
660 border-bottom: 5px solid #333;
661 border-right: 5px solid transparent;
662 border-left: 5px solid transparent;
663 top: -5px;
664 }
665 .tippy-popper[x-placement^='bottom'] [x-arrow].arrow-big {
666 border-bottom: 10px solid #333;
667 border-right: 10px solid transparent;
668 border-left: 10px solid transparent;
669 top: -10px;
670 }
671 .tippy-popper[x-placement^='bottom'] [x-circle] {
672 -webkit-transform-origin: 0 -50%;
673 transform-origin: 0 -50%;
674 }
675 .tippy-popper[x-placement^='bottom'] [x-circle].enter {
676 -webkit-transform: scale(1) translate(-50%, -45%);
677 transform: scale(1) translate(-50%, -45%);
678 opacity: 1;
679 }
680 .tippy-popper[x-placement^='bottom'] [x-circle].leave {
681 -webkit-transform: scale(0.15) translate(-50%, -5%);
682 transform: scale(0.15) translate(-50%, -5%);
683 opacity: 0;
684 }
685 .tippy-popper[x-placement^='bottom'] .tippy-tooltip.light-theme [x-circle] {
686 background-color: #fff;
687 }
688 .tippy-popper[x-placement^='bottom'] .tippy-tooltip.light-theme [x-arrow] {
689 border-bottom: 7px solid #fff;
690 border-right: 7px solid transparent;
691 border-left: 7px solid transparent;
692 }
693 .tippy-popper[x-placement^='bottom']
694 .tippy-tooltip.light-theme
695 [x-arrow].arrow-small {
696 border-bottom: 5px solid #fff;
697 border-right: 5px solid transparent;
698 border-left: 5px solid transparent;
699 }
700 .tippy-popper[x-placement^='bottom']
701 .tippy-tooltip.light-theme
702 [x-arrow].arrow-big {
703 border-bottom: 10px solid #fff;
704 border-right: 10px solid transparent;
705 border-left: 10px solid transparent;
706 }
707 .tippy-popper[x-placement^='bottom']
708 .tippy-tooltip.transparent-theme
709 [x-circle] {
710 background-color: rgba(0, 0, 0, 0.7);
711 }
712 .tippy-popper[x-placement^='bottom']
713 .tippy-tooltip.transparent-theme
714 [x-arrow] {
715 border-bottom: 7px solid rgba(0, 0, 0, 0.7);
716 border-right: 7px solid transparent;
717 border-left: 7px solid transparent;
718 }
719 .tippy-popper[x-placement^='bottom']
720 .tippy-tooltip.transparent-theme
721 [x-arrow].arrow-small {
722 border-bottom: 5px solid rgba(0, 0, 0, 0.7);
723 border-right: 5px solid transparent;
724 border-left: 5px solid transparent;
725 }
726 .tippy-popper[x-placement^='bottom']
727 .tippy-tooltip.transparent-theme
728 [x-arrow].arrow-big {
729 border-bottom: 10px solid rgba(0, 0, 0, 0.7);
730 border-right: 10px solid transparent;
731 border-left: 10px solid transparent;
732 }
733 .tippy-popper[x-placement^='bottom'] [data-animation='perspective'] {
734 -webkit-transform-origin: top;
735 transform-origin: top;
736 }
737 .tippy-popper[x-placement^='bottom'] [data-animation='perspective'].enter {
738 opacity: 1;
739 -webkit-transform: translateY(10px) rotateX(0);
740 transform: translateY(10px) rotateX(0);
741 }
742 .tippy-popper[x-placement^='bottom'] [data-animation='perspective'].leave {
743 opacity: 0;
744 -webkit-transform: translateY(0) rotateX(-90deg);
745 transform: translateY(0) rotateX(-90deg);
746 }
747 .tippy-popper[x-placement^='bottom'] [data-animation='fade'].enter {
748 opacity: 1;
749 -webkit-transform: translateY(10px);
750 transform: translateY(10px);
751 }
752 .tippy-popper[x-placement^='bottom'] [data-animation='fade'].leave {
753 opacity: 0;
754 -webkit-transform: translateY(10px);
755 transform: translateY(10px);
756 }
757 .tippy-popper[x-placement^='bottom'] [data-animation='shift'].enter {
758 opacity: 1;
759 -webkit-transform: translateY(10px);
760 transform: translateY(10px);
761 }
762 .tippy-popper[x-placement^='bottom'] [data-animation='shift'].leave {
763 opacity: 0;
764 -webkit-transform: translateY(0);
765 transform: translateY(0);
766 }
767 .tippy-popper[x-placement^='bottom'] [data-animation='scale'].enter {
768 opacity: 1;
769 -webkit-transform: translateY(10px) scale(1);
770 transform: translateY(10px) scale(1);
771 }
772 .tippy-popper[x-placement^='bottom'] [data-animation='scale'].leave {
773 opacity: 0;
774 -webkit-transform: translateY(0) scale(0);
775 transform: translateY(0) scale(0);
776 }
777 .tippy-popper[x-placement^='left'] [x-arrow] {
778 border-left: 7px solid #333;
779 border-top: 7px solid transparent;
780 border-bottom: 7px solid transparent;
781 right: -7px;
782 margin: 6px 0;
783 }
784 .tippy-popper[x-placement^='left'] [x-arrow].arrow-small {
785 border-left: 5px solid #333;
786 border-top: 5px solid transparent;
787 border-bottom: 5px solid transparent;
788 right: -5px;
789 }
790 .tippy-popper[x-placement^='left'] [x-arrow].arrow-big {
791 border-left: 10px solid #333;
792 border-top: 10px solid transparent;
793 border-bottom: 10px solid transparent;
794 right: -10px;
795 }
796 .tippy-popper[x-placement^='left'] [x-circle] {
797 -webkit-transform-origin: 50% 0;
798 transform-origin: 50% 0;
799 }
800 .tippy-popper[x-placement^='left'] [x-circle].enter {
801 -webkit-transform: scale(1) translate(-50%, -50%);
802 transform: scale(1) translate(-50%, -50%);
803 opacity: 1;
804 }
805 .tippy-popper[x-placement^='left'] [x-circle].leave {
806 -webkit-transform: scale(0.15) translate(-50%, -50%);
807 transform: scale(0.15) translate(-50%, -50%);
808 opacity: 0;
809 }
810 .tippy-popper[x-placement^='left'] .tippy-tooltip.light-theme [x-circle] {
811 background-color: #fff;
812 }
813 .tippy-popper[x-placement^='left'] .tippy-tooltip.light-theme [x-arrow] {
814 border-left: 7px solid #fff;
815 border-top: 7px solid transparent;
816 border-bottom: 7px solid transparent;
817 }
818 .tippy-popper[x-placement^='left']
819 .tippy-tooltip.light-theme
820 [x-arrow].arrow-small {
821 border-left: 5px solid #fff;
822 border-top: 5px solid transparent;
823 border-bottom: 5px solid transparent;
824 }
825 .tippy-popper[x-placement^='left']
826 .tippy-tooltip.light-theme
827 [x-arrow].arrow-big {
828 border-left: 10px solid #fff;
829 border-top: 10px solid transparent;
830 border-bottom: 10px solid transparent;
831 }
832 .tippy-popper[x-placement^='left'] .tippy-tooltip.transparent-theme [x-circle] {
833 background-color: rgba(0, 0, 0, 0.7);
834 }
835 .tippy-popper[x-placement^='left'] .tippy-tooltip.transparent-theme [x-arrow] {
836 border-left: 7px solid rgba(0, 0, 0, 0.7);
837 border-top: 7px solid transparent;
838 border-bottom: 7px solid transparent;
839 }
840 .tippy-popper[x-placement^='left']
841 .tippy-tooltip.transparent-theme
842 [x-arrow].arrow-small {
843 border-left: 5px solid rgba(0, 0, 0, 0.7);
844 border-top: 5px solid transparent;
845 border-bottom: 5px solid transparent;
846 }
847 .tippy-popper[x-placement^='left']
848 .tippy-tooltip.transparent-theme
849 [x-arrow].arrow-big {
850 border-left: 10px solid rgba(0, 0, 0, 0.7);
851 border-top: 10px solid transparent;
852 border-bottom: 10px solid transparent;
853 }
854 .tippy-popper[x-placement^='left'] [data-animation='perspective'] {
855 -webkit-transform-origin: right;
856 transform-origin: right;
857 }
858 .tippy-popper[x-placement^='left'] [data-animation='perspective'].enter {
859 opacity: 1;
860 -webkit-transform: translateX(-10px) rotateY(0);
861 transform: translateX(-10px) rotateY(0);
862 }
863 .tippy-popper[x-placement^='left'] [data-animation='perspective'].leave {
864 opacity: 0;
865 -webkit-transform: translateX(0) rotateY(-90deg);
866 transform: translateX(0) rotateY(-90deg);
867 }
868 .tippy-popper[x-placement^='left'] [data-animation='fade'].enter {
869 opacity: 1;
870 -webkit-transform: translateX(-10px);
871 transform: translateX(-10px);
872 }
873 .tippy-popper[x-placement^='left'] [data-animation='fade'].leave {
874 opacity: 0;
875 -webkit-transform: translateX(-10px);
876 transform: translateX(-10px);
877 }
878 .tippy-popper[x-placement^='left'] [data-animation='shift'].enter {
879 opacity: 1;
880 -webkit-transform: translateX(-10px);
881 transform: translateX(-10px);
882 }
883 .tippy-popper[x-placement^='left'] [data-animation='shift'].leave {
884 opacity: 0;
885 -webkit-transform: translateX(0);
886 transform: translateX(0);
887 }
888 .tippy-popper[x-placement^='left'] [data-animation='scale'].enter {
889 opacity: 1;
890 -webkit-transform: translateX(-10px) scale(1);
891 transform: translateX(-10px) scale(1);
892 }
893 .tippy-popper[x-placement^='left'] [data-animation='scale'].leave {
894 opacity: 0;
895 -webkit-transform: translateX(0) scale(0);
896 transform: translateX(0) scale(0);
897 }
898 .tippy-popper[x-placement^='right'] [x-arrow] {
899 border-right: 7px solid #333;
900 border-top: 7px solid transparent;
901 border-bottom: 7px solid transparent;
902 left: -7px;
903 margin: 6px 0;
904 }
905 .tippy-popper[x-placement^='right'] [x-arrow].arrow-small {
906 border-right: 5px solid #333;
907 border-top: 5px solid transparent;
908 border-bottom: 5px solid transparent;
909 left: -5px;
910 }
911 .tippy-popper[x-placement^='right'] [x-arrow].arrow-big {
912 border-right: 10px solid #333;
913 border-top: 10px solid transparent;
914 border-bottom: 10px solid transparent;
915 left: -10px;
916 }
917 .tippy-popper[x-placement^='right'] [x-circle] {
918 -webkit-transform-origin: -50% 0;
919 transform-origin: -50% 0;
920 }
921 .tippy-popper[x-placement^='right'] [x-circle].enter {
922 -webkit-transform: scale(1) translate(-50%, -50%);
923 transform: scale(1) translate(-50%, -50%);
924 opacity: 1;
925 }
926 .tippy-popper[x-placement^='right'] [x-circle].leave {
927 -webkit-transform: scale(0.15) translate(-50%, -50%);
928 transform: scale(0.15) translate(-50%, -50%);
929 opacity: 0;
930 }
931 .tippy-popper[x-placement^='right'] .tippy-tooltip.light-theme [x-circle] {
932 background-color: #fff;
933 }
934 .tippy-popper[x-placement^='right'] .tippy-tooltip.light-theme [x-arrow] {
935 border-right: 7px solid #fff;
936 border-top: 7px solid transparent;
937 border-bottom: 7px solid transparent;
938 }
939 .tippy-popper[x-placement^='right']
940 .tippy-tooltip.light-theme
941 [x-arrow].arrow-small {
942 border-right: 5px solid #fff;
943 border-top: 5px solid transparent;
944 border-bottom: 5px solid transparent;
945 }
946 .tippy-popper[x-placement^='right']
947 .tippy-tooltip.light-theme
948 [x-arrow].arrow-big {
949 border-right: 10px solid #fff;
950 border-top: 10px solid transparent;
951 border-bottom: 10px solid transparent;
952 }
953 .tippy-popper[x-placement^='right']
954 .tippy-tooltip.transparent-theme
955 [x-circle] {
956 background-color: rgba(0, 0, 0, 0.7);
957 }
958 .tippy-popper[x-placement^='right'] .tippy-tooltip.transparent-theme [x-arrow] {
959 border-right: 7px solid rgba(0, 0, 0, 0.7);
960 border-top: 7px solid transparent;
961 border-bottom: 7px solid transparent;
962 }
963 .tippy-popper[x-placement^='right']
964 .tippy-tooltip.transparent-theme
965 [x-arrow].arrow-small {
966 border-right: 5px solid rgba(0, 0, 0, 0.7);
967 border-top: 5px solid transparent;
968 border-bottom: 5px solid transparent;
969 }
970 .tippy-popper[x-placement^='right']
971 .tippy-tooltip.transparent-theme
972 [x-arrow].arrow-big {
973 border-right: 10px solid rgba(0, 0, 0, 0.7);
974 border-top: 10px solid transparent;
975 border-bottom: 10px solid transparent;
976 }
977 .tippy-popper[x-placement^='right'] [data-animation='perspective'] {
978 -webkit-transform-origin: left;
979 transform-origin: left;
980 }
981 .tippy-popper[x-placement^='right'] [data-animation='perspective'].enter {
982 opacity: 1;
983 -webkit-transform: translateX(10px) rotateY(0);
984 transform: translateX(10px) rotateY(0);
985 }
986 .tippy-popper[x-placement^='right'] [data-animation='perspective'].leave {
987 opacity: 0;
988 -webkit-transform: translateX(0) rotateY(90deg);
989 transform: translateX(0) rotateY(90deg);
990 }
991 .tippy-popper[x-placement^='right'] [data-animation='fade'].enter {
992 opacity: 1;
993 -webkit-transform: translateX(10px);
994 transform: translateX(10px);
995 }
996 .tippy-popper[x-placement^='right'] [data-animation='fade'].leave {
997 opacity: 0;
998 -webkit-transform: translateX(10px);
999 transform: translateX(10px);
1000 }
1001 .tippy-popper[x-placement^='right'] [data-animation='shift'].enter {
1002 opacity: 1;
1003 -webkit-transform: translateX(10px);
1004 transform: translateX(10px);
1005 }
1006 .tippy-popper[x-placement^='right'] [data-animation='shift'].leave {
1007 opacity: 0;
1008 -webkit-transform: translateX(0);
1009 transform: translateX(0);
1010 }
1011 .tippy-popper[x-placement^='right'] [data-animation='scale'].enter {
1012 opacity: 1;
1013 -webkit-transform: translateX(10px) scale(1);
1014 transform: translateX(10px) scale(1);
1015 }
1016 .tippy-popper[x-placement^='right'] [data-animation='scale'].leave {
1017 opacity: 0;
1018 -webkit-transform: translateX(0) scale(0);
1019 transform: translateX(0) scale(0);
1020 }
1021 .tippy-popper .tippy-tooltip.transparent-theme {
1022 background-color: rgba(0, 0, 0, 0.7);
1023 }
1024 .tippy-popper .tippy-tooltip.transparent-theme[data-animatefill] {
1025 background-color: transparent;
1026 }
1027 .tippy-popper .tippy-tooltip.light-theme {
1028 color: #26323d;
1029 box-shadow: 0 4px 20px 4px rgba(0, 20, 60, 0.1),
1030 0 4px 80px -8px rgba(0, 20, 60, 0.2);
1031 background-color: #fff;
1032 }
1033 .tippy-popper .tippy-tooltip.light-theme[data-animatefill] {
1034 background-color: transparent;
1035 }
1036 .tippy-tooltip {
1037 position: relative;
1038 color: #fff;
1039 border-radius: 4px;
1040 font-size: 0.95rem;
1041 padding: 0.4rem 0.8rem;
1042 text-align: center;
1043 will-change: transform;
1044 -webkit-font-smoothing: antialiased;
1045 -moz-osx-font-smoothing: grayscale;
1046 background-color: #333;
1047 }
1048 .tippy-tooltip--small {
1049 padding: 0.25rem 0.5rem;
1050 font-size: 0.8rem;
1051 }
1052 .tippy-tooltip--big {
1053 padding: 0.6rem 1.2rem;
1054 font-size: 1.2rem;
1055 }
1056 .tippy-tooltip[data-animatefill] {
1057 overflow: hidden;
1058 background-color: transparent;
1059 }
1060 .tippy-tooltip[data-interactive] {
1061 pointer-events: auto;
1062 }
1063 .tippy-tooltip[data-inertia] {
1064 transition-timing-function: cubic-bezier(0.53, 2, 0.36, 0.85);
1065 }
1066 .tippy-tooltip [x-arrow] {
1067 position: absolute;
1068 width: 0;
1069 height: 0;
1070 }
1071 .tippy-tooltip [x-circle] {
1072 position: absolute;
1073 will-change: transform;
1074 background-color: #333;
1075 border-radius: 50%;
1076 width: 130%;
1077 width: calc(110% + 2rem);
1078 left: 50%;
1079 top: 50%;
1080 z-index: -1;
1081 overflow: hidden;
1082 transition: all ease;
1083 }
1084 .tippy-tooltip [x-circle]:before {
1085 content: '';
1086 padding-top: 90%;
1087 float: left;
1088 }
1089 @media (max-width: 450px) {
1090 .tippy-popper {
1091 max-width: 96%;
1092 max-width: calc(100% - 20px);
1093 }
1094 }
1095
1096 /* Global style for option field - start */
1097 .yaye-content-wrap.global-style-wrap .components-panel {
1098 margin-top: 30px;
1099 margin-bottom: 30px;
1100 border-radius: 4px;
1101 }
1102 .yaye-content-wrap.global-style-wrap
1103 .components-panel__body.is-opened
1104 > .components-panel__body-title {
1105 margin: -16px -16px -1px;
1106 /* background-color: #f0f0f0; */
1107 border-bottom: 1px solid #f0f0f0;
1108 }
1109 /* .yaye-content-wrap.global-style-wrap
1110 .components-panel__body.is-opened
1111 div.components-panel__row {
1112 padding-top: 13px;
1113 flex-wrap: wrap;
1114 row-gap: 12px;
1115 } */
1116 .yaye-content-wrap.global-style-wrap .components-panel__row {
1117 /* padding-top: 13px; */
1118 justify-content: unset;
1119 }
1120 .components-panel__row {
1121 margin-top: 0 !important;
1122 margin-bottom: 12px;
1123 gap: 24px;
1124 }
1125 .yaye-content-wrap.global-style-wrap .components-panel__icon {
1126 position: absolute;
1127 }
1128 .yaye-content-wrap.global-style-wrap
1129 .components-panel__body-toggle
1130 span:first-child {
1131 margin-left: 35px;
1132 }
1133 .yaye-unit-input
1134 .components-input-control__suffix
1135 .components-unit-control__select,
1136 .yaye-unit-limit-discount
1137 .components-input-control__suffix
1138 .components-unit-control__select {
1139 font-size: 10px !important;
1140 font-weight: 500;
1141 margin-right: 3px;
1142 }
1143 .yaye-content-wrap.global-style-wrap .yaye-unit-select-base-control,
1144 .yaye-content-wrap.global-style-wrap .yaye-color-picker {
1145 width: 30%;
1146 margin-right: 3%;
1147 }
1148 .yaye-content-wrap.global-style-wrap .components-input-control__backdrop {
1149 border-color: hsl(0, 0%, 80%) !important;
1150 min-height: 32px !important;
1151 border-radius: 3px !important;
1152 }
1153 .yaye-content-wrap.global-style-wrap .components-base-control__label {
1154 font-weight: inherit;
1155 }
1156 .yaye-content-wrap.global-style-wrap
1157 .yaye-color-picker
1158 .components-base-control__field {
1159 display: inline-grid;
1160 }
1161 .yaye-setting-disable .wp-color-result-text,
1162 .yaye-setting-disable {
1163 color: rgb(141, 150, 160);
1164 }
1165 .yaye-unit-input input:disabled {
1166 border-color: rgb(141, 150, 160);
1167 }
1168 /* Global style for option field - end */
1169
1170 .yaye-content-wrap .components-radio-control__option:not(:last-child) {
1171 margin-bottom: 10px;
1172 }
1173
1174 .yaye-flex-row {
1175 display: flex;
1176 }
1177 .yaye-flex-column {
1178 display: flex;
1179 flex-direction: column;
1180 }
1181
1182 @media (max-width: 800px) {
1183 .product-condition-logics-wrap > .conditional-logics-el > .components-grid {
1184 grid-template-columns: 1fr 1fr !important;
1185 gap: 0 calc(20px) !important;
1186 }
1187 }
1188
1189 @media (max-width: 782px) {
1190 .yaye-optset-el-wrap .yaye__indicators {
1191 height: initial;
1192 }
1193 .yaye-sticky-header {
1194 top: 46px;
1195 }
1196 }
1197
1198 @media (max-width: 600px) {
1199 .yaye-sticky-header {
1200 top: 0 !important;
1201 }
1202 }
1203
1204 @media (max-width: 599px) {
1205 .yaye-optset-el-wrap input,
1206 .yaye-optset-el-wrap textarea {
1207 font-size: 13px !important;
1208 }
1209 }
1210
1211 #yaye-custom-css-wrap .ace_print-margin {
1212 display: none;
1213 }
1214
1215 /** Adjust ace editor css */
1216 .ace_comment.ace_placeholder {
1217 font-size: 14px;
1218 }
1219
1220 .yaye-content-wrap.option-sets-wrap .checkbox-bulk-action-wrap {
1221 position: relative;
1222 display: inline-block;
1223 }
1224 .yaye-content-wrap.option-sets-wrap .woocommerce-table__header .checkbox-bulk-action-wrap svg {
1225 margin-left: -6px;
1226 margin-bottom: -2px;
1227 cursor: pointer;
1228 }
1229 .yaye-content-wrap.option-sets-wrap .woocommerce-table__header .checkbox-bulk-action-wrap .gridicon {
1230 transform: rotate(90deg);
1231 }
1232 .yaye-content-wrap.option-sets-wrap .bulk-action-wrap {
1233 left: 0%;
1234 top: 90%;
1235 box-sizing: border-box;
1236 margin: 0;
1237 padding: 0;
1238 color: rgba(0, 0, 0, 0.65);
1239 font-size: 13px;
1240 font-variant: tabular-nums;
1241 line-height: 1.5;
1242 list-style: none;
1243 font-feature-settings: "tnum";
1244 position: absolute;
1245 z-index: 1050;
1246 display: none;
1247 }
1248 .yaye-content-wrap.option-sets-wrap .bulk-action-wrap .bulk-action-control {
1249 position: relative;
1250 margin: 0;
1251 padding: 4px 0;
1252 text-align: left;
1253 list-style-type: none;
1254 background-color: #fff;
1255 background-clip: padding-box;
1256 border-radius: 3px;
1257 outline: none;
1258 box-shadow: 0 2px 8px rgb(0 0 0 / 15%);
1259 -webkit-transform: translate3d(0, 0, 0);
1260 }
1261 .yaye-content-wrap.option-sets-wrap .bulk-action-control .action-control-item {
1262 clear: both;
1263 margin: 0;
1264 padding: 5px 12px;
1265 color: rgba(0, 0, 0, 0.65);
1266 font-weight: normal;
1267 font-size: 14px;
1268 line-height: 22px;
1269 white-space: nowrap;
1270 cursor: pointer;
1271 transition: all 0.3s;
1272 }
1273 .yaye-content-wrap.option-sets-wrap .checkbox-bulk-action-wrap:hover .bulk-action-wrap {
1274 display: block;
1275 }
1276 .yaye-content-wrap.option-sets-wrap .bulk-action-control .action-control-item:hover {
1277 color: #ffffff;
1278 background-color: var(--primary) !important;
1279 }
1280
1281 .yaye-option-sets-bulk-actions {
1282 display: flex;
1283 gap: 5px;
1284 }
1285
1286 .yaye-option-sets-bulk-actions > button{
1287 height: 30px;
1288 }
1289
1290 .yaye-content-wrap.products-wrap .prod-cond-one-by-one .woocommerce-table__table table tr > th:first-child{
1291 width: 50px;
1292 }
1293 .yaye-content-wrap.products-wrap .prod-cond-one-by-one .woocommerce-table__table table tr > th:nth-child(3),
1294 .yaye-content-wrap.products-wrap .prod-cond-one-by-one .woocommerce-table__table table tr > th:nth-child(4){
1295 width: 200px;
1296 }
1297 .yaye-content-wrap.option-sets-wrap .woocommerce-table__table table tr > th:first-child,
1298 .yaye-content-wrap.option-sets-wrap .woocommerce-table__table table tr > th:nth-child(2){
1299 width: 50px;
1300 }
1301
1302
1303 .components-base-control__label{
1304 text-transform: none !important;
1305 }
1306 .yaye-content-wrap .advanced-settings-tab-wrap .advanced-settings-tab-content {
1307 width: calc(var(--spacing-step) * 56);
1308 display: grid;
1309 grid-template-columns: repeat(2, 300px);
1310 grid-gap: 10px 30px;
1311 }
1312 .yaye-content-wrap
1313 .advanced-settings-tab-wrap
1314 .advanced-settings-tab-content
1315 .components-base-control {
1316 margin-bottom: unset;
1317 }
1318 .advanced-settings-tab-content .yaye-basic-select{
1319 width: 100%;
1320 }
1321
1322 @media (max-width: 850px) {
1323 .yaye-content-wrap .advanced-settings-tab-wrap .advanced-settings-tab-content{
1324 grid-template-columns: 1fr;
1325 }
1326 }
1327 .yaye-badge {
1328 display: inline-block;
1329 vertical-align: initial;
1330 box-sizing: border-box;
1331 margin-left: 5px;
1332 padding: 0 10px;
1333 min-width: 18px;
1334 height: 18px;
1335 border-radius: 9px;
1336 color: rgb(32, 34, 35);
1337 font-size: 11px;
1338 line-height: 1.6;
1339 text-align: center;
1340 background-color: #e4e5e7;
1341 }
1342
1343 .yaye-upgrade-badge {
1344 color: #fff !important;
1345 background-color: #007cba !important;
1346 }
1347
1348 .yaye-color-preview {
1349 border-radius: calc(var(--spacing-step) * 1);
1350 height: calc(var(--spacing-step) * 7);
1351 width: calc(var(--spacing-step) * 7);
1352 cursor: pointer;
1353 position: relative;
1354 }
1355
1356
1357 /* *,
1358 *::before,
1359 *::after {
1360 box-sizing: content-box !important;
1361 } */
1362 /* .wp-color-result {
1363 margin: 0 !important;
1364 } */
1365 .yaye-custom-color-picker {
1366 padding: 0 10px 0 0 !important;
1367 display: flex !important;
1368 position: relative;
1369 }
1370 .yaye-custom-color-picker .yaye-choose-color {
1371 width: 30px;
1372 height: 30px;
1373 margin-right: 5px;
1374 border-radius: 2px;
1375 }
1376
1377 .yaye-sketch-picker {
1378 position: absolute;
1379 z-index: 999;
1380 top: calc(100% + 10px);
1381 left: 0;
1382 }
1383
1384 .yaye-custom-color-picker.disabled .yaye-choose-color{
1385 border-right: 1px solid #dcdcde;
1386 background-color: #f6f7f7!important;
1387 }
1388
1389 .yaye-content-wrap
1390 .option-values-tab-wrap
1391 .option-values-tab-content__option-value {
1392 align-items: flex-start;
1393 display: flex;
1394 flex-wrap: wrap;
1395 gap: calc(var(--spacing-step) * 4);
1396 justify-content: flex-start;
1397 align-items: center;
1398 margin-bottom: 1.5rem;
1399 }
1400
1401 .option-values-tab-content__option-value .components-base-control,
1402 .option-values-tab-content__option-value .components-base-control__field,
1403 .option-values-tab-content__additional__tabs__tab-content__cost-value
1404 .components-base-control,
1405 .option-values-tab-content__additional__tabs__tab-content__cost-value
1406 .components-base-control__field {
1407 margin-bottom: 0 !important;
1408 }
1409
1410 .yaye-content-wrap
1411 .option-values-tab-wrap
1412 .option-values-tab-content__option-value
1413 .components-base-control {
1414 min-width: calc(var(--spacing-step) * 68);
1415 }
1416
1417 .yaye-content-wrap
1418 .option-values-tab-wrap
1419 .option-values-tab-content__option-value__actions {
1420 align-items: center;
1421 display: flex;
1422 gap: calc(var(--spacing-step) * 4);
1423 }
1424
1425 .yaye-content-wrap
1426 .option-values-tab-wrap
1427 .option-values-tab-content__option-value__actions--duplicate {
1428 color: var(--primary);
1429 cursor: pointer;
1430 margin-top: calc(var(--spacing-step) * 0.5);
1431 }
1432
1433 .yaye-content-wrap
1434 .option-values-tab-wrap
1435 .option-values-tab-content__option-value__actions--delete {
1436 color: var(--red);
1437 cursor: pointer;
1438 }
1439
1440 .yaye-content-wrap
1441 .option-values-tab-wrap
1442 .option-values-tab-content__additional__tabs {
1443 align-items: center;
1444 display: flex;
1445 gap: calc(var(--spacing-step) * 4);
1446 margin: calc(var(--spacing-step) * 4) 0;
1447 }
1448 .yaye-content-wrap
1449 .option-values-tab-wrap
1450 .option-values-tab-content__additional__tabs__tab-item {
1451 cursor: pointer;
1452 }
1453
1454 .yaye-content-wrap
1455 .option-values-tab-wrap
1456 .option-values-tab-content__additional__tabs__tab-item.disabled {
1457 cursor: initial;
1458 }
1459 .yaye-content-wrap
1460 .option-values-tab-wrap
1461 .option-values-tab-content__additional__tabs__tab-item.disabled > .dashicon {
1462 color: var(--gray);
1463 }
1464 .yaye-content-wrap
1465 .option-values-tab-wrap
1466 .option-values-tab-content__additional__tabs__tab-item.disabled > .option-values-tab-content__additional__tabs__tab-item--text {
1467 color: var(--gray);
1468 cursor: initial;
1469 }
1470 .yaye-content-wrap
1471 .option-values-tab-wrap
1472 .option-values-tab-content__additional__tabs__tab-item.disabled > .yaye-pro-version-notice-text {
1473 margin-left: 0;
1474 }
1475
1476 .yaye-content-wrap
1477 .option-values-tab-wrap
1478 .option-values-tab-content__additional__tabs__tab-item--text {
1479 color: var(--primary);
1480 cursor: pointer;
1481 position: relative;
1482 }
1483 .yaye-content-wrap
1484 .option-values-tab-wrap
1485 .option-values-tab-content__additional
1486 span.dashicon {
1487 color: var(--primary);
1488 }
1489
1490 .yaye-content-wrap
1491 .option-values-tab-wrap
1492 .option-values-tab-content__additional__tabs__tab-item.active
1493 .option-values-tab-content__additional__tabs__tab-item--text {
1494 color: var(--black);
1495 text-decoration: underline;
1496 text-underline-offset: var(--spacing-step);
1497 }
1498
1499 .yaye-content-wrap
1500 .option-values-tab-wrap
1501 .option-values-tab-content__additional__tabs__tab-item.active
1502 span.dashicon {
1503 color: black;
1504 }
1505
1506 .yaye-content-wrap
1507 .option-values-tab-wrap
1508 .option-values-tab-content__additional__tabs__tab-content {
1509 padding-left: calc(var(--spacing-step) * 4);
1510 }
1511
1512 .yaye-content-wrap
1513 .option-values-tab-wrap
1514 .option-values-tab-content__additional__tabs__tab-content__cost-value {
1515 align-items: flex-end;
1516 display: flex;
1517 flex-wrap: wrap;
1518 gap: calc(var(--spacing-step) * 4);
1519 }
1520
1521 .yaye-content-wrap
1522 .option-values-tab-wrap
1523 .option-values-tab-content__additional__tabs__tab-content__cost-value
1524 .yaye-basic-select {
1525 margin: 0;
1526 }
1527
1528 .yaye-content-wrap .option-values-tab-wrap .option-values-tab-content__divider {
1529 margin: calc(var(--spacing-step) * 8) 0;
1530 }
1531
1532 .option-values-tab-content__option-value--uploadFile {
1533 align-items: center;
1534 display: flex;
1535 gap: calc(var(--spacing-step) * 3);
1536 }
1537 .option-values-tab-content__option-value--uploadFile {
1538 position: relative;
1539 }
1540 .wp-picker-input-wrap {
1541 /* position: absolute;
1542 z-index: 101;
1543 top: 45px;
1544 left: 10px; */
1545 display: none !important;
1546 }
1547 .wp-picker-holder {
1548 position: absolute;
1549 z-index: 100;
1550 }
1551
1552 /* .wp-picker-holder .iris-picker{
1553 height: 240px !important;
1554 }
1555
1556 .wp-picker-holder .iris-border .iris-picker-inner{
1557 top: 45px !important;
1558 } */
1559
1560 .yaye-preview-active::after {
1561 content: '';
1562 width: 10px;
1563 height: 10px;
1564 background-color: green;
1565 position: absolute;
1566 border-radius: 50px;
1567 border: 1px solid white;
1568 top: -5px;
1569 right: -5px;
1570 }
1571
1572 .yaye-value-additional-enabled::after {
1573 content: '';
1574 width: 10px;
1575 height: 10px;
1576 background-color: green;
1577 position: absolute;
1578 border-radius: 50px;
1579 border: 1px solid white;
1580 top: -5px;
1581 left: -10px;
1582 }
1583
1584 .yaye-content-wrap
1585 .conditional-logics-tab-wrap
1586 .conditional-logics-content__text {
1587 align-items: center;
1588 display: flex;
1589 flex-wrap: wrap;
1590 gap: calc(var(--spacing-step) * 2);
1591 }
1592
1593 .conditional-logics-content__text .components-base-control,
1594 .conditional-logics-content__text .components-base-control__field,
1595 .conditional-logics-content__selects .components-base-control,
1596 .conditional-logics-content__selects .components-base-control__field {
1597 margin-bottom: 0 !important;
1598 }
1599
1600 .yaye-content-wrap
1601 .conditional-logics-tab-wrap
1602 .conditional-logics-content__selects {
1603 align-items: center;
1604 display: flex;
1605 flex-wrap: wrap;
1606 gap: calc(var(--spacing-step) * 8);
1607 /* justify-content: space-between; */
1608 margin: calc(var(--spacing-step) * 6) 0;
1609 }
1610
1611 .yaye-content-wrap
1612 .conditional-logics-tab-wrap
1613 .conditional-logics-content__text
1614 .components-base-control {
1615 min-width: calc(var(--spacing-step) * 25);
1616 }
1617
1618 .yaye-content-wrap
1619 .conditional-logics-tab-wrap
1620 .conditional-logics-content__selects
1621 .components-base-control {
1622 min-width: calc(var(--spacing-step) * 80);
1623 }
1624
1625 .yaye-content-wrap
1626 .conditional-logics-tab-wrap
1627 .conditional-logics-content__selects
1628 .yaye-basic-select {
1629 margin: 0;
1630 min-width: calc(var(--spacing-step) * 80);
1631 }
1632
1633 .yaye-content-wrap
1634 .conditional-logics-tab-wrap
1635 .conditional-logics-content__selects--delete {
1636 color: var(--red);
1637 cursor: pointer;
1638 }
1639
1640 .yaye-content-wrap .conditional-logics-content__add-new-button {
1641 margin-top: calc(var(--spacing-step) * 4);
1642 }
1643
1644 .options-wrap > details > summary {
1645 list-style: none;
1646 }
1647 .options-wrap > details > summary::-webkit-details-marker {
1648 display: none;
1649 }
1650
1651 .options-wrap .yaye-option {
1652 border: 1px solid var(--gray);
1653 border-radius: 4px;
1654 box-shadow: var(--box-shadow);
1655 margin-bottom: calc(var(--spacing-step) * 6);
1656 padding: 10px 15px;
1657 background-color: white;
1658 }
1659
1660 .options-wrap .yaye-option summary {
1661 align-items: center;
1662 cursor: pointer;
1663 display: flex;
1664 justify-content: space-between;
1665 }
1666
1667 .options-wrap .yaye-option__title {
1668 align-items: center;
1669 display: flex;
1670 gap: calc(var(--spacing-step) * 4);
1671 }
1672
1673 .yaye-option__title--drag-drop {
1674 cursor: grab;
1675 }
1676
1677 .options-wrap .yaye-option__title--name h4 {
1678 margin: calc(var(--spacing-step) * 1) 0;
1679 }
1680
1681 .options-wrap .yaye-option__actions {
1682 align-items: center;
1683 display: flex;
1684 gap: calc(var(--spacing-step) * 4);
1685 }
1686
1687 .options-wrap .yaye-option__actions--duplicate {
1688 color: var(--primary);
1689 }
1690
1691 .options-wrap .yaye-option__actions--delete {
1692 color: var(--red);
1693 }
1694
1695 .options-wrap .yaye-option__content__option-basic-info {
1696 width: 70%;
1697 }
1698
1699 .options-wrap .yaye-option__content__option-basic-info__option-name {
1700 align-items: center;
1701 /* display: flex; */
1702 gap: calc(var(--spacing-step) * 4);
1703 display: grid;
1704 grid-template-columns: 20rem 1fr;
1705 justify-content: flex-start;
1706 margin-bottom: calc(var(--spacing-step) * 5);
1707 }
1708
1709 .tab-panel-advanced-setting-tabitem .yaye-basic-select{
1710 width: 100%;
1711 }
1712
1713 .options-wrap
1714 .yaye-option__content__option-basic-info__option-name
1715 .components-base-control,
1716 .options-wrap
1717 .yaye-option__content__option-basic-info__option-name
1718 .components-base-control__field {
1719 margin-bottom: 0 !important;
1720 }
1721
1722 .options-wrap .yaye-option__content__option-basic-info__option-name--checkbox {
1723 margin-bottom: 0 !important;
1724 }
1725
1726 .options-wrap .yaye-option__content__option-basic-info__option-type {
1727 /* width: calc(var(--spacing-step) * 56); */
1728 display: grid;
1729 grid-template-columns: 20rem 1fr;
1730 }
1731
1732 .options-wrap .yaye-option__content__option-basic-info__option-type .yaye-basic-select{
1733 width: 100%;
1734 }
1735
1736 .options-wrap .yaye-option__divider {
1737 margin: calc(var(--spacing-step) * 4) 0;
1738 }
1739
1740 .options-wrap .yaye-options__add-new-button {
1741 margin: calc(var(--spacing-step) * 4);
1742 text-align: center;
1743 }
1744
1745 .options-wrap .options-wrap label {
1746 font-weight: 500;
1747 }
1748
1749 .options-wrap .yaye-option__title--name--swatch-type {
1750 align-items: center;
1751 display: flex;
1752 gap: calc(var(--spacing-step) * 2);
1753 height: calc(var(--spacing-step) * 5);
1754 }
1755
1756 .options-wrap .yaye-option__title--name--swatch-type span {
1757 border: 1px solid var(--gray);
1758 border-radius: 100%;
1759 background-color: var(--primary);
1760 display: inline-block;
1761 height: 20px;
1762 width: 20px;
1763 }
1764
1765 .yaye-icon-drag {
1766 opacity: 0.6;
1767 transition: 0.4s all;
1768 }
1769
1770 .yaye-icon-drag:hover {
1771 opacity: 1;
1772 }
1773
1774 .yaye-option-type-wrapper{
1775 display: flex;
1776 align-items:center;
1777 gap:4px;
1778 filter:invert(46%) sepia(58%) saturate(3411%) hue-rotate(202deg) brightness(97%) contrast(98%);
1779 margin: 3px;
1780 }
1781
1782 .yaye-option-type-wrapper > img{
1783 width: 24px;
1784 height: 24px;
1785 }
1786 .actions-wrap > details > summary {
1787 list-style: none;
1788 }
1789
1790 .actions-wrap > details > summary::-webkit-details-marker {
1791 display: none;
1792 }
1793
1794 .actions-wrap .yaye-action {
1795 border: 1px solid var(--gray);
1796 border-radius: 4px;
1797 box-shadow: var(--box-shadow);
1798 margin-bottom: calc(var(--spacing-step) * 6);
1799 padding: calc(var(--spacing-step) * 5);
1800 }
1801
1802 .actions-wrap .yaye-action summary {
1803 align-items: center;
1804 cursor: pointer;
1805 display: flex;
1806 justify-content: space-between;
1807 }
1808
1809 .actions-wrap .yaye-action__title {
1810 align-items: center;
1811 display: flex;
1812 gap: var(--spacing-step);
1813 }
1814
1815 .actions-wrap .yaye-action__actions {
1816 align-items: center;
1817 display: flex;
1818 gap: calc(var(--spacing-step) * 4);
1819 }
1820
1821 .yaye-action__content .components-base-control,
1822 .yaye-action__content .components-base-control__field {
1823 margin-bottom: 0 !important;
1824 }
1825
1826 .actions-wrap .yaye-action__actions--duplicate {
1827 color: var(--primary);
1828 }
1829
1830 .actions-wrap .yaye-action__actions--delete {
1831 color: var(--red);
1832 cursor: pointer;
1833 }
1834
1835 .actions-wrap .yaye-action__content {
1836 display: flex;
1837 flex-direction: column;
1838 gap: calc(var(--spacing-step) * 4);
1839 }
1840
1841 .actions-wrap .yaye-action__content__if-statement--if-text,
1842 .actions-wrap .yaye-action__content__then-statement--then-text {
1843 background: #3b82f6;
1844 border-radius: 4px;
1845 color: var(--white);
1846 padding: calc(var(--spacing-step) * 2);
1847 }
1848
1849 .actions-wrap .yaye-action__content__if-statement,
1850 .actions-wrap .yaye-action__content__then-statement {
1851 align-items: center;
1852 display: flex;
1853 flex-wrap: wrap;
1854 gap: calc(var(--spacing-step) * 2);
1855 }
1856
1857 .actions-wrap .yaye-action__content__conditional-logics {
1858 align-items: center;
1859 display: flex;
1860 flex-wrap: wrap;
1861 gap: calc(var(--spacing-step) * 10);
1862 }
1863
1864 .yaye-action__content__conditional-logics .components-base-control,
1865 .yaye-action__content__then-actions .components-base-control {
1866 min-width: calc(var(--spacing-step) * 80);
1867 }
1868
1869 .yaye-action__content__conditional-logics .yaye-basic-select,
1870 .yaye-action__content__then-actions .yaye-basic-select {
1871 margin: 0;
1872 min-width: calc(var(--spacing-step) * 80);
1873 }
1874
1875 .actions-wrap .yaye-actions__add-new-button {
1876 margin: calc(var(--spacing-step) * 4);
1877 text-align: center;
1878 }
1879
1880 .actions-wrap .yaye-action__divider {
1881 margin: calc(var(--spacing-step) * 4) 0;
1882 }
1883
1884 .actions-wrap .yaye-action__content__then-actions {
1885 align-items: center;
1886 display: flex;
1887 flex-wrap: wrap;
1888 gap: calc(var(--spacing-step) * 10);
1889 }
1890
1891 .yaye-content-wrap.products-wrap
1892 .components-radio-control__option:not(:last-child) {
1893 margin-top: 10px;
1894 margin-bottom: 20px;
1895 }
1896 .yaye-content-wrap.products-wrap .components-radio-control__option {
1897 margin-left: 15px;
1898 }
1899 .yaye-content-wrap.products-wrap .item-to-get-option {
1900 border-bottom: 1px solid #dcdcde;
1901 padding-bottom: 24px;
1902 }
1903 .yaye-content-wrap.products-wrap
1904 .prod-cond-choose-by-conditions
1905 .product-condition-logics-wrap {
1906 /* border-bottom: 1px solid #dcdcde; */
1907 /* padding-bottom: 30px; */
1908 }
1909 .yaye-content-wrap.products-wrap .item-option-contents {
1910 margin-top: 30px;
1911 }
1912
1913 .yaye-product-list-wrap table tr:nth-child(n + 1) {
1914 border-bottom: 1px solid #eeeeef;
1915 }
1916
1917 .yaye-product-list-wrap table tr:last-child {
1918 border-bottom: initial;
1919 }
1920
1921 .yaye-product-list-wrap .product-list-search {
1922 margin-top: 30px;
1923 display: flex;
1924 gap: calc(var(--spacing-step) * 4);
1925 }
1926 .yaye-product-list-wrap .product-list-search .product-list-search-text {
1927 width: 60%;
1928 /* margin-right: 30px; */
1929 }
1930 .yaye-product-list-wrap table .components-checkbox-control__input {
1931 margin-top: 10px;
1932 }
1933 .yaye-product-list-wrap table .woocommerce-tag.assigned .woocommerce-tag__text {
1934 color: #fff;
1935 background: rgb(53, 183, 121);
1936 }
1937 .yaye-product-list-wrap table svg.components-checkbox-control__checked {
1938 top: 9px;
1939 left: 0px;
1940 width: 20px;
1941 height: 20px;
1942 }
1943 .yaye-wrap
1944 .yaye-product-list-conditions-wrap
1945 .woocommerce-table
1946 .components-card__header {
1947 display: grid;
1948 }
1949
1950 .yaye-product-list-conditions-wrap .applied-product-match-text {
1951 display: flex;
1952 align-items: center;
1953 }
1954
1955 .yaye-wrap
1956 .yaye-optset-el-wrap
1957 .applied-product-match-text
1958 .components-base-control,
1959 .yaye-product-list-conditions-wrap
1960 .applied-product-match-text
1961 .components-base-control__field {
1962 margin-bottom: unset;
1963 }
1964 .yaye-product-list-conditions-wrap .woocommerce-table {
1965 margin-top: 30px;
1966 }
1967 .yaye-filter-product-action-button,
1968 .yaye-conditions-action-button {
1969 justify-content: center;
1970 display: inline-flex !important;
1971 text-decoration: none !important;
1972 font-weight: 400;
1973 font-size: 13px !important;
1974 padding: 0 5px !important;
1975 align-items: center;
1976 }
1977 .yaye-product-list-conditions-wrap
1978 .product-condition-logics-wrap
1979 .conditional-logics-el {
1980 margin: 24px 0;
1981 }
1982 .yaye-logic-tag {
1983 padding: 5px 10px;
1984 border-radius: 50px;
1985 background-color: hsl(0, 0%, 90%);
1986 user-select: none;
1987 margin-right: 10px;
1988 display: inline-block;
1989 margin-bottom: 10px;
1990 position: relative;
1991 }
1992 .yaye-logic-tag-remove {
1993 border-radius: 50px;
1994 background-color: #bbbbbb;
1995 width: 20px;
1996 height: 20px;
1997 display: inline-block;
1998 text-align: center;
1999 cursor: pointer;
2000 position: absolute;
2001 top: -5px;
2002 right: -10px;
2003 }
2004 .yaye-product-list-conditions-wrap .yaye-basic-select.yaye-product-filter-val {
2005 max-width: 32rem;
2006 padding: 5px 0;
2007 width: unset;
2008 }
2009 .yaye-product-list-conditions-wrap .yaye-basic-select.product-filter-type,
2010 .yaye-product-list-conditions-wrap .yaye-basic-select.product-filter-condition {
2011 width: unset;
2012 min-width: unset;
2013 }
2014 .yaye-product-list-conditions-wrap .yaye__multi-value {
2015 margin-top: -1px;
2016 }
2017 .button.yaye-set-product-assigned-btn,
2018 .button.yaye-set-product-unassigned-btn {
2019 margin-bottom: 10px;
2020 margin-top: -5px;
2021 }
2022 .button.yaye-set-product-assigned-btn > .dashicon,
2023 .button.yaye-set-product-unassigned-btn > .dashicon {
2024 vertical-align: middle;
2025 }
2026 .yaye-product-list-wrap .components-button-group.yaye-set-product-group-btn {
2027 display: unset;
2028 }
2029 .yaye-product-list-wrap table input[type='checkbox'] {
2030 height: 20px;
2031 width: 20px;
2032 }
2033 .yaye-product-list-wrap table input[type='checkbox']:checked::before {
2034 margin-top: -2px;
2035 margin-left: -4px;
2036 height: 23px;
2037 width: 24px;
2038 }
2039 .yaye-rows-selected {
2040 font-weight: 500;
2041 margin-right: 7px;
2042 }
2043 .yaye-product-list-conditions-wrap .product-condition-group-btn {
2044 margin-bottom: calc(var(--spacing-step) * 2);
2045 }
2046 .yaye-filter-product-action-button span.dashicons-trash::before {
2047 color: var(--red);
2048 }
2049 .yaye-view-matched-products-btn {
2050 /* float: right; */
2051 }
2052 .yaye-matched-products-conditions-table {
2053 display: none;
2054 }
2055
2056 @keyframes rotate {
2057 0% {
2058 transform: rotate(0deg);
2059 }
2060 100% {
2061 transform: rotate(270deg);
2062 }
2063 }
2064
2065 @keyframes growAndShrink {
2066 0%,
2067 100% {
2068 stroke-dashoffset: 200;
2069 }
2070 50% {
2071 stroke-dashoffset: 50;
2072 transform: rotate(135deg);
2073 }
2074 100% {
2075 transform: rotate(450deg);
2076 }
2077 }
2078
2079 .yaye-spinner {
2080 position: absolute;
2081 top: 0;
2082 left: 0;
2083 bottom: 0;
2084 right: 0;
2085 width: 100%;
2086 z-index: 1000;
2087 height: 100%;
2088 background: rgba(255, 255, 255, 0.7);
2089 display: flex;
2090 align-items: center;
2091 justify-content: center;
2092 }
2093
2094 .yaye-spinner .woocommerce-spinner__circle {
2095 stroke-dasharray: 200;
2096 stroke-dashoffset: 0;
2097 transform-origin: center;
2098 animation: growAndShrink 2s ease-in-out infinite;
2099 stroke: #1d2327;
2100 }
2101 .yaye-spinner .woocommerce-spinner {
2102 animation: rotate 2s linear infinite;
2103 width: 40px;
2104 min-width: 40px;
2105 height: 40px;
2106 max-height: 40px;
2107 }
2108
2109 .yaye-skeleton {
2110 background-color: var(--light-gray);
2111 height: calc(var(--spacing-step) * 5);
2112 width: calc(var(--spacing-step) * 50);
2113 }
2114
2115 .components-modal__frame.yaye-modal-wrap {
2116 width: calc((100% - 160px) * 80 / 100);
2117 max-height: calc(100% - 80px);
2118 margin-left: calc(160px + (100%-160px) * 18 / 100 / 2);
2119 }
2120
2121 @media (max-width: 960px) {
2122 .components-modal__frame.yaye-modal-wrap {
2123 width: calc((100% - 36px) * 80 / 100);
2124 margin-left: calc(36px + (100%-36px) * 18 / 100 / 2);
2125 }
2126 }
2127 @media (max-width: 782px) {
2128 .components-modal__frame.yaye-modal-wrap {
2129 width: 80%;
2130 margin-left: 10%;
2131 }
2132 }
2133 @media (max-width: 700px) {
2134 .yaye-modal-wrap .option-set-preview-modal-content > div:first-child {
2135 width: 100% !important;
2136 }
2137 .yaye-modal-wrap .option-set-preview-modal-content > div:nth-child(2) {
2138 width: 100% !important;
2139 }
2140 .yaye-modal-wrap .option-set-preview-modal-content > div:first-child > img {
2141 width: 80% !important;
2142 }
2143 .yaye-modal-wrap .option-set-preview-modal-content {
2144 justify-content: center;
2145 text-align: center;
2146 }
2147 }
2148 @media (max-width: 700px) {
2149 .yaye-modal-wrap .components-modal__header {
2150 width: 80% !important;
2151 left: 10% !important;
2152 }
2153 }
2154
2155 body.mobile.modal-open #wpwrap {
2156 overflow: initial !important;
2157 }
2158 .yaye-modal-wrap .option-set-preview-modal-content {
2159 display: flex;
2160 align-items: center;
2161 padding: 10px 30px;
2162 flex-wrap: wrap;
2163 margin-top: 60px;
2164 }
2165
2166 .yaye-modal-wrap .option-set-preview-modal-content > div:first-child > img {
2167 width: 100%;
2168 }
2169
2170 .yaye-modal-wrap .option-set-preview-modal-content > div:first-child {
2171 width: 40%;
2172 }
2173
2174 .yaye-modal-wrap .option-set-preview-modal-content > div:nth-child(2) {
2175 width: 60%;
2176 }
2177 .yaye-modal-wrap .components-modal__content {
2178 margin-top: initial !important;
2179 position: relative;
2180 }
2181 .yaye-modal-wrap .components-modal__header {
2182 position: fixed !important;
2183 background-color: white;
2184 }
2185
2186 .yaye-option-field-wrap {
2187 margin-bottom: 1em;
2188 }
2189 .yaye-option-field-name {
2190 margin-bottom: 7px;
2191 font-size: 14px;
2192 font-weight: 500;
2193 }
2194 .yaye-opt-button-content {
2195 margin-bottom: 25px;
2196 }
2197 .yaye-opt-button {
2198 display: inline-block;
2199 margin-top: 7px;
2200 }
2201 .yaye-option-field-label.yaye-option-button-label {
2202 margin-right: 10px;
2203 border: 1px solid;
2204 padding: 10px;
2205 cursor: pointer;
2206 }
2207 .yaye-option-field-label.yaye-option-button-label.checked {
2208 background-color: #333333;
2209 border-color: #333333;
2210 color: #ffffff;
2211 }
2212 .yaye-opt-swatches-content {
2213 display: flex;
2214 align-items: center;
2215 }
2216 .yaye-opt-swatches {
2217 display: inline-block;
2218 margin: 6px 10px 6px 3px;
2219 cursor: pointer;
2220 }
2221 .yaye-option-field-swatches-label-image {
2222 background-repeat: no-repeat;
2223 background-size: 38px 38px;
2224 }
2225 .yaye-option-field-swatches-label {
2226 border-radius: 3px;
2227 height: 38px;
2228 width: 38px;
2229 }
2230 .yaye-option-field-swatches-label.checked {
2231 outline: 2px solid;
2232 outline-offset: 1px;
2233 }
2234 .yaye-modal-wrap .components-datetime__time fieldset:first-child,
2235 .yaye-modal-wrap .components-datetime__timezone {
2236 display: none;
2237 }
2238 .yaye-modal-wrap .components-datetime__time fieldset:nth-child(2) {
2239 width: 87px;
2240 }
2241 .yaye-modal-wrap .components-datetime__time {
2242 padding-bottom: unset;
2243 }
2244 .yaye-close-option-set-preview {
2245 margin-top: 30px;
2246 }
2247
2248 .common-settings-row {
2249 display: flex;
2250 align-items: baseline;
2251 justify-content: left;
2252 margin: 0 20px;
2253 font-size: 14px;
2254 }
2255
2256
2257 .common-settings-row-label {
2258 padding: 20px 10px 20px 0;
2259 width: 350px;
2260 }
2261
2262 .global-style-wrap .common-settings-row-label{
2263
2264 width: 200px;
2265
2266 }
2267
2268 .common-settings-row-content {
2269 padding: 15px 10px;
2270 flex: 1;
2271 }
2272
2273 .common-settings-row .yaye-unit-select {
2274 width: 450px;
2275 }
2276
2277 .common-settings-row-content .yaye-status-toggle > .components-base-control__field{
2278 justify-content: initial;
2279 }
2280
2281 @media (max-width: 1200px ) {
2282 .common-settings-row .yaye-unit-select {
2283 width: 300px;
2284 }
2285 }
2286
2287 @media (max-width: 900px ) {
2288 .common-settings-row .yaye-unit-select {
2289 width: 200px;
2290 }
2291 }
2292 @media (max-width: 700px ) {
2293 .common-settings-row .yaye-unit-select {
2294 width: 200px;
2295 }
2296 .common-settings-wrap .common-settings-row{
2297 flex-wrap: wrap;
2298 }
2299 .common-settings-wrap .common-settings-row-label{
2300 width: 100%;
2301 }
2302 .common-settings-wrap .common-settings-row-content{
2303 padding: 0 0 0 30px;
2304 }
2305 }
2306
2307 .common-settings-wrap .common-settings-row-label {
2308 display: flex;
2309 flex-direction: column;
2310 }
2311 .common-settings-wrap .common-settings-row-label .yaye-upgrade-badge {
2312 width: fit-content;
2313 margin-left: 0;
2314 }
2315
2316 .sidebar {
2317 position: sticky;
2318 top: 130px;
2319 }
2320
2321 .sidebar li {
2322 padding: 16px 24px;
2323 font-size: 14px;
2324 color: #3c434a;
2325 display: block;
2326 transition: box-shadow 0.3s;
2327 }
2328
2329 .sidebar li:hover {
2330 /* background-color: var(--light-gray); */
2331 cursor: pointer;
2332 }
2333
2334 .sidebar li.active {
2335 background-color: #f2f2f2;
2336 box-shadow: inset 5px 0px 0px -1px var(--primary);
2337 color: black;
2338 }
2339
2340 .yaye-global-style-grid__sidebar li {
2341 margin: unset;
2342 }
2343
2344 .yaye-global-style-grid__sidebar{
2345 padding: 20px 0;
2346 }
2347 .tippy-box[data-animation=fade][data-state=hidden]{opacity:0}[data-tippy-root]{max-width:calc(100vw - 10px)}.tippy-box{position:relative;background-color:#333;color:#fff;border-radius:4px;font-size:14px;line-height:1.4;white-space:normal;outline:0;transition-property:transform,visibility,opacity}.tippy-box[data-placement^=top]>.tippy-arrow{bottom:0}.tippy-box[data-placement^=top]>.tippy-arrow:before{bottom:-7px;left:0;border-width:8px 8px 0;border-top-color:initial;transform-origin:center top}.tippy-box[data-placement^=bottom]>.tippy-arrow{top:0}.tippy-box[data-placement^=bottom]>.tippy-arrow:before{top:-7px;left:0;border-width:0 8px 8px;border-bottom-color:initial;transform-origin:center bottom}.tippy-box[data-placement^=left]>.tippy-arrow{right:0}.tippy-box[data-placement^=left]>.tippy-arrow:before{border-width:8px 0 8px 8px;border-left-color:initial;right:-7px;transform-origin:center left}.tippy-box[data-placement^=right]>.tippy-arrow{left:0}.tippy-box[data-placement^=right]>.tippy-arrow:before{left:-7px;border-width:8px 8px 8px 0;border-right-color:initial;transform-origin:center right}.tippy-box[data-inertia][data-state=visible]{transition-timing-function:cubic-bezier(.54,1.5,.38,1.11)}.tippy-arrow{width:16px;height:16px;color:#333}.tippy-arrow:before{content:"";position:absolute;border-color:transparent;border-style:solid}.tippy-content{position:relative;padding:5px 9px;z-index:1}
2348 .tippy-box[data-animation=shift-away][data-state=hidden]{opacity:0}.tippy-box[data-animation=shift-away][data-state=hidden][data-placement^=top]{transform:translateY(10px)}.tippy-box[data-animation=shift-away][data-state=hidden][data-placement^=bottom]{transform:translateY(-10px)}.tippy-box[data-animation=shift-away][data-state=hidden][data-placement^=left]{transform:translateX(10px)}.tippy-box[data-animation=shift-away][data-state=hidden][data-placement^=right]{transform:translateX(-10px)}
2349 .yaye-global-style-grid__preview_content {
2350 display: flex;
2351 align-items: center;
2352 gap: 20px;
2353 flex-wrap: wrap;
2354 }
2355 .yaye-swatches-option {
2356 margin: 6px 10px 6px 3px;
2357 cursor: pointer;
2358 }
2359 .yaye-swatches-option-1 {
2360 background-color: #bc432b;
2361 }
2362 .yaye-swatches-option-2 {
2363 background-color: #81d742;
2364 }
2365 .yaye-swatches-option-3 {
2366 background-color: #eeee22;
2367 }
2368 .yaye-button-option {
2369 border: 1px solid;
2370 padding: 7px;
2371 cursor: pointer;
2372 }
2373
2374 .yaye-pro-version-notice-popup {
2375 position: fixed;
2376 z-index: 9999;
2377 width: 91.5%;
2378 height: 100%;
2379 background-color: #fefefe;
2380 opacity: 0.8;
2381 }
2382 .yaye-pro-version-notice-popup .content-popup {
2383 text-align: center;
2384 margin-top: 15%;
2385 font-size: 20px;
2386 font-weight: 500;
2387 color: #3c434a;
2388 }
2389 .yaye-pro-version-notice-text {
2390 margin-left: 5px;
2391 font-weight: 500;
2392 background: lavender;
2393 border-radius: 10px;
2394 padding: 4px 10px;
2395 display: inline-block;
2396 color: #3c434a;
2397 }
2398
2399 .yaye-global-style-grid-3 {
2400 display: grid;
2401 grid-template-columns: 15% 60% 25%;
2402 }
2403
2404 .yaye-global-style-grid-2 {
2405 display: grid;
2406 grid-template-columns: 20% 85%;
2407 }
2408
2409 .yaye-global-style-grid-2 > *,
2410 .yaye-global-style-grid-3 > * {
2411 border-right: 1px solid #e2e4e7;
2412 }
2413
2414 .yaye-global-style-grid__main-content {
2415 display: flex;
2416 flex-direction: column;
2417 }
2418
2419 .yaye-global-style-grid__main-content.disable-content {
2420 position: relative;
2421 }
2422 .yaye-global-style-grid__main-content .upgrade-layout {
2423 content: "";
2424 width: 100%;
2425 height: 100%;
2426 position: absolute;
2427 top: 0;
2428 left: 0;
2429 background: #fff;
2430 opacity: 0.9;
2431 z-index: 11;
2432 display: flex;
2433 align-items: center;
2434 justify-content: center;
2435 }
2436
2437 .yaye-global-style-grid__main-content .upgrade-layout a {
2438 text-decoration: none;
2439 }
2440
2441 .yaye-global-style-grid__main-content .components-divider {
2442 border-color: #dcdcde !important;
2443 }
2444
2445 .yaye-global-style-grid__main-content .common-settings-row {
2446 padding: 10px 10px;
2447 margin: 0;
2448 }
2449
2450 .yaye-global-style-grid__main-content,
2451 .yaye-global-style-grid__preview {
2452 padding: 24px;
2453 }
2454
2455 .yaye-global-style-grid__main-content .label-group {
2456 font-weight: 500;
2457 max-width: 200px;
2458 }
2459
2460 .yaye-global-style-grid__main-content table {
2461 width: 100%;
2462 border-spacing: 20px;
2463 border-collapse: separate;
2464 }
2465
2466 .yaye-global-style-grid__main-content td {
2467 /* padding: 0 48px 48px 0; */
2468 vertical-align: baseline;
2469 }
2470
2471 .yaye-global-style-grid__main-content .label-group-cell {
2472 width: 200px;
2473 }
2474
2475 .yaye-global-style-grid__preview_wrap {
2476 position: sticky;
2477 top: 130px;
2478 }
2479
2480 .yaye-global-style-grid__preview_title {
2481 font-weight: 500;
2482 font-size: 14px;
2483 margin-bottom: 15px;
2484 }
2485 /* .yaye-color-picker .components-base-control__field > input{
2486 width: 100%;
2487 border-color: var(--gray) !important;
2488 } */
2489
2490 .global-style-content-grid {
2491 display: grid;
2492 grid-template-columns: minmax(180px, 1fr) minmax(180px, 1fr);
2493 grid-gap: 5px 40px;
2494 }
2495 .global-style-content-grid .yaye-unit-input {
2496 height: fit-content;
2497 }
2498
2499 .global-style-content-grid .components-unit-control-wrapper {
2500 margin-bottom: calc(8px);
2501 }
2502
2503 .global-style-content-grid .components-base-control__label {
2504 font-size: 14px;
2505 margin-bottom: 3px;
2506 }
2507
2508 .global-style-content-grid .yaye-unit-select {
2509 width: 100%;
2510 }
2511
2512 .yaye-custom-switcher {
2513 display: flex;
2514 margin-bottom: 20px;
2515 }
2516
2517 .yaye-custom-switcher > div {
2518 padding: 10px 20px;
2519 background-color: #f8f8f8;
2520 transition: all 0.2s ease-in;
2521 text-align: center;
2522 display: flex;
2523 cursor: pointer;
2524 align-items: center;
2525 }
2526
2527 .yaye-custom-switcher.disabled > div {
2528 color: #8d96a0;
2529 }
2530
2531 .yaye-custom-switcher > div:first-child {
2532 border-top-left-radius: 5px;
2533 border-bottom-left-radius: 5px;
2534 }
2535
2536 .yaye-custom-switcher > div:last-child {
2537 border-top-right-radius: 5px;
2538 border-bottom-right-radius: 5px;
2539 }
2540
2541 .yaye-custom-switcher > div.switcher-active {
2542 background-color: #6ea7d6;
2543 color: white;
2544 }
2545
2546 .yaye-global-style-grid__sidebar .sidebar-item-text img {
2547 width: 24px;
2548 height: 24px;
2549 }
2550 .yaye-global-style-grid__sidebar .sidebar-item-text .dashicons {
2551 vertical-align: text-bottom;
2552 margin-right: 10px;
2553 }
2554 .yaye-global-style-grid__sidebar .sidebar-sub-text {
2555 vertical-align: middle;
2556 }
2557
2558 .yaye-custom-switcher.disabled > div.switcher-active {
2559 background-color: #ccc;
2560 }
2561
2562 @media (max-width: 1400px) {
2563 .yaye-global-style-grid__main-content.has-preview .common-settings-row-label {
2564 width: 200px;
2565 }
2566 .yaye-global-style-grid__main-content.has-preview
2567 .common-settings-row-content
2568 .global-style-content-grid {
2569 grid-template-columns: minmax(150px, 1fr) minmax(150px, 1fr);
2570 }
2571 }
2572 @media (max-width: 1100px) {
2573 .yaye-global-style-grid__main-content.has-preview
2574 .common-settings-row-content
2575 .global-style-content-grid {
2576 grid-template-columns: 1fr;
2577 }
2578 .yaye-global-style-grid__sidebar ul li .sidebar-item-text .sidebar-sub-text {
2579 display: none;
2580 }
2581 .yaye-global-style-grid__sidebar ul li {
2582 text-align: center;
2583 }
2584 }
2585
2586 @media (max-width: 1000px) {
2587 .global-style-content-grid {
2588 grid-template-columns: 1fr;
2589 }
2590 }
2591 @media screen and (max-width: 782px) {
2592 .yaye-custom-color-picker {
2593 height: 30px;
2594 min-height: 30px !important;
2595 }
2596 .yaye-custom-color-picker .yaye-choose-text {
2597 line-height: 2.15384615;
2598 }
2599 .yaye-global-style-grid__main-content.has-preview .common-settings-row-label {
2600 width: 150px;
2601 }
2602 }
2603
2604 .yaye-notification {
2605 font-size: 13px;
2606 background-color: #32373c;
2607 border-radius: 4px;
2608 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
2609 color: #fff;
2610 padding: 16px 24px;
2611 width: fit-content;
2612 max-width: 600px;
2613 box-sizing: border-box;
2614 cursor: pointer;
2615 animation: NslideUp 0.5s both linear;
2616 position: fixed;
2617 bottom: 20px;
2618 left: 50%;
2619 z-index: 20;
2620 }
2621
2622 .yaye-notification .svg-icon {
2623 border-radius: 50%;
2624 margin-right: 10px;
2625 padding: 2px;
2626 height: 20px;
2627 width: 20px;
2628 }
2629
2630 .yaye-notification .success-message {
2631 background: #00a42a;
2632 }
2633
2634 .yaye-notification .error-message {
2635 background: #d63637;
2636 }
2637
2638 .yaye-notification-content {
2639 display: flex;
2640 align-items: center;
2641 }
2642
2643 @keyframes NslideUp {
2644 from {
2645 opacity: 0;
2646 transform: translate3d(0, 50%, 0);
2647 }
2648
2649 to {
2650 opacity: 1;
2651 transform: translate3d(0, 0, 0);
2652 }
2653 }
2654
2655 @keyframes NslideDown {
2656 from {
2657 opacity: 1;
2658 transform: translate3d(0, 0, 0);
2659 }
2660
2661 to {
2662 opacity: 0;
2663 transform: translate3d(0, 50%, 0);
2664 }
2665 }
2666
2667 .yaye-notification .NslideDown {
2668 animation: NslideDown 0.5s both linear;
2669 }
2670
2671 .yaye-header {
2672 align-items: center;
2673 background-color: var(--white);
2674 box-shadow: var(--box-shadow);
2675 display: flex;
2676 justify-content: space-between;
2677 padding: calc(var(--spacing-step) * 5) calc(var(--spacing-step) * 5);
2678 }
2679
2680 .yaye-header h3 {
2681 margin: 0 !important;
2682 }
2683
2684 .yaye-header--header-name {
2685 align-items: center;
2686 display: flex;
2687 }
2688
2689 .yaye-header--go-back-icon {
2690 cursor: pointer;
2691 }
2692
2693 .yaye-sticky-header {
2694 position: sticky;
2695 top: 32px;
2696 z-index: 999;
2697 }
2698
2699 .dashicons-arrow-left-alt {
2700 margin-right: calc(var(--spacing-step) * 1);
2701 text-decoration: none;
2702 }
2703
2704 .optset-el-header-title {
2705 align-items: center;
2706 display: flex;
2707 gap: calc(var(--spacing-step) * 4);
2708 }
2709
2710 .toggle-option-set-active .components-base-control__field,
2711 .optset-el-header-title--toggle .components-base-control__field {
2712 margin-bottom: 0 !important;
2713 }
2714
2715 .toggle-option-set-active{
2716 margin-bottom: 0 !important;
2717 }
2718
2719 /* .optset-el-header-title h3 {
2720 margin: 0;
2721 } */
2722
2723 .optset-el-header-title--toggle {
2724 align-items: center;
2725 display: flex;
2726 }
2727
2728