devs/emoji-picker-element
4
0
Fork 0
mirror of https://github.com/nolanlawson/emoji-picker-element.git synced 2024-06-05 18:31:25 +02:00
Code Issues Projects Releases Wiki Activity

fix: tweak styles

Browse source
This commit is contained in:
Nolan Lawson 2020-05-31 09:56:02 -07:00
parent 28c6864d75
commit fd1ed4fdf0
3 changed files with 26 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/svelte/components/Picker/Picker.html
View file

@ -27,6 +27,7 @@
{/each}
</div>
<div role="tabpanel"
class="lep-tabpanel"
aria-label={i18n.categories[currentCategory.name]}
id="lite-emoji-picker-tab-{currentCategory.group}">
<div class="lep-emoji-menu" role="menu">

18
src/svelte/components/Picker/Picker.scss
View file

@ -1,9 +1,12 @@
.lep-picker {
& *, *::before, *::after {
&, &::before, &::after, & *, *::before, *::after {
box-sizing: border-box;
}
contain: content;
display: flex;
flex-direction: column;
max-height: 100%;
}
// via https://stackoverflow.com/a/19758620
@ -35,15 +38,26 @@
grid-template-columns: repeat(var(--lep-num-columns), 1fr);
justify-content: center;
align-items: center;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
min-height: 0;
flex: 1;
grid-row-gap: 0.5rem;
}
.lep-emoji {
font-size: 1.5rem;
font-size: 1.375rem;
display: flex;
align-items: center;
justify-content: center;
font-family: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Twemoji Mozilla",
"Noto Color Emoji", "EmojiOne Color", "Android Emoji";
}
.lep-tabpanel {
min-height: 0;
flex: 1;
display: flex;
}
button.lep-button-reset {
margin: 0;
padding: 0;

10
test/index.html
View file

@ -3,9 +3,17 @@
<head>
<meta charset="UTF-8">
<title>Ad-hoc test</title>
<style>
.container {
height: 300px;
width: 380px;
overflow: hidden;
}
</style>
</head>
<body>
<h1>Ad-hoc test</h1>
<div class="container"></div>
<script type="module">
import * as liteEmojiPicker from '../dist/es/index.js'
@ -16,7 +24,7 @@
customElements.define('lite-emoji-picker', liteEmojiPicker.Picker)
const picker = document.createElement('lite-emoji-picker')
document.body.appendChild(picker)
document.querySelector('.container').appendChild(picker)
})()
</script>
</body>