35 lines
810 B
JavaScript
35 lines
810 B
JavaScript
|
import styled, { css } from 'styled-components';
|
||
|
|
|
||
|
|
const EmojiWrapper = styled.span`
|
||
|
|
padding-top: 0.9em;
|
||
|
|
padding-bottom: 0.1em;
|
||
|
|
${({ selected }) => !selected && css`
|
||
|
|
:hover {
|
||
|
|
border-radius:100%;
|
||
|
|
outline-color: transparent;
|
||
|
|
outline-style:solid;
|
||
|
|
box-shadow: 0 0 0 0.25em #eee;
|
||
|
|
background-color: #eee;
|
||
|
|
opacity: 0.75;
|
||
|
|
}
|
||
|
|
`}
|
||
|
|
${({ selected }) => selected && css`
|
||
|
|
em-emoji {
|
||
|
|
cursor: not-allowed;
|
||
|
|
}
|
||
|
|
`}
|
||
|
|
${({ selected, emoji }) => selected && selected !== emoji && css`
|
||
|
|
opacity: 0.75;
|
||
|
|
`}
|
||
|
|
${({ selected, emoji }) => selected && selected === emoji && css`
|
||
|
|
border-radius:100%;
|
||
|
|
outline-color: transparent;
|
||
|
|
outline-style:solid;
|
||
|
|
box-shadow: 0 0 0 0.25em #eee;
|
||
|
|
background-color: #eee;
|
||
|
|
`}
|
||
|
|
`;
|
||
|
|
|
||
|
|
export default {
|
||
|
|
EmojiWrapper,
|
||
|
|
};
|