Interação CSS

O que é

Pequenos ajustes que fazem o site "se comportar" direito: mostrar a mãozinha em algo clicável (poi), o cursor de arrastar num mapa (cur-gr), impedir que um duplo clique pinte o texto de azul (sel-no), selecionar a chave Pix inteira com um clique (sel-al), deixar um enfeite por cima sem bloquear o clique (pe-no), esconder algo sem mexer no layout (hid) e montar uma fileira de cards que encaixa no lugar quando a pessoa arrasta (snap-*).

É só CSS, sem JavaScript. O carrossel funciona com a própria rolagem do navegador: a caixa rola de lado (ovx), o snap-x liga o encaixe e cada item diz onde ele para (snap-s início, snap-c centro, snap-e fim). No celular é arrastar com o dedo; no computador, a barra de rolagem ou Shift + rodinha.

Quando usar

• Card, linha de tabela ou ícone clicável que não é link nem botão: poi.
• Chave Pix, cupom, código para a pessoa copiar: sel-al (um clique seleciona tudo).
• Selo ou enfeite por cima de um card que não pode atrapalhar o clique: pe-no.
• Fileira de depoimentos, produtos ou fotos para arrastar de lado: ovx snap-x + snap-s em cada item.
• Lista longa (centenas de itens) que demora a abrir: cv-au em cada item.

Comece aqui

1. 1

   Coloque o SW Core no <head>. As classes estão no arquivo principal.

   <link rel="stylesheet" href="swcore/swcore.min.css">

2. 2

   Coloque a classe no elemento. Aqui, um código de cupom: um clique seleciona o código inteiro para copiar.

   Seu cupom: VERAO10

   <p>Seu cupom: <strong class="sel-al">VERAO10</strong></p>

Todas as variações

Cada quadro abaixo é o componente de verdade, rodando. O código embaixo é exatamente o que está no quadro: copie e cole.

Tabela de opções

Receitas prontas — usos reais

Situações que aparecem em quase todo site. Copie a que servir.

<div class="ovx snap-x flx gap-4 pb-2">
  <blockquote sw-card class="snap-s f-sh0 m-0 w-fl">
    <div class="sw-card-bdy">
      <p class="mt-0">"Meu salão lotou a agenda no primeiro mês com o site novo."</p>
      <strong>Carla · Salão Bela</strong>
    </div>
  </blockquote>
  <!-- …um blockquote por depoimento… -->
</div>

<p class="t-mut t-p">Chave Pix (clique para selecionar)</p>
<p><strong class="sel-al poi">12.345.678/0001-90</strong></p>

<div class="poi sel-no flx j-sb p-p">
  <span>Pedido #1041 — Maria</span>
  <span sw-badge="suc">Pago</span>
</div>
<!-- poi: mostra a mãozinha · sel-no: clicar várias vezes não pinta o texto -->

<!-- cv-au em CADA item repetido, não no contêiner -->
<ul>
  <li class="cv-au">…produto 1…</li>
  <li class="cv-au">…produto 2…</li>
  <!-- …centenas de itens… -->
</ul>

Precisa de quê

• swcore.min.css — todas as classes desta página.

Cuidados — erros comuns

• O carrossel precisa das três partes: ovx (rola), snap-x (encaixa) no contêiner e snap-s/snap-c/snap-e em cada item. Sem a classe no item, não há onde encaixar.
• Itens do carrossel encolhem até caber se não tiverem f-sh0. Ponha f-sh0 e uma largura (w-fl ou a do seu CSS) em cada item.
• pe-no desliga o clique de verdade, inclusive para teclado. Não use para "desativar" botão de formulário — para isso existe o atributo disabled.
• hid esconde da tela e do leitor de tela, mas o espaço continua lá. Para sumir de vez (sem ocupar espaço), use non.
• O atributo HTML hidden também some de vez, mesmo numa tag com flx, grd ou sw-btn — bom para mostrar/esconder por JS (el.hidden = true).
• poi só muda o cursor; não torna nada clicável. O clique continua sendo do link, botão ou do seu JavaScript.
• No celular não existe cursor — as classes cur-* e poi só fazem diferença no computador.

O que ele não faz

• O carrossel de rolagem não tem setas nem bolinhas. Para isso, use o sw-trilho (carrossel nativo com encaixe) ou o Slider.
• cv-au só ajuda em listas grandes; em página curta não faz diferença nenhuma.