From 7d8293d8cd4bb71c852a55e29b634a177f684ab9 Mon Sep 17 00:00:00 2001
From: Ricardo Wurmus <rekado@elephly.net>
Date: Sat, 31 Dec 2022 18:58:28 +0100
Subject: Add JavaScript to recognize and style query tokens.

---
 assets/mumi.scss | 113 +++++++++++++++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 109 insertions(+), 4 deletions(-)

(limited to 'assets/mumi.scss')

diff --git a/assets/mumi.scss b/assets/mumi.scss
index 6912a88..3a96b55 100644
--- a/assets/mumi.scss
+++ b/assets/mumi.scss
@@ -261,10 +261,6 @@ nav span.navbar-text {
 #search.form-inline {
     margin-bottom: 0;
 }
-
-#search input {
-    background-color: var(--background-color);
-}
 #search.form-inline input {
     height: 1.3em;
 }
@@ -680,3 +676,112 @@ div.line pre {
 .syntax-open, .syntax-close {
     color: #688;
 }
+
+
+/* token input */
+.tokenInput {
+    --border-color: var(--form-element-border-color);
+    --color: var(--form-element-color);
+
+    position: relative;
+    width: 100%;
+    height: calc( (1rem * var(--line-height)) + (var(--form-element-spacing-vertical) * 2) + (var(--border-width) * 2));
+    padding-inline-start: calc(var(--form-element-spacing-horizontal) + 1.75rem);
+    border-radius: 5rem;
+    background-color: var(--background-color);
+    background-image: var(--icon-search);
+    background-position: center left 1.125rem;
+    background-size: 1rem auto;
+    background-repeat: no-repeat;
+    border: var(--border-width) solid var(--border-color);
+    outline-offset: -2px;
+    outline: none;
+    box-shadow: none;
+    color: var(--color);
+    font-weight: var(--font-weight);
+    cursor: text;
+}
+
+.tokenInput input[type="search"]:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]) {
+    border: none;
+    box-shadow: none;
+    padding: 0;
+    padding-inline-start: 0;
+    background: none;
+    width: auto;
+    &:focus {
+        box-shadow: none;
+    }
+}
+
+.tokenInput .token {
+    margin: 0 4px 2px 0;
+    border: 1px solid var(--nav-border-color);
+    border-radius: 10px;
+    padding: 2px 4px 4px 4px;
+    cursor: pointer;
+}
+
+.tokenInput .token .x {
+    margin: 0 0 0 4px;
+    color: var(--secondary);
+    vertical-align: super;
+    font-size: 9pt;
+    padding: 0;
+}
+
+.tokenInput .token.completed {
+    background-color: var(--secondary);
+    color: var(--secondary-inverse);
+}
+.tokenInput .token.completed .x {
+    color: var(--secondary-inverse);
+}
+.tokenInput .token.free-text {
+    background-color: transparent;
+}
+
+.tokenInput .selected,
+.tokenInput .floating .completion.selected,
+.tokenInput .token.selected {
+    background-color: var(--mark-background-color);
+    color: var(--mark-color);
+}
+
+.tokenInput .floating {
+    border: 1px solid var(--border-color);
+    font-size: 1rem;
+    background-color: var(--background-color);
+    width: 100%;
+    max-height: 150px;
+    overflow-y: auto;
+    margin-top: .2em;
+    box-shadow: 4px 4px 10px var(--border-color);
+    z-index: 10;
+}
+.tokenInput .floating .container {
+    padding: 0;
+    margin: 0;
+    width: auto;
+}
+.tokenInput .floating .x {
+    display: none;
+}
+.tokenInput .floating .list {
+    margin-top: 14px;
+}
+.tokenInput .completion {
+    padding: 6px 10px 6px 10px;
+    cursor: pointer;
+}
+.tokenInput .completion:hover {
+    background: lightgray;
+}
+.tokenInput .floating .heading {
+    background: #eee;
+    padding: 2px 4px;
+}
+.tokenInput .hints {
+    padding: 10px;
+    line-height: 2em;
+}
-- 
cgit v1.2.3