54 lines
1012 B
TypeScript
54 lines
1012 B
TypeScript
import styled from '@emotion/styled'
|
|
import { css, keyframes } from '@emotion/react'
|
|
|
|
export const Avatar = styled.img`
|
|
width: 96px;
|
|
height: 96px;
|
|
margin: 0 auto;
|
|
border-radius: 6px;
|
|
`
|
|
|
|
export const Wrapper = styled.div<{ warn?: boolean; width?: string | number }>`
|
|
list-style: none;
|
|
background-color: #ffffff;
|
|
padding: 16px;
|
|
border-radius: 12px;
|
|
box-shadow: 2px 2px 6px #0000005c;
|
|
transition: all 0.5;
|
|
position: relative;
|
|
width: 180px;
|
|
min-height: 190px;
|
|
max-height: 200px;
|
|
margin-right: 12px;
|
|
padding-bottom: 22px;
|
|
${({ width }) =>
|
|
width
|
|
? css`
|
|
width: ${width};
|
|
`
|
|
: ''}
|
|
|
|
${(props) =>
|
|
props.warn
|
|
? css`
|
|
background-color: #000000;
|
|
opacity: 0.7;
|
|
color: #e4e4e4;
|
|
`
|
|
: ''}
|
|
`
|
|
|
|
export const AddMissedButton = styled.button`
|
|
position: absolute;
|
|
bottom: 8px;
|
|
right: 12px;
|
|
border: none;
|
|
background-color: #00000000;
|
|
opacity: 0.2;
|
|
|
|
:hover {
|
|
cursor: pointer;
|
|
opacity: 1;
|
|
}
|
|
`
|