PluginProbe
SellKit – Funnel builder and checkout optimizer for WooCommerce to sell more, faster / 1.7.2
SellKit – Funnel builder and checkout optimizer for WooCommerce to sell more, faster v1.7.2
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 1.8.1 All 42 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 1.7.2, at includes/elementor/modules/checkout/widgets/style-controls.php

1,343 lines 38.1 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 ],
583 ]
584 );
585
586 $this->add_group_control(
587 'typography',
588 [
589 'name' => 'button_primary_normal_typography',
590 'label' => esc_html__( 'Typography', 'sellkit' ),
591 'selector' => '{{WRAPPER}} #sellkit-checkout-widget-id .sellkit-checkout-widget-primary-button',
592 'fields_options' => [
593 'typography' => [
594 'default' => 'yes',
595 ],
596 'text_transform' => [
597 'default' => 'none',
598 ],
599 ],
600 ]
601 );
602
603 $this->add_control(
604 'button_primary_normal_bg',
605 [
606 'label' => esc_html__( 'Background Color', 'sellkit' ),
607 'type' => 'color',
608 'selectors' => [
609 '{{WRAPPER}} .sellkit-checkout-widget-primary-button' => 'background-color: {{VALUE}} !important',
610 ],
611 ]
612 );
613
614 $this->end_controls_tab();
615
616 $this->start_controls_tab(
617 'button_primary_style_hover_tab',
618 [
619 'label' => esc_html__( 'HOVER', 'sellkit' ),
620 ]
621 );
622
623 $this->add_control(
624 'button_primary_hover_color',
625 [
626 'label' => esc_html__( 'Text Color', 'sellkit' ),
627 'type' => 'color',
628 'selectors' => [
629 '{{WRAPPER}} .sellkit-checkout-widget-primary-button:hover' => 'color: {{VALUE}} !important',
630 ],
631 ]
632 );
633
634 $this->add_group_control(
635 'typography',
636 [
637 'name' => 'button_primary_hover_typography',
638 'label' => esc_html__( 'Typography', 'sellkit' ),
639 'selector' => '{{WRAPPER}} #sellkit-checkout-widget-id .sellkit-checkout-widget-primary-button:hover',
640 ]
641 );
642
643 $this->add_control(
644 'button_primary_hover_bg',
645 [
646 'label' => esc_html__( 'Background Color', 'sellkit' ),
647 'type' => 'color',
648 'selectors' => [
649 '{{WRAPPER}} .sellkit-checkout-widget-primary-button:hover' => 'background-color: {{VALUE}} !important',
650 ],
651 ]
652 );
653
654 $this->end_controls_tab();
655
656 $this->end_controls_tabs();
657
658 $this->divider( 'button_end_primary_hr' );
659
660 $this->add_group_control(
661 'border',
662 [
663 'name' => 'button_primary_border',
664 'label' => esc_html__( 'Border', 'sellkit' ),
665 'selector' => '{{WRAPPER}} #sellkit-checkout-widget-id .sellkit-checkout-widget-primary-button',
666 ]
667 );
668
669 $this->add_responsive_control(
670 'button_primary_border_radius',
671 [
672 'label' => esc_html__( 'Border Radius', 'sellkit' ),
673 'type' => 'dimensions',
674 'size_units' => [ 'px', '%', 'em' ],
675 'selectors' => [
676 '{{WRAPPER}} #sellkit-checkout-widget-id .sellkit-checkout-widget-primary-button' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
677 ],
678 ]
679 );
680
681 $this->add_responsive_control(
682 'button_primary_text_padding',
683 [
684 'label' => esc_html__( 'Text Padding', 'sellkit' ),
685 'type' => 'dimensions',
686 'size_units' => [ 'px', '%', 'em' ],
687 'selectors' => [
688 '{{WRAPPER}} #sellkit-checkout-widget-id .sellkit-checkout-widget-primary-button' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
689 ],
690 ]
691 );
692
693 $this->add_control(
694 'button_style_heading_2',
695 [
696 'label' => esc_html__( 'Secondary button', 'sellkit' ),
697 'type' => 'heading',
698 'separator' => 'before',
699 ]
700 );
701
702 $this->start_controls_tabs(
703 'button_secondary_style_tabs'
704 );
705
706 $this->start_controls_tab(
707 'button_secondary_style_normal_tab',
708 [
709 'label' => esc_html__( 'NORMAL', 'sellkit' ),
710 ]
711 );
712
713 $this->add_control(
714 'button_secondary_normal_color',
715 [
716 'label' => esc_html__( 'Text Color', 'sellkit' ),
717 'type' => 'color',
718 'selectors' => [
719 '{{WRAPPER}} .woocommerce-checkout .sellkit-checkout-widget-secondary-button' => 'color: {{VALUE}}',
720 ],
721 ]
722 );
723
724 $this->add_group_control(
725 'typography',
726 [
727 'name' => 'button_secondary_normal_typography',
728 'label' => esc_html__( 'Typography', 'sellkit' ),
729 'selector' => '{{WRAPPER}} .woocommerce-checkout .sellkit-checkout-widget-secondary-button',
730 ]
731 );
732
733 $this->add_control(
734 'button_secondary_normal_bg',
735 [
736 'label' => esc_html__( 'Background Color', 'sellkit' ),
737 'type' => 'color',
738 'selectors' => [
739 '{{WRAPPER}} .woocommerce-checkout .sellkit-checkout-widget-secondary-button' => 'background-color: {{VALUE}} !important',
740 ],
741 ]
742 );
743
744 $this->end_controls_tab();
745
746 $this->start_controls_tab(
747 'button_secondary_style_hover_tab',
748 [
749 'label' => esc_html__( 'HOVER', 'sellkit' ),
750 ]
751 );
752
753 $this->add_control(
754 'button_secondary_hover_color',
755 [
756 'label' => esc_html__( 'Text Color', 'sellkit' ),
757 'type' => 'color',
758 'selectors' => [
759 '{{WRAPPER}} .sellkit-checkout-widget-secondary-button:hover' => 'color: {{VALUE}}',
760 ],
761 ]
762 );
763
764 $this->add_group_control(
765 'typography',
766 [
767 'name' => 'button_secondary_hover_typography',
768 'label' => esc_html__( 'Typography', 'sellkit' ),
769 'selector' => '{{WRAPPER}} .sellkit-checkout-widget-secondary-button:hover',
770 ]
771 );
772
773 $this->add_control(
774 'button_secondary_hover_bg',
775 [
776 'label' => esc_html__( 'Background Color', 'sellkit' ),
777 'type' => 'color',
778 'selectors' => [
779 '{{WRAPPER}} .sellkit-checkout-widget-secondary-button:hover' => 'background-color: {{VALUE}} !important',
780 ],
781 ]
782 );
783
784 $this->end_controls_tab();
785
786 $this->end_controls_tabs();
787
788 $this->divider( 'button_end_secondary_hr' );
789
790 $this->add_group_control(
791 'border',
792 [
793 'name' => 'button_secondary_border',
794 'label' => esc_html__( 'Border', 'sellkit' ),
795 'selector' => '{{WRAPPER}} .sellkit-checkout-widget-secondary-button',
796 ]
797 );
798
799 $this->add_responsive_control(
800 'button_secondary_border_radius',
801 [
802 'label' => esc_html__( 'Border Radius', 'sellkit' ),
803 'type' => 'dimensions',
804 'size_units' => [ 'px', '%', 'em' ],
805 'selectors' => [
806 '{{WRAPPER}} .sellkit-checkout-widget-secondary-button' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
807 ],
808 ]
809 );
810
811 $this->add_responsive_control(
812 'button_secondary_text_padding',
813 [
814 'label' => esc_html__( 'Text Padding', 'sellkit' ),
815 'type' => 'dimensions',
816 'size_units' => [ 'px', '%', 'em' ],
817 'selectors' => [
818 '{{WRAPPER}} .sellkit-checkout-widget-secondary-button' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
819 ],
820 ]
821 );
822
823 $this->add_control(
824 'button_style_heading_3',
825 [
826 'label' => esc_html__( 'Return Link', 'sellkit' ),
827 'type' => 'heading',
828 'separator' => 'before',
829 ]
830 );
831
832 $this->add_group_control(
833 'typography',
834 [
835 'name' => 'button_return_link_typography',
836 'label' => esc_html__( 'Typography', 'sellkit' ),
837 'selector' => '{{WRAPPER}} .woocommerce-checkout .sellkit-checkout-widget-return-button > span',
838 ]
839 );
840
841 $this->start_controls_tabs(
842 'button_return_link_style_tabs'
843 );
844
845 $this->start_controls_tab(
846 'button_return_link_style_normal_tab',
847 [
848 'label' => esc_html__( 'NORMAL', 'sellkit' ),
849 ]
850 );
851
852 $this->add_control(
853 'button_return_link_normal_color',
854 [
855 'label' => esc_html__( 'Color', 'sellkit' ),
856 'type' => 'color',
857 'selectors' => [
858 '{{WRAPPER}} .sellkit-checkout-widget-return-button > span' => 'color: {{VALUE}}',
859 '{{WRAPPER}} .sellkit-checkout-widget-return-button > i' => 'color: {{VALUE}}',
860 ],
861 ]
862 );
863
864 $this->end_controls_tab();
865
866 $this->start_controls_tab(
867 'button_return_link_style_hover_tab',
868 [
869 'label' => esc_html__( 'HOVER', 'sellkit' ),
870 ]
871 );
872
873 $this->add_control(
874 'button_return_link_hover_color',
875 [
876 'label' => esc_html__( 'Color', 'sellkit' ),
877 'type' => 'color',
878 'selectors' => [
879 '{{WRAPPER}} .sellkit-checkout-widget-return-button:hover > *' => 'color: {{VALUE}}',
880 ],
881 ]
882 );
883
884 $this->end_controls_tab();
885
886 $this->end_controls_tabs();
887
888 $this->end_controls_section();
889 }
890
891 private function fields_style() {
892 $this->start_controls_section(
893 'section_fields_style',
894 [
895 'label' => esc_html__( 'Field', 'sellkit' ),
896 'tab' => 'style',
897 ]
898 );
899
900 $this->add_control(
901 'field_style_heading_1',
902 [
903 'label' => esc_html__( 'Label', 'sellkit' ),
904 'type' => 'heading',
905 ]
906 );
907
908 $this->add_group_control(
909 'typography',
910 [
911 'name' => 'field_label_typography',
912 'label' => esc_html__( 'Typography', 'sellkit' ),
913 'selector' => '{{WRAPPER}} .sellkit-widget-checkout-fields p input::placeholder,
914 .sellkit-widget-checkout-fields p select::placeholder,
915 #sellkit-checkout-widget-id #sellkit-checkout-billing-field-wrapper .mini-title,
916 #sellkit-checkout-widget-id #sellkit-checkout-widget-shipping-fields .mini-title,
917 #sellkit-checkout-widget-id .sellkit-custom-coupon-form .jx-coupon::placeholder',
918 ]
919 );
920
921 $this->add_control(
922 'field_section_color_',
923 [
924 'label' => esc_html__( 'Color', 'sellkit' ),
925 'type' => 'color',
926 'selectors' => [
927 '{{WRAPPER}} .sellkit-widget-checkout-fields p input::placeholder' => 'color: {{VALUE}}',
928 '{{WRAPPER}} .sellkit-widget-checkout-fields p select::placeholder' => 'color: {{VALUE}}',
929 '{{WRAPPER}} .sellkit-widget-checkout-fields p textarea::placeholder' => 'color: {{VALUE}}',
930 '{{WRAPPER}} #sellkit-checkout-widget-id #sellkit-checkout-billing-field-wrapper .mini-title' => 'color: {{VALUE}}',
931 '{{WRAPPER}} #sellkit-checkout-widget-id #sellkit-checkout-widget-shipping-fields .mini-title' => 'color: {{VALUE}}',
932 '{{WRAPPER}} #sellkit-checkout-widget-id .sellkit-custom-coupon-form .jx-coupon::placeholder' => 'color: {{VALUE}}',
933 ],
934 ]
935 );
936
937 $this->add_control(
938 'field_style_heading_2',
939 [
940 'label' => esc_html__( 'Input', 'sellkit' ),
941 'type' => 'heading',
942 'separator' => 'before',
943 ]
944 );
945
946 $this->add_group_control(
947 'typography',
948 [
949 'name' => 'field_input_typography',
950 'label' => esc_html__( 'Typography', 'sellkit' ),
951 'selector' => '{{WRAPPER}} #sellkit-checkout-widget-id .sellkit-widget-checkout-fields input,
952 #sellkit-checkout-widget-id .sellkit-widget-checkout-fields textarea,
953 #sellkit-checkout-widget-id .sellkit-widget-checkout-fields select,
954 #sellkit-checkout-widget-id .sellkit-widget-checkout-fields option,
955 #sellkit-checkout-widget-id .sellkit-custom-coupon-form .jx-coupon',
956 ]
957 );
958
959 $this->add_control(
960 'field_input_color',
961 [
962 'label' => esc_html__( 'Color', 'sellkit' ),
963 'type' => 'color',
964 'selectors' => [
965 '{{WRAPPER}} #sellkit-checkout-widget-id .sellkit-widget-checkout-fields input' => 'color: {{VALUE}}',
966 '{{WRAPPER}} #sellkit-checkout-widget-id .sellkit-widget-checkout-fields textarea' => 'color: {{VALUE}}',
967 '{{WRAPPER}} #sellkit-checkout-widget-id .sellkit-widget-checkout-fields select' => 'color: {{VALUE}}',
968 '{{WRAPPER}} #sellkit-checkout-widget-id .sellkit-checkout-field-select .sellkit-select-appearance' => 'color: {{VALUE}}',
969 '{{WRAPPER}} #sellkit-checkout-widget-id .sellkit-widget-checkout-fields option' => 'color: {{VALUE}}',
970 '{{WRAPPER}} #sellkit-checkout-widget-id .sellkit-custom-coupon-form .jx-coupon' => 'color: {{VALUE}}',
971 ],
972 ]
973 );
974
975 $this->add_control(
976 'field_style_heading_3',
977 [
978 'label' => esc_html__( 'Border', 'sellkit' ),
979 'type' => 'heading',
980 'separator' => 'before',
981 ]
982 );
983
984 $this->add_group_control(
985 'border',
986 [
987 'name' => 'field_border',
988 'label' => esc_html__( 'Border', 'sellkit' ),
989 'selector' => ' {{WRAPPER}} #sellkit-checkout-widget-id .sellkit-widget-checkout-fields input,
990 {{WRAPPER}} #sellkit-checkout-widget-id .sellkit-widget-checkout-fields textarea,
991 {{WRAPPER}} #sellkit-checkout-widget-id .sellkit-widget-checkout-fields select,
992 {{WRAPPER}} #sellkit-checkout-widget-id .sellkit-custom-coupon-form .jx-coupon',
993 ]
994 );
995
996 $this->add_responsive_control(
997 'fields_border_radius',
998 [
999 'label' => esc_html__( 'Border Radius', 'sellkit' ),
1000 'type' => 'dimensions',
1001 'size_units' => [ 'px', '%', 'em' ],
1002 'selectors' => [
1003 '{{WRAPPER}} #sellkit-checkout-widget-id .sellkit-widget-checkout-fields input' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1004 '{{WRAPPER}} #sellkit-checkout-widget-id .sellkit-widget-checkout-fields textarea' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1005 '{{WRAPPER}} #sellkit-checkout-widget-id .sellkit-widget-checkout-fields select' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1006 '{{WRAPPER}} #sellkit-checkout-widget-id .sellkit-custom-coupon-form .jx-coupon' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1007 ],
1008 ]
1009 );
1010
1011 $this->add_control(
1012 'field_border_focus_color',
1013 [
1014 'label' => esc_html__( 'Focus Color', 'sellkit' ),
1015 'type' => 'color',
1016 'selectors' => [
1017 '{{WRAPPER}} #sellkit-checkout-widget-id .sellkit-widget-checkout-fields textarea:focus' => 'border-color: {{VALUE}}',
1018 '{{WRAPPER}} #sellkit-checkout-widget-id .sellkit-widget-checkout-fields input:focus' => 'border-color: {{VALUE}}',
1019 '{{WRAPPER}} #sellkit-checkout-widget-id .sellkit-widget-checkout-fields select:focus' => 'border-color: {{VALUE}}',
1020 '{{WRAPPER}} #sellkit-checkout-widget-id .sellkit-custom-coupon-form .jx-coupon:focus' => 'color: {{VALUE}}',
1021 ],
1022 ]
1023 );
1024
1025 $this->add_control(
1026 'field_error_validate_color',
1027 [
1028 'label' => esc_html__( 'Error Validation Color', 'sellkit' ),
1029 'type' => 'color',
1030 'selectors' => [
1031 '{{WRAPPER}} #sellkit-checkout-widget-id .sellkit-checkout-fields-wrapper .required-alarm' => 'color: {{VALUE}}',
1032 '{{WRAPPER}} .login-section-error' => 'color: {{VALUE}}',
1033 '{{WRAPPER}} #sellkit-checkout-widget-id .sellkit-checkout-fields-wrapper .sellkit-checkout-field-global-errors' => 'color: {{VALUE}}',
1034 ],
1035 'separator' => 'after',
1036 ]
1037 );
1038
1039 $this->add_control(
1040 'fields_background_color_',
1041 [
1042 'label' => esc_html__( 'Background Color', 'sellkit' ),
1043 'type' => 'color',
1044 'selectors' => [
1045 '{{WRAPPER}} #sellkit-checkout-widget-id .sellkit-checkout-fields-wrapper input' => 'background-color: {{VALUE}}',
1046 '{{WRAPPER}} #sellkit-checkout-widget-id .sellkit-checkout-fields-wrapper select' => 'background-color: {{VALUE}}',
1047 '{{WRAPPER}} #sellkit-checkout-widget-id .sellkit-checkout-fields-wrapper textarea' => 'background-color: {{VALUE}}',
1048 '{{WRAPPER}} #sellkit-checkout-widget-id .sellkit-custom-coupon-form .jx-coupon' => 'background-color: {{VALUE}}',
1049 ],
1050 ]
1051 );
1052
1053 $this->end_controls_section();
1054 }
1055
1056 private function order_summary_style() {
1057 $this->start_controls_section(
1058 'section_order_summary_style',
1059 [
1060 'label' => esc_html__( 'Order Summary', 'sellkit' ),
1061 'tab' => 'style',
1062 ]
1063 );
1064
1065 $this->add_control(
1066 'order_summary_style_heading_0',
1067 [
1068 'label' => esc_html__( 'Container', 'sellkit' ),
1069 'type' => 'heading',
1070 'condition' => [
1071 'layout-type' => 'multi-step',
1072 ],
1073 ]
1074 );
1075
1076 $this->add_responsive_control(
1077 'order_summary_container_padding',
1078 [
1079 'label' => esc_html__( 'Padding', 'sellkit' ),
1080 'type' => 'dimensions',
1081 'separator' => 'after',
1082 'size_units' => [ 'px', '%', 'em' ],
1083 'selectors' => [
1084 '{{WRAPPER}} #sellkit-checkout-widget-id .sellkit-checkout-right-column' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1085 ],
1086 'condition' => [
1087 'layout-type' => 'multi-step',
1088 ],
1089 ]
1090 );
1091
1092 $this->add_control(
1093 'order_summary_style_heading_1',
1094 [
1095 'label' => esc_html__( 'Product', 'sellkit' ),
1096 'type' => 'heading',
1097 ]
1098 );
1099
1100 $this->add_control(
1101 'order_summary_show_image',
1102 [
1103 'label' => esc_html__( 'Enable Image', 'sellkit' ),
1104 'type' => 'switcher',
1105 'label_on' => esc_html__( 'Yes', 'sellkit' ),
1106 'label_off' => esc_html__( 'No', 'sellkit' ),
1107 'return_value' => 'yes',
1108 'default' => 'yes',
1109 ]
1110 );
1111
1112 $this->add_group_control(
1113 'typography',
1114 [
1115 'name' => 'order_summary_product_typography',
1116 'label' => esc_html__( 'Typography', 'sellkit' ),
1117 'selector' => '{{WRAPPER}} .sellkit-one-page-checkout-product-name .name-price,
1118 .sellkit-one-page-checkout-product-price *',
1119 ]
1120 );
1121
1122 $this->add_control(
1123 'order_summary_product_color',
1124 [
1125 'label' => esc_html__( 'Color', 'sellkit' ),
1126 'type' => 'color',
1127 'selectors' => [
1128 '{{WRAPPER}} .sellkit-one-page-checkout-product-name .name-price' => 'color: {{VALUE}}',
1129 '{{WRAPPER}} .sellkit-one-page-checkout-product-price *' => 'color: {{VALUE}}',
1130 ],
1131 ]
1132 );
1133
1134 $this->add_control(
1135 'order_summary_item_image_border_color',
1136 [
1137 'label' => esc_html__( 'Image Border Color', 'sellkit' ),
1138 'type' => 'color',
1139 'selectors' => [
1140 '{{WRAPPER}} .sellkit-one-page-checkout-product-name img' => 'border: 1px solid {{VALUE}}',
1141 ],
1142 ]
1143 );
1144
1145 $this->divider( 'order_summary_divider_1' );
1146
1147 $this->add_control(
1148 'order_summary_style_heading_product_variation',
1149 [
1150 'label' => esc_html__( 'Product Variation', 'sellkit' ),
1151 'type' => 'heading',
1152 ]
1153 );
1154
1155 $this->add_group_control(
1156 Group_Control_Typography::get_type(),
1157 [
1158 'name' => 'product_variation_typography',
1159 'selector' => '{{WRAPPER}} #sellkit-checkout-variations .sellkit-checkout-variation-item,
1160 {{WRAPPER}} #sellkit-checkout-variations i',
1161 ]
1162 );
1163
1164 $this->add_control(
1165 'product_variation_text_color',
1166 [
1167 'label' => esc_html__( 'Color', 'jupiterx-core' ),
1168 'type' => Controls_Manager::COLOR,
1169 'selectors' => [
1170 '{{WRAPPER}} #sellkit-checkout-variations .sellkit-checkout-variation-item' => 'color: {{VALUE}} !important',
1171 '{{WRAPPER}} #sellkit-checkout-variations i' => 'color: {{VALUE}} !important',
1172 ],
1173 'global' => [
1174 'default' => Global_Colors::COLOR_TEXT,
1175 ],
1176 ]
1177 );
1178
1179 $this->divider( 'order_summary_divider_variation_ends' );
1180
1181 $this->add_control(
1182 'order_summary_style_heading_2',
1183 [
1184 'label' => esc_html__( 'Subtotal', 'sellkit' ),
1185 'type' => 'heading',
1186 ]
1187 );
1188
1189 $this->add_group_control(
1190 'typography',
1191 [
1192 'name' => 'order_summary_subtotal_typography',
1193 'label' => esc_html__( 'Typography', 'sellkit' ),
1194 'selector' => '{{WRAPPER}} #sellkit-checkout-widget-id #order_review tfoot tr:not(:last-child) th,
1195 #sellkit-checkout-widget-id #order_review tfoot tr:not(:last-child) td,
1196 #sellkit-checkout-widget-id #order_review tfoot tr:not(:last-child) td *',
1197 ]
1198 );
1199
1200 $this->add_control(
1201 'order_summary_subtotal_color',
1202 [
1203 'label' => esc_html__( 'Color', 'sellkit' ),
1204 'type' => 'color',
1205 'selectors' => [
1206 '{{WRAPPER}} #sellkit-checkout-widget-id #order_review tfoot tr:not(:last-child) th' => 'color: {{VALUE}}',
1207 '{{WRAPPER}} #sellkit-checkout-widget-id #order_review tfoot tr:not(:last-child) td' => 'color: {{VALUE}}',
1208 '{{WRAPPER}} #sellkit-checkout-widget-id #order_review tfoot tr:not(:last-child) td *' => 'color: {{VALUE}}',
1209 ],
1210 ]
1211 );
1212
1213 $this->divider( 'order_summary_divider_2' );
1214
1215 $this->add_control(
1216 'order_summary_style_heading_3',
1217 [
1218 'label' => esc_html__( 'Total', 'sellkit' ),
1219 'type' => 'heading',
1220 ]
1221 );
1222
1223 $this->add_group_control(
1224 'typography',
1225 [
1226 'name' => 'order_summary_total_typography',
1227 'label' => esc_html__( 'Typography', 'sellkit' ),
1228 'selector' => '{{WRAPPER}} #sellkit-checkout-widget-id .order-total th, .order-total td *',
1229 ]
1230 );
1231
1232 $this->add_control(
1233 'order_summary_total_color',
1234 [
1235 'label' => esc_html__( 'Color', 'sellkit' ),
1236 'type' => 'color',
1237 'selectors' => [
1238 '{{WRAPPER}} #sellkit-checkout-widget-id .order-total th' => 'color: {{VALUE}}',
1239 '{{WRAPPER}} .order-total td *' => 'color: {{VALUE}}',
1240 ],
1241 ]
1242 );
1243
1244 $this->divider( 'order_summary_divider_3' );
1245
1246 $this->add_control(
1247 'order_summary_background_color',
1248 [
1249 'label' => esc_html__( 'Background Color', 'sellkit' ),
1250 'type' => 'color',
1251 'selectors' => [
1252 '{{WRAPPER}} #sellkit-checkout-widget-id .sellkit-multistep-checkout-sidebar' => 'background-color: {{VALUE}} !important',
1253 ],
1254 ]
1255 );
1256
1257 $this->add_control(
1258 'order_summary_inner_wrap_background_color',
1259 [
1260 'label' => esc_html__( 'Inner Background Color', 'sellkit' ),
1261 'type' => 'color',
1262 'selectors' => [
1263 '{{WRAPPER}} #sellkit-checkout-widget-id .sellkit-multistep-checkout-sidebar #sellkit-checkout-widget-order-review-wrap' => 'background-color: {{VALUE}} !important',
1264 ],
1265 'condition' => [
1266 'layout-type' => 'multi-step',
1267 ],
1268 ]
1269 );
1270
1271 $this->divider( 'order_summary_divider_4' );
1272
1273 $this->add_group_control(
1274 'border',
1275 [
1276 'name' => 'order_summary_border',
1277 'label' => esc_html__( 'Border Type', 'sellkit' ),
1278 'selector' => '{{WRAPPER}} #sellkit-checkout-widget-id .sellkit-multistep-checkout-sidebar',
1279 ]
1280 );
1281
1282 $this->add_responsive_control(
1283 'order_summary_border_radius',
1284 [
1285 'label' => esc_html__( 'Border Radius', 'sellkit' ),
1286 'type' => 'dimensions',
1287 'size_units' => [ 'px', '%', 'em' ],
1288 'selectors' => [
1289 '{{WRAPPER}} #sellkit-checkout-widget-id .sellkit-multistep-checkout-sidebar' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1290 ],
1291 ]
1292 );
1293
1294 $this->divider( 'order_summary_divider_5' );
1295
1296 $this->add_group_control(
1297 'box-shadow',
1298 [
1299 'name' => 'order_summary_box_shadow',
1300 'label' => esc_html__( 'Box Shadow', 'sellkit' ),
1301 'selector' => '{{WRAPPER}} #sellkit-checkout-widget-id .sellkit-multistep-checkout-sidebar',
1302 ]
1303 );
1304
1305 $this->divider( 'order_summary_divider_6' );
1306
1307 $this->add_responsive_control(
1308 'order_summary_padding',
1309 [
1310 'label' => esc_html__( 'Padding', 'sellkit' ),
1311 'type' => 'dimensions',
1312 'size_units' => [ 'px', '%', 'em' ],
1313 'selectors' => [
1314 '{{WRAPPER}} #sellkit-checkout-widget-id .sellkit-multistep-checkout-sidebar' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1315 ],
1316 ]
1317 );
1318
1319 $this->add_responsive_control(
1320 'order_summary_margin',
1321 [
1322 'label' => esc_html__( 'Margin', 'sellkit' ),
1323 'type' => 'dimensions',
1324 'size_units' => [ 'px', '%', 'em' ],
1325 'selectors' => [
1326 '{{WRAPPER}} #sellkit-checkout-widget-id .sellkit-multistep-checkout-sidebar' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1327 ],
1328 ]
1329 );
1330
1331 $this->end_controls_section();
1332 }
1333
1334 private function divider( $name ) {
1335 $this->add_control(
1336 $name,
1337 [
1338 'type' => 'divider',
1339 ]
1340 );
1341 }
1342 }
1343