UNPKG

@chayns-components/emoji-input

Version:
74 lines (69 loc) 1.92 kB
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