@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
75 lines • 2.74 kB
JavaScript
import styled from 'styled-components';
// mixins
import { srOnlyMixin } from '../../styles/mixins/srOnly.mixin';
import { getStyles } from '../../utils/getStyles/getStyles';
export const WrapperStyled = styled.div `
width: 100%;
display: flex;
flex-direction: column;
`;
export const HeaderContainerBoxWrapperStyled = styled.div `
${({ styles }) => getStyles(styles.header)}
`;
export const HeaderTitleSubtitleWrapperStyled = styled.div `
${({ styles }) => getStyles(styles.titleSubtitleContainer)}
`;
export const HeaderSubtitleTooltipWrapperStyled = styled.div `
> *:nth-child(1) {
display: inline;
}
> *:nth-child(2) {
vertical-align: middle;
}
`;
export const HeaderDescriptionWrapperStyled = styled.div `
${({ styles }) => getStyles(styles.descriptionContainer)}
`;
export const SubtitleTooltipIconWrapperStyled = styled.div `
${({ styles }) => getStyles(styles.tooltipIconContainer)}
`;
export const BorderContainerStyled = styled.div `
${({ styles, state }) => getStyles(styles?.states?.[state]?.borderAnimationContainer)}
`;
export const ContainerBoxStyled = styled.label `
${({ styles, state }) => getStyles(styles?.states?.[state]?.containerBoxContainer)}
&[data-focus='true'] {
${({ theme }) => theme.FOCUS_STYLES};
}
`;
export const ContainerBoxTextWrapper = styled.span `
word-break: break-word;
${({ styles, state }) => getStyles(styles?.states?.[state]?.containerBoxTextsContainer)}
`;
export const ActionIconAndActionTextContainerStyled = styled.span `
${({ styles, state }) => getStyles(styles?.states?.[state]?.actionIconAndActionTextContainer)}
`;
export const ContainerBoxActionDescriptionTextWrapper = styled.span `
display: flex;
flex-direction: column;
`;
export const HiddenInputFile = styled.input `
${srOnlyMixin}
`;
export const ErrorWrapperStyled = styled.div `
${({ styles }) => getStyles(styles.errorMessageContainer)}
`;
// Animations
export const AnimationContainerStyled = styled.div `
${({ styles, state }) => getStyles(styles?.states?.[state]?.animationContainer)}
&[data-focus='true'] {
${({ theme }) => theme.FOCUS_STYLES};
}
`;
export const TopAnimationStyled = styled.div `
${({ styles, state }) => getStyles(styles?.states?.[state]?.topAnimationContainer)}
`;
export const RightAnimationStyled = styled.div `
${({ styles, state }) => getStyles(styles?.states?.[state]?.rightAnimationContainer)}
`;
export const BottomAnimationStyled = styled.div `
${({ styles, state }) => getStyles(styles?.states?.[state]?.bottomAnimationContainer)}
`;
export const LeftAnimationStyled = styled.div `
${({ styles, state }) => getStyles(styles?.states?.[state]?.leftAnimationContainer)}
`;
//# sourceMappingURL=selectorBoxFile.styled.js.map