CHIEFSOFT\ameye
115 lines
2.3 KiB
React
115 lines
2.3 KiB
React
/**
|
|
* Internal dependencies
|
|
*/
|
|
const {
|
|
canvasBreakpoints,
|
|
} = window;
|
|
|
|
/**
|
|
* Row block styles for Editor
|
|
*
|
|
* @param {Object} attributes block attributes
|
|
* @param {String} className block class name
|
|
* @param {String} clientId block client id
|
|
*
|
|
* @returns {String}
|
|
*/
|
|
export default function( attributes, className, clientId ) {
|
|
let result = '';
|
|
let hideResizer = true;
|
|
|
|
Object.keys( canvasBreakpoints ).forEach( ( name ) => {
|
|
const data = canvasBreakpoints[ name ];
|
|
let styles = '';
|
|
let suffix = '';
|
|
|
|
if ( 'desktop' !== name ) {
|
|
suffix = `_${ name }`;
|
|
}
|
|
|
|
/**
|
|
* Hide resizer.
|
|
*/
|
|
if ( suffix && hideResizer ) {
|
|
hideResizer = false;
|
|
styles += `
|
|
.${ className } + .cnvs-block-column-resizer {
|
|
display: none;
|
|
}
|
|
`;
|
|
}
|
|
|
|
/**
|
|
* Size.
|
|
*/
|
|
if ( attributes[ `size${ suffix }` ] ) {
|
|
const size = attributes[ `size${ suffix }` ];
|
|
styles += `
|
|
#block-${ clientId }[data-type="canvas/column"] {
|
|
-ms-flex-preferred-size: ${ 100 * size / 12 }%;
|
|
flex-basis: ${ 100 * size / 12 }%;
|
|
width: ${ 100 * size / 12 }%;
|
|
}
|
|
`;
|
|
}
|
|
|
|
/**
|
|
* Order.
|
|
*/
|
|
if ( attributes[ `order${ suffix }` ] ) {
|
|
const order = attributes[ `order${ suffix }` ];
|
|
styles += `
|
|
#block-${ clientId }[data-type="canvas/column"] {
|
|
-ms-flex-order: ${ order };
|
|
order: ${ order };
|
|
}
|
|
`;
|
|
}
|
|
|
|
/**
|
|
* Min Height.
|
|
*/
|
|
if ( attributes[ `minHeight${ suffix }` ] ) {
|
|
const minHeight = attributes[ `minHeight${ suffix }` ];
|
|
styles += `
|
|
.${ className } > .cnvs-block-column-inner {
|
|
min-height: ${ minHeight };
|
|
}
|
|
`;
|
|
}
|
|
|
|
/**
|
|
* Vertical Align.
|
|
*/
|
|
if ( attributes[ `verticalAlign${ suffix }` ] ) {
|
|
let verticalAlign = attributes[ `verticalAlign${ suffix }` ];
|
|
|
|
if ( 'top' === verticalAlign ) {
|
|
verticalAlign = 'flex-start';
|
|
} else if ( 'bottom' === verticalAlign ) {
|
|
verticalAlign = 'flex-end';
|
|
}
|
|
|
|
styles += `
|
|
#block-${ clientId }[data-type="canvas/column"] {
|
|
justify-content: ${ verticalAlign };
|
|
}
|
|
.${ className } > .cnvs-block-column-inner {
|
|
align-items: ${ verticalAlign };
|
|
}
|
|
`;
|
|
}
|
|
|
|
// add media query.
|
|
if ( suffix && styles ) {
|
|
styles = `@media (max-width: ${ data.width }px) { ${ styles } } `;
|
|
}
|
|
|
|
if ( styles ) {
|
|
result += styles;
|
|
}
|
|
} );
|
|
|
|
return result;
|
|
}
|