sellkit / includes / elementor / modules / optin / controls / tab-style.php

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

1,324 lines 34.0 KB

Raw Download Zip

1	<?php
2
3	defined( 'ABSPATH' ) \|\| die();
4
5	/**
6	* Holds methods for adding Optin widget's style tab controls.
7	*
8	* @SuppressWarnings(PHPMD.ExcessiveMethodLength)
9	*/
10	class Sellkit_Elementor_Optin_Tab_Style {
11
12	public function __construct( $widget ) {
13	$this->add_section_general( $widget );
14	$this->add_section_label( $widget );
15	$this->add_section_field( $widget );
16	$this->add_section_select( $widget );
17	$this->add_section_checkbox( $widget );
18	$this->add_section_radio( $widget );
19	$this->add_section_button( $widget );
20	$this->add_section_message_style( $widget );
21	}
22
23	public static function add_section_general( $widget ) {
24	$widget->start_controls_section(
25	'section_style_general',
26	[
27	'label' => esc_html__( 'General', 'sellkit' ),
28	'tab' => 'style',
29	]
30	);
31
32	$widget->add_responsive_control(
33	'general_column_spacing',
34	[
35	'label' => esc_html__( 'Column Spacing', 'sellkit' ),
36	'type' => 'slider',
37	'default' => [ 'size' => 7 ],
38	'range' => [
39	'px' => [
40	'max' => 60,
41	],
42	],
43	'selectors' => [
44	'{{WRAPPER}} .sellkit-field-group' => 'padding-left: calc( {{SIZE}}{{UNIT}} / 2 );padding-right: calc( {{SIZE}}{{UNIT}} / 2 );',
45	'{{WRAPPER}} .sellkit-optin' => 'margin-left : calc( -{{SIZE}}{{UNIT}} / 2 );margin-right: calc( -{{SIZE}}{{UNIT}} / 2 );',
46	],
47	]
48	);
49
50	$widget->add_responsive_control(
51	'general_row_spacing',
52	[
53	'label' => esc_html__( 'Row Spacing', 'sellkit' ),
54	'type' => 'slider',
55	'default' => [ 'size' => 7 ],
56	'selectors' => [
57	'{{WRAPPER}} .sellkit-field-group:not(:last-child)' => 'margin-bottom: {{SIZE}}{{UNIT}};',
58	],
59	]
60	);
61
62	$widget->end_controls_section();
63	}
64
65	public static function add_section_label( $widget ) {
66	$all_4s = '{{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}}';
67
68	$widget->start_controls_section(
69	'section_style_label',
70	[
71	'label' => esc_html__( 'Label', 'sellkit' ),
72	'tab' => 'style',
73	]
74	);
75
76	$widget->add_control(
77	'label_color',
78	[
79	'label' => esc_html__( 'Color', 'sellkit' ),
80	'type' => 'color',
81	'selectors' => [
82	'{{WRAPPER}} .sellkit-field-label' => 'color: {{VALUE}};',
83	],
84	]
85	);
86
87	$widget->add_group_control(
88	'typography',
89	[
90	'name' => 'label_typography',
91	'selector' => '{{WRAPPER}} .sellkit-field-label',
92	'scheme' => '3',
93	]
94	);
95
96	$widget->add_responsive_control(
97	'label_spacing',
98	[
99	'label' => esc_html__( 'Spacing', 'sellkit' ),
100	'type' => 'dimensions',
101	'size_units' => [ 'px', 'em', '%' ],
102	'selectors' => [
103	'{{WRAPPER}} .sellkit-field-group > .sellkit-field-label' => "padding: {$all_4s};",
104	],
105	]
106	);
107
108	$widget->end_controls_section();
109	}
110
111	public static function add_section_field( $widget ) {
112	$all_4s = '{{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}}';
113
114	$widget->start_controls_section(
115	'section_style_field',
116	[
117	'label' => esc_html__( 'Field', 'sellkit' ),
118	'tab' => 'style',
119	]
120	);
121
122	$widget->start_controls_tabs( 'field_tabs_state' );
123
124	//-------------TAB NORMAL-------------
125	$widget->start_controls_tab(
126	'field_tab_state_normal',
127	[
128	'label' => esc_html__( 'Normal', 'sellkit' ),
129	]
130	);
131
132	$widget->add_control(
133	'field_tab_background_color_normal',
134	[
135	'label' => esc_html__( 'Background Color', 'sellkit' ),
136	'type' => 'color',
137	'selectors' => [
138	'{{WRAPPER}} .sellkit-field' => 'background-color: {{VALUE}};',
139	],
140	]
141	);
142
143	$widget->add_group_control(
144	'border',
145	[
146	'name' => 'field_tab_border_normal',
147	'selector' => '{{WRAPPER}} .sellkit-field:not(:focus)',
148	'fields_options' => [
149	'border' => [
150	'default' => 'solid',
151	],
152	'color' => [
153	'default' => '#111111',
154	],
155	],
156	]
157	);
158
159	$widget->add_responsive_control(
160	'field_tab_border_radius_normal',
161	[
162	'label' => esc_html__( 'Border Radius', 'sellkit' ),
163	'type' => 'dimensions',
164	'size_units' => [ 'px', '%' ],
165	'selectors' => [
166	'{{WRAPPER}} .sellkit-field' => "border-radius: {$all_4s};",
167	'{{WRAPPER}} .iti__flag-container .iti__selected-flag' => 'border-radius: {{TOP}}{{UNIT}} 0 0 {{LEFT}}{{UNIT}};',
168	],
169	]
170	);
171
172	$widget->add_group_control(
173	'box-shadow',
174	[
175	'name' => 'field_tab_box_shadow_normal',
176	'separator' => 'before',
177	'selector' => '{{WRAPPER}} .sellkit-field',
178	'exclude' => [ 'box_shadow_position' ],
179	]
180	);
181
182	$widget->add_control(
183	'field_tab_placeholder_heading_normal',
184	[
185	'type' => 'heading',
186	'separator' => 'before',
187	'label' => esc_html__( 'Placeholder', 'sellkit' ),
188	]
189	);
190
191	$widget->add_control(
192	'field_tab_color_placeholder',
193	[
194	'label' => esc_html__( 'Color', 'sellkit' ),
195	'type' => 'color',
196	'selectors' => [
197	'{{WRAPPER}} .sellkit-field:placeholder-shown::placeholder' => 'color: {{VALUE}};',
198	],
199	]
200	);
201
202	$widget->add_group_control(
203	'typography',
204	[
205	'name' => 'field_tab_typography_placeholder',
206	'selector' => '{{WRAPPER}} .sellkit-field:placeholder-shown:not(:focus)',
207	'scheme' => '3',
208	]
209	);
210
211	$widget->add_control(
212	'field_tab_value_heading_normal',
213	[
214	'type' => 'heading',
215	'separator' => 'before',
216	'label' => esc_html__( 'Value', 'sellkit' ),
217	]
218	);
219
220	$widget->add_control(
221	'field_tab_color_value',
222	[
223	'label' => esc_html__( 'Color', 'sellkit' ),
224	'type' => 'color',
225	'selectors' => [
226	'{{WRAPPER}} .sellkit-field:not(:placeholder-shown)' => 'color: {{VALUE}};',
227	],
228	]
229	);
230
231	$widget->add_group_control(
232	'typography',
233	[
234	'name' => 'field_tab_typography_value',
235	'selector' => '{{WRAPPER}} .sellkit-field:not(:placeholder-shown):not(:focus)',
236	'scheme' => '3',
237	]
238	);
239
240	$widget->end_controls_tab();
241
242	//-------------TAB FOCUS-------------
243	$widget->start_controls_tab(
244	'field_tab_state_focus',
245	[
246	'label' => esc_html__( 'Focus', 'sellkit' ),
247	]
248	);
249
250	$widget->add_control(
251	'field_tab_background_color_focus',
252	[
253	'label' => esc_html__( 'Background Color', 'sellkit' ),
254	'type' => 'color',
255	'selectors' => [
256	'{{WRAPPER}} .sellkit-field:focus' => 'background-color: {{VALUE}};',
257	],
258	]
259	);
260
261	$widget->add_group_control(
262	'border',
263	[
264	'name' => 'field_tab_border_focus',
265	'selector' => '{{WRAPPER}} .sellkit-field:focus',
266	'fields_options' => [
267	'border' => [
268	'default' => 'solid',
269	],
270	'color' => [
271	'default' => '#111111',
272	],
273	],
274	]
275	);
276
277	$widget->add_responsive_control(
278	'field_tab_border_radius_focus',
279	[
280	'label' => esc_html__( 'Border Radius', 'sellkit' ),
281	'type' => 'dimensions',
282	'size_units' => [ 'px', '%' ],
283	'selectors' => [
284	'{{WRAPPER}} .sellkit-field:focus' => "border-radius: {$all_4s};",
285	],
286	]
287	);
288
289	$widget->add_group_control(
290	'box-shadow',
291	[
292	'name' => 'field_tab_box_shadow_focus',
293	'exclude' => [ 'box_shadow_position' ],
294	'separator' => 'before',
295	'selector' => '{{WRAPPER}} .sellkit-field:focus',
296	]
297	);
298
299	$widget->add_control(
300	'field_tab_placeholder_heading_focus',
301	[
302	'type' => 'heading',
303	'separator' => 'before',
304	'label' => esc_html__( 'Placeholder', 'sellkit' ),
305	]
306	);
307
308	$widget->add_control(
309	'field_tab_color_placeholder_foucus',
310	[
311	'label' => esc_html__( 'Color', 'sellkit' ),
312	'type' => 'color',
313	'selectors' => [
314	'{{WRAPPER}} .sellkit-field:placeholder-shown:focus::placeholder' => 'color: {{VALUE}};',
315	],
316	]
317	);
318
319	$widget->add_group_control(
320	'typography',
321	[
322	'name' => 'field_tab_typography_placeholder_foucs',
323	'selector' => '{{WRAPPER}} .sellkit-field:placeholder-shown:focus',
324	'scheme' => '3',
325	]
326	);
327
328	$widget->add_control(
329	'field_tab_value_heading_foucs',
330	[
331	'type' => 'heading',
332	'separator' => 'before',
333	'label' => esc_html__( 'Value', 'sellkit' ),
334	]
335	);
336
337	$widget->add_control(
338	'field_tab_color_value_foucs',
339	[
340	'label' => esc_html__( 'Color', 'sellkit' ),
341	'type' => 'color',
342	'selectors' => [
343	'{{WRAPPER}} .sellkit-field:not(:placeholder-shown):focus' => 'color: {{VALUE}};',
344	],
345	]
346	);
347
348	$widget->add_group_control(
349	'typography',
350	[
351	'name' => 'field_tab_typography_value_foucs',
352	'selector' => '{{WRAPPER}} .sellkit-field:not(:placeholder-shown):focus',
353	'scheme' => '3',
354	]
355	);
356
357	$widget->end_controls_tab();
358
359	$widget->end_controls_tabs();
360
361	$widget->add_responsive_control(
362	'field_padding',
363	[
364	'label' => esc_html__( 'Padding', 'sellkit' ),
365	'type' => 'dimensions',
366	'size_units' => [ 'px', 'em', '%' ],
367	'separator' => 'before',
368	'selectors' => [
369	'{{WRAPPER}} .sellkit-field' => "padding: {$all_4s};",
370	],
371	]
372	);
373
374	$widget->end_controls_section();
375	}
376
377	public static function add_section_select( $widget ) {
378	$widget->start_controls_section(
379	'section_style_select',
380	[
381	'label' => esc_html__( 'Select', 'sellkit' ),
382	'tab' => 'style',
383	]
384	);
385
386	$widget->add_control(
387	'select_arrow_icon',
388	[
389	'label' => esc_html__( 'Icon', 'sellkit' ),
390	'type' => 'icons',
391	'skin' => 'inline',
392	'label_block' => false,
393	'default' => [
394	'value' => 'fas fa-angle-down',
395	'library' => 'fa-solid',
396	],
397	]
398	);
399
400	$widget->add_control(
401	'select_arrow_color',
402	[
403	'label' => esc_html__( 'Color', 'sellkit' ),
404	'type' => 'color',
405	'selectors' => [
406	'{{WRAPPER}} .sellkit-field-select-arrow' => 'color: {{VALUE}};',
407	'{{WRAPPER}} .sellkit-field-select-arrow > svg' => 'fill : {{VALUE}};',
408	'{{WRAPPER}} svg.sellkit-field-select-arrow' => 'fill : {{VALUE}};',
409	],
410	]
411	);
412
413	$widget->add_responsive_control(
414	'select_arrow_size',
415	[
416	'label' => esc_html__( 'Size', 'sellkit' ),
417	'type' => 'slider',
418	'default' => [ 'size' => '20' ],
419	'selectors' => [
420	'{{WRAPPER}} .sellkit-field-select-arrow' => 'font-size: {{SIZE}}{{UNIT}};',
421	'{{WRAPPER}} .sellkit-field-select-arrow > svg' => 'width : {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}};',
422	'{{WRAPPER}} svg.sellkit-field-select-arrow' => 'width : {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}};',
423	],
424	]
425	);
426
427	$widget->add_responsive_control(
428	'select_arrow_vertical_offset',
429	[
430	'label' => esc_html__( 'Vertical Offset', 'sellkit' ),
431	'type' => 'slider',
432	'size_units' => [ 'px', '%', 'vm' ],
433	'selectors' => [
434	'{{WRAPPER}} .sellkit-field-select-arrow' => 'top: {{SIZE}}{{UNIT}};',
435	],
436	]
437	);
438
439	$widget->add_responsive_control(
440	'select_arrow_horizontal_offset',
441	[
442	'label' => esc_html__( 'Horizontal Offset', 'sellkit' ),
443	'type' => 'slider',
444	'size_units' => [ 'px', '%' ],
445	'default' => [
446	'size' => '13',
447	'unit' => 'px',
448	],
449	'selectors' => [
450	'{{WRAPPER}} .sellkit-field-select-arrow' => ( is_rtl() ? 'left' : 'right' ) . ':{{SIZE}}{{UNIT}};',
451	],
452	]
453	);
454
455	$widget->end_controls_section();
456	}
457
458	public static function add_section_checkbox( $widget ) {
459	$all_4s = '{{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}}';
460
461	$widget->start_controls_section(
462	'section_style_checkbox',
463	[
464	'label' => esc_html__( 'Checkbox', 'sellkit' ),
465	'tab' => 'style',
466	]
467	);
468
469	$widget->add_responsive_control(
470	'checkbox_size',
471	[
472	'label' => esc_html__( 'Size', 'sellkit' ),
473	'type' => 'slider',
474	'selectors' => [
475	'{{WRAPPER}} .sellkit-field-type-checkbox .sellkit-field-subgroup .sellkit-field-label' => 'padding-left: calc({{SIZE}}{{UNIT}} + 8px); line-height: calc({{SIZE}}{{UNIT}} + 2px);',
476	'{{WRAPPER}} .sellkit-field-type-checkbox .sellkit-field-subgroup .sellkit-field-label:before' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}};',
477	'{{WRAPPER}} .sellkit-field-type-checkbox .sellkit-field-subgroup .sellkit-field-label:after' => 'width: calc({{SIZE}}{{UNIT}} - 8px); height: calc({{SIZE}}{{UNIT}} - 8px);',
478	'{{WRAPPER}} .sellkit-field-type-acceptance .sellkit-field-subgroup .sellkit-field-label' => 'padding-left: calc({{SIZE}}{{UNIT}} + 8px);line-height: calc({{SIZE}}{{UNIT}} + 2px);',
479	'{{WRAPPER}} .sellkit-field-type-acceptance .sellkit-field-subgroup .sellkit-field-label:before' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}};',
480	'{{WRAPPER}} .sellkit-field-type-acceptance .sellkit-field-subgroup .sellkit-field-label:after' => 'width: calc({{SIZE}}{{UNIT}} - 8px); height: calc({{SIZE}}{{UNIT}} - 8px);',
481	],
482	]
483	);
484
485	$widget->add_control(
486	'checkbox_color',
487	[
488	'label' => esc_html__( 'Color', 'sellkit' ),
489	'type' => 'color',
490	'selectors' => [
491	'{{WRAPPER}} .sellkit-field-type-checkbox .sellkit-field-subgroup .sellkit-field-label' => 'color: {{VALUE}};',
492	'{{WRAPPER}} .sellkit-field-type-acceptance .sellkit-field-subgroup .sellkit-field-label' => 'color: {{VALUE}};',
493	],
494	]
495	);
496
497	$widget->add_group_control(
498	'typography',
499	[
500	'name' => 'checkbox_typography',
501	'scheme' => '3',
502	'selector' => implode( ', ', [
503	'{{WRAPPER}} .sellkit-field-type-checkbox .sellkit-field-subgroup .sellkit-field-label',
504	'{{WRAPPER}} .sellkit-field-type-acceptance .sellkit-field-subgroup .sellkit-field-label',
505	] ),
506	]
507	);
508
509	$widget->add_responsive_control(
510	'checkbox_spacing_between',
511	[
512	'label' => esc_html__( 'Spacing Between', 'sellkit' ),
513	'type' => 'dimensions',
514	'size_units' => [ 'px', 'em', '%' ],
515	'selectors' => [
516	'{{WRAPPER}} .sellkit-field-type-checkbox .sellkit-field-option' => "margin: {$all_4s};",
517	'{{WRAPPER}} .sellkit-field-type-acceptance .sellkit-field-option' => "margin: {$all_4s};",
518	],
519	]
520	);
521
522	$widget->add_responsive_control(
523	'checkbox_spacing',
524	[
525	'label' => esc_html__( 'Spacing', 'sellkit' ),
526	'type' => 'dimensions',
527	'size_units' => [ 'px', 'em', '%' ],
528	'selectors' => [
529	'{{WRAPPER}} .sellkit-field-type-checkbox .sellkit-field-subgroup' => "padding: {$all_4s};",
530	'{{WRAPPER}} .sellkit-field-type-acceptance .sellkit-field-subgroup' => "padding: {$all_4s};",
531	],
532	]
533	);
534
535	$widget->start_controls_tabs( 'checkbox_tabs_state' );
536
537	$widget->start_controls_tab(
538	'checkbox_tab_state_normal',
539	[
540	'label' => esc_html__( 'Normal', 'sellkit' ),
541	]
542	);
543
544	$widget->add_control(
545	'checkbox_tab_background_color_normal',
546	[
547	'label' => esc_html__( 'Background Color', 'sellkit' ),
548	'type' => 'color',
549	'selectors' => [
550	'{{WRAPPER}} .sellkit-field-type-checkbox .sellkit-field ~ .sellkit-field-label:before' => 'background-color: {{VALUE}};',
551	'{{WRAPPER}} .sellkit-field-type-acceptance .sellkit-field ~ .sellkit-field-label:before' => 'background-color: {{VALUE}};',
552	],
553	]
554	);
555
556	$widget->add_group_control(
557	'border',
558	[
559	'name' => 'checkbox_tab_border_normal',
560	'selector' => implode( ', ', [
561	'{{WRAPPER}} .sellkit-field-option-checkbox .sellkit-field:not(:checked) ~ label:before',
562	'{{WRAPPER}} .sellkit-field-option-acceptance .sellkit-field:not(:checked) ~ label:before',
563	] ),
564	'fields_options' => [
565	'border' => [
566	'default' => 'solid',
567	],
568	'color' => [
569	'default' => '#111111',
570	],
571	'width' => [
572	'label' => esc_html__( 'Border Width', 'sellkit' ),
573	],
574	],
575	]
576	);
577
578	$widget->add_group_control(
579	'box-shadow',
580	[
581	'name' => 'checkbox_tab_box_shadow_normal',
582	'selector' => implode( ', ', [
583	'{{WRAPPER}} .sellkit-field-option-checkbox .sellkit-field:not(:checked) ~ label:before',
584	'{{WRAPPER}} .sellkit-field-option-acceptance .sellkit-field:not(:checked) ~ label:before',
585	] ),
586	]
587	);
588
589	$widget->end_controls_tab();
590
591	$widget->start_controls_tab(
592	'checkbox_tab_state_checked',
593	[
594	'label' => esc_html__( 'Checked', 'sellkit' ),
595	]
596	);
597
598	$widget->add_control(
599	'checkbox_tab_background_color_checked',
600	[
601	'label' => esc_html__( 'Background Color', 'sellkit' ),
602	'type' => 'color',
603	'selectors' => [
604	'{{WRAPPER}} .sellkit-field-type-checkbox .sellkit-field:checked ~ label:after' => 'background-color: {{VALUE}};',
605	'{{WRAPPER}} .sellkit-field-type-acceptance .sellkit-field:checked ~ label:after' => 'background-color: {{VALUE}};',
606	],
607	]
608	);
609
610	$widget->add_group_control(
611	'border',
612	[
613	'name' => 'checkbox_tab_border_checked',
614	'selector' => implode( ', ', [
615	'{{WRAPPER}} .sellkit-field-option-checkbox .sellkit-field:checked ~ label:before',
616	'{{WRAPPER}} .sellkit-field-option-acceptance .sellkit-field:checked ~ label:before',
617	] ),
618	'fields_options' => [
619	'border' => [
620	'default' => 'solid',
621	],
622	'color' => [
623	'default' => '#111111',
624	],
625	'width' => [
626	'label' => esc_html__( 'Border Width', 'sellkit' ),
627	],
628	],
629	]
630	);
631
632	$widget->add_group_control(
633	'box-shadow',
634	[
635	'name' => 'checkbox_tab_box_shadow_checked',
636	'selector' => implode( ', ', [
637	'{{WRAPPER}} .sellkit-field-option-checkbox .sellkit-field:checked ~ label:before',
638	'{{WRAPPER}} .sellkit-field-option-acceptance .sellkit-field:checked ~ label:before',
639	] ),
640	]
641	);
642
643	$widget->end_controls_tab();
644
645	$widget->end_controls_tabs();
646
647	$widget->add_control(
648	'checkbox_separator',
649	[
650	'type' => 'divider',
651	]
652	);
653
654	$widget->add_control(
655	'checkbox_border_radius',
656	[
657	'label' => esc_html__( 'Border Radius', 'sellkit' ),
658	'type' => 'dimensions',
659	'size_units' => [ 'px', '%' ],
660	'default' => [ 'unit' => 'px' ],
661	'selectors' => [
662	'{{WRAPPER}} .sellkit-field-type-checkbox .sellkit-field-subgroup .sellkit-field-label:before' => "border-radius: {$all_4s};",
663	'{{WRAPPER}} .sellkit-field-type-checkbox .sellkit-field-subgroup .sellkit-field-label:after' => "border-radius: {$all_4s};",
664	'{{WRAPPER}} .sellkit-field-type-acceptance .sellkit-field-subgroup .sellkit-field-label:before' => "border-radius: {$all_4s};",
665	'{{WRAPPER}} .sellkit-field-type-acceptance .sellkit-field-subgroup .sellkit-field-label:after' => "border-radius: {$all_4s};",
666	],
667	]
668	);
669
670	$widget->end_controls_section();
671	}
672
673	public static function add_section_radio( $widget ) {
674	$all_4s = '{{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}}';
675
676	$widget->start_controls_section(
677	'section_style_radio',
678	[
679	'label' => esc_html__( 'Radio', 'sellkit' ),
680	'tab' => 'style',
681	]
682	);
683
684	$widget->add_responsive_control(
685	'radio_size',
686	[
687	'label' => esc_html__( 'Size', 'sellkit' ),
688	'type' => 'slider',
689	'selectors' => [
690	'{{WRAPPER}} .sellkit-field-type-radio .sellkit-field-subgroup .sellkit-field-label' => 'padding-left: calc({{SIZE}}{{UNIT}} + 8px);line-height: calc({{SIZE}}{{UNIT}} + 2px);',
691	'{{WRAPPER}} .sellkit-field-type-radio .sellkit-field-subgroup .sellkit-field-label:before' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}};',
692	'{{WRAPPER}} .sellkit-field-type-radio .sellkit-field-subgroup .sellkit-field-label:after' => 'width: calc({{SIZE}}{{UNIT}} - 8px); height: calc({{SIZE}}{{UNIT}} - 8px);',
693	],
694	]
695	);
696
697	$widget->add_control(
698	'radio_color',
699	[
700	'label' => esc_html__( 'Color', 'sellkit' ),
701	'type' => 'color',
702	'selectors' => [
703	'{{WRAPPER}} .sellkit-field-type-radio .sellkit-field-subgroup .sellkit-field-label' => 'color: {{VALUE}};',
704	],
705	]
706	);
707
708	$widget->add_group_control(
709	'typography',
710	[
711	'name' => 'radio_typography',
712	'selector' => '{{WRAPPER}} .sellkit-field-type-radio .sellkit-field-subgroup .sellkit-field-label',
713	'scheme' => '3',
714	]
715	);
716
717	$widget->add_responsive_control(
718	'radio_spacing_between',
719	[
720	'label' => esc_html__( 'Spacing Between', 'sellkit' ),
721	'type' => 'dimensions',
722	'size_units' => [ 'px', 'em', '%' ],
723	'selectors' => [
724	'{{WRAPPER}} .sellkit-field-type-radio .sellkit-field-option' => "margin: {$all_4s};",
725	],
726	]
727	);
728
729	$widget->add_responsive_control(
730	'radio_spacing',
731	[
732	'label' => esc_html__( 'Spacing', 'sellkit' ),
733	'type' => 'dimensions',
734	'size_units' => [ 'px', 'em', '%' ],
735	'selectors' => [
736	'{{WRAPPER}} .sellkit-field-type-radio .sellkit-field-subgroup' => "padding: {$all_4s};",
737	],
738	]
739	);
740
741	$widget->start_controls_tabs( 'radio_tabs_state' );
742
743	$widget->start_controls_tab(
744	'radio_tab_state_normal',
745	[
746	'label' => esc_html__( 'Normal', 'sellkit' ),
747	]
748	);
749
750	$widget->add_control(
751	'radio_tab_background_color_normal',
752	[
753	'label' => esc_html__( 'Background Color', 'sellkit' ),
754	'type' => 'color',
755	'selectors' => [
756	'{{WRAPPER}} .sellkit-field-type-radio .sellkit-field ~ .sellkit-field-label:before' => 'background-color: {{VALUE}};',
757	],
758	]
759	);
760
761	$widget->add_group_control(
762	'border',
763	[
764	'name' => 'radio_tab_border_normal',
765	'selector' => '{{WRAPPER}} .sellkit-field-type-radio .sellkit-field:not(:checked) ~ .sellkit-field-label:before',
766	'fields_options' => [
767	'border' => [
768	'default' => 'solid',
769	],
770	'color' => [
771	'default' => '#111111',
772	],
773	'width' => [
774	'label' => esc_html__( 'Border Width', 'sellkit' ),
775	],
776	],
777	]
778	);
779
780	$widget->add_group_control(
781	'box-shadow',
782	[
783	'name' => 'radio_tab_box_shadow_normal',
784	'selector' => '{{WRAPPER}} .sellkit-field-type-radio .sellkit-field:not(:checked) ~ .sellkit-field-label:before',
785	]
786	);
787
788	$widget->end_controls_tab();
789
790	$widget->start_controls_tab(
791	'radio_tab_state_checked',
792	[
793	'label' => esc_html__( 'Checked', 'sellkit' ),
794	]
795	);
796
797	$widget->add_control(
798	'radio_tab_background_color_checked',
799	[
800	'label' => esc_html__( 'Background Color', 'sellkit' ),
801	'type' => 'color',
802	'selectors' => [
803	'{{WRAPPER}} .sellkit-field-type-radio .sellkit-field:checked ~ .sellkit-field-label:after' => 'background-color: {{VALUE}};',
804	],
805	]
806	);
807
808	$widget->add_group_control(
809	'border',
810	[
811	'name' => 'radio_tab_border_checked',
812	'selector' => '{{WRAPPER}} .sellkit-field-type-radio .sellkit-field:checked ~ .sellkit-field-label:before',
813	'fields_options' => [
814	'border' => [
815	'default' => 'solid',
816	],
817	'color' => [
818	'default' => '#111111',
819	],
820	'width' => [
821	'label' => esc_html__( 'Border Width', 'sellkit' ),
822	],
823	],
824	]
825	);
826
827	$widget->add_group_control(
828	'box-shadow',
829	[
830	'name' => 'radio_tab_box_shadow_checked',
831	'selector' => '{{WRAPPER}} .sellkit-field-type-radio .sellkit-field:checked ~ .sellkit-field-label:before',
832	]
833	);
834
835	$widget->end_controls_tab();
836
837	$widget->end_controls_tabs();
838
839	$widget->end_controls_section();
840	}
841
842	public static function add_section_button( $widget ) {
843	$all_4s = '{{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}}';
844
845	$widget->start_controls_section(
846	'section_style_button',
847	[
848	'label' => esc_html__( 'Button', 'sellkit' ),
849	'tab' => 'style',
850	]
851	);
852
853	$widget->add_responsive_control(
854	'button_width',
855	[
856	'label' => esc_html__( 'Width', 'sellkit' ),
857	'type' => 'slider',
858	'size_units' => [ 'px', '%' ],
859	'default' => [
860	'size' => 100,
861	'unit' => '%',
862	],
863	'range' => [
864	'px' => [
865	'max' => 1000,
866	],
867	],
868	'selectors' => [
869	'{{WRAPPER}} .sellkit-submit-button' => 'width: {{SIZE}}{{UNIT}};',
870	],
871	]
872	);
873
874	$widget->add_responsive_control(
875	'button_height',
876	[
877	'label' => esc_html__( 'Height', 'sellkit' ),
878	'type' => 'slider',
879	'range' => [
880	'px' => [
881	'max' => 1000,
882	],
883	],
884	'selectors' => [
885	'{{WRAPPER}} .sellkit-submit-button' => 'height: {{SIZE}}{{UNIT}};',
886	],
887	]
888	);
889
890	$widget->add_responsive_control(
891	'button_spacing',
892	[
893	'label' => esc_html__( 'Spacing', 'sellkit' ),
894	'type' => 'dimensions',
895	'size_units' => [ 'px', 'em', '%' ],
896	'default' => [
897	'top' => '0',
898	'right' => '0',
899	'bottom' => '0',
900	'left' => '0',
901	'unit' => 'px',
902	'isLinked' => true,
903	],
904	'selectors' => [
905	'{{WRAPPER}} .sellkit-submit-button' => "margin: {$all_4s};",
906	],
907	]
908	);
909
910	$widget->add_group_control(
911	'typography',
912	[
913	'name' => 'button_typography_text',
914	'scheme' => '3',
915	'selector' => '{{WRAPPER}} button.sellkit-submit-button span.sellkit-submit-button-text',
916	'fields_options' => [
917	'typography' => [
918	'label' => esc_html__( 'Text Typography', 'sellkit' ),
919	],
920	],
921	]
922	);
923
924	$widget->add_group_control(
925	'typography',
926	[
927	'name' => 'button_typography_subtext',
928	'scheme' => '3',
929	'selector' => '{{WRAPPER}} button.sellkit-submit-button span.sellkit-submit-button-subtext',
930	'fields_options' => [
931	'typography' => [
932	'label' => esc_html__( 'SubText Typography', 'sellkit' ),
933	],
934	],
935	]
936	);
937
938	$widget->add_responsive_control(
939	'button_align',
940	[
941	'label' => esc_html__( 'Alignment', 'sellkit' ),
942	'type' => 'choose',
943	'toggle' => false,
944	'default' => 'flex-end',
945	'options' => [
946	'flex-start' => [
947	'title' => esc_html__( 'Left', 'sellkit' ),
948	'icon' => 'eicon-text-align-left',
949	],
950	'center' => [
951	'title' => esc_html__( 'Center', 'sellkit' ),
952	'icon' => 'eicon-text-align-center',
953	],
954	'flex-end' => [
955	'title' => esc_html__( 'Right', 'sellkit' ),
956	'icon' => 'eicon-text-align-right',
957	],
958	],
959	'selectors' => [
960	'{{WRAPPER}} div.sellkit-field-type-submit-button' => 'justify-content: {{VALUE}}',
961	],
962	]
963	);
964
965	$widget->start_controls_tabs( 'button_tabs' );
966
967	$widget->start_controls_tab(
968	'button_tab_normal',
969	[
970	'label' => esc_html__( 'Normal', 'sellkit' ),
971	]
972	);
973
974	$widget->add_control(
975	'button_normal_color',
976	[
977	'label' => esc_html__( 'Color', 'sellkit' ),
978	'type' => 'color',
979	'selectors' => [
980	'{{WRAPPER}} .sellkit-submit-button' => 'color: {{VALUE}};',
981	],
982	]
983	);
984
985	$widget->add_group_control(
986	'background',
987	[
988	'name' => 'button_normal_background',
989	'exclude' => [ 'image' ],
990	'selector' => '{{WRAPPER}} .sellkit-submit-button',
991	]
992	);
993
994	$widget->add_group_control(
995	'box-shadow',
996	[
997	'name' => 'button_normal_box_shadow',
998	'selector' => '{{WRAPPER}} .sellkit-submit-button',
999	'exclude' => [ 'box_shadow_position' ],
1000	]
1001	);
1002
1003	$widget->add_control(
1004	'button_normal_border_heading',
1005	[
1006	'label' => esc_html__( 'Border', 'sellkit' ),
1007	'type' => 'heading',
1008	'separator' => 'before',
1009	]
1010	);
1011
1012	$widget->add_group_control(
1013	'border',
1014	[
1015	'name' => 'button_normal_border',
1016	'selector' => '{{WRAPPER}} .sellkit-submit-button',
1017	'fields_options' => [
1018	'border' => [
1019	'default' => 'solid',
1020	],
1021	'width' => [
1022	'label' => esc_html__( 'Border Width', 'sellkit' ),
1023	],
1024	'color' => [
1025	'default' => '#111111',
1026	],
1027	],
1028	]
1029	);
1030
1031	$widget->add_responsive_control(
1032	'button_normal_radius',
1033	[
1034	'label' => esc_html__( 'Border Radius', 'sellkit' ),
1035	'type' => 'dimensions',
1036	'size_units' => [ 'px', '%' ],
1037	'selectors' => [
1038	'{{WRAPPER}} .sellkit-submit-button' => "border-radius: {$all_4s};",
1039	],
1040	]
1041	);
1042
1043	$widget->end_controls_tab();
1044
1045	$widget->start_controls_tab(
1046	'button_tab_hover',
1047	[
1048	'label' => esc_html__( 'Hover', 'sellkit' ),
1049	]
1050	);
1051
1052	$widget->add_control(
1053	'button_hover_color',
1054	[
1055	'label' => esc_html__( 'Color', 'sellkit' ),
1056	'type' => 'color',
1057	'selectors' => [
1058	'{{WRAPPER}} .sellkit-submit-button:hover' => 'color: {{VALUE}};',
1059	],
1060	]
1061	);
1062
1063	$widget->add_group_control(
1064	'background',
1065	[
1066	'name' => 'button_hover_background',
1067	'exclude' => [ 'image' ],
1068	'selector' => '{{WRAPPER}} .sellkit-submit-button:hover',
1069	]
1070	);
1071
1072	$widget->add_group_control(
1073	'box-shadow',
1074	[
1075	'name' => 'button_hover_box_shadow',
1076	'separator' => 'before',
1077	'selector' => '{{WRAPPER}} .sellkit-submit-button:hover',
1078	'exclude' => [ 'box_shadow_position' ],
1079	]
1080	);
1081
1082	$widget->add_control(
1083	'button_hover_border_heading',
1084	[
1085	'label' => esc_html__( 'Border', 'sellkit' ),
1086	'type' => 'heading',
1087	'separator' => 'before',
1088	]
1089	);
1090
1091	$widget->add_group_control(
1092	'border',
1093	[
1094	'name' => 'button_hover_border',
1095	'selector' => '{{WRAPPER}} .sellkit-submit-button:hover',
1096	'fields_options' => [
1097	'border' => [
1098	'default' => 'solid',
1099	],
1100	'width' => [
1101	'default' => [
1102	'unit' => 'px',
1103	'top' => '1',
1104	'left' => '1',
1105	'right' => '1',
1106	'bottom' => '1',
1107	],
1108	],
1109	'color' => [
1110	'default' => '#111111',
1111	],
1112	],
1113	]
1114	);
1115
1116	$widget->add_responsive_control(
1117	'button_hover_radius',
1118	[
1119	'label' => esc_html__( 'Border Radius', 'sellkit' ),
1120	'type' => 'dimensions',
1121	'size_units' => [ 'px', '%' ],
1122	'selectors' => [
1123	'{{WRAPPER}} .sellkit-submit-button:hover' => "border-radius: {$all_4s};",
1124	],
1125	]
1126	);
1127
1128	$widget->end_controls_tab();
1129
1130	$widget->end_controls_tabs();
1131
1132	$widget->add_control(
1133	'button_icon_heading',
1134	[
1135	'label' => esc_html__( 'Icon', 'sellkit' ),
1136	'type' => 'heading',
1137	'separator' => 'before',
1138	'condition' => [ 'submit_button_icon[value]!' => '' ],
1139	]
1140	);
1141
1142	$widget->add_responsive_control(
1143	'button_icon_size',
1144	[
1145	'label' => esc_html__( 'Size', 'sellkit' ),
1146	'type' => 'slider',
1147	'condition' => [ 'submit_button_icon[value]!' => '' ],
1148	'size_units' => [ 'px' ],
1149	'range' => [
1150	'px' => [
1151	'max' => 200,
1152	],
1153	],
1154	'selectors' => [
1155	'{{WRAPPER}} .sellkit-submit-button i' => 'font-size: {{SIZE}}{{UNIT}};',
1156	'{{WRAPPER}} .sellkit-submit-button svg' => 'width: {{SIZE}}{{UNIT}};height: {{SIZE}}{{UNIT}};',
1157	],
1158	]
1159	);
1160
1161	$widget->add_control(
1162	'button_icon_space_between',
1163	[
1164	'label' => esc_html__( 'Space Between', 'sellkit' ),
1165	'type' => 'slider',
1166	'condition' => [ 'submit_button_icon[value]!' => '' ],
1167	'size_units' => [ 'px' ],
1168	'range' => [
1169	'px' => [
1170	'max' => 100,
1171	],
1172	],
1173	'default' => [
1174	'unit' => 'px',
1175	'size' => 5,
1176	],
1177	'selectors' => [
1178	'{{WRAPPER}}.sellkit-optin-button-icon-left .sellkit-submit-button i' => 'margin-right: {{SIZE}}{{UNIT}};',
1179	'{{WRAPPER}}.sellkit-optin-button-icon-left .sellkit-submit-button svg' => 'margin-right: {{SIZE}}{{UNIT}};',
1180	'{{WRAPPER}}.sellkit-optin-button-icon-right .sellkit-submit-button i' => 'margin-left: {{SIZE}}{{UNIT}};',
1181	'{{WRAPPER}}.sellkit-optin-button-icon-right .sellkit-submit-button svg' => 'margin-left: {{SIZE}}{{UNIT}};',
1182	],
1183	]
1184	);
1185
1186	$widget->add_control(
1187	'button_icon_align',
1188	[
1189	'label' => esc_html__( 'Alignment', 'sellkit' ),
1190	'type' => 'choose',
1191	'toggle' => false,
1192	'condition' => [ 'submit_button_icon[value]!' => '' ],
1193	'prefix_class' => 'sellkit-optin-button-icon-',
1194	'default' => 'left',
1195	'options' => [
1196	'left' => [
1197	'title' => esc_html__( 'Left', 'sellkit' ),
1198	'icon' => 'eicon-text-align-left',
1199	],
1200	'right' => [
1201	'title' => esc_html__( 'Right', 'sellkit' ),
1202	'icon' => 'eicon-text-align-right',
1203	],
1204	],
1205	]
1206	);
1207
1208	$widget->start_controls_tabs( 'button_icon_tabs' );
1209
1210	$widget->start_controls_tab(
1211	'button_icon_tabs_normal',
1212	[
1213	'label' => esc_html__( 'Normal', 'sellkit' ),
1214	'condition' => [
1215	'submit_button_icon[library]!' => [ '', 'svg' ],
1216	],
1217	]
1218	);
1219
1220	$widget->add_control(
1221	'button_icon_color_normal',
1222	[
1223	'label' => esc_html__( 'Color', 'sellkit' ),
1224	'type' => 'color',
1225	'selectors' => [
1226	'{{WRAPPER}} .sellkit-submit-button i' => 'color: {{VALUE}};',
1227	'{{WRAPPER}} .sellkit-submit-button svg' => 'fill: {{VALUE}};',
1228	],
1229	'condition' => [
1230	'submit_button_icon[library]!' => [ '', 'svg' ],
1231	],
1232	]
1233	);
1234
1235	$widget->end_controls_tab();
1236
1237	$widget->start_controls_tab(
1238	'button_icon_tabs_hover',
1239	[
1240	'label' => esc_html__( 'Hover', 'sellkit' ),
1241	'condition' => [
1242	'submit_button_icon[library]!' => [ '', 'svg' ],
1243	],
1244	]
1245	);
1246
1247	$widget->add_control(
1248	'button_icon_color_hover',
1249	[
1250	'label' => esc_html__( 'Color', 'sellkit' ),
1251	'type' => 'color',
1252	'selectors' => [
1253	'{{WRAPPER}} .sellkit-submit-button:hover i' => 'color: {{VALUE}};',
1254	'{{WRAPPER}} .sellkit-submit-button:hover svg' => 'fill: {{VALUE}};',
1255	],
1256	'condition' => [
1257	'submit_button_icon[library]!' => [ '', 'svg' ],
1258	],
1259	]
1260	);
1261
1262	$widget->end_controls_tab();
1263
1264	$widget->end_controls_tabs();
1265
1266	$widget->end_controls_section();
1267	}
1268
1269	public static function add_section_message_style( $widget ) {
1270
1271	$widget->start_controls_section(
1272	'message_text_style',
1273	[
1274	'label' => esc_html__( 'Messages', 'sellkit' ),
1275	'tab' => 'style',
1276	]
1277	);
1278
1279	$widget->add_group_control(
1280	'typography',
1281	[
1282	'name' => 'message_text_typography',
1283	'scheme' => '3',
1284	'selector' => '{{WRAPPER}} .sellkit-optin-response, {{WRAPPER}} .sellkit-optin small.sellkit-optin-text',
1285	]
1286	);
1287
1288	$widget->add_control(
1289	'seccess_message_color',
1290	[
1291	'label' => esc_html__( 'Success Message Color', 'sellkit' ),
1292	'type' => 'color',
1293	'selectors' => [
1294	'{{WRAPPER}} .sellkit-optin-success .sellkit-optin-response' => 'color: {{VALUE}};',
1295	],
1296	]
1297	);
1298
1299	$widget->add_control(
1300	'error_message_color',
1301	[
1302	'label' => esc_html__( 'Error Message Color', 'sellkit' ),
1303	'type' => 'color',
1304	'selectors' => [
1305	'{{WRAPPER}} .sellkit-optin-error .sellkit-optin-response' => 'color: {{VALUE}};',
1306	],
1307	]
1308	);
1309
1310	$widget->add_control(
1311	'inline_message_color',
1312	[
1313	'label' => esc_html__( 'Inline Message Color', 'sellkit' ),
1314	'type' => 'color',
1315	'selectors' => [
1316	'{{WRAPPER}} .sellkit-optin .sellkit-optin-text' => 'color: {{VALUE}};',
1317	],
1318	]
1319	);
1320
1321	$widget->end_controls_section();
1322	}
1323	}
1324