PluginProbe
SellKit – Funnel builder and checkout optimizer for WooCommerce to sell more, faster / 2.7.0
SellKit – Funnel builder and checkout optimizer for WooCommerce to sell more, faster v2.7.0
2.7.0 2.6.0 trunk 1.1.0 1.1.4 1.2.1 1.2.2 1.2.3 1.2.5 1.2.9 1.3.1 1.3.2 1.5.0 1.5.1 1.5.4 1.5.7 1.5.8 1.5.9 1.6.2 1.6.5 1.6.8 1.7.2 1.7.4 1.7.5 1.7.9 All 43 releases
sellkit / includes / elementor / modules / checkout / widgets / style-controls.php

style-controls.php in SellKit – Funnel builder and checkout optimizer for WooCommerce to sell more, faster 2.7.0, at includes/elementor/modules/checkout/widgets/style-controls.php

1,375 lines 39.8 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 <?php
2
3 namespace Sellkit\Elementor\Modules\Checkout\Widgets;
4
5 defined( 'ABSPATH' ) || die();
6
7 use Elementor\Controls_Manager;
8 use Elementor\Group_Control_Typography;
9 use Elementor\Core\Kits\Documents\Tabs\Global_Colors;
10
11 class Style_Controls extends \Sellkit_Elementor_Checkout_Widget {
12 public function __construct() {
13 $this->form_style();
14 $this->heading_style();
15 $this->divider_style();
16 $this->step_style();
17 $this->buttons_style();
18 $this->fields_style();
19 $this->order_summary_style();
20 }
21
22 private function form_style() {
23 $this->start_controls_section(
24 'section_form_style',
25 [
26 'label' => esc_html__( 'Form', 'sellkit' ),
27 'tab' => 'style',
28 ]
29 );
30
31 $this->add_control(
32 'form_col_gap',
33 [
34 'label' => esc_html__( 'Columns gap', 'sellkit' ),
35 'type' => 'slider',
36 'size_units' => [ 'px' ],
37 'range' => [
38 'px' => [
39 'min' => 0,
40 'max' => 200,
41 'step' => 1,
42 ],
43 ],
44 'selectors' => [
45 '{{WRAPPER}} #sellkit-checkout-multistep-inner-wrap' => 'column-gap: {{SIZE}}{{UNIT}};',
46 ],
47 'condition' => [
48 'layout-type' => 'multi-step',
49 ],
50 ]
51 );
52
53 $this->add_control(
54 'form_row_gap',
55 [
56 'label' => esc_html__( 'Row gap', 'sellkit' ),
57 'type' => 'slider',
58 'size_units' => [ 'px' ],
59 'range' => [
60 'px' => [
61 'min' => 0,
62 'max' => 200,
63 'step' => 1,
64 ],
65 ],
66 'selectors' => [
67 '{{WRAPPER}} .woocommerce-checkout' => 'row-gap: {{SIZE}}{{UNIT}}; display:grid',
68 ],
69 'condition' => [
70 'layout-type' => 'one-page',
71 ],
72 ]
73 );
74
75 $this->add_control(
76 'form_links_color',
77 [
78 'label' => esc_html__( 'Links Color', 'sellkit' ),
79 'type' => 'color',
80 'selectors' => [
81 '{{WRAPPER}} #sellkit-checkout-widget-id .sellkit-checkout-widget-links' => 'color: {{VALUE}}',
82 ],
83 ]
84 );
85
86 $this->add_control(
87 'form_links_hover_color',
88 [
89 'label' => esc_html__( 'Links Hover Color', 'sellkit' ),
90 'type' => 'color',
91 'selectors' => [
92 '{{WRAPPER}} #sellkit-checkout-widget-id .sellkit-checkout-widget-links:hover' => 'color: {{VALUE}}',
93 ],
94 ]
95 );
96
97 $this->add_control(
98 'form_collapsible_background',
99 [
100 'label' => esc_html__( 'Collapsible Form Background', 'sellkit' ),
101 'type' => 'color',
102 'selectors' => [
103 '{{WRAPPER}} #sellkit-checkout-widget-id #sellkit-checkout-billing-field-wrapper' => 'background-color: {{VALUE}} !important',
104 '{{WRAPPER}} #sellkit-checkout-widget-id .sellkit-multistep-checkout-sidebar .sellkit-mobile-multistep-order-summary' => 'background-color: {{VALUE}} !important',
105 ],
106 ]
107 );
108
109 $this->end_controls_section();
110 }
111
112 private function heading_style() {
113 $this->start_controls_section(
114 'section_heading_style',
115 [
116 'label' => esc_html__( 'Heading', 'sellkit' ),
117 'tab' => 'style',
118 ]
119 );
120
121 $this->add_responsive_control(
122 'section_heading_style_padding',
123 [
124 'label' => esc_html__( 'Padding', 'sellkit' ),
125 'type' => 'dimensions',
126 'size_units' => [ 'px', '%', 'em' ],
127 'selectors' => [
128 '{{WRAPPER}} .heading' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
129 '{{WRAPPER}} #sellkit-checkout-widget-id form .sellkit-one-page-checkout-shipping .shipping_address #shipping_text_title' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
130 '{{WRAPPER}} #sellkit-checkout-widget-id form .sellkit-multistep-checkout-second #shipping_header_title' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
131 '{{WRAPPER}} #sellkit-checkout-widget-id form .sellkit-multistep-checkout-third #payment_method_title' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
132 '{{WRAPPER}} #sellkit-checkout-widget-id h4#shipping_header_title' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
133 ],
134 ]
135 );
136
137 $this->add_group_control(
138 'typography',
139 [
140 'name' => 'heading_typography2',
141 'label' => esc_html__( 'Typography', 'sellkit' ),
142 'selector' =>
143 '{{WRAPPER}} .heading,
144 {{WRAPPER}} #sellkit-checkout-widget-id form .sellkit-one-page-checkout-shipping .shipping_address #shipping_text_title,
145 {{WRAPPER}} #sellkit-checkout-widget-id form .sellkit-multistep-checkout-second #shipping_header_title,
146 {{WRAPPER}} #sellkit-checkout-widget-id form .sellkit-multistep-checkout-third #payment_method_title,
147 {{WRAPPER}} #sellkit-checkout-widget-id h4#shipping_header_title',
148 ]
149 );
150
151 $this->add_control(
152 'heading_color',
153 [
154 'label' => esc_html__( 'Color', 'sellkit' ),
155 'type' => 'color',
156 'selectors' => [
157 '{{WRAPPER}} .heading' => 'color: {{VALUE}}',
158 '{{WRAPPER}} #sellkit-checkout-widget-id form .sellkit-one-page-checkout-shipping .shipping_address #shipping_text_title' => 'color: {{VALUE}}',
159 '{{WRAPPER}} #sellkit-checkout-widget-id form .sellkit-multistep-checkout-second #shipping_header_title' => 'color: {{VALUE}}',
160 '{{WRAPPER}} #sellkit-checkout-widget-id form .sellkit-multistep-checkout-third #payment_method_title' => 'color: {{VALUE}}',
161 '{{WRAPPER}} #sellkit-checkout-widget-id h4#shipping_header_title' => 'color: {{VALUE}}',
162 ],
163 ]
164 );
165
166 $this->add_responsive_control(
167 'heading_align',
168 [
169 'label' => esc_html__( 'Alignment', 'sellkit' ),
170 'type' => 'choose',
171 'options' => [
172 'left' => [
173 'title' => esc_html__( 'Left', 'sellkit' ),
174 'icon' => 'eicon-text-align-left',
175 ],
176 'center' => [
177 'title' => esc_html__( 'Center', 'sellkit' ),
178 'icon' => 'eicon-text-align-justify',
179 ],
180 'right' => [
181 'title' => esc_html__( 'Right', 'sellkit' ),
182 'icon' => 'eicon-text-align-right',
183 ],
184 ],
185 'toggle' => true,
186 'selectors' => [
187 '{{WRAPPER}} .heading' => 'text-align: {{VALUE}};',
188 '{{WRAPPER}} #sellkit-checkout-widget-id form .sellkit-one-page-checkout-shipping .shipping_address #shipping_text_title' => 'text-align: {{VALUE}};',
189 '{{WRAPPER}} #sellkit-checkout-widget-id form .sellkit-multistep-checkout-second #shipping_header_title' => 'text-align: {{VALUE}};',
190 '{{WRAPPER}} #sellkit-checkout-widget-id form .sellkit-multistep-checkout-third #payment_method_title' => 'text-align: {{VALUE}};',
191 '{{WRAPPER}} #sellkit-checkout-widget-id h4#shipping_header_title' => 'text-align: {{VALUE}};',
192 ],
193 ]
194 );
195
196 $this->divider( 'hr_01' );
197
198 $this->add_control(
199 'sub_heading_title',
200 [
201 'show_label' => false,
202 'type' => 'raw_html',
203 'raw' => esc_html__( 'Sub Heading', 'sellkit' ),
204 'content_classes' => 'sellkit-elementor-editor-bulk-text'
205 ]
206 );
207
208 $this->add_responsive_control(
209 'section_sub_heading_style_padding',
210 [
211 'label' => esc_html__( 'Padding', 'sellkit' ),
212 'type' => 'dimensions',
213 'size_units' => [ 'px', '%', 'em' ],
214 'selectors' => [
215 '{{WRAPPER}} #sellkit-checkout-widget-id .sub-heading' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
216 ],
217 ]
218 );
219
220 $this->add_group_control(
221 'typography',
222 [
223 'name' => 'sub-heading_typography',
224 'label' => esc_html__( 'Typography', 'sellkit' ),
225 'selector' => '{{WRAPPER}} #sellkit-checkout-widget-id .sub-heading',
226 ]
227 );
228
229 $this->add_control(
230 'sub-heading_color',
231 [
232 'label' => esc_html__( 'Color', 'sellkit' ),
233 'type' => 'color',
234 'selectors' => [
235 '{{WRAPPER}} #sellkit-checkout-widget-id .sub-heading' => 'color: {{VALUE}}',
236 ],
237 ]
238 );
239
240 $this->add_responsive_control(
241 'sub-heading_align',
242 [
243 'label' => esc_html__( 'Alignment', 'sellkit' ),
244 'type' => 'choose',
245 'options' => [
246 'left' => [
247 'title' => esc_html__( 'Left', 'sellkit' ),
248 'icon' => 'eicon-text-align-left',
249 ],
250 'center' => [
251 'title' => esc_html__( 'Center', 'sellkit' ),
252 'icon' => 'eicon-text-align-justify',
253 ],
254 'right' => [
255 'title' => esc_html__( 'Right', 'sellkit' ),
256 'icon' => 'eicon-text-align-right',
257 ],
258 ],
259 'toggle' => true,
260 'selectors' => [
261 '{{WRAPPER}} #sellkit-checkout-widget-id .sub-heading' => 'text-align: {{VALUE}};',
262 ],
263 ]
264 );
265
266 $this->end_controls_section();
267 }
268
269 private function divider_style() {
270 $this->start_controls_section(
271 'section_divider_style',
272 [
273 'label' => esc_html__( 'Divider', 'sellkit' ),
274 'tab' => 'style',
275 ]
276 );
277
278 $this->add_group_control(
279 'border',
280 [
281 'name' => 'divider_border',
282 'label' => esc_html__( 'Border', 'sellkit' ),
283 'selector' => '{{WRAPPER}} #sellkit-checkout-widget-id .sellkit-checkout-widget-divider,
284 {{WRAPPER}} #sellkit-checkout-widget-id #order_review #sellkit-checkout-widget-order-review-wrap .sellkit-checkout-widget-divider,
285 {{WRAPPER}} #sellkit-checkout-widget-id #sellkit-checkout-multistep-inner-wrap .sellkit-checkout-widget-divider',
286 ]
287 );
288
289 $this->add_responsive_control(
290 'divider_border_radius',
291 [
292 'label' => esc_html__( 'Border Radius', 'sellkit' ),
293 'type' => 'dimensions',
294 'size_units' => [ 'px', '%', 'em' ],
295 'selectors' => [
296 '{{WRAPPER}} .sellkit-checkout-widget-divider' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
297 ],
298 'condition' => [
299 'divider_border_border!' => '',
300 ],
301 ]
302 );
303
304 $this->end_controls_section();
305 }
306
307 private function step_style() {
308 $this->start_controls_section(
309 'section_step_style',
310 [
311 'label' => esc_html__( 'Step', 'sellkit' ),
312 'tab' => 'style',
313 ]
314 );
315
316 $this->add_group_control(
317 'typography',
318 [
319 'name' => 'step_typography',
320 'label' => esc_html__( 'Typography', 'sellkit' ),
321 'selector' => '{{WRAPPER}} .sellkit-checkout-widget-breadcrumb span',
322 ]
323 );
324
325 $this->add_responsive_control(
326 'step_alignment',
327 [
328 'label' => esc_html__( 'Alignment', 'sellkit' ),
329 'type' => 'choose',
330 'options' => [
331 'flex-start' => [
332 'title' => esc_html__( 'Left', 'sellkit' ),
333 'icon' => 'eicon-text-align-left',
334 ],
335 'center' => [
336 'title' => esc_html__( 'Center', 'sellkit' ),
337 'icon' => 'eicon-text-align-justify',
338 ],
339 'flex-end' => [
340 'title' => esc_html__( 'Right', 'sellkit' ),
341 'icon' => 'eicon-text-align-right',
342 ],
343 ],
344 'toggle' => true,
345 'selectors' => [
346 '{{WRAPPER}} .sellkit-checkout-widget-breadcrumb' => 'justify-content: {{VALUE}};',
347 ],
348 ]
349 );
350
351 $this->start_controls_tabs(
352 'step_style_tabs'
353 );
354
355 $this->start_controls_tab(
356 'style_inactive_tab',
357 [
358 'label' => esc_html__( 'UPCOMING', 'sellkit' ),
359 ]
360 );
361
362 $this->add_control(
363 'step_inactive_links_color',
364 [
365 'label' => esc_html__( 'Color', 'sellkit' ),
366 'type' => 'color',
367 'selectors' => [
368 '{{WRAPPER}} #checkout-widget-breadcrumb span.inactive' => 'color: {{VALUE}}',
369 ],
370 ]
371 );
372
373 $this->add_control(
374 'step_inactive_links_color_hove',
375 [
376 'label' => esc_html__( 'Links Hover Color', 'sellkit' ),
377 'type' => 'color',
378 'selectors' => [
379 '{{WRAPPER}} #checkout-widget-breadcrumb span.inactive:hover' => 'color: {{VALUE}}',
380 ],
381 ]
382 );
383
384 $this->end_controls_tab();
385
386 $this->start_controls_tab(
387 'style_active_tab',
388 [
389 'label' => esc_html__( 'IN-PROGRESS', 'sellkit' ),
390 ]
391 );
392
393 $this->add_control(
394 'step_active_links_color',
395 [
396 'label' => esc_html__( 'Links Color', 'sellkit' ),
397 'type' => 'color',
398 'selectors' => [
399 '{{WRAPPER}} #checkout-widget-breadcrumb span.current' => 'color: {{VALUE}}',
400 ],
401 ]
402 );
403
404 $this->add_control(
405 'step_active_links_color_hove',
406 [
407 'label' => esc_html__( 'Links Hover Color', 'sellkit' ),
408 'type' => 'color',
409 'selectors' => [
410 '{{WRAPPER}} #checkout-widget-breadcrumb span.current:hover' => 'color: {{VALUE}}',
411 ],
412 ]
413 );
414
415 $this->end_controls_tab();
416
417 $this->start_controls_tab(
418 'style_completed_tab',
419 [
420 'label' => esc_html__( 'COMPLETED', 'sellkit' ),
421 ]
422 );
423
424 $this->add_control(
425 'step_completed_links_color',
426 [
427 'label' => esc_html__( 'Links Color', 'sellkit' ),
428 'type' => 'color',
429 'selectors' => [
430 '{{WRAPPER}} #checkout-widget-breadcrumb span.blue-line' => 'color: {{VALUE}}',
431 '{{WRAPPER}} #checkout-widget-breadcrumb span.blue-line a' => 'color: {{VALUE}}',
432 ],
433 ]
434 );
435
436 $this->add_control(
437 'step_completed_links_color_hove',
438 [
439 'label' => esc_html__( 'Links Hover Color', 'sellkit' ),
440 'type' => 'color',
441 'selectors' => [
442 '{{WRAPPER}} #checkout-widget-breadcrumb span.blue-line:hover' => 'color: {{VALUE}}',
443 '{{WRAPPER}} #checkout-widget-breadcrumb span.blue-line a:hover' => 'color: {{VALUE}}',
444 ],
445 ]
446 );
447
448 $this->end_controls_tab();
449
450 $this->end_controls_tabs();
451
452 $this->add_control(
453 'step_heading_1',
454 [
455 'label' => esc_html__( 'Separator Icon', 'sellkit' ),
456 'type' => 'heading',
457 'separator' => 'before',
458 ]
459 );
460
461 $this->add_control(
462 'step_separator_icon_color',
463 [
464 'label' => esc_html__( 'Icon Color', 'sellkit' ),
465 'type' => 'color',
466 'selectors' => [
467 '{{WRAPPER}} #checkout-widget-breadcrumb .sellkit-checkout-widget-bc-icon' => 'color: {{VALUE}}',
468 ],
469 ]
470 );
471
472 $this->add_responsive_control(
473 'step_separator_icon_size',
474 [
475 'label' => esc_html__( 'Icon Size', 'sellkit' ),
476 'type' => 'slider',
477 'size_units' => [ 'px' ],
478 'range' => [
479 'px' => [
480 'min' => 0,
481 'max' => 200,
482 'step' => 1,
483 ],
484 ],
485 'selectors' => [
486 '{{WRAPPER}} #checkout-widget-breadcrumb .sellkit-checkout-widget-bc-icon' => 'font-size: {{SIZE}}{{UNIT}};',
487 ],
488 ]
489 );
490
491 $this->add_responsive_control(
492 'step_separator_icon_spacing',
493 [
494 'label' => esc_html__( 'Icon Spacing', 'sellkit' ),
495 'type' => 'slider',
496 'size_units' => [ 'px' ],
497 'range' => [
498 'px' => [
499 'min' => 0,
500 'max' => 200,
501 'step' => 1,
502 ],
503 ],
504 'selectors' => [
505 '{{WRAPPER}} .sellkit-checkout-widget-breadcrumb' => 'column-gap: {{SIZE}}{{UNIT}};',
506 ],
507 ]
508 );
509
510 $this->end_controls_section();
511 }
512
513 /**
514 * Button styles.
515 *
516 * @SuppressWarnings(PHPMD.ExcessiveMethodLength)
517 */
518 private function buttons_style() {
519 $this->start_controls_section(
520 'section_buttons_style',
521 [
522 'label' => esc_html__( 'Button', 'sellkit' ),
523 'tab' => 'style',
524 ]
525 );
526
527 $this->add_control(
528 'button_style_heading_1',
529 [
530 'label' => esc_html__( 'Primary button', 'sellkit' ),
531 'type' => 'heading',
532 ]
533 );
534
535 $this->add_responsive_control(
536 'button_primary_size_width',
537 [
538 'label' => esc_html__( 'Width', 'sellkit' ),
539 'type' => 'slider',
540 'size_units' => [ 'px', '%', 'em', 'custom' ],
541 'range' => [
542 'px' => [
543 'min' => 0,
544 'max' => 1000,
545 'step' => 1,
546 ],
547 '%' => [
548 'min' => 0,
549 'max' => 100,
550 'step' => 1,
551 ],
552 'em' => [
553 'min' => 0,
554 'max' => 10,
555 'step' => 0.1,
556 ],
557 ],
558 'selectors' => [
559 '{{WRAPPER}} #sellkit-checkout-widget-id .sellkit-checkout-widget-primary-button' => 'width: {{SIZE}}{{UNIT}} !important;',
560 ],
561 ]
562 );
563
564 $this->start_controls_tabs(
565 'button_primary_style_tabs'
566 );
567
568 $this->start_controls_tab(
569 'button_primary_style_normal_tab',
570 [
571 'label' => esc_html__( 'NORMAL', 'sellkit' ),
572 ]
573 );
574
575 $this->add_control(
576 'button_primary_normal_color',
577 [
578 'label' => esc_html__( 'Text Color', 'sellkit' ),
579 'type' => 'color',
580 'selectors' => [
581 '{{WRAPPER}} .sellkit-checkout-widget-primary-button' => 'color: {{VALUE}} !important',
582 '{{WRAPPER}} #sellkit-checkout-widget-id .place-order .sellkit-checkout-widget-primary-button' => 'color: {{VALUE}}',
583 ],
584 ]
585 );
586
587 $this->add_group_control(
588 'typography',
589 [
590 'name' => 'button_primary_normal_typography',
591 'label' => esc_html__( 'Typography', 'sellkit' ),
592 'selector' => '{{WRAPPER}} #sellkit-checkout-widget-id .sellkit-checkout-widget-primary-button',
593 'fields_options' => [
594 'typography' => [
595 'default' => 'yes',
596 ],
597 'text_transform' => [
598 'default' => 'none',
599 ],
600 ],
601 ]
602 );
603
604 $this->add_control(
605 'button_primary_normal_bg',
606 [
607 'label' => esc_html__( 'Background Color', 'sellkit' ),
608 'type' => 'color',
609 'selectors' => [
610 '{{WRAPPER}} .sellkit-checkout-widget-primary-button' => 'background-color: {{VALUE}} !important',
611 '{{WRAPPER}} #sellkit-checkout-widget-id .place-order .sellkit-checkout-widget-primary-button' => 'background-color: {{VALUE}}',
612 ],
613 ]
614 );
615
616 $this->end_controls_tab();
617
618 $this->start_controls_tab(
619 'button_primary_style_hover_tab',
620 [
621 'label' => esc_html__( 'HOVER', 'sellkit' ),
622 ]
623 );
624
625 $this->add_control(
626 'button_primary_hover_color',
627 [
628 'label' => esc_html__( 'Text Color', 'sellkit' ),
629 'type' => 'color',
630 'selectors' => [
631 '{{WRAPPER}} .sellkit-checkout-widget-primary-button:hover' => 'color: {{VALUE}} !important',
632 '{{WRAPPER}} #sellkit-checkout-widget-id .place-order .sellkit-checkout-widget-primary-button:hover' => 'color: {{VALUE}}',
633 '{{WRAPPER}} .sellkit-checkout-widget-main-wrapper #sellkit-checkout-widget-id form .place-order #place_order:is(button):hover' => 'color: {{VALUE}}',
634 ],
635 ]
636 );
637
638 $this->add_group_control(
639 'typography',
640 [
641 'name' => 'button_primary_hover_typography',
642 'label' => esc_html__( 'Typography', 'sellkit' ),
643 'selector' => '{{WRAPPER}} #sellkit-checkout-widget-id .sellkit-checkout-widget-primary-button:hover',
644 ]
645 );
646
647 $this->add_control(
648 'button_primary_hover_bg',
649 [
650 'label' => esc_html__( 'Background Color', 'sellkit' ),
651 'type' => 'color',
652 'selectors' => [
653 '{{WRAPPER}} .sellkit-checkout-widget-primary-button:hover' => 'background-color: {{VALUE}} !important',
654 '{{WRAPPER}} #sellkit-checkout-widget-id .place-order .sellkit-checkout-widget-primary-button:hover' => 'background-color: {{VALUE}}',
655 '{{WRAPPER}} .sellkit-checkout-widget-main-wrapper #sellkit-checkout-widget-id form .place-order #place_order:is(button):hover' => 'background-color: {{VALUE}}',
656 ],
657 ]
658 );
659
660 $this->end_controls_tab();
661
662 $this->end_controls_tabs();
663
664 $this->divider( 'button_end_primary_hr' );
665
666 $this->add_group_control(
667 'border',
668 [
669 'name' => 'button_primary_border',
670 'label' => esc_html__( 'Border', 'sellkit' ),
671 'selector' => '{{WRAPPER}} #sellkit-checkout-widget-id .sellkit-checkout-widget-primary-button',
672 ]
673 );
674
675 $this->add_responsive_control(
676 'button_primary_border_radius',
677 [
678 'label' => esc_html__( 'Border Radius', 'sellkit' ),
679 'type' => 'dimensions',
680 'size_units' => [ 'px', '%', 'em' ],
681 'selectors' => [
682 '{{WRAPPER}} #sellkit-checkout-widget-id .sellkit-checkout-widget-primary-button' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
683 ],
684 ]
685 );
686
687 $this->add_responsive_control(
688 'button_primary_text_padding',
689 [
690 'label' => esc_html__( 'Text Padding', 'sellkit' ),
691 'type' => 'dimensions',
692 'size_units' => [ 'px', '%', 'em' ],
693 'selectors' => [
694 '{{WRAPPER}} #sellkit-checkout-widget-id .sellkit-checkout-widget-primary-button' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
695 ],
696 ]
697 );
698
699 $this->add_control(
700 'button_style_heading_2',
701 [
702 'label' => esc_html__( 'Secondary button', 'sellkit' ),
703 'type' => 'heading',
704 'separator' => 'before',
705 ]
706 );
707
708 $this->start_controls_tabs(
709 'button_secondary_style_tabs'
710 );
711
712 $this->start_controls_tab(
713 'button_secondary_style_normal_tab',
714 [
715 'label' => esc_html__( 'NORMAL', 'sellkit' ),
716 ]
717 );
718
719 $this->add_control(
720 'button_secondary_normal_color',
721 [
722 'label' => esc_html__( 'Text Color', 'sellkit' ),
723 'type' => 'color',
724 'selectors' => [
725 '{{WRAPPER}} .woocommerce-checkout .sellkit-checkout-widget-secondary-button' => 'color: {{VALUE}}',
726 ],
727 ]
728 );
729
730 $this->add_group_control(
731 'typography',
732 [
733 'name' => 'button_secondary_normal_typography',
734 'label' => esc_html__( 'Typography', 'sellkit' ),
735 'selector' => '{{WRAPPER}} .woocommerce-checkout .sellkit-checkout-widget-secondary-button',
736 ]
737 );
738
739 $this->add_control(
740 'button_secondary_normal_bg',
741 [
742 'label' => esc_html__( 'Background Color', 'sellkit' ),
743 'type' => 'color',
744 'selectors' => [
745 '{{WRAPPER}} .woocommerce-checkout .sellkit-checkout-widget-secondary-button' => 'background-color: {{VALUE}} !important',
746 ],
747 ]
748 );
749
750 $this->end_controls_tab();
751
752 $this->start_controls_tab(
753 'button_secondary_style_hover_tab',
754 [
755 'label' => esc_html__( 'HOVER', 'sellkit' ),
756 ]
757 );
758
759 $this->add_control(
760 'button_secondary_hover_color',
761 [
762 'label' => esc_html__( 'Text Color', 'sellkit' ),
763 'type' => 'color',
764 'selectors' => [
765 '{{WRAPPER}} .sellkit-checkout-widget-secondary-button:hover' => 'color: {{VALUE}}',
766 ],
767 ]
768 );
769
770 $this->add_group_control(
771 'typography',
772 [
773 'name' => 'button_secondary_hover_typography',
774 'label' => esc_html__( 'Typography', 'sellkit' ),
775 'selector' => '{{WRAPPER}} .sellkit-checkout-widget-secondary-button:hover',
776 ]
777 );
778
779 $this->add_control(
780 'button_secondary_hover_bg',
781 [
782 'label' => esc_html__( 'Background Color', 'sellkit' ),
783 'type' => 'color',
784 'selectors' => [
785 '{{WRAPPER}} .sellkit-checkout-widget-secondary-button:hover' => 'background-color: {{VALUE}} !important',
786 ],
787 ]
788 );
789
790 $this->end_controls_tab();
791
792 $this->end_controls_tabs();
793
794 $this->divider( 'button_end_secondary_hr' );
795
796 $this->add_group_control(
797 'border',
798 [
799 'name' => 'button_secondary_border',
800 'label' => esc_html__( 'Border', 'sellkit' ),
801 'selector' => '{{WRAPPER}} .sellkit-checkout-widget-secondary-button',
802 ]
803 );
804
805 $this->add_responsive_control(
806 'button_secondary_border_radius',
807 [
808 'label' => esc_html__( 'Border Radius', 'sellkit' ),
809 'type' => 'dimensions',
810 'size_units' => [ 'px', '%', 'em' ],
811 'selectors' => [
812 '{{WRAPPER}} .sellkit-checkout-widget-secondary-button' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
813 ],
814 ]
815 );
816
817 $this->add_responsive_control(
818 'button_secondary_text_padding',
819 [
820 'label' => esc_html__( 'Text Padding', 'sellkit' ),
821 'type' => 'dimensions',
822 'size_units' => [ 'px', '%', 'em' ],
823 'selectors' => [
824 '{{WRAPPER}} .sellkit-checkout-widget-secondary-button' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
825 ],
826 ]
827 );
828
829 $this->add_control(
830 'button_style_heading_3',
831 [
832 'label' => esc_html__( 'Return Link', 'sellkit' ),
833 'type' => 'heading',
834 'separator' => 'before',
835 ]
836 );
837
838 $this->add_group_control(
839 'typography',
840 [
841 'name' => 'button_return_link_typography',
842 'label' => esc_html__( 'Typography', 'sellkit' ),
843 'selector' => '{{WRAPPER}} .woocommerce-checkout .sellkit-checkout-widget-return-button > span',
844 ]
845 );
846
847 $this->add_control(
848 'button_return_link_icon_size',
849 [
850 'label' => esc_html__( 'Icon Size', 'sellkit' ),
851 'type' => Controls_Manager::SLIDER,
852 'size_units' => [ 'px' ],
853 'range' => [
854 'px' => [
855 'min' => 0,
856 'max' => 200,
857 'step' => 1,
858 ],
859 ],
860 'default' => [
861 'unit' => 'px',
862 'size' => 15,
863 ],
864 'selectors' => [
865 '{{WRAPPER}} .woocommerce-checkout .sellkit-checkout-widget-return-button > svg' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}};',
866 ],
867 ]
868 );
869
870 $this->start_controls_tabs(
871 'button_return_link_style_tabs'
872 );
873
874 $this->start_controls_tab(
875 'button_return_link_style_normal_tab',
876 [
877 'label' => esc_html__( 'NORMAL', 'sellkit' ),
878 ]
879 );
880
881 $this->add_control(
882 'button_return_link_normal_color',
883 [
884 'label' => esc_html__( 'Color', 'sellkit' ),
885 'type' => 'color',
886 'selectors' => [
887 '{{WRAPPER}} .sellkit-checkout-widget-return-button > span' => 'color: {{VALUE}}',
888 '{{WRAPPER}} .sellkit-checkout-widget-return-button > i' => 'color: {{VALUE}}',
889 '{{WRAPPER}} .sellkit-checkout-widget-return-button > svg' => 'fill: {{VALUE}}',
890 ],
891 ]
892 );
893
894 $this->end_controls_tab();
895
896 $this->start_controls_tab(
897 'button_return_link_style_hover_tab',
898 [
899 'label' => esc_html__( 'HOVER', 'sellkit' ),
900 ]
901 );
902
903 $this->add_control(
904 'button_return_link_hover_color',
905 [
906 'label' => esc_html__( 'Color', 'sellkit' ),
907 'type' => 'color',
908 'selectors' => [
909 '{{WRAPPER}} .sellkit-checkout-widget-return-button:hover > *' => 'color: {{VALUE}}',
910 ],
911 ]
912 );
913
914 $this->end_controls_tab();
915
916 $this->end_controls_tabs();
917
918 $this->end_controls_section();
919 }
920
921 private function fields_style() {
922 $this->start_controls_section(
923 'section_fields_style',
924 [
925 'label' => esc_html__( 'Field', 'sellkit' ),
926 'tab' => 'style',
927 ]
928 );
929
930 $this->add_control(
931 'field_style_heading_1',
932 [
933 'label' => esc_html__( 'Label', 'sellkit' ),
934 'type' => 'heading',
935 ]
936 );
937
938 $this->add_group_control(
939 'typography',
940 [
941 'name' => 'field_label_typography',
942 'label' => esc_html__( 'Typography', 'sellkit' ),
943 'selector' => '{{WRAPPER}} .sellkit-widget-checkout-fields p input::placeholder,
944 .sellkit-widget-checkout-fields p select::placeholder,
945 #sellkit-checkout-widget-id #sellkit-checkout-billing-field-wrapper .mini-title,
946 #sellkit-checkout-widget-id #sellkit-checkout-widget-shipping-fields .mini-title,
947 #sellkit-checkout-widget-id .sellkit-custom-coupon-form .jx-coupon::placeholder,
948 .sellkit-checkout-order-fields .sellkit-checkout-order-notes label',
949 ]
950 );
951
952 $this->add_control(
953 'field_section_color_',
954 [
955 'label' => esc_html__( 'Color', 'sellkit' ),
956 'type' => 'color',
957 'selectors' => [
958 '{{WRAPPER}} .sellkit-widget-checkout-fields p input::placeholder' => 'color: {{VALUE}}',
959 '{{WRAPPER}} .sellkit-widget-checkout-fields p select::placeholder' => 'color: {{VALUE}}',
960 '{{WRAPPER}} .sellkit-widget-checkout-fields p textarea::placeholder' => 'color: {{VALUE}}',
961 '{{WRAPPER}} #sellkit-checkout-widget-id #sellkit-checkout-billing-field-wrapper .mini-title' => 'color: {{VALUE}}',
962 '{{WRAPPER}} #sellkit-checkout-widget-id #sellkit-checkout-widget-shipping-fields .mini-title' => 'color: {{VALUE}}',
963 '{{WRAPPER}} #sellkit-checkout-widget-id .sellkit-custom-coupon-form .jx-coupon::placeholder' => 'color: {{VALUE}}',
964 '{{WRAPPER}} #sellkit-checkout-widget-id .sellkit-checkout-order-notes label' => 'color: {{VALUE}}',
965 ],
966 ]
967 );
968
969 $this->add_control(
970 'field_style_heading_2',
971 [
972 'label' => esc_html__( 'Input', 'sellkit' ),
973 'type' => 'heading',
974 'separator' => 'before',
975 ]
976 );
977
978 $this->add_group_control(
979 'typography',
980 [
981 'name' => 'field_input_typography',
982 'label' => esc_html__( 'Typography', 'sellkit' ),
983 'selector' => '{{WRAPPER}} #sellkit-checkout-widget-id .sellkit-widget-checkout-fields input,
984 #sellkit-checkout-widget-id .sellkit-widget-checkout-fields textarea,
985 #sellkit-checkout-widget-id .sellkit-widget-checkout-fields select,
986 #sellkit-checkout-widget-id .sellkit-widget-checkout-fields option,
987 #sellkit-checkout-widget-id .sellkit-custom-coupon-form .jx-coupon',
988 ]
989 );
990
991 $this->add_control(
992 'field_input_color',
993 [
994 'label' => esc_html__( 'Color', 'sellkit' ),
995 'type' => 'color',
996 'selectors' => [
997 '{{WRAPPER}} #sellkit-checkout-widget-id .sellkit-widget-checkout-fields input' => 'color: {{VALUE}}',
998 '{{WRAPPER}} #sellkit-checkout-widget-id .sellkit-widget-checkout-fields textarea' => 'color: {{VALUE}}',
999 '{{WRAPPER}} #sellkit-checkout-widget-id .sellkit-widget-checkout-fields select' => 'color: {{VALUE}}',
1000 '{{WRAPPER}} #sellkit-checkout-widget-id .sellkit-checkout-field-select .sellkit-select-appearance' => 'color: {{VALUE}}',
1001 '{{WRAPPER}} #sellkit-checkout-widget-id .sellkit-widget-checkout-fields option' => 'color: {{VALUE}}',
1002 '{{WRAPPER}} #sellkit-checkout-widget-id .sellkit-custom-coupon-form .jx-coupon' => 'color: {{VALUE}}',
1003 ],
1004 ]
1005 );
1006
1007 $this->add_control(
1008 'field_style_heading_3',
1009 [
1010 'label' => esc_html__( 'Border', 'sellkit' ),
1011 'type' => 'heading',
1012 'separator' => 'before',
1013 ]
1014 );
1015
1016 $this->add_group_control(
1017 'border',
1018 [
1019 'name' => 'field_border',
1020 'label' => esc_html__( 'Border', 'sellkit' ),
1021 'selector' => ' {{WRAPPER}} #sellkit-checkout-widget-id .sellkit-widget-checkout-fields input,
1022 {{WRAPPER}} #sellkit-checkout-widget-id .sellkit-widget-checkout-fields textarea,
1023 {{WRAPPER}} #sellkit-checkout-widget-id .sellkit-widget-checkout-fields select,
1024 {{WRAPPER}} #sellkit-checkout-widget-id .sellkit-custom-coupon-form .jx-coupon',
1025 ]
1026 );
1027
1028 $this->add_responsive_control(
1029 'fields_border_radius',
1030 [
1031 'label' => esc_html__( 'Border Radius', 'sellkit' ),
1032 'type' => 'dimensions',
1033 'size_units' => [ 'px', '%', 'em' ],
1034 'selectors' => [
1035 '{{WRAPPER}} #sellkit-checkout-widget-id .sellkit-widget-checkout-fields input' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1036 '{{WRAPPER}} #sellkit-checkout-widget-id .sellkit-widget-checkout-fields textarea' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1037 '{{WRAPPER}} #sellkit-checkout-widget-id .sellkit-widget-checkout-fields select' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1038 '{{WRAPPER}} #sellkit-checkout-widget-id .sellkit-custom-coupon-form .jx-coupon' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1039 ],
1040 ]
1041 );
1042
1043 $this->add_control(
1044 'field_border_focus_color',
1045 [
1046 'label' => esc_html__( 'Focus Color', 'sellkit' ),
1047 'type' => 'color',
1048 'selectors' => [
1049 '{{WRAPPER}} #sellkit-checkout-widget-id .sellkit-widget-checkout-fields textarea:focus' => 'border-color: {{VALUE}}',
1050 '{{WRAPPER}} #sellkit-checkout-widget-id .sellkit-widget-checkout-fields input:focus' => 'border-color: {{VALUE}}',
1051 '{{WRAPPER}} #sellkit-checkout-widget-id .sellkit-widget-checkout-fields select:focus' => 'border-color: {{VALUE}}',
1052 '{{WRAPPER}} #sellkit-checkout-widget-id .sellkit-custom-coupon-form .jx-coupon:focus' => 'color: {{VALUE}}',
1053 ],
1054 ]
1055 );
1056
1057 $this->add_control(
1058 'field_error_validate_color',
1059 [
1060 'label' => esc_html__( 'Error Validation Color', 'sellkit' ),
1061 'type' => 'color',
1062 'selectors' => [
1063 '{{WRAPPER}} #sellkit-checkout-widget-id .sellkit-checkout-fields-wrapper .required-alarm' => 'color: {{VALUE}}',
1064 '{{WRAPPER}} .login-section-error' => 'color: {{VALUE}}',
1065 '{{WRAPPER}} #sellkit-checkout-widget-id .sellkit-checkout-fields-wrapper .sellkit-checkout-field-global-errors' => 'color: {{VALUE}}',
1066 ],
1067 'separator' => 'after',
1068 ]
1069 );
1070
1071 $this->add_control(
1072 'fields_background_color_',
1073 [
1074 'label' => esc_html__( 'Background Color', 'sellkit' ),
1075 'type' => 'color',
1076 'selectors' => [
1077 '{{WRAPPER}} #sellkit-checkout-widget-id .sellkit-checkout-fields-wrapper input' => 'background-color: {{VALUE}}',
1078 '{{WRAPPER}} #sellkit-checkout-widget-id .sellkit-checkout-fields-wrapper select' => 'background-color: {{VALUE}}',
1079 '{{WRAPPER}} #sellkit-checkout-widget-id .sellkit-checkout-fields-wrapper textarea' => 'background-color: {{VALUE}}',
1080 '{{WRAPPER}} #sellkit-checkout-widget-id .sellkit-custom-coupon-form .jx-coupon' => 'background-color: {{VALUE}}',
1081 ],
1082 ]
1083 );
1084
1085 $this->end_controls_section();
1086 }
1087
1088 private function order_summary_style() {
1089 $this->start_controls_section(
1090 'section_order_summary_style',
1091 [
1092 'label' => esc_html__( 'Order Summary', 'sellkit' ),
1093 'tab' => 'style',
1094 ]
1095 );
1096
1097 $this->add_control(
1098 'order_summary_style_heading_0',
1099 [
1100 'label' => esc_html__( 'Container', 'sellkit' ),
1101 'type' => 'heading',
1102 'condition' => [
1103 'layout-type' => 'multi-step',
1104 ],
1105 ]
1106 );
1107
1108 $this->add_responsive_control(
1109 'order_summary_container_padding',
1110 [
1111 'label' => esc_html__( 'Padding', 'sellkit' ),
1112 'type' => 'dimensions',
1113 'separator' => 'after',
1114 'size_units' => [ 'px', '%', 'em' ],
1115 'selectors' => [
1116 '{{WRAPPER}} #sellkit-checkout-widget-id .sellkit-checkout-right-column' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1117 ],
1118 'condition' => [
1119 'layout-type' => 'multi-step',
1120 ],
1121 ]
1122 );
1123
1124 $this->add_control(
1125 'order_summary_style_heading_1',
1126 [
1127 'label' => esc_html__( 'Product', 'sellkit' ),
1128 'type' => 'heading',
1129 ]
1130 );
1131
1132 $this->add_control(
1133 'order_summary_show_image',
1134 [
1135 'label' => esc_html__( 'Enable Image', 'sellkit' ),
1136 'type' => 'switcher',
1137 'label_on' => esc_html__( 'Yes', 'sellkit' ),
1138 'label_off' => esc_html__( 'No', 'sellkit' ),
1139 'return_value' => 'yes',
1140 'default' => 'yes',
1141 ]
1142 );
1143
1144 $this->add_group_control(
1145 'typography',
1146 [
1147 'name' => 'order_summary_product_typography',
1148 'label' => esc_html__( 'Typography', 'sellkit' ),
1149 'selector' => '{{WRAPPER}} .sellkit-one-page-checkout-product-name .name-price,
1150 .sellkit-one-page-checkout-product-price *',
1151 ]
1152 );
1153
1154 $this->add_control(
1155 'order_summary_product_color',
1156 [
1157 'label' => esc_html__( 'Color', 'sellkit' ),
1158 'type' => 'color',
1159 'selectors' => [
1160 '{{WRAPPER}} .sellkit-one-page-checkout-product-name .name-price' => 'color: {{VALUE}}',
1161 '{{WRAPPER}} .sellkit-one-page-checkout-product-price *' => 'color: {{VALUE}}',
1162 ],
1163 ]
1164 );
1165
1166 $this->add_control(
1167 'order_summary_item_image_border_color',
1168 [
1169 'label' => esc_html__( 'Image Border Color', 'sellkit' ),
1170 'type' => 'color',
1171 'selectors' => [
1172 '{{WRAPPER}} .sellkit-one-page-checkout-product-name img' => 'border: 1px solid {{VALUE}}',
1173 ],
1174 ]
1175 );
1176
1177 $this->divider( 'order_summary_divider_1' );
1178
1179 $this->add_control(
1180 'order_summary_style_heading_product_variation',
1181 [
1182 'label' => esc_html__( 'Product Variation', 'sellkit' ),
1183 'type' => 'heading',
1184 ]
1185 );
1186
1187 $this->add_group_control(
1188 Group_Control_Typography::get_type(),
1189 [
1190 'name' => 'product_variation_typography',
1191 'selector' => '{{WRAPPER}} #sellkit-checkout-variations .sellkit-checkout-variation-item,
1192 {{WRAPPER}} #sellkit-checkout-variations i',
1193 ]
1194 );
1195
1196 $this->add_control(
1197 'product_variation_text_color',
1198 [
1199 'label' => esc_html__( 'Color', 'sellkit' ),
1200 'type' => Controls_Manager::COLOR,
1201 'selectors' => [
1202 '{{WRAPPER}} #sellkit-checkout-variations .sellkit-checkout-variation-item' => 'color: {{VALUE}} !important',
1203 '{{WRAPPER}} #sellkit-checkout-variations i' => 'color: {{VALUE}} !important',
1204 ],
1205 'global' => [
1206 'default' => Global_Colors::COLOR_TEXT,
1207 ],
1208 ]
1209 );
1210
1211 $this->divider( 'order_summary_divider_variation_ends' );
1212
1213 $this->add_control(
1214 'order_summary_style_heading_2',
1215 [
1216 'label' => esc_html__( 'Subtotal', 'sellkit' ),
1217 'type' => 'heading',
1218 ]
1219 );
1220
1221 $this->add_group_control(
1222 'typography',
1223 [
1224 'name' => 'order_summary_subtotal_typography',
1225 'label' => esc_html__( 'Typography', 'sellkit' ),
1226 'selector' => '{{WRAPPER}} #sellkit-checkout-widget-id #order_review tfoot tr:not(:last-child) th,
1227 #sellkit-checkout-widget-id #order_review tfoot tr:not(:last-child) td,
1228 #sellkit-checkout-widget-id #order_review tfoot tr:not(:last-child) td *',
1229 ]
1230 );
1231
1232 $this->add_control(
1233 'order_summary_subtotal_color',
1234 [
1235 'label' => esc_html__( 'Color', 'sellkit' ),
1236 'type' => 'color',
1237 'selectors' => [
1238 '{{WRAPPER}} #sellkit-checkout-widget-id #order_review tfoot tr:not(:last-child) th' => 'color: {{VALUE}}',
1239 '{{WRAPPER}} #sellkit-checkout-widget-id #order_review tfoot tr:not(:last-child) td' => 'color: {{VALUE}}',
1240 '{{WRAPPER}} #sellkit-checkout-widget-id #order_review tfoot tr:not(:last-child) td *' => 'color: {{VALUE}}',
1241 ],
1242 ]
1243 );
1244
1245 $this->divider( 'order_summary_divider_2' );
1246
1247 $this->add_control(
1248 'order_summary_style_heading_3',
1249 [
1250 'label' => esc_html__( 'Total', 'sellkit' ),
1251 'type' => 'heading',
1252 ]
1253 );
1254
1255 $this->add_group_control(
1256 'typography',
1257 [
1258 'name' => 'order_summary_total_typography',
1259 'label' => esc_html__( 'Typography', 'sellkit' ),
1260 'selector' => '{{WRAPPER}} #sellkit-checkout-widget-id .order-total th, .order-total td *',
1261 ]
1262 );
1263
1264 $this->add_control(
1265 'order_summary_total_color',
1266 [
1267 'label' => esc_html__( 'Color', 'sellkit' ),
1268 'type' => 'color',
1269 'selectors' => [
1270 '{{WRAPPER}} #sellkit-checkout-widget-id .order-total th' => 'color: {{VALUE}}',
1271 '{{WRAPPER}} .order-total td *' => 'color: {{VALUE}}',
1272 ],
1273 ]
1274 );
1275
1276 $this->divider( 'order_summary_divider_3' );
1277
1278 $this->add_control(
1279 'order_summary_background_color',
1280 [
1281 'label' => esc_html__( 'Background Color', 'sellkit' ),
1282 'type' => 'color',
1283 'selectors' => [
1284 '{{WRAPPER}} #sellkit-checkout-widget-id .sellkit-multistep-checkout-sidebar' => 'background-color: {{VALUE}} !important',
1285 ],
1286 ]
1287 );
1288
1289 $this->add_control(
1290 'order_summary_inner_wrap_background_color',
1291 [
1292 'label' => esc_html__( 'Inner Background Color', 'sellkit' ),
1293 'type' => 'color',
1294 'selectors' => [
1295 '{{WRAPPER}} #sellkit-checkout-widget-id .sellkit-multistep-checkout-sidebar #sellkit-checkout-widget-order-review-wrap' => 'background-color: {{VALUE}} !important',
1296 ],
1297 'condition' => [
1298 'layout-type' => 'multi-step',
1299 ],
1300 ]
1301 );
1302
1303 $this->divider( 'order_summary_divider_4' );
1304
1305 $this->add_group_control(
1306 'border',
1307 [
1308 'name' => 'order_summary_border',
1309 'label' => esc_html__( 'Border Type', 'sellkit' ),
1310 'selector' => '{{WRAPPER}} #sellkit-checkout-widget-id .sellkit-multistep-checkout-sidebar',
1311 ]
1312 );
1313
1314 $this->add_responsive_control(
1315 'order_summary_border_radius',
1316 [
1317 'label' => esc_html__( 'Border Radius', 'sellkit' ),
1318 'type' => 'dimensions',
1319 'size_units' => [ 'px', '%', 'em' ],
1320 'selectors' => [
1321 '{{WRAPPER}} #sellkit-checkout-widget-id .sellkit-multistep-checkout-sidebar' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1322 ],
1323 ]
1324 );
1325
1326 $this->divider( 'order_summary_divider_5' );
1327
1328 $this->add_group_control(
1329 'box-shadow',
1330 [
1331 'name' => 'order_summary_box_shadow',
1332 'label' => esc_html__( 'Box Shadow', 'sellkit' ),
1333 'selector' => '{{WRAPPER}} #sellkit-checkout-widget-id .sellkit-multistep-checkout-sidebar',
1334 ]
1335 );
1336
1337 $this->divider( 'order_summary_divider_6' );
1338
1339 $this->add_responsive_control(
1340 'order_summary_padding',
1341 [
1342 'label' => esc_html__( 'Padding', 'sellkit' ),
1343 'type' => 'dimensions',
1344 'size_units' => [ 'px', '%', 'em' ],
1345 'selectors' => [
1346 '{{WRAPPER}} #sellkit-checkout-widget-id .sellkit-multistep-checkout-sidebar' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1347 ],
1348 ]
1349 );
1350
1351 $this->add_responsive_control(
1352 'order_summary_margin',
1353 [
1354 'label' => esc_html__( 'Margin', 'sellkit' ),
1355 'type' => 'dimensions',
1356 'size_units' => [ 'px', '%', 'em' ],
1357 'selectors' => [
1358 '{{WRAPPER}} #sellkit-checkout-widget-id .sellkit-multistep-checkout-sidebar' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1359 ],
1360 ]
1361 );
1362
1363 $this->end_controls_section();
1364 }
1365
1366 private function divider( $name ) {
1367 $this->add_control(
1368 $name,
1369 [
1370 'type' => 'divider',
1371 ]
1372 );
1373 }
1374 }
1375