@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
71 lines (70 loc) • 1.96 kB
JavaScript
import styled, { css } from 'styled-components';
import { getStyles } from '../../utils/getStyles/getStyles';
import { ALIGN_TYPE } from './types/confirmationMessage';
const flexColumnMixin = css `
display: flex;
flex-direction: column;
`;
export const ConfirmationMessageStyled = styled.div `
width: 100%;
height: 100%;
${flexColumnMixin}
align-items: center;
justify-content: center;
${props => getStyles(props.styles?.container)}
`;
export const TitleAndDescriptionStyled = styled.div `
${flexColumnMixin}
align-self: ${({ align }) => align};
${props => getStyles(props.styles?.titleAndDescriptionContainer)}
`;
export const TitleTextStyled = styled.div `
${flexColumnMixin}
align-items: center;
${({ align }) => align === ALIGN_TYPE.CENTER
? css `
flex-direction: column;
`
: css `
flex-direction: row;
justify-content: ${align};
`};
${props => getStyles(props.styles?.titleContainer)}
`;
export const DescriptionTextStyled = styled.div `
${flexColumnMixin}
white-space: pre-line;
${({ align }) => align === ALIGN_TYPE.CENTER
? css `
align-items: ${align};
text-align: ${align};
`
: css `
align-items: ${align};
`};
${props => getStyles(props.styles?.descriptionContainer)}
`;
export const ContentContainerStyled = styled.div `
width: 100%;
display: flex;
justify-content: ${({ align }) => align};
${props => getStyles(props.styles?.content)}
`;
export const FooterWrapperStyled = styled.div `
width: 100%;
${({ align }) => align === ALIGN_TYPE.CENTER
? css `
justify-content: center;
`
: css `
width: 100%;
`};
`;
export const FooterStyled = styled.div.withConfig({
shouldForwardProp: () => true,
}) `
bottom: 0;
width: 100%;
${props => getStyles(props.customFooterStyles?.footer)}
`;
//# sourceMappingURL=confirmationMessage.styled.js.map