← All changes | includes/blocks/info-box/block.php +83 -33 2.12.0 → 2.14.0 View file →

		@@ -27,15 +27,17 @@
27	27	$css_generator->add_class_styles(
28	28	'{{WRAPPER}}.ablocks-block--info-box > .ablocks-block-container',
29	29	$this->get_info_box( $attributes ),
30	30	$this->get_info_box( $attributes, 'Tablet' ),
31		- $this->get_info_box( $attributes, 'Mobile' )
	31	+ $this->get_info_box( $attributes, 'Mobile' ),
	32	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_info_box( $attributes, $device ); } )
32	33	);
33	34	$css_generator->add_class_styles(
34	35	'{{WRAPPER}}.ablocks-block--info-box > .ablocks-block-container > .ablocks-block--info-box__content',
35	36	$this->get_info_box_content( $attributes ),
36	37	$this->get_info_box_content( $attributes, 'Tablet' ),
37		- $this->get_info_box_content( $attributes, 'Mobile' )
	38	+ $this->get_info_box_content( $attributes, 'Mobile' ),
	39	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_info_box_content( $attributes, $device ); } )
38	40	);
39	41
40	42	// badge starts
41	43	$css_generator->add_class_styles(
		@@ -41,15 +43,17 @@
41	43	$css_generator->add_class_styles(
42	44	'{{WRAPPER}}.ablocks-block--info-box > .ablocks-block-container > .ablocks-info-box-badge-link',
43	45	$this->get_badge_css( $attributes ),
44	46	$this->get_badge_css( $attributes, 'Tablet' ),
45		- $this->get_badge_css( $attributes, 'Mobile' )
	47	+ $this->get_badge_css( $attributes, 'Mobile' ),
	48	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_badge_css( $attributes, $device ); } )
46	49	);
47	50	$css_generator->add_class_styles(
48	51	'{{WRAPPER}}.ablocks-block--info-box > .ablocks-block-container > .ablocks-info-box-badge-link:hover',
49	52	$this->get_badge_hover_css( $attributes ),
50	53	$this->get_badge_hover_css( $attributes, 'Tablet' ),
51		- $this->get_badge_hover_css( $attributes, 'Mobile' )
	54	+ $this->get_badge_hover_css( $attributes, 'Mobile' ),
	55	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_badge_hover_css( $attributes, $device ); } )
52	56	);
53	57	$css_generator->add_class_styles(
54	58	'{{WRAPPER}}.ablocks-block--info-box > .ablocks-block-container > .ablocks-info-box-badge-link > .ablocks-info-box-badge-link-text',
55	59	$this->get_badge_text_css( $attributes )
		@@ -59,15 +63,17 @@
59	63	$css_generator->add_class_styles(
60	64	'{{WRAPPER}}.ablocks-block--info-box .ablocks-block-container > .ablocks-icon-wrap, {{WRAPPER}}.ablocks-block--info-box .ablocks-block-container > a .ablocks-icon-wrap',
61	65	Icon::get_wrapper_css( $attributes ),
62	66	Icon::get_wrapper_css( $attributes, 'Tablet' ),
63		- Icon::get_wrapper_css( $attributes, 'Mobile' )
	67	+ Icon::get_wrapper_css( $attributes, 'Mobile' ),
	68	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return Icon::get_wrapper_css( $attributes, $device ); } )
64	69	);
65	70	$css_generator->add_class_styles(
66	71	'{{WRAPPER}}.ablocks-block--info-box .ablocks-block-container > .ablocks-icon-wrap, {{WRAPPER}}.ablocks-block--info-box .ablocks-block-container > a .ablocks-icon-wrap',
67	72	$this->get_icon_wrapper_extra_css( $attributes ),
68	73	$this->get_icon_wrapper_extra_css( $attributes, 'Tablet' ),
69		- $this->get_icon_wrapper_extra_css( $attributes, 'Mobile' )
	74	+ $this->get_icon_wrapper_extra_css( $attributes, 'Mobile' ),
	75	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_icon_wrapper_extra_css( $attributes, $device ); } )
70	76	);
71	77	$css_generator->add_class_styles(
72	78	'{{WRAPPER}}.ablocks-block--info-box > .ablocks-block-container > .ablocks-icon-wrap > img.ablocks-image-icon, {{WRAPPER}}.ablocks-block--info-box > .ablocks-block-container > a .ablocks-icon-wrap > img.ablocks-image-icon',
73	79	Icon::get_element_image_css( $attributes ),
		@@ -109,15 +115,17 @@
109	115	$css_generator->add_class_styles(
110	116	'{{WRAPPER}}.ablocks-block--info-box > .ablocks-block-container > .ablocks-block--info-box__content > .ablocks-info-box-heading',
111	117	$desktop_heading_text_styles,
112	118	$this->get_heading_text_css( $attributes, 'Tablet' ),
113		- $this->get_heading_text_css( $attributes, 'Mobile' )
	119	+ $this->get_heading_text_css( $attributes, 'Mobile' ),
	120	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_heading_text_css( $attributes, $device ); } )
114	121	);
115	122	$css_generator->add_class_styles(
116	123	'{{WRAPPER}}.ablocks-block--info-box:hover > .ablocks-block-container > .ablocks-block--info-box__content > .ablocks-info-box-heading',
117	124	$this->get_heading_text_css_hover( $attributes ),
118	125	$this->get_heading_text_css_hover( $attributes, 'Tablet' ),
119		- $this->get_heading_text_css_hover( $attributes, 'Mobile' )
	126	+ $this->get_heading_text_css_hover( $attributes, 'Mobile' ),
	127	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_heading_text_css_hover( $attributes, $device ); } )
120	128	);
121	129
122	130	// Sub Heading starts
123	131	$desktop_sub_heading_text_styles = $this->get_sub_heading_text_css( $attributes );
		@@ -127,15 +135,17 @@
127	135	$css_generator->add_class_styles(
128	136	'{{WRAPPER}}.ablocks-block--info-box > .ablocks-block-container > .ablocks-block--info-box__content > .ablocks-info-box-sub-heading',
129	137	$desktop_sub_heading_text_styles,
130	138	$this->get_sub_heading_text_css( $attributes, 'Tablet' ),
131		- $this->get_sub_heading_text_css( $attributes, 'Mobile' )
	139	+ $this->get_sub_heading_text_css( $attributes, 'Mobile' ),
	140	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_sub_heading_text_css( $attributes, $device ); } )
132	141	);
133	142	$css_generator->add_class_styles(
134	143	'{{WRAPPER}}.ablocks-block--info-box:hover > .ablocks-block-container > .ablocks-block--info-box__content > .ablocks-info-box-sub-heading',
135	144	$this->get_sub_heading_text_css_hover( $attributes ),
136	145	$this->get_sub_heading_text_css_hover( $attributes, 'Tablet' ),
137		- $this->get_sub_heading_text_css_hover( $attributes, 'Mobile' )
	146	+ $this->get_sub_heading_text_css_hover( $attributes, 'Mobile' ),
	147	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_sub_heading_text_css_hover( $attributes, $device ); } )
138	148	);
139	149
140	150	// Description starts
141	151	$desktop_des_text_style = $this->get_des_text_css( $attributes );
		@@ -151,9 +161,10 @@
151	161	$css_generator->add_class_styles(
152	162	'{{WRAPPER}}.ablocks-block--info-box:hover > .ablocks-block-container > .ablocks-block--info-box__content > .ablocks-info-box-text',
153	163	$this->get_des_text_css_hover( $attributes ),
154	164	$this->get_des_text_css_hover( $attributes, 'Tablet' ),
155		- $this->get_des_text_css_hover( $attributes, 'Mobile' )
	165	+ $this->get_des_text_css_hover( $attributes, 'Mobile' ),
	166	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_des_text_css_hover( $attributes, $device ); } )
156	167	);
157	168	$css_generator->add_class_styles(
158	169	'{{WRAPPER}}.ablocks-block--info-box > .ablocks-block-container > .ablocks-block--info-box__content > .ablocks-info-box-text-drop-caps::first-letter',
159	170	$this->get_des_drop_text_css( $attributes ),
		@@ -177,9 +188,10 @@
177	188	$css_generator->add_class_styles(
178	189	'{{WRAPPER}} .ablocks-info-box-star-ratings-icons > .ablocks-info-box-rating > .ablocks-info-box-rating__fill > .ablocks-icon-wrap, {{WRAPPER}} .ablocks-info-box-star-ratings-icons > .ablocks-info-box-rating > .ablocks-info-box-rating__unfill > .ablocks-icon-wrap',
179	190	Icon::get_wrapper_css( $attributes, '', 'starIcon' ),
180	191	Icon::get_wrapper_css( $attributes, 'Tablet', 'starIcon' ),
181		- Icon::get_wrapper_css( $attributes, 'Mobile', 'starIcon' )
	192	+ Icon::get_wrapper_css( $attributes, 'Mobile', 'starIcon' ),
	193	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return Icon::get_wrapper_css( $attributes, $device, 'starIcon' ); } )
182	194	);
183	195	// rating icon spacing css
184	196	$css_generator->add_class_styles(
185	197	'{{WRAPPER}} .ablocks-info-box-star-ratings-icons',
		@@ -223,9 +235,10 @@
223	235	$css_generator->add_class_styles(
224	236	'{{WRAPPER}}.ablocks-block--info-box > .ablocks-block-container > .ablocks-block--info-box__content > .ablocks-info-box-btn-link',
225	237	$this->get_button_css( $attributes ),
226	238	$this->get_button_css( $attributes, 'Tablet' ),
227		- $this->get_button_css( $attributes, 'Mobile' )
	239	+ $this->get_button_css( $attributes, 'Mobile' ),
	240	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_button_css( $attributes, $device ); } )
228	241	);
229	242	// Generate button CSS end
230	243	// Generate button hover CSS start
231	244	$css_generator->add_class_styles(
		@@ -231,9 +244,10 @@
231	244	$css_generator->add_class_styles(
232	245	'{{WRAPPER}}.ablocks-block--info-box > .ablocks-block-container > .ablocks-block--info-box__content > .ablocks-info-box-btn-link:hover',
233	246	$this->get_button_hover_css( $attributes ),
234	247	$this->get_button_hover_css( $attributes, 'Tablet' ),
235		- $this->get_button_hover_css( $attributes, 'Mobile' )
	248	+ $this->get_button_hover_css( $attributes, 'Mobile' ),
	249	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_button_hover_css( $attributes, $device ); } )
236	250	);
237	251	// Generate button icon hover CSS
238	252	$css_generator->add_class_styles(
239	253	'{{WRAPPER}}.ablocks-block--info-box > .ablocks-block-container > .ablocks-block--info-box__content > .ablocks-info-box-btn-link:hover > .ablocks-icon-wrap > svg.ablocks-svg-icon',
		@@ -238,9 +252,10 @@
238	252	$css_generator->add_class_styles(
239	253	'{{WRAPPER}}.ablocks-block--info-box > .ablocks-block-container > .ablocks-block--info-box__content > .ablocks-info-box-btn-link:hover > .ablocks-icon-wrap > svg.ablocks-svg-icon',
240	254	$this->get_button_icon_hover_css( $attributes ),
241	255	$this->get_button_icon_hover_css( $attributes, 'Tablet' ),
242		- $this->get_button_icon_hover_css( $attributes, 'Mobile' )
	256	+ $this->get_button_icon_hover_css( $attributes, 'Mobile' ),
	257	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_button_icon_hover_css( $attributes, $device ); } )
243	258	);
244	259	// Generate button text CSS start
245	260	$css_generator->add_class_styles(
246	261	'{{WRAPPER}}.ablocks-block--info-box > .ablocks-block-container > .ablocks-block--info-box__content > .ablocks-info-box-btn-link > .ablocks-info-box-btn-link-text',
		@@ -250,9 +265,10 @@
250	265	$css_generator->add_class_styles(
251	266	'{{WRAPPER}} .ablocks-info-box-btn-link > .ablocks-icon-wrap',
252	267	Icon::get_wrapper_css( $attributes, '', 'btnIcon' ),
253	268	Icon::get_wrapper_css( $attributes, 'Tablet', 'btnIcon' ),
254		- Icon::get_wrapper_css( $attributes, 'Mobile', 'btnIcon' )
	269	+ Icon::get_wrapper_css( $attributes, 'Mobile', 'btnIcon' ),
	270	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return Icon::get_wrapper_css( $attributes, $device, 'btnIcon' ); } )
255	271	);
256	272	$css_generator->add_class_styles(
257	273	'{{WRAPPER}} .ablocks-info-box-btn-link > .ablocks-icon-wrap > svg.ablocks-svg-icon',
258	274	Icon::get_element_css( $attributes, '', 'btnIcon' ),
		@@ -294,15 +310,17 @@
294	310	$css_generator->add_class_styles(
295	311	'{{WRAPPER}}:not(.ablocks-has-block-container), {{WRAPPER}}.ablocks-block--info-box > .ablocks-block-container',
296	312	$this->get_info_box( $attributes ),
297	313	$this->get_info_box( $attributes, 'Tablet' ),
298		- $this->get_info_box( $attributes, 'Mobile' )
	314	+ $this->get_info_box( $attributes, 'Mobile' ),
	315	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_info_box( $attributes, $device ); } )
299	316	);
300	317	$css_generator->add_class_styles(
301	318	'{{WRAPPER}} .ablocks-block--info-box__content',
302	319	$this->get_info_box_content( $attributes ),
303	320	$this->get_info_box_content( $attributes, 'Tablet' ),
304		- $this->get_info_box_content( $attributes, 'Mobile' )
	321	+ $this->get_info_box_content( $attributes, 'Mobile' ),
	322	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_info_box_content( $attributes, $device ); } )
305	323	);
306	324
307	325	// badge starts
308	326	$css_generator->add_class_styles(
		@@ -308,15 +326,17 @@
308	326	$css_generator->add_class_styles(
309	327	'{{WRAPPER}} .ablocks-info-box-badge-link',
310	328	$this->get_badge_css( $attributes ),
311	329	$this->get_badge_css( $attributes, 'Tablet' ),
312		- $this->get_badge_css( $attributes, 'Mobile' )
	330	+ $this->get_badge_css( $attributes, 'Mobile' ),
	331	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_badge_css( $attributes, $device ); } )
313	332	);
314	333	$css_generator->add_class_styles(
315	334	'{{WRAPPER}} .ablocks-info-box-badge-link:hover',
316	335	$this->get_badge_hover_css( $attributes ),
317	336	$this->get_badge_hover_css( $attributes, 'Tablet' ),
318		- $this->get_badge_hover_css( $attributes, 'Mobile' )
	337	+ $this->get_badge_hover_css( $attributes, 'Mobile' ),
	338	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_badge_hover_css( $attributes, $device ); } )
319	339	);
320	340	$css_generator->add_class_styles(
321	341	'{{WRAPPER}} .ablocks-info-box-badge-link > .ablocks-info-box-badge-link-text',
322	342	$this->get_badge_text_css( $attributes )
		@@ -329,9 +349,10 @@
329	349	{{WRAPPER}}:not(.ablocks-has-block-container) > a .ablocks-icon-wrap,
330	350	{{WRAPPER}} > .ablocks-block-container > a .ablocks-icon-wrap',
331	351	Icon::get_wrapper_css( $attributes ),
332	352	Icon::get_wrapper_css( $attributes, 'Tablet' ),
333		- Icon::get_wrapper_css( $attributes, 'Mobile' )
	353	+ Icon::get_wrapper_css( $attributes, 'Mobile' ),
	354	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return Icon::get_wrapper_css( $attributes, $device ); } )
334	355	);
335	356	// Icon Style
336	357	$css_generator->add_class_styles(
337	358	'{{WRAPPER}}:not(.ablocks-has-block-container) > .ablocks-icon-wrap:hover,
		@@ -339,9 +360,10 @@
339	360	{{WRAPPER}}:not(.ablocks-has-block-container) > a .ablocks-icon-wrap:hover,
340	361	{{WRAPPER}} > .ablocks-block-container > a .ablocks-icon-wrap:hover',
341	362	Icon::get_wrapper_hover_css( $attributes ),
342	363	Icon::get_wrapper_hover_css( $attributes, 'Tablet' ),
343		- Icon::get_wrapper_hover_css( $attributes, 'Mobile' )
	364	+ Icon::get_wrapper_hover_css( $attributes, 'Mobile' ),
	365	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return Icon::get_wrapper_hover_css( $attributes, $device ); } )
344	366	);
345	367	$css_generator->add_class_styles(
346	368	'{{WRAPPER}}:not(.ablocks-has-block-container) > .ablocks-icon-wrap,
347	369	{{WRAPPER}} > .ablocks-block-container > .ablocks-icon-wrap,
		@@ -348,9 +370,10 @@
348	370	{{WRAPPER}}:not(.ablocks-has-block-container) > a .ablocks-icon-wrap,
349	371	{{WRAPPER}} > .ablocks-block-container > a .ablocks-icon-wrap',
350	372	$this->get_icon_wrapper_extra_css( $attributes ),
351	373	$this->get_icon_wrapper_extra_css( $attributes, 'Tablet' ),
352		- $this->get_icon_wrapper_extra_css( $attributes, 'Mobile' )
	374	+ $this->get_icon_wrapper_extra_css( $attributes, 'Mobile' ),
	375	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_icon_wrapper_extra_css( $attributes, $device ); } )
353	376	);
354	377	$css_generator->add_class_styles(
355	378	'{{WRAPPER}}:not(.ablocks-has-block-container) > .ablocks-icon-wrap > img.ablocks-image-icon, {{WRAPPER}} > .ablocks-block-container > .ablocks-icon-wrap > img.ablocks-image-icon, {{WRAPPER}} > a .ablocks-icon-wrap > img.ablocks-image-icon',
356	379	Icon::get_element_image_css( $attributes ),
		@@ -355,8 +378,9 @@
355	378	'{{WRAPPER}}:not(.ablocks-has-block-container) > .ablocks-icon-wrap > img.ablocks-image-icon, {{WRAPPER}} > .ablocks-block-container > .ablocks-icon-wrap > img.ablocks-image-icon, {{WRAPPER}} > a .ablocks-icon-wrap > img.ablocks-image-icon',
356	379	Icon::get_element_image_css( $attributes ),
357	380	Icon::get_element_image_css( $attributes, 'Tablet' ),
358	381	Icon::get_element_image_css( $attributes, 'Mobile' ),
	382	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return Icon::get_element_image_css( $attributes, $device ); } )
359	383	);
360	384	$css_generator->add_class_styles(
361	385	'{{WRAPPER}}:not(.ablocks-has-block-container):hover > .ablocks-icon-wrap > img.ablocks-image-icon, {{WRAPPER}}:hover > .ablocks-block-container > .ablocks-icon-wrap > img.ablocks-image-icon , {{WRAPPER}}:hover > a .ablocks-icon-wrap > img.ablocks-image-icon',
362	386	Icon::get_element_image_hover_css( $attributes ),
		@@ -361,8 +385,9 @@
361	385	'{{WRAPPER}}:not(.ablocks-has-block-container):hover > .ablocks-icon-wrap > img.ablocks-image-icon, {{WRAPPER}}:hover > .ablocks-block-container > .ablocks-icon-wrap > img.ablocks-image-icon , {{WRAPPER}}:hover > a .ablocks-icon-wrap > img.ablocks-image-icon',
362	386	Icon::get_element_image_hover_css( $attributes ),
363	387	Icon::get_element_image_hover_css( $attributes, 'Tablet' ),
364	388	Icon::get_element_image_hover_css( $attributes, 'Mobile' ),
	389	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return Icon::get_element_image_hover_css( $attributes, $device ); } )
365	390	);
366	391	$css_generator->add_class_styles(
367	392	'{{WRAPPER}}:not(.ablocks-has-block-container) > .ablocks-icon-wrap > svg.ablocks-svg-icon, {{WRAPPER}} > .ablocks-block-container > .ablocks-icon-wrap > svg.ablocks-svg-icon',
368	393	Icon::get_element_css( $attributes ),
		@@ -367,8 +392,9 @@
367	392	'{{WRAPPER}}:not(.ablocks-has-block-container) > .ablocks-icon-wrap > svg.ablocks-svg-icon, {{WRAPPER}} > .ablocks-block-container > .ablocks-icon-wrap > svg.ablocks-svg-icon',
368	393	Icon::get_element_css( $attributes ),
369	394	Icon::get_element_css( $attributes, 'Tablet' ),
370	395	Icon::get_element_css( $attributes, 'Mobile' ),
	396	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return Icon::get_element_css( $attributes, $device ); } )
371	397	);
372	398	$css_generator->add_class_styles(
373	399	'{{WRAPPER}}:not(.ablocks-has-block-container):hover > .ablocks-icon-wrap > svg.ablocks-svg-icon, {{WRAPPER}} > .ablocks-block-container > .ablocks-icon-wrap > svg.ablocks-svg-icon',
374	400	Icon::get_element_image_hover_css( $attributes ),
		@@ -373,8 +399,9 @@
373	399	'{{WRAPPER}}:not(.ablocks-has-block-container):hover > .ablocks-icon-wrap > svg.ablocks-svg-icon, {{WRAPPER}} > .ablocks-block-container > .ablocks-icon-wrap > svg.ablocks-svg-icon',
374	400	Icon::get_element_image_hover_css( $attributes ),
375	401	Icon::get_element_image_hover_css( $attributes, 'Tablet' ),
376	402	Icon::get_element_image_hover_css( $attributes, 'Mobile' ),
	403	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return Icon::get_element_image_hover_css( $attributes, $device ); } )
377	404	);
378	405	$css_generator->add_class_styles(
379	406	'{{WRAPPER}}:not(.ablocks-has-block-container).ablocks-block--info-box:hover > .ablocks-icon-wrap svg.ablocks-svg-icon ,
380	407	{{WRAPPER}}.ablocks-block--info-box:hover > .ablocks-block-container > .ablocks-icon-wrap svg.ablocks-svg-icon ,
		@@ -394,15 +421,17 @@
394	421	$css_generator->add_class_styles(
395	422	'{{WRAPPER}} .ablocks-block--info-box__content > .ablocks-info-box-heading',
396	423	$this->get_heading_text_css( $attributes ),
397	424	$this->get_heading_text_css( $attributes, 'Tablet' ),
398		- $this->get_heading_text_css( $attributes, 'Mobile' )
	425	+ $this->get_heading_text_css( $attributes, 'Mobile' ),
	426	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_heading_text_css( $attributes, $device ); } )
399	427	);
400	428	$css_generator->add_class_styles(
401	429	'{{WRAPPER}}.ablocks-block--info-box:hover > .ablocks-block--info-box__content > .ablocks-info-box-heading',
402	430	$this->get_heading_text_css_hover( $attributes ),
403	431	$this->get_heading_text_css_hover( $attributes, 'Tablet' ),
404		- $this->get_heading_text_css_hover( $attributes, 'Mobile' )
	432	+ $this->get_heading_text_css_hover( $attributes, 'Mobile' ),
	433	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_heading_text_css_hover( $attributes, $device ); } )
405	434	);
406	435
407	436	// Sub Heading starts
408	437	$css_generator->add_class_styles(
		@@ -408,15 +437,17 @@
408	437	$css_generator->add_class_styles(
409	438	'{{WRAPPER}} .ablocks-block--info-box__content > .ablocks-info-box-sub-heading',
410	439	$this->get_sub_heading_text_css( $attributes ),
411	440	$this->get_sub_heading_text_css( $attributes, 'Tablet' ),
412		- $this->get_sub_heading_text_css( $attributes, 'Mobile' )
	441	+ $this->get_sub_heading_text_css( $attributes, 'Mobile' ),
	442	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_sub_heading_text_css( $attributes, $device ); } )
413	443	);
414	444	$css_generator->add_class_styles(
415	445	'{{WRAPPER}}.ablocks-block--info-box:hover > .ablocks-block--info-box__content > .ablocks-info-box-sub-heading',
416	446	$this->get_sub_heading_text_css_hover( $attributes ),
417	447	$this->get_sub_heading_text_css_hover( $attributes, 'Tablet' ),
418		- $this->get_sub_heading_text_css_hover( $attributes, 'Mobile' )
	448	+ $this->get_sub_heading_text_css_hover( $attributes, 'Mobile' ),
	449	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_sub_heading_text_css_hover( $attributes, $device ); } )
419	450	);
420	451
421	452	// Description starts
422	453	$css_generator->add_class_styles(
		@@ -423,14 +454,16 @@
423	454	'{{WRAPPER}} .ablocks-block--info-box__content > .ablocks-info-box-text',
424	455	$this->get_des_text_css( $attributes ),
425	456	$this->get_des_text_css( $attributes, 'Tablet' ),
426	457	$this->get_des_text_css( $attributes, 'Mobile' ),
	458	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_des_text_css( $attributes, $device ); } )
427	459	);
428	460	$css_generator->add_class_styles(
429	461	'{{WRAPPER}}.ablocks-block--info-box:hover > .ablocks-block--info-box__content > .ablocks-info-box-text',
430	462	$this->get_des_text_css_hover( $attributes ),
431	463	$this->get_des_text_css_hover( $attributes, 'Tablet' ),
432		- $this->get_des_text_css_hover( $attributes, 'Mobile' )
	464	+ $this->get_des_text_css_hover( $attributes, 'Mobile' ),
	465	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_des_text_css_hover( $attributes, $device ); } )
433	466	);
434	467	$css_generator->add_class_styles(
435	468	'{{WRAPPER}} .ablocks-block--info-box__content > .ablocks-info-box-text-drop-caps::first-letter',
436	469	$this->get_des_drop_text_css( $attributes ),
		@@ -435,8 +468,9 @@
435	468	'{{WRAPPER}} .ablocks-block--info-box__content > .ablocks-info-box-text-drop-caps::first-letter',
436	469	$this->get_des_drop_text_css( $attributes ),
437	470	$this->get_des_drop_text_css( $attributes, 'Tablet' ),
438	471	$this->get_des_drop_text_css( $attributes, 'Mobile' ),
	472	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_des_drop_text_css( $attributes, $device ); } )
439	473	);
440	474
441	475	// rating icon css
442	476	$css_generator->add_class_styles(
		@@ -443,8 +477,9 @@
443	477	'{{WRAPPER}} .ablocks-info-box-star-ratings',
444	478	$this->get_container_css( $attributes ),
445	479	$this->get_container_css( $attributes, 'Tablet' ),
446	480	$this->get_container_css( $attributes, 'Mobile' ),
	481	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_container_css( $attributes, $device ); } )
447	482	);
448	483	$css_generator->add_class_styles(
449	484	'{{WRAPPER}} .ablocks-info-box-star-ratings',
450	485	$this->get_rating_css( $attributes ),
		@@ -449,14 +484,16 @@
449	484	'{{WRAPPER}} .ablocks-info-box-star-ratings',
450	485	$this->get_rating_css( $attributes ),
451	486	$this->get_rating_css( $attributes, 'Tablet' ),
452	487	$this->get_rating_css( $attributes, 'Mobile' ),
	488	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_rating_css( $attributes, $device ); } )
453	489	);
454	490	$css_generator->add_class_styles(
455	491	'{{WRAPPER}} .ablocks-info-box-star-ratings-icons > .ablocks-info-box-rating > .ablocks-info-box-rating__fill > .ablocks-icon-wrap, {{WRAPPER}} .ablocks-info-box-star-ratings-icons > .ablocks-info-box-rating > .ablocks-info-box-rating__unfill > .ablocks-icon-wrap',
456	492	Icon::get_wrapper_css( $attributes, '', 'starIcon' ),
457	493	Icon::get_wrapper_css( $attributes, 'Tablet', 'starIcon' ),
458		- Icon::get_wrapper_css( $attributes, 'Mobile', 'starIcon' )
	494	+ Icon::get_wrapper_css( $attributes, 'Mobile', 'starIcon' ),
	495	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return Icon::get_wrapper_css( $attributes, $device, 'starIcon' ); } )
459	496	);
460	497	// rating icon spacing css
461	498	$css_generator->add_class_styles(
462	499	'{{WRAPPER}} .ablocks-info-box-star-ratings-icons',
		@@ -462,8 +499,9 @@
462	499	'{{WRAPPER}} .ablocks-info-box-star-ratings-icons',
463	500	$this->get_rating_icon_spacing_css( $attributes ),
464	501	$this->get_rating_icon_spacing_css( $attributes, 'Tablet' ),
465	502	$this->get_rating_icon_spacing_css( $attributes, 'Mobile' ),
	503	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_rating_icon_spacing_css( $attributes, $device ); } )
466	504	);
467	505	$css_generator->add_class_styles(
468	506	'{{WRAPPER}} .ablocks-info-box-star-ratings-icons > .ablocks-info-box-rating > .ablocks-info-box-rating__fill > .ablocks-icon-wrap > svg',
469	507	$this->get_fill_rating_css( $attributes ),
		@@ -468,8 +506,9 @@
468	506	'{{WRAPPER}} .ablocks-info-box-star-ratings-icons > .ablocks-info-box-rating > .ablocks-info-box-rating__fill > .ablocks-icon-wrap > svg',
469	507	$this->get_fill_rating_css( $attributes ),
470	508	$this->get_fill_rating_css( $attributes, 'Tablet' ),
471	509	$this->get_fill_rating_css( $attributes, 'Mobile' ),
	510	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_fill_rating_css( $attributes, $device ); } )
472	511	);
473	512	$css_generator->add_class_styles(
474	513	'{{WRAPPER}} .ablocks-info-box-star-ratings-icons > .ablocks-info-box-rating > .ablocks-info-box-rating__unfill > .ablocks-icon-wrap > svg',
475	514	$this->get_unfill_rating_css( $attributes ),
		@@ -474,8 +513,9 @@
474	513	'{{WRAPPER}} .ablocks-info-box-star-ratings-icons > .ablocks-info-box-rating > .ablocks-info-box-rating__unfill > .ablocks-icon-wrap > svg',
475	514	$this->get_unfill_rating_css( $attributes ),
476	515	$this->get_unfill_rating_css( $attributes, 'Tablet' ),
477	516	$this->get_unfill_rating_css( $attributes, 'Mobile' ),
	517	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_unfill_rating_css( $attributes, $device ); } )
478	518	);
479	519	$css_generator->add_class_styles(
480	520	'{{WRAPPER}}.ablocks-block--info-box:hover > .ablocks-block--info-box__content > .ablocks-info-box-star-ratings > .ablocks-info-box-star-ratings-icons > .ablocks-info-box-rating > .ablocks-info-box-rating__fill > .ablocks-icon-wrap > svg',
481	521	$this->get_fill_rating_css_hover( $attributes ),
		@@ -480,8 +520,9 @@
480	520	'{{WRAPPER}}.ablocks-block--info-box:hover > .ablocks-block--info-box__content > .ablocks-info-box-star-ratings > .ablocks-info-box-star-ratings-icons > .ablocks-info-box-rating > .ablocks-info-box-rating__fill > .ablocks-icon-wrap > svg',
481	521	$this->get_fill_rating_css_hover( $attributes ),
482	522	$this->get_fill_rating_css_hover( $attributes, 'Tablet' ),
483	523	$this->get_fill_rating_css_hover( $attributes, 'Mobile' ),
	524	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_fill_rating_css_hover( $attributes, $device ); } )
484	525	);
485	526	$css_generator->add_class_styles(
486	527	'{{WRAPPER}}.ablocks-block--info-box:hover > .ablocks-block--info-box__content > .ablocks-info-box-star-ratings > .ablocks-info-box-star-ratings-icons > .ablocks-info-box-rating > .ablocks-info-box-rating__unfill > .ablocks-icon-wrap > svg',
487	528	$this->get_unfill_rating_css_hover( $attributes ),
		@@ -486,8 +527,9 @@
486	527	'{{WRAPPER}}.ablocks-block--info-box:hover > .ablocks-block--info-box__content > .ablocks-info-box-star-ratings > .ablocks-info-box-star-ratings-icons > .ablocks-info-box-rating > .ablocks-info-box-rating__unfill > .ablocks-icon-wrap > svg',
487	528	$this->get_unfill_rating_css_hover( $attributes ),
488	529	$this->get_unfill_rating_css_hover( $attributes, 'Tablet' ),
489	530	$this->get_unfill_rating_css_hover( $attributes, 'Mobile' ),
	531	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_unfill_rating_css_hover( $attributes, $device ); } )
490	532	);
491	533	// rating number css
492	534	$css_generator->add_class_styles(
493	535	'{{WRAPPER}} .ablocks-info-box-star-rating-number',
		@@ -493,8 +535,9 @@
493	535	'{{WRAPPER}} .ablocks-info-box-star-rating-number',
494	536	$this->get_rating_number_css( $attributes ),
495	537	$this->get_rating_number_css( $attributes, 'Tablet' ),
496	538	$this->get_rating_number_css( $attributes, 'Mobile' ),
	539	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_rating_number_css( $attributes, $device ); } )
497	540	);
498	541
499	542	// Generate button CSS start
500	543	$css_generator->add_class_styles(
		@@ -500,9 +543,10 @@
500	543	$css_generator->add_class_styles(
501	544	'{{WRAPPER}} .ablocks-block--info-box__content > .ablocks-info-box-btn-link',
502	545	$this->get_button_css( $attributes ),
503	546	$this->get_button_css( $attributes, 'Tablet' ),
504		- $this->get_button_css( $attributes, 'Mobile' )
	547	+ $this->get_button_css( $attributes, 'Mobile' ),
	548	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_button_css( $attributes, $device ); } )
505	549	);
506	550	// Generate button CSS end
507	551	// Generate button hover CSS start
508	552	$css_generator->add_class_styles(
		@@ -508,9 +552,10 @@
508	552	$css_generator->add_class_styles(
509	553	'{{WRAPPER}} .ablocks-block--info-box__content > .ablocks-info-box-btn-link:hover',
510	554	$this->get_button_hover_css( $attributes ),
511	555	$this->get_button_hover_css( $attributes, 'Tablet' ),
512		- $this->get_button_hover_css( $attributes, 'Mobile' )
	556	+ $this->get_button_hover_css( $attributes, 'Mobile' ),
	557	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_button_hover_css( $attributes, $device ); } )
513	558	);
514	559	// Generate button icon hover CSS
515	560	$css_generator->add_class_styles(
516	561	'{{WRAPPER}} .ablocks-block--info-box__content > .ablocks-info-box-btn-link:hover > .ablocks-icon-wrap > svg.ablocks-svg-icon',
		@@ -515,9 +560,10 @@
515	560	$css_generator->add_class_styles(
516	561	'{{WRAPPER}} .ablocks-block--info-box__content > .ablocks-info-box-btn-link:hover > .ablocks-icon-wrap > svg.ablocks-svg-icon',
517	562	$this->get_button_icon_hover_css( $attributes ),
518	563	$this->get_button_icon_hover_css( $attributes, 'Tablet' ),
519		- $this->get_button_icon_hover_css( $attributes, 'Mobile' )
	564	+ $this->get_button_icon_hover_css( $attributes, 'Mobile' ),
	565	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_button_icon_hover_css( $attributes, $device ); } )
520	566	);
521	567	// Generate button text CSS start
522	568	$css_generator->add_class_styles(
523	569	'{{WRAPPER}} .ablocks-block--info-box__content > .ablocks-info-box-btn-link > .ablocks-info-box-btn-link-text',
		@@ -527,9 +573,10 @@
527	573	$css_generator->add_class_styles(
528	574	'{{WRAPPER}} .ablocks-info-box-btn-link > .ablocks-icon-wrap',
529	575	Icon::get_wrapper_css( $attributes, '', 'btnIcon' ),
530	576	Icon::get_wrapper_css( $attributes, 'Tablet', 'btnIcon' ),
531		- Icon::get_wrapper_css( $attributes, 'Mobile', 'btnIcon' )
	577	+ Icon::get_wrapper_css( $attributes, 'Mobile', 'btnIcon' ),
	578	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return Icon::get_wrapper_css( $attributes, $device, 'btnIcon' ); } )
532	579	);
533	580	$css_generator->add_class_styles(
534	581	'{{WRAPPER}} .ablocks-info-box-btn-link > .ablocks-icon-wrap > svg.ablocks-svg-icon',
535	582	Icon::get_element_css( $attributes, '', 'btnIcon' ),
		@@ -534,8 +581,9 @@
534	581	'{{WRAPPER}} .ablocks-info-box-btn-link > .ablocks-icon-wrap > svg.ablocks-svg-icon',
535	582	Icon::get_element_css( $attributes, '', 'btnIcon' ),
536	583	Icon::get_element_css( $attributes, 'Tablet', 'btnIcon' ),
537	584	Icon::get_element_css( $attributes, 'Mobile', 'btnIcon' ),
	585	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return Icon::get_element_css( $attributes, $device, 'btnIcon' ); } )
538	586	);
539	587	$css_generator->add_class_styles(
540	588	'{{WRAPPER}} .ablocks-info-box-btn-link > .ablocks-icon-wrap > svg.ablocks-svg-icon:hover',
541	589	Icon::get_element_image_hover_css( $attributes, '', 'btnIcon' ),
		@@ -540,8 +588,9 @@
540	588	'{{WRAPPER}} .ablocks-info-box-btn-link > .ablocks-icon-wrap > svg.ablocks-svg-icon:hover',
541	589	Icon::get_element_image_hover_css( $attributes, '', 'btnIcon' ),
542	590	Icon::get_element_image_hover_css( $attributes, 'Tablet', 'btnIcon' ),
543	591	Icon::get_element_image_hover_css( $attributes, 'Mobile', 'btnIcon' ),
	592	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return Icon::get_element_image_hover_css( $attributes, $device, 'btnIcon' ); } )
544	593	);
545	594	$css_generator->add_class_styles(
546	595	'{{WRAPPER}} .ablocks-info-box-btn-link > .ablocks-icon-wrap:hover',
547	596	Icon::get_wrapper_hover_css( $attributes, '', 'btnIcon' ),
		@@ -546,8 +595,9 @@
546	595	'{{WRAPPER}} .ablocks-info-box-btn-link > .ablocks-icon-wrap:hover',
547	596	Icon::get_wrapper_hover_css( $attributes, '', 'btnIcon' ),
548	597	Icon::get_wrapper_hover_css( $attributes, 'Tablet', 'btnIcon' ),
549	598	Icon::get_wrapper_hover_css( $attributes, 'Mobile', 'btnIcon' ),
	599	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return Icon::get_wrapper_hover_css( $attributes, $device, 'btnIcon' ); } )
550	600	);
551	601	$css_generator->add_class_styles(
552	602	'{{WRAPPER}}:not(.ablocks-has-block-container).ablocks-hide-on-desktop,{{WRAPPER}}:not(.ablocks-has-block-container).ablocks-hide-on-tablet,{{WRAPPER}}:not(.ablocks-has-block-container).ablocks-hide-on-mobile',
553	603	! empty( $attributes['_hide_on_desktop'] ) ? [ 'display' => 'none' ] : [],