Gava/agenciapsilmno
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

melissa/paciente-docs: drawer mobile herda tema (win11-root no portal)

Browse Source 
Drawer teleportado pro body perdia as vars --m-* (definidas em
.win11-root no MelissaLayout), caia nos fallbacks hardcoded (#1a1d2e)
e ficava mais escuro que o resto do tema.

Fix:
- Wrapper .mpd-drawer-portal recebe class win11-root pra trazer as
  vars --m-* pro escopo teleportado.
- Vars locais --mpd-bg/--mpd-border/--mpd-text com cascata:
  --m-* (win11-root) -> --p-* (PrimeVue global) -> hardcoded.
  Respeita dark/light automaticamente.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Leonardo
2026-05-21 21:54:37 -03:00
parent 4e1ebeba13
commit 6c39c58dc8
1 changed files with 34 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/layout/melissa/MelissaPatientDocuments.vue
+34 -22
View File
@@ -181,24 +181,27 @@ onBeforeUnmount(() => {
<template>
<!-- Mobile drawer (tipos) — teleportado pro body pra escapar de
stacking contexts pais (transform/filter no MelissaPaciente
travavam o fixed) -->
travavam o fixed). win11-root no wrapper pra herdar os
tokens --m-* definidos nesse escopo. -->
<Teleport to="body">
<Transition name="mpd-drawer-fade">
<div
v-show="isMobile && drawerOpen"
class="mpd-mobile-drawer"
:class="{ 'is-open': drawerOpen }"
>
<div id="mpd-mobile-drawer-target" class="mpd-mobile-drawer__scroll" />
</div>
</Transition>
<Transition name="mpd-drawer-fade">
<div
v-show="isMobile && drawerOpen"
class="mpd-mobile-drawer__backdrop"
@click="fecharDrawer"
/>
</Transition>
<div class="win11-root mpd-drawer-portal">
<Transition name="mpd-drawer-fade">
<div
v-show="isMobile && drawerOpen"
class="mpd-mobile-drawer"
:class="{ 'is-open': drawerOpen }"
>
<div id="mpd-mobile-drawer-target" class="mpd-mobile-drawer__scroll" />
</div>
</Transition>
<Transition name="mpd-drawer-fade">
<div
v-show="isMobile && drawerOpen"
class="mpd-mobile-drawer__backdrop"
@click="fecharDrawer"
/>
</Transition>
</div>
</Teleport>
<section class="mpd-page">
@@ -670,8 +673,17 @@ onBeforeUnmount(() => {
<!-- Styles do drawer mobile NÃO-scoped — o <Teleport to="body"> tira o
elemento da árvore do componente, então perde os atributos data-v
do scoped. Classes globais .mpd-mobile-drawer* garantem que aplique. -->
do scoped. O wrapper .mpd-drawer-portal carrega .win11-root pra
herdar os tokens --m-* (definidos em MelissaLayout). -->
<style>
/* Wrapper inerte — não cria stacking, só serve como host das vars */
.mpd-drawer-portal {
/* Garante que mesmo sem .win11-root (improvável) caia em fallbacks
de PrimeVue tokens, que existem globalmente e respeitam dark/light. */
--mpd-bg: var(--m-bg-medium, var(--p-content-background, #ffffff));
--mpd-border: var(--m-border, var(--p-content-border-color, rgba(0,0,0,0.1)));
--mpd-text: var(--m-text, var(--p-text-color, #1a1a1a));
}
.mpd-mobile-drawer {
position: fixed;
top: 0;
@@ -680,13 +692,13 @@ onBeforeUnmount(() => {
height: 100dvh;
width: min(320px, 86vw);
z-index: 80;
background: var(--m-bg-medium, #1a1d2e);
background: var(--mpd-bg);
backdrop-filter: blur(28px) saturate(160%);
-webkit-backdrop-filter: blur(28px) saturate(160%);
border-right: 1px solid var(--m-border, rgba(255,255,255,0.1));
border-right: 1px solid var(--mpd-border);
transform: translateX(-100%);
transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
color: var(--m-text, #fff);
color: var(--mpd-text);
display: flex;
flex-direction: column;
font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
@@ -709,7 +721,7 @@ onBeforeUnmount(() => {
.mpd-mobile-drawer__scroll .mpd-side {
width: 100%;
height: 100%;
border: 1px solid var(--m-border, rgba(255,255,255,0.1));
border: 1px solid var(--mpd-border);
}
.mpd-mobile-drawer__backdrop {
position: fixed;