From aa5c4e065c61bf30d7bd97579f6bfeecc71238bd Mon Sep 17 00:00:00 2001
From: f0x52 <f0x@cthu.lu>
Date: Wed, 16 Nov 2022 17:05:49 +0100
Subject: [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
---
 web/source/settings/style.css | 58 +++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 58 insertions(+)

(limited to 'web/source/settings/style.css')

diff --git a/web/source/settings/style.css b/web/source/settings/style.css
index 93e52f680..3af52337a 100644
--- a/web/source/settings/style.css
+++ b/web/source/settings/style.css
@@ -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%);
 }
\ No newline at end of file
-- 
cgit v1.2.3