[frogend] Emoji categories (#1051)

* emoji category combobox

* emoji categorizing

* dropdown entry separation

* emoji filtering/sorting

* add some explaining comments

* remove unneeded default-value code

* remove wrongly created package.json

* configurable ComboBox label+placeHolder
This commit is contained in:
f0x52 2022-11-16 17:05:49 +01:00 committed by GitHub
commit aa5c4e065c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 249 additions and 35 deletions

View file

@ -502,4 +502,62 @@ span.form-info {
.instance-list .filter {
flex-direction: column;
}
}
.combobox-wrapper {
display: flex;
flex-direction: column;
input[aria-expanded="true"] {
border-bottom: none;
}
}
.combobox {
height: 2.5rem;
font-size: 1rem;
line-height: 1.5rem;
}
.popover {
position: relative;
z-index: 50;
display: flex;
max-height: min(var(--popover-available-height,300px),300px);
flex-direction: column;
overflow: auto;
overscroll-behavior: contain;
border: 0.15rem solid $orange2;
background: $bg-accent;
}
.combobox-item {
display: flex;
cursor: pointer;
scroll-margin: 0.5rem;
align-items: center;
gap: 0.5rem;
padding: 0.5rem;
line-height: 1.5rem;
border-bottom: 0.15rem solid $gray3;
&:last-child {
border: none;
}
img {
height: 1.5rem;
width: 1.5rem;
object-fit: contain;
}
}
.combobox-item:hover {
background: $button-hover-bg;
color: $button-fg;
}
.combobox-item[data-active-item] {
background: $button-hover-bg;
color: hsl(204 20% 100%);
}