make mentions work properly + ui for them

1 files changed, 49 insertions, 0 deletions

diff --git a/static/pills.css b/static/pills.css
new file mode 100644
index 0000000..af670b8
--- /dev/null
+++ b/static/pills.css
@@ -0,0 +1,49 @@
+.inlinePill {
+  display: inline-grid;
+  grid-auto-flow: column;
+  align-items: center;
+  gap: var(--spacing-single);
+  padding: var(--spacing-half) var(--spacing-single);
+  margin: var(--spacing-single) var(--spacing-half) 0 0;
+  background: var(--clr-secondary);
+  color: var(--clr-foreground-on-secondary);
+  border-radius: var(--border-radius);
+  width: max-content !important;
+
+  &:not(:has(+ .inlinePill)) {
+    margin-bottom: var(--spacing-single);
+  }
+
+  &.invalid {
+    outline: 2px solid var(--clr-negative);
+  }
+
+  &[disabled] {
+    opacity: 0.8;
+  }
+
+  .pillIcon {
+    width: var(--icon-size);
+    aspect-ratio: 1;
+    border-radius: var(--border-radius);
+  }
+
+  button& {
+    border: none;
+    font-family: inherit;
+    font-size: inherit;
+    cursor: pointer;
+  }
+
+  form& {
+    input.pillInput {
+      border: none !important;
+      border-radius: 0 !important;
+      border-bottom: var(--border) !important;
+      background: none !important;
+      margin: 0 !important;
+      padding: 0 !important;
+      max-width: 50vw;
+    }
+  }
+}