PluginProbe
CartFlows – Funnel Builder & Checkout Plugin for WooCommerce / 3.1.1
CartFlows – Funnel Builder & Checkout Plugin for WooCommerce v3.1.1
3.3.0 3.2.1 3.2.0 3.1.4 3.1.3 3.1.2 3.1.1 3.1.0 3.0.1 trunk 1.0.4 1.1.0 1.1.0.1 1.1.1 1.1.10 1.1.11 1.1.12 1.1.13 1.1.14 1.1.15 1.1.16 1.1.17 1.1.18 1.1.19 1.1.2 All 162 releases
cartflows / modules / gutenberg / classes / class-cartflows-block-helper.php

class-cartflows-block-helper.php in CartFlows – Funnel Builder & Checkout Plugin for WooCommerce 3.1.1, at modules/gutenberg/classes/class-cartflows-block-helper.php

948 lines 76.9 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 <?php
2 /**
3 * Cartflows Block Helper.
4 *
5 * @package Cartflows
6 */
7
8 if ( ! defined( 'ABSPATH' ) ) {
9 exit; // Exit if accessed directly.
10 }
11
12 if ( ! class_exists( 'Cartflows_Block_Helper' ) ) {
13
14 /**
15 * Class Cartflows_Block_Helper.
16 */
17 class Cartflows_Block_Helper {
18
19 /**
20 * Get Next Step Button CSS
21 *
22 * @since 1.6.15
23 * @param array $attr The block attributes.
24 * @param string $id The selector ID.
25 * @return array The Widget List.
26 */
27 public static function get_next_step_button_css( $attr, $id ) {
28
29 $defaults = Cartflows_Gb_Helper::$block_list['wcfb/next-step-button']['attributes'];
30 $attr = array_merge( $defaults, (array) $attr );
31 $bg_type = ( isset( $attr['backgroundType'] ) ) ? $attr['backgroundType'] : 'none';
32
33 $m_selectors = array();
34 $t_selectors = array();
35
36 $border_css = self::generate_border_css( $attr, 'btn' );
37 $border_css = self::generate_deprecated_border_css(
38 $border_css,
39 ( isset( $attr['borderWidth'] ) ? $attr['borderWidth'] : '' ),
40 ( isset( $attr['borderRadius'] ) ? $attr['borderRadius'] : '' ),
41 ( isset( $attr['borderColor'] ) ? $attr['borderColor'] : '' ),
42 ( isset( $attr['borderStyle'] ) ? $attr['borderStyle'] : '' ),
43 ( isset( $attr['borderHColor'] ) ? $attr['borderHColor'] : '' )
44 );
45 $border_css_tablet = self::generate_border_css( $attr, 'btn', 'tablet' );
46 $border_css_mobile = self::generate_border_css( $attr, 'btn', 'mobile' );
47
48 $selectors = array(
49
50 ' .wpcf__next-step-button-wrap' => array(
51 'text-align' => $attr['align'],
52 ),
53 ' .wpcf__next-step-button-link' => array_merge(
54 array(
55 'text-align' => $attr['textAlignment'],
56 'color' => $attr['textColor'],
57 'background-color' => $attr['backgroundColor'],
58 'opacity' => ( isset( $attr['backgroundOpacity'] ) && '' !== $attr['backgroundOpacity'] ) ? $attr['backgroundOpacity'] / 100 : '',
59 'padding-top' => Cartflows_Gb_Helper::get_css_value( $attr['paddingBtnTop'], $attr['paddingTypeDesktop'] ),
60 'padding-bottom' => Cartflows_Gb_Helper::get_css_value( $attr['paddingBtnBottom'], $attr['paddingTypeDesktop'] ),
61 'padding-left' => Cartflows_Gb_Helper::get_css_value( $attr['paddingBtnLeft'], $attr['paddingTypeDesktop'] ),
62 'padding-right' => Cartflows_Gb_Helper::get_css_value( $attr['paddingBtnRight'], $attr['paddingTypeDesktop'] ),
63 ),
64 $border_css
65 ),
66 ' .wpcf__next-step-button-link:hover' => array(
67 'background-color' => $attr['buttonHoverColor'],
68 'color' => $attr['textHoverColor'],
69 'border-color' => $attr['btnBorderHColor'],
70 ),
71 ' .wpcf__next-step-button-link .wpcf__next-step-button-content-wrap .wpcf__next-step-button-title-wrap' => array(
72 'font-family' => ( isset( $attr['titletextFontFamily'] ) && '' !== $attr['titletextFontFamily'] ) ? $attr['titletextFontFamily'] : '',
73 'text-transform' => $attr['titletextTransform'],
74 'letter-spacing' => Cartflows_Gb_Helper::get_css_value( $attr['titleletterSpacing'], 'px' ),
75 ),
76 ' .wpcf__next-step-button-link .wpcf__next-step-button-content-wrap .wpcf__next-step-button-sub-title' => array(
77 'margin-top' => Cartflows_Gb_Helper::get_css_value( $attr['titleBottomSpacing'], 'px' ),
78 'text-transform' => $attr['subtitletextTransform'],
79 'letter-spacing' => Cartflows_Gb_Helper::get_css_value( $attr['subtitleletterSpacing'], 'px' ),
80 ),
81 ' .wpcf__next-step-button-icon svg' => array(
82 'width' => Cartflows_Gb_Helper::get_css_value( $attr['iconSize'], 'px' ),
83 'height' => Cartflows_Gb_Helper::get_css_value( $attr['iconSize'], 'px' ),
84 'fill' => $attr['iconColor'],
85 ),
86 ' .wpcf__next-step-button-link:hover .wpcf__next-step-button-icon svg' => array(
87 'fill' => $attr['iconHoverColor'],
88 ),
89 );
90 if ( 'full' === $attr['align'] ) {
91 $selectors[' a.wpcf__next-step-button-link'] = array(
92 'width' => '100%',
93 'justify-content' => 'center',
94 );
95 }
96
97 $position = str_replace( '-', ' ', $attr['backgroundPosition'] );
98
99 if ( 'image' == $bg_type ) {
100
101 $selectors[' .wpcf__next-step-button-link']['background-color'] = $attr['backgroundImageColor'];
102
103 $selectors[' .wpcf__next-step-button-link']['background-image'] = isset( $attr['backgroundImage'] ) && isset( $attr['backgroundImage']['url'] ) ? "url('" . $attr['backgroundImage']['url'] . "' )" : null;
104 $selectors[' .wpcf__next-step-button-link']['background-position'] = $position;
105 $selectors[' .wpcf__next-step-button-link']['background-attachment'] = $attr['backgroundAttachment'];
106 $selectors[' .wpcf__next-step-button-link']['background-repeat'] = $attr['backgroundRepeat'];
107 $selectors[' .wpcf__next-step-button-link']['background-size'] = $attr['backgroundSize'];
108
109 } elseif ( 'gradient' === $bg_type ) {
110
111 $selectors[' .wpcf__next-step-button-link']['background-color'] = 'transparent';
112 $selectors[' .wpcf__next-step-button-link']['opacity'] = ( isset( $attr['backgroundOpacity'] ) && '' !== $attr['backgroundOpacity'] ) ? $attr['backgroundOpacity'] / 100 : '';
113 if ( $attr['gradientValue'] ) {
114 $selectors[' .wpcf__next-step-button-link']['background-image'] = $attr['gradientValue'];
115
116 } elseif ( 'linear' === $attr['gradientType'] ) {
117
118 $selectors[' .wpcf__next-step-button-link']['background-image'] = 'linear-gradient(' . $attr['gradientAngle'] . 'deg, ' . $attr['gradientColor1'] . ' ' . $attr['gradientLocation1'] . '%, ' . $attr['gradientColor2'] . ' ' . $attr['gradientLocation2'] . '%)';
119
120 } else {
121
122 $selectors[' .wpcf__next-step-button-link']['background-image'] = 'radial-gradient( at ' . $attr['gradientPosition'] . ', ' . $attr['gradientColor1'] . ' ' . $attr['gradientLocation1'] . '%, ' . $attr['gradientColor2'] . ' ' . $attr['gradientLocation2'] . '%)';
123 }
124 }
125
126 $margin_type = ( 'after_title' === $attr['iconPosition'] || 'after_title_sub_title' === $attr['iconPosition'] ) ? 'margin-left' : 'margin-right';
127
128 $selectors[' .wpcf__next-step-button-icon svg'][ $margin_type ] = Cartflows_Gb_Helper::get_css_value( $attr['iconSpacing'], 'px' );
129
130 $t_selectors = array(
131 ' .wpcf__next-step-button-wrap' => array(
132 'text-align' => $attr['talign'],
133 ),
134 ' .wpcf__next-step-button-link' => array(
135 'padding-top' => Cartflows_Gb_Helper::get_css_value( $attr['paddingBtnTopTablet'], $attr['paddingTypeTablet'] ),
136 'padding-bottom' => Cartflows_Gb_Helper::get_css_value( $attr['paddingBtnBottomTablet'], $attr['paddingTypeTablet'] ),
137 'padding-left' => Cartflows_Gb_Helper::get_css_value( $attr['paddingBtnLeftTablet'], $attr['paddingTypeTablet'] ),
138 'padding-right' => Cartflows_Gb_Helper::get_css_value( $attr['paddingBtnRightTablet'], $attr['paddingTypeTablet'] ),
139 ),
140 );
141
142 if ( 'full' === $attr['talign'] ) {
143 $t_selectors[' a.wpcf__next-step-button-link'] = array(
144 'width' => '100%',
145 'justify-content' => 'center',
146 );
147 }
148
149 $merged_tablet_css = array_merge( $t_selectors[' .wpcf__next-step-button-link'], $border_css_tablet );
150 $t_selectors[' .wpcf__next-step-button-link'] = $merged_tablet_css;
151
152 $m_selectors = array(
153 ' .wpcf__next-step-button-wrap' => array(
154 'text-align' => $attr['malign'],
155 ),
156 ' .wpcf__next-step-button-link' => array(
157 'padding-top' => Cartflows_Gb_Helper::get_css_value( $attr['paddingBtnTopMobile'], $attr['paddingTypeMobile'] ),
158 'padding-bottom' => Cartflows_Gb_Helper::get_css_value( $attr['paddingBtnBottomMobile'], $attr['paddingTypeMobile'] ),
159 'padding-left' => Cartflows_Gb_Helper::get_css_value( $attr['paddingBtnLeftMobile'], $attr['paddingTypeMobile'] ),
160 'padding-right' => Cartflows_Gb_Helper::get_css_value( $attr['paddingBtnRightMobile'], $attr['paddingTypeMobile'] ),
161 ),
162 );
163
164 if ( 'full' === $attr['malign'] ) {
165 $m_selectors[' a.wpcf__next-step-button-link'] = array(
166 'width' => '100%',
167 'justify-content' => 'center',
168 );
169 }
170
171 $merged_mobile_css = array_merge( $m_selectors[' .wpcf__next-step-button-link'], $border_css_mobile );
172 $m_selectors[' .wpcf__next-step-button-link'] = $merged_mobile_css;
173
174 $combined_selectors = array(
175 'desktop' => $selectors,
176 'tablet' => $t_selectors,
177 'mobile' => $m_selectors,
178 );
179
180 $combined_selectors = Cartflows_Gb_Helper::get_typography_css( $attr, 'title', ' .wpcf__next-step-button-link .wpcf__next-step-button-content-wrap .wpcf__next-step-button-title-wrap', $combined_selectors );
181 $combined_selectors = Cartflows_Gb_Helper::get_typography_css( $attr, 'subTitle', ' .wpcf__next-step-button-link .wpcf__next-step-button-content-wrap .wpcf__next-step-button-sub-title', $combined_selectors );
182
183 return Cartflows_Gb_Helper::generate_all_css( $combined_selectors, ' .cf-block-' . $id );
184 }
185
186 /**
187 * Get Order Detail Form Block CSS
188 *
189 * @since 1.6.15
190 * @param array $attr The block attributes.
191 * @param string $id The selector ID.
192 * @return array The Widget List.
193 */
194 public static function get_order_detail_form_css( $attr, $id ) {
195
196 $defaults = Cartflows_Gb_Helper::$block_list['wcfb/order-detail-form']['attributes'];
197 $bg_type = ( isset( $attr['backgroundType'] ) ) ? $attr['backgroundType'] : 'none';
198
199 $attr = array_merge( $defaults, $attr );
200
201 $t_selectors = array();
202 $m_selectors = array();
203 $selectors = array();
204
205 $order_overview = ( $attr['orderOverview'] ) ? 'block' : 'none';
206 $order_details = ( $attr['orderDetails'] ) ? 'block' : 'none';
207 $billing_address = ( $attr['billingAddress'] ) ? 'block' : 'none !important';
208 $shipping_address = ( $attr['shippingAddress'] ) ? 'block' : 'none !important';
209 $shipping_address_position = ( $attr['billingAddress'] ) ? 'right' : 'left';
210 $customer_details = ( $attr['billingAddress'] || $attr['shippingAddress'] ) ? 'block' : 'none';
211
212 $selectors = array(
213 // Genaral.
214 ' .wpcf__order-detail-form .wcf-thankyou-wrap .woocommerce-order ul.order_details' => array(
215 'display' => $order_overview,
216 ),
217 ' .wpcf__order-detail-form .wcf-thankyou-wrap .woocommerce-order section.woocommerce-order-details' => array(
218 'display' => $order_details,
219 ),
220 ' .wpcf__order-detail-form .wcf-thankyou-wrap .woocommerce-order .woocommerce-customer-details .woocommerce-column--billing-address' => array(
221 'display' => $billing_address,
222 ),
223 ' .wpcf__order-detail-form .wcf-thankyou-wrap .woocommerce-order .woocommerce-customer-details .woocommerce-column--shipping-address' => array(
224 'display' => $shipping_address,
225 'float' => $shipping_address_position,
226 ),
227 ' .wpcf__order-detail-form .wcf-thankyou-wrap .woocommerce-order.wcf-modern-tq-layout .woocommerce-customer-details .woocommerce-column--shipping-address, .wpcf__order-detail-form .wcf-thankyou-wrap .woocommerce-order.wcf-tq-layout-3 .woocommerce-customer-details .woocommerce-column--shipping-address' => array(
228 'vertical-align' => 'top',
229 'float' => 'unset',
230 ),
231 // Spacing.
232 ' .wpcf__order-detail-form .wcf-thankyou-wrap .woocommerce-order p.woocommerce-thankyou-order-received' => array(
233 'margin-bottom' => Cartflows_Gb_Helper::get_css_value( $attr['headingBottomSpacing'], 'px' ),
234 ),
235 ' .wpcf__order-detail-form .woocommerce-order ul.order_details, .wpcf__order-detail-form .woocommerce-order .woocommerce-customer-details, .wpcf__order-detail-form .woocommerce-order .woocommerce-order-details, .wpcf__order-detail-form .woocommerce-order .woocommerce-order-downloads, .wpcf__order-detail-form .woocommerce-order .woocommerce-bacs-bank-details, .wpcf__order-detail-form .woocommerce-order-details.mollie-instructions' => array(
236 'margin-bottom' => Cartflows_Gb_Helper::get_css_value( $attr['sectionSpacing'], 'px' ) . ' !important',
237 ),
238 // Heading.
239 ' .wpcf__order-detail-form .wcf-thankyou-wrap .woocommerce-order .woocommerce-thankyou-order-received' => array(
240 'text-align' => $attr['headingAlignment'],
241 'color' => $attr['headingColor'],
242 ),
243 // Sections.
244 ' .wpcf__order-detail-form .wcf-thankyou-wrap .woocommerce-order h2' => array(
245 'color' => $attr['sectionHeadingColor'],
246 ),
247 ' .wpcf__order-detail-form .wcf-thankyou-wrap .woocommerce-order, .wpcf__order-detail-form .woocommerce-order-downloads table.shop_table' => array(
248 'color' => $attr['sectionContentColor'],
249 ),
250 ' .wpcf__order-detail-form .wcf-thankyou-wrap .woocommerce-order:not(.wcf-modern-tq-layout):not(.wcf-tq-layout-3) .woocommerce-order-overview.woocommerce-thankyou-order-details.order_details, .wpcf__order-detail-form .wcf-thankyou-wrap .woocommerce-order .woocommerce-order-details, .wpcf__order-detail-form .wcf-thankyou-wrap .woocommerce-order .woocommerce-customer-details, .wpcf__order-detail-form .woocommerce-order-downloads' => array(
251 'background-color' => $attr['sectionBackgroundColor'],
252 ),
253
254 // Order Overview.
255 ' .wpcf__order-detail-form .wcf-thankyou-wrap .woocommerce-order .woocommerce-order-overview.woocommerce-thankyou-order-details.order_details' => array(
256 'color' => $attr['orderOverviewTextColor'],
257 ),
258 ' .wpcf__order-detail-form .wcf-thankyou-wrap .woocommerce-order ul.woocommerce-order-overview.woocommerce-thankyou-order-details.order_details li' => array(
259 'color' => $attr['orderOverviewTextColor'],
260 ),
261 // Downloads.
262 ' .wpcf__order-detail-form .woocommerce-order h2.woocommerce-order-downloads__title, .wpcf__order-detail-form .woocommerce-order .woocommerce-order-downloads h2.woocommerce-order-downloads__title' => array(
263 'color' => $attr['downloadHeadingColor'],
264 ),
265 ' .wpcf__order-detail-form .wcf-thankyou-wrap .woocommerce-order .woocommerce-order-downloads table.shop_table' => array(
266 'color' => $attr['downloadContentColor'],
267 ),
268 ' .wpcf__order-detail-form .wcf-thankyou-wrap .woocommerce-order .woocommerce-order-downloads' => array(
269 'background-color' => $attr['downloadBackgroundColor'],
270 ),
271 // Order Details.
272 ' .wpcf__order-detail-form .wcf-thankyou-wrap .woocommerce-order .woocommerce-order-details .woocommerce-order-details__title' => array(
273 'color' => $attr['orderDetailHeadingColor'],
274 ),
275 ' .wpcf__order-detail-form .wcf-thankyou-wrap .woocommerce-order .woocommerce-order-details .woocommerce-table' => array(
276 'color' => $attr['orderDetailContentColor'],
277 ),
278 ' .wpcf__order-detail-form .wcf-thankyou-wrap .woocommerce-order .woocommerce-order-details' => array(
279 'background-color' => $attr['orderDetailBackgroundColor'],
280 ),
281 // Customer Details.
282 ' .wpcf__order-detail-form .wcf-thankyou-wrap .woocommerce-order .woocommerce-customer-details .woocommerce-column__title, .wpcf__order-detail-form .wcf-thankyou-wrap .woocommerce-order.wcf-tq-layout-3 .woocommerce-customer-details .woocommerce-customer-details__title' => array(
283 'color' => $attr['customerDetailHeadingColor'],
284 ),
285 ' .wpcf__order-detail-form .wcf-thankyou-wrap .woocommerce-order .woocommerce-customer-details address, .wpcf__order-detail-form .wcf-thankyou-wrap .woocommerce-order.wcf-tq-layout-3 .woocommerce-customer-details table.customer-details-table *' => array(
286 'color' => $attr['customerDetailContentColor'],
287 ),
288 ' .wpcf__order-detail-form .wcf-thankyou-wrap .woocommerce-order section.woocommerce-customer-details' => array(
289 'background-color' => $attr['customerDetailBackgroundColor'],
290 'display' => $customer_details,
291 ),
292
293 );
294
295 $selectors[' .wpcf__order-detail-form .wcf-thankyou-wrap .woocommerce-order:not(.wcf-modern-tq-layout):not(.wcf-tq-layout-3) .woocommerce-order-overview.woocommerce-thankyou-order-details.order_details, .wpcf__order-detail-form .wcf-thankyou-wrap .woocommerce-order .woocommerce-order-details, .wpcf__order-detail-form .wcf-thankyou-wrap .woocommerce-order .woocommerce-customer-details, .wpcf__order-detail-form .woocommerce-order-downloads'] = array(
296 'opacity' => ( isset( $attr['backgroundOpacity'] ) && '' !== $attr['backgroundOpacity'] ) ? $attr['backgroundOpacity'] / 100 : '',
297 'background-color' => $attr['backgroundColor'],
298 );
299
300 $position = str_replace( '-', ' ', $attr['backgroundPosition'] );
301
302 if ( 'image' == $bg_type ) {
303 $selectors[' .wpcf__order-detail-form .wcf-thankyou-wrap .woocommerce-order .woocommerce-order-overview.woocommerce-thankyou-order-details.order_details, .wpcf__order-detail-form .wcf-thankyou-wrap .woocommerce-order .woocommerce-order-details, .wpcf__order-detail-form .wcf-thankyou-wrap .woocommerce-order .woocommerce-customer-details, .wpcf__order-detail-form .woocommerce-order-downloads'] = array(
304 'opacity' => ( isset( $attr['backgroundOpacity'] ) && '' !== $attr['backgroundOpacity'] ) ? $attr['backgroundOpacity'] / 100 : 0,
305 'background-color' => $attr['backgroundImageColor'],
306 'background-image' => ( isset( $attr['backgroundImage'] ) && isset( $attr['backgroundImage']['url'] ) ) ? "url('" . $attr['backgroundImage']['url'] . "' )" : null,
307 'background-position' => $position,
308 'background-attachment' => $attr['backgroundAttachment'],
309 'background-repeat' => $attr['backgroundRepeat'],
310 'background-size' => $attr['backgroundSize'],
311 );
312 } elseif ( 'gradient' === $bg_type ) {
313
314 $selectors[' .wpcf__order-detail-form .wcf-thankyou-wrap .woocommerce-order .woocommerce-order-overview.woocommerce-thankyou-order-details.order_details, .wpcf__order-detail-form .wcf-thankyou-wrap .woocommerce-order .woocommerce-order-details, .wpcf__order-detail-form .wcf-thankyou-wrap .woocommerce-order .woocommerce-customer-details, .wpcf__order-detail-form .woocommerce-order-downloads']['background-color'] = 'transparent';
315 $selectors[' .wpcf__order-detail-form .wcf-thankyou-wrap .woocommerce-order .woocommerce-order-overview.woocommerce-thankyou-order-details.order_details, .wpcf__order-detail-form .wcf-thankyou-wrap .woocommerce-order .woocommerce-order-details, .wpcf__order-detail-form .wcf-thankyou-wrap .woocommerce-order .woocommerce-customer-details, .wpcf__order-detail-form .woocommerce-order-downloads']['opacity'] = ( isset( $attr['backgroundOpacity'] ) && '' !== $attr['backgroundOpacity'] ) ? $attr['backgroundOpacity'] / 100 : '';
316 if ( $attr['gradientValue'] ) {
317 $selectors[' .wpcf__order-detail-form .wcf-thankyou-wrap .woocommerce-order .woocommerce-order-overview.woocommerce-thankyou-order-details.order_details, .wpcf__order-detail-form .wcf-thankyou-wrap .woocommerce-order .woocommerce-order-details, .wpcf__order-detail-form .wcf-thankyou-wrap .woocommerce-order .woocommerce-customer-details, .wpcf__order-detail-form .woocommerce-order-downloads']['background-image'] = $attr['gradientValue'];
318
319 } elseif ( 'linear' === $attr['gradientType'] ) {
320
321 $selectors[' .wpcf__order-detail-form .wcf-thankyou-wrap .woocommerce-order .woocommerce-order-overview.woocommerce-thankyou-order-details.order_details, .wpcf__order-detail-form .wcf-thankyou-wrap .woocommerce-order .woocommerce-order-details, .wpcf__order-detail-form .wcf-thankyou-wrap .woocommerce-order .woocommerce-customer-details, .wpcf__order-detail-form .woocommerce-order-downloads']['background-image'] = 'linear-gradient(' . $attr['gradientAngle'] . 'deg, ' . $attr['gradientColor1'] . ' ' . $attr['gradientLocation1'] . '%, ' . $attr['gradientColor2'] . ' ' . $attr['gradientLocation2'] . '%)';
322
323 } else {
324
325 $selectors[' .wpcf__order-detail-form .wcf-thankyou-wrap .woocommerce-order .woocommerce-order-overview.woocommerce-thankyou-order-details.order_details, .wpcf__order-detail-form .wcf-thankyou-wrap .woocommerce-order .woocommerce-order-details, .wpcf__order-detail-form .wcf-thankyou-wrap .woocommerce-order .woocommerce-customer-details, .wpcf__order-detail-form .woocommerce-order-downloads']['background-image'] = 'radial-gradient( at ' . $attr['gradientPosition'] . ', ' . $attr['gradientColor1'] . ' ' . $attr['gradientLocation1'] . '%, ' . $attr['gradientColor2'] . ' ' . $attr['gradientLocation2'] . '%)';
326 }
327 }
328 // Order review.
329 $selectors[' .wpcf__order-detail-form .wcf-thankyou-wrap .woocommerce-order .woocommerce-order-overview.woocommerce-thankyou-order-details.order_details'] = array(
330 'opacity' => ( isset( $attr['odbackgroundOpacity'] ) && '' !== $attr['odbackgroundOpacity'] ) ? $attr['odbackgroundOpacity'] / 100 : 0.79,
331 'background-color' => $attr['odbackgroundColor'],
332 );
333
334 $position = str_replace( '-', ' ', $attr['backgroundPosition'] );
335
336 if ( 'image' == $attr['odbackgroundType'] ) {
337 $selectors[' .wpcf__order-detail-form .wcf-thankyou-wrap .woocommerce-order .woocommerce-order-overview.woocommerce-thankyou-order-details.order_details'] = array(
338 'opacity' => ( isset( $attr['odbackgroundOpacity'] ) && '' !== $attr['odbackgroundOpacity'] ) ? $attr['odbackgroundOpacity'] / 100 : 0,
339 'background-color' => $attr['odbackgroundImageColor'],
340 'background-image' => ( isset( $attr['odbackgroundImage'] ) && isset( $attr['odbackgroundImage']['url'] ) ) ? "url('" . $attr['odbackgroundImage']['url'] . "' )" : null,
341 'background-position' => $position,
342 'background-attachment' => $attr['odbackgroundAttachment'],
343 'background-repeat' => $attr['odbackgroundRepeat'],
344 'background-size' => $attr['odbackgroundSize'],
345 );
346 } elseif ( 'gradient' === $attr['odbackgroundType'] ) {
347
348 $selectors[' .wpcf__order-detail-form .wcf-thankyou-wrap .woocommerce-order .woocommerce-order-overview.woocommerce-thankyou-order-details.order_details']['background-color'] = 'transparent';
349 $selectors[' .wpcf__order-detail-form .wcf-thankyou-wrap .woocommerce-order .woocommerce-order-overview.woocommerce-thankyou-order-details.order_details']['opacity'] = ( isset( $attr['backgroundOpacity'] ) && '' !== $attr['backgroundOpacity'] ) ? $attr['backgroundOpacity'] / 100 : '';
350 if ( $attr['odgradientValue'] ) {
351 $selectors[' .wpcf__order-detail-form .wcf-thankyou-wrap .woocommerce-order .woocommerce-order-overview.woocommerce-thankyou-order-details.order_details']['background-image'] = $attr['odgradientValue'];
352
353 } elseif ( 'linear' === $attr['gradientType'] ) {
354
355 $selectors[' .wpcf__order-detail-form .wcf-thankyou-wrap .woocommerce-order .woocommerce-order-overview.woocommerce-thankyou-order-details.order_details']['background-image'] = 'linear-gradient(' . $attr['gradientAngle'] . 'deg, ' . $attr['gradientColor1'] . ' ' . $attr['gradientLocation1'] . '%, ' . $attr['gradientColor2'] . ' ' . $attr['gradientLocation2'] . '%)';
356 } else {
357
358 $selectors[' .wpcf__order-detail-form .wcf-thankyou-wrap .woocommerce-order .woocommerce-order-overview.woocommerce-thankyou-order-details.order_details']['background-image'] = 'radial-gradient( at ' . $attr['gradientPosition'] . ', ' . $attr['gradientColor1'] . ' ' . $attr['gradientLocation1'] . '%, ' . $attr['gradientColor2'] . ' ' . $attr['gradientLocation2'] . '%)';
359 }
360 }
361 // Downloads.
362 $selectors[' .wpcf__order-detail-form .wcf-thankyou-wrap .woocommerce-order .woocommerce-order-downloads'] = array(
363 'opacity' => ( isset( $attr['dbackgroundOpacity'] ) && '' !== $attr['dbackgroundOpacity'] ) ? $attr['dbackgroundOpacity'] / 100 : 0.79,
364 'background-color' => $attr['dbackgroundType'],
365 );
366
367 $dposition = str_replace( '-', ' ', $attr['dbackgroundPosition'] );
368
369 if ( 'image' == $attr['dbackgroundType'] ) {
370 $selectors[' .wpcf__order-detail-form .wcf-thankyou-wrap .woocommerce-order .woocommerce-order-downloads'] = array(
371 'opacity' => ( isset( $attr['dbackgroundOpacity'] ) && '' !== $attr['dbackgroundOpacity'] ) ? $attr['dbackgroundOpacity'] / 100 : 0,
372 'background-color' => $attr['dbackgroundImageColor'],
373 'background-image' => ( isset( $attr['dbackgroundImage'] ) && isset( $attr['dbackgroundImage']['url'] ) ) ? "url('" . $attr['dbackgroundImage']['url'] . "' )" : null,
374 'background-position' => $dposition,
375 'background-attachment' => $attr['dbackgroundAttachment'],
376 'background-repeat' => $attr['dbackgroundRepeat'],
377 'background-size' => $attr['dbackgroundSize'],
378 );
379 } elseif ( 'gradient' === $attr['dbackgroundType'] ) {
380
381 $selectors[' .wpcf__order-detail-form .wcf-thankyou-wrap .woocommerce-order .woocommerce-order-downloads']['background-color'] = 'transparent';
382 $selectors[' .wpcf__order-detail-form .wcf-thankyou-wrap .woocommerce-order .woocommerce-order-downloads']['opacity'] = ( isset( $attr['backgroundOpacity'] ) && '' !== $attr['backgroundOpacity'] ) ? $attr['backgroundOpacity'] / 100 : '';
383 if ( $attr['dgradientValue'] ) {
384 $selectors[' .wpcf__order-detail-form .wcf-thankyou-wrap .woocommerce-order .woocommerce-order-downloads']['background-image'] = $attr['dgradientValue'];
385
386 } elseif ( 'linear' === $attr['gradientType'] ) {
387
388 $selectors[' .wpcf__order-detail-form .wcf-thankyou-wrap .woocommerce-order .woocommerce-order-downloads']['background-image'] = 'linear-gradient(' . $attr['gradientAngle'] . 'deg, ' . $attr['gradientColor1'] . ' ' . $attr['gradientLocation1'] . '%, ' . $attr['gradientColor2'] . ' ' . $attr['gradientLocation2'] . '%)';
389 } else {
390
391 $selectors[' .wpcf__order-detail-form .wcf-thankyou-wrap .woocommerce-order .woocommerce-order-downloads']['background-image'] = 'radial-gradient( at ' . $attr['gradientPosition'] . ', ' . $attr['gradientColor1'] . ' ' . $attr['gradientLocation1'] . '%, ' . $attr['gradientColor2'] . ' ' . $attr['gradientLocation2'] . '%)';
392 }
393 }
394 // Order details.
395 $selectors[' .wpcf__order-detail-form .wcf-thankyou-wrap .woocommerce-order .woocommerce-order-details'] = array(
396 'opacity' => ( isset( $attr['odetailbackgroundOpacity'] ) && '' !== $attr['odetailbackgroundOpacity'] ) ? $attr['odetailbackgroundOpacity'] / 100 : 0.79,
397 'background-color' => $attr['odetailbackgroundColor'],
398 );
399
400 $odetailposition = str_replace( '-', ' ', $attr['odetailbackgroundPosition'] );
401
402 if ( 'image' == $attr['odetailbackgroundType'] ) {
403 $selectors[' .wpcf__order-detail-form .wcf-thankyou-wrap .woocommerce-order .woocommerce-order-details'] = array(
404 'opacity' => ( isset( $attr['odetailbackgroundOpacity'] ) && '' !== $attr['odetailbackgroundOpacity'] ) ? $attr['odetailbackgroundOpacity'] / 100 : 0,
405 'background-color' => $attr['odetailbackgroundImageColor'],
406 'background-image' => ( isset( $attr['odetailbackgroundImage'] ) && isset( $attr['odetailbackgroundImage']['url'] ) ) ? "url('" . $attr['odetailbackgroundImage']['url'] . "' )" : null,
407 'background-position' => $odetailposition,
408 'background-attachment' => $attr['odetailbackgroundAttachment'],
409 'background-repeat' => $attr['odetailbackgroundRepeat'],
410 'background-size' => $attr['odetailbackgroundSize'],
411 );
412 } elseif ( 'gradient' === $attr['odetailbackgroundType'] ) {
413
414 $selectors[' .wpcf__order-detail-form .wcf-thankyou-wrap .woocommerce-order .woocommerce-order-details']['background-color'] = 'transparent';
415 $selectors[' .wpcf__order-detail-form .wcf-thankyou-wrap .woocommerce-order .woocommerce-order-details']['opacity'] = ( isset( $attr['backgroundOpacity'] ) && '' !== $attr['backgroundOpacity'] ) ? $attr['backgroundOpacity'] / 100 : '';
416 if ( $attr['odetailgradientValue'] ) {
417 $selectors[' .wpcf__order-detail-form .wcf-thankyou-wrap .woocommerce-order .woocommerce-order-details']['background-image'] = $attr['odetailgradientValue'];
418
419 } elseif ( 'linear' === $attr['gradientType'] ) {
420
421 $selectors[' .wpcf__order-detail-form .wcf-thankyou-wrap .woocommerce-order .woocommerce-order-details']['background-image'] = 'linear-gradient(' . $attr['gradientAngle'] . 'deg, ' . $attr['gradientColor1'] . ' ' . $attr['gradientLocation1'] . '%, ' . $attr['gradientColor2'] . ' ' . $attr['gradientLocation2'] . '%)';
422 } else {
423
424 $selectors[' .wpcf__order-detail-form .wcf-thankyou-wrap .woocommerce-order .woocommerce-order-details']['background-image'] = 'radial-gradient( at ' . $attr['gradientPosition'] . ', ' . $attr['gradientColor1'] . ' ' . $attr['gradientLocation1'] . '%, ' . $attr['gradientColor2'] . ' ' . $attr['gradientLocation2'] . '%)';
425 }
426 }
427 // Customer details.
428 $selectors[' .wpcf__order-detail-form .wcf-thankyou-wrap .woocommerce-order .woocommerce-customer-details'] = array(
429 'opacity' => ( isset( $attr['cdetailsbackgroundOpacity'] ) && '' !== $attr['cdetailsbackgroundOpacity'] ) ? $attr['cdetailsbackgroundOpacity'] / 100 : 0.79,
430 'background-color' => $attr['cdetailbackgroundColor'],
431 );
432
433 $cdetailposition = str_replace( '-', ' ', $attr['cdetailbackgroundPosition'] );
434
435 if ( 'image' == $attr['cdetailbackgroundType'] ) {
436 $selectors[' .wpcf__order-detail-form .wcf-thankyou-wrap .woocommerce-order .woocommerce-customer-details'] = array(
437 'opacity' => ( isset( $attr['cdetailsbackgroundOpacity'] ) && '' !== $attr['cdetailsbackgroundOpacity'] ) ? $attr['cdetailsbackgroundOpacity'] / 100 : 0,
438 'background-color' => $attr['cdetailsbackgroundImageColor'],
439 'background-image' => ( isset( $attr['cdetailbackgroundImage'] ) && isset( $attr['cdetailbackgroundImage']['url'] ) ) ? "url('" . $attr['cdetailbackgroundImage']['url'] . "' )" : null,
440 'background-position' => $cdetailposition,
441 'background-attachment' => $attr['cdetailbackgroundAttachment'],
442 'background-repeat' => $attr['cdetailbackgroundRepeat'],
443 'background-size' => $attr['cdetailbackgroundSize'],
444 );
445 } elseif ( 'gradient' === $attr['cdetailbackgroundType'] ) {
446
447 $selectors[' .wpcf__order-detail-form .wcf-thankyou-wrap .woocommerce-order .woocommerce-customer-details']['background-color'] = 'transparent';
448 $selectors[' .wpcf__order-detail-form .wcf-thankyou-wrap .woocommerce-order .woocommerce-customer-details']['opacity'] = ( isset( $attr['backgroundOpacity'] ) && '' !== $attr['backgroundOpacity'] ) ? $attr['backgroundOpacity'] / 100 : '';
449 if ( $attr['cdetailgradientValue'] ) {
450 $selectors[' .wpcf__order-detail-form .wcf-thankyou-wrap .woocommerce-order .woocommerce-customer-details']['background-image'] = $attr['cdetailgradientValue'];
451
452 } elseif ( 'linear' === $attr['gradientType'] ) {
453
454 $selectors[' .wpcf__order-detail-form .wcf-thankyou-wrap .woocommerce-order .woocommerce-customer-details']['background-image'] = 'linear-gradient(' . $attr['gradientAngle'] . 'deg, ' . $attr['gradientColor1'] . ' ' . $attr['gradientLocation1'] . '%, ' . $attr['gradientColor2'] . ' ' . $attr['gradientLocation2'] . '%)';
455 } else {
456
457 $selectors[' .wpcf__order-detail-form .wcf-thankyou-wrap .woocommerce-order .woocommerce-customer-details']['background-image'] = 'radial-gradient( at ' . $attr['gradientPosition'] . ', ' . $attr['gradientColor1'] . ' ' . $attr['gradientLocation1'] . '%, ' . $attr['gradientColor2'] . ' ' . $attr['gradientLocation2'] . '%)';
458 }
459 }
460 $combined_selectors = array(
461 'desktop' => $selectors,
462 'tablet' => $t_selectors,
463 'mobile' => $m_selectors,
464 );
465
466 // Heading.
467 $combined_selectors = Cartflows_Gb_Helper::get_typography_css( $attr, 'heading', ' .wpcf__order-detail-form .wcf-thankyou-wrap .woocommerce-order .woocommerce-thankyou-order-received', $combined_selectors );
468 // Sections.
469 $combined_selectors = Cartflows_Gb_Helper::get_typography_css( $attr, 'sectionHeading', ' .wpcf__order-detail-form .wcf-thankyou-wrap .woocommerce-order h2', $combined_selectors );
470 $combined_selectors = Cartflows_Gb_Helper::get_typography_css( $attr, 'sectionContent', ' .wpcf__order-detail-form .wcf-thankyou-wrap .woocommerce-order .woocommerce-order-overview.woocommerce-thankyou-order-details.order_details li, .wpcf__order-detail-form .wcf-thankyou-wrap .woocommerce-order p, .wpcf__order-detail-form .wcf-thankyou-wrap .woocommerce-order .woocommerce-order-details .woocommerce-table, .wpcf__order-detail-form .wcf-thankyou-wrap .woocommerce-order .woocommerce-customer-details address, .wpcf__order-detail-form .woocommerce-order-downloads table.shop_table', $combined_selectors );
471 // Order Overview.
472 $combined_selectors = Cartflows_Gb_Helper::get_typography_css( $attr, 'orderOverview', ' .wpcf__order-detail-form .wcf-thankyou-wrap .woocommerce-order .woocommerce-order-overview.woocommerce-thankyou-order-details.order_details li', $combined_selectors );
473 // Downloads.
474 $combined_selectors = Cartflows_Gb_Helper::get_typography_css( $attr, 'downloadHeading', ' .wpcf__order-detail-form .woocommerce-order h2.woocommerce-order-downloads__title, .wpcf__order-detail-form .woocommerce-order .woocommerce-order-downloads h2.woocommerce-order-downloads__title', $combined_selectors );
475 $combined_selectors = Cartflows_Gb_Helper::get_typography_css( $attr, 'downloadContent', ' .wpcf__order-detail-form .wcf-thankyou-wrap .woocommerce-order .woocommerce-order-downloads table.shop_table', $combined_selectors );
476 // Order Details.
477 $combined_selectors = Cartflows_Gb_Helper::get_typography_css( $attr, 'orderDetailHeading', ' .wpcf__order-detail-form .wcf-thankyou-wrap .woocommerce-order .woocommerce-order-details .woocommerce-order-details__title', $combined_selectors );
478 $combined_selectors = Cartflows_Gb_Helper::get_typography_css( $attr, 'orderDetailContent', ' .wpcf__order-detail-form .wcf-thankyou-wrap .woocommerce-order .woocommerce-order-details .woocommerce-table', $combined_selectors );
479 // Customer Details.
480 $combined_selectors = Cartflows_Gb_Helper::get_typography_css( $attr, 'customerDetailHeading', ' .wpcf__order-detail-form .wcf-thankyou-wrap .woocommerce-order .woocommerce-customer-details .woocommerce-column__title', $combined_selectors );
481 $combined_selectors = Cartflows_Gb_Helper::get_typography_css( $attr, 'customerDetailContent', ' .wpcf__order-detail-form .wcf-thankyou-wrap .woocommerce-order .woocommerce-customer-details address, .wpcf__order-detail-form .wcf-thankyou-wrap .woocommerce-order .woocommerce-customer-details address p', $combined_selectors );
482
483 return Cartflows_Gb_Helper::generate_all_css( $combined_selectors, ' .cf-block-' . $id );
484 }
485
486 /**
487 * Get Checkout form CSS
488 *
489 * @since 1.6.15
490 * @param array $attr The block attributes.
491 * @param string $id The selector ID.
492 * @return array The Widget List.
493 */
494 public static function get_checkout_form_css( $attr, $id ) {
495
496 if ( wcf()->utils->is_step_post_type() && Cartflows_Helper::is_instant_layout_enabled() ) {
497 return;
498 }
499
500 $defaults = Cartflows_Gb_Helper::$block_list['wcfb/checkout-form']['attributes'];
501
502 $attr = array_merge( $defaults, (array) $attr );
503
504 $bg_type = ( isset( $attr['backgroundType'] ) ) ? $attr['backgroundType'] : 'none';
505 $overlay_type = ( isset( $attr['overlayType'] ) ) ? $attr['overlayType'] : 'none';
506
507 $box_shadow_position_css = $attr['boxShadowPosition'];
508
509 if ( 'outset' === $attr['boxShadowPosition'] ) {
510 $box_shadow_position_css = '';
511 }
512
513 $input_field_border_css = self::generate_border_css( $attr, 'field' );
514
515 $input_field_border_css = self::generate_deprecated_border_css(
516 $input_field_border_css,
517 ( isset( $attr['fieldBorderWidth'] ) ? $attr['fieldBorderWidth'] : '' ),
518 ( isset( $attr['fieldBorderRadius'] ) ? $attr['fieldBorderRadius'] : '' ),
519 ( isset( $attr['fieldBorderColor'] ) ? $attr['fieldBorderColor'] : '' ),
520 ( isset( $attr['fieldBorderStyle'] ) ? $attr['fieldBorderStyle'] : '' ),
521 ( isset( $attr['fieldBorderHColor'] ) ? $attr['fieldBorderHColor'] : '' )
522 );
523 $input_field_border_css_tablet = self::generate_border_css( $attr, 'field', 'tablet' );
524 $input_field_border_css_mobile = self::generate_border_css( $attr, 'field', 'mobile' );
525
526 $button_border_css = self::generate_border_css( $attr, 'button' );
527 $button_border_css_tablet = self::generate_border_css( $attr, 'button', 'tablet' );
528 $button_border_css_mobile = self::generate_border_css( $attr, 'button', 'mobile' );
529
530 $m_selectors = array(
531 ' .wcf-embed-checkout-form .woocommerce-checkout #payment ul.payment_methods' => array(
532 'padding-top' => Cartflows_Gb_Helper::get_css_value( $attr['paymentSectionpaddingTopMobile'], $attr['paymentSectionpaddingTypeMobile'] ),
533 'padding-right' => Cartflows_Gb_Helper::get_css_value( $attr['paymentSectionpaddingRightMobile'], $attr['paymentSectionpaddingTypeMobile'] ),
534 'padding-bottom' => Cartflows_Gb_Helper::get_css_value( $attr['paymentSectionpaddingBottomMobile'], $attr['paymentSectionpaddingTypeMobile'] ),
535 'padding-left' => Cartflows_Gb_Helper::get_css_value( $attr['paymentSectionpaddingLeftMobile'], $attr['paymentSectionpaddingTypeMobile'] ),
536 'margin-top' => Cartflows_Gb_Helper::get_css_value( $attr['paymentSectionMarginTopMobile'], $attr['paymentSectionMarginTypeMobile'] ),
537 'margin-right' => Cartflows_Gb_Helper::get_css_value( $attr['paymentSectionMarginRightMobile'], $attr['paymentSectionMarginTypeMobile'] ),
538 'margin-bottom' => Cartflows_Gb_Helper::get_css_value( $attr['paymentSectionMarginBottomMobile'], $attr['paymentSectionMarginTypeMobile'] ),
539 'margin-left' => Cartflows_Gb_Helper::get_css_value( $attr['paymentSectionMarginLeftMobile'], $attr['paymentSectionMarginTypeMobile'] ),
540 'border-radius' => Cartflows_Gb_Helper::get_css_value( $attr['sectionBorderRadius'], 'px' ),
541 ),
542 ' .wcf-embed-checkout-form .woocommerce #order_review button, .wcf-embed-checkout-form .woocommerce #payment button, .wcf-embed-checkout-form .woocommerce .wcf-customer-login-section__login-button, .wcf-embed-checkout-form-two-step .woocommerce .wcf-embed-checkout-form-nav-btns .wcf-next-button, .wcf-embed-checkout-form-two-step .woocommerce .wcf-embed-checkout-form-nav-btns a.wcf-next-button, .wcf-embed-checkout-form.wcf-embed-checkout-form-modern-checkout.wcf-modern-skin-multistep .woocommerce form .wcf-multistep-nav-btn-group .wcf-multistep-nav-next-btn' => $button_border_css_tablet,
543 ' .wcf-embed-checkout-form .woocommerce form .form-row input.input-text, .wcf-embed-checkout-form .woocommerce form .form-row select, .wcf-embed-checkout-form .woocommerce form .form-row textarea, .wcf-embed-checkout-form .select2-container--default .select2-selection--single, .wcf-embed-checkout-form #order_review .wcf-custom-coupon-field input[type="text"], .wcf-embed-checkout-form .woocommerce form .form-row input.input-text, .wcf-embed-checkout-form .woocommerce form .form-row textarea, .wcf-embed-checkout-form.wcf-embed-checkout-form-modern-checkout .woocommerce form .form-row textarea, .wcf-embed-checkout-form.wcf-embed-checkout-form-modern-checkout .woocommerce #order_review .input-text, .wcf-embed-checkout-form.wcf-embed-checkout-form-modern-checkout .select2-container--default .select2-selection--single, .wcf-embed-checkout-form .woocommerce form .form-row select.select, .wcf-embed-checkout-form .woocommerce form .form-row select' => $input_field_border_css_tablet,
544 ' .wcf-embed-checkout-form .woocommerce #order_review button, .wcf-embed-checkout-form .woocommerce #payment button, .wcf-embed-checkout-form .woocommerce .wcf-customer-login-section__login-button, .wcf-embed-checkout-form-two-step .woocommerce .wcf-embed-checkout-form-nav-btns .wcf-next-button, .wcf-embed-checkout-form-two-step .woocommerce .wcf-embed-checkout-form-nav-btns a.wcf-next-button' => array(
545 'letter-spacing' => Cartflows_Gb_Helper::get_css_value( $attr['buttonLetterSpacingMobile'], $attr['buttonLetterSpacingType'] ),
546 ),
547 );
548 $t_selectors = array(
549 ' .wcf-embed-checkout-form .woocommerce-checkout #payment ul.payment_methods' => array(
550 'padding-top' => Cartflows_Gb_Helper::get_css_value( $attr['paymentSectionpaddingTopTablet'], $attr['paymentSectionpaddingTypeTablet'] ),
551 'padding-right' => Cartflows_Gb_Helper::get_css_value( $attr['paymentSectionpaddingRightTablet'], $attr['paymentSectionpaddingTypeTablet'] ),
552 'padding-bottom' => Cartflows_Gb_Helper::get_css_value( $attr['paymentSectionpaddingBottomTablet'], $attr['paymentSectionpaddingTypeTablet'] ),
553 'padding-left' => Cartflows_Gb_Helper::get_css_value( $attr['paymentSectionpaddingLeftTablet'], $attr['paymentSectionpaddingTypeTablet'] ),
554 'margin-top' => Cartflows_Gb_Helper::get_css_value( $attr['paymentSectionMarginTopTablet'], $attr['paymentSectionMarginTypeTablet'] ),
555 'margin-right' => Cartflows_Gb_Helper::get_css_value( $attr['paymentSectionMarginRightTablet'], $attr['paymentSectionMarginTypeTablet'] ),
556 'margin-bottom' => Cartflows_Gb_Helper::get_css_value( $attr['paymentSectionMarginBottomTablet'], $attr['paymentSectionMarginTypeTablet'] ),
557 'margin-left' => Cartflows_Gb_Helper::get_css_value( $attr['paymentSectionMarginLeftTablet'], $attr['paymentSectionMarginTypeTablet'] ),
558 'border-radius' => Cartflows_Gb_Helper::get_css_value( $attr['sectionBorderRadius'], 'px' ),
559 ),
560 ' .wcf-embed-checkout-form .woocommerce #order_review button, .wcf-embed-checkout-form .woocommerce #payment button, .wcf-embed-checkout-form .woocommerce .wcf-customer-login-section__login-button, .wcf-embed-checkout-form-two-step .woocommerce .wcf-embed-checkout-form-nav-btns .wcf-next-button, .wcf-embed-checkout-form-two-step .woocommerce .wcf-embed-checkout-form-nav-btns a.wcf-next-button, .wcf-embed-checkout-form.wcf-embed-checkout-form-modern-checkout.wcf-modern-skin-multistep .woocommerce form .wcf-multistep-nav-btn-group .wcf-multistep-nav-next-btn' => $button_border_css_mobile,
561 ' .wcf-embed-checkout-form .woocommerce form .form-row input.input-text, .wcf-embed-checkout-form .woocommerce form .form-row select, .wcf-embed-checkout-form .woocommerce form .form-row textarea, .wcf-embed-checkout-form .select2-container--default .select2-selection--single, .wcf-embed-checkout-form #order_review .wcf-custom-coupon-field input[type="text"], .wcf-embed-checkout-form .woocommerce form .form-row input.input-text, .wcf-embed-checkout-form .woocommerce form .form-row textarea, .wcf-embed-checkout-form.wcf-embed-checkout-form-modern-checkout .woocommerce form .form-row textarea, .wcf-embed-checkout-form.wcf-embed-checkout-form-modern-checkout .woocommerce #order_review .input-text, .wcf-embed-checkout-form.wcf-embed-checkout-form-modern-checkout .select2-container--default .select2-selection--single, .wcf-embed-checkout-form .woocommerce form .form-row select.select, .wcf-embed-checkout-form .woocommerce form .form-row select' => $input_field_border_css_mobile,
562 ' .wcf-embed-checkout-form .woocommerce #order_review button, .wcf-embed-checkout-form .woocommerce #payment button, .wcf-embed-checkout-form .woocommerce .wcf-customer-login-section__login-button, .wcf-embed-checkout-form-two-step .woocommerce .wcf-embed-checkout-form-nav-btns .wcf-next-button, .wcf-embed-checkout-form-two-step .woocommerce .wcf-embed-checkout-form-nav-btns a.wcf-next-button' => array(
563 'letter-spacing' => Cartflows_Gb_Helper::get_css_value( $attr['buttonLetterSpacingTablet'], $attr['buttonLetterSpacingType'] ),
564 ),
565 );
566
567 $selectors = array(
568 ' .wcf-embed-checkout-form' => array(
569 '--wcf-primary-color' => $attr['globalbgColor'],
570 '--wcf-text-color' => $attr['globaltextColor'],
571 '--wcf-heading-color' => $attr['headBgColor'],
572 '--wcf-field-label-color' => $attr['fieldLabelColor'],
573 '--wcf-field-bg-color' => $attr['fieldBgColor'],
574 '--wcf-field-text-color' => $attr['fieldInputColor'],
575 '--wcf-field-border-color' => $attr['fieldBorderColor'],
576 '--wcf-field-error-label-color' => $attr['errorLabelColor'],
577 '--wcf-field-error-border-color' => $attr['errorFieldBorderColor'],
578 '--wcf-btn-text-color' => $attr['buttonTextColor'],
579 '--wcf-btn-bg-color' => $attr['backgroundColor'],
580 '--wcf-btn-hover-text-color' => $attr['buttonTextHoverColor'],
581 '--wcf-btn-bg-hover-color' => $attr['backgroundHoverColor'],
582 '--wcf-payment-section-label-color' => $attr['paymenttitleColor'],
583 '--wcf-payment-section-desc-text-color' => $attr['paymentdescriptionColor'],
584 '--wcf-payment-section-desc-bg-color' => $attr['informationbgColor'],
585 '--wcf-payment-section-bg-color' => $attr['sectionbgColor'],
586 ),
587 ' .cartflows_step-template .select2-container--default .select2-results__option--highlighted[aria-selected], .cartflows_step-template .select2-container--default .select2-results__option--highlighted[data-selected]' => array(
588 'background-color' => $attr['globalbgColor'],
589 ),
590 ' .cartflows_step-template .select2-container--default .select2-results__option--highlighted[aria-selected] ' => array(
591 'box-shadow' => '0 0 2px',
592 ),
593 ' .wcf-embed-checkout-form .woocommerce .woocommerce-checkout input[type="checkbox"]:focus, .wcf-embed-checkout-form .woocommerce .woocommerce-checkout #order_review input[type="checkbox"]:focus, .wcf-embed-checkout-form .woocommerce .woocommerce-checkout .woocommerce-account-fields input[type="checkbox"]:focus, .wcf-embed-checkout-form.wcf-embed-checkout-form-modern-checkout .woocommerce .woocommerce-checkout input[type="checkbox"]:focus, .wcf-embed-checkout-form.wcf-embed-checkout-form-modern-checkout .woocommerce #order_review input[type="checkbox"]:focus ' => array(
594 'box-shadow' => '0 0 2px',
595 ),
596 ' .wcf-embed-checkout-form .woocommerce #order_review button, .wcf-embed-checkout-form .woocommerce #payment button, .wcf-embed-checkout-form .woocommerce .wcf-customer-login-section__login-button, .wcf-embed-checkout-form-two-step .woocommerce .wcf-embed-checkout-form-nav-btns .wcf-next-button, .wcf-embed-checkout-form-two-step .woocommerce .wcf-embed-checkout-form-nav-btns a.wcf-next-button, .wcf-embed-checkout-form.wcf-embed-checkout-form-modern-checkout.wcf-modern-skin-multistep .woocommerce form .wcf-multistep-nav-btn-group .wcf-multistep-nav-next-btn' => array_merge(
597 array(
598 'background-color' => $attr['buttonBgColor'],
599 'text-transform' => $attr['buttonTransform'],
600 'letter-spacing' => Cartflows_Gb_Helper::get_css_value( $attr['buttonLetterSpacing'], $attr['buttonLetterSpacingType'] ),
601 ),
602 $button_border_css
603 ),
604 ' .wcf-embed-checkout-form .woocommerce #payment #place_order:hover' => array(
605 'border-color' => $attr['buttonBorderHColor'],
606 'background-color' => $attr['buttonBgHoverColor'],
607 ),
608 ' .wcf-embed-checkout-form .woocommerce #order_review button.wcf-btn-small:hover, .wcf-embed-checkout-form .woocommerce .wcf-customer-login-section__login-button:hover, .wcf-embed-checkout-form .wcf-custom-coupon-field button.wcf-submit-coupon, .wcf-embed-checkout-form.wcf-embed-checkout-form-modern-checkout.wcf-modern-skin-multistep .woocommerce form .wcf-multistep-nav-btn-group .wcf-multistep-nav-next-btn:hover' => array(
609 'border-color' => $attr['buttonBorderHColor'],
610 'background-color' => $attr['buttonBgHoverColor'],
611 ),
612 ' .wcf-embed-checkout-form .woocommerce-checkout #payment ul.payment_methods' => array(
613 'padding-top' => Cartflows_Gb_Helper::get_css_value( $attr['paymentSectionpaddingTop'], $attr['paymentSectionpaddingTypeDesktop'] ),
614 'padding-right' => Cartflows_Gb_Helper::get_css_value( $attr['paymentSectionpaddingRight'], $attr['paymentSectionpaddingTypeDesktop'] ),
615 'padding-bottom' => Cartflows_Gb_Helper::get_css_value( $attr['paymentSectionpaddingBottom'], $attr['paymentSectionpaddingTypeDesktop'] ),
616 'padding-left' => Cartflows_Gb_Helper::get_css_value( $attr['paymentSectionpaddingLeft'], $attr['paymentSectionpaddingTypeDesktop'] ),
617 'margin-top' => Cartflows_Gb_Helper::get_css_value( $attr['paymentSectionMarginTop'], $attr['paymentSectionMarginTypeDesktop'] ),
618 'margin-right' => Cartflows_Gb_Helper::get_css_value( $attr['paymentSectionMarginRight'], $attr['paymentSectionMarginTypeDesktop'] ),
619 'margin-bottom' => Cartflows_Gb_Helper::get_css_value( $attr['paymentSectionMarginBottom'], $attr['paymentSectionMarginTypeDesktop'] ),
620 'margin-left' => Cartflows_Gb_Helper::get_css_value( $attr['paymentSectionMarginLeft'], $attr['paymentSectionMarginTypeDesktop'] ),
621 'border-radius' => Cartflows_Gb_Helper::get_css_value( $attr['sectionBorderRadius'], 'px' ),
622 ),
623 ' .wcf-embed-checkout-form #payment .woocommerce-privacy-policy-text p' => array(
624 'color' => $attr['paymentdescriptionColor'],
625 ),
626 ' .wcf-embed-checkout-form .woocommerce form .form-row input.input-text, .wcf-embed-checkout-form .woocommerce form .form-row select, .wcf-embed-checkout-form .woocommerce form .form-row textarea, .wcf-embed-checkout-form .select2-container--default .select2-selection--single, .wcf-embed-checkout-form #order_review .wcf-custom-coupon-field input[type="text"], .wcf-embed-checkout-form .woocommerce form .form-row input.input-text, .wcf-embed-checkout-form .woocommerce form .form-row textarea, .wcf-embed-checkout-form.wcf-embed-checkout-form-modern-checkout .woocommerce form .form-row textarea, .wcf-embed-checkout-form.wcf-embed-checkout-form-modern-checkout .woocommerce #order_review .input-text, .wcf-embed-checkout-form.wcf-embed-checkout-form-modern-checkout .select2-container--default .select2-selection--single, .wcf-embed-checkout-form .woocommerce form .form-row select.select, .wcf-embed-checkout-form .woocommerce form .form-row select' => array(
627 $input_field_border_css,
628 ),
629 ' .wcf-embed-checkout-form .woocommerce form .form-row input.input-text:hover, .wcf-embed-checkout-form .woocommerce form .form-row select:hover, .wcf-embed-checkout-form .woocommerce form .form-row textarea:hover, .wcf-embed-checkout-form #order_review .wcf-custom-coupon-field input[type="text"]:hover, .wcf-embed-checkout-form .woocommerce form .form-row select#billing_country:hover, .wcf-embed-checkout-form .woocommerce form .form-row select:hover, .wcf-embed-checkout-form .woocommerce form .form-row select:hover, .wcf-embed-checkout-form.wcf-embed-checkout-form-modern-checkout .select2-container--default .select2-selection--single:hover, .wcf-embed-checkout-form .woocommerce form .form-row select.select:hover' => array(
630 'border-color' => $attr['fieldBorderHColor'],
631 ),
632 ' .woocommerce-NoticeGroup.woocommerce-NoticeGroup-checkout li, .wcf-embed-checkout-form .woocommerce .wcf-custom-coupon-field .woocommerce-error li' => array(
633 'color' => $attr['errorMsgColor'],
634 ),
635 ' .wcf-embed-checkout-form .woocommerce .woocommerce-NoticeGroup .woocommerce-error, .wcf-embed-checkout-form .woocommerce .woocommerce-notices-wrapper .woocommerce-error' => array(
636 'background-color' => $attr['errorMsgBgColor'],
637 'border-radius' => Cartflows_Gb_Helper::get_css_value( $attr['msgBorderRadius'], 'px' ),
638 'border-color' => $attr['errorMsgBorderColor'],
639 'padding-top' => Cartflows_Gb_Helper::get_css_value( $attr['msgHrPadding'], 'px' ),
640 'padding-right' => Cartflows_Gb_Helper::get_css_value( $attr['msgVrPadding'], 'px' ),
641 'padding-bottom' => Cartflows_Gb_Helper::get_css_value( $attr['msgHrPadding'], 'px' ),
642 'padding-left' => Cartflows_Gb_Helper::get_css_value( $attr['msgVrPadding'], 'px' ),
643 'border-width' => Cartflows_Gb_Helper::get_css_value( $attr['msgBorderSize'], 'px' ),
644 ),
645 ' .wcf-embed-checkout-form.wcf-embed-checkout-form-modern-checkout .woocommerce-checkout table.shop_table' => array(
646 'background-color' => $attr['orderReviewColumnColor'],
647 ),
648 ' .wcf-embed-checkout-form.wcf-embed-checkout-form-modern-checkout table.shop_table th, .wcf-embed-checkout-form.wcf-embed-checkout-form-modern-checkout table.shop_table td' => array(
649 'color' => $attr['orderReviewColumnTextColor'],
650 ),
651 ' .wcf-embed-checkout-form.wcf-embed-checkout-form-modern-checkout .woocommerce form .form-row input.input-text:focus, .wcf-embed-checkout-form.wcf-embed-checkout-form-modern-checkout .woocommerce form .form-row textarea:focus, .wcf-embed-checkout-form.wcf-embed-checkout-form-modern-checkout .woocommerce #order_review .wcf-custom-coupon-field input.input-text:focus' => array(
652 'box-shadow' => $attr['globalbgColor'] ? '0 0 0 1px ' . $attr['globalbgColor'] : '',
653 ),
654 );
655 if ( 'color' == $bg_type ) {
656 $selectors[' .wcf-embed-checkout-form .woocommerce #order_review button, .wcf-embed-checkout-form .woocommerce #payment button, .wcf-embed-checkout-form .woocommerce .wcf-customer-login-section__login-button, .wcf-embed-checkout-form .woocommerce form.woocommerce-form-login .form-row button, .wcf-embed-checkout-form .woocommerce #order_review button.wcf-btn-small, .wcf-embed-checkout-form .wcf-custom-coupon-field button.wcf-submit-coupon, .wcf-embed-checkout-form .woocommerce-checkout form.woocommerce-form-login .button, .wcf-embed-checkout-form .woocommerce-checkout form.checkout_coupon .button, .wcf-embed-checkout-form form.checkout_coupon .button, .wcf-embed-checkout-form-two-step .woocommerce .wcf-embed-checkout-form-nav-btns a.wcf-next-button, .wcf-embed-checkout-form.wcf-embed-checkout-form-modern-checkout.wcf-modern-skin-multistep .woocommerce form .wcf-multistep-nav-btn-group .wcf-multistep-nav-next-btn'] = array(
657 'opacity' => ( isset( $attr['backgroundOpacity'] ) && '' !== $attr['backgroundOpacity'] ) ? $attr['backgroundOpacity'] / 100 : 0.79,
658 'box-shadow' => Cartflows_Gb_Helper::get_css_value( $attr['boxShadowHOffset'], 'px' ) . ' ' . Cartflows_Gb_Helper::get_css_value( $attr['boxShadowVOffset'], 'px' ) . ' ' . Cartflows_Gb_Helper::get_css_value( $attr['boxShadowBlur'], 'px' ) . ' ' . Cartflows_Gb_Helper::get_css_value( $attr['boxShadowSpread'], 'px' ) . ' ' . $attr['boxShadowColor'] . ' ' . $box_shadow_position_css,
659 );
660 }
661
662 if ( 'gradient' == $bg_type ) {
663 $selectors[' .wcf-embed-checkout-form .woocommerce #payment button, .wcf-embed-checkout-form .woocommerce #order_review button, .wcf-embed-checkout-form .woocommerce form.woocommerce-form-login .form-row button, .wcf-embed-checkout-form .woocommerce #order_review button.wcf-btn-small, .wcf-embed-checkout-form .wcf-custom-coupon-field button.wcf-submit-coupon, .wcf-embed-checkout-form .woocommerce-checkout form.woocommerce-form-login .button, .wcf-embed-checkout-form .woocommerce-checkout form.checkout_coupon .button, .wcf-embed-checkout-form form.checkout_coupon .button, .wcf-embed-checkout-form-two-step .woocommerce .wcf-embed-checkout-form-nav-btns a.wcf-next-button, .wcf-embed-checkout-form.wcf-embed-checkout-form-modern-checkout.wcf-modern-skin-multistep .woocommerce form .wcf-multistep-nav-btn-group .wcf-multistep-nav-next-btn'] = array(
664 'box-shadow' => Cartflows_Gb_Helper::get_css_value( $attr['boxShadowHOffset'], 'px' ) . ' ' . Cartflows_Gb_Helper::get_css_value( $attr['boxShadowVOffset'], 'px' ) . ' ' . Cartflows_Gb_Helper::get_css_value( $attr['boxShadowBlur'], 'px' ) . ' ' . Cartflows_Gb_Helper::get_css_value( $attr['boxShadowSpread'], 'px' ) . ' ' . $attr['boxShadowColor'] . ' ' . $box_shadow_position_css,
665 );
666 }
667
668 $position = str_replace( '-', ' ', $attr['backgroundPosition'] );
669
670 if ( 'image' == $bg_type ) {
671 $selectors[' .wcf-embed-checkout-form .woocommerce #order_review button, .wcf-embed-checkout-form .woocommerce form.woocommerce-form-login .form-row button, .wcf-embed-checkout-form .woocommerce #order_review button.wcf-btn-small, .wcf-embed-checkout-form .wcf-custom-coupon-field button.wcf-submit-coupon, .wcf-embed-checkout-form .woocommerce-checkout form.woocommerce-form-login .button, .wcf-embed-checkout-form .woocommerce-checkout form.checkout_coupon .button, .wcf-embed-checkout-form form.checkout_coupon .button, .wcf-embed-checkout-form-two-step .woocommerce .wcf-embed-checkout-form-nav-btns a.wcf-next-button, .wcf-embed-checkout-form.wcf-embed-checkout-form-modern-checkout.wcf-modern-skin-multistep .woocommerce form .wcf-multistep-nav-btn-group .wcf-multistep-nav-next-btn'] = array(
672 'opacity' => ( isset( $attr['backgroundOpacity'] ) && '' !== $attr['backgroundOpacity'] ) ? $attr['backgroundOpacity'] / 100 : 0,
673 'background-color' => $attr['backgroundImageColor'],
674 'background-image' => ( isset( $attr['backgroundImage'] ) && isset( $attr['backgroundImage']['url'] ) ) ? "url('" . $attr['backgroundImage']['url'] . "' )" : null,
675 'background-position' => $position,
676 'background-attachment' => $attr['backgroundAttachment'],
677 'background-repeat' => $attr['backgroundRepeat'],
678 'background-size' => $attr['backgroundSize'],
679 'box-shadow' => Cartflows_Gb_Helper::get_css_value( $attr['boxShadowHOffset'], 'px' ) . ' ' . Cartflows_Gb_Helper::get_css_value( $attr['boxShadowVOffset'], 'px' ) . ' ' . Cartflows_Gb_Helper::get_css_value( $attr['boxShadowBlur'], 'px' ) . ' ' . Cartflows_Gb_Helper::get_css_value( $attr['boxShadowSpread'], 'px' ) . ' ' . $attr['boxShadowColor'] . ' ' . $box_shadow_position_css,
680 );
681 } elseif ( 'gradient' === $bg_type ) {
682
683 $selectors[' .wcf-embed-checkout-form .woocommerce #order_review button, .wcf-embed-checkout-form .woocommerce form.woocommerce-form-login .form-row button, .wcf-embed-checkout-form .woocommerce #order_review button.wcf-btn-small, .wcf-embed-checkout-form .wcf-custom-coupon-field button.wcf-submit-coupon, .wcf-embed-checkout-form .woocommerce-checkout form.woocommerce-form-login .button, .wcf-embed-checkout-form .woocommerce-checkout form.checkout_coupon .button, .wcf-embed-checkout-form form.checkout_coupon .button, .wcf-embed-checkout-form-two-step .woocommerce .wcf-embed-checkout-form-nav-btns a.wcf-next-button, .wcf-embed-checkout-form.wcf-embed-checkout-form-modern-checkout.wcf-modern-skin-multistep .woocommerce form .wcf-multistep-nav-btn-group .wcf-multistep-nav-next-btn']['background-color'] = 'transparent';
684 $selectors[' .wcf-embed-checkout-form .woocommerce #order_review button, .wcf-embed-checkout-form .woocommerce form.woocommerce-form-login .form-row button, .wcf-embed-checkout-form .woocommerce #order_review button.wcf-btn-small, .wcf-embed-checkout-form .wcf-custom-coupon-field button.wcf-submit-coupon, .wcf-embed-checkout-form .woocommerce-checkout form.woocommerce-form-login .button, .wcf-embed-checkout-form .woocommerce-checkout form.checkout_coupon .button, .wcf-embed-checkout-form form.checkout_coupon .button, .wcf-embed-checkout-form-two-step .woocommerce .wcf-embed-checkout-form-nav-btns a.wcf-next-button, .wcf-embed-checkout-form.wcf-embed-checkout-form-modern-checkout.wcf-modern-skin-multistep .woocommerce form .wcf-multistep-nav-btn-group .wcf-multistep-nav-next-btn']['opacity'] = ( isset( $attr['backgroundOpacity'] ) && '' !== $attr['backgroundOpacity'] ) ? $attr['backgroundOpacity'] / 100 : 0;
685 if ( $attr['gradientValue'] ) {
686 $selectors[' .wcf-embed-checkout-form .woocommerce #order_review button, .wcf-embed-checkout-form .woocommerce #payment button, .wcf-embed-checkout-form .woocommerce #wcf-customer-login-section__login-button, .wcf-embed-checkout-form .woocommerce form.woocommerce-form-login .form-row button, .wcf-embed-checkout-form .woocommerce #order_review button.wcf-btn-small, .wcf-embed-checkout-form .wcf-custom-coupon-field button.wcf-submit-coupon, .wcf-embed-checkout-form .woocommerce-checkout form.woocommerce-form-login .button, .wcf-embed-checkout-form .woocommerce-checkout form.checkout_coupon .button, .wcf-embed-checkout-form form.checkout_coupon .button, .wcf-embed-checkout-form-two-step .woocommerce .wcf-embed-checkout-form-nav-btns a.wcf-next-button, .wcf-embed-checkout-form.wcf-embed-checkout-form-modern-checkout.wcf-modern-skin-multistep .woocommerce form .wcf-multistep-nav-btn-group .wcf-multistep-nav-next-btn']['background-image'] = $attr['gradientValue'];
687
688 } elseif ( 'linear' === $attr['gradientType'] ) {
689
690 $selectors[' .wcf-embed-checkout-form .woocommerce #order_review button, .wcf-embed-checkout-form .woocommerce form.woocommerce-form-login .form-row button, .wcf-embed-checkout-form .woocommerce #order_review button.wcf-btn-small, .wcf-embed-checkout-form .wcf-custom-coupon-field button.wcf-submit-coupon, .wcf-embed-checkout-form .woocommerce-checkout form.woocommerce-form-login .button, .wcf-embed-checkout-form .woocommerce-checkout form.checkout_coupon .button, .wcf-embed-checkout-form form.checkout_coupon .button, .wcf-embed-checkout-form-two-step .woocommerce .wcf-embed-checkout-form-nav-btns a.wcf-next-button, .wcf-embed-checkout-form.wcf-embed-checkout-form-modern-checkout.wcf-modern-skin-multistep .woocommerce form .wcf-multistep-nav-btn-group .wcf-multistep-nav-next-btn']['background-image'] = 'linear-gradient(' . $attr['gradientAngle'] . 'deg, ' . $attr['gradientColor1'] . ' ' . $attr['gradientLocation1'] . '%, ' . $attr['gradientColor2'] . ' ' . $attr['gradientLocation2'] . '%)';
691 } else {
692
693 $selectors[' .wcf-embed-checkout-form .woocommerce #order_review button, .wcf-embed-checkout-form .woocommerce form.woocommerce-form-login .form-row button, .wcf-embed-checkout-form .woocommerce #order_review button.wcf-btn-small, .wcf-embed-checkout-form .wcf-custom-coupon-field button.wcf-submit-coupon, .wcf-embed-checkout-form .woocommerce-checkout form.woocommerce-form-login .button, .wcf-embed-checkout-form .woocommerce-checkout form.checkout_coupon .button, .wcf-embed-checkout-form form.checkout_coupon .button, .wcf-embed-checkout-form-two-step .woocommerce .wcf-embed-checkout-form-nav-btns a.wcf-next-button, .wcf-embed-checkout-form.wcf-embed-checkout-form-modern-checkout.wcf-modern-skin-multistep .woocommerce form .wcf-multistep-nav-btn-group .wcf-multistep-nav-next-btn']['background-image'] = 'radial-gradient( at ' . $attr['gradientPosition'] . ', ' . $attr['gradientColor1'] . ' ' . $attr['gradientLocation1'] . '%, ' . $attr['gradientColor2'] . ' ' . $attr['gradientLocation2'] . '%)';
694 }
695 }
696
697 $combined_selectors = array(
698 'desktop' => $selectors,
699 'tablet' => $t_selectors,
700 'mobile' => $m_selectors,
701 );
702
703 $combined_selectors = Cartflows_Gb_Helper::get_typography_css( $attr, 'global', ' .wcf-embed-checkout-form .woocommerce', $combined_selectors );
704 $combined_selectors = Cartflows_Gb_Helper::get_typography_css( $attr, 'head', ' .wcf-embed-checkout-form .woocommerce h3, .wcf-embed-checkout-form .woocommerce-checkout #order_review_heading, .wcf-embed-checkout-form .woocommerce h3, .wcf-embed-checkout-form .woocommerce h3 span, .wcf-embed-checkout-form.wcf-embed-checkout-form-modern-checkout .woocommerce form .woocommerce-billing-fields-custom #customer_information_heading', $combined_selectors );
705 $combined_selectors = Cartflows_Gb_Helper::get_typography_css( $attr, 'button', ' .wcf-embed-checkout-form .woocommerce #order_review button, .wcf-embed-checkout-form .woocommerce #payment button, .wcf-embed-checkout-form.wcf-embed-checkout-form-modern-checkout .woocommerce #payment button, .wcf-embed-checkout-form.wcf-embed-checkout-form-modern-checkout .woocommerce #order_review button.wcf-btn-small, .wcf-embed-checkout-form.wcf-embed-checkout-form-modern-checkout.wcf-modern-skin-multistep .woocommerce form .wcf-multistep-nav-btn-group .wcf-multistep-nav-next-btn', $combined_selectors );
706 $combined_selectors = Cartflows_Gb_Helper::get_typography_css( $attr, 'input', ' .wcf-embed-checkout-form .woocommerce form p.form-row label, .wcf-embed-checkout-form.wcf-embed-checkout-form-modern-checkout .woocommerce form .form-row input.input-text, .wcf-embed-checkout-form .woocommerce form .form-row input.input-text, .wcf-embed-checkout-form .woocommerce form .form-row textarea, .wcf-embed-checkout-form .woocommerce form .form-row select#billing_country, .wcf-embed-checkout-form .woocommerce form .form-row select#billing_state, .wcf-embed-checkout-form .woocommerce form .form-row select#shipping_country, .wcf-embed-checkout-form .woocommerce form .form-row select#shipping_state, span#select2-billing_country-container, .wcf-embed-checkout-form .select2-container--default .select2-selection--single .select2-selection__rendered, .wcf-embed-checkout-form.wcf-embed-checkout-form-modern-checkout .select2-container--default .select2-selection--single .select2-selection__rendered, .wcf-embed-checkout-form #order_review .wcf-custom-coupon-field input[type="text"], .wcf-embed-checkout-form .woocommerce form .form-row input.input-text, .wcf-embed-checkout-form .woocommerce form .form-row textarea, .wcf-embed-checkout-form .select2-container--default .select2-selection--single, .wcf-embed-checkout-form .woocommerce form .form-row select, .wcf-embed-checkout-form .woocommerce form .form-row select, .wcf-embed-checkout-form ::placeholder, .wcf-embed-checkout-form ::-webkit-input-placeholder, .wcf-embed-checkout-form .woocommerce #payment [type="radio"]:checked + label, .wcf-embed-checkout-form .woocommerce #payment [type="radio"]:not(:checked) + label, .wcf-embed-checkout-form.wcf-field-modern-label .woocommerce #customer_details .form-row:not( .wcf-anim-hidden-label ) label:not( .woocommerce-form__label-for-checkbox, .checkbox, .input-radio)', $combined_selectors );
707
708 return Cartflows_Gb_Helper::generate_all_css( $combined_selectors, ' .cf-block-' . $id );
709 }
710
711 /**
712 * Get Optin Form Block CSS
713 *
714 * @since 1.6.15
715 * @param array $attr The block attributes.
716 * @param string $id The selector ID.
717 * @return array The Widget List.
718 */
719 public static function get_optin_form_css( $attr, $id ) {
720
721 $defaults = Cartflows_Gb_Helper::$block_list['wcfb/optin-form']['attributes'];
722
723 $attr = array_merge( $defaults, $attr );
724
725 $t_selectors = array();
726 $m_selectors = array();
727 $selectors = array();
728
729 $input_field_border_css = self::generate_border_css( $attr, 'inputField' );
730 $input_field_border_css = self::generate_deprecated_border_css(
731 $input_field_border_css,
732 ( isset( $attr['inputFieldBorderWidth'] ) ? $attr['inputFieldBorderWidth'] : '' ),
733 ( isset( $attr['inputFieldBorderRadius'] ) ? $attr['inputFieldBorderRadius'] : '' ),
734 ( isset( $attr['inputFieldBorderColor'] ) ? $attr['inputFieldBorderColor'] : '' ),
735 ( isset( $attr['inputFieldBorderStyle'] ) ? $attr['inputFieldBorderStyle'] : '' ),
736 ( isset( $attr['inputFieldBorderHColor'] ) ? $attr['inputFieldBorderHColor'] : '' )
737 );
738 $input_field_border_css_tablet = self::generate_border_css( $attr, 'inputField', 'tablet' );
739 $input_field_border_css_mobile = self::generate_border_css( $attr, 'inputField', 'mobile' );
740
741 $submit_button_border_css = self::generate_border_css( $attr, 'submitButton' );
742 $submit_button_border_css = self::generate_deprecated_border_css(
743 $submit_button_border_css,
744 ( isset( $attr['submitButtonBorderWidth'] ) ? $attr['submitButtonBorderWidth'] : '' ),
745 ( isset( $attr['submitButtonBorderRadius'] ) ? $attr['submitButtonBorderRadius'] : '' ),
746 ( isset( $attr['submitButtonBorderColor'] ) ? $attr['submitButtonBorderColor'] : '' ),
747 ( isset( $attr['submitButtonBorderStyle'] ) ? $attr['submitButtonBorderStyle'] : '' ),
748 ( isset( $attr['submitButtonBorderHColor'] ) ? $attr['submitButtonBorderHColor'] : '' )
749 );
750 $submit_button_border_css_tablet = self::generate_border_css( $attr, 'submitButton', 'tablet' );
751 $submit_button_border_css_mobile = self::generate_border_css( $attr, 'submitButton', 'mobile' );
752
753 $box_shadow_position_css = $attr['boxShadowPosition'];
754
755 if ( 'outset' === $attr['boxShadowPosition'] ) {
756 $box_shadow_position_css = '';
757 }
758
759 $selectors = array(
760 // General.
761 ' .wcf-optin-form .checkout.woocommerce-checkout #order_review .woocommerce-checkout-payment button#place_order' => array(
762 'background-color' => $attr['generalPrimaryColor'],
763 'border-color' => $attr['generalPrimaryColor'],
764 ),
765
766 // Input Fields.
767 ' .wcf-optin-form .checkout.woocommerce-checkout label' => array(
768 'color' => $attr['inputFieldLabelColor'],
769 ),
770 ' .wcf-optin-form .checkout.woocommerce-checkout span input.input-text' => array_merge(
771 array(
772 'color' => $attr['inputFieldTextPlaceholderColor'],
773 'background-color' => $attr['inputFieldBackgroundColor'],
774 ),
775 $input_field_border_css
776 ),
777
778 ' .wcf-optin-form .checkout.woocommerce-checkout span input.input-text:hover' => array(
779 'border-color' => $attr['inputFieldBorderHColor'],
780 ),
781
782 // Submit Button.
783 ' .wcf-optin-form .checkout.woocommerce-checkout .wcf-order-wrap #order_review .woocommerce-checkout-payment button#place_order' => array_merge(
784 array(
785 'color' => $attr['submitButtonTextColor'],
786 'background-color' => $attr['submitButtonBackgroundColor'],
787 'box-shadow' => Cartflows_Gb_Helper::get_css_value( $attr['boxShadowHOffset'], 'px' ) . ' ' . Cartflows_Gb_Helper::get_css_value( $attr['boxShadowVOffset'], 'px' ) . ' ' . Cartflows_Gb_Helper::get_css_value( $attr['boxShadowBlur'], 'px' ) . ' ' . Cartflows_Gb_Helper::get_css_value( $attr['boxShadowSpread'], 'px' ) . ' ' . $attr['boxShadowColor'] . ' ' . $box_shadow_position_css,
788 ),
789 $submit_button_border_css
790 ),
791 ' .wcf-optin-form .checkout.woocommerce-checkout .wcf-order-wrap #order_review .woocommerce-checkout-payment button#place_order:hover' => array(
792 'color' => $attr['submitButtonTextHoverColor'],
793 'background-color' => $attr['submitButtonBackgroundHoverColor'],
794 'border-color' => $attr['submitButtonBorderHColor'],
795 ),
796
797 );
798
799 $t_selectors = array(
800 ' .wcf-optin-form .checkout.woocommerce-checkout span input.input-text' => $input_field_border_css_tablet,
801 ' .wcf-optin-form .checkout.woocommerce-checkout .wcf-order-wrap #order_review .woocommerce-checkout-payment button#place_order' => $submit_button_border_css_tablet,
802 );
803 $m_selectors = array(
804 ' .wcf-optin-form .checkout.woocommerce-checkout span input.input-text' => $input_field_border_css_mobile,
805 ' .wcf-optin-form .checkout.woocommerce-checkout .wcf-order-wrap #order_review .woocommerce-checkout-payment button#place_order' => $submit_button_border_css_mobile,
806 );
807
808 $combined_selectors = array(
809 'desktop' => $selectors,
810 'tablet' => $t_selectors,
811 'mobile' => $m_selectors,
812 );
813
814 // General.
815 $combined_selectors = Cartflows_Gb_Helper::get_typography_css( $attr, 'general', ' .wcf-optin-form .checkout.woocommerce-checkout label, .wcf-optin-form .checkout.woocommerce-checkout span input.input-text, .wcf-optin-form .checkout.woocommerce-checkout .wcf-order-wrap #order_review .woocommerce-checkout-payment button#place_order', $combined_selectors );
816
817 // Input Fields.
818 $combined_selectors = Cartflows_Gb_Helper::get_typography_css( $attr, 'inputField', ' .wcf-optin-form .checkout.woocommerce-checkout label, .wcf-optin-form .checkout.woocommerce-checkout span input.input-text', $combined_selectors );
819
820 // Submit Button.
821 $combined_selectors = Cartflows_Gb_Helper::get_typography_css( $attr, 'submitButton', ' .wcf-optin-form .checkout.woocommerce-checkout .wcf-order-wrap #order_review .woocommerce-checkout-payment button#place_order', $combined_selectors );
822
823 return Cartflows_Gb_Helper::generate_all_css( $combined_selectors, ' .cf-block-' . $id );
824 }
825
826 /**
827 * Border CSS generation Function.
828 *
829 * @since 2.0.0-beta.3
830 * @param array $attr Attribute List.
831 * @param string $prefix Attribuate prefix .
832 * @param string $device Responsive.
833 * @return array border css array.
834 */
835 public static function generate_border_css( $attr, $prefix, $device = 'desktop' ) {
836 $gen_border_css = array();
837 if ( 'tablet' === $device ) {
838 if ( 'none' !== $attr[ $prefix . 'BorderStyle' ] ) {
839 $gen_border_css['border-top-width'] = self::get_css_value( $attr[ $prefix . 'BorderTopWidthTablet' ], 'px' );
840 $gen_border_css['border-left-width'] = self::get_css_value( $attr[ $prefix . 'BorderLeftWidthTablet' ], 'px' );
841 $gen_border_css['border-right-width'] = self::get_css_value( $attr[ $prefix . 'BorderRightWidthTablet' ], 'px' );
842 $gen_border_css['border-bottom-width'] = self::get_css_value( $attr[ $prefix . 'BorderBottomWidthTablet' ], 'px' );
843 }
844 $gen_border_unit_tablet = isset( $attr[ $prefix . 'BorderRadiusUnitTablet' ] ) ? $attr[ $prefix . 'BorderRadiusUnitTablet' ] : 'px';
845 $gen_border_css['border-top-left-radius'] = self::get_css_value( $attr[ $prefix . 'BorderTopLeftRadiusTablet' ], $gen_border_unit_tablet );
846 $gen_border_css['border-top-right-radius'] = self::get_css_value( $attr[ $prefix . 'BorderTopRightRadiusTablet' ], $gen_border_unit_tablet );
847 $gen_border_css['border-bottom-left-radius'] = self::get_css_value( $attr[ $prefix . 'BorderBottomLeftRadiusTablet' ], $gen_border_unit_tablet );
848 $gen_border_css['border-bottom-right-radius'] = self::get_css_value( $attr[ $prefix . 'BorderBottomRightRadiusTablet' ], $gen_border_unit_tablet );
849 } elseif ( 'mobile' === $device ) {
850 if ( 'none' !== $attr[ $prefix . 'BorderStyle' ] ) {
851 $gen_border_css['border-top-width'] = self::get_css_value( $attr[ $prefix . 'BorderTopWidthMobile' ], 'px' );
852 $gen_border_css['border-left-width'] = self::get_css_value( $attr[ $prefix . 'BorderLeftWidthMobile' ], 'px' );
853 $gen_border_css['border-right-width'] = self::get_css_value( $attr[ $prefix . 'BorderRightWidthMobile' ], 'px' );
854 $gen_border_css['border-bottom-width'] = self::get_css_value( $attr[ $prefix . 'BorderBottomWidthMobile' ], 'px' );
855 }
856 $gen_border_unit_mobile = isset( $attr[ $prefix . 'BorderTopLeftRadiusMobile' ] ) ? $attr[ $prefix . 'BorderTopLeftRadiusMobile' ] : 'px';
857 $gen_border_css['border-top-left-radius'] = self::get_css_value( $attr[ $prefix . 'BorderTopLeftRadiusMobile' ], $gen_border_unit_mobile );
858 $gen_border_css['border-top-right-radius'] = self::get_css_value( $attr[ $prefix . 'BorderTopRightRadiusMobile' ], $gen_border_unit_mobile );
859 $gen_border_css['border-bottom-left-radius'] = self::get_css_value( $attr[ $prefix . 'BorderBottomLeftRadiusMobile' ], $gen_border_unit_mobile );
860 $gen_border_css['border-bottom-right-radius'] = self::get_css_value( $attr[ $prefix . 'BorderBottomRightRadiusMobile' ], $gen_border_unit_mobile );
861 } else {
862 if ( 'none' !== $attr[ $prefix . 'BorderStyle' ] ) {
863 $gen_border_css['border-top-width'] = self::get_css_value( $attr[ $prefix . 'BorderTopWidth' ], 'px' );
864 $gen_border_css['border-left-width'] = self::get_css_value( $attr[ $prefix . 'BorderLeftWidth' ], 'px' );
865 $gen_border_css['border-right-width'] = self::get_css_value( $attr[ $prefix . 'BorderRightWidth' ], 'px' );
866 $gen_border_css['border-bottom-width'] = self::get_css_value( $attr[ $prefix . 'BorderBottomWidth' ], 'px' );
867 }
868 $gen_border_unit = isset( $attr[ $prefix . 'BorderRadiusUnit' ] ) ? $attr[ $prefix . 'BorderRadiusUnit' ] : 'px';
869 $gen_border_css['border-top-left-radius'] = self::get_css_value( $attr[ $prefix . 'BorderTopLeftRadius' ], $gen_border_unit );
870 $gen_border_css['border-top-right-radius'] = self::get_css_value( $attr[ $prefix . 'BorderTopRightRadius' ], $gen_border_unit );
871 $gen_border_css['border-bottom-left-radius'] = self::get_css_value( $attr[ $prefix . 'BorderBottomLeftRadius' ], $gen_border_unit );
872 $gen_border_css['border-bottom-right-radius'] = self::get_css_value( $attr[ $prefix . 'BorderBottomRightRadius' ], $gen_border_unit );
873 }
874 $border_style = $attr[ $prefix . 'BorderStyle' ];
875 $border_color = $attr[ $prefix . 'BorderColor' ];
876 $gen_border_css['border-style'] = $border_style;
877 $gen_border_css['border-color'] = $border_color;
878 return $gen_border_css;
879 }
880
881 /**
882 * Get CSS value
883 *
884 * Syntax:
885 *
886 * get_css_value( VALUE, UNIT );
887 *
888 * E.g.
889 *
890 * get_css_value( VALUE, 'em' );
891 *
892 * @param string $value CSS value.
893 * @param string $unit CSS unit.
894 * @since 1.13.4
895 */
896 public static function get_css_value( $value = '', $unit = '' ) {
897
898 if ( '' == $value ) {
899 return $value;
900 }
901
902 $css_val = '';
903
904 if ( isset( $value ) ) {
905 $css_val = esc_attr( $value ) . $unit;
906 }
907
908 return $css_val;
909 }
910
911 /**
912 * Deprecated Border CSS generation Function.
913 *
914 * @since 2.0.0-beta.3
915 * @param array $current_css Current style list.
916 * @param string $border_width Border Width.
917 * @param string $border_radius Border Radius.
918 * @param string $border_color Border Color.
919 * @param string $border_style Border Style.
920 */
921 public static function generate_deprecated_border_css( $current_css, $border_width, $border_radius, $border_color = '', $border_style = '' ) {
922 $gen_border_css = array();
923 if ( is_numeric( $border_width ) ) {
924 $gen_border_css['border-top-width'] = self::get_css_value( $border_width, 'px' );
925 $gen_border_css['border-left-width'] = self::get_css_value( $border_width, 'px' );
926 $gen_border_css['border-right-width'] = self::get_css_value( $border_width, 'px' );
927 $gen_border_css['border-bottom-width'] = self::get_css_value( $border_width, 'px' );
928 }
929
930 if ( is_numeric( $border_radius ) ) {
931 $gen_border_css['border-top-left-radius'] = self::get_css_value( $border_radius, 'px' );
932 $gen_border_css['border-top-right-radius'] = self::get_css_value( $border_radius, 'px' );
933 $gen_border_css['border-bottom-left-radius'] = self::get_css_value( $border_radius, 'px' );
934 $gen_border_css['border-bottom-right-radius'] = self::get_css_value( $border_radius, 'px' );
935 }
936
937 if ( $border_color ) {
938 $gen_border_css['border-color'] = $border_color;
939 }
940
941 if ( $border_style ) {
942 $gen_border_css['border-style'] = $border_style;
943 }
944 return wp_parse_args( $gen_border_css, $current_css );
945 }
946 }
947 }
948