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

1,208 lines 33.6 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	]
251	);
252
253	$this->add_responsive_control(
254	'divider_border_radius',
255	[
256	'label' => esc_html__( 'Border Radius', 'sellkit' ),
257	'type' => 'dimensions',
258	'size_units' => [ 'px', '%', 'em' ],
259	'selectors' => [
260	'{{WRAPPER}} .sellkit-checkout-widget-divider' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
261	],
262	'condition' => [
263	'divider_border_border!' => '',
264	],
265	]
266	);
267
268	$this->end_controls_section();
269	}
270
271	private function step_style() {
272	$this->start_controls_section(
273	'section_step_style',
274	[
275	'label' => esc_html__( 'Step', 'sellkit' ),
276	'tab' => 'style',
277	]
278	);
279
280	$this->add_group_control(
281	'typography',
282	[
283	'name' => 'step_typography',
284	'label' => esc_html__( 'Typography', 'sellkit' ),
285	'selector' => '{{WRAPPER}} .sellkit-checkout-widget-breadcrumb span',
286	]
287	);
288
289	$this->add_responsive_control(
290	'step_alignment',
291	[
292	'label' => esc_html__( 'Alignment', 'sellkit' ),
293	'type' => 'choose',
294	'options' => [
295	'flex-start' => [
296	'title' => esc_html__( 'Left', 'sellkit' ),
297	'icon' => 'eicon-text-align-left',
298	],
299	'center' => [
300	'title' => esc_html__( 'Center', 'sellkit' ),
301	'icon' => 'eicon-text-align-justify',
302	],
303	'flex-end' => [
304	'title' => esc_html__( 'Right', 'sellkit' ),
305	'icon' => 'eicon-text-align-right',
306	],
307	],
308	'toggle' => true,
309	'selectors' => [
310	'{{WRAPPER}} .sellkit-checkout-widget-breadcrumb' => 'justify-content: {{VALUE}};',
311	],
312	]
313	);
314
315	$this->start_controls_tabs(
316	'step_style_tabs'
317	);
318
319	$this->start_controls_tab(
320	'style_inactive_tab',
321	[
322	'label' => esc_html__( 'UPCOMING', 'sellkit' ),
323	]
324	);
325
326	$this->add_control(
327	'step_inactive_links_color',
328	[
329	'label' => esc_html__( 'Color', 'sellkit' ),
330	'type' => 'color',
331	'selectors' => [
332	'{{WRAPPER}} #checkout-widget-breadcrumb span.inactive' => 'color: {{VALUE}}',
333	],
334	]
335	);
336
337	$this->add_control(
338	'step_inactive_links_color_hove',
339	[
340	'label' => esc_html__( 'Links Hover Color', 'sellkit' ),
341	'type' => 'color',
342	'selectors' => [
343	'{{WRAPPER}} #checkout-widget-breadcrumb span.inactive:hover' => 'color: {{VALUE}}',
344	],
345	]
346	);
347
348	$this->end_controls_tab();
349
350	$this->start_controls_tab(
351	'style_active_tab',
352	[
353	'label' => esc_html__( 'IN-PROGRESS', 'sellkit' ),
354	]
355	);
356
357	$this->add_control(
358	'step_active_links_color',
359	[
360	'label' => esc_html__( 'Links Color', 'sellkit' ),
361	'type' => 'color',
362	'selectors' => [
363	'{{WRAPPER}} #checkout-widget-breadcrumb span.current' => 'color: {{VALUE}}',
364	],
365	]
366	);
367
368	$this->add_control(
369	'step_active_links_color_hove',
370	[
371	'label' => esc_html__( 'Links Hover Color', 'sellkit' ),
372	'type' => 'color',
373	'selectors' => [
374	'{{WRAPPER}} #checkout-widget-breadcrumb span.current:hover' => 'color: {{VALUE}}',
375	],
376	]
377	);
378
379	$this->end_controls_tab();
380
381	$this->start_controls_tab(
382	'style_completed_tab',
383	[
384	'label' => esc_html__( 'COMPLETED', 'sellkit' ),
385	]
386	);
387
388	$this->add_control(
389	'step_completed_links_color',
390	[
391	'label' => esc_html__( 'Links Color', 'sellkit' ),
392	'type' => 'color',
393	'selectors' => [
394	'{{WRAPPER}} #checkout-widget-breadcrumb span.blue-line' => 'color: {{VALUE}}',
395	'{{WRAPPER}} #checkout-widget-breadcrumb span.blue-line a' => 'color: {{VALUE}}',
396	],
397	]
398	);
399
400	$this->add_control(
401	'step_completed_links_color_hove',
402	[
403	'label' => esc_html__( 'Links Hover Color', 'sellkit' ),
404	'type' => 'color',
405	'selectors' => [
406	'{{WRAPPER}} #checkout-widget-breadcrumb span.blue-line:hover' => 'color: {{VALUE}}',
407	'{{WRAPPER}} #checkout-widget-breadcrumb span.blue-line a:hover' => 'color: {{VALUE}}',
408	],
409	]
410	);
411
412	$this->end_controls_tab();
413
414	$this->end_controls_tabs();
415
416	$this->add_control(
417	'step_heading_1',
418	[
419	'label' => esc_html__( 'Separator Icon', 'sellkit' ),
420	'type' => 'heading',
421	'separator' => 'before',
422	]
423	);
424
425	$this->add_control(
426	'step_separator_icon_color',
427	[
428	'label' => esc_html__( 'Icon Color', 'sellkit' ),
429	'type' => 'color',
430	'selectors' => [
431	'{{WRAPPER}} #checkout-widget-breadcrumb .sellkit-checkout-widget-bc-icon' => 'color: {{VALUE}}',
432	],
433	]
434	);
435
436	$this->add_responsive_control(
437	'step_separator_icon_size',
438	[
439	'label' => esc_html__( 'Icon Size', 'sellkit' ),
440	'type' => 'slider',
441	'size_units' => [ 'px' ],
442	'range' => [
443	'px' => [
444	'min' => 0,
445	'max' => 200,
446	'step' => 1,
447	],
448	],
449	'selectors' => [
450	'{{WRAPPER}} #checkout-widget-breadcrumb .sellkit-checkout-widget-bc-icon' => 'font-size: {{SIZE}}{{UNIT}};',
451	],
452	]
453	);
454
455	$this->add_responsive_control(
456	'step_separator_icon_spacing',
457	[
458	'label' => esc_html__( 'Icon Spacing', 'sellkit' ),
459	'type' => 'slider',
460	'size_units' => [ 'px' ],
461	'range' => [
462	'px' => [
463	'min' => 0,
464	'max' => 200,
465	'step' => 1,
466	],
467	],
468	'selectors' => [
469	'{{WRAPPER}} .sellkit-checkout-widget-breadcrumb' => 'column-gap: {{SIZE}}{{UNIT}};',
470	],
471	]
472	);
473
474	$this->end_controls_section();
475	}
476
477	/**
478	* Button styles.
479	*
480	* @SuppressWarnings(PHPMD.ExcessiveMethodLength)
481	*/
482	private function buttons_style() {
483	$this->start_controls_section(
484	'section_buttons_style',
485	[
486	'label' => esc_html__( 'Button', 'sellkit' ),
487	'tab' => 'style',
488	]
489	);
490
491	$this->add_control(
492	'button_style_heading_1',
493	[
494	'label' => esc_html__( 'Primary button', 'sellkit' ),
495	'type' => 'heading',
496	]
497	);
498
499	$this->start_controls_tabs(
500	'button_primary_style_tabs'
501	);
502
503	$this->start_controls_tab(
504	'button_primary_style_normal_tab',
505	[
506	'label' => esc_html__( 'NORMAL', 'sellkit' ),
507	]
508	);
509
510	$this->add_control(
511	'button_primary_normal_color',
512	[
513	'label' => esc_html__( 'Text Color', 'sellkit' ),
514	'type' => 'color',
515	'selectors' => [
516	'{{WRAPPER}} .sellkit-checkout-widget-primary-button' => 'color: {{VALUE}} !important',
517	],
518	]
519	);
520
521	$this->add_group_control(
522	'typography',
523	[
524	'name' => 'button_primary_normal_typography',
525	'label' => esc_html__( 'Typography', 'sellkit' ),
526	'selector' => '{{WRAPPER}} #sellkit-checkout-widget-id .sellkit-checkout-widget-primary-button',
527	]
528	);
529
530	$this->add_control(
531	'button_primary_normal_bg',
532	[
533	'label' => esc_html__( 'Background Color', 'sellkit' ),
534	'type' => 'color',
535	'selectors' => [
536	'{{WRAPPER}} .sellkit-checkout-widget-primary-button' => 'background-color: {{VALUE}} !important',
537	],
538	]
539	);
540
541	$this->end_controls_tab();
542
543	$this->start_controls_tab(
544	'button_primary_style_hover_tab',
545	[
546	'label' => esc_html__( 'HOVER', 'sellkit' ),
547	]
548	);
549
550	$this->add_control(
551	'button_primary_hover_color',
552	[
553	'label' => esc_html__( 'Text Color', 'sellkit' ),
554	'type' => 'color',
555	'selectors' => [
556	'{{WRAPPER}} .sellkit-checkout-widget-primary-button:hover' => 'color: {{VALUE}} !important',
557	],
558	]
559	);
560
561	$this->add_group_control(
562	'typography',
563	[
564	'name' => 'button_primary_hover_typography',
565	'label' => esc_html__( 'Typography', 'sellkit' ),
566	'selector' => '{{WRAPPER}} #sellkit-checkout-widget-id .sellkit-checkout-widget-primary-button:hover',
567	]
568	);
569
570	$this->add_control(
571	'button_primary_hover_bg',
572	[
573	'label' => esc_html__( 'Background Color', 'sellkit' ),
574	'type' => 'color',
575	'selectors' => [
576	'{{WRAPPER}} .sellkit-checkout-widget-primary-button:hover' => 'background-color: {{VALUE}} !important',
577	],
578	]
579	);
580
581	$this->end_controls_tab();
582
583	$this->end_controls_tabs();
584
585	$this->divider( 'button_end_primary_hr' );
586
587	$this->add_group_control(
588	'border',
589	[
590	'name' => 'button_primary_border',
591	'label' => esc_html__( 'Border', 'sellkit' ),
592	'selector' => '{{WRAPPER}} #sellkit-checkout-widget-id .sellkit-checkout-widget-primary-button',
593	]
594	);
595
596	$this->add_responsive_control(
597	'button_primary_border_radius',
598	[
599	'label' => esc_html__( 'Border Radius', 'sellkit' ),
600	'type' => 'dimensions',
601	'size_units' => [ 'px', '%', 'em' ],
602	'selectors' => [
603	'{{WRAPPER}} #sellkit-checkout-widget-id .sellkit-checkout-widget-primary-button' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
604	],
605	]
606	);
607
608	$this->add_responsive_control(
609	'button_primary_text_padding',
610	[
611	'label' => esc_html__( 'Text Padding', 'sellkit' ),
612	'type' => 'dimensions',
613	'size_units' => [ 'px', '%', 'em' ],
614	'selectors' => [
615	'{{WRAPPER}} #sellkit-checkout-widget-id .sellkit-checkout-widget-primary-button' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
616	],
617	]
618	);
619
620	$this->add_control(
621	'button_style_heading_2',
622	[
623	'label' => esc_html__( 'Secondary button', 'sellkit' ),
624	'type' => 'heading',
625	'separator' => 'before',
626	]
627	);
628
629	$this->start_controls_tabs(
630	'button_secondary_style_tabs'
631	);
632
633	$this->start_controls_tab(
634	'button_secondary_style_normal_tab',
635	[
636	'label' => esc_html__( 'NORMAL', 'sellkit' ),
637	]
638	);
639
640	$this->add_control(
641	'button_secondary_normal_color',
642	[
643	'label' => esc_html__( 'Text Color', 'sellkit' ),
644	'type' => 'color',
645	'selectors' => [
646	'{{WRAPPER}} .woocommerce-checkout .sellkit-checkout-widget-secondary-button' => 'color: {{VALUE}}',
647	],
648	]
649	);
650
651	$this->add_group_control(
652	'typography',
653	[
654	'name' => 'button_secondary_normal_typography',
655	'label' => esc_html__( 'Typography', 'sellkit' ),
656	'selector' => '{{WRAPPER}} .woocommerce-checkout .sellkit-checkout-widget-secondary-button',
657	]
658	);
659
660	$this->add_control(
661	'button_secondary_normal_bg',
662	[
663	'label' => esc_html__( 'Background Color', 'sellkit' ),
664	'type' => 'color',
665	'selectors' => [
666	'{{WRAPPER}} .woocommerce-checkout .sellkit-checkout-widget-secondary-button' => 'background-color: {{VALUE}} !important',
667	],
668	]
669	);
670
671	$this->end_controls_tab();
672
673	$this->start_controls_tab(
674	'button_secondary_style_hover_tab',
675	[
676	'label' => esc_html__( 'HOVER', 'sellkit' ),
677	]
678	);
679
680	$this->add_control(
681	'button_secondary_hover_color',
682	[
683	'label' => esc_html__( 'Text Color', 'sellkit' ),
684	'type' => 'color',
685	'selectors' => [
686	'{{WRAPPER}} .sellkit-checkout-widget-secondary-button:hover' => 'color: {{VALUE}}',
687	],
688	]
689	);
690
691	$this->add_group_control(
692	'typography',
693	[
694	'name' => 'button_secondary_hover_typography',
695	'label' => esc_html__( 'Typography', 'sellkit' ),
696	'selector' => '{{WRAPPER}} .sellkit-checkout-widget-secondary-button:hover',
697	]
698	);
699
700	$this->add_control(
701	'button_secondary_hover_bg',
702	[
703	'label' => esc_html__( 'Background Color', 'sellkit' ),
704	'type' => 'color',
705	'selectors' => [
706	'{{WRAPPER}} .sellkit-checkout-widget-secondary-button:hover' => 'background-color: {{VALUE}} !important',
707	],
708	]
709	);
710
711	$this->end_controls_tab();
712
713	$this->end_controls_tabs();
714
715	$this->divider( 'button_end_secondary_hr' );
716
717	$this->add_group_control(
718	'border',
719	[
720	'name' => 'button_secondary_border',
721	'label' => esc_html__( 'Border', 'sellkit' ),
722	'selector' => '{{WRAPPER}} .sellkit-checkout-widget-secondary-button',
723	]
724	);
725
726	$this->add_responsive_control(
727	'button_secondary_border_radius',
728	[
729	'label' => esc_html__( 'Border Radius', 'sellkit' ),
730	'type' => 'dimensions',
731	'size_units' => [ 'px', '%', 'em' ],
732	'selectors' => [
733	'{{WRAPPER}} .sellkit-checkout-widget-secondary-button' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
734	],
735	]
736	);
737
738	$this->add_responsive_control(
739	'button_secondary_text_padding',
740	[
741	'label' => esc_html__( 'Text Padding', 'sellkit' ),
742	'type' => 'dimensions',
743	'size_units' => [ 'px', '%', 'em' ],
744	'selectors' => [
745	'{{WRAPPER}} .sellkit-checkout-widget-secondary-button' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
746	],
747	]
748	);
749
750	$this->add_control(
751	'button_style_heading_3',
752	[
753	'label' => esc_html__( 'Return Link', 'sellkit' ),
754	'type' => 'heading',
755	'separator' => 'before',
756	]
757	);
758
759	$this->add_group_control(
760	'typography',
761	[
762	'name' => 'button_return_link_typography',
763	'label' => esc_html__( 'Typography', 'sellkit' ),
764	'selector' => '{{WRAPPER}} .woocommerce-checkout .sellkit-checkout-widget-return-button > span',
765	]
766	);
767
768	$this->start_controls_tabs(
769	'button_return_link_style_tabs'
770	);
771
772	$this->start_controls_tab(
773	'button_return_link_style_normal_tab',
774	[
775	'label' => esc_html__( 'NORMAL', 'sellkit' ),
776	]
777	);
778
779	$this->add_control(
780	'button_return_link_normal_color',
781	[
782	'label' => esc_html__( 'Color', 'sellkit' ),
783	'type' => 'color',
784	'selectors' => [
785	'{{WRAPPER}} .sellkit-checkout-widget-return-button > span' => 'color: {{VALUE}}',
786	'{{WRAPPER}} .sellkit-checkout-widget-return-button > i' => 'color: {{VALUE}}',
787	],
788	]
789	);
790
791	$this->end_controls_tab();
792
793	$this->start_controls_tab(
794	'button_return_link_style_hover_tab',
795	[
796	'label' => esc_html__( 'HOVER', 'sellkit' ),
797	]
798	);
799
800	$this->add_control(
801	'button_return_link_hover_color',
802	[
803	'label' => esc_html__( 'Color', 'sellkit' ),
804	'type' => 'color',
805	'selectors' => [
806	'{{WRAPPER}} .sellkit-checkout-widget-return-button:hover > *' => 'color: {{VALUE}}',
807	],
808	]
809	);
810
811	$this->end_controls_tab();
812
813	$this->end_controls_tabs();
814
815	$this->end_controls_section();
816	}
817
818	private function fields_style() {
819	$this->start_controls_section(
820	'section_fields_style',
821	[
822	'label' => esc_html__( 'Field', 'sellkit' ),
823	'tab' => 'style',
824	]
825	);
826
827	$this->add_control(
828	'field_style_heading_1',
829	[
830	'label' => esc_html__( 'Label', 'sellkit' ),
831	'type' => 'heading',
832	]
833	);
834
835	$this->add_group_control(
836	'typography',
837	[
838	'name' => 'field_label_typography',
839	'label' => esc_html__( 'Typography', 'sellkit' ),
840	'selector' => '{{WRAPPER}} .sellkit-widget-checkout-fields p input::placeholder,
841	.sellkit-widget-checkout-fields p select::placeholder,
842	#sellkit-checkout-widget-id #sellkit-checkout-billing-field-wrapper .mini-title,
843	#sellkit-checkout-widget-id #sellkit-checkout-widget-shipping-fields .mini-title,
844	#sellkit-checkout-widget-id .sellkit-custom-coupon-form .jx-coupon::placeholder',
845	]
846	);
847
848	$this->add_control(
849	'field_section_color_',
850	[
851	'label' => esc_html__( 'Color', 'sellkit' ),
852	'type' => 'color',
853	'selectors' => [
854	'{{WRAPPER}} .sellkit-widget-checkout-fields p input::placeholder' => 'color: {{VALUE}}',
855	'{{WRAPPER}} .sellkit-widget-checkout-fields p select::placeholder' => 'color: {{VALUE}}',
856	'{{WRAPPER}} .sellkit-widget-checkout-fields p textarea::placeholder' => 'color: {{VALUE}}',
857	'{{WRAPPER}} #sellkit-checkout-widget-id #sellkit-checkout-billing-field-wrapper .mini-title' => 'color: {{VALUE}}',
858	'{{WRAPPER}} #sellkit-checkout-widget-id #sellkit-checkout-widget-shipping-fields .mini-title' => 'color: {{VALUE}}',
859	'{{WRAPPER}} #sellkit-checkout-widget-id .sellkit-custom-coupon-form .jx-coupon::placeholder' => 'color: {{VALUE}}',
860	],
861	]
862	);
863
864	$this->add_control(
865	'field_style_heading_2',
866	[
867	'label' => esc_html__( 'Input', 'sellkit' ),
868	'type' => 'heading',
869	'separator' => 'before',
870	]
871	);
872
873	$this->add_group_control(
874	'typography',
875	[
876	'name' => 'field_input_typography',
877	'label' => esc_html__( 'Typography', 'sellkit' ),
878	'selector' => '{{WRAPPER}} #sellkit-checkout-widget-id .sellkit-widget-checkout-fields input,
879	#sellkit-checkout-widget-id .sellkit-widget-checkout-fields textarea,
880	#sellkit-checkout-widget-id .sellkit-widget-checkout-fields select,
881	#sellkit-checkout-widget-id .sellkit-widget-checkout-fields option,
882	#sellkit-checkout-widget-id .sellkit-custom-coupon-form .jx-coupon',
883	]
884	);
885
886	$this->add_control(
887	'field_input_color',
888	[
889	'label' => esc_html__( 'Color', 'sellkit' ),
890	'type' => 'color',
891	'selectors' => [
892	'{{WRAPPER}} #sellkit-checkout-widget-id .sellkit-widget-checkout-fields input' => 'color: {{VALUE}}',
893	'{{WRAPPER}} #sellkit-checkout-widget-id .sellkit-widget-checkout-fields textarea' => 'color: {{VALUE}}',
894	'{{WRAPPER}} #sellkit-checkout-widget-id .sellkit-widget-checkout-fields select' => 'color: {{VALUE}}',
895	'{{WRAPPER}} #sellkit-checkout-widget-id .sellkit-widget-checkout-fields option' => 'color: {{VALUE}}',
896	'{{WRAPPER}} #sellkit-checkout-widget-id .sellkit-custom-coupon-form .jx-coupon' => 'color: {{VALUE}}',
897	],
898	]
899	);
900
901	$this->add_control(
902	'field_style_heading_3',
903	[
904	'label' => esc_html__( 'Border', 'sellkit' ),
905	'type' => 'heading',
906	'separator' => 'before',
907	]
908	);
909
910	$this->add_group_control(
911	'border',
912	[
913	'name' => 'field_border',
914	'label' => esc_html__( 'Border', 'sellkit' ),
915	'selector' => ' {{WRAPPER}} #sellkit-checkout-widget-id .sellkit-widget-checkout-fields input,
916	{{WRAPPER}} #sellkit-checkout-widget-id .sellkit-widget-checkout-fields textarea,
917	{{WRAPPER}} #sellkit-checkout-widget-id .sellkit-widget-checkout-fields select,
918	{{WRAPPER}} #sellkit-checkout-widget-id .sellkit-custom-coupon-form .jx-coupon',
919	]
920	);
921
922	$this->add_responsive_control(
923	'fields_border_radius',
924	[
925	'label' => esc_html__( 'Border Radius', 'sellkit' ),
926	'type' => 'dimensions',
927	'size_units' => [ 'px', '%', 'em' ],
928	'selectors' => [
929	'{{WRAPPER}} #sellkit-checkout-widget-id .sellkit-widget-checkout-fields input' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
930	'{{WRAPPER}} #sellkit-checkout-widget-id .sellkit-widget-checkout-fields textarea' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
931	'{{WRAPPER}} #sellkit-checkout-widget-id .sellkit-widget-checkout-fields select' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
932	'{{WRAPPER}} #sellkit-checkout-widget-id .sellkit-custom-coupon-form .jx-coupon' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
933	],
934	]
935	);
936
937	$this->add_control(
938	'field_border_focus_color',
939	[
940	'label' => esc_html__( 'Focus Color', 'sellkit' ),
941	'type' => 'color',
942	'selectors' => [
943	'{{WRAPPER}} #sellkit-checkout-widget-id .sellkit-widget-checkout-fields textarea:focus' => 'border-color: {{VALUE}}',
944	'{{WRAPPER}} #sellkit-checkout-widget-id .sellkit-widget-checkout-fields input:focus' => 'border-color: {{VALUE}}',
945	'{{WRAPPER}} #sellkit-checkout-widget-id .sellkit-widget-checkout-fields select:focus' => 'border-color: {{VALUE}}',
946	'{{WRAPPER}} #sellkit-checkout-widget-id .sellkit-custom-coupon-form .jx-coupon:focus' => 'color: {{VALUE}}',
947	],
948	]
949	);
950
951	$this->add_control(
952	'field_error_validate_color',
953	[
954	'label' => esc_html__( 'Error Validation Color', 'sellkit' ),
955	'type' => 'color',
956	'selectors' => [
957	'{{WRAPPER}} #sellkit-checkout-widget-id .sellkit-checkout-fields-wrapper .required-alarm' => 'color: {{VALUE}}',
958	'{{WRAPPER}} .login-section-error' => 'color: {{VALUE}}',
959	'{{WRAPPER}} #sellkit-checkout-widget-id .sellkit-checkout-fields-wrapper .sellkit-checkout-field-global-errors' => 'color: {{VALUE}}',
960	],
961	'separator' => 'after',
962	]
963	);
964
965	$this->add_control(
966	'fields_background_color_',
967	[
968	'label' => esc_html__( 'Background Color', 'sellkit' ),
969	'type' => 'color',
970	'selectors' => [
971	'{{WRAPPER}} #sellkit-checkout-widget-id .sellkit-checkout-fields-wrapper input' => 'background-color: {{VALUE}}',
972	'{{WRAPPER}} #sellkit-checkout-widget-id .sellkit-checkout-fields-wrapper select' => 'background-color: {{VALUE}}',
973	'{{WRAPPER}} #sellkit-checkout-widget-id .sellkit-checkout-fields-wrapper textarea' => 'background-color: {{VALUE}}',
974	'{{WRAPPER}} #sellkit-checkout-widget-id .sellkit-custom-coupon-form .jx-coupon' => 'background-color: {{VALUE}}',
975	],
976	]
977	);
978
979	$this->end_controls_section();
980	}
981
982	private function order_summary_style() {
983	$this->start_controls_section(
984	'section_order_summary_style',
985	[
986	'label' => esc_html__( 'Order Summary', 'sellkit' ),
987	'tab' => 'style',
988	]
989	);
990
991	$this->add_control(
992	'order_summary_style_heading_1',
993	[
994	'label' => esc_html__( 'Product', 'sellkit' ),
995	'type' => 'heading',
996	]
997	);
998
999	$this->add_control(
1000	'order_summary_show_image',
1001	[
1002	'label' => esc_html__( 'Enable Image', 'sellkit' ),
1003	'type' => 'switcher',
1004	'label_on' => esc_html__( 'Yes', 'sellkit' ),
1005	'label_off' => esc_html__( 'No', 'sellkit' ),
1006	'return_value' => 'yes',
1007	'default' => 'yes',
1008	]
1009	);
1010
1011	$this->add_group_control(
1012	'typography',
1013	[
1014	'name' => 'order_summary_product_typography',
1015	'label' => esc_html__( 'Typography', 'sellkit' ),
1016	'selector' => '{{WRAPPER}} .sellkit-one-page-checkout-product-name .name-price,
1017	.sellkit-one-page-checkout-product-price *',
1018	]
1019	);
1020
1021	$this->add_control(
1022	'order_summary_product_color',
1023	[
1024	'label' => esc_html__( 'Color', 'sellkit' ),
1025	'type' => 'color',
1026	'selectors' => [
1027	'{{WRAPPER}} .sellkit-one-page-checkout-product-name .name-price' => 'color: {{VALUE}}',
1028	'{{WRAPPER}} .sellkit-one-page-checkout-product-price *' => 'color: {{VALUE}}',
1029	],
1030	]
1031	);
1032
1033	$this->add_control(
1034	'order_summary_item_image_border_color',
1035	[
1036	'label' => esc_html__( 'Image Border Color', 'sellkit' ),
1037	'type' => 'color',
1038	'selectors' => [
1039	'{{WRAPPER}} .sellkit-one-page-checkout-product-name img' => 'border: 1px solid {{VALUE}}',
1040	],
1041	]
1042	);
1043
1044	$this->divider( 'order_summary_divider_1' );
1045
1046	$this->add_control(
1047	'order_summary_style_heading_2',
1048	[
1049	'label' => esc_html__( 'Subtotal', 'sellkit' ),
1050	'type' => 'heading',
1051	]
1052	);
1053
1054	$this->add_group_control(
1055	'typography',
1056	[
1057	'name' => 'order_summary_subtotal_typography',
1058	'label' => esc_html__( 'Typography', 'sellkit' ),
1059	'selector' => '{{WRAPPER}} #sellkit-checkout-widget-id #order_review tfoot tr:not(:last-child) th,
1060	#sellkit-checkout-widget-id #order_review tfoot tr:not(:last-child) td,
1061	#sellkit-checkout-widget-id #order_review tfoot tr:not(:last-child) td *',
1062	]
1063	);
1064
1065	$this->add_control(
1066	'order_summary_subtotal_color',
1067	[
1068	'label' => esc_html__( 'Color', 'sellkit' ),
1069	'type' => 'color',
1070	'selectors' => [
1071	'{{WRAPPER}} #sellkit-checkout-widget-id #order_review tfoot tr:not(:last-child) th' => 'color: {{VALUE}}',
1072	'{{WRAPPER}} #sellkit-checkout-widget-id #order_review tfoot tr:not(:last-child) td' => 'color: {{VALUE}}',
1073	'{{WRAPPER}} #sellkit-checkout-widget-id #order_review tfoot tr:not(:last-child) td *' => 'color: {{VALUE}}',
1074	],
1075	]
1076	);
1077
1078	$this->divider( 'order_summary_divider_2' );
1079
1080	$this->add_control(
1081	'order_summary_style_heading_3',
1082	[
1083	'label' => esc_html__( 'Total', 'sellkit' ),
1084	'type' => 'heading',
1085	]
1086	);
1087
1088	$this->add_group_control(
1089	'typography',
1090	[
1091	'name' => 'order_summary_total_typography',
1092	'label' => esc_html__( 'Typography', 'sellkit' ),
1093	'selector' => '{{WRAPPER}} #sellkit-checkout-widget-id .order-total th, .order-total td *',
1094	]
1095	);
1096
1097	$this->add_control(
1098	'order_summary_total_color',
1099	[
1100	'label' => esc_html__( 'Color', 'sellkit' ),
1101	'type' => 'color',
1102	'selectors' => [
1103	'{{WRAPPER}} #sellkit-checkout-widget-id .order-total th' => 'color: {{VALUE}}',
1104	'{{WRAPPER}} .order-total td *' => 'color: {{VALUE}}',
1105	],
1106	]
1107	);
1108
1109	$this->divider( 'order_summary_divider_3' );
1110
1111	$this->add_control(
1112	'order_summary_background_color',
1113	[
1114	'label' => esc_html__( 'Background Color', 'sellkit' ),
1115	'type' => 'color',
1116	'selectors' => [
1117	'{{WRAPPER}} #sellkit-checkout-widget-id .sellkit-multistep-checkout-sidebar' => 'background-color: {{VALUE}} !important',
1118	],
1119	]
1120	);
1121
1122	$this->add_control(
1123	'order_summary_inner_wrap_background_color',
1124	[
1125	'label' => esc_html__( 'Inner Background Color', 'sellkit' ),
1126	'type' => 'color',
1127	'selectors' => [
1128	'{{WRAPPER}} #sellkit-checkout-widget-id .sellkit-multistep-checkout-sidebar #sellkit-checkout-widget-order-review-wrap' => 'background-color: {{VALUE}} !important',
1129	],
1130	'condition' => [
1131	'layout-type' => 'multi-step',
1132	],
1133	]
1134	);
1135
1136	$this->divider( 'order_summary_divider_4' );
1137
1138	$this->add_group_control(
1139	'border',
1140	[
1141	'name' => 'order_summary_border',
1142	'label' => esc_html__( 'Border Type', 'sellkit' ),
1143	'selector' => '{{WRAPPER}} #sellkit-checkout-widget-id .sellkit-multistep-checkout-sidebar',
1144	]
1145	);
1146
1147	$this->add_responsive_control(
1148	'order_summary_border_radius',
1149	[
1150	'label' => esc_html__( 'Border Radius', 'sellkit' ),
1151	'type' => 'dimensions',
1152	'size_units' => [ 'px', '%', 'em' ],
1153	'selectors' => [
1154	'{{WRAPPER}} #sellkit-checkout-widget-id .sellkit-multistep-checkout-sidebar' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1155	],
1156	]
1157	);
1158
1159	$this->divider( 'order_summary_divider_5' );
1160
1161	$this->add_group_control(
1162	'box-shadow',
1163	[
1164	'name' => 'order_summary_box_shadow',
1165	'label' => esc_html__( 'Box Shadow', 'sellkit' ),
1166	'selector' => '{{WRAPPER}} #sellkit-checkout-widget-id .sellkit-multistep-checkout-sidebar',
1167	]
1168	);
1169
1170	$this->divider( 'order_summary_divider_6' );
1171
1172	$this->add_responsive_control(
1173	'order_summary_padding',
1174	[
1175	'label' => esc_html__( 'Padding', 'sellkit' ),
1176	'type' => 'dimensions',
1177	'size_units' => [ 'px', '%', 'em' ],
1178	'selectors' => [
1179	'{{WRAPPER}} #sellkit-checkout-widget-id .sellkit-multistep-checkout-sidebar' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1180	],
1181	]
1182	);
1183
1184	$this->add_responsive_control(
1185	'order_summary_margin',
1186	[
1187	'label' => esc_html__( 'Margin', 'sellkit' ),
1188	'type' => 'dimensions',
1189	'size_units' => [ 'px', '%', 'em' ],
1190	'selectors' => [
1191	'{{WRAPPER}} #sellkit-checkout-widget-id .sellkit-multistep-checkout-sidebar' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1192	],
1193	]
1194	);
1195
1196	$this->end_controls_section();
1197	}
1198
1199	private function divider( $name ) {
1200	$this->add_control(
1201	$name,
1202	[
1203	'type' => 'divider',
1204	]
1205	);
1206	}
1207	}
1208