@nex-ui/react
Version:
🎉 A beautiful, modern, and reliable React component library.
69 lines (66 loc) • 1.51 kB
JavaScript
import { defineRecipe } from '@nex-ui/system';
const modalRootRecipe = defineRecipe({
base: {
position: 'fixed',
inset: 0,
zIndex: 'modal'
}
});
const modalContentRecipe = defineRecipe({
base: {
width: 'full',
borderRadius: 'lg',
position: 'relative',
my: '15',
mx: '6',
display: 'flex',
flexDirection: 'column',
boxShadow: 'lg',
outline: 'none',
bg: {
_DEFAULT: 'white',
_dark: '#18181b'
}
}
});
const modalHeaderRecipe = defineRecipe({
base: {
w: 'full',
m: 0,
boxSizing: 'border-box'
}
});
const modalBodyRecipe = defineRecipe({
base: {
w: 'full',
boxSizing: 'border-box',
height: '100%',
wordBreak: 'break-word'
}
});
const modalFooterRecipe = defineRecipe({
base: {
w: 'full',
boxSizing: 'border-box',
display: 'flex',
alignItems: 'center',
justifyContent: 'flex-end',
gap: '5'
}
});
const modalBackdropRecipe = defineRecipe({
base: {
position: 'fixed',
inset: 0,
bg: 'black/50'
}
});
const modalPanelRecipe = defineRecipe({
base: {
position: 'fixed',
inset: 0,
display: 'flex',
justifyContent: 'center'
}
});
export { modalBackdropRecipe, modalBodyRecipe, modalContentRecipe, modalFooterRecipe, modalHeaderRecipe, modalPanelRecipe, modalRootRecipe };