@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 • 2.26 kB
JavaScript
import styled, { css } from 'styled-components';
import { srOnlyMixin } from '../../styles/mixins/srOnly.mixin';
import { getStyles } from '../../utils/getStyles/getStyles';
export const InputSearchStyled = styled.div `
position: relative;
display: flex;
flex-direction: column;
`;
const buildHeight = ({ searchListContainerDeviceStyles, $height, useActionBottomSheet, }) => {
if (useActionBottomSheet) {
return;
}
if (!$height) {
return;
}
return css `
height: ${`calc(${$height} + ${searchListContainerDeviceStyles?.border_bottom_width ?? '0px'} + ${searchListContainerDeviceStyles?.padding_top ?? '0px'} + ${searchListContainerDeviceStyles?.padding_bottom ?? '0px'})`};
`;
};
export const ListContainerStyled = styled.div `
transition: height 200ms;
${({ styles }) => getStyles(styles?.searchListContainer)}
`;
export const InputSearchListStyled = styled.div `
${({ styles }) => getStyles(styles?.searchListSubContainer)}
${({ $height }) => $height &&
css `
overflow-y: auto;
`};
${({ theme: { MEDIA_QUERIES: { onlyDesktop, onlyTablet, onlyMobile }, }, $height, useActionBottomSheet, styles, }) => css `
${onlyDesktop} {
${buildHeight({
searchListContainerDeviceStyles: styles?.searchListContainer?.DESKTOP,
$height,
useActionBottomSheet,
})}
}
${onlyTablet} {
${buildHeight({
searchListContainerDeviceStyles: styles?.searchListContainer?.TABLET,
$height,
useActionBottomSheet,
})}
}
${onlyMobile} {
${buildHeight({
searchListContainerDeviceStyles: styles?.searchListContainer?.MOBILE,
$height,
useActionBottomSheet,
})}
}
`};
`;
export const LoadingWrapper = styled.div `
${({ loading }) => !loading && srOnlyMixin}
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
${({ styles, $expanded }) => $expanded
? getStyles(styles?.loaderExpandedContainer)
: getStyles(styles?.loaderContractedContainer)};
`;
export const NoResultsTextWrapper = styled.div `
display: flex;
${({ styles }) => getStyles(styles?.noResultsTextContainer)};
`;
export const NumMatchesScreenReader = styled.div `
${srOnlyMixin}
`;
//# sourceMappingURL=inputSearch.styled.js.map