PluginProbe
UiCore Elements – Free widgets and templates for Elementor / 1.3.17
UiCore Elements – Free widgets and templates for Elementor v1.3.17
1.3.17 1.3.16 trunk 1.0.0 1.0.1 1.0.10 1.0.11 1.0.12 1.0.13 1.0.14 1.0.15 1.0.16 1.0.2 1.0.3 1.0.4 1.0.5 1.0.6 1.0.7 1.0.8 1.0.9 1.2.0 1.2.1 1.2.2 1.2.3 1.2.4 All 41 releases
← All changes | includes/widgets/icon-box.php +2081 -1924 1.0.41.3.17 View file →
@@ -1,5 +1,6 @@
1 1 <?php
2 +
2 3 namespace UiCoreElements;
3 4
4 5 use Elementor\Controls_Manager;
5 6 use Elementor\Group_Control_Border;
@@ -15,9 +16,9 @@
15 16
16 17 /**
17 18 * Icon Box
18 19 *
19 - * @author Lucas Marini Falbo <lucas95@uicore.co>
20 + * @author Lucas Marini Falbo <lucas@uicore.co>
20 21 * @since 1.0.0
21 22 */
22 23
23 24 class IconBox extends UiCoreWidget
@@ -22,1700 +23,1871 @@
22 23
23 24 class IconBox extends UiCoreWidget
24 25 {
25 26
26 - public function get_name()
27 - {
28 - return 'uicore-icon-box';
29 - }
30 - public function get_title()
31 - {
32 - return __('Icon Box', 'uicore-elements');
33 - }
34 - public function get_icon()
35 - {
36 - return 'eicon-icon-box ui-e-widget';
37 - }
38 - public function get_categories()
39 - {
40 - return ['uicore'];
41 - }
42 - public function get_keywords()
43 - {
44 - return ['icon', 'features', 'info', 'box'];
45 - }
46 - public function get_styles()
47 - {
48 - return ['icon-box'];
49 - }
50 - public function get_scripts()
51 - {
52 - return [
27 + public function get_name()
28 + {
29 + return 'uicore-icon-box';
30 + }
31 + public function get_title()
32 + {
33 + return __('Icon Box', 'uicore-elements');
34 + }
35 + public function get_icon()
36 + {
37 + return 'eicon-icon-box ui-e-widget';
38 + }
39 + public function get_categories()
40 + {
41 + return ['uicore'];
42 + }
43 + public function get_keywords()
44 + {
45 + return ['icon', 'features', 'info', 'box'];
46 + }
47 + public function get_styles()
48 + {
49 + return ['icon-box'];
50 + }
51 + public function get_scripts()
52 + {
53 + return [
53 54 'icon-box' => [
54 55 'conditions' => [
55 - 'relation' => 'or',
56 - 'terms' => [
57 - [
58 - 'name' => 'description_animation',
59 - 'operator' => '==',
60 - 'value' => 'ui-e-animation-description-show',
61 - ],
62 - [
63 - 'name' => 'readmore_animation',
64 - 'operator' => '==',
65 - 'value' => 'ui-e-animation-rm-show',
66 - ],
67 - ],
68 - ],
56 + 'relation' => 'or',
57 + 'terms' => [
58 + [
59 + 'name' => 'description_animation',
60 + 'operator' => '==',
61 + 'value' => 'ui-e-animation-description-show',
62 + ],
63 + [
64 + 'name' => 'readmore_animation',
65 + 'operator' => '==',
66 + 'value' => 'ui-e-animation-rm-show',
67 + ],
68 + ],
69 + ],
69 70 ]
70 71 ];
71 72 }
72 - protected function register_controls()
73 - {
73 + public function has_widget_inner_wrapper(): bool
74 + {
75 + // TODO: remove after Optmized Markup experiment is merged to the core
76 + return ! \Elementor\Plugin::$instance->experiments->is_feature_active('e_optimized_markup');
77 + }
78 + protected function register_controls()
79 + {
74 80
75 - $this->start_controls_section(
76 - 'section_content_icon_box',
77 - [
78 - 'label' => esc_html__('Icon Box', 'uicore-elements'),
79 - ]
80 - );
81 + $this->start_controls_section(
82 + 'section_content_icon_box',
83 + [
84 + 'label' => esc_html__('Icon Box', 'uicore-elements'),
85 + ]
86 + );
81 87
82 - $this->add_control(
83 - 'icon_type',
84 - [
85 - 'label' => esc_html__('Icon Type', 'uicore-elements'),
86 - 'type' => Controls_Manager::CHOOSE,
87 - 'toggle' => false,
88 - 'default' => 'icon',
89 - 'render_type' => 'template',
90 - 'options' => [
91 - 'none' => [
92 - 'title' => esc_html__('None', 'uicore-elements'),
93 - 'icon' => 'eicon-editor-close'
94 - ],
95 - 'icon' => [
96 - 'title' => esc_html__('Icon', 'uicore-elements'),
97 - 'icon' => 'fas fa-star'
98 - ],
99 - 'image' => [
100 - 'title' => esc_html__('Image', 'uicore-elements'),
101 - 'icon' => 'far fa-image'
102 - ]
103 - ]
104 - ]
105 - );
88 + $this->add_control(
89 + 'icon_type',
90 + [
91 + 'label' => esc_html__('Icon Type', 'uicore-elements'),
92 + 'type' => Controls_Manager::CHOOSE,
93 + 'toggle' => false,
94 + 'default' => 'icon',
95 + 'render_type' => 'template',
96 + 'options' => [
97 + 'none' => [
98 + 'title' => esc_html__('None', 'uicore-elements'),
99 + 'icon' => 'eicon-editor-close'
100 + ],
101 + 'icon' => [
102 + 'title' => esc_html__('Icon', 'uicore-elements'),
103 + 'icon' => 'fas fa-star'
104 + ],
105 + 'image' => [
106 + 'title' => esc_html__('Image', 'uicore-elements'),
107 + 'icon' => 'far fa-image'
108 + ]
109 + ]
110 + ]
111 + );
106 112
107 - $this->add_control(
108 - 'selected_icon',
109 - [
110 - 'label' => esc_html__('Icon', 'uicore-elements'),
111 - 'type' => Controls_Manager::ICONS,
112 - 'default' => [
113 - 'value' => 'fas fa-star',
114 - 'library' => 'fa-solid',
115 - ],
116 - 'render_type' => 'template',
117 - 'condition' => [
118 - 'icon_type' => 'icon',
119 - ],
120 - //'label_block' => false,
121 - //'skin' => 'media'
122 - ]
123 - );
113 + $this->add_control(
114 + 'selected_icon',
115 + [
116 + 'label' => esc_html__('Icon', 'uicore-elements'),
117 + 'type' => Controls_Manager::ICONS,
118 + 'default' => [
119 + 'value' => 'fas fa-star',
120 + 'library' => 'fa-solid',
121 + ],
122 + 'render_type' => 'template',
123 + 'condition' => [
124 + 'icon_type' => 'icon',
125 + ],
126 + ]
127 + );
124 128
125 - $this->add_control(
126 - 'image',
127 - [
128 - 'label' => esc_html__('Image Icon', 'uicore-elements'),
129 - 'type' => Controls_Manager::MEDIA,
130 - 'render_type' => 'template',
131 - 'default' => [
132 - 'url' => Utils::get_placeholder_image_src(),
133 - ],
134 - 'condition' => [
135 - 'icon_type' => 'image'
136 - ]
137 - ]
138 - );
129 + $this->add_control(
130 + 'image',
131 + [
132 + 'label' => esc_html__('Image Icon', 'uicore-elements'),
133 + 'type' => Controls_Manager::MEDIA,
134 + 'render_type' => 'template',
135 + 'default' => [
136 + 'url' => Utils::get_placeholder_image_src(),
137 + ],
138 + 'condition' => [
139 + 'icon_type' => 'image'
140 + ]
141 + ]
142 + );
139 143
140 - $this->add_control(
141 - 'title_text',
142 - [
143 - 'label' => esc_html__('Title', 'uicore-elements'),
144 - 'type' => Controls_Manager::TEXT,
145 - 'dynamic' => [
146 - 'active' => true,
147 - ],
148 - 'default' => esc_html__('Icon Box Title', 'uicore-elements'),
149 - 'placeholder' => esc_html__('Enter your title', 'uicore-elements'),
150 - 'label_block' => true,
151 - ]
152 - );
144 + $this->add_control(
145 + 'title_text',
146 + [
147 + 'label' => esc_html__('Title', 'uicore-elements'),
148 + 'type' => Controls_Manager::TEXT,
149 + 'dynamic' => [
150 + 'active' => true,
151 + ],
152 + 'default' => esc_html__('Icon Box Title', 'uicore-elements'),
153 + 'placeholder' => esc_html__('Enter your title', 'uicore-elements'),
154 + 'label_block' => true,
155 + ]
156 + );
153 157
154 - $this->add_control(
155 - 'title_link_url',
156 - [
157 - 'label' => esc_html__('Title Link URL', 'uicore-elements'),
158 - 'type' => Controls_Manager::URL,
159 - 'dynamic' => ['active' => true],
160 - ]
161 - );
158 + $this->add_control(
159 + 'title_link_url',
160 + [
161 + 'label' => esc_html__('Title Link URL', 'uicore-elements'),
162 + 'type' => Controls_Manager::URL,
163 + 'dynamic' => ['active' => true],
164 + ]
165 + );
162 166
163 - $this->add_control(
164 - 'sub_title_text',
165 - [
166 - 'label' => esc_html__('Subtitle', 'uicore-elements'),
167 - 'type' => Controls_Manager::TEXT,
168 - 'dynamic' => [
169 - 'active' => true,
170 - ],
171 - 'default' => esc_html__('Icon Box Subtitle', 'uicore-elements'),
172 - 'placeholder' => esc_html__('Enter your sub title', 'uicore-elements'),
173 - 'label_block' => true,
174 - ]
175 - );
167 + $this->add_control(
168 + 'sub_title_text',
169 + [
170 + 'label' => esc_html__('Subtitle', 'uicore-elements'),
171 + 'type' => Controls_Manager::TEXT,
172 + 'dynamic' => [
173 + 'active' => true,
174 + ],
175 + 'default' => esc_html__('Icon Box Subtitle', 'uicore-elements'),
176 + 'placeholder' => esc_html__('Enter your sub title', 'uicore-elements'),
177 + 'label_block' => true,
178 + ]
179 + );
176 180
177 - $this->add_control(
178 - 'description_text',
179 - [
180 - 'label' => esc_html__('Description', 'uicore-elements'),
181 - 'type' => Controls_Manager::WYSIWYG,
182 - 'dynamic' => [
183 - 'active' => true,
184 - ],
185 - 'default' => esc_html__("This serves as the explanatory text for the icon box. Use it to provide additional context or details that elaborate on the title's content.", "uicore-elements"),
186 - 'placeholder' => esc_html__('Enter your description', 'uicore-elements'),
187 - 'rows' => 10,
188 - ]
189 - );
181 + $this->add_control(
182 + 'description_text',
183 + [
184 + 'label' => esc_html__('Description', 'uicore-elements'),
185 + 'type' => Controls_Manager::WYSIWYG,
186 + 'dynamic' => [
187 + 'active' => true,
188 + ],
189 + 'default' => esc_html__("This serves as the explanatory text for the icon box. Use it to provide additional context or details that elaborate on the title's content.", "uicore-elements"),
190 + 'placeholder' => esc_html__('Enter your description', 'uicore-elements'),
191 + 'rows' => 10,
192 + ]
193 + );
190 194
191 - $this->add_control(
192 - 'position',
193 - [
194 - 'label' => esc_html__('Icon Position', 'uicore-elements'),
195 - 'type' => Controls_Manager::CHOOSE,
196 - 'separator' => 'before',
197 - 'default' => 'top',
198 - 'options' => [
199 - 'left' => [
200 - 'title' => esc_html__('Left', 'uicore-elements'),
201 - 'icon' => 'eicon-h-align-left',
202 - ],
203 - 'top' => [
204 - 'title' => esc_html__('Top', 'uicore-elements'),
205 - 'icon' => 'eicon-v-align-top',
206 - ],
207 - 'right' => [
208 - 'title' => esc_html__('Right', 'uicore-elements'),
209 - 'icon' => 'eicon-h-align-right',
210 - ],
211 - 'bottom' => [
212 - 'title' => esc_html__('Bottom', 'uicore-elements'),
213 - 'icon' => 'eicon-v-align-bottom',
214 - ],
215 - ],
216 - 'frontend_available' => true,
217 - 'prefix_class' => 'ui-e-',
218 - 'toggle' => false,
219 - 'render_type' => 'template',
220 - 'conditions' => [
221 - 'relation' => 'or',
222 - 'terms' => [
223 - [
224 - 'name' => 'selected_icon[value]',
225 - 'operator' => '!=',
226 - 'value' => ''
227 - ],
228 - [
229 - 'name' => 'image[url]',
230 - 'operator' => '!=',
231 - 'value' => ''
232 - ],
233 - ]
234 - ]
235 - ]
236 - );
195 + $this->add_control(
196 + 'position',
197 + [
198 + 'label' => esc_html__('Icon Position', 'uicore-elements'),
199 + 'type' => Controls_Manager::CHOOSE,
200 + 'separator' => 'before',
201 + 'default' => 'top',
202 + 'options' => [
203 + 'left' => [
204 + 'title' => esc_html__('Left', 'uicore-elements'),
205 + 'icon' => 'eicon-h-align-left',
206 + ],
207 + 'top' => [
208 + 'title' => esc_html__('Top', 'uicore-elements'),
209 + 'icon' => 'eicon-v-align-top',
210 + ],
211 + 'right' => [
212 + 'title' => esc_html__('Right', 'uicore-elements'),
213 + 'icon' => 'eicon-h-align-right',
214 + ],
215 + 'bottom' => [
216 + 'title' => esc_html__('Bottom', 'uicore-elements'),
217 + 'icon' => 'eicon-v-align-bottom',
218 + ],
219 + ],
220 + 'frontend_available' => true,
221 + 'prefix_class' => 'ui-e-',
222 + 'toggle' => false,
223 + 'render_type' => 'template',
224 + 'conditions' => [
225 + 'relation' => 'or',
226 + 'terms' => [
227 + [
228 + 'name' => 'selected_icon[value]',
229 + 'operator' => '!=',
230 + 'value' => ''
231 + ],
232 + [
233 + 'name' => 'image[url]',
234 + 'operator' => '!=',
235 + 'value' => ''
236 + ],
237 + ]
238 + ]
239 + ]
240 + );
237 241
238 - $this->add_control(
239 - 'icon_inline',
240 - [
241 - 'label' => esc_html__('Icon Inline', 'uicore-elements'),
242 - 'type' => Controls_Manager::SWITCHER,
243 - 'prefix_class' => 'ui-e-inline-',
244 - 'render_type' => 'template',
245 - 'frontend_available' => true,
246 - 'condition' => [
247 - 'position' => ['left', 'right']
248 - ],
249 - ]
250 - );
242 + $this->add_control(
243 + 'icon_inline',
244 + [
245 + 'label' => esc_html__('Icon Inline', 'uicore-elements'),
246 + 'type' => Controls_Manager::SWITCHER,
247 + 'prefix_class' => 'ui-e-inline-',
248 + 'render_type' => 'template',
249 + 'frontend_available' => true,
250 + 'condition' => [
251 + 'position' => ['left', 'right']
252 + ],
253 + ]
254 + );
251 255
252 - $this->add_responsive_control(
253 - 'icon_vertical_alignment',
254 - [
255 - 'label' => esc_html__('Icon Vertical Alignment', 'uicore-elements'),
256 - 'type' => Controls_Manager::CHOOSE,
257 - 'options' => [
258 - 'start' => [
259 - 'title' => esc_html__('Top', 'uicore-elements'),
260 - 'icon' => 'eicon-v-align-top',
261 - ],
262 - 'center' => [
263 - 'title' => esc_html__('Middle', 'uicore-elements'),
264 - 'icon' => 'eicon-v-align-middle',
265 - ],
266 - 'end' => [
267 - 'title' => esc_html__('Bottom', 'uicore-elements'),
268 - 'icon' => 'eicon-v-align-bottom',
269 - ],
270 - ],
271 - 'default' => 'start',
272 - 'toggle' => false,
273 - 'selectors' => [
274 - '{{WRAPPER}} .ui-e-flex-wrp' => 'align-items: {{VALUE}};',
275 - ],
276 - 'condition' => [
277 - 'position' => ['left', 'right'],
278 - 'icon_inline' => '',
279 - ],
280 - ]
281 - );
256 + $this->add_control(
257 + 'icon_mobile',
258 + [
259 + 'label' => esc_html__('Icon Top on Mobile', 'uicore-elements'),
260 + 'type' => Controls_Manager::SWITCHER,
261 + 'prefix_class' => 'ui-e-mobile-',
262 + 'condition' => [
263 + 'position' => ['left', 'right'],
264 + 'icon_inline' => ''
265 + ],
266 + ]
267 + );
282 268
283 - $this->add_responsive_control(
284 - 'text_align',
285 - [
286 - 'label' => esc_html__('Alignment', 'uicore-elements'),
287 - 'type' => Controls_Manager::CHOOSE,
288 - 'options' => [
289 - 'left' => [
290 - 'title' => esc_html__('Left', 'uicore-elements'),
291 - 'icon' => 'eicon-text-align-left',
292 - ],
293 - 'center' => [
294 - 'title' => esc_html__('Center', 'uicore-elements'),
295 - 'icon' => 'eicon-text-align-center',
296 - ],
297 - 'right' => [
298 - 'title' => esc_html__('Right', 'uicore-elements'),
299 - 'icon' => 'eicon-text-align-right',
300 - ],
301 - 'justify' => [
302 - 'title' => esc_html__('Justified', 'uicore-elements'),
303 - 'icon' => 'eicon-text-align-justify',
304 - ],
305 - ],
306 - 'default' => 'center',
307 - 'tablet_default' => 'center',
308 - 'mobile_default' => 'center',
309 - 'toggle' => false,
310 - 'prefix_class' => 'ui-e-align%s-',
311 - 'selectors' => [
312 - '{{WRAPPER}}' => '--ui-e-ico-box-text-align: {{VALUE}};',
313 - ],
314 - ]
315 - );
269 + $this->add_responsive_control(
270 + 'icon_vertical_alignment',
271 + [
272 + 'label' => esc_html__('Icon Vertical Alignment', 'uicore-elements'),
273 + 'type' => Controls_Manager::CHOOSE,
274 + 'options' => [
275 + 'start' => [
276 + 'title' => esc_html__('Top', 'uicore-elements'),
277 + 'icon' => 'eicon-v-align-top',
278 + ],
279 + 'center' => [
280 + 'title' => esc_html__('Middle', 'uicore-elements'),
281 + 'icon' => 'eicon-v-align-middle',
282 + ],
283 + 'end' => [
284 + 'title' => esc_html__('Bottom', 'uicore-elements'),
285 + 'icon' => 'eicon-v-align-bottom',
286 + ],
287 + ],
288 + 'default' => 'start',
289 + 'toggle' => false,
290 + 'selectors' => [
291 + '{{WRAPPER}} .ui-e-flex-wrp' => 'align-items: {{VALUE}};',
292 + ],
293 + 'condition' => [
294 + 'position' => ['left', 'right'],
295 + 'icon_inline' => '',
296 + ],
297 + ]
298 + );
316 299
317 - // Responsible for using 'text_align' value as css property instead of css value on the readmore, if animated and left/right positioned without inline.
318 - // In this case, the readmore with show animation is absolute with margin:auto, text-align stops working.
319 - $this->add_control(
320 - 'text_align_readmore',
321 - [
322 - 'label' => esc_html__( 'Readmore Animation Alignment', 'uicore-elements' ),
323 - 'type' => \Elementor\Controls_Manager::HIDDEN,
324 - 'default' => '0',
325 - 'condition' => [
326 - 'text_align' => ['left', 'right'],
327 - 'icon_inline' => '',
328 - 'readmore_animation' => 'ui-e-animation-rm-show',
329 - ],
330 - 'selectors' => [
331 - '{{WRAPPER}} .ui-e-readmore' => 'margin-{{text_align.VALUE}}: {{VALUE}} !important;',
332 - ],
333 - ]
334 - );
300 + $this->add_responsive_control(
301 + 'text_align',
302 + [
303 + 'label' => esc_html__('Alignment', 'uicore-elements'),
304 + 'type' => Controls_Manager::CHOOSE,
305 + 'options' => [
306 + 'left' => [
307 + 'title' => esc_html__('Left', 'uicore-elements'),
308 + 'icon' => 'eicon-text-align-left',
309 + ],
310 + 'center' => [
311 + 'title' => esc_html__('Center', 'uicore-elements'),
312 + 'icon' => 'eicon-text-align-center',
313 + ],
314 + 'right' => [
315 + 'title' => esc_html__('Right', 'uicore-elements'),
316 + 'icon' => 'eicon-text-align-right',
317 + ],
318 + 'justify' => [
319 + 'title' => esc_html__('Justified', 'uicore-elements'),
320 + 'icon' => 'eicon-text-align-justify',
321 + ],
322 + ],
323 + 'default' => 'center',
324 + 'tablet_default' => 'center',
325 + 'mobile_default' => 'center',
326 + 'toggle' => false,
327 + 'prefix_class' => 'ui-e-align%s-',
328 + 'selectors' => [
329 + '{{WRAPPER}}' => '--ui-e-ico-box-text-align: {{VALUE}};',
330 + ],
331 + ]
332 + );
335 333
336 - $this->end_controls_section();
334 + // Responsible for using 'text_align' value as css property instead of css value on the readmore, if animated and left/right positioned without inline.
335 + // In this case, the readmore with show animation is absolute with margin:auto, text-align stops working.
336 + $this->add_control(
337 + 'text_align_readmore',
338 + [
339 + 'label' => esc_html__('Readmore Animation Alignment', 'uicore-elements'),
340 + 'type' => \Elementor\Controls_Manager::HIDDEN,
341 + 'default' => '0',
342 + 'condition' => [
343 + 'text_align' => ['left', 'right'],
344 + 'icon_inline' => '',
345 + 'readmore_animation' => 'ui-e-animation-rm-show',
346 + ],
347 + 'selectors' => [
348 + '{{WRAPPER}} .ui-e-readmore' => 'margin-{{text_align.VALUE}}: {{VALUE}} !important;',
349 + ],
350 + ]
351 + );
337 352
338 - $this->start_controls_section(
339 - 'section_content_readmore',
340 - [
341 - 'label' => esc_html__('Read More', 'uicore-elements'),
342 - 'condition' => [
343 - 'readmore' => 'yes',
344 - ],
345 - ]
346 - );
353 + $this->end_controls_section();
347 354
348 - $this->add_control(
349 - 'readmore_text',
350 - [
351 - 'label' => esc_html__('Text', 'uicore-elements'),
352 - 'type' => Controls_Manager::TEXT,
353 - 'dynamic' => ['active' => true],
354 - 'default' => esc_html__('Read More', 'uicore-elements'),
355 - 'placeholder' => esc_html__('Read More', 'uicore-elements'),
356 - ]
357 - );
355 + $this->start_controls_section(
356 + 'section_content_readmore',
357 + [
358 + 'label' => esc_html__('Read More', 'uicore-elements'),
359 + 'condition' => [
360 + 'readmore' => 'yes',
361 + ],
362 + ]
363 + );
358 364
359 - $this->add_control(
360 - 'readmore_link',
361 - [
362 - 'label' => esc_html__('Link to', 'uicore-elements'),
363 - 'type' => Controls_Manager::URL,
364 - 'dynamic' => [
365 - 'active' => true,
366 - ],
367 - 'placeholder' => esc_html__('https://your-link.com', 'uicore-elements'),
368 - 'default' => [
369 - 'url' => '#',
370 - ],
371 - 'condition' => [
372 - 'readmore' => 'yes',
373 - ]
374 - ]
375 - );
365 + $this->add_control(
366 + 'readmore_text',
367 + [
368 + 'label' => esc_html__('Text', 'uicore-elements'),
369 + 'type' => Controls_Manager::TEXT,
370 + 'dynamic' => ['active' => true],
371 + 'default' => esc_html__('Read More', 'uicore-elements'),
372 + 'placeholder' => esc_html__('Read More', 'uicore-elements'),
373 + ]
374 + );
376 375
377 - $this->add_control(
378 - 'onclick',
379 - [
380 - 'label' => esc_html__('OnClick', 'uicore-elements'),
381 - 'type' => Controls_Manager::SWITCHER,
382 - 'condition' => [
383 - 'readmore' => 'yes',
384 - ]
385 - ]
386 - );
376 + $this->add_control(
377 + 'readmore_link',
378 + [
379 + 'label' => esc_html__('Link to', 'uicore-elements'),
380 + 'type' => Controls_Manager::URL,
381 + 'dynamic' => [
382 + 'active' => true,
383 + ],
384 + 'placeholder' => esc_html__('https://your-link.com', 'uicore-elements'),
385 + 'default' => [
386 + 'url' => '#',
387 + ],
388 + 'condition' => [
389 + 'readmore' => 'yes',
390 + ]
391 + ]
392 + );
387 393
388 - $this->add_control(
389 - 'onclick_event',
390 - [
391 - 'label' => esc_html__('OnClick Event', 'uicore-elements'),
392 - 'type' => Controls_Manager::TEXT,
393 - 'placeholder' => 'myFunction()',
394 - 'condition' => [
395 - 'readmore' => 'yes',
396 - 'onclick' => 'yes'
397 - ]
398 - ]
399 - );
394 + // TODO: disabled due to a security complain from Wordfence team in name of Wordpress.
395 + // $this->add_control(
396 + // 'onclick',
397 + // [
398 + // 'label' => esc_html__('OnClick', 'uicore-elements'),
399 + // 'type' => Controls_Manager::SWITCHER,
400 + // 'condition' => [
401 + // 'readmore' => 'yes',
402 + // ]
403 + // ]
404 + // );
400 405
401 - $this->add_control(
402 - 'readmore_icon',
403 - [
404 - 'label' => esc_html__('Icon', 'uicore-elements'),
405 - 'type' => Controls_Manager::ICONS,
406 - 'condition' => [
407 - 'readmore' => 'yes'
408 - ],
409 - 'label_block' => false,
410 - 'skin' => 'inline'
411 - ]
412 - );
406 + // $this->add_control(
407 + // 'onclick_event',
408 + // [
409 + // 'label' => esc_html__('OnClick Event', 'uicore-elements'),
410 + // 'type' => Controls_Manager::TEXT,
411 + // 'placeholder' => 'myFunction()',
412 + // 'condition' => [
413 + // 'readmore' => 'yes',
414 + // 'onclick' => 'yes'
415 + // ]
416 + // ]
417 + // );
413 418
414 - $this->add_control(
415 - 'readmore_icon_align',
416 - [
417 - 'label' => esc_html__('Icon Position', 'uicore-elements'),
418 - 'type' => Controls_Manager::SELECT,
419 - 'default' => 'right',
420 - 'options' => [
421 - 'left' => esc_html__('Left', 'uicore-elements'),
422 - 'right' => esc_html__('Right', 'uicore-elements'),
423 - ],
424 - 'condition' => [
425 - 'readmore_icon[value]!' => '',
426 - ],
427 - ]
428 - );
419 + $this->add_control(
420 + 'readmore_icon',
421 + [
422 + 'label' => esc_html__('Icon', 'uicore-elements'),
423 + 'type' => Controls_Manager::ICONS,
424 + 'condition' => [
425 + 'readmore' => 'yes'
426 + ],
427 + 'label_block' => false,
428 + 'skin' => 'inline'
429 + ]
430 + );
429 431
430 - $this->add_control(
431 - 'readmore_icon_indent',
432 - [
433 - 'label' => esc_html__('Icon Spacing', 'uicore-elements'),
434 - 'type' => Controls_Manager::SLIDER,
435 - 'range' => [
436 - 'px' => [
437 - 'max' => 100,
438 - ],
439 - ],
440 - 'default' => [
441 - 'size' => 8,
442 - ],
443 - 'condition' => [
444 - 'readmore_icon[value]!' => '',
445 - 'readmore_text!' => '',
446 - ],
447 - 'selectors' => [
448 - '{{WRAPPER}} .ui-e-readmore' => '--ui-e-ico-box-rm-icon-spacing: {{SIZE}}px;',
449 - ],
450 - ]
451 - );
432 + $this->add_control(
433 + 'readmore_icon_align',
434 + [
435 + 'label' => esc_html__('Icon Position', 'uicore-elements'),
436 + 'type' => Controls_Manager::SELECT,
437 + 'default' => 'right',
438 + 'options' => [
439 + 'left' => esc_html__('Left', 'uicore-elements'),
440 + 'right' => esc_html__('Right', 'uicore-elements'),
441 + ],
442 + 'selectors_dictionary' => [
443 + 'left' => 'flex-direction: row-reverse;',
444 + 'right' => 'flex-direction: row;',
445 + ],
446 + 'selectors' => [
447 + '{{WRAPPER}} .ui-e-readmore' => '{{VALUE}};',
448 + ],
449 + 'condition' => [
450 + 'readmore_icon[value]!' => '',
451 + ],
452 + ]
453 + );
452 454
453 - $this->add_responsive_control(
454 - 'readmore_horizontal_offset',
455 - [
456 - 'label' => esc_html__('Horizontal Offset', 'uicore-elements'),
457 - 'type' => Controls_Manager::SLIDER,
458 - 'default' => [
459 - 'size' => 0,
460 - ],
461 - 'tablet_default' => [
462 - 'size' => 0,
463 - ],
464 - 'mobile_default' => [
465 - 'size' => 0,
466 - ],
467 - 'range' => [
468 - 'px' => [
469 - 'min' => -200,
470 - 'max' => 200,
471 - ],
472 - ],
473 - 'condition' => [
474 - 'readmore_on_hover' => 'yes',
475 - ],
476 - ]
477 - );
455 + $this->add_control(
456 + 'readmore_icon_indent',
457 + [
458 + 'label' => esc_html__('Icon Spacing', 'uicore-elements'),
459 + 'type' => Controls_Manager::SLIDER,
460 + 'range' => [
461 + 'px' => [
462 + 'max' => 100,
463 + ],
464 + ],
465 + 'default' => [
466 + 'size' => 8,
467 + ],
468 + 'condition' => [
469 + 'readmore_icon[value]!' => '',
470 + 'readmore_text!' => '',
471 + 'text_align!' => 'justify'
472 + ],
473 + 'selectors' => [
474 + '{{WRAPPER}} .ui-e-readmore' => 'gap: {{SIZE}}px;',
475 + ],
476 + ]
477 + );
478 478
479 - $this->add_responsive_control(
480 - 'readmore_vertical_offset',
481 - [
482 - 'label' => esc_html__('Vertical Offset', 'uicore-elements'),
483 - 'type' => Controls_Manager::SLIDER,
484 - 'default' => [
485 - 'size' => 0,
486 - ],
487 - 'tablet_default' => [
488 - 'size' => 0,
489 - ],
490 - 'mobile_default' => [
491 - 'size' => 0,
492 - ],
493 - 'range' => [
494 - 'px' => [
495 - 'min' => -200,
496 - 'max' => 200,
497 - ],
498 - ],
499 - 'selectors' => [
500 - '{{WRAPPER}} .ui-e-readmore' => 'translate: {{readmore_horizontal_offset.SIZE}}px {{SIZE}}px;'
501 - ],
502 - 'condition' => [
503 - 'readmore_on_hover' => 'yes',
504 - ],
505 - ]
506 - );
479 + $this->add_responsive_control(
480 + 'readmore_horizontal_offset',
481 + [
482 + 'label' => esc_html__('Horizontal Offset', 'uicore-elements'),
483 + 'type' => Controls_Manager::SLIDER,
484 + 'default' => [
485 + 'size' => 0,
486 + ],
487 + 'tablet_default' => [
488 + 'size' => 0,
489 + ],
490 + 'mobile_default' => [
491 + 'size' => 0,
492 + ],
493 + 'range' => [
494 + 'px' => [
495 + 'min' => -200,
496 + 'max' => 200,
497 + ],
498 + ],
499 + 'condition' => [
500 + 'readmore_on_hover' => 'yes',
501 + ],
502 + ]
503 + );
507 504
508 - $this->add_control(
509 - 'button_css_id',
510 - [
511 - 'label' => esc_html__('Button ID', 'uicore-elements'),
512 - 'type' => Controls_Manager::TEXT,
513 - 'dynamic' => [
514 - 'active' => true,
515 - ],
516 - 'default' => '',
517 - 'title' => esc_html__('Add your custom id WITHOUT hash (#) key. e.g: my-id', 'uicore-elements'),
518 - 'separator' => 'before',
519 - ]
520 - );
505 + $this->add_responsive_control(
506 + 'readmore_vertical_offset',
507 + [
508 + 'label' => esc_html__('Vertical Offset', 'uicore-elements'),
509 + 'type' => Controls_Manager::SLIDER,
510 + 'default' => [
511 + 'size' => 0,
512 + ],
513 + 'tablet_default' => [
514 + 'size' => 0,
515 + ],
516 + 'mobile_default' => [
517 + 'size' => 0,
518 + ],
519 + 'range' => [
520 + 'px' => [
521 + 'min' => -200,
522 + 'max' => 200,
523 + ],
524 + ],
525 + 'selectors' => [
526 + '{{WRAPPER}} .ui-e-readmore' => 'translate: {{readmore_horizontal_offset.SIZE}}px {{SIZE}}px;'
527 + ],
528 + 'condition' => [
529 + 'readmore_on_hover' => 'yes',
530 + ],
531 + ]
532 + );
521 533
522 - $this->end_controls_section();
534 + $this->add_control(
535 + 'button_css_id',
536 + [
537 + 'label' => esc_html__('Button ID', 'uicore-elements'),
538 + 'type' => Controls_Manager::TEXT,
539 + 'dynamic' => [
540 + 'active' => true,
541 + ],
542 + 'default' => '',
543 + 'title' => esc_html__('Add your custom id WITHOUT hash (#) key. e.g: my-id', 'uicore-elements'),
544 + 'separator' => 'before',
545 + ]
546 + );
523 547
524 - $this->start_controls_section(
525 - 'section_content_badge',
526 - [
527 - 'label' => esc_html__('Badge', 'uicore-elements'),
528 - 'condition' => [
529 - 'badge' => 'yes',
530 - ],
531 - ]
532 - );
548 + $this->end_controls_section();
533 549
534 - $this->add_control(
535 - 'badge_text',
536 - [
537 - 'label' => esc_html__('Badge Text', 'uicore-elements'),
538 - 'type' => Controls_Manager::TEXT,
539 - 'default' => 'POPULAR',
540 - 'placeholder' => 'Type Badge Title',
541 - 'dynamic' => [
542 - 'active' => true,
543 - ],
544 - ]
545 - );
550 + $this->start_controls_section(
551 + 'section_content_badge',
552 + [
553 + 'label' => esc_html__('Badge', 'uicore-elements'),
554 + 'condition' => [
555 + 'badge' => 'yes',
556 + ],
557 + ]
558 + );
546 559
547 - $this->end_controls_section();
560 + $this->add_control(
561 + 'badge_text',
562 + [
563 + 'label' => esc_html__('Badge Text', 'uicore-elements'),
564 + 'type' => Controls_Manager::TEXT,
565 + 'default' => 'POPULAR',
566 + 'placeholder' => 'Type Badge Title',
567 + 'dynamic' => [
568 + 'active' => true,
569 + ],
570 + ]
571 + );
548 572
549 - $this->start_controls_section(
550 - 'section_content_additional',
551 - [
552 - 'label' => esc_html__('Additional Options', 'uicore-elements'),
553 - ]
554 - );
573 + $this->end_controls_section();
555 574
556 - $this->add_control(
557 - 'title_size',
558 - [
559 - 'label' => esc_html__('Title HTML Tag', 'uicore-elements'),
560 - 'type' => Controls_Manager::SELECT,
561 - 'default' => 'h4',
562 - // use helper to return options
563 - 'options' => [
564 - 'h1' => 'H1',
565 - 'h2' => 'H2',
566 - 'h3' => 'H3',
567 - 'h4' => 'H4',
568 - 'h5' => 'H5',
569 - 'h6' => 'H6',
570 - 'div' => 'div',
571 - 'span' => 'span',
572 - 'p' => 'p',
573 - ],
574 - ]
575 - );
575 + $this->start_controls_section(
576 + 'section_content_additional',
577 + [
578 + 'label' => esc_html__('Additional Options', 'uicore-elements'),
579 + ]
580 + );
576 581
577 - $this->add_control(
578 - 'readmore',
579 - [
580 - 'label' => esc_html__('Read More Button', 'uicore-elements'),
581 - 'type' => Controls_Manager::SWITCHER,
582 - 'separator' => 'before',
583 - 'frontend_available' => true,
584 - 'default' => 'yes',
585 - ]
586 - );
582 + $this->add_control(
583 + 'title_size',
584 + [
585 + 'label' => esc_html__('Title HTML Tag', 'uicore-elements'),
586 + 'type' => Controls_Manager::SELECT,
587 + 'default' => 'h4',
588 + 'options' => Helper::get_title_tags(),
589 + ]
590 + );
587 591
588 - $this->add_control(
589 - 'badge',
590 - [
591 - 'label' => esc_html__('Badge', 'uicore-elements'),
592 - 'type' => Controls_Manager::SWITCHER,
593 - ]
594 - );
592 + $this->add_control(
593 + 'readmore',
594 + [
595 + 'label' => esc_html__('Read More Button', 'uicore-elements'),
596 + 'type' => Controls_Manager::SWITCHER,
597 + 'separator' => 'before',
598 + 'frontend_available' => true,
599 + 'default' => 'yes',
600 + ]
601 + );
595 602
596 - $this->add_control(
597 - 'global_link',
598 - [
599 - 'label' => esc_html__('Global Link', 'uicore-elements'),
600 - 'type' => Controls_Manager::SWITCHER,
601 - ]
602 - );
603 + $this->add_control(
604 + 'badge',
605 + [
606 + 'label' => esc_html__('Badge', 'uicore-elements'),
607 + 'type' => Controls_Manager::SWITCHER,
608 + ]
609 + );
603 610
604 - $this->add_control(
605 - 'global_link_url',
606 - [
607 - 'label' => esc_html__('Global Link URL', 'uicore-elements'),
608 - 'type' => Controls_Manager::URL,
609 - 'dynamic' => ['active' => true],
610 - 'placeholder' => 'http://your-link.com',
611 - 'condition' => [
612 - 'global_link' => 'yes'
613 - ]
614 - ]
615 - );
611 + $this->add_control(
612 + 'global_link',
613 + [
614 + 'label' => esc_html__('Global Link', 'uicore-elements'),
615 + 'type' => Controls_Manager::SWITCHER,
616 + ]
617 + );
616 618
617 - $this->end_controls_section();
619 + $this->add_control(
620 + 'global_link_url',
621 + [
622 + 'label' => esc_html__('Global Link URL', 'uicore-elements'),
623 + 'type' => Controls_Manager::URL,
624 + 'dynamic' => ['active' => true],
625 + 'placeholder' => 'http://your-link.com',
626 + 'condition' => [
627 + 'global_link' => 'yes'
628 + ]
629 + ]
630 + );
618 631
619 - //Style
620 - $this->start_controls_section(
621 - 'section_style_icon_box',
622 - [
623 - 'label' => esc_html__('Icon/Image', 'uicore-elements'),
624 - 'tab' => Controls_Manager::TAB_STYLE,
625 - 'condition' => [
626 - 'icon_type!' => 'none',
627 - ],
628 - ]
629 - );
632 + $this->end_controls_section();
630 633
631 - $this->start_controls_tabs('icon_colors');
634 + $this->start_controls_section(
635 + 'section_style_icon_box',
636 + [
637 + 'label' => esc_html__('Icon/Image', 'uicore-elements'),
638 + 'tab' => Controls_Manager::TAB_STYLE,
639 + 'condition' => [
640 + 'icon_type!' => 'none',
641 + ],
642 + ]
643 + );
632 644
633 - $this->start_controls_tab(
634 - 'icon_colors_normal',
635 - [
636 - 'label' => esc_html__('Normal', 'uicore-elements'),
637 - ]
638 - );
645 + $this->start_controls_tabs('icon_colors');
639 646
640 - $this->add_control(
641 - 'icon_color',
642 - [
643 - 'label' => esc_html__('Icon Color', 'uicore-elements'),
644 - 'type' => Controls_Manager::COLOR,
645 - 'selectors' => [
646 - '{{WRAPPER}} .ui-e-icon-wrp i' => 'color: {{VALUE}};',
647 - '{{WRAPPER}} .ui-e-icon-wrp svg' => 'fill: {{VALUE}};',
648 - ],
649 - 'condition' => [
650 - 'icon_type!' => 'image',
651 - ],
652 - ]
653 - );
647 + $this->start_controls_tab(
648 + 'icon_colors_normal',
649 + [
650 + 'label' => esc_html__('Normal', 'uicore-elements'),
651 + ]
652 + );
654 653
655 - $this->add_control(
656 - 'show_svg_icon_color',
657 - [
658 - 'label' => esc_html__('Svg Icon Color', 'uicore-elements'),
659 - 'type' => Controls_Manager::SWITCHER,
660 - 'condition' => [
661 - 'icon_type!' => 'image',
662 - ],
663 - ]
664 - );
654 + $this->add_control(
655 + 'icon_color',
656 + [
657 + 'label' => esc_html__('Icon Color', 'uicore-elements'),
658 + 'type' => Controls_Manager::COLOR,
659 + 'selectors' => [
660 + '{{WRAPPER}} .ui-e-icon-wrp i' => 'color: {{VALUE}};',
661 + '{{WRAPPER}} .ui-e-icon-wrp svg' => 'fill: {{VALUE}};',
662 + ],
663 + 'condition' => [
664 + 'icon_type!' => 'image',
665 + ],
666 + ]
667 + );
665 668
666 - $this->add_control(
667 - 'svg_icon_fill_color',
668 - [
669 - 'label' => esc_html__('Fill Color', 'uicore-elements'),
670 - 'type' => Controls_Manager::COLOR,
671 - 'selectors' => [
672 - '{{WRAPPER}} .ui-e-icon-wrp svg, {{WRAPPER}} .ui-e-icon-wrp svg *' => 'fill: {{VALUE}};',
673 - ],
674 - 'condition' => [
675 - 'icon_type!' => 'image',
676 - 'show_svg_icon_color' => 'yes',
677 - ],
678 - ]
679 - );
669 + $this->add_control(
670 + 'show_svg_icon_color',
671 + [
672 + 'label' => esc_html__('Svg Icon Color', 'uicore-elements'),
673 + 'type' => Controls_Manager::SWITCHER,
674 + 'condition' => [
675 + 'icon_type!' => 'image',
676 + ],
677 + ]
678 + );
680 679
681 - $this->add_control(
682 - 'svg_icon_stroke_color',
683 - [
684 - 'label' => esc_html__('Stroke Color', 'uicore-elements'),
685 - 'type' => Controls_Manager::COLOR,
686 - 'selectors' => [
687 - '{{WRAPPER}} .ui-e-icon-wrp svg, {{WRAPPER}} .ui-e-icon-wrp svg *' => 'stroke: {{VALUE}};',
688 - ],
689 - 'condition' => [
690 - 'icon_type!' => 'image',
691 - 'show_svg_icon_color' => 'yes',
692 - ],
693 - ]
694 - );
680 + $this->add_control(
681 + 'svg_icon_fill_color',
682 + [
683 + 'label' => esc_html__('Fill Color', 'uicore-elements'),
684 + 'type' => Controls_Manager::COLOR,
685 + 'selectors' => [
686 + '{{WRAPPER}} .ui-e-icon-wrp svg, {{WRAPPER}} .ui-e-icon-wrp svg *' => 'fill: {{VALUE}};',
687 + ],
688 + 'condition' => [
689 + 'icon_type!' => 'image',
690 + 'show_svg_icon_color' => 'yes',
691 + ],
692 + ]
693 + );
695 694
696 - $this->add_control(
697 - 'blur_effect',
698 - [
699 - 'label' => esc_html__('Blur Filter', 'uicore-elements'),
700 - 'type' => Controls_Manager::SWITCHER,
701 - ]
702 - );
695 + $this->add_control(
696 + 'svg_icon_stroke_color',
697 + [
698 + 'label' => esc_html__('Stroke Color', 'uicore-elements'),
699 + 'type' => Controls_Manager::COLOR,
700 + 'selectors' => [
701 + '{{WRAPPER}} .ui-e-icon-wrp svg, {{WRAPPER}} .ui-e-icon-wrp svg *' => 'stroke: {{VALUE}};',
702 + ],
703 + 'condition' => [
704 + 'icon_type!' => 'image',
705 + 'show_svg_icon_color' => 'yes',
706 + ],
707 + ]
708 + );
703 709
704 - $this->add_control(
705 - 'blur_level',
706 - [
707 - 'label' => esc_html__('Blur Level', 'uicore-elements'),
708 - 'type' => Controls_Manager::SLIDER,
709 - 'range' => [
710 - 'px' => [
711 - 'min' => 0,
712 - 'step' => 1,
713 - 'max' => 50,
714 - ]
715 - ],
716 - 'default' => [
717 - 'size' => 5
718 - ],
719 - 'selectors' => [
720 - '{{WRAPPER}} .ui-e-icon-wrp' => 'backdrop-filter: blur({{SIZE}}px); -webkit-backdrop-filter: blur({{SIZE}}px);'
721 - ],
722 - 'condition' => [
723 - 'blur_effect' => 'yes',
724 - ]
725 - ]
726 - );
710 + $this->add_control(
711 + 'blur_effect',
712 + [
713 + 'label' => esc_html__('Blur Filter', 'uicore-elements'),
714 + 'type' => Controls_Manager::SWITCHER,
715 + ]
716 + );
727 717
728 - $this->add_group_control(
729 - Group_Control_Background::get_type(),
730 - [
731 - 'name' => 'icon_background',
732 - 'selector' => '{{WRAPPER}} .ui-e-icon-wrp',
733 - ]
734 - );
718 + $this->add_control(
719 + 'blur_level',
720 + [
721 + 'label' => esc_html__('Blur Level', 'uicore-elements'),
722 + 'type' => Controls_Manager::SLIDER,
723 + 'range' => [
724 + 'px' => [
725 + 'min' => 0,
726 + 'step' => 1,
727 + 'max' => 50,
728 + ]
729 + ],
730 + 'default' => [
731 + 'size' => 5
732 + ],
733 + 'selectors' => [
734 + '{{WRAPPER}} .ui-e-icon-wrp' => 'backdrop-filter: blur({{SIZE}}px); -webkit-backdrop-filter: blur({{SIZE}}px);'
735 + ],
736 + 'condition' => [
737 + 'blur_effect' => 'yes',
738 + ]
739 + ]
740 + );
735 741
736 - $this->add_group_control(
737 - Group_Control_Border::get_type(),
738 - [
739 - 'name' => 'icon_border',
740 - 'placeholder' => '1px',
741 - 'default' => '1px',
742 - 'selector' => '{{WRAPPER}} .ui-e-icon-wrp'
743 - ]
744 - );
742 + $this->add_group_control(
743 + Group_Control_Background::get_type(),
744 + [
745 + 'name' => 'icon_background',
746 + 'selector' => '{{WRAPPER}} .ui-e-icon-wrp',
747 + ]
748 + );
745 749
746 - $this->add_responsive_control(
747 - 'icon_radius',
748 - [
749 - 'label' => esc_html__('Border Radius', 'uicore-elements'),
750 - 'type' => Controls_Manager::DIMENSIONS,
751 - 'size_units' => ['px', '%'],
752 - 'selectors' => [
753 - '{{WRAPPER}} .ui-e-icon-wrp' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
754 - ],
755 - 'condition' => [
756 - 'icon_radius_advanced_show!' => 'yes',
757 - ],
758 - ]
759 - );
750 + $this->add_group_control(
751 + Group_Control_Border::get_type(),
752 + [
753 + 'name' => 'icon_border',
754 + 'placeholder' => '1px',
755 + 'default' => '1px',
756 + 'selector' => '{{WRAPPER}} .ui-e-icon-wrp'
757 + ]
758 + );
760 759
761 - $this->add_control(
762 - 'icon_radius_advanced_show',
763 - [
764 - 'label' => esc_html__('Advanced Radius', 'uicore-elements'),
765 - 'type' => Controls_Manager::SWITCHER,''
766 - ]
767 - );
760 + $this->add_responsive_control(
761 + 'icon_radius',
762 + [
763 + 'label' => esc_html__('Border Radius', 'uicore-elements'),
764 + 'type' => Controls_Manager::DIMENSIONS,
765 + 'size_units' => ['px', '%'],
766 + 'selectors' => [
767 + '{{WRAPPER}} .ui-e-icon-wrp' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
768 + ],
769 + 'condition' => [
770 + 'icon_radius_advanced_show!' => 'yes',
771 + ],
772 + ]
773 + );
768 774
769 - $this->add_control(
770 - 'icon_radius_advanced',
771 - [
772 - 'label' => esc_html__('Radius', 'uicore-elements'),
773 - 'description' => sprintf('Generate the advanced border radius on https://9elements.github.io/fancy-border-radius/', 'uicore-elements'),
774 - 'type' => Controls_Manager::TEXT,
775 - 'size_units' => ['px', '%'],
776 - 'default' => '75% 25% 43% 57% / 46% 29% 71% 54%',
777 - 'selectors' => [
778 - '{{WRAPPER}} .ui-e-icon-wrp' => 'border-radius: {{VALUE}}; overflow: hidden;',
779 - '{{WRAPPER}} .ui-e-icon-wrp img' => 'border-radius: {{VALUE}}; overflow: hidden;'
780 - ],
781 - 'condition' => [
782 - 'icon_radius_advanced_show' => 'yes',
783 - ],
784 - ]
785 - );
775 + $this->add_control(
776 + 'icon_radius_advanced_show',
777 + [
778 + 'label' => esc_html__('Advanced Radius', 'uicore-elements'),
779 + 'type' => Controls_Manager::SWITCHER,
780 + ''
781 + ]
782 + );
786 783
787 - $this->add_responsive_control(
788 - 'icon_padding',
789 - [
790 - 'label' => esc_html__('Padding', 'uicore-elements'),
791 - 'type' => Controls_Manager::DIMENSIONS,
792 - 'size_units' => ['px', 'em', '%'],
793 - 'default' => [
794 - 'top' => 10,
795 - 'right' => 10,
796 - 'bottom' => 10,
797 - 'left' => 10,
798 - 'unit' => 'px',
799 - 'isLinked' => true,
800 - ],
801 - 'selectors' => [
802 - '{{WRAPPER}} .ui-e-icon-wrp' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};'
803 - ]
804 - ]
805 - );
784 + $this->add_control(
785 + 'icon_radius_advanced',
786 + [
787 + 'label' => esc_html__('Radius', 'uicore-elements'),
788 + 'description' => sprintf('Generate the advanced border radius on https://9elements.github.io/fancy-border-radius/', 'uicore-elements'),
789 + 'type' => Controls_Manager::TEXT,
790 + 'size_units' => ['px', '%'],
791 + 'default' => '75% 25% 43% 57% / 46% 29% 71% 54%',
792 + 'selectors' => [
793 + '{{WRAPPER}} .ui-e-icon-wrp' => 'border-radius: {{VALUE}}; overflow: hidden;',
794 + '{{WRAPPER}} .ui-e-icon-wrp img' => 'border-radius: {{VALUE}}; overflow: hidden;'
795 + ],
796 + 'condition' => [
797 + 'icon_radius_advanced_show' => 'yes',
798 + ],
799 + ]
800 + );
806 801
807 - $this->add_group_control(
808 - Group_Control_Box_Shadow::get_type(),
809 - [
810 - 'name' => 'icon_shadow',
811 - 'selector' => '{{WRAPPER}} .ui-e-icon-wrp'
812 - ]
813 - );
802 + $this->add_responsive_control(
803 + 'icon_padding',
804 + [
805 + 'label' => esc_html__('Padding', 'uicore-elements'),
806 + 'type' => Controls_Manager::DIMENSIONS,
807 + 'size_units' => ['px', 'em', '%'],
808 + 'default' => [
809 + 'top' => 10,
810 + 'right' => 10,
811 + 'bottom' => 10,
812 + 'left' => 10,
813 + 'unit' => 'px',
814 + 'isLinked' => true,
815 + ],
816 + 'selectors' => [
817 + '{{WRAPPER}} .ui-e-icon-wrp' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};'
818 + ]
819 + ]
820 + );
814 821
815 - $this->add_responsive_control(
816 - 'icon_space',
817 - [
818 - 'label' => esc_html__('Spacing', 'uicore-elements'),
819 - 'type' => Controls_Manager::SLIDER,
820 - 'separator' => 'before',
821 - 'default' => [
822 - 'size' => 15,
823 - ],
824 - 'range' => [
825 - 'px' => [
826 - 'min' => 0,
827 - 'max' => 100,
828 - ],
829 - ],
830 - 'selectors' => [
831 - '{{WRAPPER}}' => '--ui-e-ico-box-icon-spacing: {{SIZE}}{{UNIT}} !important;',
832 - ],
833 - ]
834 - );
822 + $this->add_group_control(
823 + Group_Control_Box_Shadow::get_type(),
824 + [
825 + 'name' => 'icon_shadow',
826 + 'selector' => '{{WRAPPER}} .ui-e-icon-wrp'
827 + ]
828 + );
835 829
836 - $this->add_control(
837 - 'image_fullwidth',
838 - [
839 - 'label' => esc_html__('Image Fullwidth', 'uicore-elements'),
840 - 'type' => Controls_Manager::SWITCHER,
841 - 'selectors' => [
842 - '{{WRAPPER}} .ui-e-icon-wrp' => 'width: 100%;box-sizing: border-box;',
843 - ],
844 - 'condition' => [
845 - 'icon_type' => 'image'
846 - ]
847 - ]
848 - );
830 + $this->add_responsive_control(
831 + 'icon_space',
832 + [
833 + 'label' => esc_html__('Spacing', 'uicore-elements'),
834 + 'type' => Controls_Manager::SLIDER,
835 + 'separator' => 'before',
836 + 'default' => [
837 + 'size' => 15,
838 + ],
839 + 'range' => [
840 + 'px' => [
841 + 'min' => 0,
842 + 'max' => 100,
843 + ],
844 + ],
845 + 'selectors' => [
846 + '{{WRAPPER}}' => '--ui-e-ico-box-icon-spacing: {{SIZE}}{{UNIT}} !important;',
847 + ],
848 + ]
849 + );
849 850
850 - $this->add_responsive_control(
851 - 'icon_size',
852 - [
853 - 'label' => esc_html__('Size', 'uicore-elements'),
854 - 'type' => Controls_Manager::SLIDER,
855 - 'size_units' => ['px', 'em', 'vh', 'vw'],
856 - 'range' => [
857 - 'px' => [
858 - 'min' => 6,
859 - 'max' => 300,
860 - ],
861 - ],
862 - 'default' => [
863 - 'unit' => 'px',
864 - 'size' => 42,
865 - ],
866 - 'selectors' => [
867 - '{{WRAPPER}} .ui-e-icon-wrp' => '--ui-e-media-size: {{SIZE}}{{UNIT}};',
868 - ],
869 - 'condition' => [
870 - 'icon_type' => 'icon',
871 - ],
872 - ]
873 - );
851 + $this->add_control(
852 + 'image_fullwidth',
853 + [
854 + 'label' => esc_html__('Image Fullwidth', 'uicore-elements'),
855 + 'type' => Controls_Manager::SWITCHER,
856 + 'selectors' => [
857 + '{{WRAPPER}} .ui-e-icon-wrp' => 'width: 100%; box-sizing: border-box;
858 + margin-left: calc(var(--ui-e-content-padding-left) * -1);
859 + margin-right: calc(var(--ui-e-content-padding-right) * -1);
860 + margin-top: calc(var(--ui-e-content-padding-top) *-1);',
861 + ],
862 + 'condition' => [
863 + 'icon_type' => 'image'
864 + ]
865 + ]
866 + );
874 867
875 - $this->add_responsive_control(
876 - 'image_size',
877 - [
878 - 'label' => esc_html__('Size', 'uicore-elements'),
879 - 'type' => Controls_Manager::SLIDER,
880 - 'size_units' => ['px', 'em', 'vh', 'vw'],
881 - 'range' => [
882 - 'px' => [
883 - 'min' => 6,
884 - 'max' => 300,
885 - ],
886 - ],
887 - 'default' => [
888 - 'unit' => 'px',
889 - 'size' => 120,
890 - ],
891 - 'selectors' => [
892 - '{{WRAPPER}} .ui-e-icon-wrp' => '--ui-e-media-size: {{SIZE}}{{UNIT}};',
893 - ],
894 - 'conditions' => [
895 - 'relation' => 'and',
896 - 'terms' => [
897 - [
898 - 'name' => 'image_fullwidth',
899 - 'operator' => '==',
900 - 'value' => ''
901 - ],
902 - [
903 - 'name' => 'icon_type',
904 - 'operator' => '==',
905 - 'value' => 'image'
906 - ],
907 - ]
908 - ]
909 - ]
910 - );
868 + $this->add_responsive_control(
869 + 'icon_size',
870 + [
871 + 'label' => esc_html__('Size', 'uicore-elements'),
872 + 'type' => Controls_Manager::SLIDER,
873 + 'size_units' => ['px', 'em', 'vh', 'vw'],
874 + 'range' => [
875 + 'px' => [
876 + 'min' => 6,
877 + 'max' => 300,
878 + ],
879 + ],
880 + 'default' => [
881 + 'unit' => 'px',
882 + 'size' => 42,
883 + ],
884 + 'selectors' => [
885 + '{{WRAPPER}} .ui-e-icon-wrp' => '--ui-e-media-size: {{SIZE}}{{UNIT}};',
886 + ],
887 + 'condition' => [
888 + 'icon_type' => 'icon',
889 + ],
890 + ]
891 + );
911 892
912 - $this->add_control(
913 - 'rotate',
914 - [
915 - 'label' => esc_html__('Rotate', 'uicore-elements'),
916 - 'type' => Controls_Manager::SLIDER,
917 - 'default' => [
918 - 'size' => 0,
919 - 'unit' => 'deg',
920 - ],
921 - 'range' => [
922 - 'deg' => [
923 - 'max' => 360,
924 - 'min' => -360,
925 - ],
926 - ],
927 - 'selectors' => [
928 - '{{WRAPPER}}' => '--ui-e-ico-box-icon-rotate: {{SIZE}}{{UNIT}};',
929 - ],
930 - ]
931 - );
893 + $this->add_responsive_control(
894 + 'image_size',
895 + [
896 + 'label' => esc_html__('Size', 'uicore-elements'),
897 + 'type' => Controls_Manager::SLIDER,
898 + 'size_units' => ['px', 'em', 'vh', 'vw'],
899 + 'range' => [
900 + 'px' => [
901 + 'min' => 6,
902 + 'max' => 300,
903 + ],
904 + ],
905 + 'default' => [
906 + 'unit' => 'px',
907 + 'size' => 120,
908 + ],
909 + 'selectors' => [
910 + '{{WRAPPER}} .ui-e-icon-wrp' => '--ui-e-media-size: {{SIZE}}{{UNIT}};',
911 + ],
912 + 'conditions' => [
913 + 'relation' => 'and',
914 + 'terms' => [
915 + [
916 + 'name' => 'image_fullwidth',
917 + 'operator' => '==',
918 + 'value' => ''
919 + ],
920 + [
921 + 'name' => 'icon_type',
922 + 'operator' => '==',
923 + 'value' => 'image'
924 + ],
925 + ]
926 + ]
927 + ]
928 + );
932 929
933 - $this->add_control(
934 - 'icon_background_rotate',
935 - [
936 - 'label' => esc_html__('Background Rotate', 'uicore-elements'),
937 - 'type' => Controls_Manager::SLIDER,
938 - 'default' => [
939 - 'size' => 0,
940 - 'unit' => 'deg',
941 - ],
942 - 'range' => [
943 - 'deg' => [
944 - 'max' => 360,
945 - 'min' => -360,
946 - ],
947 - ],
948 - 'selectors' => [
949 - '{{WRAPPER}} .ui-e-icon-wrp' => '--ui-e-ico-box-icon-wrp-rotate: {{SIZE}}{{UNIT}};',
950 - ],
951 - ]
952 - );
930 + $this->add_control(
931 + 'rotate',
932 + [
933 + 'label' => esc_html__('Rotate', 'uicore-elements'),
934 + 'type' => Controls_Manager::SLIDER,
935 + 'default' => [
936 + 'size' => 0,
937 + 'unit' => 'deg',
938 + ],
939 + 'range' => [
940 + 'deg' => [
941 + 'max' => 360,
942 + 'min' => -360,
943 + ],
944 + ],
945 + 'selectors' => [
946 + '{{WRAPPER}}' => '--ui-e-ico-box-icon-rotate: {{SIZE}}{{UNIT}};',
947 + ],
948 + ]
949 + );
953 950
954 - $this->add_responsive_control(
955 - 'icon_vertical_offset',
956 - [
957 - 'label' => esc_html__('Icon Vertical Offset', 'uicore-elements'),
958 - 'type' => Controls_Manager::SLIDER,
959 - 'range' => [
960 - 'px' => [
961 - 'min' => -200,
962 - 'max' => 200,
963 - ],
964 - ],
965 - 'default' => [
966 - 'size' => 0,
967 - ],
968 - 'selectors' => [
969 - '{{WRAPPER}} .ui-e-icon-wrp' => '--ui-e-ico-box-vertical-off: {{SIZE}}px'
970 - ],
971 - ]
972 - );
951 + $this->add_control(
952 + 'icon_background_rotate',
953 + [
954 + 'label' => esc_html__('Background Rotate', 'uicore-elements'),
955 + 'type' => Controls_Manager::SLIDER,
956 + 'default' => [
957 + 'size' => 0,
958 + 'unit' => 'deg',
959 + ],
960 + 'range' => [
961 + 'deg' => [
962 + 'max' => 360,
963 + 'min' => -360,
964 + ],
965 + ],
966 + 'selectors' => [
967 + '{{WRAPPER}} .ui-e-icon-wrp' => '--ui-e-ico-box-icon-wrp-rotate: {{SIZE}}{{UNIT}};',
968 + ],
969 + ]
970 + );
973 971
974 - $this->add_responsive_control(
975 - 'icon_horizontal_offset',
976 - [
977 - 'label' => esc_html__('Icon Horizontal Offset', 'uicore-elements'),
978 - 'type' => Controls_Manager::SLIDER,
979 - 'range' => [
980 - 'px' => [
981 - 'min' => -200,
982 - 'max' => 200,
983 - ],
984 - ],
985 - 'default' => [
986 - 'size' => 0,
987 - ],
988 - 'selectors' => [
989 - '{{WRAPPER}} .ui-e-icon-wrp' => '--ui-e-ico-box-horizontal-off: {{SIZE}}px'
990 - ],
991 - ]
992 - );
972 + $this->add_responsive_control(
973 + 'icon_vertical_offset',
974 + [
975 + 'label' => esc_html__('Icon Vertical Offset', 'uicore-elements'),
976 + 'type' => Controls_Manager::SLIDER,
977 + 'range' => [
978 + 'px' => [
979 + 'min' => -200,
980 + 'max' => 200,
981 + ],
982 + ],
983 + 'default' => [
984 + 'size' => 0,
985 + ],
986 + 'selectors' => [
987 + '{{WRAPPER}} .ui-e-icon-wrp' => '--ui-e-ico-box-vertical-off: {{SIZE}}px'
988 + ],
989 + ]
990 + );
993 991
994 - $this->add_control(
995 - 'image_icon_heading',
996 - [
997 - 'label' => esc_html__('Image Effect', 'uicore-elements'),
998 - 'type' => Controls_Manager::HEADING,
999 - 'separator' => 'before',
1000 - 'condition' => [
1001 - 'icon_type' => 'image',
1002 - ],
1003 - ]
1004 - );
992 + $this->add_responsive_control(
993 + 'icon_horizontal_offset',
994 + [
995 + 'label' => esc_html__('Icon Horizontal Offset', 'uicore-elements'),
996 + 'type' => Controls_Manager::SLIDER,
997 + 'range' => [
998 + 'px' => [
999 + 'min' => -200,
1000 + 'max' => 200,
1001 + ],
1002 + ],
1003 + 'default' => [
1004 + 'size' => 0,
1005 + ],
1006 + 'selectors' => [
1007 + '{{WRAPPER}} .ui-e-icon-wrp' => '--ui-e-ico-box-horizontal-off: {{SIZE}}px'
1008 + ],
1009 + ]
1010 + );
1005 1011
1006 - $this->add_group_control(
1007 - Group_Control_Css_Filter::get_type(),
1008 - [
1009 - 'name' => 'css_filters',
1010 - 'selector' => '{{WRAPPER}} .ui-e-ico-box img',
1011 - 'condition' => [
1012 - 'icon_type' => 'image',
1013 - ],
1014 - ]
1015 - );
1012 + $this->add_control(
1013 + 'image_icon_heading',
1014 + [
1015 + 'label' => esc_html__('Image Effect', 'uicore-elements'),
1016 + 'type' => Controls_Manager::HEADING,
1017 + 'separator' => 'before',
1018 + 'condition' => [
1019 + 'icon_type' => 'image',
1020 + ],
1021 + ]
1022 + );
1016 1023
1017 - $this->add_control(
1018 - 'image_opacity',
1019 - [
1020 - 'label' => esc_html__('Opacity', 'uicore-elements'),
1021 - 'type' => Controls_Manager::SLIDER,
1022 - 'range' => [
1023 - 'px' => [
1024 - 'max' => 1,
1025 - 'min' => 0.10,
1026 - 'step' => 0.01,
1027 - ],
1028 - ],
1029 - 'selectors' => [
1030 - '{{WRAPPER}} .ui-e-ico-box img' => 'opacity: {{SIZE}};',
1031 - ],
1032 - 'condition' => [
1033 - 'icon_type' => 'image',
1034 - ],
1035 - ]
1036 - );
1024 + $this->add_group_control(
1025 + Group_Control_Css_Filter::get_type(),
1026 + [
1027 + 'name' => 'css_filters',
1028 + 'selector' => '{{WRAPPER}} .ui-e-ico-box img',
1029 + 'condition' => [
1030 + 'icon_type' => 'image',
1031 + ],
1032 + ]
1033 + );
1037 1034
1038 - $this->add_control(
1039 - 'background_hover_transition',
1040 - [
1041 - 'label' => esc_html__('Transition Duration', 'uicore-elements'),
1042 - 'type' => Controls_Manager::SLIDER,
1043 - 'default' => [
1044 - 'size' => 0.3,
1045 - ],
1046 - 'range' => [
1047 - 'px' => [
1048 - 'max' => 3,
1049 - 'step' => 0.1,
1050 - ],
1051 - ],
1052 - 'selectors' => [
1053 - '{{WRAPPER}} .ui-e-icon-wrp img' => 'transition-duration: {{SIZE}}s',
1054 - '{{WRAPPER}}:hover .ui-e-icon-wrp img' => 'transform: ',
1055 - ],
1056 - 'condition' => [
1057 - 'icon_type' => 'image',
1058 - ],
1059 - ]
1060 - );
1035 + $this->add_control(
1036 + 'image_opacity',
1037 + [
1038 + 'label' => esc_html__('Opacity', 'uicore-elements'),
1039 + 'type' => Controls_Manager::SLIDER,
1040 + 'range' => [
1041 + 'px' => [
1042 + 'max' => 1,
1043 + 'min' => 0.10,
1044 + 'step' => 0.01,
1045 + ],
1046 + ],
1047 + 'selectors' => [
1048 + '{{WRAPPER}} .ui-e-ico-box img' => 'opacity: {{SIZE}};',
1049 + ],
1050 + 'condition' => [
1051 + 'icon_type' => 'image',
1052 + ],
1053 + ]
1054 + );
1061 1055
1062 - $this->end_controls_tab();
1056 + $this->add_control(
1057 + 'background_hover_transition',
1058 + [
1059 + 'label' => esc_html__('Transition Duration', 'uicore-elements'),
1060 + 'type' => Controls_Manager::SLIDER,
1061 + 'default' => [
1062 + 'size' => 0.3,
1063 + ],
1064 + 'range' => [
1065 + 'px' => [
1066 + 'max' => 3,
1067 + 'step' => 0.1,
1068 + ],
1069 + ],
1070 + 'selectors' => [
1071 + '{{WRAPPER}} .ui-e-icon-wrp img' => 'transition-duration: {{SIZE}}s',
1072 + '{{WRAPPER}}:hover .ui-e-icon-wrp img' => 'transform: ',
1073 + ],
1074 + 'condition' => [
1075 + 'icon_type' => 'image',
1076 + ],
1077 + ]
1078 + );
1063 1079
1064 - $this->start_controls_tab(
1065 - 'icon_hover',
1066 - [
1067 - 'label' => esc_html__('Hover', 'uicore-elements'),
1068 - ]
1069 - );
1080 + $this->end_controls_tab();
1070 1081
1071 - $this->add_control(
1072 - 'icon_hover_color',
1073 - [
1074 - 'label' => esc_html__('Icon Color', 'uicore-elements'),
1075 - 'type' => Controls_Manager::COLOR,
1076 - 'selectors' => [
1077 - '{{WRAPPER}}:hover .ui-e-icon-wrp' => 'color: {{VALUE}};',
1078 - '{{WRAPPER}}:hover .ui-e-icon-wrp svg' => 'fill: {{VALUE}};',
1079 - ],
1080 - 'condition' => [
1081 - 'icon_type!' => 'image',
1082 - ],
1083 - ]
1084 - );
1082 + $this->start_controls_tab(
1083 + 'icon_hover',
1084 + [
1085 + 'label' => esc_html__('Hover', 'uicore-elements'),
1086 + ]
1087 + );
1085 1088
1086 - $this->add_control(
1087 - 'svg_icon_hover_fill_color',
1088 - [
1089 - 'label' => esc_html__('Fill Color', 'uicore-elements'),
1090 - 'type' => Controls_Manager::COLOR,
1091 - 'selectors' => [
1092 - '{{WRAPPER}}:hover .ui-e-icon-wrp svg, {{WRAPPER}}:hover .ui-e-icon-wrp svg *' => 'fill: {{VALUE}};',
1093 - ],
1094 - 'condition' => [
1095 - 'icon_type!' => 'image',
1096 - 'show_svg_icon_color' => 'yes',
1097 - ],
1098 - ]
1099 - );
1089 + $this->add_control(
1090 + 'icon_hover_color',
1091 + [
1092 + 'label' => esc_html__('Icon Color', 'uicore-elements'),
1093 + 'type' => Controls_Manager::COLOR,
1094 + 'selectors' => [
1095 + '{{WRAPPER}}:hover .ui-e-icon-wrp' => 'color: {{VALUE}};',
1096 + '{{WRAPPER}}:hover .ui-e-icon-wrp i' => 'color: {{VALUE}};',
1097 + '{{WRAPPER}}:hover .ui-e-icon-wrp svg' => 'fill: {{VALUE}};',
1098 + ],
1099 + 'condition' => [
1100 + 'icon_type!' => 'image',
1101 + ],
1102 + ]
1103 + );
1100 1104
1101 - $this->add_control(
1102 - 'svg_icon_hover_stroke_color',
1103 - [
1104 - 'label' => esc_html__('Stroke Color', 'uicore-elements'),
1105 - 'type' => Controls_Manager::COLOR,
1106 - 'selectors' => [
1107 - '{{WRAPPER}}:hover .ui-e-icon-wrp svg, {{WRAPPER}}:hover .ui-e-icon-wrp svg *' => 'stroke: {{VALUE}};',
1108 - ],
1109 - 'condition' => [
1110 - 'icon_type!' => 'image',
1111 - 'show_svg_icon_color' => 'yes',
1112 - ],
1113 - ]
1114 - );
1105 + $this->add_control(
1106 + 'svg_icon_hover_fill_color',
1107 + [
1108 + 'label' => esc_html__('Fill Color', 'uicore-elements'),
1109 + 'type' => Controls_Manager::COLOR,
1110 + 'selectors' => [
1111 + '{{WRAPPER}}:hover .ui-e-icon-wrp svg, {{WRAPPER}}:hover .ui-e-icon-wrp svg *' => 'fill: {{VALUE}};',
1112 + ],
1113 + 'condition' => [
1114 + 'icon_type!' => 'image',
1115 + 'show_svg_icon_color' => 'yes',
1116 + ],
1117 + ]
1118 + );
1115 1119
1116 - $this->add_group_control(
1117 - Group_Control_Background::get_type(),
1118 - [
1119 - 'name' => 'icon_hover_background',
1120 - 'separator' => 'before',
1121 - 'selector' => '{{WRAPPER}}:hover .ui-e-icon-wrp:after',
1122 - ]
1123 - );
1120 + $this->add_control(
1121 + 'svg_icon_hover_stroke_color',
1122 + [
1123 + 'label' => esc_html__('Stroke Color', 'uicore-elements'),
1124 + 'type' => Controls_Manager::COLOR,
1125 + 'selectors' => [
1126 + '{{WRAPPER}}:hover .ui-e-icon-wrp svg, {{WRAPPER}}:hover .ui-e-icon-wrp svg *' => 'stroke: {{VALUE}};',
1127 + ],
1128 + 'condition' => [
1129 + 'icon_type!' => 'image',
1130 + 'show_svg_icon_color' => 'yes',
1131 + ],
1132 + ]
1133 + );
1124 1134
1125 - $this->add_control(
1126 - 'icon_hover_border_color',
1127 - [
1128 - 'label' => esc_html__('Border Color', 'uicore-elements'),
1129 - 'type' => Controls_Manager::COLOR,
1130 - 'separator' => 'before',
1131 - 'selectors' => [
1132 - '{{WRAPPER}}:hover .ui-e-icon-wrp' => 'border-color: {{VALUE}};',
1133 - ],
1134 - 'condition' => [
1135 - 'icon_border_border!' => '',
1136 - ],
1137 - ]
1138 - );
1135 + $this->add_group_control(
1136 + Group_Control_Background::get_type(),
1137 + [
1138 + 'name' => 'icon_hover_background',
1139 + 'separator' => 'before',
1140 + 'selector' => '{{WRAPPER}}:hover .ui-e-icon-wrp',
1141 + ]
1142 + );
1139 1143
1140 - $this->add_responsive_control(
1141 - 'icon_hover_radius',
1142 - [
1143 - 'label' => esc_html__('Border Radius', 'uicore-elements'),
1144 - 'type' => Controls_Manager::DIMENSIONS,
1145 - 'size_units' => ['px', '%'],
1146 - 'separator' => 'after',
1147 - 'selectors' => [
1148 - '{{WRAPPER}}:hover .ui-e-icon-wrp' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}}; overflow: hidden;',
1149 - '{{WRAPPER}}:hover .ui-e-icon-wrp img' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}}; overflow: hidden;'
1150 - ]
1151 - ]
1152 - );
1144 + $this->add_control(
1145 + 'icon_hover_border_color',
1146 + [
1147 + 'label' => esc_html__('Border Color', 'uicore-elements'),
1148 + 'type' => Controls_Manager::COLOR,
1149 + 'separator' => 'before',
1150 + 'selectors' => [
1151 + '{{WRAPPER}}:hover .ui-e-icon-wrp' => 'border-color: {{VALUE}};',
1152 + ],
1153 + 'condition' => [
1154 + 'icon_border_border!' => '',
1155 + ],
1156 + ]
1157 + );
1153 1158
1154 - $this->add_group_control(
1155 - Group_Control_Box_Shadow::get_type(),
1156 - [
1157 - 'name' => 'icon_hover_shadow',
1158 - 'selector' => '{{WRAPPER}}:hover .ui-e-icon-wrp'
1159 - ]
1160 - );
1159 + $this->add_responsive_control(
1160 + 'icon_hover_radius',
1161 + [
1162 + 'label' => esc_html__('Border Radius', 'uicore-elements'),
1163 + 'type' => Controls_Manager::DIMENSIONS,
1164 + 'size_units' => ['px', '%'],
1165 + 'separator' => 'after',
1166 + 'selectors' => [
1167 + '{{WRAPPER}}:hover .ui-e-icon-wrp' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}}; overflow: hidden;',
1168 + '{{WRAPPER}}:hover .ui-e-icon-wrp img' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}}; overflow: hidden;'
1169 + ]
1170 + ]
1171 + );
1161 1172
1162 - $this->add_control(
1163 - 'image_icon_hover_heading',
1164 - [
1165 - 'label' => esc_html__('Image Effect', 'uicore-elements'),
1166 - 'type' => Controls_Manager::HEADING,
1167 - 'separator' => 'before',
1168 - 'condition' => [
1169 - 'icon_type' => 'image',
1170 - ],
1171 - ]
1172 - );
1173 + $this->add_group_control(
1174 + Group_Control_Box_Shadow::get_type(),
1175 + [
1176 + 'name' => 'icon_hover_shadow',
1177 + 'selector' => '{{WRAPPER}}:hover .ui-e-icon-wrp'
1178 + ]
1179 + );
1173 1180
1174 - $this->add_group_control(
1175 - Group_Control_Css_Filter::get_type(),
1176 - [
1177 - 'name' => 'css_filters_hover',
1178 - 'selector' => '{{WRAPPER}}:hover .ui-e-icon-wrp img',
1179 - 'condition' => [
1180 - 'icon_type' => 'image',
1181 - ],
1182 - ]
1183 - );
1181 + $this->add_control(
1182 + 'image_icon_hover_heading',
1183 + [
1184 + 'label' => esc_html__('Image Effect', 'uicore-elements'),
1185 + 'type' => Controls_Manager::HEADING,
1186 + 'separator' => 'before',
1187 + 'condition' => [
1188 + 'icon_type' => 'image',
1189 + ],
1190 + ]
1191 + );
1184 1192
1185 - $this->add_control(
1186 - 'image_opacity_hover',
1187 - [
1188 - 'label' => esc_html__('Opacity', 'uicore-elements'),
1189 - 'type' => Controls_Manager::SLIDER,
1190 - 'range' => [
1191 - 'px' => [
1192 - 'max' => 1,
1193 - 'min' => 0.10,
1194 - 'step' => 0.01,
1195 - ],
1196 - ],
1197 - 'selectors' => [
1198 - '{{WRAPPER}}:hover .ui-e-icon-wrp img' => 'opacity: {{SIZE}};',
1199 - ],
1200 - 'condition' => [
1201 - 'icon_type' => 'image',
1202 - ],
1203 - ]
1204 - );
1193 + $this->add_group_control(
1194 + Group_Control_Css_Filter::get_type(),
1195 + [
1196 + 'name' => 'css_filters_hover',
1197 + 'selector' => '{{WRAPPER}}:hover .ui-e-icon-wrp img',
1198 + 'condition' => [
1199 + 'icon_type' => 'image',
1200 + ],
1201 + ]
1202 + );
1205 1203
1206 - $this->end_controls_tab();
1204 + $this->add_control(
1205 + 'image_opacity_hover',
1206 + [
1207 + 'label' => esc_html__('Opacity', 'uicore-elements'),
1208 + 'type' => Controls_Manager::SLIDER,
1209 + 'range' => [
1210 + 'px' => [
1211 + 'max' => 1,
1212 + 'min' => 0.10,
1213 + 'step' => 0.01,
1214 + ],
1215 + ],
1216 + 'selectors' => [
1217 + '{{WRAPPER}}:hover .ui-e-icon-wrp img' => 'opacity: {{SIZE}};',
1218 + ],
1219 + 'condition' => [
1220 + 'icon_type' => 'image',
1221 + ],
1222 + ]
1223 + );
1207 1224
1208 - $this->end_controls_tabs();
1225 + $this->end_controls_tab();
1209 1226
1210 - $this->end_controls_section();
1227 + $this->end_controls_tabs();
1211 1228
1212 - $this->start_controls_section(
1213 - 'section_style_title',
1214 - [
1215 - 'label' => esc_html__('Title', 'uicore-elements'),
1216 - 'tab' => Controls_Manager::TAB_STYLE,
1217 - ]
1218 - );
1229 + $this->end_controls_section();
1219 1230
1220 - $this->start_controls_tabs('tabs_title_style');
1231 + $this->start_controls_section(
1232 + 'section_style_title',
1233 + [
1234 + 'label' => esc_html__('Title', 'uicore-elements'),
1235 + 'tab' => Controls_Manager::TAB_STYLE,
1236 + ]
1237 + );
1221 1238
1222 - $this->start_controls_tab(
1223 - 'tab_title_style_normal',
1224 - [
1225 - 'label' => esc_html__('Normal', 'uicore-elements'),
1226 - ]
1227 - );
1239 + $this->start_controls_tabs('tabs_title_style');
1228 1240
1229 - $this->add_responsive_control(
1230 - 'title_bottom_space',
1231 - [
1232 - 'label' => esc_html__('Spacing', 'uicore-elements'),
1233 - 'type' => Controls_Manager::SLIDER,
1234 - 'range' => [
1235 - 'px' => [
1236 - 'min' => 0,
1237 - 'max' => 100,
1238 - ],
1239 - ],
1240 - 'default' => [
1241 - 'unit' => 'px',
1242 - 'size' => 0,
1243 - ],
1244 - 'selectors' => [
1245 - '{{WRAPPER}} .ui-e-title' => 'margin-bottom: {{SIZE}}{{UNIT}} !important;',
1246 - ],
1247 - ]
1248 - );
1241 + $this->start_controls_tab(
1242 + 'tab_title_style_normal',
1243 + [
1244 + 'label' => esc_html__('Normal', 'uicore-elements'),
1245 + ]
1246 + );
1249 1247
1250 - $this->add_control(
1251 - 'title_color',
1252 - [
1253 - 'label' => esc_html__('Color', 'uicore-elements'),
1254 - 'type' => Controls_Manager::COLOR,
1255 - 'selectors' => [
1256 - '{{WRAPPER}} .ui-e-title' => 'color: {{VALUE}};',
1257 - ],
1258 - ]
1259 - );
1248 + $this->add_control(
1249 + 'title_color',
1250 + [
1251 + 'label' => esc_html__('Color', 'uicore-elements'),
1252 + 'type' => Controls_Manager::COLOR,
1253 + 'selectors' => [
1254 + '{{WRAPPER}} .ui-e-title' => 'color: {{VALUE}};',
1255 + ],
1256 + ]
1257 + );
1260 1258
1261 - $this->end_controls_tab();
1259 + $this->end_controls_tab();
1262 1260
1263 - $this->start_controls_tab(
1264 - 'tab_title_style_hover',
1265 - [
1266 - 'label' => esc_html__('Hover', 'uicore-elements'),
1267 - ]
1268 - );
1261 + $this->start_controls_tab(
1262 + 'tab_title_style_hover',
1263 + [
1264 + 'label' => esc_html__('Hover', 'uicore-elements'),
1265 + ]
1266 + );
1269 1267
1270 - $this->add_control(
1271 - 'title_color_hover',
1272 - [
1273 - 'label' => esc_html__('Color', 'uicore-elements'),
1274 - 'type' => Controls_Manager::COLOR,
1275 - 'selectors' => [
1276 - '{{WRAPPER}}:hover .ui-e-title' => 'color: {{VALUE}};',
1277 - ],
1278 - ]
1279 - );
1268 + $this->add_control(
1269 + 'title_color_hover',
1270 + [
1271 + 'label' => esc_html__('Color', 'uicore-elements'),
1272 + 'type' => Controls_Manager::COLOR,
1273 + 'selectors' => [
1274 + '{{WRAPPER}}:hover .ui-e-title' => 'color: {{VALUE}};',
1275 + ],
1276 + ]
1277 + );
1280 1278
1281 - $this->end_controls_tab();
1279 + $this->end_controls_tab();
1282 1280
1283 - $this->end_controls_tabs();
1281 + $this->end_controls_tabs();
1284 1282
1285 - $this->add_group_control(
1286 - Group_Control_Typography::get_type(),
1287 - [
1288 - 'name' => 'title_typography',
1289 - 'selector' => '{{WRAPPER}} .ui-e-title',
1290 - ]
1291 - );
1292 1283
1293 - $this->end_controls_section();
1284 + $this->add_responsive_control(
1285 + 'title_bottom_space',
1286 + [
1287 + 'label' => esc_html__('Spacing', 'uicore-elements'),
1288 + 'type' => Controls_Manager::SLIDER,
1289 + 'range' => [
1290 + 'px' => [
1291 + 'min' => 0,
1292 + 'max' => 100,
1293 + ],
1294 + ],
1295 + 'separator' => 'before',
1296 + 'default' => [
1297 + 'unit' => 'px',
1298 + 'size' => 0,
1299 + ],
1300 + 'selectors' => [
1301 + '{{WRAPPER}} .ui-e-title' => 'margin-bottom: {{SIZE}}{{UNIT}} !important;',
1302 + ],
1303 + ]
1304 + );
1294 1305
1295 - $this->start_controls_section(
1296 - 'section_style_sub_title',
1297 - [
1298 - 'label' => esc_html__('Subtitle', 'uicore-elements'),
1299 - 'tab' => Controls_Manager::TAB_STYLE,
1300 - 'condition' => [
1301 - 'sub_title_text!' => '',
1302 - ],
1303 - ]
1304 - );
1306 + $this->add_group_control(
1307 + Group_Control_Typography::get_type(),
1308 + [
1309 + 'name' => 'title_typography',
1310 + 'selector' => '{{WRAPPER}} .ui-e-title',
1311 + ]
1312 + );
1305 1313
1306 - $this->start_controls_tabs('tabs_sub_title_style');
1314 + $this->end_controls_section();
1307 1315
1308 - $this->start_controls_tab(
1309 - 'tab_sub_title_style_normal',
1310 - [
1311 - 'label' => esc_html__('Normal', 'uicore-elements'),
1312 - ]
1313 - );
1316 + $this->start_controls_section(
1317 + 'section_style_sub_title',
1318 + [
1319 + 'label' => esc_html__('Subtitle', 'uicore-elements'),
1320 + 'tab' => Controls_Manager::TAB_STYLE,
1321 + 'condition' => [
1322 + 'sub_title_text!' => '',
1323 + ],
1324 + ]
1325 + );
1314 1326
1315 - $this->add_responsive_control(
1316 - 'sub_title_bottom_space',
1317 - [
1318 - 'label' => esc_html__('Spacing', 'uicore-elements'),
1319 - 'type' => Controls_Manager::SLIDER,
1320 - 'range' => [
1321 - 'px' => [
1322 - 'min' => 0,
1323 - 'max' => 100,
1324 - ],
1325 - ],
1326 - 'default' => [
1327 - 'unit' => 'px',
1328 - 'size' => 20,
1329 - ],
1330 - 'selectors' => [
1331 - '{{WRAPPER}} .ui-e-subtitle' => 'margin-bottom: {{SIZE}}{{UNIT}} !important;',
1332 - ],
1333 - ]
1334 - );
1327 + $this->start_controls_tabs('tabs_sub_title_style');
1335 1328
1336 - $this->add_control(
1337 - 'sub_title_color',
1338 - [
1339 - 'label' => esc_html__('Color', 'uicore-elements'),
1340 - 'type' => Controls_Manager::COLOR,
1341 - 'selectors' => [
1342 - '{{WRAPPER}} .ui-e-subtitle' => 'color: {{VALUE}};',
1343 - ],
1344 - ]
1345 - );
1329 + $this->start_controls_tab(
1330 + 'tab_sub_title_style_normal',
1331 + [
1332 + 'label' => esc_html__('Normal', 'uicore-elements'),
1333 + ]
1334 + );
1346 1335
1347 - $this->end_controls_tab();
1336 + $this->add_control(
1337 + 'sub_title_color',
1338 + [
1339 + 'label' => esc_html__('Color', 'uicore-elements'),
1340 + 'type' => Controls_Manager::COLOR,
1341 + 'selectors' => [
1342 + '{{WRAPPER}} .ui-e-subtitle' => 'color: {{VALUE}};',
1343 + ],
1344 + ]
1345 + );
1348 1346
1349 - $this->start_controls_tab(
1350 - 'tab_sub_title_style_hover',
1351 - [
1352 - 'label' => esc_html__('Hover', 'uicore-elements'),
1353 - ]
1354 - );
1347 + $this->end_controls_tab();
1355 1348
1356 - $this->add_control(
1357 - 'sub_title_color_hover',
1358 - [
1359 - 'label' => esc_html__('Color', 'uicore-elements'),
1360 - 'type' => Controls_Manager::COLOR,
1361 - 'selectors' => [
1362 - '{{WRAPPER}}:hover .ui-e-subtitle' => 'color: {{VALUE}};',
1363 - ],
1364 - ]
1365 - );
1349 + $this->start_controls_tab(
1350 + 'tab_sub_title_style_hover',
1351 + [
1352 + 'label' => esc_html__('Hover', 'uicore-elements'),
1353 + ]
1354 + );
1366 1355
1367 - $this->end_controls_tab();
1356 + $this->add_control(
1357 + 'sub_title_color_hover',
1358 + [
1359 + 'label' => esc_html__('Color', 'uicore-elements'),
1360 + 'type' => Controls_Manager::COLOR,
1361 + 'selectors' => [
1362 + '{{WRAPPER}}:hover .ui-e-subtitle' => 'color: {{VALUE}};',
1363 + ],
1364 + ]
1365 + );
1368 1366
1369 - $this->end_controls_tabs();
1367 + $this->end_controls_tab();
1370 1368
1371 - $this->add_group_control(
1372 - Group_Control_Typography::get_type(),
1373 - [
1374 - 'name' => 'sub_title_typography',
1375 - 'selector' => '{{WRAPPER}} .ui-e-subtitle',
1376 - ]
1377 - );
1369 + $this->end_controls_tabs();
1378 1370
1379 - $this->end_controls_section();
1371 + $this->add_responsive_control(
1372 + 'sub_title_bottom_space',
1373 + [
1374 + 'label' => esc_html__('Spacing', 'uicore-elements'),
1375 + 'type' => Controls_Manager::SLIDER,
1376 + 'range' => [
1377 + 'px' => [
1378 + 'min' => 0,
1379 + 'max' => 100,
1380 + ],
1381 + ],
1382 + 'separator' => 'before',
1383 + 'default' => [
1384 + 'unit' => 'px',
1385 + 'size' => 20,
1386 + ],
1387 + 'selectors' => [
1388 + '{{WRAPPER}} .ui-e-subtitle' => 'margin-bottom: {{SIZE}}{{UNIT}} !important;',
1389 + ],
1390 + ]
1391 + );
1380 1392
1381 - $this->start_controls_section(
1382 - 'section_style_description',
1383 - [
1384 - 'label' => esc_html__('Description', 'uicore-elements'),
1385 - 'tab' => Controls_Manager::TAB_STYLE,
1386 - ]
1387 - );
1393 + $this->add_group_control(
1394 + Group_Control_Typography::get_type(),
1395 + [
1396 + 'name' => 'sub_title_typography',
1397 + 'selector' => '{{WRAPPER}} .ui-e-subtitle',
1398 + ]
1399 + );
1388 1400
1389 - $this->start_controls_tabs('tabs_description_style');
1401 + $this->end_controls_section();
1390 1402
1391 - $this->start_controls_tab(
1392 - 'tab_description_style_normal',
1393 - [
1394 - 'label' => esc_html__('Normal', 'uicore-elements'),
1395 - ]
1396 - );
1403 + $this->start_controls_section(
1404 + 'section_style_description',
1405 + [
1406 + 'label' => esc_html__('Description', 'uicore-elements'),
1407 + 'tab' => Controls_Manager::TAB_STYLE,
1408 + ]
1409 + );
1397 1410
1398 - $this->add_responsive_control(
1399 - 'description_bottom_space',
1400 - [
1401 - 'label' => esc_html__('Spacing', 'uicore-elements'),
1402 - 'type' => Controls_Manager::SLIDER,
1403 - 'default' => [
1404 - 'unit' => 'px',
1405 - 'size' => 0,
1406 - ],
1407 - 'selectors' => [
1408 - '{{WRAPPER}} .ui-e-description' => 'margin-bottom: {{SIZE}}{{UNIT}} !important;',
1409 - ],
1410 - ]
1411 - );
1411 + $this->start_controls_tabs('tabs_description_style');
1412 1412
1413 - $this->add_control(
1414 - 'description_color',
1415 - [
1416 - 'label' => esc_html__('Color', 'uicore-elements'),
1417 - 'type' => Controls_Manager::COLOR,
1418 - 'selectors' => [
1419 - '{{WRAPPER}} .ui-e-description' => 'color: {{VALUE}};',
1420 - ],
1421 - ]
1422 - );
1413 + $this->start_controls_tab(
1414 + 'tab_description_style_normal',
1415 + [
1416 + 'label' => esc_html__('Normal', 'uicore-elements'),
1417 + ]
1418 + );
1423 1419
1424 - $this->end_controls_tab();
1420 + $this->add_control(
1421 + 'description_color',
1422 + [
1423 + 'label' => esc_html__('Color', 'uicore-elements'),
1424 + 'type' => Controls_Manager::COLOR,
1425 + 'selectors' => [
1426 + '{{WRAPPER}} .ui-e-description' => 'color: {{VALUE}};',
1427 + ],
1428 + ]
1429 + );
1425 1430
1426 - $this->start_controls_tab(
1427 - 'tab_description_style_hover',
1428 - [
1429 - 'label' => esc_html__('Hover', 'uicore-elements'),
1430 - ]
1431 - );
1431 + $this->end_controls_tab();
1432 1432
1433 - $this->add_control(
1434 - 'description_color_hover',
1435 - [
1436 - 'label' => esc_html__('Color', 'uicore-elements'),
1437 - 'type' => Controls_Manager::COLOR,
1438 - 'selectors' => [
1439 - '{{WRAPPER}}:hover .ui-e-description' => 'color: {{VALUE}};',
1440 - ],
1441 - ]
1442 - );
1433 + $this->start_controls_tab(
1434 + 'tab_description_style_hover',
1435 + [
1436 + 'label' => esc_html__('Hover', 'uicore-elements'),
1437 + ]
1438 + );
1443 1439
1444 - $this->end_controls_tab();
1440 + $this->add_control(
1441 + 'description_color_hover',
1442 + [
1443 + 'label' => esc_html__('Color', 'uicore-elements'),
1444 + 'type' => Controls_Manager::COLOR,
1445 + 'selectors' => [
1446 + '{{WRAPPER}}:hover .ui-e-description' => 'color: {{VALUE}};',
1447 + ],
1448 + ]
1449 + );
1445 1450
1446 - $this->end_controls_tabs();
1451 + $this->end_controls_tab();
1447 1452
1448 - $this->add_group_control(
1449 - Group_Control_Typography::get_type(),
1450 - [
1451 - 'name' => 'description_typography',
1452 - 'selector' => '{{WRAPPER}} .ui-e-description',
1453 - ]
1454 - );
1453 + $this->end_controls_tabs();
1455 1454
1456 - $this->end_controls_section();
1455 + $this->add_responsive_control(
1456 + 'description_bottom_space',
1457 + [
1458 + 'label' => esc_html__('Spacing', 'uicore-elements'),
1459 + 'type' => Controls_Manager::SLIDER,
1460 + 'default' => [
1461 + 'unit' => 'px',
1462 + 'size' => 0,
1463 + ],
1464 + 'separator' => 'before',
1465 + 'selectors' => [
1466 + '{{WRAPPER}} .ui-e-description' => 'margin-bottom: {{SIZE}}{{UNIT}} !important;',
1467 + ],
1468 + ]
1469 + );
1457 1470
1458 - $this->start_controls_section(
1459 - 'section_style_readmore',
1460 - [
1461 - 'label' => esc_html__('Read More', 'uicore-elements'),
1462 - 'tab' => Controls_Manager::TAB_STYLE,
1463 - 'condition' => [
1464 - 'readmore' => 'yes',
1465 - ],
1466 - ]
1467 - );
1471 + $this->add_group_control(
1472 + Group_Control_Typography::get_type(),
1473 + [
1474 + 'name' => 'description_typography',
1475 + 'selector' => '{{WRAPPER}} .ui-e-description',
1476 + ]
1477 + );
1468 1478
1469 - $this->start_controls_tabs('tabs_readmore_style');
1479 + $this->end_controls_section();
1470 1480
1471 - $this->start_controls_tab(
1472 - 'tab_readmore_normal',
1473 - [
1474 - 'label' => esc_html__('Normal', 'uicore-elements'),
1475 - ]
1476 - );
1481 + $this->start_controls_section(
1482 + 'section_style_readmore',
1483 + [
1484 + 'label' => esc_html__('Read More', 'uicore-elements'),
1485 + 'tab' => Controls_Manager::TAB_STYLE,
1486 + 'condition' => [
1487 + 'readmore' => 'yes',
1488 + ],
1489 + ]
1490 + );
1477 1491
1478 - $this->add_control(
1479 - 'readmore_text_color',
1480 - [
1481 - 'label' => esc_html__('Color', 'uicore-elements'),
1482 - 'type' => Controls_Manager::COLOR,
1483 - 'selectors' => [
1484 - '{{WRAPPER}} .ui-e-readmore' => 'color: {{VALUE}};',
1485 - '{{WRAPPER}} .ui-e-readmore svg' => 'fill: {{VALUE}};',
1486 - ],
1487 - ]
1488 - );
1492 + $this->start_controls_tabs('tabs_readmore_style');
1489 1493
1490 - $this->add_group_control(
1491 - Group_Control_Background::get_type(),
1492 - [
1493 - 'name' => 'readmore_background',
1494 - 'selector' => '{{WRAPPER}} .ui-e-readmore',
1495 - 'separator' => 'before',
1496 - ]
1497 - );
1494 + $this->start_controls_tab(
1495 + 'tab_readmore_normal',
1496 + [
1497 + 'label' => esc_html__('Normal', 'uicore-elements'),
1498 + ]
1499 + );
1498 1500
1499 - $this->add_group_control(
1500 - Group_Control_Border::get_type(),
1501 - [
1502 - 'name' => 'readmore_border',
1503 - 'placeholder' => '1px',
1504 - 'separator' => 'before',
1505 - 'default' => '1px',
1506 - 'selector' => '{{WRAPPER}} .ui-e-readmore'
1507 - ]
1508 - );
1501 + $this->add_group_control(
1502 + Group_Control_Typography::get_type(),
1503 + [
1504 + 'name' => 'readmore_typography',
1505 + 'selector' => '{{WRAPPER}} .ui-e-readmore',
1506 + ]
1507 + );
1509 1508
1510 - $this->add_responsive_control(
1511 - 'readmore_radius',
1512 - [
1513 - 'label' => esc_html__('Border Radius', 'uicore-elements'),
1514 - 'type' => Controls_Manager::DIMENSIONS,
1515 - 'size_units' => ['px', '%'],
1516 - 'separator' => 'after',
1517 - 'selectors' => [
1518 - '{{WRAPPER}} .ui-e-readmore' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1519 - ],
1520 - ]
1521 - );
1509 + $this->add_control(
1510 + 'readmore_text_color',
1511 + [
1512 + 'label' => esc_html__('Color', 'uicore-elements'),
1513 + 'type' => Controls_Manager::COLOR,
1514 + 'selectors' => [
1515 + '{{WRAPPER}} .ui-e-readmore' => 'color: {{VALUE}};',
1516 + '{{WRAPPER}} .ui-e-readmore svg' => 'fill: {{VALUE}};',
1517 + ],
1518 + ]
1519 + );
1522 1520
1523 - $this->add_group_control(
1524 - Group_Control_Box_Shadow::get_type(),
1525 - [
1526 - 'name' => 'readmore_shadow',
1527 - 'selector' => '{{WRAPPER}} .ui-e-readmore',
1528 - ]
1529 - );
1521 + $this->add_group_control(
1522 + Group_Control_Background::get_type(),
1523 + [
1524 + 'name' => 'readmore_background',
1525 + 'selector' => '{{WRAPPER}} .ui-e-readmore',
1526 + ]
1527 + );
1530 1528
1531 - $this->add_responsive_control(
1532 - 'readmore_padding',
1533 - [
1534 - 'label' => esc_html__('Padding', 'uicore-elements'),
1535 - 'type' => Controls_Manager::DIMENSIONS,
1536 - 'size_units' => ['px', 'em', '%'],
1537 - 'selectors' => [
1538 - '{{WRAPPER}} .ui-e-readmore' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1539 - ],
1540 - ]
1541 - );
1529 + $this->add_group_control(
1530 + Group_Control_Border::get_type(),
1531 + [
1532 + 'name' => 'readmore_border',
1533 + 'placeholder' => '1px',
1534 + 'default' => '1px',
1535 + 'selector' => '{{WRAPPER}} .ui-e-readmore'
1536 + ]
1537 + );
1542 1538
1543 - $this->add_group_control(
1544 - Group_Control_Typography::get_type(),
1545 - [
1546 - 'name' => 'readmore_typography',
1547 - 'selector' => '{{WRAPPER}} .ui-e-readmore',
1548 - ]
1549 - );
1539 + $this->add_responsive_control(
1540 + 'readmore_radius',
1541 + [
1542 + 'label' => esc_html__('Border Radius', 'uicore-elements'),
1543 + 'type' => Controls_Manager::DIMENSIONS,
1544 + 'size_units' => ['px', '%'],
1545 + 'selectors' => [
1546 + '{{WRAPPER}} .ui-e-readmore' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1547 + ],
1548 + ]
1549 + );
1550 1550
1551 - $this->end_controls_tab();
1551 + $this->add_responsive_control(
1552 + 'readmore_padding',
1553 + [
1554 + 'label' => esc_html__('Padding', 'uicore-elements'),
1555 + 'type' => Controls_Manager::DIMENSIONS,
1556 + 'size_units' => ['px', 'em', '%'],
1557 + 'selectors' => [
1558 + '{{WRAPPER}} .ui-e-readmore' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1559 + ],
1560 + ]
1561 + );
1552 1562
1553 - $this->start_controls_tab(
1554 - 'tab_readmore_hover',
1555 - [
1556 - 'label' => esc_html__('Hover', 'uicore-elements'),
1557 - ]
1558 - );
1563 + $this->add_group_control(
1564 + Group_Control_Box_Shadow::get_type(),
1565 + [
1566 + 'name' => 'readmore_shadow',
1567 + 'selector' => '{{WRAPPER}} .ui-e-readmore',
1568 + ]
1569 + );
1559 1570
1560 - $this->add_control(
1561 - 'readmore_hover_text_color',
1562 - [
1563 - 'label' => esc_html__('Color', 'uicore-elements'),
1564 - 'type' => Controls_Manager::COLOR,
1565 - 'selectors' => [
1566 - '{{WRAPPER}} .ui-e-readmore:hover' => 'color: {{VALUE}};',
1567 - '{{WRAPPER}} .ui-e-readmore:hover svg' => 'fill: {{VALUE}};',
1568 - ],
1569 - ]
1570 - );
1571 + $this->end_controls_tab();
1571 1572
1572 - $this->add_group_control(
1573 - Group_Control_Background::get_type(),
1574 - [
1575 - 'name' => 'readmore_hover_background',
1576 - 'selector' => '{{WRAPPER}} .ui-e-readmore:hover',
1577 - 'separator' => 'before',
1578 - ]
1579 - );
1573 + $this->start_controls_tab(
1574 + 'tab_readmore_box_hover',
1575 + [
1576 + 'label' => esc_html__('Box hover', 'uicore-elements'),
1577 + ]
1578 + );
1580 1579
1581 - $this->add_control(
1582 - 'readmore_hover_border_color',
1583 - [
1584 - 'label' => esc_html__('Border Color', 'uicore-elements'),
1585 - 'type' => Controls_Manager::COLOR,
1586 - 'selectors' => [
1587 - '{{WRAPPER}} .ui-e-readmore:hover' => 'border-color: {{VALUE}};',
1588 - ],
1589 - 'condition' => [
1590 - 'readmore_border_border!' => ''
1591 - ]
1592 - ]
1593 - );
1580 + $this->add_control(
1581 + 'readmore_box_hover_text_color',
1582 + [
1583 + 'label' => esc_html__('Color', 'uicore-elements'),
1584 + 'type' => Controls_Manager::COLOR,
1585 + 'selectors' => [
1586 + '{{WRAPPER}}:hover .ui-e-readmore' => 'color: {{VALUE}};',
1587 + '{{WRAPPER}}:hover .ui-e-readmore svg' => 'fill: {{VALUE}};',
1588 + ],
1589 + ]
1590 + );
1594 1591
1595 - $this->add_group_control(
1596 - Group_Control_Box_Shadow::get_type(),
1597 - [
1598 - 'name' => 'readmore_hover_shadow',
1599 - 'selector' => '{{WRAPPER}} .ui-e-readmore:hover',
1600 - ]
1601 - );
1592 + $this->add_group_control(
1593 + Group_Control_Background::get_type(),
1594 + [
1595 + 'name' => 'readmore_box_hover_background',
1596 + 'selector' => '{{WRAPPER}}:hover .ui-e-readmore',
1597 + ]
1598 + );
1602 1599
1603 - $this->add_control(
1604 - 'readmore_hover_animation',
1605 - [
1606 - 'label' => esc_html__('Hover Animation', 'uicore-elements'),
1607 - 'type' => Controls_Manager::HOVER_ANIMATION,
1608 - ]
1609 - );
1600 + $this->add_control(
1601 + 'readmore_box_hover_border_color',
1602 + [
1603 + 'label' => esc_html__('Border Color', 'uicore-elements'),
1604 + 'type' => Controls_Manager::COLOR,
1605 + 'selectors' => [
1606 + '{{WRAPPER}}:hover .ui-e-readmore' => 'border-color: {{VALUE}};',
1607 + ],
1608 + 'condition' => [
1609 + 'readmore_border_border!' => ''
1610 + ]
1611 + ]
1612 + );
1610 1613
1611 - $this->end_controls_tab();
1614 + $this->add_group_control(
1615 + Group_Control_Box_Shadow::get_type(),
1616 + [
1617 + 'name' => 'readmore_box_hover_shadow',
1618 + 'selector' => '{{WRAPPER}}:hover .ui-e-readmore',
1619 + ]
1620 + );
1612 1621
1613 - $this->end_controls_tabs();
1622 + $this->end_controls_tab();
1614 1623
1615 - $this->end_controls_section();
1624 + $this->start_controls_tab(
1625 + 'tab_readmore_hover',
1626 + [
1627 + 'label' => esc_html__('Button hover', 'uicore-elements'),
1628 + ]
1629 + );
1616 1630
1617 - $this->start_controls_section(
1618 - 'section_style_badge',
1619 - [
1620 - 'label' => esc_html__('Badge', 'uicore-elements'),
1621 - 'tab' => Controls_Manager::TAB_STYLE,
1622 - 'condition' => [
1623 - 'badge' => 'yes',
1624 - ],
1625 - ]
1626 - );
1631 + $this->add_control(
1632 + 'readmore_hover_text_color',
1633 + [
1634 + 'label' => esc_html__('Color', 'uicore-elements'),
1635 + 'type' => Controls_Manager::COLOR,
1636 + 'selectors' => [
1637 + '{{WRAPPER}} .ui-e-readmore:hover' => 'color: {{VALUE}};',
1638 + '{{WRAPPER}} .ui-e-readmore:hover svg' => 'fill: {{VALUE}};',
1639 + ],
1640 + ]
1641 + );
1627 1642
1628 - $this->add_control(
1629 - 'badge_position',
1630 - [
1631 - 'label' => esc_html__('Position', 'uicore-elements'),
1632 - 'type' => Controls_Manager::SELECT,
1633 - 'default' => 'start right',
1634 - 'options' => [
1635 - 'start left' => esc_html__('Top Left', 'uicore-elements'),
1636 - 'start center' => esc_html__('Top Center', 'uicore-elements'),
1637 - 'start right' => esc_html__('Top Right', 'uicore-elements'),
1638 - 'center ' => esc_html__('Center', 'uicore-elements'),
1639 - 'center left' => esc_html__('Center Left', 'uicore-elements'),
1640 - 'center right' => esc_html__('Center Right', 'uicore-elements'),
1641 - 'end left' => esc_html__('Bottom Left', 'uicore-elements'),
1642 - 'end center' => esc_html__('Bottom Center', 'uicore-elements'),
1643 - 'end right' => esc_html__('Bottom Right', 'uicore-elements'),
1644 - ],
1645 - 'selectors' => [
1646 - '{{WRAPPER}} .ui-e-badge-wrp' => '--ui-e-badge-position: {{VALUE}}',
1647 - ]
1648 - ]
1649 - );
1643 + $this->add_group_control(
1644 + Group_Control_Background::get_type(),
1645 + [
1646 + 'name' => 'readmore_hover_background',
1647 + 'selector' => '{{WRAPPER}} .ui-e-readmore:hover',
1648 + ]
1649 + );
1650 1650
1651 - $this->add_control(
1652 - 'badge_text_color',
1653 - [
1654 - 'label' => esc_html__('Text Color', 'uicore-elements'),
1655 - 'type' => Controls_Manager::COLOR,
1656 - 'selectors' => [
1657 - '{{WRAPPER}} .ui-e-badge' => 'color: {{VALUE}};',
1658 - ],
1659 - ]
1660 - );
1651 + $this->add_control(
1652 + 'readmore_hover_border_color',
1653 + [
1654 + 'label' => esc_html__('Border Color', 'uicore-elements'),
1655 + 'type' => Controls_Manager::COLOR,
1656 + 'selectors' => [
1657 + '{{WRAPPER}} .ui-e-readmore:hover' => 'border-color: {{VALUE}};',
1658 + ],
1659 + 'condition' => [
1660 + 'readmore_border_border!' => ''
1661 + ]
1662 + ]
1663 + );
1661 1664
1662 - $this->add_group_control(
1663 - Group_Control_Background::get_type(),
1664 - [
1665 - 'name' => 'badge_background',
1666 - 'selector' => '{{WRAPPER}} .ui-e-badge',
1667 - 'separator' => 'before',
1668 - ]
1669 - );
1665 + $this->add_group_control(
1666 + Group_Control_Box_Shadow::get_type(),
1667 + [
1668 + 'name' => 'readmore_hover_shadow',
1669 + 'selector' => '{{WRAPPER}} .ui-e-readmore:hover',
1670 + ]
1671 + );
1670 1672
1671 - $this->add_group_control(
1672 - Group_Control_Border::get_type(),
1673 - [
1674 - 'name' => 'badge_border',
1675 - 'placeholder' => '1px',
1676 - 'separator' => 'before',
1677 - 'default' => '1px',
1678 - 'selector' => '{{WRAPPER}} .ui-e-badge'
1679 - ]
1680 - );
1673 + $this->add_control(
1674 + 'readmore_hover_animation',
1675 + [
1676 + 'label' => esc_html__('Hover Animation', 'uicore-elements'),
1677 + 'type' => Controls_Manager::HOVER_ANIMATION,
1678 + ]
1679 + );
1681 1680
1682 - $this->add_responsive_control(
1683 - 'badge_radius',
1684 - [
1685 - 'label' => esc_html__('Border Radius', 'uicore-elements'),
1686 - 'type' => Controls_Manager::DIMENSIONS,
1687 - 'size_units' => ['px', '%'],
1688 - 'default' => [
1689 - 'top' => 10,
1690 - 'right' => 10,
1691 - 'bottom' => 10,
1692 - 'left' => 10,
1693 - 'unit' => 'px',
1694 - 'isLinked' => true,
1695 - ],
1696 - 'separator' => 'after',
1697 - 'selectors' => [
1698 - '{{WRAPPER}} .ui-e-badge' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1699 - ],
1700 - ]
1701 - );
1681 + $this->end_controls_tab();
1702 1682
1703 - $this->add_group_control(
1704 - Group_Control_Box_Shadow::get_type(),
1705 - [
1706 - 'name' => 'badge_shadow',
1707 - 'selector' => '{{WRAPPER}} .ui-e-badge',
1708 - ]
1709 - );
1683 + $this->end_controls_tabs();
1710 1684
1711 - $this->add_responsive_control(
1712 - 'badge_padding',
1713 - [
1714 - 'label' => esc_html__('Padding', 'uicore-elements'),
1715 - 'type' => Controls_Manager::DIMENSIONS,
1716 - 'size_units' => ['px', 'em', '%'],
1717 - 'default' => [
1685 + $this->end_controls_section();
1686 +
1687 + $this->start_controls_section(
1688 + 'section_style_badge',
1689 + [
1690 + 'label' => esc_html__('Badge', 'uicore-elements'),
1691 + 'tab' => Controls_Manager::TAB_STYLE,
1692 + 'condition' => [
1693 + 'badge' => 'yes',
1694 + ],
1695 + ]
1696 + );
1697 +
1698 + $this->add_control(
1699 + 'badge_position',
1700 + [
1701 + 'label' => esc_html__('Position', 'uicore-elements'),
1702 + 'type' => Controls_Manager::SELECT,
1703 + 'default' => 'start right',
1704 + 'options' => [
1705 + 'start left' => esc_html__('Top Left', 'uicore-elements'),
1706 + 'start center' => esc_html__('Top Center', 'uicore-elements'),
1707 + 'start right' => esc_html__('Top Right', 'uicore-elements'),
1708 + 'center ' => esc_html__('Center', 'uicore-elements'),
1709 + 'center left' => esc_html__('Center Left', 'uicore-elements'),
1710 + 'center right' => esc_html__('Center Right', 'uicore-elements'),
1711 + 'end left' => esc_html__('Bottom Left', 'uicore-elements'),
1712 + 'end center' => esc_html__('Bottom Center', 'uicore-elements'),
1713 + 'end right' => esc_html__('Bottom Right', 'uicore-elements'),
1714 + ],
1715 + 'selectors' => [
1716 + '{{WRAPPER}} .ui-e-badge-wrp' => '--ui-e-badge-position: {{VALUE}}',
1717 + ]
1718 + ]
1719 + );
1720 +
1721 + $this->add_responsive_control(
1722 + 'badge_horizontal_offset',
1723 + [
1724 + 'label' => esc_html__('Horizontal Offset', 'uicore-elements'),
1725 + 'type' => Controls_Manager::SLIDER,
1726 + 'default' => [
1727 + 'size' => 0,
1728 + ],
1729 + 'tablet_default' => [
1730 + 'size' => 0,
1731 + ],
1732 + 'mobile_default' => [
1733 + 'size' => 0,
1734 + ],
1735 + 'range' => [
1736 + 'px' => [
1737 + 'min' => -300,
1738 + 'step' => 2,
1739 + 'max' => 300,
1740 + ],
1741 + ],
1742 + 'selectors' => [
1743 + '{{WRAPPER}} .ui-e-badge-wrp' => '--ui-e-badge-horizontal-off: {{SIZE}}px;'
1744 + ],
1745 + ]
1746 + );
1747 +
1748 + $this->add_responsive_control(
1749 + 'badge_vertical_offset',
1750 + [
1751 + 'label' => esc_html__('Vertical Offset', 'uicore-elements'),
1752 + 'type' => Controls_Manager::SLIDER,
1753 + 'default' => [
1754 + 'size' => 0,
1755 + ],
1756 + 'tablet_default' => [
1757 + 'size' => 0,
1758 + ],
1759 + 'mobile_default' => [
1760 + 'size' => 0,
1761 + ],
1762 + 'range' => [
1763 + 'px' => [
1764 + 'min' => -300,
1765 + 'step' => 2,
1766 + 'max' => 300,
1767 + ],
1768 + ],
1769 + 'selectors' => [
1770 + '{{WRAPPER}} .ui-e-badge-wrp' => '--ui-e-badge-vertical-off: {{SIZE}}px;',
1771 + ],
1772 + ]
1773 + );
1774 +
1775 + $this->add_responsive_control(
1776 + 'badge_rotate',
1777 + [
1778 + 'label' => esc_html__('Rotate', 'uicore-elements'),
1779 + 'type' => Controls_Manager::SLIDER,
1780 + 'devices' => ['desktop', 'tablet', 'mobile'],
1781 + 'default' => [
1782 + 'size' => 0,
1783 + ],
1784 + 'tablet_default' => [
1785 + 'size' => 0,
1786 + ],
1787 + 'mobile_default' => [
1788 + 'size' => 0,
1789 + ],
1790 + 'range' => [
1791 + 'px' => [
1792 + 'min' => -360,
1793 + 'max' => 360,
1794 + 'step' => 5,
1795 + ],
1796 + ],
1797 + 'selectors' => [
1798 + '{{WRAPPER}} .ui-e-badge' => 'rotate: {{SIZE}}deg;'
1799 + ],
1800 + ]
1801 + );
1802 +
1803 + $this->start_controls_tabs('tabs_badge');
1804 +
1805 + $this->start_controls_tab(
1806 + 'tab_badge_style_normal',
1807 + [
1808 + 'label' => esc_html__('Normal', 'uicore-elements'),
1809 + ]
1810 + );
1811 +
1812 + $this->add_group_control(
1813 + Group_Control_Typography::get_type(),
1814 + [
1815 + 'name' => 'badge_typography',
1816 + 'selector' => '{{WRAPPER}} .ui-e-badge',
1817 + 'fields_options' => [
1818 + 'font_size' => [
1819 + 'default' => [
1820 + 'unit' => 'px',
1821 + 'size' => 12,
1822 + ],
1823 + ],
1824 + 'line_height' => [
1825 + 'default' => [
1826 + 'unit' => 'em',
1827 + 'size' => 1,
1828 + ],
1829 + ],
1830 + ],
1831 + ]
1832 + );
1833 +
1834 + $this->add_control(
1835 + 'badge_text_color',
1836 + [
1837 + 'label' => esc_html__('Text Color', 'uicore-elements'),
1838 + 'type' => Controls_Manager::COLOR,
1839 + 'selectors' => [
1840 + '{{WRAPPER}} .ui-e-badge' => 'color: {{VALUE}};',
1841 + ],
1842 + ]
1843 + );
1844 +
1845 + $this->add_group_control(
1846 + Group_Control_Background::get_type(),
1847 + [
1848 + 'name' => 'badge_background',
1849 + 'selector' => '{{WRAPPER}} .ui-e-badge',
1850 + ]
1851 + );
1852 +
1853 + $this->add_group_control(
1854 + Group_Control_Border::get_type(),
1855 + [
1856 + 'name' => 'badge_border',
1857 + 'placeholder' => '1px',
1858 + 'default' => '1px',
1859 + 'selector' => '{{WRAPPER}} .ui-e-badge'
1860 + ]
1861 + );
1862 +
1863 + $this->add_responsive_control(
1864 + 'badge_radius',
1865 + [
1866 + 'label' => esc_html__('Border Radius', 'uicore-elements'),
1867 + 'type' => Controls_Manager::DIMENSIONS,
1868 + 'size_units' => ['px', '%'],
1869 + 'default' => [
1870 + 'top' => 10,
1871 + 'right' => 10,
1872 + 'bottom' => 10,
1873 + 'left' => 10,
1874 + 'unit' => 'px',
1875 + 'isLinked' => true,
1876 + ],
1877 + 'selectors' => [
1878 + '{{WRAPPER}} .ui-e-badge' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1879 + ],
1880 + ]
1881 + );
1882 +
1883 + $this->add_responsive_control(
1884 + 'badge_padding',
1885 + [
1886 + 'label' => esc_html__('Padding', 'uicore-elements'),
1887 + 'type' => Controls_Manager::DIMENSIONS,
1888 + 'size_units' => ['px', 'em', '%'],
1889 + 'default' => [
1718 1890 'top' => '8',
1719 1891 'right' => '12',
1720 1892 'bottom' => '8',
1721 1893 'left' => '12',
@@ -1721,440 +1893,425 @@
1721 1893 'left' => '12',
1722 1894 'unit' => 'px',
1723 1895 'isLinked' => false,
1724 1896 ],
1725 - 'selectors' => [
1726 - '{{WRAPPER}} .ui-e-badge' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1727 - ],
1728 - ]
1729 - );
1897 + 'selectors' => [
1898 + '{{WRAPPER}} .ui-e-badge' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1899 + ],
1900 + ]
1901 + );
1730 1902
1731 - $this->add_group_control(
1732 - Group_Control_Typography::get_type(),
1733 - [
1734 - 'name' => 'badge_typography',
1735 - 'selector' => '{{WRAPPER}} .ui-e-badge',
1736 - ]
1737 - );
1903 + $this->add_group_control(
1904 + Group_Control_Box_Shadow::get_type(),
1905 + [
1906 + 'name' => 'badge_shadow',
1907 + 'selector' => '{{WRAPPER}} .ui-e-badge',
1908 + ]
1909 + );
1738 1910
1739 - $this->add_responsive_control(
1740 - 'badge_horizontal_offset',
1741 - [
1742 - 'label' => esc_html__('Horizontal Offset', 'uicore-elements'),
1743 - 'type' => Controls_Manager::SLIDER,
1744 - 'default' => [
1745 - 'size' => 0,
1746 - ],
1747 - 'tablet_default' => [
1748 - 'size' => 0,
1749 - ],
1750 - 'mobile_default' => [
1751 - 'size' => 0,
1752 - ],
1753 - 'range' => [
1754 - 'px' => [
1755 - 'min' => -300,
1756 - 'step' => 2,
1757 - 'max' => 300,
1758 - ],
1759 - ],
1760 - 'selectors' => [
1761 - '{{WRAPPER}} .ui-e-badge-wrp' => '--ui-e-badge-horizontal-off: {{SIZE}}px;'
1762 - ],
1763 - ]
1764 - );
1765 1911
1766 - $this->add_responsive_control(
1767 - 'badge_vertical_offset',
1768 - [
1769 - 'label' => esc_html__('Vertical Offset', 'uicore-elements'),
1770 - 'type' => Controls_Manager::SLIDER,
1771 - 'default' => [
1772 - 'size' => 0,
1773 - ],
1774 - 'tablet_default' => [
1775 - 'size' => 0,
1776 - ],
1777 - 'mobile_default' => [
1778 - 'size' => 0,
1779 - ],
1780 - 'range' => [
1781 - 'px' => [
1782 - 'min' => -300,
1783 - 'step' => 2,
1784 - 'max' => 300,
1785 - ],
1786 - ],
1787 - 'selectors' => [
1788 - '{{WRAPPER}} .ui-e-badge-wrp' => '--ui-e-badge-vertical-off: {{SIZE}}px;',
1789 - ],
1790 - ]
1791 - );
1912 + $this->end_controls_tab();
1792 1913
1793 - $this->add_responsive_control(
1794 - 'badge_rotate',
1795 - [
1796 - 'label' => esc_html__('Rotate', 'uicore-elements'),
1797 - 'type' => Controls_Manager::SLIDER,
1798 - 'devices' => ['desktop', 'tablet', 'mobile'],
1799 - 'default' => [
1800 - 'size' => 0,
1801 - ],
1802 - 'tablet_default' => [
1803 - 'size' => 0,
1804 - ],
1805 - 'mobile_default' => [
1806 - 'size' => 0,
1807 - ],
1808 - 'range' => [
1809 - 'px' => [
1810 - 'min' => -360,
1811 - 'max' => 360,
1812 - 'step' => 5,
1813 - ],
1814 - ],
1815 - 'selectors' => [
1816 - '{{WRAPPER}} .ui-e-badge' => 'rotate: {{SIZE}}deg;'
1817 - ],
1818 - ]
1819 - );
1914 + $this->start_controls_tab(
1915 + 'tab_badge_style_hover',
1916 + [
1917 + 'label' => esc_html__('Hover', 'uicore-elements'),
1918 + ]
1919 + );
1820 1920
1821 - $this->end_controls_section();
1921 + $this->add_control(
1922 + 'badge_text_hover_color',
1923 + [
1924 + 'label' => esc_html__('Text Color', 'uicore-elements'),
1925 + 'type' => Controls_Manager::COLOR,
1926 + 'selectors' => [
1927 + '{{WRAPPER}}:hover .ui-e-badge' => 'color: {{VALUE}};',
1928 + ],
1929 + ]
1930 + );
1822 1931
1823 - $this->start_controls_section(
1824 - 'section_animation',
1825 - [
1826 - 'label' => esc_html__('Animations', 'uicore-elements'),
1827 - 'tab' => Controls_Manager::TAB_STYLE,
1828 - ]
1829 - );
1932 + $this->add_group_control(
1933 + Group_Control_Background::get_type(),
1934 + [
1935 + 'name' => 'badge_hover_background',
1936 + 'selector' => '{{WRAPPER}}:hover .ui-e-badge',
1937 + ]
1938 + );
1830 1939
1831 - $this->add_control(
1832 - 'description_animation',
1833 - [
1834 - 'label' => esc_html__( 'Description Hover Animation', 'uicore-elements' ),
1835 - 'type' => \Elementor\Controls_Manager::SELECT,
1836 - 'default' => '',
1837 - 'options' => [
1838 - '' => esc_html__( 'None', 'uicore-elements' ),
1839 - 'ui-e-animation-description-show' => esc_html__( 'Show', 'uicore-elements' ),
1840 - ],
1841 - 'prefix_class' => '',
1842 - 'frontend_available' => true,
1843 - 'conditions' => [
1844 - 'relation' => 'or',
1845 - 'terms' => [
1846 - [
1847 - 'name' => 'position',
1848 - 'operator' => '==',
1849 - 'value' => 'top',
1850 - ],
1851 - [
1852 - 'relation' => 'and',
1853 - 'terms' => [
1854 - [
1855 - 'name' => 'position',
1856 - 'operator' => 'in',
1857 - 'value' => ['left', 'right'],
1858 - ],
1859 - [
1860 - 'name' => 'icon_inline',
1861 - 'operator' => '==',
1862 - 'value' => 'yes',
1863 - ],
1864 - ],
1865 - ],
1866 - ],
1867 - ],
1940 + $this->add_group_control(
1941 + Group_Control_Border::get_type(),
1942 + [
1943 + 'name' => 'badge_hover_border',
1944 + 'placeholder' => '1px',
1945 + 'default' => '1px',
1946 + 'selector' => '{{WRAPPER}}:hover .ui-e-badge'
1947 + ]
1948 + );
1868 1949
1869 - ]
1870 - );
1950 + $this->add_group_control(
1951 + Group_Control_Box_Shadow::get_type(),
1952 + [
1953 + 'name' => 'badge_hover_shadow',
1954 + 'selector' => '{{WRAPPER}}:hover .ui-e-badge',
1955 + ]
1956 + );
1871 1957
1872 - // Creates a prefix if has readmore button AND description animation. This allows us to apply some bottom space to the absolute flex-wrapper, keeping it above readmore
1873 - $this->add_control(
1874 - 'description_prefix',
1875 - [
1876 - 'label' => esc_html__( 'Prefix Class for Description with Readmore', 'uicore-elements' ),
1877 - 'type' => \Elementor\Controls_Manager::HIDDEN,
1878 - 'default' => 'readmore',
1879 - 'condition' => [
1880 - 'readmore' => 'yes',
1881 - 'description_animation' => 'ui-e-animation-description-show',
1882 - ],
1883 - 'prefix_class' => 'ui-e-has-',
1884 - ]
1885 - );
1958 + $this->end_controls_tab();
1886 1959
1887 - $this->add_control(
1888 - 'readmore_animation',
1889 - [
1890 - 'label' => esc_html__( 'Button Hover Animation', 'uicore-elements' ),
1891 - 'type' => \Elementor\Controls_Manager::SELECT,
1892 - 'default' => '',
1893 - 'options' => [
1894 - '' => esc_html__( 'None', 'uicore-elements' ),
1895 - 'ui-e-animation-rm-show' => esc_html__( 'Show', 'uicore-elements' ),
1896 - 'ui-e-animation-rm-ico' => esc_html__( 'Icon', 'uicore-elements' ),
1897 - ],
1898 - 'prefix_class' => '',
1899 - 'frontend_available' => true,
1900 - 'condition' => [
1901 - 'readmore' => 'yes',
1902 - 'position!' => 'bottom',
1903 - ]
1904 - ]
1905 - );
1960 + $this->end_controls_tabs();
1906 1961
1907 - $this->add_control(
1908 - 'icon_animation',
1909 - [
1910 - 'label' => esc_html__('Icon Hover Animation', 'uicore-elements'),
1911 - 'type' => Controls_Manager::SELECT,
1912 - 'prefix_class' => '',
1913 - 'default' => '',
1914 - 'options' => [
1915 - '' => esc_html__('None', 'uicore-elements'),
1916 - 'ui-e-animation-ico-float' => esc_html__('Icon Float', 'uicore-elements'),
1917 - 'ui-e-animation-ico-grow' => esc_html__('Background Circle', 'uicore-elements'),
1918 - 'ui-e-animation-ico-slide' => esc_html__('Background Slide', 'uicore-elements'),
1919 - ],
1920 - 'condition' => [
1921 - 'icon_type!' => 'none',
1922 - ]
1923 - ]
1924 - );
1962 + $this->end_controls_section();
1925 1963
1926 - $this->add_control(
1927 - 'widget_animation',
1928 - [
1929 - 'label' => esc_html__( 'Item Hover Animation', 'uicore-elements' ),
1930 - 'type' => \Elementor\Controls_Manager::SELECT,
1931 - 'default' => '',
1932 - 'options' => [
1933 - '' => esc_html__( 'None', 'uicore-elements' ),
1934 - 'ui-e-animation-widget-zoom' => esc_html__( 'Zoom', 'uicore-elements' ),
1935 - 'ui-e-animation-widget-translate' => esc_html__( 'Translate', 'uicore-elements' ),
1936 - ],
1937 - 'prefix_class' => '',
1938 - ]
1939 - );
1964 + $this->start_controls_section(
1965 + 'section_animation',
1966 + [
1967 + 'label' => esc_html__('Animations', 'uicore-elements'),
1968 + 'tab' => Controls_Manager::TAB_STYLE,
1969 + ]
1970 + );
1940 1971
1941 - $this->add_control(
1942 - 'widget_animation_zoom',
1943 - [
1944 - 'label' => esc_html__( 'Zoom scale', 'uicore-elements' ),
1945 - 'type' => \Elementor\Controls_Manager::SLIDER,
1946 - 'size_units' => ['px'],
1947 - 'range' => [
1948 - 'px' => [
1949 - 'min' => .8,
1950 - 'max' => 1.3,
1951 - 'step' => 0.01,
1952 - ],
1953 - ],
1954 - 'default' => [
1955 - 'unit' => 'px',
1956 - 'size' => 1.12,
1957 - ],
1958 - 'condition' =>[
1959 - 'widget_animation' => 'ui-e-animation-widget-zoom',
1960 - ],
1961 - 'selectors' => [
1962 - '{{WRAPPER}}' => '--ui-e-ico-box-widget-zoom: {{SIZE}}',
1963 - ],
1964 - ]
1965 - );
1972 + $this->add_control(
1973 + 'description_animation',
1974 + [
1975 + 'label' => esc_html__('Description Hover Animation', 'uicore-elements'),
1976 + 'type' => \Elementor\Controls_Manager::SELECT,
1977 + 'default' => '',
1978 + 'options' => [
1979 + '' => esc_html__('None', 'uicore-elements'),
1980 + 'ui-e-animation-description-show' => esc_html__('Show', 'uicore-elements'),
1981 + ],
1982 + 'prefix_class' => '',
1983 + 'frontend_available' => true,
1984 + 'conditions' => [
1985 + 'relation' => 'or',
1986 + 'terms' => [
1987 + [
1988 + 'name' => 'position',
1989 + 'operator' => '==',
1990 + 'value' => 'top',
1991 + ],
1992 + [
1993 + 'relation' => 'and',
1994 + 'terms' => [
1995 + [
1996 + 'name' => 'position',
1997 + 'operator' => 'in',
1998 + 'value' => ['left', 'right'],
1999 + ],
2000 + [
2001 + 'name' => 'icon_inline',
2002 + 'operator' => '==',
2003 + 'value' => 'yes',
2004 + ],
2005 + ],
2006 + ],
2007 + ],
2008 + ],
1966 2009
1967 - $this->add_control(
1968 - 'widget_animation_translate',
1969 - [
1970 - 'label' => esc_html__( 'Translate value', 'uicore-elements' ),
1971 - 'type' => \Elementor\Controls_Manager::SLIDER,
1972 - 'size_units' => ['px'],
1973 - 'range' => [
1974 - 'px' => [
1975 - 'min' => -50,
1976 - 'max' => 50,
1977 - 'step' => 1,
1978 - ],
1979 - ],
1980 - 'default' => [
1981 - 'unit' => 'px',
1982 - 'size' => -36,
1983 - ],
1984 - 'condition' =>[
1985 - 'widget_animation' => 'ui-e-animation-widget-translate',
1986 - ],
1987 - 'selectors' => [
1988 - '{{WRAPPER}}' => '--ui-e-ico-box-widget-translate: {{SIZE}}{{UNIT}}',
1989 - ],
1990 - ]
1991 - );
2010 + ]
2011 + );
1992 2012
1993 - $this->end_controls_section();
2013 + // Creates a prefix if has readmore button AND description animation. This allows us to apply some bottom space to the absolute flex-wrapper, keeping it above readmore
2014 + $this->add_control(
2015 + 'description_prefix',
2016 + [
2017 + 'label' => esc_html__('Prefix Class for Description with Readmore', 'uicore-elements'),
2018 + 'type' => \Elementor\Controls_Manager::HIDDEN,
2019 + 'default' => 'readmore',
2020 + 'condition' => [
2021 + 'readmore' => 'yes',
2022 + 'description_animation' => 'ui-e-animation-description-show',
2023 + ],
2024 + 'prefix_class' => 'ui-e-has-',
2025 + ]
2026 + );
1994 2027
1995 - $this->start_controls_section(
1996 - 'section_style_additional',
1997 - [
1998 - 'label' => esc_html__('Additional', 'uicore-elements'),
1999 - 'tab' => Controls_Manager::TAB_STYLE,
2000 - ]
2001 - );
2028 + $this->add_control(
2029 + 'readmore_animation',
2030 + [
2031 + 'label' => esc_html__('Button Hover Animation', 'uicore-elements'),
2032 + 'type' => \Elementor\Controls_Manager::SELECT,
2033 + 'default' => '',
2034 + 'options' => [
2035 + '' => esc_html__('None', 'uicore-elements'),
2036 + 'ui-e-animation-rm-show' => esc_html__('Show', 'uicore-elements'),
2037 + 'ui-e-animation-rm-ico' => esc_html__('Icon', 'uicore-elements'),
2038 + ],
2039 + 'prefix_class' => '',
2040 + 'frontend_available' => true,
2041 + 'condition' => [
2042 + 'readmore' => 'yes',
2043 + 'position!' => 'bottom',
2044 + ]
2045 + ]
2046 + );
2002 2047
2003 - $this->add_responsive_control(
2004 - 'content_padding',
2005 - [
2006 - 'label' => esc_html__('Content Inner Padding', 'uicore-elements'),
2007 - 'type' => Controls_Manager::DIMENSIONS,
2008 - 'size_units' => ['px', 'em', '%'],
2009 - 'frontend_available' => true,
2010 - 'selectors' => [
2011 - '{{WRAPPER}} .ui-e-ico-box' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};'
2012 - ]
2013 - ]
2014 - );
2048 + $this->add_control(
2049 + 'icon_animation',
2050 + [
2051 + 'label' => esc_html__('Icon Hover Animation', 'uicore-elements'),
2052 + 'type' => Controls_Manager::SELECT,
2053 + 'prefix_class' => '',
2054 + 'default' => '',
2055 + 'options' => [
2056 + '' => esc_html__('None', 'uicore-elements'),
2057 + 'ui-e-animation-ico-float' => esc_html__('Icon Float', 'uicore-elements'),
2058 + 'ui-e-animation-ico-grow' => esc_html__('Background Circle', 'uicore-elements'),
2059 + 'ui-e-animation-ico-slide' => esc_html__('Background Slide', 'uicore-elements'),
2060 + ],
2061 + 'condition' => [
2062 + 'icon_type!' => 'none',
2063 + ]
2064 + ]
2065 + );
2066 + $this->add_control(
2067 + 'icon_animation_background',
2068 + [
2069 + 'label' => esc_html__('Color', 'uicore-elements'),
2070 + 'type' => Controls_Manager::COLOR,
2071 + 'condition' => [
2072 + 'icon_animation' => [
2073 + 'ui-e-animation-ico-grow',
2074 + 'ui-e-animation-ico-slide'
2075 + ]
2076 + ],
2077 + 'selectors' => [
2078 + '{{WRAPPER}}:hover .ui-e-icon-wrp:after' => 'background-color: {{VALUE}}',
2079 + ],
2080 + ]
2081 + );
2015 2082
2016 - $this->end_controls_section();
2017 - }
2018 - protected function render()
2019 - {
2020 - $settings = $this->get_settings_for_display();
2083 + $this->add_control(
2084 + 'widget_animation',
2085 + [
2086 + 'label' => esc_html__('Item Hover Animation', 'uicore-elements'),
2087 + 'type' => \Elementor\Controls_Manager::SELECT,
2088 + 'default' => '',
2089 + 'options' => [
2090 + '' => esc_html__('None', 'uicore-elements'),
2091 + 'ui-e-animation-widget-zoom' => esc_html__('Zoom', 'uicore-elements'),
2092 + 'ui-e-animation-widget-translate' => esc_html__('Translate', 'uicore-elements'),
2093 + ],
2094 + 'prefix_class' => '',
2095 + ]
2096 + );
2021 2097
2022 - // Get the proper media
2023 - $media_type = $settings['icon_type'];
2024 - switch($media_type) {
2098 + $this->add_control(
2099 + 'widget_animation_zoom',
2100 + [
2101 + 'label' => esc_html__('Zoom scale', 'uicore-elements'),
2102 + 'type' => \Elementor\Controls_Manager::SLIDER,
2103 + 'size_units' => ['px'],
2104 + 'range' => [
2105 + 'px' => [
2106 + 'min' => .8,
2107 + 'max' => 1.3,
2108 + 'step' => 0.01,
2109 + ],
2110 + ],
2111 + 'default' => [
2112 + 'unit' => 'px',
2113 + 'size' => 1.12,
2114 + ],
2115 + 'condition' => [
2116 + 'widget_animation' => 'ui-e-animation-widget-zoom',
2117 + ],
2118 + 'selectors' => [
2119 + '{{WRAPPER}}' => '--ui-e-ico-box-widget-zoom: {{SIZE}}',
2120 + ],
2121 + ]
2122 + );
2025 2123
2026 - case 'icon' :
2027 - $media = $settings['selected_icon'];
2028 - break;
2124 + $this->add_control(
2125 + 'widget_animation_translate',
2126 + [
2127 + 'label' => esc_html__('Translate value', 'uicore-elements'),
2128 + 'type' => \Elementor\Controls_Manager::SLIDER,
2129 + 'size_units' => ['px'],
2130 + 'range' => [
2131 + 'px' => [
2132 + 'min' => -50,
2133 + 'max' => 50,
2134 + 'step' => 1,
2135 + ],
2136 + ],
2137 + 'default' => [
2138 + 'unit' => 'px',
2139 + 'size' => -36,
2140 + ],
2141 + 'condition' => [
2142 + 'widget_animation' => 'ui-e-animation-widget-translate',
2143 + ],
2144 + 'selectors' => [
2145 + '{{WRAPPER}}' => '--ui-e-ico-box-widget-translate: {{SIZE}}{{UNIT}}',
2146 + ],
2147 + ]
2148 + );
2029 2149
2030 - case 'image' :
2031 - $media = $settings['image'];
2032 - $media_size = $settings['image_fullwidth'] ? 'large' : 'medium'; // Gets the proper media size.
2033 - break;
2034 - }
2150 + $this->end_controls_section();
2035 2151
2036 - // Build the title
2037 - if (! empty($settings['title_link_url']['url'])){
2152 + $this->start_controls_section(
2153 + 'section_style_additional',
2154 + [
2155 + 'label' => esc_html__('Additional', 'uicore-elements'),
2156 + 'tab' => Controls_Manager::TAB_STYLE,
2157 + ]
2158 + );
2038 2159
2039 - $hasTitleUrl = true;
2040 - $this->add_link_attributes( 'title_link', $settings['title_link_url'] );
2041 - $titleUrl = "<a {$this->get_render_attribute_string( 'title_link')}>";
2160 + $this->add_responsive_control(
2161 + 'content_padding',
2162 + [
2163 + 'label' => esc_html__('Content Inner Padding', 'uicore-elements'),
2164 + 'type' => Controls_Manager::DIMENSIONS,
2165 + 'size_units' => ['px', 'em', '%'],
2166 + 'frontend_available' => true,
2167 + 'selectors' => [
2168 + '{{WRAPPER}} .ui-e-ico-box' => '--ui-e-content-padding-top: {{TOP}}{{UNIT}};
2169 + --ui-e-content-padding-right: {{RIGHT}}{{UNIT}};
2170 + --ui-e-content-padding-bot: {{BOTTOM}}{{UNIT}};
2171 + --ui-e-content-padding-left: {{LEFT}}{{UNIT}};'
2172 + ]
2173 + ]
2174 + );
2042 2175
2043 - } else { $hasTitleUrl = false;}
2176 + $this->end_controls_section();
2177 + }
2178 + protected function render()
2179 + {
2180 + $settings = $this->get_settings_for_display();
2044 2181
2045 - $title = '<'.esc_html($settings['title_size']).' class="ui-e-title">';
2046 - $title .= $hasTitleUrl ? wp_kses_post($titleUrl) : ''; // url
2047 - $title .= esc_html($settings['title_text']);
2048 - $title .= $hasTitleUrl ? '</a>' : ''; // url closure
2049 - $title .= '</'.esc_html($settings['title_size']).'>';
2182 + // Get the proper media
2183 + $media_type = $settings['icon_type'];
2184 + switch ($media_type) {
2050 2185
2051 - // Build the global Url
2052 - if($settings['global_link'] && $settings['global_link_url']['url']){
2186 + case 'icon':
2187 + $media = $settings['selected_icon'];
2188 + break;
2053 2189
2054 - $global_target = $settings['global_link_url']['is_external'] ? '_blank' : '_self';
2055 - $this->add_render_attribute('global_link', 'onclick', "window.open('{$settings['global_link_url']['url']}', '$global_target')");
2056 - }
2190 + case 'image':
2191 + $media = $settings['image'];
2192 + $media_size = isset($settings['image_fullwidth']) ? 'large' : 'medium'; // Gets the proper media size.
2193 + break;
2194 + }
2057 2195
2058 - // Build the subtitle
2059 - $subtitle = $settings['sub_title_text'] != '' ? "<div class='ui-e-subtitle'> {$settings['sub_title_text']} </div>" : '';
2196 + // Build the title
2197 + if (! empty($settings['title_link_url']['url'])) {
2060 2198
2061 - // Build the readmore
2062 - $readmore = $settings['readmore'];
2063 - if($readmore){
2199 + $hasTitleUrl = true;
2200 + $this->add_link_attributes('title_link', $settings['title_link_url']);
2201 + $titleUrl = "<a {$this->get_render_attribute_string('title_link')}>";
2202 + } else {
2203 + $hasTitleUrl = false;
2204 + }
2064 2205
2065 - $rmContent = $settings['readmore_text'];
2066 - $rmAlign = $settings['readmore_icon_align'];
2067 - $rmIcon = $settings['readmore_icon']['value'] == '' ? false : true;
2206 + $title = '<' . Helper::esc_tag($settings['title_size']) . ' class="ui-e-title">';
2207 + $title .= $hasTitleUrl ? wp_kses_post($titleUrl) : ''; // url
2208 + $title .= esc_html($settings['title_text']);
2209 + $title .= $hasTitleUrl ? '</a>' : ''; // url closure
2210 + $title .= '</' . Helper::esc_tag($settings['title_size']) . '>';
2068 2211
2069 - if(!empty($settings['readmore_link']['url'])){
2212 + // Build the global Url
2213 + if ($settings['global_link'] && $settings['global_link_url']['url'] && !$this->is_edit_mode()) {
2070 2214
2071 - $this->add_link_attributes( 'rm_link', $settings['readmore_link']);
2072 - }
2215 + $global_target = $settings['global_link_url']['is_external'] ? '_blank' : '_self';
2216 + $this->add_render_attribute('global_link', 'onclick', "window.open('{$settings['global_link_url']['url']}', '$global_target')");
2217 + }
2073 2218
2074 - $this->add_render_attribute('rm_atts', 'class', $settings['readmore_hover_animation'] ? 'ui-e-readmore elementor-animation-'.esc_attr($settings['readmore_hover_animation']) : 'ui-e-readmore');
2219 + // Build the subtitle
2220 + $subtitle = $settings['sub_title_text'] != '' ? "<div class='ui-e-subtitle'> {$settings['sub_title_text']} </div>" : '';
2075 2221
2076 - if (!empty($settings['button_css_id'])) {
2077 - $this->add_render_attribute( 'rm_atts', 'id', esc_attr($settings['button_css_id']) );
2078 - }
2222 + // Build the readmore
2223 + $readmore = $settings['readmore'];
2224 + if ($readmore) {
2079 2225
2080 - if ($settings['onclick']) {
2081 - $this->add_render_attribute( 'rm_atts', 'onclick', esc_js($settings['onclick_event']) );
2082 - }
2083 - }
2226 + $rmContent = $settings['readmore_text'];
2227 + $rmIcon = $settings['readmore_icon']['value'] == '' ? false : true;
2084 2228
2085 - // Check the icon position and sets the inline (true puts title/subtitlte inside flex wrapper, false puts inside content)
2086 - switch($settings['position']){
2229 + if (!empty($settings['readmore_link']['url'])) {
2087 2230
2088 - // Always true if top; always false if bottom and left/right checks the user choice
2089 - case 'left' :
2090 - $inline = $settings['icon_inline'];
2091 - break;
2231 + $this->add_link_attributes('rm_link', $settings['readmore_link']);
2232 + }
2092 2233
2093 - case 'right' :
2094 - $inline = $settings['icon_inline'];
2095 - break;
2234 + $this->add_render_attribute('rm_atts', 'class', $settings['readmore_hover_animation'] ? 'ui-e-readmore elementor-animation-' . esc_attr($settings['readmore_hover_animation']) : 'ui-e-readmore');
2096 2235
2097 - case 'top' :
2098 - $inline = true;
2099 - break;
2236 + if (!empty($settings['button_css_id'])) {
2237 + $this->add_render_attribute('rm_atts', 'id', esc_attr($settings['button_css_id']));
2238 + }
2100 2239
2101 - case 'bottom' :
2102 - $inline = false;
2103 - break;
2104 - }
2240 + // if ($settings['onclick']) {
2241 + // $this->add_render_attribute( 'rm_atts', 'onclick', esc_js($settings['onclick_event']) );
2242 + // }
2243 + };
2244 + // Check the icon position and sets the inline (true puts title/subtitlte inside flex wrapper, false puts inside content)
2245 + switch ($settings['position']) {
2105 2246
2106 - ?>
2247 + // Always true if top; always false if bottom and left/right checks the user choice
2248 + case 'top':
2249 + $inline = true;
2250 + break;
2107 2251
2108 - <div class="ui-e-ico-box" <?php $this->print_render_attribute_string('global_link');?>>
2252 + case 'bottom':
2253 + $inline = false;
2254 + break;
2109 2255
2110 - <?php if($settings['badge']) : ?>
2111 - <span class="ui-e-badge-wrp">
2112 - <span class="ui-e-badge ui-e-<?php echo esc_attr($settings['badge_position']);?>"> <?php echo esc_html($settings['badge_text']);?> </span>
2113 - </span>
2114 - <?php endif; ?>
2256 + default:
2257 + $inline = $this->is_option('icon_inline', 'yes');
2258 + break;
2259 + }
2115 2260
2116 - <div class='ui-e-flex-wrp'>
2261 +?>
2117 2262
2118 - <?php if($media_type != 'none') : ?>
2119 - <div class="ui-e-icon-wrp">
2263 + <div class="ui-e-ico-box" <?php $this->print_render_attribute_string('global_link'); ?>>
2120 2264
2121 - <?php if ($media_type == 'icon') {
2122 - Icons_Manager::render_icon( $media, [ 'aria-hidden' => 'true' ] );
2123 - } else {
2124 - echo wp_get_attachment_image( $media['id'], $media_size );
2125 - }
2126 - ?>
2265 + <?php if ($settings['badge']) : ?>
2266 + <span class="ui-e-badge-wrp">
2267 + <?php $position = isset($settings['badge_position']) ? $settings['badge_position'] : 'start right'; // TODO: default start right value is not printed for some reason
2268 + ?>
2269 + <span class="ui-e-badge <?php echo esc_attr($position); ?>"> <?php echo esc_html($settings['badge_text']); ?> </span>
2270 + </span>
2271 + <?php endif; ?>
2127 2272
2128 - </div>
2129 - <?php endif; ?>
2273 + <div class='ui-e-flex-wrp'>
2130 2274
2131 - <?php echo $inline ? '<div class="ui-e-title-wrp">' . wp_kses_post($title . $subtitle) . '</div>' : '' ;?>
2275 + <?php if ($media_type != 'none') : ?>
2276 + <div class="ui-e-icon-wrp">
2132 2277
2133 - </div>
2278 + <?php if ($media_type == 'icon') {
2279 + Icons_Manager::render_icon($media, ['aria-hidden' => 'true']);
2280 + } else {
2281 + echo wp_get_attachment_image($media['id'], $media_size);
2282 + }
2283 + ?>
2134 2284
2135 - <div class="ui-e-box-content">
2136 - <?php echo $inline ? '' : '<div class="ui-e-title-wrp">' . wp_kses_post($title . $subtitle) . '</div>' ;?>
2285 + </div>
2286 + <?php endif; ?>
2137 2287
2138 - <div class="ui-e-description">
2139 - <?php echo wp_kses_post($settings['description_text']);?>
2140 - </div>
2288 + <?php echo $inline ? '<div class="ui-e-title-wrp">' . wp_kses_post($title . $subtitle) . '</div>' : ''; ?>
2141 2289
2142 - <?php if($readmore) : ?>
2143 - <a <?php $this->print_render_attribute_string('rm_link'); $this->print_render_attribute_string('rm_atts');?>>
2290 + </div>
2144 2291
2145 - <?php echo esc_html($rmContent);?>
2146 - <?php if($rmIcon) : ?>
2147 - <span class="ui-e-<?php echo esc_attr($rmAlign);?>">
2148 - <?php Icons_Manager::render_icon( $settings['readmore_icon'], [ 'aria-hidden' => 'true' ] ); ?>
2149 - </span>
2150 - <?php endif; ?>
2151 - </a>
2152 - <?php endif; ?>
2292 + <div class="ui-e-box-content">
2293 + <?php echo $inline ? '' : '<div class="ui-e-title-wrp">' . wp_kses_post($title . $subtitle) . '</div>'; ?>
2153 2294
2154 - </div>
2155 - </div>
2156 - <?php
2157 - }
2295 + <div class="ui-e-description">
2296 + <?php echo wp_kses_post($this->parse_text_editor($settings['description_text'])); ?>
2297 + </div>
2158 2298
2299 + <?php if ($readmore) : ?>
2300 + <a <?php $this->print_render_attribute_string('rm_link');
2301 + $this->print_render_attribute_string('rm_atts'); ?>>
2302 +
2303 + <?php echo esc_html($rmContent); ?>
2304 + <?php if ($rmIcon) : ?>
2305 + <span>
2306 + <?php Icons_Manager::render_icon($settings['readmore_icon'], ['aria-hidden' => 'true']); ?>
2307 + </span>
2308 + <?php endif; ?>
2309 + </a>
2310 + <?php endif; ?>
2311 +
2312 + </div>
2313 + </div>
2314 +<?php
2315 + }
2159 2316 }
2160 2317 \Elementor\Plugin::instance()->widgets_manager->register(new IconBox());