@empathyco/x-tailwindcss
Version:
Empathy X Tailwind plugin
66 lines (64 loc) • 1.84 kB
JavaScript
/**
* Returns the component `layout` utils CSS.
*
* @param _helpers - The {@link TailwindHelpers} to generate CSS.
* @returns The {@link CssStyleOptions} for the component.
*/
function utils(_helpers) {
return {
'.x-layout-stack': {
display: 'grid',
gridTemplateRows: '1fr',
gridTemplateColumns: '1fr',
justifyItems: 'stretch',
alignItems: 'stretch',
'& > *': {
gridRow: '1 / -1',
gridColumn: '1 / -1',
minHeight: '0',
minWidth: '0',
maxHeight: '100%',
maxWidth: '100%',
},
},
'.x-layout-expand': {
height: '100%',
flex: '1 1 0',
minHeight: '0',
},
'.x-layout-on-margin-left': {
gridColumn: '1 / 2',
},
'.x-layout-on-margin-right': {
gridColumn: '-2 / -1',
},
'.x-layout-overlap': {
height: '0',
overflow: 'visible',
alignContent: 'flex-end',
zIndex: '1',
},
'.x-layout-overlap-from-top': {
height: '0',
overflow: 'visible',
zIndex: '1',
alignContent: 'flex-start',
},
'.x-layout-no-margin-left': {
'--x-margin-left': '0px',
},
'.x-layout-no-margin-right': {
'--x-margin-right': '0px',
},
'.x-layout-no-margin': {
'--x-margin-left': '0px',
'--x-margin-right': '0px',
},
'@media (hover: hover) and (pointer: fine)': {
'.x-scroll > .x-layout-item:not(.x-layout-no-margin-right)': {
'--x-layout-scroll-width': '17px',
},
},
};
}
export { utils };