svelte-emoji-selector icon indicating copy to clipboard operation
svelte-emoji-selector copied to clipboard

Include default styles explicitly, rather than rely on them not being changed

Open mikemaccana opened this issue 6 years ago • 0 comments

Thanks for making svelte-emoji-selector! 😃 The styles used in this component assume the browser defaults - most users will change typography and many may change other layout properties. I currently add the following to a wrapper component to use svelte-emoji-selector, it would be great to have them included!

:global(.chat section div) {
		display: block;
		font-size: 16px;
	}

	:global(.chat section div button) {
		display: inline-block;
		box-shadow: none;
		max-width: unset;
		color: #222;
		padding: 1px 6px;
	}

	/* Fix positioning of emoji selector */
	:global(.chat section div div.svelte-emoji-picker) {
		bottom: 0 !important;
		top: unset !important;
		transform: unset !important;
	}

	/* Fix Emoji selector from showing horizontal scrollbar */
	:global(.svelte-emoji-picker__emoji-list) {
		overflow-x: hidden !important;
	}

mikemaccana avatar Nov 18 '19 11:11 mikemaccana