Skip to content
This repository has been archived by the owner on Jul 23, 2020. It is now read-only.

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

Open
mikemaccana opened this issue Nov 18, 2019 · 0 comments

Comments

@mikemaccana
Copy link

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;
	}
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant