fix: tweak styles
This commit is contained in:
Nolan Lawson
parent
fd1ed4fdf0
commit
f2633b8df0
|
|
@ -1,12 +1,12 @@
|
|||
// via https://unpkg.com/browse/emojibase-data@5.0.1/meta/groups.json
|
||||
export const categories = [
|
||||
{ group: 0, name: 'smileys-emotion' },
|
||||
{ group: 1, name: 'people-body' },
|
||||
{ group: 3, name: 'animals-nature' },
|
||||
{ group: 4, name: 'food-drink' },
|
||||
{ group: 5, name: 'travel-places' },
|
||||
{ group: 6, name: 'activities' },
|
||||
{ group: 7, name: 'objects' },
|
||||
{ group: 8, name: 'symbols' },
|
||||
{ group: 9, name: 'flags' }
|
||||
{ group: 0, emoji: '😀', name: 'smileys-emotion' },
|
||||
{ group: 1, emoji: '👋', name: 'people-body' },
|
||||
{ group: 3, emoji: '🐱', name: 'animals-nature' },
|
||||
{ group: 4, emoji: '🍎', name: 'food-drink' },
|
||||
{ group: 5, emoji: '🚗', name: 'travel-places' },
|
||||
{ group: 6, emoji: '⚽', name: 'activities' },
|
||||
{ group: 7, emoji: '✏', name: 'objects' },
|
||||
{ group: 8, emoji: '✅', name: 'symbols' },
|
||||
{ group: 9, emoji: '🏁', name: 'flags' }
|
||||
]
|
||||
|
|
|
|||
|
|
@ -7,33 +7,36 @@
|
|||
>
|
||||
<div>
|
||||
<input
|
||||
id="lite-emoji-picker-search"
|
||||
id="lep-search"
|
||||
class="lep-search"
|
||||
type="text"
|
||||
placeholder={i18n.search}
|
||||
autocapitalize="none"
|
||||
spellcheck="true"
|
||||
bind:value={rawSearchText}
|
||||
>
|
||||
<label class="lep-sr-only" for="lite-emoji-picker-search">{i18n.search}</label>
|
||||
<label class="lep-sr-only" for="lep-search">{i18n.search}</label>
|
||||
</div>
|
||||
<div role="tablist" aria-label={i18n.categoriesLabel}>
|
||||
<div class="lep-nav" role="tablist" aria-label={i18n.categoriesLabel}>
|
||||
{#each categories as category (category.group)}
|
||||
<button role="tab"
|
||||
class="lep-button-reset"
|
||||
aria-controls="lite-emoji-picker-tab-{category.group}"
|
||||
class="lep-nav-button lep-emoji"
|
||||
aria-controls="lep-tab-{category.group}"
|
||||
aria-label={i18n.categories[category.name]}
|
||||
title={i18n.categories[category.name]}
|
||||
on:click={() => handleCategoryClick(category)}>
|
||||
{i18n.categories[category.name]}
|
||||
{category.emoji}
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
<div role="tabpanel"
|
||||
class="lep-tabpanel"
|
||||
aria-label={i18n.categories[currentCategory.name]}
|
||||
id="lite-emoji-picker-tab-{currentCategory.group}">
|
||||
id="lep-tab-{currentCategory.group}">
|
||||
<div class="lep-emoji-menu" role="menu">
|
||||
{#each currentEmojis as emoji (emoji.unicode)}
|
||||
<button role="menuitem"
|
||||
class="lep-emoji lep-button-reset"
|
||||
class="lep-tabpanel-emoji lep-emoji"
|
||||
id="lep-emoji-{emoji.unicode}">
|
||||
{emoji.unicode}
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -1,48 +1,15 @@
|
|||
.lep-picker {
|
||||
&, &::before, &::after, & *, *::before, *::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
@import '../../styles/global.scss';
|
||||
|
||||
contain: content;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
// via https://stackoverflow.com/a/19758620
|
||||
.lep-sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
border: 0;
|
||||
}
|
||||
.lep-hidden {
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
.lep-shown {
|
||||
display: block;
|
||||
}
|
||||
.lep-not-shown {
|
||||
display: none;
|
||||
}
|
||||
.lep-emoji-menu {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(var(--lep-num-columns), 1fr);
|
||||
justify-content: center;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
overflow-y: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
-webkit-overflow-scrolling: touch; // fix iOS scrolling
|
||||
will-change: transform; // fix "repaints on scroll" warning in Chrome https://crbug.com/514303
|
||||
min-height: 0;
|
||||
flex: 1;
|
||||
grid-row-gap: 0.5rem;
|
||||
}
|
||||
.lep-emoji {
|
||||
font-size: 1.375rem;
|
||||
|
|
@ -53,16 +20,28 @@
|
|||
"Noto Color Emoji", "EmojiOne Color", "Android Emoji";
|
||||
}
|
||||
|
||||
.lep-nav {
|
||||
display: flex;
|
||||
}
|
||||
button.lep-nav-button.lep-emoji {
|
||||
flex: 1;
|
||||
padding: 0.5rem 0;
|
||||
outline-offset: -1px; // fix focus ring getting cropped
|
||||
}
|
||||
|
||||
.lep-tabpanel {
|
||||
min-height: 0;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
}
|
||||
button.lep-button-reset {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: none;
|
||||
background: none;
|
||||
box-shadow: none;
|
||||
cursor: pointer;
|
||||
|
||||
button.lep-tabpanel-emoji.lep-emoji {
|
||||
padding: 0.5rem 0;
|
||||
outline-offset: -1px; // fix focus ring getting cropped
|
||||
}
|
||||
|
||||
input.lep-search {
|
||||
padding: 0.25rem;
|
||||
border-radius: 0.5rem;
|
||||
border: 1px solid var(--lep-input-border-color);
|
||||
}
|
||||
|
|
@ -0,0 +1,61 @@
|
|||
.lep-picker {
|
||||
&, &::before, &::after, & *, *::before, *::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
--lep-input-border-color: #999;
|
||||
--lep-background-color: #fff;
|
||||
|
||||
contain: content;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-height: 100%;
|
||||
background: var(--lep-background-color);
|
||||
}
|
||||
|
||||
// via https://stackoverflow.com/a/19758620
|
||||
.lep-sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.lep-hidden {
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
.lep-shown {
|
||||
display: block;
|
||||
}
|
||||
.lep-not-shown {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* CSS resets */
|
||||
|
||||
.lep-picker button {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: none;
|
||||
background: none;
|
||||
box-shadow: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.lep-picker input {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
line-height: 1.15;
|
||||
}
|
||||
|
||||
.lep-picker input[type=search] {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
Loading…
Reference in New Issue