35 lines
935 B
TypeScript
35 lines
935 B
TypeScript
import { css } from '@emotion/react';
|
|
|
|
import { ThemeType } from './themes';
|
|
|
|
export const overlayBackground = (props: { theme: ThemeType }) =>
|
|
css`
|
|
backdrop-filter: blur(8px);
|
|
background: ${props.theme.background.transparent.secondary};
|
|
box-shadow: ${props.theme.boxShadow.strong};
|
|
`;
|
|
|
|
export const textInputStyle = (props: any) =>
|
|
css`
|
|
background-color: transparent;
|
|
border: none;
|
|
color: ${props.theme.font.color.primary};
|
|
outline: none;
|
|
padding: ${props.theme.spacing(0)} ${props.theme.spacing(2)};
|
|
|
|
&::placeholder,
|
|
&::-webkit-input-placeholder {
|
|
color: ${props.theme.font.color.light};
|
|
font-family: ${props.theme.font.family};
|
|
font-weight: ${props.theme.font.weight.medium};
|
|
}
|
|
`;
|
|
|
|
export const hoverBackground = (props: any) =>
|
|
css`
|
|
transition: background 0.1s ease;
|
|
&:hover {
|
|
background: ${props.theme.background.transparent.light};
|
|
}
|
|
`;
|