mirror of
https://github.com/fsolla/teqo.git
synced 2026-11-15 10:43:07 +00:00
702 lines
29 KiB
HTML
702 lines
29 KiB
HTML
<!doctype html>
|
||
<html lang="pt-BR" data-theme="campaign">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
|
||
<title>Design — C221 · Limpar do omnibox no mobile</title>
|
||
<style type="text/tailwindcss">
|
||
@theme inline {
|
||
--font-sans: Inter, ui-sans-serif, system-ui, sans-serif;
|
||
--color-background: var(--background);
|
||
--color-foreground: var(--foreground);
|
||
--color-card: var(--card);
|
||
--color-card-foreground: var(--card-foreground);
|
||
--color-primary: var(--primary);
|
||
--color-primary-foreground: var(--primary-foreground);
|
||
--color-secondary: var(--secondary);
|
||
--color-secondary-foreground: var(--secondary-foreground);
|
||
--color-muted: var(--muted);
|
||
--color-muted-foreground: var(--muted-foreground);
|
||
--color-border: var(--border);
|
||
--color-input: var(--input);
|
||
--color-ring: var(--ring);
|
||
--color-sidebar: var(--sidebar);
|
||
--color-sidebar-border: var(--sidebar-border);
|
||
--radius-md: 0.375rem;
|
||
--radius-lg: 0.5rem;
|
||
--radius-xl: 0.75rem;
|
||
}
|
||
|
||
[data-theme='campaign'] {
|
||
--background: #ffffff;
|
||
--foreground: #1c1917;
|
||
--card: #ffffff;
|
||
--card-foreground: #1c1917;
|
||
--primary: #c51414;
|
||
--primary-foreground: #ffffff;
|
||
--secondary: #f5f5f4;
|
||
--secondary-foreground: #292524;
|
||
--muted: #f4f4f5;
|
||
--muted-foreground: #6b7280;
|
||
--border: rgb(28 25 23 / 12%);
|
||
--input: rgb(28 25 23 / 16%);
|
||
--ring: #c51414;
|
||
--sidebar: #fafaf9;
|
||
--sidebar-border: rgb(28 25 23 / 12%);
|
||
}
|
||
|
||
* {
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
body {
|
||
margin: 0;
|
||
font-family: Inter, ui-sans-serif, system-ui, sans-serif;
|
||
}
|
||
|
||
button,
|
||
input {
|
||
font: inherit;
|
||
}
|
||
|
||
.grid-bg {
|
||
background-color: #efeeec;
|
||
background-image: radial-gradient(rgb(28 25 23 / 8%) 0.7px, transparent 0.7px);
|
||
background-size: 16px 16px;
|
||
}
|
||
|
||
.frame {
|
||
box-shadow: 0 18px 54px rgb(28 25 23 / 11%);
|
||
}
|
||
|
||
.icon {
|
||
width: 1rem;
|
||
height: 1rem;
|
||
stroke-width: 2;
|
||
}
|
||
|
||
.icon-sm {
|
||
width: 0.875rem;
|
||
height: 0.875rem;
|
||
stroke-width: 2;
|
||
}
|
||
|
||
.mobile-frame {
|
||
width: 390px;
|
||
overflow: hidden;
|
||
border: 1px solid var(--border);
|
||
border-radius: 28px;
|
||
background: var(--background);
|
||
}
|
||
|
||
.mobile-topbar {
|
||
height: 56px;
|
||
background: var(--primary);
|
||
color: var(--primary-foreground);
|
||
}
|
||
|
||
.mobile-sticky {
|
||
border-bottom: 1px solid var(--border);
|
||
background: var(--background);
|
||
padding: 4px 16px 0;
|
||
}
|
||
|
||
/* C221 craft target: one dense line below md. The 44px end reserve is
|
||
36px for the touch target plus 8px of content breathing room. */
|
||
.mobile-field {
|
||
position: relative;
|
||
display: flex;
|
||
min-height: 40px;
|
||
width: 100%;
|
||
align-items: center;
|
||
gap: 6px;
|
||
padding: 0 44px 0 8px;
|
||
border: 0;
|
||
border-radius: 8px;
|
||
background: transparent;
|
||
}
|
||
|
||
.mobile-chip {
|
||
display: inline-flex;
|
||
max-width: 168px;
|
||
min-width: 0;
|
||
flex: 0 1 auto;
|
||
align-items: center;
|
||
gap: 4px;
|
||
border-radius: 6px;
|
||
background: var(--muted);
|
||
padding: 4px 8px;
|
||
color: var(--foreground);
|
||
font-size: 12px;
|
||
font-weight: 600;
|
||
line-height: 20px;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.mobile-chip-label {
|
||
min-width: 0;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.mobile-input {
|
||
min-height: 40px;
|
||
min-width: 128px;
|
||
flex: 1 1 128px;
|
||
border: 0;
|
||
background: transparent;
|
||
color: var(--foreground);
|
||
font-size: 16px;
|
||
outline: none;
|
||
}
|
||
|
||
.mobile-input::placeholder {
|
||
color: var(--muted-foreground);
|
||
}
|
||
|
||
.clear-mobile {
|
||
position: absolute;
|
||
top: 50%;
|
||
right: 0;
|
||
display: inline-flex;
|
||
width: 36px;
|
||
height: 36px;
|
||
transform: translateY(-50%);
|
||
align-items: center;
|
||
justify-content: center;
|
||
border: 0;
|
||
border-radius: 9999px;
|
||
background: transparent;
|
||
}
|
||
|
||
.clear-mobile-core {
|
||
display: flex;
|
||
width: 24px;
|
||
height: 24px;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-radius: 9999px;
|
||
background: var(--muted);
|
||
color: var(--muted-foreground);
|
||
}
|
||
|
||
.clear-mobile.is-invisible {
|
||
visibility: hidden;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.mode-control {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||
border-radius: 8px;
|
||
background: var(--muted);
|
||
padding: 4px;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.mode-active {
|
||
border: 1px solid var(--input);
|
||
border-radius: 6px;
|
||
background: var(--background);
|
||
padding: 10px 8px;
|
||
font-weight: 600;
|
||
box-shadow: 0 1px 2px rgb(28 25 23 / 8%);
|
||
}
|
||
|
||
.mode-idle {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 6px;
|
||
padding: 10px 8px;
|
||
color: var(--muted-foreground);
|
||
font-weight: 500;
|
||
}
|
||
|
||
.spec {
|
||
border-left: 3px solid rgb(197 20 20 / 24%);
|
||
padding-left: 12px;
|
||
}
|
||
|
||
@media (prefers-reduced-motion: reduce) {
|
||
*,
|
||
*::before,
|
||
*::after {
|
||
animation: none !important;
|
||
transition: none !important;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body class="grid-bg min-h-screen bg-stone-100 text-foreground antialiased">
|
||
<!-- Lucide-compatible symbols used by the real surface. -->
|
||
<svg class="absolute size-0 overflow-hidden" aria-hidden="true">
|
||
<symbol id="i-x" viewBox="0 0 24 24" fill="none" stroke="currentColor">
|
||
<path d="M18 6 6 18M6 6l12 12" />
|
||
</symbol>
|
||
<symbol id="i-sparkles" viewBox="0 0 24 24" fill="none" stroke="currentColor">
|
||
<path d="m12 3-1.7 4.6L6 9.3l4.3 1.7 1.7 4.7 1.7-4.7L18 9.3l-4.3-1.7L12 3Z" />
|
||
<path d="m19 14-.9 2.1L16 17l2.1.9L19 20l.9-2.1L22 17l-2.1-.9L19 14Z" />
|
||
</symbol>
|
||
<symbol id="i-bell" viewBox="0 0 24 24" fill="none" stroke="currentColor">
|
||
<path d="M10.3 21h3.4M18 8a6 6 0 0 0-12 0c0 7-3 7-3 9h18c0-2-3-2-3-9" />
|
||
</symbol>
|
||
<symbol id="i-filter" viewBox="0 0 24 24" fill="none" stroke="currentColor">
|
||
<path d="M4 5h16l-6 7v5l-4 2v-7z" />
|
||
</symbol>
|
||
<symbol id="i-chevron-down" viewBox="0 0 24 24" fill="none" stroke="currentColor">
|
||
<path d="m6 9 6 6 6-6" />
|
||
</symbol>
|
||
</svg>
|
||
|
||
<main class="mx-auto flex max-w-[1480px] flex-col gap-14 px-4 py-10 md:px-8">
|
||
<header class="max-w-3xl">
|
||
<div class="flex flex-wrap gap-2">
|
||
<span class="rounded-full bg-primary px-2.5 py-1 text-xs font-semibold text-white">
|
||
C221 · gate hi-fi
|
||
</span>
|
||
<span class="rounded-full border border-border bg-white px-2.5 py-1 text-xs font-medium">
|
||
Campanha · omnibox compartilhado
|
||
</span>
|
||
</div>
|
||
<h1 class="mt-4 text-3xl font-semibold tracking-tight">O “Limpar” fica preso ao campo</h1>
|
||
<p class="mt-2 text-sm leading-6 text-muted-foreground">
|
||
Referência do encaixe abaixo de <strong>md</strong>: o chip pode truncar, mas o alvo de
|
||
limpar não desce sozinho nem cria uma faixa vazia antes do seletor de busca.
|
||
</p>
|
||
</header>
|
||
|
||
<section aria-labelledby="mobile-scenes-title">
|
||
<p class="text-xs font-semibold text-primary">CENAS 01–03 · VIEWPORT 390</p>
|
||
<h2 id="mobile-scenes-title" class="mt-1 text-xl font-semibold">
|
||
Barra aderida sob o top bar · três estados críticos
|
||
</h2>
|
||
<p class="mt-2 max-w-3xl text-sm leading-6 text-muted-foreground">
|
||
A linha sob o seletor é a separação do formulário sticky. O campo continua borderless; no
|
||
toque, o caret é o indicador de foco. As três cenas preservam a altura da barra.
|
||
</p>
|
||
|
||
<div class="mt-5 grid items-start gap-8 xl:grid-cols-3">
|
||
<!-- Scene 01: long chip -->
|
||
<article>
|
||
<div class="mb-3 flex w-[390px] items-start justify-between gap-3">
|
||
<div>
|
||
<p class="text-sm font-semibold">01 · Chip longo</p>
|
||
<p class="text-xs text-muted-foreground">alvo principal do fix</p>
|
||
</div>
|
||
<span
|
||
class="rounded-full bg-white px-2 py-1 text-[11px] font-semibold ring-1 ring-border"
|
||
>
|
||
46px
|
||
</span>
|
||
</div>
|
||
<div class="mobile-frame frame min-h-[408px]">
|
||
<header class="mobile-topbar flex items-center justify-between px-4">
|
||
<div class="min-w-0">
|
||
<p class="truncate text-sm font-semibold">Acervo de falas</p>
|
||
<p class="truncate text-xs text-white/85">
|
||
Busque nas falas da Câmara ou nas gravações da equipe
|
||
</p>
|
||
</div>
|
||
<div class="relative ml-3 grid size-9 shrink-0 place-items-center rounded-full">
|
||
<svg class="icon"><use href="#i-bell" /></svg>
|
||
<span
|
||
class="absolute right-0 top-0 rounded-full bg-white px-1 text-[9px] font-bold text-primary"
|
||
>3</span
|
||
>
|
||
</div>
|
||
</header>
|
||
<div class="mobile-sticky">
|
||
<div class="mobile-field" aria-label="Buscar e filtrar falas">
|
||
<span class="mobile-chip" title="Busca: saúde da mulher e atenção materna">
|
||
<span class="mobile-chip-label">Busca: saúde da mulher e atenção materna</span>
|
||
<span
|
||
class="grid size-5 shrink-0 place-items-center rounded-sm text-muted-foreground"
|
||
aria-hidden="true"
|
||
>
|
||
<svg class="size-3.5"><use href="#i-x" /></svg>
|
||
</span>
|
||
</span>
|
||
<span class="mobile-input" aria-hidden="true"></span>
|
||
<button class="clear-mobile" type="button" aria-label="Limpar">
|
||
<span class="clear-mobile-core"
|
||
><svg class="icon-sm" aria-hidden="true"><use href="#i-x" /></svg
|
||
></span>
|
||
</button>
|
||
</div>
|
||
<div class="mode-control mt-1.5 mb-2">
|
||
<div class="mode-active text-center">Termo exato</div>
|
||
<div class="mode-idle">
|
||
<svg class="icon-sm"><use href="#i-sparkles" /></svg>Por tema
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="px-4 pt-3">
|
||
<div class="flex gap-2 overflow-hidden" aria-hidden="true">
|
||
<span
|
||
class="inline-flex h-9 shrink-0 items-center gap-2 rounded-full border border-border px-3 text-xs text-muted-foreground"
|
||
><svg class="size-3.5"><use href="#i-filter" /></svg>Ano<svg class="size-3">
|
||
<use href="#i-chevron-down" /></svg
|
||
></span>
|
||
<span
|
||
class="inline-flex h-9 shrink-0 items-center gap-2 rounded-full border border-border px-3 text-xs text-muted-foreground"
|
||
><svg class="size-3.5"><use href="#i-filter" /></svg>Tema<svg class="size-3">
|
||
<use href="#i-chevron-down" /></svg
|
||
></span>
|
||
<span
|
||
class="inline-flex h-9 shrink-0 items-center gap-2 rounded-full border border-border px-3 text-xs text-muted-foreground"
|
||
><svg class="size-3.5"><use href="#i-filter" /></svg>Alcance<svg class="size-3">
|
||
<use href="#i-chevron-down" /></svg
|
||
></span>
|
||
</div>
|
||
<div class="mt-5 rounded-xl border border-dashed border-border p-5 text-center">
|
||
<p class="text-sm font-semibold">Resultados da busca</p>
|
||
<p class="mt-1 text-xs text-muted-foreground">
|
||
A lista começa sem uma faixa vazia intermediária.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="spec mt-4 w-[390px] text-xs leading-5 text-muted-foreground">
|
||
<strong class="text-foreground">Decisão:</strong> chip com cap de 168px e ellipsis. O
|
||
filtro continua identificável; o input conserva seu mínimo e o X ocupa a mesma faixa.
|
||
</div>
|
||
</article>
|
||
|
||
<!-- Scene 02: short chip and typed query -->
|
||
<article>
|
||
<div class="mb-3 flex w-[390px] items-start justify-between gap-3">
|
||
<div>
|
||
<p class="text-sm font-semibold">02 · Chip curto + digitado</p>
|
||
<p class="text-xs text-muted-foreground">folga não rouba o input</p>
|
||
</div>
|
||
<span
|
||
class="rounded-full bg-white px-2 py-1 text-[11px] font-semibold ring-1 ring-border"
|
||
>
|
||
46px
|
||
</span>
|
||
</div>
|
||
<div class="mobile-frame frame min-h-[408px]">
|
||
<header class="mobile-topbar flex items-center justify-between px-4">
|
||
<div class="min-w-0">
|
||
<p class="truncate text-sm font-semibold">Acervo de falas</p>
|
||
<p class="truncate text-xs text-white/85">
|
||
Busque nas falas da Câmara ou nas gravações da equipe
|
||
</p>
|
||
</div>
|
||
<div class="relative ml-3 grid size-9 shrink-0 place-items-center rounded-full">
|
||
<svg class="icon"><use href="#i-bell" /></svg>
|
||
<span
|
||
class="absolute right-0 top-0 rounded-full bg-white px-1 text-[9px] font-bold text-primary"
|
||
>3</span
|
||
>
|
||
</div>
|
||
</header>
|
||
<div class="mobile-sticky">
|
||
<div class="mobile-field" aria-label="Buscar e filtrar falas">
|
||
<span class="mobile-chip">
|
||
<span class="mobile-chip-label">Busca: saúde</span>
|
||
<span
|
||
class="grid size-5 shrink-0 place-items-center rounded-sm text-muted-foreground"
|
||
aria-hidden="true"
|
||
>
|
||
<svg class="size-3.5"><use href="#i-x" /></svg>
|
||
</span>
|
||
</span>
|
||
<span class="mobile-input flex items-center truncate">mulher</span>
|
||
<button class="clear-mobile" type="button" aria-label="Limpar">
|
||
<span class="clear-mobile-core"
|
||
><svg class="icon-sm" aria-hidden="true"><use href="#i-x" /></svg
|
||
></span>
|
||
</button>
|
||
</div>
|
||
<div class="mode-control mt-1.5 mb-2">
|
||
<div class="mode-active text-center">Termo exato</div>
|
||
<div class="mode-idle">
|
||
<svg class="icon-sm"><use href="#i-sparkles" /></svg>Por tema
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="px-4 pt-3">
|
||
<div class="flex gap-2 overflow-hidden" aria-hidden="true">
|
||
<span
|
||
class="inline-flex h-9 shrink-0 items-center gap-2 rounded-full border border-border px-3 text-xs text-muted-foreground"
|
||
><svg class="size-3.5"><use href="#i-filter" /></svg>Ano<svg class="size-3">
|
||
<use href="#i-chevron-down" /></svg
|
||
></span>
|
||
<span
|
||
class="inline-flex h-9 shrink-0 items-center gap-2 rounded-full border border-border px-3 text-xs text-muted-foreground"
|
||
><svg class="size-3.5"><use href="#i-filter" /></svg>Tema<svg class="size-3">
|
||
<use href="#i-chevron-down" /></svg
|
||
></span>
|
||
<span
|
||
class="inline-flex h-9 shrink-0 items-center gap-2 rounded-full border border-border px-3 text-xs text-muted-foreground"
|
||
><svg class="size-3.5"><use href="#i-filter" /></svg>Alcance<svg class="size-3">
|
||
<use href="#i-chevron-down" /></svg
|
||
></span>
|
||
</div>
|
||
<div class="mt-5 rounded-xl border border-border p-4">
|
||
<div class="h-3 w-2/3 rounded bg-muted"></div>
|
||
<div class="mt-3 h-2.5 w-full rounded bg-muted"></div>
|
||
<div class="mt-2 h-2.5 w-4/5 rounded bg-muted"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="spec mt-4 w-[390px] text-xs leading-5 text-muted-foreground">
|
||
<strong class="text-foreground">Decisão:</strong> a reserva final é fixa, não um
|
||
espaçador no fluxo. Depois do chip curto ainda há uma área legível para “mulher”.
|
||
</div>
|
||
</article>
|
||
|
||
<!-- Scene 03: empty -->
|
||
<article>
|
||
<div class="mb-3 flex w-[390px] items-start justify-between gap-3">
|
||
<div>
|
||
<p class="text-sm font-semibold">03 · Vazio</p>
|
||
<p class="text-xs text-muted-foreground">geometria estável</p>
|
||
</div>
|
||
<span
|
||
class="rounded-full bg-white px-2 py-1 text-[11px] font-semibold ring-1 ring-border"
|
||
>
|
||
46px
|
||
</span>
|
||
</div>
|
||
<div class="mobile-frame frame min-h-[408px]">
|
||
<header class="mobile-topbar flex items-center justify-between px-4">
|
||
<div class="min-w-0">
|
||
<p class="truncate text-sm font-semibold">Acervo de falas</p>
|
||
<p class="truncate text-xs text-white/85">
|
||
Busque nas falas da Câmara ou nas gravações da equipe
|
||
</p>
|
||
</div>
|
||
<div class="relative ml-3 grid size-9 shrink-0 place-items-center rounded-full">
|
||
<svg class="icon"><use href="#i-bell" /></svg>
|
||
<span
|
||
class="absolute right-0 top-0 rounded-full bg-white px-1 text-[9px] font-bold text-primary"
|
||
>3</span
|
||
>
|
||
</div>
|
||
</header>
|
||
<div class="mobile-sticky">
|
||
<div class="mobile-field" aria-label="Buscar e filtrar falas">
|
||
<input
|
||
class="mobile-input"
|
||
aria-label="Buscar e filtrar falas"
|
||
placeholder="Busque por assunto, tema, município ou palavra-chave…"
|
||
readonly
|
||
/>
|
||
<button
|
||
class="clear-mobile is-invisible"
|
||
type="button"
|
||
aria-label="Limpar"
|
||
tabindex="-1"
|
||
>
|
||
<span class="clear-mobile-core"
|
||
><svg class="icon-sm" aria-hidden="true"><use href="#i-x" /></svg
|
||
></span>
|
||
</button>
|
||
</div>
|
||
<div class="mode-control mt-1.5 mb-2">
|
||
<div class="mode-active text-center">Termo exato</div>
|
||
<div class="mode-idle">
|
||
<svg class="icon-sm"><use href="#i-sparkles" /></svg>Por tema
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="px-4 pt-3">
|
||
<div class="flex gap-2 overflow-hidden" aria-hidden="true">
|
||
<span
|
||
class="inline-flex h-9 shrink-0 items-center gap-2 rounded-full border border-border px-3 text-xs text-muted-foreground"
|
||
><svg class="size-3.5"><use href="#i-filter" /></svg>Ano<svg class="size-3">
|
||
<use href="#i-chevron-down" /></svg
|
||
></span>
|
||
<span
|
||
class="inline-flex h-9 shrink-0 items-center gap-2 rounded-full border border-border px-3 text-xs text-muted-foreground"
|
||
><svg class="size-3.5"><use href="#i-filter" /></svg>Tema<svg class="size-3">
|
||
<use href="#i-chevron-down" /></svg
|
||
></span>
|
||
<span
|
||
class="inline-flex h-9 shrink-0 items-center gap-2 rounded-full border border-border px-3 text-xs text-muted-foreground"
|
||
><svg class="size-3.5"><use href="#i-filter" /></svg>Alcance<svg class="size-3">
|
||
<use href="#i-chevron-down" /></svg
|
||
></span>
|
||
</div>
|
||
<div class="mt-5 rounded-xl border border-border p-4">
|
||
<div class="h-3 w-1/2 rounded bg-muted"></div>
|
||
<div class="mt-3 h-2.5 w-full rounded bg-muted"></div>
|
||
<div class="mt-2 h-2.5 w-3/4 rounded bg-muted"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="spec mt-4 w-[390px] text-xs leading-5 text-muted-foreground">
|
||
<strong class="text-foreground">Decisão:</strong> o X continua no mesmo lugar, mas
|
||
<code>invisible</code>, sem presença visual nem foco. A barra não salta ao digitar.
|
||
</div>
|
||
</article>
|
||
</div>
|
||
</section>
|
||
|
||
<section aria-labelledby="desktop-title">
|
||
<p class="text-xs font-semibold text-primary">CENA 04 · VIEWPORT 1280</p>
|
||
<h2 id="desktop-title" class="mt-1 text-xl font-semibold">Desktop preservado</h2>
|
||
<p class="mt-2 max-w-3xl text-sm leading-6 text-muted-foreground">
|
||
O ajuste móvel não atravessa <strong>md</strong>: label, campo emoldurado, ring de foco e
|
||
“Limpar” textual continuam no vocabulário atual.
|
||
</p>
|
||
|
||
<div class="frame mt-5 w-[1280px] overflow-hidden rounded-xl border border-border bg-white">
|
||
<div class="flex min-h-[520px]">
|
||
<aside
|
||
class="flex w-60 shrink-0 flex-col border-r border-sidebar-border bg-sidebar p-3"
|
||
>
|
||
<div class="flex h-12 items-center gap-2 px-2">
|
||
<div
|
||
class="grid size-8 place-items-center rounded-lg bg-primary font-bold text-white"
|
||
>
|
||
S
|
||
</div>
|
||
<div>
|
||
<p class="text-sm font-semibold">Solla</p>
|
||
<p class="text-xs text-muted-foreground">Campanha</p>
|
||
</div>
|
||
</div>
|
||
<nav class="mt-4 space-y-1 text-sm">
|
||
<div class="rounded-md px-3 py-2 text-muted-foreground">Início</div>
|
||
<div class="rounded-md px-3 py-2 text-muted-foreground">Municípios</div>
|
||
<div class="rounded-lg bg-secondary p-1">
|
||
<div class="px-2 py-2 font-medium">Comunicação</div>
|
||
<div class="ml-4 border-l border-border pl-3">
|
||
<div
|
||
class="rounded-md bg-white px-2 py-2 font-medium text-primary ring-1 ring-border"
|
||
>
|
||
Acervo de falas
|
||
</div>
|
||
<div class="px-2 py-2 text-muted-foreground">Biblioteca de cortes</div>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
</aside>
|
||
<div class="min-w-0 flex-1">
|
||
<header class="flex h-16 items-center border-b border-border px-8">
|
||
<div>
|
||
<p class="font-semibold">Acervo de falas</p>
|
||
<p class="text-xs text-muted-foreground">Comunicação</p>
|
||
</div>
|
||
</header>
|
||
<div class="mx-auto max-w-[940px] px-8 py-7">
|
||
<div>
|
||
<h3 class="text-xl font-semibold">Falas da Câmara</h3>
|
||
<p class="mt-1 text-sm text-muted-foreground">
|
||
Busque nas falas, filtre o acervo e abra o trecho certo.
|
||
</p>
|
||
</div>
|
||
<div class="mt-6 flex items-start gap-3">
|
||
<div class="min-w-0 flex-1">
|
||
<label class="mb-1.5 block text-sm font-medium">Buscar e filtrar falas</label>
|
||
<div
|
||
class="flex min-h-11 flex-wrap items-center gap-1.5 rounded-lg border border-ring bg-white px-2 py-1.5 shadow-xs ring-3 ring-ring/15"
|
||
>
|
||
<span
|
||
class="inline-flex max-w-full items-center gap-1 rounded-md bg-muted px-2 py-1 text-xs font-medium"
|
||
>
|
||
<span class="truncate">Busca: saúde da mulher e atenção materna</span>
|
||
<span
|
||
class="grid size-5 shrink-0 place-items-center rounded-sm text-muted-foreground"
|
||
><svg class="size-3.5"><use href="#i-x" /></svg
|
||
></span>
|
||
</span>
|
||
<span class="min-h-10 min-w-32 flex-1"></span>
|
||
</div>
|
||
</div>
|
||
<div class="flex shrink-0 items-center gap-2 pt-7">
|
||
<button
|
||
class="inline-flex min-h-11 items-center rounded-lg px-3 text-sm font-semibold"
|
||
>
|
||
Limpar
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div class="mt-3 grid grid-cols-2 rounded-lg bg-muted p-1 text-sm">
|
||
<div
|
||
class="rounded-md border border-input bg-white py-2.5 text-center font-semibold shadow-sm"
|
||
>
|
||
Termo exato
|
||
</div>
|
||
<div
|
||
class="flex items-center justify-center gap-2 py-2.5 font-medium text-muted-foreground"
|
||
>
|
||
<svg class="icon-sm"><use href="#i-sparkles" /></svg>Por tema
|
||
</div>
|
||
</div>
|
||
<div class="mt-3 flex gap-2">
|
||
<span
|
||
class="inline-flex h-9 items-center gap-2 rounded-full border border-border px-3 text-xs text-muted-foreground"
|
||
><svg class="size-3.5"><use href="#i-filter" /></svg>Ano<svg class="size-3">
|
||
<use href="#i-chevron-down" /></svg
|
||
></span>
|
||
<span
|
||
class="inline-flex h-9 items-center gap-2 rounded-full border border-border px-3 text-xs text-muted-foreground"
|
||
><svg class="size-3.5"><use href="#i-filter" /></svg>Tema<svg class="size-3">
|
||
<use href="#i-chevron-down" /></svg
|
||
></span>
|
||
<span
|
||
class="inline-flex h-9 items-center gap-2 rounded-full border border-border px-3 text-xs text-muted-foreground"
|
||
><svg class="size-3.5"><use href="#i-filter" /></svg>Alcance<svg class="size-3">
|
||
<use href="#i-chevron-down" /></svg
|
||
></span>
|
||
</div>
|
||
<div class="mt-7 grid grid-cols-2 gap-3">
|
||
<div class="rounded-xl border border-border p-4">
|
||
<div class="h-3 w-1/2 rounded bg-muted"></div>
|
||
<div class="mt-3 h-2.5 w-full rounded bg-muted"></div>
|
||
<div class="mt-2 h-2.5 w-4/5 rounded bg-muted"></div>
|
||
</div>
|
||
<div class="rounded-xl border border-border p-4">
|
||
<div class="h-3 w-2/3 rounded bg-muted"></div>
|
||
<div class="mt-3 h-2.5 w-full rounded bg-muted"></div>
|
||
<div class="mt-2 h-2.5 w-3/4 rounded bg-muted"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section
|
||
aria-labelledby="spec-title"
|
||
class="rounded-xl border border-border bg-white p-6 shadow-sm"
|
||
>
|
||
<p class="text-xs font-semibold text-primary">PORT CONTRACT</p>
|
||
<h2 id="spec-title" class="mt-1 text-lg font-semibold">Medidas aprováveis</h2>
|
||
<div class="mt-4 grid gap-5 text-sm leading-6 md:grid-cols-4">
|
||
<div>
|
||
<p class="font-semibold">Folga final</p>
|
||
<p class="text-muted-foreground">44px abaixo de md: alvo de 36px + 8px de respiro.</p>
|
||
</div>
|
||
<div>
|
||
<p class="font-semibold">Ancoragem</p>
|
||
<p class="text-muted-foreground">
|
||
X a 0px da direita, centrado verticalmente no campo de 40px.
|
||
</p>
|
||
</div>
|
||
<div>
|
||
<p class="font-semibold">Chip longo</p>
|
||
<p class="text-muted-foreground">
|
||
Cap de 168px, uma linha, ellipsis; sem aumentar a barra.
|
||
</p>
|
||
</div>
|
||
<div>
|
||
<p class="font-semibold">Acessibilidade</p>
|
||
<p class="text-muted-foreground">
|
||
Alvo <code>size-9</code>, miolo <code>size-6</code>, <code>aria-label="Limpar"</code>;
|
||
vazio invisível.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
</body>
|
||
</html>
|