PluginProbe
CartFlows – Funnel Builder & Checkout Plugin for WooCommerce / 3.3.0
CartFlows – Funnel Builder & Checkout Plugin for WooCommerce v3.3.0
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.3.0, at modules/gutenberg/classes/class-cartflows-block-helper.php

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