Banco de questoes
Disciplina
6
26
publicidade
O ELEMENTO carrega a semantica (titulo e', etiqueta
de campo e' ); a classe carrega so' a forma.
CONVENCAO DE ESTADO (tarefa A2, refinada pela C): variante -> classe
modificadora; estado -> `data-uc-estado`, e `data-uc-estado` fica na
SUPERFICIE que busca dado. Aqui o componente INTEIRO e' a superficie (nao
ha itens dentro dele para confundir), entao o atributo mora nele mesmo.
Que ele busca dado esta medido: ` ` e'
reescrito pelo JavaScript a cada recorte.
========================================================================== */
.uc-rotulo{
/* `display:block` e' o que o `.uc-lbl` do tema antigo ja fazia (medido em
bancada.css:45) -- um NUNCA foi inline ali. */
display:block;
/* Item de flex/grade herda min-width:auto: sem isto o caso de borda (uma
palavra de 43 caracteres, em caixa alta e com entreletra) estoura a
coluna em vez de quebrar dentro dela. Foi o defeito numero um que o
mostruario pegou na tarefa A2, e ele continua valendo. */
min-width:0;
margin:0;
font-family:var(--uc-mono);
font-size:var(--uc-s--1);
/* 550 e nao 400: vem da medicao do uso DOMINANTE. `.uc-lbl` (35 elementos)
e' peso 600 no tema antigo; `.uc-eyebrow` e' peso normal. Em caixa alta,
mono e 12px, o peso normal desaparece contra o corpo do texto. */
font-weight:var(--uc-w-realce);
/* Caixa alta pede >= .06em (regra do craft, verificavel). --uc-tr-caps
entrega .08em; --uc-tr-rotulo (.02em) e' para rotulo em caixa mista. */
letter-spacing:var(--uc-tr-caps);
line-height:var(--uc-lh-controle);
text-transform:uppercase;
color:var(--uc-ink-3);
}
/* A 01-base.css pinta h1-h6 com --uc-s-2/--uc-w-anunciar/--uc-tr-display.
Uma classe (0,1,0) vence um elemento (0,0,1), entao `.uc-rotulo` ja
sobrescreve tudo o que precisa -- exceto `text-wrap:balance`, que fica e e'
inofensivo num rotulo de duas palavras. Medido: ` publicidade ` com
total zero. A palavra faz o trabalho ("nenhuma questao neste recorte"); a
cor apenas acompanha, um degrau abaixo. */
.uc-rotulo[data-uc-estado="vazio"]{
color:var(--uc-ink-3);
font-weight:var(--uc-w-ler);
}
/* --------------------------------------------------------------------------
ESTADO: ERRO
-------------------------------------------------------------------------- */
/* Grade de duas colunas, e nao flex com align-items:center: no caso de borda
o texto ocupa tres linhas, e centralizar poria o icone no meio do
paragrafo. `align-items:start` deixa o icone na primeira linha e o texto
com recuo pendurado -- e' a mesma forma que `.uc-chips__aviso` usa.
O ICONE E' A MESMA FORMA que o chip desenha para erro (circulo com
exclamacao). Dois componentes nao podem desenhar "erro" diferente. */
.uc-rotulo[data-uc-estado="erro"]{
display:grid;
grid-template-columns:auto 1fr;
gap:var(--sp-1);
align-items:start;
color:var(--uc-errado);
}
/* 12px e nao 16px: aqui o icone acompanha uma linha de 12px em caixa alta,
nao um paragrafo. E' a mesma medida que o chip usa nos icones que vivem
DENTRO do controle. Contraste medido: --uc-errado sobre --uc-field =
6,54:1, sobre --uc-paper-2 = 5,78:1. */
.uc-rotulo__icone{
flex:none;
width:12px;
height:12px;
}
/* --------------------------------------------------------------------------
ESTADO: CARREGANDO
-------------------------------------------------------------------------- */
/* O bloco cinza sozinho e' espaco reservado e nao promete nada. O BRILHO e'
que diz "espere, esta vindo" -- e so' o JavaScript pode cumprir isso. Por
isso a animacao vive atras de html[data-uc-js]: sem JS o osso fica PARADO,
honesto, em vez de pulsar para sempre. Movimento reduzido ja e' zerado
globalmente pela 01-base.css.
96px x 12px: os dois na grade de 4px. Nao ha `max-width` aqui -- a versao
anterior tinha `max-width:180px`, fora da grade e sem nome, e ninguem
olhava (era a familia width, height, min-* e max-*, que so a Regra 11 desta
tarefa passou a governar). */
.uc-rotulo__osso{
display:block;
width:96px;
height:12px;
border-radius:var(--uc-r-1);
background:var(--uc-esqueleto);
}
html[data-uc-js] .uc-rotulo__osso{
background-image:linear-gradient(
90deg,
var(--uc-esqueleto) 0%,
var(--uc-esqueleto-brilho) 50%,
var(--uc-esqueleto) 100%
);
background-size:300% 100%;
animation:uc-rotulo-brilho var(--uc-esqueleto-dur) var(--uc-ease) infinite;
}
/* Nome PROPRIO do componente. Nome de @keyframes e' global no documento e
nenhuma regra da guarda o governa (achado 2 do relatorio da tarefa C):
compartilhar um keyframe entre arquivos e' dependencia invisivel ao lint,
que morre calada no dia em que o outro componente nao for enfileirado. */
@keyframes uc-rotulo-brilho{
from{ background-position:150% 0 }
to{ background-position:-150% 0 }
}
`
(20 elementos, colunas do rodape) e `
` (5, grupos de
chip da capa) sao os dois casos reais disso. */
/* --------------------------------------------------------------------------
VARIANTE: DIVULGACAO — o rotulo de anuncio
-------------------------------------------------------------------------- */
/* ⛔ ISTO E' REQUISITO, NAO ESTILO.
Medido: 23 dos 47 `uc-eyebrow` das 10 telas sao
`