MelissaMenu: divisor com degrade entre categorias

Cada .mm-cat (exceto a ultima) ganha um ::after de 1px que sai
colado na borda esquerda e some no meio via linear-gradient
(--m-border-strong -> transparent). Da uma separacao visual
sutil sem precisar de border-bottom solido.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Leonardo
2026-05-06 14:30:04 -03:00
parent 72f989f23c
commit 7572cb3295
+16
View File
@@ -738,6 +738,7 @@ async function sair() {
} }
.mm-cat { .mm-cat {
position: relative;
width: 100%; width: 100%;
display: flex; display: flex;
align-items: center; align-items: center;
@@ -753,6 +754,21 @@ async function sair() {
font-size: 0.88rem; font-size: 0.88rem;
transition: background-color 120ms ease, color 120ms ease; transition: background-color 120ms ease, color 120ms ease;
} }
/* Divisor com degrade — sai colado na borda esquerda e some no meio */
.mm-cat:not(:last-child)::after {
content: '';
position: absolute;
left: 0;
right: 50%;
bottom: -1px;
height: 1px;
background: linear-gradient(
to right,
var(--m-border-strong) 0%,
transparent 100%
);
pointer-events: none;
}
.mm-cat:hover { background: var(--m-bg-soft); color: var(--m-text); } .mm-cat:hover { background: var(--m-bg-soft); color: var(--m-text); }
.mm-cat.is-active { .mm-cat.is-active {
background: var(--m-bg-soft-hover); background: var(--m-bg-soft-hover);