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

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

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

modern-button.php

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