@chayns-components/emoji-input
Version:
Input field that supports HTML elements and emojis
74 lines (69 loc) • 1.92 kB
JavaScript
import styled, { css } from 'styled-components';
export const StyledEmojiPickerEmojis = styled.div`
display: ${_ref => {
let {
$shouldShowNoContentInfo
} = _ref;
return $shouldShowNoContentInfo ? 'flex' : 'grid';
}};
flex: 1 1 auto;
grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));
grid-template-rows: min-content;
overflow-y: ${_ref2 => {
let {
$shouldPreventScroll
} = _ref2;
return $shouldPreventScroll ? 'hidden' : 'scroll';
}};
padding: 5px 0 5px 5px;
position: relative;
width: 100%;
${_ref3 => {
let {
$shouldShowNoContentInfo
} = _ref3;
return $shouldShowNoContentInfo && css`
align-items: center;
`;
}}
${_ref4 => {
let {
$shouldPreventScroll
} = _ref4;
return $shouldPreventScroll && css`
padding-right: 5px;
`;
}} // Styles for custom scrollbar
${_ref5 => {
let {
$browser,
theme
} = _ref5;
return $browser === 'firefox' ? css`
scrollbar-color: rgba(${theme['text-rgb']}, 0.15) transparent;
scrollbar-width: thin;
` : css`
&::-webkit-scrollbar {
width: 5px;
}
&::-webkit-scrollbar-track {
background-color: transparent;
}
&::-webkit-scrollbar-button {
background-color: transparent;
height: 5px;
}
&::-webkit-scrollbar-thumb {
background-color: rgba(${theme['text-rgb']}, 0.15);
border-radius: 20px;
}
`;
}}
`;
export const StyledEmojiPickerEmojisNoContentInfo = styled.div`
font-size: 85%;
opacity: 0.85;
padding: 0 12.5%;
text-align: center;
`;
//# sourceMappingURL=EmojiPickerEmojis.styles.js.map