CHIEFSOFT\ameye
74 lines
1.8 KiB
React
74 lines
1.8 KiB
React
/**
|
|
* Internal dependencies
|
|
*/
|
|
const {
|
|
canvasBreakpoints,
|
|
} = window;
|
|
|
|
/**
|
|
* Row block styles for Editor
|
|
*
|
|
* @param {Object} attributes block attributes
|
|
* @param {String} className block class name
|
|
*
|
|
* @returns {String}
|
|
*/
|
|
export default function( attributes, className ) {
|
|
let result = '';
|
|
let breakColumns = true;
|
|
|
|
Object.keys( canvasBreakpoints ).forEach( ( name ) => {
|
|
const data = canvasBreakpoints[ name ];
|
|
let styles = '';
|
|
let suffix = '';
|
|
|
|
if ( 'desktop' !== name ) {
|
|
suffix = `_${ name }`;
|
|
}
|
|
|
|
/**
|
|
* Break columns.
|
|
*/
|
|
if ( suffix && breakColumns ) {
|
|
breakColumns = false;
|
|
styles += `
|
|
.${ className } > .cnvs-block-row-inner > .block-editor-inner-blocks > .block-editor-block-list__layout {
|
|
-ms-flex-wrap: wrap;
|
|
flex-wrap: wrap;
|
|
}
|
|
`;
|
|
}
|
|
|
|
/**
|
|
* Gap.
|
|
*/
|
|
if ( typeof attributes[ `gap${ suffix }` ] === 'number' ) {
|
|
const gap = attributes[ `gap${ suffix }` ];
|
|
styles += `
|
|
.${ className } > .cnvs-block-row-inner > .block-editor-inner-blocks > .block-editor-block-list__layout {
|
|
margin-left: ${ - gap / 2 }px;
|
|
margin-right: ${ - gap / 2 }px;
|
|
}
|
|
.${ className } > .cnvs-block-row-inner > .block-editor-inner-blocks > .block-editor-block-list__layout > [data-type="canvas/column"] {
|
|
padding-left: ${ gap / 2 }px;
|
|
padding-right: ${ gap / 2 }px;
|
|
}
|
|
.${ className } > .cnvs-block-row-inner > .block-editor-inner-blocks > .block-editor-block-list__layout > [data-type="canvas/column"] > .canvas-component-custom-blocks > .cnvs-block-column-resizer {
|
|
margin-right: ${ - gap / 2 }px;
|
|
}
|
|
`;
|
|
}
|
|
|
|
// add media query.
|
|
if ( suffix && styles ) {
|
|
styles = `@media (max-width: ${ data.width }px) { ${ styles } } `;
|
|
}
|
|
|
|
if ( styles ) {
|
|
result += styles;
|
|
}
|
|
} );
|
|
|
|
return result;
|
|
}
|