column-css.php — Beaver Builder Page Builder – Drag and Drop Website Builder 2.9.3.2

beaver-builder-lite-version / includes / column-css.php

beaver-builder-lite-version / includes Last commit date

column-css.php

283 lines

1	<?php if ( ! empty( $col->settings->text_color ) ) : // Text Color ?>
2	.fl-node-<?php echo $col->node; ?> {
3	color: <?php echo FLBuilderColor::hex_or_rgb( $col->settings->text_color ); ?>;
4	}
5	.fl-builder-content .fl-node-<?php echo $col->node; ?> *:not(span):not(input):not(textarea):not(select):not(a):not(h1):not(h2):not(h3):not(h4):not(h5):not(h6):not(.fl-menu-mobile-toggle) {
6	color: <?php echo FLBuilderColor::hex_or_rgb( $col->settings->text_color ); ?>;
7	}
8	<?php endif; ?>
9
10	<?php if ( ! empty( $col->settings->link_color ) ) : // Link Color ?>
11	.fl-builder-content .fl-node-<?php echo $col->node; ?> a {
12	color: <?php echo FLBuilderColor::hex_or_rgb( $col->settings->link_color ); ?>;
13	}
14	<?php elseif ( ! empty( $col->settings->text_color ) ) : ?>
15	.fl-builder-content .fl-node-<?php echo $col->node; ?> a {
16	color: <?php echo FLBuilderColor::hex_or_rgb( $col->settings->text_color ); ?>;
17	}
18	<?php endif; ?>
19
20	<?php if ( ! empty( $col->settings->hover_color ) ) : // Link Hover Color ?>
21	.fl-builder-content .fl-node-<?php echo $col->node; ?> a:hover {
22	color: <?php echo FLBuilderColor::hex_or_rgb( $col->settings->hover_color ); ?>;
23	}
24	<?php elseif ( ! empty( $col->settings->text_color ) ) : ?>
25	.fl-builder-content .fl-node-<?php echo $col->node; ?> a:hover {
26	color: <?php echo FLBuilderColor::hex_or_rgb( $col->settings->text_color ); ?>;
27	}
28	<?php endif; ?>
29
30	<?php if ( ! empty( $col->settings->heading_color ) ) : // Heading Color ?>
31	.fl-builder-content .fl-node-<?php echo $col->node; ?> h1,
32	.fl-builder-content .fl-node-<?php echo $col->node; ?> h2,
33	.fl-builder-content .fl-node-<?php echo $col->node; ?> h3,
34	.fl-builder-content .fl-node-<?php echo $col->node; ?> h4,
35	.fl-builder-content .fl-node-<?php echo $col->node; ?> h5,
36	.fl-builder-content .fl-node-<?php echo $col->node; ?> h6,
37	.fl-builder-content .fl-node-<?php echo $col->node; ?> h1 a,
38	.fl-builder-content .fl-node-<?php echo $col->node; ?> h2 a,
39	.fl-builder-content .fl-node-<?php echo $col->node; ?> h3 a,
40	.fl-builder-content .fl-node-<?php echo $col->node; ?> h4 a,
41	.fl-builder-content .fl-node-<?php echo $col->node; ?> h5 a,
42	.fl-builder-content .fl-node-<?php echo $col->node; ?> h6 a {
43	color: <?php echo FLBuilderColor::hex_or_rgb( $col->settings->heading_color ); ?>;
44	}
45	<?php elseif ( ! empty( $col->settings->text_color ) ) : ?>
46	.fl-builder-content .fl-node-<?php echo $col->node; ?> h1,
47	.fl-builder-content .fl-node-<?php echo $col->node; ?> h2,
48	.fl-builder-content .fl-node-<?php echo $col->node; ?> h3,
49	.fl-builder-content .fl-node-<?php echo $col->node; ?> h4,
50	.fl-builder-content .fl-node-<?php echo $col->node; ?> h5,
51	.fl-builder-content .fl-node-<?php echo $col->node; ?> h6,
52	.fl-builder-content .fl-node-<?php echo $col->node; ?> h1 a,
53	.fl-builder-content .fl-node-<?php echo $col->node; ?> h2 a,
54	.fl-builder-content .fl-node-<?php echo $col->node; ?> h3 a,
55	.fl-builder-content .fl-node-<?php echo $col->node; ?> h4 a,
56	.fl-builder-content .fl-node-<?php echo $col->node; ?> h5 a,
57	.fl-builder-content .fl-node-<?php echo $col->node; ?> h6 a {
58	color: <?php echo FLBuilderColor::hex_or_rgb( $col->settings->text_color ); ?>;
59	}
60	<?php endif; ?>
61
62	<?php
63
64	$responsive_enabled = $global_settings->responsive_enabled;
65	$reverse_stack = explode( ',', $col->settings->responsive_order );
66
67	// Width - Desktop
68	FLBuilderCSS::rule( array(
69	'selector' => ".fl-node-$id",
70	'props' => array(
71	'width' => empty( $settings->size ) ? FLBuilderUtils::get_empty_column_width() : "{$settings->size}%",
72	),
73	) );
74
75	// Width - Large
76	FLBuilderCSS::rule( array(
77	'media' => 'large',
78	'selector' => ".fl-builder-content .fl-node-$id",
79	'enabled' => '' !== $settings->size_large && $responsive_enabled,
80	'props' => array(
81	'width' => "{$settings->size_large}% !important",
82	'max-width' => 'none',
83	'-webkit-box-flex' => '0 1 auto',
84	'-moz-box-flex' => '0 1 auto',
85	'-webkit-flex' => '0 1 auto',
86	'-ms-flex' => '0 1 auto',
87	'flex' => '0 1 auto',
88	),
89	) );
90
91	// Width - Medium
92	FLBuilderCSS::rule( array(
93	'media' => 'medium',
94	'selector' => ".fl-builder-content .fl-node-$id",
95	'enabled' => '' !== $settings->size_medium && $responsive_enabled,
96	'props' => array(
97	'width' => "{$settings->size_medium}% !important",
98	'max-width' => 'none',
99	'-webkit-box-flex' => '0 1 auto',
100	'-moz-box-flex' => '0 1 auto',
101	'-webkit-flex' => '0 1 auto',
102	'-ms-flex' => '0 1 auto',
103	'flex' => '0 1 auto',
104	),
105	) );
106
107	// Width - Responsive
108	FLBuilderCSS::rule( array(
109	'media' => 'responsive',
110	'selector' => ".fl-builder-content .fl-node-$id",
111	'enabled' => '' !== $settings->size_responsive && $responsive_enabled,
112	'props' => array(
113	'width' => "{$settings->size_responsive}% !important",
114	'max-width' => 'none',
115	'clear' => 'none',
116	'float' => 'left',
117	),
118	) );
119
120	// Background Color
121	FLBuilderCSS::rule( array(
122	'selector' => ".fl-node-$id > .fl-col-content",
123	'enabled' => ( ( 'color' == $settings->bg_type ) \|\| ( 'photo' == $settings->bg_type ) ),
124	'props' => array(
125	'background-color' => $settings->bg_color,
126	),
127	) );
128
129	// Background Gradient
130	FLBuilderCSS::rule( array(
131	'selector' => ".fl-node-$id > .fl-col-content",
132	'enabled' => 'gradient' === $settings->bg_type,
133	'props' => array(
134	'background-image' => FLBuilderColor::gradient( $settings->bg_gradient ),
135	),
136	) );
137
138	FLBuilderCSS::rule( array(
139	'selector' => ".fl-node-$id > .fl-col-content",
140	'enabled' => 'gradient' === $settings->bg_type && ! empty( $settings->bg_gradient_medium ) && isset( $settings->bg_gradient_medium['colors'] ) && is_array( $settings->bg_gradient_medium['colors'] ) && ! empty( array_filter( $settings->bg_gradient_medium['colors'] ) ),
141	'media' => 'medium',
142	'props' => array(
143	'background-image' => FLBuilderColor::gradient( $settings->bg_gradient_medium ),
144	),
145	) );
146
147	FLBuilderCSS::rule( array(
148	'selector' => ".fl-node-$id > .fl-col-content",
149	'enabled' => 'gradient' === $settings->bg_type && ! empty( $settings->bg_gradient_responsive ) && isset( $settings->bg_gradient_responsive['colors'] ) && is_array( $settings->bg_gradient_responsive['colors'] ) && ! empty( array_filter( $settings->bg_gradient_responsive['colors'] ) ),
150	'media' => 'responsive',
151	'props' => array(
152	'background-image' => FLBuilderColor::gradient( $settings->bg_gradient_responsive ),
153	),
154	) );
155
156	// Background Color Overlay
157	FLBuilderCSS::rule( array(
158	'selector' => ".fl-node-$id > .fl-col-content:after",
159	'enabled' => 'none' !== $settings->bg_overlay_type && in_array( $settings->bg_type, array( 'photo' ) ),
160	'props' => array(
161	'background-color' => 'color' === $settings->bg_overlay_type ? FLBuilderColor::hex_or_rgb( $settings->bg_overlay_color ) : '',
162	'background-image' => 'gradient' === $settings->bg_overlay_type ? FLBuilderColor::gradient( $settings->bg_overlay_gradient ) : '',
163	),
164	) );
165
166	// Background Photo - Desktop
167	if ( 'custom_pos' == $settings->bg_position ) {
168	$bg_position_lg = empty( $settings->bg_x_position ) ? '0' : $settings->bg_x_position;
169	$bg_position_lg .= $settings->bg_x_position_unit;
170	$bg_position_lg .= ' ';
171	$bg_position_lg .= empty( $settings->bg_y_position ) ? '0' : $settings->bg_y_position;
172	$bg_position_lg .= $settings->bg_y_position_unit;
173	} else {
174	$bg_position_lg = $settings->bg_position;
175	}
176
177	FLBuilderCSS::rule( array(
178	'selector' => ".fl-node-$id > .fl-col-content",
179	'enabled' => 'photo' === $settings->bg_type,
180	'props' => array(
181	'background-image' => $settings->bg_image_src,
182	'background-repeat' => $settings->bg_repeat,
183	'background-position' => $bg_position_lg,
184	'background-attachment' => $settings->bg_attachment,
185	'background-size' => $settings->bg_size,
186	),
187	) );
188
189	// Background Photo - Large
190	if ( 'custom_pos' == $settings->bg_position_large ) {
191	$bg_position_large = empty( $settings->bg_x_position_large ) ? '0' : $settings->bg_x_position_large;
192	$bg_position_large .= $settings->bg_x_position_large_unit;
193	$bg_position_large .= ' ';
194	$bg_position_large .= empty( $settings->bg_y_position_large ) ? '0' : $settings->bg_y_position_large;
195	$bg_position_large .= $settings->bg_y_position_large_unit;
196	} else {
197	$bg_position_large = $settings->bg_position_large;
198	}
199
200	FLBuilderCSS::rule( array(
201	'media' => 'large',
202	'selector' => ".fl-node-$id > .fl-col-content",
203	'enabled' => 'photo' === $settings->bg_type,
204	'props' => array(
205	'background-image' => $settings->bg_image_large_src,
206	'background-repeat' => $settings->bg_repeat_large,
207	'background-position' => $bg_position_large,
208	'background-attachment' => $settings->bg_attachment_large,
209	'background-size' => $settings->bg_size_large,
210	),
211	) );
212
213	// Background Photo - Medium
214	if ( 'custom_pos' == $settings->bg_position_medium ) {
215	$bg_position_medium = empty( $settings->bg_x_position_medium ) ? '0' : $settings->bg_x_position_medium;
216	$bg_position_medium .= $settings->bg_x_position_medium_unit;
217	$bg_position_medium .= ' ';
218	$bg_position_medium .= empty( $settings->bg_y_position_medium ) ? '0' : $settings->bg_y_position_medium;
219	$bg_position_medium .= $settings->bg_y_position_medium_unit;
220	} else {
221	$bg_position_medium = $settings->bg_position_medium;
222	}
223
224	FLBuilderCSS::rule( array(
225	'media' => 'medium',
226	'selector' => ".fl-node-$id > .fl-col-content",
227	'enabled' => 'photo' === $settings->bg_type,
228	'props' => array(
229	'background-image' => $settings->bg_image_medium_src,
230	'background-repeat' => $settings->bg_repeat_medium,
231	'background-position' => $bg_position_medium,
232	'background-attachment' => $settings->bg_attachment_medium,
233	'background-size' => $settings->bg_size_medium,
234	),
235	) );
236
237	// Background Photo - Responsive
238	if ( 'custom_pos' == $settings->bg_position_responsive ) {
239	$bg_position_responsive = empty( $settings->bg_x_position_responsive ) ? '0' : $settings->bg_x_position_responsive;
240	$bg_position_responsive .= $settings->bg_x_position_responsive_unit;
241	$bg_position_responsive .= ' ';
242	$bg_position_responsive .= empty( $settings->bg_y_position_responsive ) ? '0' : $settings->bg_y_position_responsive;
243	$bg_position_responsive .= $settings->bg_y_position_responsive_unit;
244	} else {
245	$bg_position_responsive = $settings->bg_position_responsive;
246	}
247
248	FLBuilderCSS::rule( array(
249	'media' => 'responsive',
250	'selector' => ".fl-node-$id > .fl-col-content",
251	'enabled' => 'photo' === $settings->bg_type,
252	'props' => array(
253	'background-image' => $settings->bg_image_responsive_src,
254	'background-repeat' => $settings->bg_repeat_responsive,
255	'background-position' => $bg_position_responsive,
256	'background-attachment' => $settings->bg_attachment_responsive,
257	'background-size' => $settings->bg_size_responsive,
258	),
259	) );
260
261	// Border
262	FLBuilderCSS::border_field_rule( array(
263	'settings' => $settings,
264	'setting_name' => 'border',
265	'selector' => ".fl-node-$id > .fl-col-content",
266	) );
267
268	// Minimum Height
269	FLBuilderCSS::responsive_rule( array(
270	'settings' => $col->settings,
271	'setting_name' => 'min_height',
272	'selector' => ".fl-builder-content .fl-node-$id > .fl-col-content",
273	'prop' => 'min-height',
274	) );
275
276	// Aspect Ratio
277	FLBuilderCSS::responsive_rule( array(
278	'settings' => $col->settings,
279	'setting_name' => 'aspect_ratio',
280	'selector' => ".fl-builder-content .fl-node-$id > .fl-col-content",
281	'prop' => 'aspect-ratio',
282	) );
283