acai-ui 1.65.5

package/src/components/drawer/acai-ui-drawer-styles.scss

@@ -0,0 +1,586 @@
+// ===================================================================
+// FOLHA — menu de tela cheia no celular (abaixo de `sheetBreakpoint`)
+// ===================================================================
+//
+// A moldura aqui é um QDialog `maximized` com slide-up, não um QDrawer. O que
+// muda de verdade: não há gaveta nem backdrop, a tela é toda do menu, e um
+// cabeçalho fixo troca entre a navegação e as preferências no MESMO lugar —
+// em vez de abrir um segundo painel por cima do primeiro.
+.acai-drawer-folha {
+  .q-dialog__inner > * {
+    // Sem isto o QDialog arredonda os cantos e põe sombra de "card" em volta do
+    // conteúdo, e a folha deixa de parecer tela cheia.
+    //
+    // ⚠️ NÃO zerar o `background` aqui: este seletor tem especificidade maior
+    // que `.drawer-container`, então um `background: transparent` vence a cor
+    // do drawer e a folha fica literalmente transparente, com a página lendo-se
+    // por baixo do menu. Aconteceu.
+    border-radius: 0;
+    box-shadow: none;
+  }
+}
+
+.drawer-container--folha {
+  // Âncora das ações, que são filhas absolutas daqui.
+  position: relative;
+  // A gaveta lateral tem sombra pra se separar do conteúdo ao lado. A folha
+  // não tem "ao lado" — ela É a tela.
+  box-shadow: none;
+
+  // A primeira linha da marca (ou o título) cede a quina direita pras ações,
+  // senão a logo passa por baixo dos botões. 2 ações = 44+44+2 de gap + 8 de
+  // respiro; com `preferences: false` sobra uma só.
+  .drawer-brand > :first-child {
+    padding-right: 98px;
+  }
+
+  &.drawer-container--folha-uma-acao .drawer-brand > :first-child {
+    padding-right: 52px;
+  }
+}
+
+// Ações flutuando sobre a linha da marca, encostadas na direita. O `top` vem
+// medido (style inline); o `right` é o mesmo padding lateral do `.drawer-brand`,
+// pra a borda do último botão bater com a do conteúdo.
+.drawer-folha__acoes {
+  position: absolute;
+  right: 18px;
+  z-index: 3;
+  display: flex;
+  align-items: center;
+  gap: 2px;
+}
+
+.drawer-folha__h2 {
+  margin: 0;
+  font-size: 1.0625rem;
+  font-weight: 700;
+  line-height: 1.4;
+  color: var(--acai-drawer-text, #fff);
+}
+
+// ===================================================================
+// Troca de vista (menu ⇄ preferências)
+// ===================================================================
+//
+// Duas direções: entrando nas preferências o novo conteúdo vem da DIREITA;
+// voltando pro menu vem da ESQUERDA. É o que dá a noção de avançar e recuar —
+// com uma animação só, ir e voltar ficariam idênticos.
+//
+// `mode="out-in"` no template garante que o que sai termina antes do que entra,
+// senão os dois se sobrepõem e a altura salta no meio da troca.
+.acai-vista-avanca-enter-active,
+.acai-vista-avanca-leave-active,
+.acai-vista-volta-enter-active,
+.acai-vista-volta-leave-active {
+  transition:
+    opacity 140ms ease,
+    transform 180ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.acai-vista-avanca-enter-from {
+  opacity: 0;
+  transform: translateX(16px);
+}
+.acai-vista-avanca-leave-to {
+  opacity: 0;
+  transform: translateX(-16px);
+}
+
+.acai-vista-volta-enter-from {
+  opacity: 0;
+  transform: translateX(-16px);
+}
+.acai-vista-volta-leave-to {
+  opacity: 0;
+  transform: translateX(16px);
+}
+
+// A preferência "reduzir animações" da lib zera transições globalmente via
+// `html[data-acai-reduzir-anim] *`. Isto cobre quem pediu menos movimento no
+// SISTEMA e nunca abriu o painel de preferências.
+@media (prefers-reduced-motion: reduce) {
+  .acai-vista-avanca-enter-active,
+  .acai-vista-avanca-leave-active,
+  .acai-vista-volta-enter-active,
+  .acai-vista-volta-leave-active {
+    transition: none;
+  }
+}
+
+// Ações do cabeçalho da folha (trocar vista, fechar). Mesma linguagem visual do
+// handle/fechar, mas quadradas e maiores: aqui o espaço não é disputado e o
+// alvo é o dedo.
+.acai-drawer-acao {
+  display: grid;
+  place-items: center;
+  flex-shrink: 0;
+  width: 44px;
+  height: 44px;
+  padding: 0;
+  border: 0;
+  border-radius: $radius-lg;
+  background: transparent;
+  color: var(--acai-drawer-text, #fff);
+  cursor: pointer;
+
+  &:hover {
+    background: var(--acai-item-hover-bg, rgba(255, 255, 255, 0.12));
+    color: var(--acai-item-hover-text, #fff);
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--acai-item-hover-bg, #{$color-primary-50});
+    outline-offset: 2px;
+  }
+}
+
+// O painel de preferências embutido rola sozinho dentro da folha.
+.drawer-folha__painel {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+}
+
+.drawer-container {
+  // 🔴 OBRIGATÓRIO. Esta classe já morou no próprio QDrawer, onde herdava o
+  // `fit` (100%) do `.q-drawer__content`. Ao virar uma div INTERNA — pra poder
+  // trocar a moldura entre gaveta e folha — ela passou a encolher no conteúdo:
+  // 163px num drawer de 1205, com `.drawer-scroll` (flex: 1) resolvendo pra
+  // ALTURA ZERO e a lista de navegação sumindo inteira no desktop.
+  height: 100%;
+  // Padding por-elemento (marca / lista / footer) em vez de padding no
+  // container — modelo idêntico ao desenho.
+  padding: 0;
+  color: $color-primary-50;
+  font-weight: 500;
+  background-color: var(--acai-drawer-bg, #{$primary});
+
+  // O drawer é superfície NAVY nos dois temas (ver `--acai-drawer-bg` em
+  // `_themes.scss`), então o polegar escuro do tema claro sumiria aqui dentro.
+  // Retinge pra qualquer coisa que role no drawer — inclusive o painel de
+  // preferências embutido na folha. Fica aqui e não no filho porque a barra é
+  // estilizada no elemento que ROLA.
+  --acai-scroll-thumb: rgba(255, 255, 255, 0.24);
+  --acai-scroll-thumb-hover: rgba(255, 255, 255, 0.45);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+
+  // Separação por SOMBRA suave, não linha dura (o `bordered` do Quasar ficava
+  // forte). Vale claro/escuro. !important: no dark o Quasar reaplica a borda via
+  // `.body--dark .q-drawer--bordered` (mesma especificidade) e a linha voltava.
+  &.q-drawer--bordered {
+    border-right: none !important;
+  }
+  box-shadow: 3px 0 16px rgba(14, 42, 80, 0.12);
+
+  // Área de marca (slot #brand) — fixa no topo, fora do scroll (18/18/14, sem borda).
+  .drawer-brand {
+    flex-shrink: 0;
+    padding: 18px 18px 14px;
+  }
+
+  .drawer-scroll {
+    flex: 1;
+    overflow: hidden;
+
+    // Padding da lista (4px topo, 8 nos dois lados, 10 base — itens alinhados
+    // simetricamente).
+    .q-list {
+      padding: 4px 8px 10px;
+    }
+
+    .q-scrollarea__thumb {
+      width: 4px !important;
+      border-radius: $radius-full;
+      background: rgba(255, 255, 255, 0.3) !important;
+      opacity: 0;
+      transition: opacity 200ms ease;
+    }
+
+    &:hover .q-scrollarea__thumb {
+      opacity: 1;
+    }
+  }
+
+  // Badge animation dentro de expansion
+  .q-expansion-item__content .badge-lazy {
+    opacity: 0;
+    transform: translateY(-2px);
+    pointer-events: none;
+    transition:
+      opacity 180ms ease,
+      transform 180ms ease;
+    transition-delay: 0ms;
+  }
+
+  .q-expansion-item.q-expansion-item--expanded .q-expansion-item__content .badge-lazy {
+    opacity: 1;
+    transform: translateY(0);
+    pointer-events: auto;
+    transition-delay: 280ms;
+  }
+
+  // Legenda do item (`<q-item-label caption>`). O Quasar pinta com
+  // `rgba(0,0,0,.54)` — preto, pensado pra fundo claro. Sobre a navy do drawer
+  // ela some por completo. Aqui vira um cinza CLARO, recuado em relação ao
+  // rótulo mas ainda legível.
+  .q-item__label--caption {
+    color: rgba(255, 255, 255, 0.66);
+  }
+
+  // Item ativo
+  .item-ativo {
+    background: var(--acai-item-hover-bg, #{$color-primary-50}) !important;
+    color: var(--acai-item-hover-text, #{$primary}) !important;
+    font-weight: 600;
+
+    // Ativo e hover de item de topo viram pílula CLARA com texto navy — sem
+    // isto o caption ficaria claro sobre claro e o problema só inverteria.
+    .q-item__label--caption {
+      color: var(--acai-item-hover-text, #{$primary});
+      opacity: 0.75;
+    }
+  }
+
+  // Items de topo (folha) e cabeçalho de grupo = bloco navy (primary-900).
+  // Override do q-item/q-expansion pra bater com o desenho: sem min-height,
+  // padding 11×12, cantos 4px. Hover/ativo viram pílula clara.
+  .drawer-item,
+  .drawer-item-expansion,
+  .header-expansao {
+    // Flat: sem bloco navy — só espaço entre itens. Hover/ativo viram pílula.
+    background: transparent;
+    margin-top: 8px;
+    border-radius: $radius-sm;
+    min-height: unset;
+    padding: 11px 12px;
+
+    &:hover {
+      background: var(--acai-item-hover-bg, #{$color-primary-50}) !important;
+      color: var(--acai-item-hover-text, #{$primary}) !important;
+
+      .q-item__label--caption {
+        color: var(--acai-item-hover-text, #{$primary});
+        opacity: 0.75;
+      }
+    }
+  }
+
+  .drawer-item,
+  .header-expansao {
+    font-size: 0.875rem;
+  }
+
+  // Remove o recuo padrão do conteúdo da expansão — o recuo vem do
+  // margin-left dos filhos, pra bater exatamente com o desenho.
+  .q-expansion-item__content {
+    padding: 0;
+  }
+
+  // Itens filhos — só texto indentado (sem borda esquerda, sem bloco navy)
+  .content-item,
+  .content-sub-grupo {
+    margin-left: 24px;
+  }
+
+  .content-item {
+    background: transparent;
+    min-height: unset;
+    padding: 9px 12px;
+    // Borda transparente reserva o espaço (topo/base) — o hover só "acende"
+    // essas sem empurrar o layout. ESQUERDA e DIREITA já vêm acesas por padrão:
+    // trilhos verticais claros que sinalizam item filho mesmo sem hover/ativo.
+    border: 1.5px solid transparent;
+    border-left-color: rgba(255, 255, 255, 0.28);
+    border-right-color: rgba(255, 255, 255, 0.28);
+    border-radius: $radius-md;
+    transition:
+      border-color 160ms ease,
+      box-shadow 160ms ease;
+
+    // Hover do item filho (não-ativo): contorno claro arredondado + sombra bem
+    // suave, em vez da pílula sólida — essa fica reservada pro item ATIVO.
+    // Mantém o fundo navy e o texto claro (herdado do drawer).
+    &:not(.item-ativo):hover {
+      background: transparent !important;
+      color: inherit !important;
+      border-color: rgba(255, 255, 255, 0.55);
+      box-shadow: 0 2px 8px rgba(255, 255, 255, 0.12);
+    }
+  }
+
+  .sub-grupo {
+    margin-left: 40px;
+  }
+
+  // Grupo COM filho ativo → bloco navy no cabeçalho (indica o grupo da página
+  // atual). Grupo só expandido/colapsado continua flat.
+  .expansion-ativo {
+    background: var(--acai-drawer-group-active-bg, #{$color-primary-900});
+  }
+
+  // Layout do header com ícone + texto
+  .content-header-itens {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+
+    i {
+      margin-right: 12px;
+      font-size: 1.375rem;
+    }
+  }
+
+  // Chevron da expansão: direita quando fechado, gira 90° (baixo) ao abrir
+  // — igual ao desenho (o Quasar rotaciona 180° por padrão).
+  .q-expansion-item__toggle-icon {
+    transition: transform 0.28s ease;
+  }
+
+  .q-expansion-item__toggle-icon--rotated {
+    transform: rotate(90deg);
+  }
+
+  // No hover, o cabeçalho vira pílula clara — a seta (branca) sumiria.
+  // Força navy pra manter o contraste (vence o `text-white` do expand-icon).
+  .header-expansao:hover .q-expansion-item__toggle-icon {
+    color: var(--acai-item-hover-text, #{$primary}) !important;
+  }
+
+  // Badge de alerta — pílula âmbar pequena (igual ao desenho)
+  .q-badge {
+    font-size: 0.6875rem;
+    font-weight: 800;
+    min-width: 20px;
+    padding: 2px 7px;
+    border-radius: 999px;
+    text-align: center;
+  }
+
+  // Footer — fixo no fundo, fora do scroll. UMA linha só: o `border-top` daqui.
+  // (Havia também um `<q-separator dark>` dentro do slot default — as duas
+  // regras juntas desenhavam duas réguas quase coladas no rodapé.)
+  .footer {
+    padding: 8px 0;
+    flex-shrink: 0;
+    border-top: 1px solid rgba(255, 255, 255, 0.09);
+
+    // Assinatura à esquerda, versão à direita, UMA linha (antes eram duas
+    // empilhadas). Cor bem apagada de propósito: é informação de conferência,
+    // não de leitura — some no uso normal e está lá quando procurada.
+    &__versao {
+      display: flex;
+      align-items: baseline;
+      justify-content: space-between;
+      gap: 8px;
+      padding: 6px 18px;
+      font-size: 0.75rem;
+      color: rgba(255, 255, 255, 0.34);
+      white-space: nowrap;
+    }
+
+    &__versao-numero {
+      // Dígitos tabulares: a largura não dança quando a versão muda.
+      font-variant-numeric: tabular-nums;
+    }
+  }
+
+  // Com o handle ligado, a PRIMEIRA LINHA da marca cede a quina direita pra ele
+  // — senão ele cai por cima do que o consumidor pôs no slot #brand.
+  //
+  // Só na primeira linha, e não no `.drawer-brand` inteiro: o handle fica na
+  // altura da logo, mas o slot pode ter mais coisa embaixo (um campo de busca,
+  // por exemplo) que ficaria estranhamente encurtada à direita sem motivo.
+  // 40px = os 32px do handle + ~8 de respiro. Reservar mais que isso abre um
+  // vão morto entre o último controle do consumidor e o handle.
+  &--collapsible:not(#{&}--mini) .drawer-brand > :first-child {
+    padding-right: 40px;
+  }
+
+  // Mesma cessão de quina pro botão de fechar, que pousa na mesma quina e tem a
+  // mesma medida do handle. Vale independente de `collapsible` — recolher é
+  // opcional, fechar a gaveta não.
+  //
+  // O `position: relative` é a âncora do botão, que agora é filho absoluto
+  // daqui (esta classe cai no `.q-drawer__content`).
+  &--mobile {
+    position: relative;
+
+    .drawer-brand > :first-child {
+      padding-right: 40px;
+    }
+  }
+
+  // ---------------------------------------------------------------
+  // Trilho recolhido (mini)
+  // ---------------------------------------------------------------
+  &--mini {
+    // Padding VERTICAL idêntico ao estado expandido (18/14) de propósito: é ele
+    // que define a âncora do handle, e mudá-lo faria o botão pular na vertical
+    // durante o deslize horizontal. Só o padding lateral encolhe.
+    // EMPILHA no trilho: em 72px não cabem dois controles lado a lado, então o
+    // que o consumidor puser no slot vira uma coluna centralizada.
+    .drawer-brand {
+      padding: 18px 8px 14px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 10px;
+    }
+
+    .drawer-scroll .q-list {
+      padding: 6px 8px 10px;
+    }
+
+    // No trilho sobra só o número — centralizado, sem o padding lateral de 18px
+    // que empurraria o texto pra fora dos 72px.
+    .footer__versao {
+      justify-content: center;
+      padding: 6px 4px;
+    }
+  }
+
+  .drawer-mini-item {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 12px 0;
+    margin-top: 6px;
+    border-radius: $radius-sm;
+    min-height: unset;
+
+    // O q-item normalmente distribui seções; aqui o ícone é o conteúdo inteiro.
+    i {
+      font-size: 1.375rem;
+    }
+  }
+}
+
+// ---------------------------------------------------------------
+// Handle de recolher/expandir — irmão do drawer (ver comentário no .vue)
+// ---------------------------------------------------------------
+// O handle (recolher, desktop) e o fechar (gaveta, celular) são o MESMO objeto
+// visual em dois papéis: pousam na mesma âncora — a primeira linha da marca — e
+// nunca coexistem, porque um só existe com `behavior: desktop` e o outro com
+// `mobile`. Compartilhar a casca é o que faz a troca parecer o mesmo botão
+// mudando de função, e não dois controles diferentes disputando o canto.
+.acai-drawer-handle,
+.acai-drawer-fechar {
+  position: fixed;
+  display: grid;
+  place-items: center;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  border-radius: $radius-full;
+  border: 1px solid rgba(255, 255, 255, 0.16);
+  background: var(--acai-drawer-bg, #{$primary});
+  color: #fff;
+  cursor: pointer;
+  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.28);
+
+  &:hover {
+    background: var(--acai-item-hover-bg, #{$color-primary-50});
+    color: var(--acai-item-hover-text, #{$primary});
+    border-color: transparent;
+  }
+
+  &:focus-visible {
+    // eMAG 4.3: foco visível sobre fundo escuro E claro.
+    outline: 2px solid var(--acai-item-hover-bg, #{$color-primary-50});
+    outline-offset: 2px;
+  }
+}
+
+.acai-drawer-fechar {
+  // Dentro da gaveta, encostado na quina superior direita. O `top` vem por
+  // style inline (medido: a altura da primeira linha da marca é conteúdo do
+  // consumidor). O `right` é fixo em 18px — o MESMO padding lateral do
+  // `.drawer-brand`, pra a borda direita do botão bater com a do conteúdo
+  // (campo de busca, itens da lista). Com os 14px que eu tinha posto antes ele
+  // sobrava 4px pra fora dessa coluna.
+  position: absolute;
+  right: 18px;
+
+  // Sem `z-index`: fica no contexto de empilhamento da própria gaveta. Isso é
+  // o que impede o botão de vazar por cima de OUTROS overlays — quando ele era
+  // irmão `position: fixed`, precisava de 3001 pra vencer o drawer sobreposto
+  // (`$z-fixed-drawer: 3000` do Quasar) e com isso passava por cima do
+  // <acai-ui-preferences>, que é um QDrawer à direita na mesma camada: abrir as
+  // preferências deixava dois "X" empilhados na tela.
+  //
+  // 3 acima do conteúdo da marca, que é irmão dele aqui dentro.
+  z-index: 3;
+
+  // Alvo de toque de 44px (WCAG 2.5.5 / eMAG) SEM inchar o desenho: a caixa
+  // clicável cresce numa camada invisível e o botão continua com os mesmos 32px
+  // do handle. A recomendação mede o ALVO, não o desenho — desenhar 44px de
+  // verdade deixava o fechar desproporcional ao lado dos ícones da marca.
+  //
+  // -7 e não -6: `inset` de um absoluto parte da caixa de PADDING do pai, que
+  // aqui é 30px (32 menos a borda de 1px de cada lado). 30 + 7 + 7 = 44. Com
+  // -6 dava 42, e o alvo ficava 2px curto — medido no navegador.
+  //
+  // `position: absolute` tira o pseudo do fluxo, então ele NÃO vira item do
+  // grid e não desalinha o ícone centralizado.
+  &::before {
+    content: '';
+    position: absolute;
+    inset: -7px;
+    border-radius: inherit;
+  }
+}
+
+.acai-drawer-handle {
+  // Acima do trilho fixo do desktop (`$z-side: 1000`).
+  z-index: 1001;
+  // Só `left` e as propriedades de composição transicionam. Animar `left` é o
+  // que faz o botão DESLIZAR de dentro do drawer pra fora, em vez de saltar.
+  transition:
+    left 260ms cubic-bezier(0.4, 0, 0.2, 1),
+    // `top` normalmente não muda (a âncora é a mesma nos dois estados); entra
+    // aqui só pra suavizar o caso de um consumidor com marca de altura variável.
+    top 260ms cubic-bezier(0.4, 0, 0.2, 1),
+    background 160ms ease,
+    color 160ms ease,
+    border-color 160ms ease,
+    transform 160ms ease;
+
+  // Fora do drawer: ganha presença de "puxador" solto sobre o conteúdo.
+  &--solto {
+    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.34);
+
+    &:hover {
+      transform: scale(1.08);
+    }
+  }
+}
+
+// A preferência "reduzir animações" da lib já zera transições globalmente via
+// `html[data-acai-reduzir-anim] *`. Isto aqui cobre o outro caso: quem pediu
+// menos movimento no SISTEMA e nunca abriu o painel de preferências.
+@media (prefers-reduced-motion: reduce) {
+  .acai-drawer-handle {
+    transition: none;
+  }
+}
+
+// Tema escuro: a borda branca 0.28 fica no ASIDE `.q-drawer` (o `.drawer-container`
+// do componente cai na RAIZ/wrapper do QDrawer, NÃO no aside — por isso mirar nele
+// nunca alcançava a borda; era essa a "linha branca fixa"). Ataca o aside direto:
+// sem borda, separação só por profundidade escura difusa (blur real, zero branco).
+.body--dark .q-drawer {
+  border: none !important;
+  box-shadow: 3px 0 18px rgba(0, 0, 0, 0.5);
+}
+
+// Trilhos dos itens-filho: o branco 0.28 fica duro sobre o navy escuro. Suaviza
+// pra um guia bem sutil (light fica intacto — fora do body--dark).
+.body--dark .drawer-container .content-item {
+  border-left-color: rgba(255, 255, 255, 0.1) !important;
+  border-right-color: rgba(255, 255, 255, 0.1) !important;
+}