PluginProbe
Tiered Pricing Table for WooCommerce / 6.1.0
Tiered Pricing Table for WooCommerce v6.1.0
8.0.2 7.1.7 7.1.5 7.1.4 7.1.1 6.5.0 6.4.0 6.1.0 trunk 1.0 1.1 2.0 2.0.1 2.0.2 2.1 2.1.1 2.1.2 2.2.0 2.2.1 2.2.2 2.2.3 2.3.0 2.3.1 2.3.2 2.3.3 All 91 releases
tier-pricing-table / assets / admin / style.css

style.css in Tiered Pricing Table for WooCommerce 6.1.0, at assets/admin/style.css

782 lines 14.0 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 #woocommerce-product-data ul.wc-tabs li.tiered-pricing-tab_tab a::before {
2 font-family: Dashicons, serif;
3 speak: none;
4 font-weight: 400;
5 font-variant: normal;
6 text-transform: none;
7 line-height: 1;
8 -webkit-font-smoothing: antialiased;
9 content: "\f323";
10 text-decoration: none;
11 }
12
13 /** Variations **/
14 .variable_pricing .tiered_pricing_fixed_rules > label,
15 .variable_pricing .tiered_pricing_percentage_rules > label,
16 .variable_pricing .tiered_pricing_type > label {
17 display: block;
18 }
19
20 .tiered-pricing-form-block {
21 padding: 5px 20px 5px 162px !important;
22 overflow: hidden;
23 margin: 9px 0;
24 }
25
26 .tiered-pricing-form-block label {
27 font-size: 12px;
28 }
29
30 .tiered-pricing-form-block select {
31 width: 50%;
32 max-width: 50%;
33 }
34
35 .tiered-pricing-form-variation-block {
36 margin: 15px 0;
37 }
38
39 .tiered-pricing-form-variation-block input, .tiered-pricing-form-variation-block select {
40 width: 100% !important;
41 vertical-align: middle;
42 margin: 2px 0 0;
43 padding: 5px;
44 }
45
46 .tiered-pricing-pricing-rules-form__rules {
47 display: flex;
48 gap: 15px;
49 flex-wrap: wrap;
50 }
51
52 .tiered-pricing-pricing-rules-form__buttons {
53 margin-top: 15px;
54 }
55
56 .tiered-pricing-pricing-rules-form-row {
57 width: 100%;
58 display: flex;
59 align-items: center;
60 }
61
62 .tiered-pricing-pricing-rules-form-row__inputs {
63 display: flex;
64 gap: 15px;
65 }
66
67 .tiered-pricing-pricing-rules-form-row__inputs input {
68 width: 100%
69 }
70
71 .tiered-pricing-pricing-rules-form-row__actions {
72 margin-left: 5px;
73 }
74
75 .tiered-pricing-pricing-rules-form__remove {
76 position: relative;
77 padding: 0;
78 outline: none;
79 cursor: pointer;
80 display: inline-block;
81 }
82
83
84 /** Buttons **/
85 .tpt-button {
86 display: inline-block;
87 margin-left: 5px;
88 text-decoration: none;
89 font-weight: bold;
90 padding: 10px 20px;
91 color: #fff;
92 transition: .3s all;
93 }
94
95 .tpt-button:focus, .tpt-button:focus {
96 outline: none;
97 color: #fff;
98 }
99
100 .tpt-button--default {
101 background: #3D4C53;
102 color: #fff;
103 }
104
105 .tpt-button--green {
106 background: #8bc547;
107 color: #fff;
108 }
109
110 .tpt-button--green:hover {
111 background: #8bc547;
112 color: #000;
113 }
114
115 .tpt-button--default:hover {
116 background-color: #4a5b63;
117 color: #fff;
118 }
119
120 .tpt-button--secondary {
121 background: #2271b1;
122 color: #fff;
123 }
124
125 .tpt-button--secondary:hover {
126 background-color: #2d8dde;
127 color: #fff;
128 }
129
130 .tpt-button--accent {
131 background: #935687;
132 color: #fff;
133 }
134
135 .tpt-button--accent:hover {
136 background: #b16ca1;
137 color: #fff;
138 }
139
140 .tpt-button--bounce {
141 animation: tpt-bounce-animation 2s infinite;
142 -webkit-animation: tpt-bounce-animation 2s infinite;
143 -moz-animation: tpt-bounce-animation 2s infinite;
144 }
145
146 .tpt-button--bounce:hover, .tpt-button--bounce:active, .tpt-button--bounce:focus {
147 animation: none;
148 -webkit-animation: none;
149 -moz-animation: none;
150 }
151
152 /** GLOBAL PRICING **/
153
154 .post-type-tpt-global-rule .wp-list-table tfoot th,
155 .post-type-tpt-global-rule .wp-list-table thead th {
156 padding: .75em 1em
157 }
158
159 .post-type-tpt-global-rule .wp-list-table tbody tr {
160 border-top: 1px solid #f5f5f5
161 }
162
163 .post-type-tpt-global-rule .wp-list-table td p,
164 .post-type-tpt-global-rule .wp-list-table th p {
165 margin: 0
166 }
167
168 .post-type-tpt-global-rule .wp-list-table .check-column {
169 width: 1px;
170 white-space: nowrap;
171 padding: 1em 2em 1em 1em !important;
172 }
173
174 .post-type-tpt-global-rule .wp-list-table .check-column .locked-indicator {
175 margin-left: 0
176 }
177
178 .tpt-global-pricing-title {
179 margin: 20px 0;
180 border-bottom: 1px solid #e8e8e8;
181 font-size: 1.35em;
182 font-weight: 300;
183 padding: 10px 10px 15px;
184 }
185
186 .tpt-global-pricing-title .woocommerce-help-tip {
187 margin: 0 !important;
188 color: #814b77;
189 font-size: 1em !important;
190 }
191
192 .tpt-global-pricing-rule-form-tab-content .tpt-global-pricing-title:first-child {
193 margin-top: 5px;
194 }
195
196 .tpt-global-pricing-title h4 {
197 display: inline-block;
198 position: absolute;
199 top: 50%;
200 left: 50%;
201 margin: 0;
202 background: #ffffff;
203 letter-spacing: 1px;
204 font-weight: 300;
205 padding: 0 15px;
206 font-size: 14px;
207 transform: translate(-50%, -50%);
208 }
209
210 .tpt-rule-suspend-status {
211 display: inline-flex;
212 line-height: 2.5em;
213 color: #777;
214 background: #e5e5e5;
215 border-bottom: 1px solid rgba(0, 0, 0, .05);
216 margin: -.25em 0;
217 white-space: nowrap;
218 max-width: 100%;
219 width: 14px;
220 height: 14px;
221 border-radius: 50%;
222 cursor: help;
223 }
224
225 .tpt-rule-suspend-status span {
226 margin: 0 1em;
227 overflow: hidden;
228 text-overflow: ellipsis;
229 }
230
231 .tpt-rule-suspend-status--active {
232 background: #50860f;
233 }
234
235 .tpt-rule-suspend-status--suspended {
236 background: #f8dda7;
237 color: #94660c;
238 }
239
240 .tpt-global-rule-pricing-table tbody {
241 font-weight: bold;
242 }
243 .tpt-global-rule-pricing-table tbody td {
244 padding: 5px 10px !important;
245 }
246
247 .tpt-global-rule-pricing-table thead tr th {
248 background: #c8d7e1;
249 padding: 5px 10px !important;
250 }
251
252 .tpt-rule-status {
253 width: 20px;
254 height: 20px;
255 cursor: pointer;
256 border-radius: 50%;
257 color: #fff;
258 text-align: center;
259 }
260
261 .tpt-rule-status--valid {
262 background: green;
263 }
264
265 .tpt-rule-status--invalid {
266 background: #d63638;
267 }
268
269 #pricing.column-pricing {
270 width: 250px;
271 }
272
273 /** SETTINGS **/
274 .wc-settings-row-tpt_hidden_option {
275 display: none !important;
276 }
277
278 #tier_pricing_table__subsection_hidden_options-description, #tier_pricing_table__subsection_hidden_options-description + table {
279 display: none;
280 }
281
282 .tpt-toggle-extended-description {
283 background: #fff;
284 padding: 10px;
285 width: 50%;
286 border: 1px solid #ccc;
287 margin-top: 15px;
288 position: relative;
289 }
290
291 .tpt-toggle-extended-description::before {
292 content: "";
293 position: absolute;
294 top: -20px;
295 left: 10px;
296 border-top: 10px solid transparent;
297 border-bottom: 10px solid #ccc;
298 border-left: 10px solid transparent;
299 border-right: 10px solid transparent;
300 }
301
302 .tpt-toggle-extended-description::after {
303 content: "";
304 position: absolute;
305 top: -18px;
306 left: 11px;
307 border-top: 9px solid transparent;
308 border-bottom: 9px solid #fff;
309 border-left: 9px solid transparent;
310 border-right: 9px solid transparent;
311 }
312
313 input[type="checkbox"].tpt-toggle-switch {
314 opacity: 0;
315 position: absolute;
316 margin: 8px 0 0 16px;
317 }
318
319 input[type="checkbox"].tpt-toggle-switch + label {
320 cursor: pointer;
321 position: relative;
322 padding: 5px 0 0 50px;
323 line-height: 2.0em;
324 }
325
326 input[type="checkbox"].tpt-toggle-switch + label:before {
327 content: "";
328 position: absolute;
329 display: block;
330 left: 0;
331 top: 0;
332 width: 44px;
333 height: 25px;
334 border-radius: 16px;
335 background: #fff;
336 border: 1px solid #d9d9d9;
337 -webkit-transition: all 0.3s;
338 transition: all 0.3s;
339 }
340
341 input[type="checkbox"].tpt-toggle-switch + label:after {
342 content: "";
343 position: absolute;
344 display: block;
345 left: 5px;
346 top: 3px;
347 width: 20px;
348 height: 19px;
349 border-radius: 16px;
350 background: #fff;
351 border: 1px solid #d9d9d9;
352 -webkit-transition: all 0.3s;
353 transition: all 0.3s;
354 }
355
356 input[type="checkbox"].tpt-toggle-switch:checked + label:after {
357 margin-left: 16px;
358 border-color: #935687;
359 }
360
361 input[type="checkbox"].tpt-toggle-switch:checked + label:before {
362 background: #935687;
363 }
364
365 input[type="checkbox"].tpt-toggle-switch + label > [data-tpt-toggle-switch-on] {
366 display: none;
367 }
368
369 input[type="checkbox"].tpt-toggle-switch:checked + label > [data-tpt-toggle-switch-on] {
370 display: inline;
371 }
372
373 input[type="checkbox"].tpt-toggle-switch:checked + label > [data-tpt-toggle-switch-off] {
374 display: none;
375 }
376
377 .tpt-display-template-label {
378 padding: 7px 20px;
379 border: 1px solid #935687;
380 border-right: none;
381 color: #646970;
382 }
383
384 .tpt-display-template-option {
385 display: none !important;
386 }
387
388 .tpt-display-template-label:hover {
389 cursor: pointer;
390 background: #F5F5F5;
391 }
392
393 .tpt-display-template-options:last-child .tpt-display-template-label {
394 border-right: 1px solid #935687;
395 border-radius: 0 5px 5px 0;
396
397 }
398
399 .tpt-display-template-options:first-child .tpt-display-template-label {
400 border-radius: 5px 0 0 5px;
401 }
402
403 .tpt-display-template-option:checked + .tpt-display-template-label {
404 background: #935687;
405 color: #fff;
406 font-weight: 500;
407 }
408
409 .tpt-display-template-options {
410 flex: 0 0 auto;
411 }
412
413 .tpt-integration-plugin-is-not-active-label {
414 font-size: .7em;
415 padding: 5px;
416 display: inline-block;
417 background: red;
418 color: #fff;
419 border-radius: 4px;
420 margin-top: 10px;
421 }
422
423 .tpt_premium_subsection_label {
424 background: #e85b5b;
425 padding: 5px 10px;
426 color: #fff;
427 font-size: .6em;
428 border-radius: 5px;
429 margin-left: 10px;
430 }
431
432 .tpt_premium_option_label {
433 font-size: .8em;
434 border-radius: 5px;
435 margin-top: 5px;
436 display: inline-block;
437 color: red;
438 font-weight: bold;
439 }
440
441 .tpt_premium_option {
442 opacity: .7;
443 }
444
445 .tpt_premium_subsection {
446 opacity: .7;
447 }
448
449 /** Advanced product options **/
450 .tiered_pricing_tab_product_advance_options {
451 border: 1px solid #eee;
452 border-left: none;
453 border-right: none;
454 margin-top: 35px;
455 }
456
457 .tiered_pricing_tab_product_advance_options__header {
458 cursor: pointer;
459 display: flex;
460 justify-content: space-between;
461 align-items: center;
462 padding: 0 20px 0 10px;
463 color: #888;
464 }
465
466 .tiered_pricing_tab_product_advance_options__header:hover {
467 color: #555;
468 background: #fafafa;
469 }
470
471 .tiered_pricing_tab_product_advance_options--open .tiered_pricing_tab_product_advance_options__header {
472 background: #fafafa;
473 }
474
475 .tiered_pricing_tab_product_advance_options__content {
476 display: none;
477 }
478
479 .tiered_pricing_tab_product_advance_options .tiered_pricing_arrow_up {
480 display: none;
481 }
482
483 .tiered_pricing_tab_product_advance_options--open .tiered_pricing_tab_product_advance_options__content {
484 display: block;
485 }
486
487 .tiered_pricing_tab_product_advance_options--open .tiered_pricing_arrow_up {
488 display: inline;
489 }
490
491 .tiered_pricing_tab_product_advance_options--open .tiered_pricing_arrow_down {
492 display: none;
493 }
494
495 /** End Advanced product options **/
496
497 /** Global pricing rule columns **/
498 .post-type-tpt-global-rule .column-status {
499 width: 15px;
500 text-align: center;
501 }
502 .post-type-tpt-global-rule .column-applied_quantity_rules {
503 width: 100px;
504 }
505
506 /** Alert **/
507
508 .tpt-alert {
509 display: flex;
510 flex-wrap: wrap;
511 padding: 10px 20px;
512 margin: 20px 0;
513 background: #fff;
514 box-shadow: 0 5px 10px rgba(61, 76, 83, 0.15);
515 color: #3D4C53;
516 border: 1px solid rgba(61, 76, 83, 0.26);
517 }
518
519 .tpt-alert__icon {
520 width: 40px;
521 height: 40px;
522 margin-right: 10px;
523 fill: #3D4C53;
524 }
525
526 .tpt-alert__text {
527 font-size: 15px;
528 font-weight: bold;
529 display: flex;
530 justify-content: center;
531 align-items: center;
532 }
533
534 .tpt-alert__buttons {
535 margin-left: auto;
536 display: flex;
537 justify-content: center;
538 align-items: center;
539 }
540
541 @media (max-width: 1200px) {
542 .tpt-alert__icon {
543 width: 70px;
544 height: 70px;
545 display: block;
546 margin: 0 auto;
547 margin-bottom: 10px;
548 }
549
550 .tpt-alert__buttons {
551 flex: 1 0 100%;
552 }
553
554 .tpt-alert__text {
555 margin-bottom: 20px;
556 flex: 1 0 100%;
557 line-height: 1;
558 }
559
560 .tpt-alert {
561 text-align: center;
562 }
563 }
564
565 .tpt-role-based-block {
566 padding: 0 9px 0 162px;
567 position: relative;
568 margin: 20px 0;
569 clear: both;
570 }
571
572 .tpt-role-based-block--variation {
573 padding: 0;
574 }
575
576 .tpt-role-based-role__header {
577 cursor: pointer;
578 display: flex;
579 justify-content: space-between;
580 padding: 13px;
581 border: 1px solid #eee;
582 border-bottom: none;
583 }
584
585 .tpt-role-based-adding-form {
586 display: flex;
587 align-items: center;
588 gap: 10px;
589 margin: 15px 0;
590 }
591
592 .tpt-role-based-role:last-child .tpt-role-based-role__header {
593 border-bottom: 1px solid #eee;
594 }
595
596 .tpt-role-based-role:last-child .tpt-role-based-role__content {
597 border-top: none;
598 border-bottom: 1px solid #eee;
599 }
600
601 .tpt-role-based-role__content {
602 overflow: hidden;
603 background: #fdfdfd;
604 border: 1px solid #eee;
605 display: none;
606 border-bottom: none;
607 }
608
609 .tpt-role-based-block--variation .tpt-role-based-role__content {
610 padding: 20px;
611 background: #fafafa;
612 border-color: #eee;
613 }
614
615 .tpt-role-based-block--variation .tpt-role-based-roles {
616 margin: 10px 0;
617 }
618
619 .tpt-role-based-role-action--delete {
620 color: red;
621 font-weight: 400;
622 text-decoration: none;
623 position: relative;
624 }
625
626 .tpt-role-based-role-action--delete:hover {
627 color: #a20000;
628 }
629
630 .tpt-role-based-role__action-toggle-view {
631 padding: 10px;
632 color: #888;
633 cursor: pointer;
634 }
635
636 .tpt-role-based-role__header .tpt-role-based-role__actions {
637 visibility: hidden;
638 }
639
640 .tpt-role-based-role:hover .tpt-role-based-role__actions {
641 visibility: visible;
642 }
643
644 .tpt-role-based-role__action-toggle-view:hover {
645 color: #000;
646 }
647
648 .tpt-role-based-role__action-toggle-view--open:before {
649 content: "â–¼" !important;
650 }
651
652 .tpt-role-based-role__action-toggle-view--close:before {
653 content: "â–²" !important;
654 }
655
656 #variable_product_options .tpt-role-based-block {
657 padding: 0;
658 }
659
660 #variable_product_options .tpt-role-based-block__content {
661 padding: 0;
662 }
663
664 #variable_product_options .tpt-role-based-role__content {
665 padding: 0 20px;
666 background: #f5f5f5;
667 }
668
669 #variable_product_options .tpt-role-based-role__content select {
670 width: 100%;
671 }
672
673 #variable_product_options .tpt-role-based-role__content select {
674 width: 100%;
675 }
676
677 #variable_product_options .tpt-role-based-block__content {
678 margin-top: 5px;
679 }
680
681 #variable_product_options .tpt-role-based-role__content input,
682 #variable_product_options .tpt-role-based-role__content select {
683 margin-top: 5px;
684 }
685
686
687 /** Animation **/
688
689 @-webkit-keyframes tpt-bounce-animation {
690 0%, 20%, 50%, 80%, 100% {
691 -webkit-transform: translateY(0);
692 }
693 40% {
694 -webkit-transform: translateY(-5px);
695 }
696 60% {
697 -webkit-transform: translateY(-2px);
698 }
699 }
700
701 @-moz-keyframes tpt-bounce-animation {
702 0%, 20%, 50%, 80%, 100% {
703 -moz-transform: translateY(0);
704 }
705 40% {
706 -moz-transform: translateY(-5px);
707 }
708 60% {
709 -moz-transform: translateY(-2px);
710 }
711 }
712
713 @-o-keyframes tpt-bounce-animation {
714 0%, 20%, 50%, 80%, 100% {
715 -o-transform: translateY(0);
716 }
717 40% {
718 -o-transform: translateY(-5px);
719 }
720 60% {
721 -o-transform: translateY(-2px);
722 }
723 }
724
725 @keyframes tpt-bounce-animation {
726 0%, 20%, 50%, 80%, 100% {
727 transform: translateY(0);
728 }
729 40% {
730 transform: translateY(-5px);
731 }
732 60% {
733 transform: translateY(-2px);
734 }
735 }
736
737 @keyframes heartbeat-animation {
738 0% {
739 transform: scale(1);
740 }
741 20% {
742 transform: scale(1.1);
743 }
744 40% {
745 transform: scale(1);
746 }
747 60% {
748 transform: scale(1.1);
749 }
750 80% {
751 transform: scale(1);
752 }
753 100% {
754 transform: scale(1);
755 }
756 }
757
758 .tpt-heartbeat {
759 animation: heartbeat-animation .5s;
760 }
761
762
763 /** Global button **/
764 .button-tpt-button {
765 background: #935687 !important;
766 border-color: #77466d !important;
767 color: #fff !important;
768 text-decoration: none;
769 text-shadow: none;
770 outline: #fff;
771 }
772
773 .button-tpt-button:hover {
774 background: #a66099 !important;
775 }
776
777 /** Block Editor **/
778 [data-template-block-id="tiered-pricing-table/advanced-quantity-options"],
779 [data-template-block-id="tiered-pricing-table/product-editor-quantity-step"] {
780 margin-top: 10px !important;
781 }
782