@charset "UTF-8"; /*! * Responsividade — Breakpoints + media() + mq/mq-set * Versão: 1.1.0 * Data: 2025-09-19 * Autor: Herbert * Licença: Interna (projeto) * * Descrição: * - Mapa de breakpoints semânticos ($breakpoints). * - Função media($alias) → "only screen and (...)". * - Mixin mq($prop, $pairs...) [robusto]: * * aceita pares em formato flexível (com/sem parênteses, múltiplos pares), * * agrupa + , * * define BASE **desktop-first**: * - se existir `desktop`, usa como base; * - senão, se existir `ultra-wide`, usa como base; * - senão, usa o 1º alias informado, * * emite @media para cada alias informado ≠ base. * - Mixin mq-set($map): aplica várias propriedades de uma vez usando mq. * * Requisitos: * - Compilador: Dart Sass recomendado. * - SCSS: uso de funções de lista e strings (append, nth, length, type-of). * * Convenções: * - Desktop-first: valor base é sempre uma faixa desktop (idealmente `desktop`). * - Alias principais de layout: * • mobile → telefones * • tablet-* → tablets por faixa/orientação * • desktop → monitores "normais" * • ultra-wide → monitores muito largos * - Para valores com vírgulas (gradients, múltiplos box-shadows): prefira variável ou unquote("..."). * * Erros comuns (mensagens emitidas): * - token 'X' não é um alias conhecido → alias não existe em $breakpoints. * - nenhum valor para alias 'X' → faltou o valor após o alias. * - tokens vazios após normalização → include sem pares válidos. * * Links internos: * - DOCUMENTAÇÃO DE USO: ver wiki do projeto (Seção: Responsividade). */ .toolbar { display: flex; justify-content: flex-start; /* em tablet-sm centraliza */ justify-content: center; } .card-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; padding: 24px; } @media only screen and (max-width: 1023px) { .card-list { grid-template-columns: repeat(3, 1fr); } } @media only screen and (max-width: 599px) { .card-list { grid-template-columns: repeat(2, 1fr); } } @media only screen and (max-width: 1023px) { .card-list { gap: 16px; } } @media only screen and (max-width: 599px) { .card-list { gap: 12px; } } @media only screen and (max-width: 1023px) { .card-list { padding: 18px; } } @media only screen and (max-width: 599px) { .card-list { padding: 12px; } } .panel { max-width: 80%; min-width: 60%; } @media only screen and (max-width: 1023px) { .panel { max-width: 760px; } } @media only screen and (max-width: 833px) { .panel { max-width: 72ch; } } @media only screen and (max-width: 819px) { .panel { max-width: 92%; } } @media only screen and (max-width: 599px) { .panel { max-width: 100%; } } @media only screen and (max-width: 1023px) { .panel { min-width: 70%; } } @media only screen and (max-width: 833px) { .panel { min-width: fit-content(72ch); } } @media only screen and (max-width: 819px) { .panel { min-width: 90%; } } @media only screen and (max-width: 599px) { .panel { min-width: 100%; } } .box { padding: 24px 32px; transform: translateX(0) translateY(0); } @media only screen and (max-width: 1023px) { .box { padding: 18px 24px; } } @media only screen and (max-width: 599px) { .box { padding: 12px 16px; } } @media only screen and (max-width: 599px) { .box { transform: translateX(-8px) translateY(0); } } .modal { min-height: 75vh; max-height: 92vh; } @media only screen and (max-width: 1023px) { .modal { min-height: 75vh; } } @media only screen and (max-width: 833px) { .modal { min-height: -moz-fit-content; min-height: fit-content; } } @media only screen and (max-width: 819px) { .modal { min-height: -moz-fit-content; min-height: fit-content; } } @media only screen and (max-width: 599px) { .modal { min-height: 100%; } } @media only screen and (max-width: 1023px) { .modal { max-height: 90vh; } } @media only screen and (max-width: 833px) { .modal { max-height: 88vh; } } @media only screen and (max-width: 819px) { .modal { max-height: 92vh; } } @media only screen and (max-width: 599px) { .modal { max-height: 100vh; } } .header-actions { display: flex; flex-wrap: wrap; flex-direction: row; align-items: center; justify-content: flex-end; gap: 12px; } @media only screen and (max-width: 1023px) { .header-actions { flex-direction: row; } } @media only screen and (max-width: 599px) { .header-actions { flex-direction: column; } } @media only screen and (max-width: 1023px) { .header-actions { align-items: center; } } @media only screen and (max-width: 599px) { .header-actions { align-items: stretch; } } @media only screen and (max-width: 1023px) { .header-actions { justify-content: center; } } @media only screen and (max-width: 599px) { .header-actions { justify-content: center; } } @media only screen and (max-width: 1023px) { .header-actions { gap: 10px; } } @media only screen and (max-width: 599px) { .header-actions { gap: 8px; } } .hero-banner { height: 60vh; } @media only screen and (orientation: portrait) { .hero-banner { height: 40vh; } } @media only screen and (max-width: 599px) { .hero-banner { height: 36vh; } } .panel-debug { min-width: 70%; } @media only screen and (width: 1366px) { .panel-debug { min-width: 60%; } } .panel-prod { min-width: 60%; } @media only screen and (max-width: 1023px) { .panel-prod { min-width: 70%; } } @media only screen and (max-width: 819px) { .panel-prod { min-width: 90%; } } @media only screen and (max-width: 599px) { .panel-prod { min-width: 100%; } } .title { font-size: 2.25rem; font-size: clamp(1.6rem, 2vw + 1rem, 2.25rem); } @media only screen and (max-width: 1023px) { .title { font-size: 1.9rem; } } @media only screen and (max-width: 599px) { .title { font-size: 1.6rem; } } .badge--desktop { display: inline-flex; display: none; } .badge--mobile { display: none; display: inline-flex; } .layout { display: grid; grid-template-areas: "aside main"; grid-template-columns: 280px 1fr; grid-template-areas: main aside; } @media only screen and (max-width: 1023px) { .layout { grid-template-columns: 240px 1fr; } } @media only screen and (max-width: 599px) { .layout { grid-template-columns: 1fr; } } aside { grid-area: aside; } main { grid-area: main; } /* 1) Padrão universal: imagem responsiva sem distorcer */ .img-fluid { display: block; /* evita espaçamento de inline elements */ max-width: 100%; /* nunca ultrapassa o contêiner */ height: auto; /* mantém proporção */ vertical-align: middle; -webkit-user-drag: none; -webkit-user-select: none; -moz-user-select: none; user-select: none; } /* 2) Quando o contêiner tem tamanho fixo ou aspect-ratio e você quer PREENCHER (pode cortar bordas) */ .img-fit-cover { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; /* preenche o box sem distorcer */ -o-object-position: center; object-position: center; } /* 3) Quando quer ENCAIXAR sem cortar (pode sobrar “faixas”) */ .img-fit-contain { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; /* mostra tudo, sem distorcer */ -o-object-position: center; object-position: center; } /* 4) Opcional: imagens com pixels “nítidos” (ícones/prints/pixel-art) */ .img-pixelated { image-rendering: pixelated; } /* 5) Se o HTML tiver width/height nos atributos, garanta proporção pelo CSS */ img.img-fluid[width][height] { height: auto; } /* Cobre a tela inteira (viewport) usando absolute */ /* ========================================================================== %btn-secundary-circular — Placeholder SCSS (Botões circulares) -------------------------------------------------------------------------- Componente -------------------------------------------------------------------------- Um botão circular (ícone-only) usado para ações rápidas na UI onde o espaço é compacto e o visual precisa ser minimalista e consistente. Exemplos de uso: - Alternador de tema (light / dark) na barra de navegação - Fechar modais / overlays - Ações rápidas em cards/listas (adicionar, editar, excluir) - Icon buttons em toolbars, filtros e linhas de tabela -------------------------------------------------------------------------- Características principais -------------------------------------------------------------------------- - Forma: círculo (border-radius: 50%) - Conteúdo: normalmente somente ícone centralizado (sem texto) - Tamanhos suportados: compact / comfort / large (classes: .is-compact, .is-comfort, .is-large) - Implementado como placeholder `%btn-secundary-circular` para @extend ou como base para variantes específicas (.btn-*, .icon-btn, etc.) -------------------------------------------------------------------------- Anatomia (o que o bloco define) -------------------------------------------------------------------------- - Box model: largura/altura fixas (32 / 36 / 44), display inline-grid, place-items: center - Tipografia/ícone: > i { font-size } — ícone herda a cor via currentColor - Estados: :hover, :focus-visible, :active, :disabled - Transições: transform / box-shadow / background-color / outline-color -------------------------------------------------------------------------- Tokens / variáveis esperadas (nome sugerido, definir no tema) -------------------------------------------------------------------------- - --bg-btn-secundary-circular (fundo padrão) - --cor-btn-secundary-circular (cor do ícone/texto) - --bg-btn-hover-secundary-circular (fundo no hover/focus/active) - --border-btn-secundary-circular (cor do outline/anel) * Obs.: caso use map de tokens SCSS, mapear essas keys ao emitir variáveis -------------------------------------------------------------------------- Acessibilidade & boas práticas -------------------------------------------------------------------------- - Fornecer `aria-label` ou `title` ao usar somente ícone (ex.: