import { makeStyles, Theme } from '@material-ui/core'; export const getVectorSearchStyles = makeStyles((theme: Theme) => ({ form: { display: 'flex', justifyContent: 'space-between', '& .field': { display: 'flex', flexDirection: 'column', flexBasis: '33%', padding: theme.spacing(2, 3, 4), backgroundColor: '#fff', borderRadius: theme.spacing(0.5), boxShadow: '3px 3px 10px rgba(0, 0, 0, 0.05)', '& .textarea': { border: `1px solid ${theme.palette.milvusGrey.main}`, borderRadius: theme.spacing(0.5), padding: theme.spacing(1), paddingBottom: '18px', marginTop: theme.spacing(2), }, // reset default style '& .textfield': { padding: 0, fontSize: '14px', lineHeight: '20px', fontWeight: 400, '&::before': { borderBottom: 'none', }, '&::after': { borderBottom: 'none', }, }, '& .multiline': { '& textarea': { overflow: 'auto', // change scrollbar style '&::-webkit-scrollbar': { width: '8px', }, '&::-webkit-scrollbar-track': { backgroundColor: '#f9f9f9', }, '&::-webkit-scrollbar-thumb': { borderRadius: '8px', backgroundColor: '#eee', }, }, }, }, '& .field-second': { flexGrow: 1, margin: theme.spacing(0, 1), }, // Textfield component has more bottom space to show error msg when validation // if still set padding-bottom, the whole form space will be stretched '& .field-params': { paddingBottom: 0, }, '& .text': { color: theme.palette.milvusGrey.dark, fontWeight: 500, }, }, selector: { width: '100%', marginTop: theme.spacing(2), }, paramsWrapper: { display: 'flex', flexDirection: 'column', }, toolbar: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: theme.spacing(2, 0), '& .left': { display: 'flex', alignItems: 'center', '& .text': { color: theme.palette.milvusGrey.main, }, }, '& .right': { '& .btn': { marginRight: theme.spacing(1), }, '& .icon': { fontSize: '16px', }, }, }, menuLabel: { minWidth: '108px', padding: theme.spacing(0, 1), margin: theme.spacing(0, 1), backgroundColor: '#fff', color: theme.palette.milvusGrey.dark, }, menuItem: { fontWeight: 500, fontSize: '12px', lineHeight: '16px', color: theme.palette.milvusGrey.dark, }, }));