@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
50 lines (49 loc) • 1.63 kB
JavaScript
import styled, { css } from 'styled-components';
import { getStyles, getTypographyStyles } from '../../utils/getStyles/getStyles';
export const ActionBottomSheetStyled = styled.div `
max-height: 100vh;
max-height: var(--100svh, 100vh);
max-height: 100svh;
${props => getStyles(props.styles)}
height: ${({ $height }) => $height};
`;
export const ActionBottomSheetHeaderStyled = styled.div `
${props => getStyles(props.styles)}
`;
export const ActionBottomSheetControlStyled = styled.div `
${props => getStyles(props.styles)}
`;
export const ActionBottomSheetActionStyled = styled.div `
${props => getStyles(props.styles)}
`;
export const ActionBottomSheetIconSyled = styled.div `
display: flex;
${props => getStyles(props.styles)}
`;
export const ActionBottomSheetTitleSyled = styled.div `
display: block;
${({ theme: { MEDIA_QUERIES } }) => css `
${MEDIA_QUERIES?.onlyDesktop} {
display: 'block';
}
`}
${props => getStyles(props.styles.titleContainer)}
${props => getTypographyStyles(props.styles.titleContainerFont)}
`;
export const ActionBottomSheetHeaderContentStyled = styled.div `
${props => getStyles(props.styles.headerContent)}
`;
export const ActionBottomSheetContentStyled = styled.div `
${props => getStyles(props.styles)};
${({ theme: { MEDIA_QUERIES } }) => css `
${MEDIA_QUERIES?.mobileAndTablet} {
max-height: 100vh;
max-height: var(--100svh, 100vh);
max-height: 100svh;
}
`}
`;
export const DraggableIcon = styled.div `
${props => getStyles(props.styles.dragIconContainer)}
`;
//# sourceMappingURL=actionBottomSheet.styled.js.map