modern-button.php — Shortcodes and extra features for Phlox theme 2.6.1

auxin-elements / includes / elementor / widgets / modern-button.php

auxin-elements / includes / elementor / widgets Last commit date

modern-button.php

1080 lines

1	<?php
2	namespace Auxin\Plugin\CoreElements\Elementor\Elements;
3
4	use Elementor\Plugin;
5	use Elementor\Widget_Base;
6	use Elementor\Controls_Manager;
7	use Elementor\Group_Control_Typography;
8	use Elementor\Icons_Manager;
9	use Elementor\Scheme_Typography;
10	use Elementor\Group_Control_Background;
11	use Elementor\Group_Control_Box_Shadow;
12	use Elementor\Group_Control_Text_Shadow;
13
14
15	if ( ! defined( 'ABSPATH' ) ) {
16	exit; // Exit if accessed directly.
17	}
18
19	/**
20	* Elementor 'ModernButton' widget.
21	*
22	* Elementor widget that displays an 'ModernButton' with lightbox.
23	*
24	* @since 1.0.0
25	*/
26	class ModernButton extends Widget_Base {
27
28	/**
29	* Get widget name.
30	*
31	* Retrieve 'ModernButton' widget name.
32	*
33	* @since 1.0.0
34	* @access public
35	*
36	* @return string Widget name.
37	*/
38	public function get_name() {
39	return 'aux_modern_button';
40	}
41
42	/**
43	* Get widget title.
44	*
45	* Retrieve 'ModernButton' widget title.
46	*
47	* @since 1.0.0
48	* @access public
49	*
50	* @return string Widget title.
51	*/
52	public function get_title() {
53	return __('Modern Button', 'auxin-elements' );
54	}
55
56	/**
57	* Get widget icon.
58	*
59	* Retrieve 'ModernButton' widget icon.
60	*
61	* @since 1.0.0
62	* @access public
63	*
64	* @return string Widget icon.
65	*/
66	public function get_icon() {
67	return 'eicon-button auxin-badge';
68	}
69
70	/**
71	* Get widget categories.
72	*
73	* Retrieve 'ModernButton' widget icon.
74	*
75	* @since 1.0.0
76	* @access public
77	*
78	* @return string Widget icon.
79	*/
80	public function get_categories() {
81	return [ 'auxin-core' ];
82	}
83
84	/**
85	* Register 'ModernButton' widget controls.
86	*
87	* Adds different input fields to allow the user to change and customize the widget settings.
88	*
89	* @since 1.0.0
90	* @access protected
91	*/
92	protected function _register_controls() {
93
94	/-----------------------------------------------------------------------------------/
95	/* Button
96	/-----------------------------------------------------------------------------------/
97
98	$this->start_controls_section(
99	'button_section',
100	[
101	'label' => __('Button', 'auxin-elements' ),
102	]
103	);
104
105	$this->add_control(
106	'label',
107	[
108	'label' => __('Text','auxin-elements' ),
109	'type' => Controls_Manager::TEXT,
110	'default' => __('Click Here','auxin-elements' )
111	]
112	);
113
114	$this->add_control(
115	'label2',
116	[
117	'label' => __('Highlighted Text', 'auxin-elements' ),
118	'type' => Controls_Manager::TEXT,
119	'default' => __('','auxin-elements' )
120	]
121	);
122
123	$this->add_control(
124	'label3',
125	[
126	'label' => __('After Text', 'auxin-elements' ),
127	'type' => Controls_Manager::TEXT,
128	'default' => __('','auxin-elements' )
129	]
130	);
131
132	$this->add_control(
133	'vertical_align',
134	[
135	'label' => __( 'Text Vertical Align', 'auxin-elements' ),
136	'type' => Controls_Manager::CHOOSE,
137	'options' => [
138	'top' => [
139	'title' => __( 'Top', 'auxin-elements' ),
140	'icon' => 'eicon-v-align-top',
141	],
142	'center' => [
143	'title' => __( 'Center', 'auxin-elements' ),
144	'icon' => 'eicon-v-align-middle',
145	],
146	'bottom' => [
147	'title' => __( 'Bottom', 'auxin-elements' ),
148	'icon' => 'eicon-v-align-bottom',
149	],
150	],
151	'selectors' => [
152	'{{WRAPPER}} .aux-text' => 'display:flex; align-items:{{VALUE}};'
153	],
154	'selectors_dictionary' => [
155	'top' => 'flex-start',
156	'bottom' => 'flex-end'
157	],
158	'conditions' => [
159	'relation' => 'or',
160	'terms' => [
161	[
162	'name' => 'label2',
163	'operator' => '!==',
164	'value' => ''
165	],
166	[
167	'name' => 'label3',
168	'operator' => '!==',
169	'value' => ''
170	]
171	]
172	],
173	'default' => ''
174	]
175	);
176
177	$this->add_responsive_control(
178	'btn_align',
179	[
180	'label' => __( 'Alignment', 'auxin-elements' ),
181	'type' => Controls_Manager::CHOOSE,
182	'options' => [
183	'left' => [
184	'title' => __( 'Left', 'auxin-elements' ),
185	'icon' => 'eicon-text-align-left',
186	],
187	'center' => [
188	'title' => __( 'Center', 'auxin-elements' ),
189	'icon' => 'eicon-text-align-center',
190	],
191	'right' => [
192	'title' => __( 'Right', 'auxin-elements' ),
193	'icon' => 'eicon-text-align-right',
194	],
195	'justify' => [
196	'title' => __( 'Justified', 'auxin-elements' ),
197	'icon' => 'eicon-text-align-justify',
198	],
199	],
200	'default' => 'left',
201	]
202	);
203
204	$this->add_control(
205	'link',
206	[
207	'label' => __('Link','auxin-elements' ),
208	'type' => Controls_Manager::URL,
209	'placeholder' => 'https://your-link.com',
210	'show_external' => true,
211	'dynamic' => [
212	'active' => true
213	]
214	]
215	);
216
217	$this->add_control(
218	'open_video_in_lightbox',
219	array(
220	'label' => __('Open Video in Lightbox','auxin-elements' ),
221	'description' => __( 'To use this option, the above link option should be a video', 'auxin-elements' ),
222	'type' => Controls_Manager::SWITCHER,
223	'label_on' => __( 'On', 'auxin-elements' ),
224	'label_off' => __( 'Off', 'auxin-elements' ),
225	'return_value' => 'yes',
226	'default' => ''
227	)
228	);
229
230	$this->add_control(
231	'icon_display',
232	[
233	'label' => __( 'Display Icon', 'auxin-elements' ),
234	'type' => Controls_Manager::SWITCHER,
235	'label_on' => __( 'On', 'auxin-elements' ),
236	'label_off' => __( 'Off', 'auxin-elements' ),
237	'return_value' => 'yes',
238	'default' => 'no',
239	'separator' => 'before'
240	]
241	);
242
243	$this->add_control(
244	'icon',
245	[
246	'type' => Controls_Manager::ICONS,
247	'default' => [
248	'value' => 'auxicon-arrow-down',
249	'library' => 'auxicon'
250	],
251	'condition' => [
252	'icon_display' => 'yes'
253	],
254	]
255	);
256
257	$this->end_controls_section();
258
259	/-----------------------------------------------------------------------------------/
260	/* Button Style Section
261	/-----------------------------------------------------------------------------------/
262
263	$this->start_controls_section(
264	'section_style_btn',
265	[
266	'label' => __('Button', 'auxin-elements' ),
267	'tab' => Controls_Manager::TAB_STYLE,
268	]
269	);
270
271	$this->add_control(
272	'btn_type',
273	[
274	'label' => __('Type', 'auxin-elements'),
275	'type' => Controls_Manager::SELECT,
276	'default' => 'default',
277	'options' => [
278	'default' => __('Default', 'auxin-elements' ),
279	'outline' => __('Outline' , 'auxin-elements' ),
280	]
281	]
282	);
283
284	$this->add_control(
285	'btn_shape',
286	[
287	'label' => __('Shape', 'auxin-elements'),
288	'type' => Controls_Manager::SELECT,
289	'default' => 'normal',
290	'options' => [
291	'normal' => __('Normal', 'auxin-elements' ),
292	'round' => __('Round' , 'auxin-elements' ),
293	'curve' => __('Curve' , 'auxin-elements' ),
294	]
295	]
296	);
297
298	$this->add_control(
299	'btn_size',
300	[
301	'label' => __('Size', 'auxin-elements'),
302	'type' => Controls_Manager::SELECT,
303	'default' => 'md',
304	'options' => [
305	'xl' => __('Exlarge', 'auxin-elements' ),
306	'lg' => __('Large' , 'auxin-elements' ),
307	'md' => __('Medium' , 'auxin-elements' ),
308	'sm' => __('Small' , 'auxin-elements' ),
309	'xs' => __('Tiny' , 'auxin-elements' )
310	]
311	]
312	);
313
314	$this->add_control(
315	'btn_skin',
316	[
317	'label' => __('Skin', 'auxin-elements'),
318	'label_block' => false,
319	'type' => 'aux-visual-select',
320	'default' => 'black',
321	'options' =>[
322	'black' => [
323	'label' => __('black', 'auxin-elements'),
324	'css_class' => 'aux-color-selector aux-button aux-visual-selector-black'
325	],
326	'white' => [
327	'label' => __('White', 'auxin-elements'),
328	'css_class' => 'aux-color-selector aux-button aux-visual-selector-white'
329	],
330	'info' => [
331	'label' => __('Ball Blue', 'auxin-elements'),
332	'css_class' => 'aux-color-selector aux-button aux-visual-selector-ball-blue'
333	],
334	'warning' => [
335	'label' => __('Mikado Yellow', 'auxin-elements'),
336	'css_class' => 'aux-color-selector aux-button aux-visual-selector-mikado-yellow'
337	],
338	'caution' => [
339	'label' => __('Carmine Pink', 'auxin-elements'),
340	'css_class' => 'aux-color-selector aux-button aux-visual-selector-carmine-pink'
341	]
342	]
343	]
344	);
345
346	$this->start_controls_tabs( 'btn_styles' );
347
348	$this->start_controls_tab(
349	'btn_normal',
350	[
351	'label' => __( 'Normal' , 'auxin-elements' )
352	]
353	);
354
355	$this->add_group_control(
356	Group_Control_Background::get_type(),
357	[
358	'name' => 'btn_bg_normal',
359	'label' => __( 'Background', 'auxin-elements' ),
360	'types' => [ 'classic', 'gradient' ],
361	'selector' => '{{WRAPPER}} .aux-modern-button.aux-modern-button-outline .aux-overlay:before, {{WRAPPER}} .aux-modern-button .aux-overlay:before'
362	]
363	);
364
365	$this->add_group_control(
366	Group_Control_Box_Shadow::get_type(),
367	[
368	'name' => 'btn_box_shadow_normal',
369	'selector' => '{{WRAPPER}} .aux-overlay:before, {{WRAPPER}} .aux-overlay:after'
370	]
371	);
372
373	$this->add_responsive_control(
374	'btn_padding_normal',
375	[
376	'label' => __( 'Padding', 'auxin-elements' ),
377	'type' => Controls_Manager::DIMENSIONS,
378	'size_units' => [ 'px', '%' ],
379	'selectors' => [
380	'{{WRAPPER}} .aux-modern-button' => 'padding:{{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
381	]
382	]
383	);
384
385	$this->add_responsive_control(
386	'btn_border_radius_normal',
387	[
388	'label' => __( 'Border Radius', 'auxin-elements' ),
389	'type' => Controls_Manager::DIMENSIONS,
390	'size_units' => [ 'px', 'em', '%' ],
391	'allowed_dimensions' => 'all',
392	'separator' => 'before',
393	'selectors' => [
394	'{{WRAPPER}} .aux-overlay:before, {{WRAPPER}} .aux-overlay:after' => 'border-radius:{{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};'
395	]
396	]
397	);
398
399	$this->end_controls_tab();
400
401	$this->start_controls_tab(
402	'button_hover',
403	[
404	'label' => __( 'Hover' , 'auxin-elements' )
405	]
406	);
407
408	$this->add_group_control(
409	Group_Control_Background::get_type(),
410	[
411	'name' => 'btn_bg_hover',
412	'label' => __( 'Background', 'auxin-elements' ),
413	'types' => [ 'classic', 'gradient' ],
414	'selector' => '{{WRAPPER}} .aux-modern-button.aux-modern-button-outline .aux-overlay:after, {{WRAPPER}} .aux-modern-button .aux-overlay:after'
415	]
416	);
417
418	$this->add_group_control(
419	Group_Control_Box_Shadow::get_type(),
420	[
421	'name' => 'btn_box_shadow_hover',
422	'selector' => '{{WRAPPER}} .aux-modern-button:hover .aux-overlay:before, {{WRAPPER}} .aux-modern-button:hover .aux-overlay:after'
423	]
424	);
425
426	$this->add_responsive_control(
427	'btn_padding_hover',
428	[
429	'label' => __( 'Padding', 'auxin-elements' ),
430	'type' => Controls_Manager::DIMENSIONS,
431	'size_units' => [ 'px', '%' ],
432	'selectors' => [
433	'{{WRAPPER}} .aux-modern-button:hover' => 'padding:{{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
434	]
435	]
436	);
437
438	$this->add_responsive_control(
439	'btn_border_radius_hover',
440	[
441	'label' => __( 'Border Radius', 'auxin-elements' ),
442	'type' => Controls_Manager::DIMENSIONS,
443	'size_units' => [ 'px', 'em', '%' ],
444	'allowed_dimensions' => 'all',
445	'separator' => 'before',
446	'selectors' => [
447	'{{WRAPPER}} .aux-modern-button:hover .aux-overlay:before, {{WRAPPER}} .aux-modern-button:hover .aux-overlay:after' => 'border-radius:{{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};'
448	]
449	]
450	);
451
452	$this->end_controls_tab();
453
454	$this->end_controls_tabs();
455
456	$this->end_controls_section();
457
458	/-----------------------------------------------------------------------------------/
459	/* Label Style Section
460	/-----------------------------------------------------------------------------------/
461
462	$this->start_controls_section(
463	'section_style_text',
464	[
465	'label' => __('Text', 'auxin-elements' ),
466	'tab' => Controls_Manager::TAB_STYLE
467	]
468	);
469
470
471	$this->start_controls_tabs( 'text_styles' );
472
473	$this->start_controls_tab(
474	'text_normal',
475	[
476	'label' => __( 'Normal' , 'auxin-elements' )
477	]
478	);
479
480	$this->add_group_control(
481	Group_Control_Typography::get_type(),
482	[
483	'name' => 'text_normal_typo',
484	'scheme' => Scheme_Typography::TYPOGRAPHY_1,
485	'selector' => '{{WRAPPER}} .aux-text'
486	]
487	);
488
489	$this->add_control(
490	'text_normal_color',
491	[
492	'label' => __( 'Color', 'auxin-elements' ),
493	'type' => Controls_Manager::COLOR,
494	'selectors' => [
495	'{{WRAPPER}} .aux-text' => 'color: {{VALUE}};'
496	]
497	]
498
499	);
500
501	$this->add_group_control(
502	Group_Control_Text_Shadow::get_type(),
503	[
504	'name' => 'text_normal_text_shadow',
505	'label' => __( 'Text Shadow', 'auxin-elements' ),
506	'selector' => '{{WRAPPER}} .aux-text'
507	]
508	);
509
510	$this->end_controls_tab();
511
512	$this->start_controls_tab(
513	'text_hover',
514	[
515	'label' => __( 'Hover' , 'auxin-elements' )
516	]
517	);
518
519	$this->add_group_control(
520	Group_Control_Typography::get_type(),
521	[
522	'name' => 'text_hover_typo',
523	'scheme' => Scheme_Typography::TYPOGRAPHY_1,
524	'selector' => '{{WRAPPER}} .aux-modern-button:hover .aux-text'
525	]
526	);
527
528	$this->add_control(
529	'text_hover_color',
530	[
531	'label' => __( 'Color', 'auxin-elements' ),
532	'type' => Controls_Manager::COLOR,
533	'selectors' => [
534	'{{WRAPPER}} .aux-modern-button:hover .aux-text' => 'color:{{VALUE}};'
535	]
536	]
537	);
538
539	$this->add_group_control(
540	Group_Control_Text_Shadow::get_type(),
541	[
542	'name' => 'text_hover_text_shadow',
543	'label' => __( 'Text Shadow', 'auxin-elements' ),
544	'selector' => '{{WRAPPER}} .aux-modern-button:hover .aux-text'
545	]
546	);
547
548	$this->end_controls_tab();
549
550	$this->end_controls_tabs();
551
552	$this->end_controls_section();
553
554
555	/-----------------------------------------------------------------------------------/
556	/* Label Highlighted Style Section
557	/-----------------------------------------------------------------------------------/
558
559	$this->start_controls_section(
560	'section_style_text2',
561	[
562	'label' => __('Highlighted Text', 'auxin-elements' ),
563	'tab' => Controls_Manager::TAB_STYLE,
564	'condition' => [
565	'label2!' => ''
566	]
567	]
568	);
569
570
571	$this->start_controls_tabs( 'text2_styles' );
572
573	$this->start_controls_tab(
574	'text2_normal',
575	[
576	'label' => __( 'Normal' , 'auxin-elements' )
577	]
578	);
579
580	$this->add_group_control(
581	Group_Control_Typography::get_type(),
582	[
583	'name' => 'text2_normal_typo',
584	'scheme' => Scheme_Typography::TYPOGRAPHY_1,
585	'selector' => '{{WRAPPER}} .aux-text-highlighted'
586	]
587	);
588
589	$this->add_control(
590	'text2_normal_color',
591	[
592	'label' => __( 'Color', 'auxin-elements' ),
593	'type' => Controls_Manager::COLOR,
594	'selectors' => [
595	'{{WRAPPER}} .aux-text-highlighted' => 'color: {{VALUE}};'
596	]
597	]
598
599	);
600
601	$this->add_group_control(
602	Group_Control_Text_Shadow::get_type(),
603	[
604	'name' => 'text2_normal_text_shadow',
605	'label' => __( 'Text Shadow', 'auxin-elements' ),
606	'selector' => '{{WRAPPER}} .aux-text-highlighted'
607	]
608	);
609
610	$this->end_controls_tab();
611
612	$this->start_controls_tab(
613	'text2_hover',
614	[
615	'label' => __( 'Hover' , 'auxin-elements' )
616	]
617	);
618
619	$this->add_group_control(
620	Group_Control_Typography::get_type(),
621	[
622	'name' => 'text2_hover_typo',
623	'scheme' => Scheme_Typography::TYPOGRAPHY_1,
624	'selector' => '{{WRAPPER}} .aux-modern-button:hover .aux-text-highlighted'
625	]
626	);
627
628	$this->add_control(
629	'text2_hover_color',
630	[
631	'label' => __( 'Color', 'auxin-elements' ),
632	'type' => Controls_Manager::COLOR,
633	'selectors' => [
634	'{{WRAPPER}} .aux-modern-button:hover .aux-text-highlighted' => 'color:{{VALUE}};'
635	]
636	]
637	);
638
639	$this->add_group_control(
640	Group_Control_Text_Shadow::get_type(),
641	[
642	'name' => 'text2_hover_text_shadow',
643	'label' => __( 'Text Shadow', 'auxin-elements' ),
644	'selector' => '{{WRAPPER}} .aux-modern-button:hover .aux-text-highlighted'
645	]
646	);
647
648	$this->end_controls_tab();
649
650	$this->end_controls_tabs();
651
652	$this->add_responsive_control(
653	'text2_margin',
654	[
655	'label' => __( 'Margin', 'auxin-elements' ),
656	'type' => Controls_Manager::DIMENSIONS,
657	'size_units' => [ 'px', 'em', '%' ],
658	'selectors' => [
659	'{{WRAPPER}} .aux-text-highlighted' => 'margin:{{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
660	],
661	'separator' => 'before'
662	]
663	);
664
665	$this->end_controls_section();
666
667	/-----------------------------------------------------------------------------------/
668	/* Label After Style Section
669	/-----------------------------------------------------------------------------------/
670
671	$this->start_controls_section(
672	'section_style_text3',
673	[
674	'label' => __('After Text', 'auxin-elements' ),
675	'tab' => Controls_Manager::TAB_STYLE,
676	'condition' => [
677	'label3!' => ''
678	]
679	]
680	);
681
682
683	$this->start_controls_tabs( 'text3_styles' );
684
685	$this->start_controls_tab(
686	'text3_normal',
687	[
688	'label' => __( 'Normal' , 'auxin-elements' )
689	]
690	);
691
692	$this->add_group_control(
693	Group_Control_Typography::get_type(),
694	[
695	'name' => 'text3_normal_typo',
696	'scheme' => Scheme_Typography::TYPOGRAPHY_1,
697	'selector' => '{{WRAPPER}} .aux-text-after'
698	]
699	);
700
701	$this->add_control(
702	'text3_normal_color',
703	[
704	'label' => __( 'Color', 'auxin-elements' ),
705	'type' => Controls_Manager::COLOR,
706	'selectors' => [
707	'{{WRAPPER}} .aux-text-after' => 'color: {{VALUE}};'
708	]
709	]
710
711	);
712
713	$this->add_group_control(
714	Group_Control_Text_Shadow::get_type(),
715	[
716	'name' => 'text3_normal_text_shadow',
717	'label' => __( 'Text Shadow', 'auxin-elements' ),
718	'selector' => '{{WRAPPER}} .aux-text-after'
719	]
720	);
721
722	$this->end_controls_tab();
723
724	$this->start_controls_tab(
725	'text3_hover',
726	[
727	'label' => __( 'Hover' , 'auxin-elements' )
728	]
729	);
730
731	$this->add_group_control(
732	Group_Control_Typography::get_type(),
733	[
734	'name' => 'text3_hover_typo',
735	'scheme' => Scheme_Typography::TYPOGRAPHY_1,
736	'selector' => '{{WRAPPER}} .aux-modern-button:hover .aux-text-after'
737	]
738	);
739
740	$this->add_control(
741	'text3_hover_color',
742	[
743	'label' => __( 'Color', 'auxin-elements' ),
744	'type' => Controls_Manager::COLOR,
745	'selectors' => [
746	'{{WRAPPER}} .aux-modern-button:hover .aux-text-after' => 'color:{{VALUE}};'
747	]
748	]
749	);
750
751	$this->add_group_control(
752	Group_Control_Text_Shadow::get_type(),
753	[
754	'name' => 'text3_hover_text_shadow',
755	'label' => __( 'Text Shadow', 'auxin-elements' ),
756	'selector' => '{{WRAPPER}} .aux-modern-button:hover .aux-text-after'
757	]
758	);
759
760	$this->end_controls_tab();
761
762	$this->end_controls_tabs();
763
764	$this->add_responsive_control(
765	'text3_margin',
766	[
767	'label' => __( 'Margin', 'auxin-elements' ),
768	'type' => Controls_Manager::DIMENSIONS,
769	'size_units' => [ 'px', 'em', '%' ],
770	'selectors' => [
771	'{{WRAPPER}} .aux-text-after' => 'margin:{{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
772	],
773	'separator' => 'before'
774	]
775	);
776
777	$this->end_controls_section();
778
779	/-----------------------------------------------------------------------------------/
780	/* Button Style Section
781	/-----------------------------------------------------------------------------------/
782
783	$this->start_controls_section(
784	'section_style_icon',
785	[
786	'label' => __('Icon', 'auxin-elements' ),
787	'tab' => Controls_Manager::TAB_STYLE,
788	'condition' => [
789	'icon_display' => 'yes'
790	]
791	]
792	);
793
794	$this->add_control(
795	'icon_align',
796	[
797	'label' => __('Alignment', 'auxin-elements'),
798	'type' => Controls_Manager::SELECT,
799	'default' => 'left',
800	'options' => [
801	'top' => __('Over', 'auxin-elements' ),
802	'bottom' => __('Below', 'auxin-elements' ),
803	'left' => __('Left', 'auxin-elements' ),
804	'right' => __('Right', 'auxin-elements' ),
805	]
806	]
807	);
808
809	$this->start_controls_tabs( 'icon_styles' );
810
811	$this->start_controls_tab(
812	'icon_normal',
813	[
814	'label' => __( 'Normal' , 'auxin-elements' )
815	]
816	);
817
818	$this->add_responsive_control(
819	'icon_normal_size',
820	[
821	'label' => __( 'Size', 'auxin-elements' ),
822	'type' => Controls_Manager::SLIDER,
823	'size_units' => [ 'px', '%' ],
824	'range' => [
825	'px' => [
826	'min' => 10,
827	'max' => 512,
828	'step' => 2,
829	],
830	'%' => [
831	'min' => 0,
832	'max' => 100,
833	],
834	],
835	'selectors' => [
836	'{{WRAPPER}} .aux-icon' => 'font-size: {{SIZE}}{{UNIT}};',
837	]
838	]
839	);
840
841	$this->add_control(
842	'icon_normal_color',
843	[
844	'label' => __( 'Color', 'auxin-elements' ),
845	'type' => Controls_Manager::COLOR,
846	'selectors' => [
847	'{{WRAPPER}} .aux-icon' => 'color: {{VALUE}};',
848	]
849	]
850	);
851
852	$this->add_group_control(
853	Group_Control_Background::get_type(),
854	[
855	'name' => 'icon_normal_bg',
856	'label' => __( 'Background', 'auxin-elements' ),
857	'types' => [ 'classic', 'gradient' ],
858	'selector' => '{{WRAPPER}} .aux-icon:before',
859	]
860	);
861
862	$this->add_group_control(
863	Group_Control_Box_Shadow::get_type(),
864	[
865	'name' => 'icon_normal_box_shadow',
866	'selector' => '{{WRAPPER}} .aux-icon'
867	]
868	);
869
870	$this->add_responsive_control(
871	'icon_normal_margin',
872	[
873	'label' => __( 'Margin', 'auxin-elements' ),
874	'type' => Controls_Manager::DIMENSIONS,
875	'size_units' => [ 'px', '%' ],
876	'selectors' => [
877	'{{WRAPPER}} .aux-icon' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
878	]
879	]
880	);
881
882	$this->add_responsive_control(
883	'icon_normal_padding',
884	[
885	'label' => __( 'Padding', 'auxin-elements' ),
886	'type' => Controls_Manager::DIMENSIONS,
887	'size_units' => [ 'px', '%' ],
888	'selectors' => [
889	'{{WRAPPER}} .aux-icon' => 'padding:{{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
890	]
891	]
892	);
893
894	$this->add_responsive_control(
895	'icon_normal_border_radius',
896	[
897	'label' => __( 'Border Radius', 'auxin-elements' ),
898	'type' => Controls_Manager::DIMENSIONS,
899	'size_units' => [ 'px', 'em', '%' ],
900	'allowed_dimensions' => 'all',
901	'separator' => 'before',
902	'selectors' => [
903	'{{WRAPPER}} .aux-icon' => 'border-radius:{{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};'
904	],
905	]
906	);
907
908	$this->end_controls_tab();
909
910	$this->start_controls_tab(
911	'icon_hover',
912	[
913	'label' => __( 'Hover' , 'auxin-elements' )
914	]
915	);
916
917	$this->add_responsive_control(
918	'icon_hover_size',
919	[
920	'label' => __( 'Size', 'auxin-elements' ),
921	'type' => Controls_Manager::SLIDER,
922	'size_units' => [ 'px', '%' ],
923	'range' => [
924	'px' => [
925	'min' => 10,
926	'max' => 512,
927	'step' => 2,
928	],
929	'%' => [
930	'min' => 0,
931	'max' => 100,
932	],
933	],
934	'selectors' => [
935	'{{WRAPPER}} .aux-modern-button:hover .aux-icon' => 'font-size: {{SIZE}}{{UNIT}};',
936	]
937	]
938	);
939
940	$this->add_control(
941	'icon_hover_color',
942	[
943	'label' => __( 'Color', 'auxin-elements' ),
944	'type' => Controls_Manager::COLOR,
945	'selectors' => [
946	'{{WRAPPER}} .aux-modern-button:hover .aux-icon' => 'color: {{VALUE}};',
947	]
948	]
949	);
950
951	$this->add_group_control(
952	Group_Control_Background::get_type(),
953	[
954	'name' => 'icon_hover_bg',
955	'label' => __( 'Background', 'auxin-elements' ),
956	'types' => [ 'classic', 'gradient' ],
957	'selector' => '{{WRAPPER}} .aux-icon:after',
958	]
959	);
960
961	$this->add_group_control(
962	Group_Control_Box_Shadow::get_type(),
963	[
964	'name' => 'icon_hover_box_shadow',
965	'selector' => '{{WRAPPER}} .aux-modern-button:hover .aux-icon'
966	]
967	);
968
969	$this->add_responsive_control(
970	'icon_hover_margin',
971	[
972	'label' => __( 'Margin', 'auxin-elements' ),
973	'type' => Controls_Manager::DIMENSIONS,
974	'size_units' => [ 'px', '%' ],
975	'selectors' => [
976	'{{WRAPPER}} .aux-modern-button:hover .aux-icon' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
977	]
978	]
979	);
980
981	$this->add_responsive_control(
982	'icon_hover_padding',
983	[
984	'label' => __( 'Padding', 'auxin-elements' ),
985	'type' => Controls_Manager::DIMENSIONS,
986	'size_units' => [ 'px', '%' ],
987	'selectors' => [
988	'{{WRAPPER}} .aux-modern-button:hover .aux-icon' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
989	]
990	]
991	);
992
993	$this->add_responsive_control(
994	'icon_hover_border_radius',
995	[
996	'label' => __( 'Border Radius', 'auxin-elements' ),
997	'type' => Controls_Manager::DIMENSIONS,
998	'size_units' => [ 'px', 'em', '%' ],
999	'allowed_dimensions' => 'all',
1000	'separator' => 'before',
1001	'selectors' => [
1002	'{{WRAPPER}} .aux-icon:hover' => 'border-radius:{{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};'
1003	],
1004	]
1005	);
1006
1007	$this->end_controls_tab();
1008
1009	$this->end_controls_tabs();
1010
1011	$this->end_controls_section();
1012	}
1013
1014	/**
1015	* Render image box widget output on the frontend.
1016	*
1017	* Written in PHP and used to generate the final HTML.
1018	*
1019	* @since 1.0.0
1020	* @access protected
1021	*/
1022	protected function render() {
1023
1024	$url = '';
1025	$settings = $this->get_settings_for_display();
1026
1027	$this->add_render_attribute( 'wrapper', 'class', 'aux-modern-button-wrapper' );
1028	$this->add_render_attribute( 'wrapper', 'class', 'aux-modern-button-align-' . $settings['btn_align'] );
1029
1030	$this->add_render_attribute( 'button', 'class', 'aux-modern-button' );
1031	$this->add_render_attribute( 'button', 'class', 'aux-' . $settings['btn_skin'] );
1032	$this->add_render_attribute( 'button', 'class', 'aux-modern-button-' . $settings['btn_size'] );
1033	$this->add_render_attribute( 'button', 'class', 'aux-modern-button-' . $settings['btn_shape'] );
1034	$this->add_render_attribute( 'button', 'class', 'aux-modern-button-' . $settings['btn_type'] );
1035	$this->add_render_attribute( 'button', 'class', 'aux-icon-' . $settings['icon_align'] );
1036
1037
1038	if ( ! empty( $settings['link']['url'] ) ) {
1039	$this->add_link_attributes( 'button', $settings['link'] );
1040	$url = $settings['link']['url'];
1041	}
1042
1043	?>
1044	<div <?php echo $this->get_render_attribute_string( 'wrapper' ); ?> >
1045	<?php
1046	if ( auxin_is_true( $settings['open_video_in_lightbox'] ) && strlen( $url ) > 3 ) { // disable lighbox if anchor is set
1047
1048	$this->add_render_attribute( 'button', 'class', 'aux-open-video' );
1049	$this->add_render_attribute( 'button', 'data-type', 'video' );
1050
1051	echo '<span class="aux-lightbox-video ">';
1052	}
1053	?>
1054	<a <?php echo $this->get_render_attribute_string( 'button' ); ?>>
1055	<div class="aux-overlay"></div>
1056	<?php if ( $settings['icon_display'] ) { ;?>
1057	<div class="aux-icon ">
1058	<?php Icons_Manager::render_icon( $settings['icon'], [ 'aria-hidden' => 'true' ] );?>
1059	</div>
1060	<?php };?>
1061	<div class="aux-text">
1062	<?php
1063	if( ! empty( $settings['label'] ) ){ printf( '<span class="aux-text-before">%s</span>', do_shortcode( $settings['label'] ) ); }
1064	if( ! empty( $settings['label2'] ) ){ printf( '<span class="aux-text-highlighted">%s</span>', do_shortcode( $settings['label2'] ) ); }
1065	if( ! empty( $settings['label3'] ) ){ printf( '<span class="aux-text-after">%s</span>', do_shortcode( $settings['label3'] ) ); }
1066	?>
1067	</div>
1068	</a>
1069	<?php
1070	if ( auxin_is_true( $settings['open_video_in_lightbox'] ) ) {
1071	echo '</span>';
1072	}
1073	?>
1074
1075	</div>
1076
1077	<?php
1078	}
1079
1080	}