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.5.4, at includes/elementor/modules/checkout/widgets/style-controls.php

1,218 lines 34.0 KB

Raw Download Zip

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