Utilitários variados que não se encaixam em uma categoria maior: float, cursor, eventos de ponteiro e pequenos efeitos visuais.
Posicionamento (.position-*) e overflow (.overflow-*) têm páginas próprias — veja Utilities/Position e Utilities/Overflow.
| Classe |
O que faz |
.pull-left |
float: left |
.pull-right |
float: right |
.clearfix |
Limpa floats internos via ::after { clear: both } — aplique no container pai quando os filhos usam .pull-left/.pull-right e o pai precisa “abraçar” a altura deles |
| Classe |
cursor aplicado |
.cursor-pointer |
pointer |
.cursor-default |
default (seta padrão) |
.cursor-progress |
progress |
.cursor-wait |
wait |
.cursor-help |
help |
| Classe |
O que faz |
.pointer-events--none |
Elemento para de receber cliques/hover — os eventos “atravessam” para o elemento abaixo dele |
.pointer-events--auto |
Restaura o recebimento normal de eventos de ponteiro |
Quando usar: overlays decorativos posicionados por cima de conteúdo clicável, ou para desabilitar interação num elemento sem mexer em disabled/JS.
| Classe |
O que faz |
.obfuscate |
Aplica filter: blur(3px) — usado para ofuscar informação sensível na tela |
.caret |
Indicador visual (seta) em inline-flex, usado em elementos expansíveis/dropdowns |
.bg-gradient-diagonal |
Fundo em gradiente diagonal de --mds-colors-secondary-main para --mds-colors-primary-main |