88 lines
2.0 KiB
PHP
88 lines
2.0 KiB
PHP
<?php
|
|
/**
|
|
* Column block styles for Frontend
|
|
*
|
|
* @var $attributes - block attributes
|
|
* @var $class_name - block class name
|
|
*
|
|
* @package Canvas
|
|
*/
|
|
|
|
$breakpoints = cnvs_gutenberg()->get_breakpoints_data();
|
|
|
|
foreach ( $breakpoints as $name => $data ) {
|
|
$result = '';
|
|
$suffix = '';
|
|
|
|
if ( 'desktop' !== $name ) {
|
|
$suffix = '_' . $name;
|
|
}
|
|
|
|
/**
|
|
* Size.
|
|
*/
|
|
if ( isset( $attributes[ 'size' . $suffix ] ) ) {
|
|
$size = $attributes[ 'size' . $suffix ];
|
|
$result .= '
|
|
.' . esc_attr( $class_name ) . ' {
|
|
-ms-flex-preferred-size: ' . esc_attr( 100 * $size / 12 ) . '%;
|
|
flex-basis: ' . esc_attr( 100 * $size / 12 ) . '%;
|
|
}
|
|
';
|
|
}
|
|
|
|
/**
|
|
* Order.
|
|
*/
|
|
if ( isset( $attributes[ 'order' . $suffix ] ) && $attributes[ 'order' . $suffix ] ) {
|
|
$order = $attributes[ 'order' . $suffix ];
|
|
$result .= '
|
|
.' . esc_attr( $class_name ) . ' {
|
|
-ms-flex-order: ' . esc_attr( $order ) . ';
|
|
order: ' . esc_attr( $order ) . ';
|
|
}
|
|
';
|
|
}
|
|
|
|
/**
|
|
* Min Height.
|
|
*/
|
|
if ( isset( $attributes[ 'minHeight' . $suffix ] ) && '' !== $attributes[ 'minHeight' . $suffix ] ) {
|
|
$minHeight = $attributes[ 'minHeight' . $suffix ];
|
|
$result .= '
|
|
.' . esc_attr( $class_name ) . ' > .cnvs-block-column-inner {
|
|
min-height: ' . esc_attr( $minHeight ) . ';
|
|
}
|
|
';
|
|
}
|
|
|
|
/**
|
|
* Vertical Align.
|
|
*/
|
|
if ( isset( $attributes[ 'verticalAlign' . $suffix ] ) && $attributes[ 'verticalAlign' . $suffix ] ) {
|
|
$verticalAlign = $attributes[ 'verticalAlign' . $suffix ];
|
|
|
|
if ( 'top' === $verticalAlign ) {
|
|
$verticalAlign = 'flex-start';
|
|
} else if ( 'bottom' === $verticalAlign ) {
|
|
$verticalAlign = 'flex-end';
|
|
}
|
|
|
|
$result .= '
|
|
.' . esc_attr( $class_name ) . ',
|
|
.' . esc_attr( $class_name ) . ' > .cnvs-block-column-inner {
|
|
align-items: ' . esc_attr( $verticalAlign ) . ';
|
|
}
|
|
';
|
|
}
|
|
|
|
// add media query.
|
|
if ( $suffix && $result ) {
|
|
$result = '@media (max-width: ' . esc_attr( $data['width'] ) . 'px) { ' . $result . ' } ';
|
|
}
|
|
|
|
if ( $result ) {
|
|
echo $result; // XSS Ok.
|
|
}
|
|
}
|