@kubit-ui-web/react-components
Version:
Kubit React Components is a customizable, accessible library of React web components, designed to enhance your application's user experience
61 lines • 2.17 kB
JavaScript
import styled, { css } from 'styled-components';
//utils
import { getStyles } from '../../utils/getStyles/getStyles';
const commonModalContainerStyled = (mediaQuery, minWidth, minHeight, maxWidth, maxHeight, hasFooter = false) => mediaQuery &&
css `
${mediaQuery} {
${minWidth &&
css `
min-width: ${minWidth};
`}
${minHeight &&
css `
min-height: ${minHeight};
`};
${maxWidth &&
css `
max-width: ${maxWidth || '100vw'};
`}
${maxHeight &&
css `
max-height: ${maxHeight || '100vh'};
`}
padding-bottom: ${hasFooter ? '0' : null};
}
`;
export const ModalStyled = styled.div `
${props => getStyles(props.$styles.container)};
${({ hasFooter, $minHeight, $minWidth, $maxHeight, $maxWidth, theme: { MEDIA_QUERIES: { onlyTablet, onlyDesktop, onlyMobile }, }, }) => css `
${commonModalContainerStyled(onlyDesktop, $minWidth, $minHeight, $maxWidth, $maxHeight, hasFooter)}
${commonModalContainerStyled(onlyTablet, $minWidth, $minHeight, $maxWidth, $maxHeight, hasFooter)}
${commonModalContainerStyled(onlyMobile, $minWidth, $minHeight, $maxWidth, $maxHeight, hasFooter)}
`}
`;
export const ModalHeaderStyled = styled.div `
${props => getStyles(props.$styles.headerContainer)}
`;
export const ModalHeaderContentStyled = styled.div `
${props => getStyles(props.$styles.headerContentContainer)}
`;
export const TitleContainerStyled = styled.div `
${props => getStyles(props.$styles.titleContainer)}
`;
export const TitleHiddenContainer = styled.span `
display: none;
`;
export const ModalCloseButtonStyled = styled.div `
${props => getStyles(props.$styles.closeButtonContainer)};
`;
export const ModalContentStyled = styled.div `
word-break: break-word;
line-height: 1.5rem;
${props => getStyles(props.$styles.content)}
min-height: ${({ $minContentHeight }) => $minContentHeight};
`;
export const ModalFooterStyled = styled.div `
${props => getStyles(props.$styles.footer)}
`;
export const DraggableIcon = styled.div `
${props => getStyles(props.$styles?.dragIconContainer)}
`;
//# sourceMappingURL=modal.styled.js.map