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

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

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

modern-button.php

1079 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	'type' => Controls_Manager::SWITCHER,
222	'label_on' => __( 'On', 'auxin-elements' ),
223	'label_off' => __( 'Off', 'auxin-elements' ),
224	'return_value' => 'yes',
225	'default' => ''
226	)
227	);
228
229	$this->add_control(
230	'icon_display',
231	[
232	'label' => __( 'Display Icon', 'auxin-elements' ),
233	'type' => Controls_Manager::SWITCHER,
234	'label_on' => __( 'On', 'auxin-elements' ),
235	'label_off' => __( 'Off', 'auxin-elements' ),
236	'return_value' => 'yes',
237	'default' => 'no',
238	'separator' => 'before'
239	]
240	);
241
242	$this->add_control(
243	'icon',
244	[
245	'type' => Controls_Manager::ICONS,
246	'default' => [
247	'value' => 'auxicon-arrow-down',
248	'library' => 'auxicon'
249	],
250	'condition' => [
251	'icon_display' => 'yes'
252	],
253	]
254	);
255
256	$this->end_controls_section();
257
258	/-----------------------------------------------------------------------------------/
259	/* Button Style Section
260	/-----------------------------------------------------------------------------------/
261
262	$this->start_controls_section(
263	'section_style_btn',
264	[
265	'label' => __('Button', 'auxin-elements' ),
266	'tab' => Controls_Manager::TAB_STYLE,
267	]
268	);
269
270	$this->add_control(
271	'btn_type',
272	[
273	'label' => __('Type', 'auxin-elements'),
274	'type' => Controls_Manager::SELECT,
275	'default' => 'default',
276	'options' => [
277	'default' => __('Default', 'auxin-elements' ),
278	'outline' => __('Outline' , 'auxin-elements' ),
279	]
280	]
281	);
282
283	$this->add_control(
284	'btn_shape',
285	[
286	'label' => __('Shape', 'auxin-elements'),
287	'type' => Controls_Manager::SELECT,
288	'default' => 'normal',
289	'options' => [
290	'normal' => __('Normal', 'auxin-elements' ),
291	'round' => __('Round' , 'auxin-elements' ),
292	'curve' => __('Curve' , 'auxin-elements' ),
293	]
294	]
295	);
296
297	$this->add_control(
298	'btn_size',
299	[
300	'label' => __('Size', 'auxin-elements'),
301	'type' => Controls_Manager::SELECT,
302	'default' => 'md',
303	'options' => [
304	'xl' => __('Exlarge', 'auxin-elements' ),
305	'lg' => __('Large' , 'auxin-elements' ),
306	'md' => __('Medium' , 'auxin-elements' ),
307	'sm' => __('Small' , 'auxin-elements' ),
308	'xs' => __('Tiny' , 'auxin-elements' )
309	]
310	]
311	);
312
313	$this->add_control(
314	'btn_skin',
315	[
316	'label' => __('Skin', 'auxin-elements'),
317	'label_block' => false,
318	'type' => 'aux-visual-select',
319	'default' => 'black',
320	'options' =>[
321	'black' => [
322	'label' => __('black', 'auxin-elements'),
323	'css_class' => 'aux-color-selector aux-button aux-visual-selector-black'
324	],
325	'white' => [
326	'label' => __('White', 'auxin-elements'),
327	'css_class' => 'aux-color-selector aux-button aux-visual-selector-white'
328	],
329	'info' => [
330	'label' => __('Ball Blue', 'auxin-elements'),
331	'css_class' => 'aux-color-selector aux-button aux-visual-selector-ball-blue'
332	],
333	'warning' => [
334	'label' => __('Mikado Yellow', 'auxin-elements'),
335	'css_class' => 'aux-color-selector aux-button aux-visual-selector-mikado-yellow'
336	],
337	'caution' => [
338	'label' => __('Carmine Pink', 'auxin-elements'),
339	'css_class' => 'aux-color-selector aux-button aux-visual-selector-carmine-pink'
340	]
341	]
342	]
343	);
344
345	$this->start_controls_tabs( 'btn_styles' );
346
347	$this->start_controls_tab(
348	'btn_normal',
349	[
350	'label' => __( 'Normal' , 'auxin-elements' )
351	]
352	);
353
354	$this->add_group_control(
355	Group_Control_Background::get_type(),
356	[
357	'name' => 'btn_bg_normal',
358	'label' => __( 'Background', 'auxin-elements' ),
359	'types' => [ 'classic', 'gradient' ],
360	'selector' => '{{WRAPPER}} .aux-modern-button.aux-modern-button-outline .aux-overlay:before, {{WRAPPER}} .aux-modern-button .aux-overlay:before'
361	]
362	);
363
364	$this->add_group_control(
365	Group_Control_Box_Shadow::get_type(),
366	[
367	'name' => 'btn_box_shadow_normal',
368	'selector' => '{{WRAPPER}} .aux-overlay:before, {{WRAPPER}} .aux-overlay:after'
369	]
370	);
371
372	$this->add_responsive_control(
373	'btn_padding_normal',
374	[
375	'label' => __( 'Padding', 'auxin-elements' ),
376	'type' => Controls_Manager::DIMENSIONS,
377	'size_units' => [ 'px', '%' ],
378	'selectors' => [
379	'{{WRAPPER}} .aux-modern-button' => 'padding:{{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
380	]
381	]
382	);
383
384	$this->add_responsive_control(
385	'btn_border_radius_normal',
386	[
387	'label' => __( 'Border Radius', 'auxin-elements' ),
388	'type' => Controls_Manager::DIMENSIONS,
389	'size_units' => [ 'px', 'em', '%' ],
390	'allowed_dimensions' => 'all',
391	'separator' => 'before',
392	'selectors' => [
393	'{{WRAPPER}} .aux-overlay:before, {{WRAPPER}} .aux-overlay:after' => 'border-radius:{{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};'
394	]
395	]
396	);
397
398	$this->end_controls_tab();
399
400	$this->start_controls_tab(
401	'button_hover',
402	[
403	'label' => __( 'Hover' , 'auxin-elements' )
404	]
405	);
406
407	$this->add_group_control(
408	Group_Control_Background::get_type(),
409	[
410	'name' => 'btn_bg_hover',
411	'label' => __( 'Background', 'auxin-elements' ),
412	'types' => [ 'classic', 'gradient' ],
413	'selector' => '{{WRAPPER}} .aux-modern-button.aux-modern-button-outline .aux-overlay:after, {{WRAPPER}} .aux-modern-button .aux-overlay:after'
414	]
415	);
416
417	$this->add_group_control(
418	Group_Control_Box_Shadow::get_type(),
419	[
420	'name' => 'btn_box_shadow_hover',
421	'selector' => '{{WRAPPER}} .aux-modern-button:hover .aux-overlay:before, {{WRAPPER}} .aux-modern-button:hover .aux-overlay:after'
422	]
423	);
424
425	$this->add_responsive_control(
426	'btn_padding_hover',
427	[
428	'label' => __( 'Padding', 'auxin-elements' ),
429	'type' => Controls_Manager::DIMENSIONS,
430	'size_units' => [ 'px', '%' ],
431	'selectors' => [
432	'{{WRAPPER}} .aux-modern-button:hover' => 'padding:{{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
433	]
434	]
435	);
436
437	$this->add_responsive_control(
438	'btn_border_radius_hover',
439	[
440	'label' => __( 'Border Radius', 'auxin-elements' ),
441	'type' => Controls_Manager::DIMENSIONS,
442	'size_units' => [ 'px', 'em', '%' ],
443	'allowed_dimensions' => 'all',
444	'separator' => 'before',
445	'selectors' => [
446	'{{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}};'
447	]
448	]
449	);
450
451	$this->end_controls_tab();
452
453	$this->end_controls_tabs();
454
455	$this->end_controls_section();
456
457	/-----------------------------------------------------------------------------------/
458	/* Label Style Section
459	/-----------------------------------------------------------------------------------/
460
461	$this->start_controls_section(
462	'section_style_text',
463	[
464	'label' => __('Text', 'auxin-elements' ),
465	'tab' => Controls_Manager::TAB_STYLE
466	]
467	);
468
469
470	$this->start_controls_tabs( 'text_styles' );
471
472	$this->start_controls_tab(
473	'text_normal',
474	[
475	'label' => __( 'Normal' , 'auxin-elements' )
476	]
477	);
478
479	$this->add_group_control(
480	Group_Control_Typography::get_type(),
481	[
482	'name' => 'text_normal_typo',
483	'scheme' => Scheme_Typography::TYPOGRAPHY_1,
484	'selector' => '{{WRAPPER}} .aux-text'
485	]
486	);
487
488	$this->add_control(
489	'text_normal_color',
490	[
491	'label' => __( 'Color', 'auxin-elements' ),
492	'type' => Controls_Manager::COLOR,
493	'selectors' => [
494	'{{WRAPPER}} .aux-text' => 'color: {{VALUE}};'
495	]
496	]
497
498	);
499
500	$this->add_group_control(
501	Group_Control_Text_Shadow::get_type(),
502	[
503	'name' => 'text_normal_text_shadow',
504	'label' => __( 'Text Shadow', 'auxin-elements' ),
505	'selector' => '{{WRAPPER}} .aux-text'
506	]
507	);
508
509	$this->end_controls_tab();
510
511	$this->start_controls_tab(
512	'text_hover',
513	[
514	'label' => __( 'Hover' , 'auxin-elements' )
515	]
516	);
517
518	$this->add_group_control(
519	Group_Control_Typography::get_type(),
520	[
521	'name' => 'text_hover_typo',
522	'scheme' => Scheme_Typography::TYPOGRAPHY_1,
523	'selector' => '{{WRAPPER}} .aux-modern-button:hover .aux-text'
524	]
525	);
526
527	$this->add_control(
528	'text_hover_color',
529	[
530	'label' => __( 'Color', 'auxin-elements' ),
531	'type' => Controls_Manager::COLOR,
532	'selectors' => [
533	'{{WRAPPER}} .aux-modern-button:hover .aux-text' => 'color:{{VALUE}};'
534	]
535	]
536	);
537
538	$this->add_group_control(
539	Group_Control_Text_Shadow::get_type(),
540	[
541	'name' => 'text_hover_text_shadow',
542	'label' => __( 'Text Shadow', 'auxin-elements' ),
543	'selector' => '{{WRAPPER}} .aux-modern-button:hover .aux-text'
544	]
545	);
546
547	$this->end_controls_tab();
548
549	$this->end_controls_tabs();
550
551	$this->end_controls_section();
552
553
554	/-----------------------------------------------------------------------------------/
555	/* Label Highlighted Style Section
556	/-----------------------------------------------------------------------------------/
557
558	$this->start_controls_section(
559	'section_style_text2',
560	[
561	'label' => __('Highlighted Text', 'auxin-elements' ),
562	'tab' => Controls_Manager::TAB_STYLE,
563	'condition' => [
564	'label2!' => ''
565	]
566	]
567	);
568
569
570	$this->start_controls_tabs( 'text2_styles' );
571
572	$this->start_controls_tab(
573	'text2_normal',
574	[
575	'label' => __( 'Normal' , 'auxin-elements' )
576	]
577	);
578
579	$this->add_group_control(
580	Group_Control_Typography::get_type(),
581	[
582	'name' => 'text2_normal_typo',
583	'scheme' => Scheme_Typography::TYPOGRAPHY_1,
584	'selector' => '{{WRAPPER}} .aux-text-highlighted'
585	]
586	);
587
588	$this->add_control(
589	'text2_normal_color',
590	[
591	'label' => __( 'Color', 'auxin-elements' ),
592	'type' => Controls_Manager::COLOR,
593	'selectors' => [
594	'{{WRAPPER}} .aux-text-highlighted' => 'color: {{VALUE}};'
595	]
596	]
597
598	);
599
600	$this->add_group_control(
601	Group_Control_Text_Shadow::get_type(),
602	[
603	'name' => 'text2_normal_text_shadow',
604	'label' => __( 'Text Shadow', 'auxin-elements' ),
605	'selector' => '{{WRAPPER}} .aux-text-highlighted'
606	]
607	);
608
609	$this->end_controls_tab();
610
611	$this->start_controls_tab(
612	'text2_hover',
613	[
614	'label' => __( 'Hover' , 'auxin-elements' )
615	]
616	);
617
618	$this->add_group_control(
619	Group_Control_Typography::get_type(),
620	[
621	'name' => 'text2_hover_typo',
622	'scheme' => Scheme_Typography::TYPOGRAPHY_1,
623	'selector' => '{{WRAPPER}} .aux-modern-button:hover .aux-text-highlighted'
624	]
625	);
626
627	$this->add_control(
628	'text2_hover_color',
629	[
630	'label' => __( 'Color', 'auxin-elements' ),
631	'type' => Controls_Manager::COLOR,
632	'selectors' => [
633	'{{WRAPPER}} .aux-modern-button:hover .aux-text-highlighted' => 'color:{{VALUE}};'
634	]
635	]
636	);
637
638	$this->add_group_control(
639	Group_Control_Text_Shadow::get_type(),
640	[
641	'name' => 'text2_hover_text_shadow',
642	'label' => __( 'Text Shadow', 'auxin-elements' ),
643	'selector' => '{{WRAPPER}} .aux-modern-button:hover .aux-text-highlighted'
644	]
645	);
646
647	$this->end_controls_tab();
648
649	$this->end_controls_tabs();
650
651	$this->add_responsive_control(
652	'text2_margin',
653	[
654	'label' => __( 'Margin', 'auxin-elements' ),
655	'type' => Controls_Manager::DIMENSIONS,
656	'size_units' => [ 'px', 'em', '%' ],
657	'selectors' => [
658	'{{WRAPPER}} .aux-text-highlighted' => 'margin:{{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
659	],
660	'separator' => 'before'
661	]
662	);
663
664	$this->end_controls_section();
665
666	/-----------------------------------------------------------------------------------/
667	/* Label After Style Section
668	/-----------------------------------------------------------------------------------/
669
670	$this->start_controls_section(
671	'section_style_text3',
672	[
673	'label' => __('After Text', 'auxin-elements' ),
674	'tab' => Controls_Manager::TAB_STYLE,
675	'condition' => [
676	'label3!' => ''
677	]
678	]
679	);
680
681
682	$this->start_controls_tabs( 'text3_styles' );
683
684	$this->start_controls_tab(
685	'text3_normal',
686	[
687	'label' => __( 'Normal' , 'auxin-elements' )
688	]
689	);
690
691	$this->add_group_control(
692	Group_Control_Typography::get_type(),
693	[
694	'name' => 'text3_normal_typo',
695	'scheme' => Scheme_Typography::TYPOGRAPHY_1,
696	'selector' => '{{WRAPPER}} .aux-text-after'
697	]
698	);
699
700	$this->add_control(
701	'text3_normal_color',
702	[
703	'label' => __( 'Color', 'auxin-elements' ),
704	'type' => Controls_Manager::COLOR,
705	'selectors' => [
706	'{{WRAPPER}} .aux-text-after' => 'color: {{VALUE}};'
707	]
708	]
709
710	);
711
712	$this->add_group_control(
713	Group_Control_Text_Shadow::get_type(),
714	[
715	'name' => 'text3_normal_text_shadow',
716	'label' => __( 'Text Shadow', 'auxin-elements' ),
717	'selector' => '{{WRAPPER}} .aux-text-after'
718	]
719	);
720
721	$this->end_controls_tab();
722
723	$this->start_controls_tab(
724	'text3_hover',
725	[
726	'label' => __( 'Hover' , 'auxin-elements' )
727	]
728	);
729
730	$this->add_group_control(
731	Group_Control_Typography::get_type(),
732	[
733	'name' => 'text3_hover_typo',
734	'scheme' => Scheme_Typography::TYPOGRAPHY_1,
735	'selector' => '{{WRAPPER}} .aux-modern-button:hover .aux-text-after'
736	]
737	);
738
739	$this->add_control(
740	'text3_hover_color',
741	[
742	'label' => __( 'Color', 'auxin-elements' ),
743	'type' => Controls_Manager::COLOR,
744	'selectors' => [
745	'{{WRAPPER}} .aux-modern-button:hover .aux-text-after' => 'color:{{VALUE}};'
746	]
747	]
748	);
749
750	$this->add_group_control(
751	Group_Control_Text_Shadow::get_type(),
752	[
753	'name' => 'text3_hover_text_shadow',
754	'label' => __( 'Text Shadow', 'auxin-elements' ),
755	'selector' => '{{WRAPPER}} .aux-modern-button:hover .aux-text-after'
756	]
757	);
758
759	$this->end_controls_tab();
760
761	$this->end_controls_tabs();
762
763	$this->add_responsive_control(
764	'text3_margin',
765	[
766	'label' => __( 'Margin', 'auxin-elements' ),
767	'type' => Controls_Manager::DIMENSIONS,
768	'size_units' => [ 'px', 'em', '%' ],
769	'selectors' => [
770	'{{WRAPPER}} .aux-text-after' => 'margin:{{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
771	],
772	'separator' => 'before'
773	]
774	);
775
776	$this->end_controls_section();
777
778	/-----------------------------------------------------------------------------------/
779	/* Button Style Section
780	/-----------------------------------------------------------------------------------/
781
782	$this->start_controls_section(
783	'section_style_icon',
784	[
785	'label' => __('Icon', 'auxin-elements' ),
786	'tab' => Controls_Manager::TAB_STYLE,
787	'condition' => [
788	'icon_display' => 'yes'
789	]
790	]
791	);
792
793	$this->add_control(
794	'icon_align',
795	[
796	'label' => __('Alignment', 'auxin-elements'),
797	'type' => Controls_Manager::SELECT,
798	'default' => 'left',
799	'options' => [
800	'top' => __('Over', 'auxin-elements' ),
801	'bottom' => __('Below', 'auxin-elements' ),
802	'left' => __('Left', 'auxin-elements' ),
803	'right' => __('Right', 'auxin-elements' ),
804	]
805	]
806	);
807
808	$this->start_controls_tabs( 'icon_styles' );
809
810	$this->start_controls_tab(
811	'icon_normal',
812	[
813	'label' => __( 'Normal' , 'auxin-elements' )
814	]
815	);
816
817	$this->add_responsive_control(
818	'icon_normal_size',
819	[
820	'label' => __( 'Size', 'auxin-elements' ),
821	'type' => Controls_Manager::SLIDER,
822	'size_units' => [ 'px', '%' ],
823	'range' => [
824	'px' => [
825	'min' => 10,
826	'max' => 512,
827	'step' => 2,
828	],
829	'%' => [
830	'min' => 0,
831	'max' => 100,
832	],
833	],
834	'selectors' => [
835	'{{WRAPPER}} .aux-icon' => 'font-size: {{SIZE}}{{UNIT}};',
836	]
837	]
838	);
839
840	$this->add_control(
841	'icon_normal_color',
842	[
843	'label' => __( 'Color', 'auxin-elements' ),
844	'type' => Controls_Manager::COLOR,
845	'selectors' => [
846	'{{WRAPPER}} .aux-icon' => 'color: {{VALUE}};',
847	]
848	]
849	);
850
851	$this->add_group_control(
852	Group_Control_Background::get_type(),
853	[
854	'name' => 'icon_normal_bg',
855	'label' => __( 'Background', 'auxin-elements' ),
856	'types' => [ 'classic', 'gradient' ],
857	'selector' => '{{WRAPPER}} .aux-icon:before',
858	]
859	);
860
861	$this->add_group_control(
862	Group_Control_Box_Shadow::get_type(),
863	[
864	'name' => 'icon_normal_box_shadow',
865	'selector' => '{{WRAPPER}} .aux-icon'
866	]
867	);
868
869	$this->add_responsive_control(
870	'icon_normal_margin',
871	[
872	'label' => __( 'Margin', 'auxin-elements' ),
873	'type' => Controls_Manager::DIMENSIONS,
874	'size_units' => [ 'px', '%' ],
875	'selectors' => [
876	'{{WRAPPER}} .aux-icon' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
877	]
878	]
879	);
880
881	$this->add_responsive_control(
882	'icon_normal_padding',
883	[
884	'label' => __( 'Padding', 'auxin-elements' ),
885	'type' => Controls_Manager::DIMENSIONS,
886	'size_units' => [ 'px', '%' ],
887	'selectors' => [
888	'{{WRAPPER}} .aux-icon' => 'padding:{{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
889	]
890	]
891	);
892
893	$this->add_responsive_control(
894	'icon_normal_border_radius',
895	[
896	'label' => __( 'Border Radius', 'auxin-elements' ),
897	'type' => Controls_Manager::DIMENSIONS,
898	'size_units' => [ 'px', 'em', '%' ],
899	'allowed_dimensions' => 'all',
900	'separator' => 'before',
901	'selectors' => [
902	'{{WRAPPER}} .aux-icon' => 'border-radius:{{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};'
903	],
904	]
905	);
906
907	$this->end_controls_tab();
908
909	$this->start_controls_tab(
910	'icon_hover',
911	[
912	'label' => __( 'Hover' , 'auxin-elements' )
913	]
914	);
915
916	$this->add_responsive_control(
917	'icon_hover_size',
918	[
919	'label' => __( 'Size', 'auxin-elements' ),
920	'type' => Controls_Manager::SLIDER,
921	'size_units' => [ 'px', '%' ],
922	'range' => [
923	'px' => [
924	'min' => 10,
925	'max' => 512,
926	'step' => 2,
927	],
928	'%' => [
929	'min' => 0,
930	'max' => 100,
931	],
932	],
933	'selectors' => [
934	'{{WRAPPER}} .aux-modern-button:hover .aux-icon' => 'font-size: {{SIZE}}{{UNIT}};',
935	]
936	]
937	);
938
939	$this->add_control(
940	'icon_hover_color',
941	[
942	'label' => __( 'Color', 'auxin-elements' ),
943	'type' => Controls_Manager::COLOR,
944	'selectors' => [
945	'{{WRAPPER}} .aux-modern-button:hover .aux-icon' => 'color: {{VALUE}};',
946	]
947	]
948	);
949
950	$this->add_group_control(
951	Group_Control_Background::get_type(),
952	[
953	'name' => 'icon_hover_bg',
954	'label' => __( 'Background', 'auxin-elements' ),
955	'types' => [ 'classic', 'gradient' ],
956	'selector' => '{{WRAPPER}} .aux-icon:after',
957	]
958	);
959
960	$this->add_group_control(
961	Group_Control_Box_Shadow::get_type(),
962	[
963	'name' => 'icon_hover_box_shadow',
964	'selector' => '{{WRAPPER}} .aux-modern-button:hover .aux-icon'
965	]
966	);
967
968	$this->add_responsive_control(
969	'icon_hover_margin',
970	[
971	'label' => __( 'Margin', 'auxin-elements' ),
972	'type' => Controls_Manager::DIMENSIONS,
973	'size_units' => [ 'px', '%' ],
974	'selectors' => [
975	'{{WRAPPER}} .aux-modern-button:hover .aux-icon' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
976	]
977	]
978	);
979
980	$this->add_responsive_control(
981	'icon_hover_padding',
982	[
983	'label' => __( 'Padding', 'auxin-elements' ),
984	'type' => Controls_Manager::DIMENSIONS,
985	'size_units' => [ 'px', '%' ],
986	'selectors' => [
987	'{{WRAPPER}} .aux-modern-button:hover .aux-icon' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
988	]
989	]
990	);
991
992	$this->add_responsive_control(
993	'icon_hover_border_radius',
994	[
995	'label' => __( 'Border Radius', 'auxin-elements' ),
996	'type' => Controls_Manager::DIMENSIONS,
997	'size_units' => [ 'px', 'em', '%' ],
998	'allowed_dimensions' => 'all',
999	'separator' => 'before',
1000	'selectors' => [
1001	'{{WRAPPER}} .aux-icon:hover' => 'border-radius:{{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};'
1002	],
1003	]
1004	);
1005
1006	$this->end_controls_tab();
1007
1008	$this->end_controls_tabs();
1009
1010	$this->end_controls_section();
1011	}
1012
1013	/**
1014	* Render image box widget output on the frontend.
1015	*
1016	* Written in PHP and used to generate the final HTML.
1017	*
1018	* @since 1.0.0
1019	* @access protected
1020	*/
1021	protected function render() {
1022
1023	$url = '';
1024	$settings = $this->get_settings_for_display();
1025
1026	$this->add_render_attribute( 'wrapper', 'class', 'aux-modern-button-wrapper' );
1027	$this->add_render_attribute( 'wrapper', 'class', 'aux-modern-button-align-' . $settings['btn_align'] );
1028
1029	$this->add_render_attribute( 'button', 'class', 'aux-modern-button' );
1030	$this->add_render_attribute( 'button', 'class', 'aux-' . $settings['btn_skin'] );
1031	$this->add_render_attribute( 'button', 'class', 'aux-modern-button-' . $settings['btn_size'] );
1032	$this->add_render_attribute( 'button', 'class', 'aux-modern-button-' . $settings['btn_shape'] );
1033	$this->add_render_attribute( 'button', 'class', 'aux-modern-button-' . $settings['btn_type'] );
1034	$this->add_render_attribute( 'button', 'class', 'aux-icon-' . $settings['icon_align'] );
1035
1036
1037	if ( ! empty( $settings['link']['url'] ) ) {
1038	$this->add_link_attributes( 'button', $settings['link'] );
1039	$url = $settings['link']['url'];
1040	}
1041
1042	?>
1043	<div <?php echo $this->get_render_attribute_string( 'wrapper' ); ?> >
1044	<?php
1045	if ( auxin_is_true( $settings['open_video_in_lightbox'] ) && strlen( $url ) > 3 ) { // disable lighbox if anchor is set
1046
1047	$this->add_render_attribute( 'button', 'class', 'aux-open-video' );
1048	$this->add_render_attribute( 'button', 'data-type', 'video' );
1049
1050	echo '<span class="aux-lightbox-video ">';
1051	}
1052	?>
1053	<a <?php echo $this->get_render_attribute_string( 'button' ); ?>>
1054	<div class="aux-overlay"></div>
1055	<?php if ( $settings['icon_display'] ) { ;?>
1056	<div class="aux-icon ">
1057	<?php Icons_Manager::render_icon( $settings['icon'], [ 'aria-hidden' => 'true' ] );?>
1058	</div>
1059	<?php };?>
1060	<div class="aux-text">
1061	<?php
1062	if( ! empty( $settings['label'] ) ){ printf( '<span class="aux-text-before">%s</span>', do_shortcode( $settings['label'] ) ); }
1063	if( ! empty( $settings['label2'] ) ){ printf( '<span class="aux-text-highlighted">%s</span>', do_shortcode( $settings['label2'] ) ); }
1064	if( ! empty( $settings['label3'] ) ){ printf( '<span class="aux-text-after">%s</span>', do_shortcode( $settings['label3'] ) ); }
1065	?>
1066	</div>
1067	</a>
1068	<?php
1069	if ( auxin_is_true( $settings['open_video_in_lightbox'] ) ) {
1070	echo '</span>';
1071	}
1072	?>
1073
1074	</div>
1075
1076	<?php
1077	}
1078
1079	}