Editor mentions: style [data-type=ticketMention] with colored status dot via ::before to match display chips
This commit is contained in:
parent
3b013f205a
commit
b3fa6955b7
1 changed files with 12 additions and 1 deletions
|
|
@ -174,7 +174,18 @@
|
|||
/* While editing, TipTap renders the mention as a span with data-type="ticketMention".
|
||||
Mirror the same chip style so the layout stays consistent during edits. */
|
||||
.rich-text .ProseMirror [data-type="ticketMention"] {
|
||||
@apply inline-flex items-center gap-2 rounded-full border border-slate-200 bg-slate-100 px-2.5 py-1 text-xs font-semibold text-neutral-800;
|
||||
@apply inline-flex items-center gap-2 rounded-full border border-slate-200 bg-slate-100 px-2.5 py-1 text-xs font-semibold text-neutral-800 align-middle;
|
||||
position: relative;
|
||||
}
|
||||
.rich-text .ProseMirror [data-type="ticketMention"]::before {
|
||||
content: "";
|
||||
@apply inline-block size-2 rounded-full bg-slate-400;
|
||||
margin-right: 0.375rem; /* ~gap-1.5 */
|
||||
}
|
||||
.rich-text .ProseMirror [data-type="ticketMention"][status="PENDING"]::before { @apply bg-amber-400; }
|
||||
.rich-text .ProseMirror [data-type="ticketMention"][status="AWAITING_ATTENDANCE"]::before { @apply bg-sky-500; }
|
||||
.rich-text .ProseMirror [data-type="ticketMention"][status="PAUSED"]::before { @apply bg-violet-500; }
|
||||
.rich-text .ProseMirror [data-type="ticketMention"][status="RESOLVED"]::before { @apply bg-emerald-500; }
|
||||
}
|
||||
.rich-text [data-ticket-mention="true"] .ticket-mention-dot,
|
||||
.rich-text .ticket-mention .ticket-mention-dot {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue