Diversos
Responsivo
Para aplicar classes utilitárias em um breakpoint específico, adicione o prefixo adequado a classe existente.
Appearance
Utilitários para suprimir o estilo nativo de controle de formulários
| Classe | Propriedades |
|---|---|
.z--appearance-none | appearance: none; |
Referências:
Box Shadow
Utilitários para controlar a sombra de um elemento
| Classe | Propriedades |
|---|---|
.z--shadow-{token} | box-shadow: {token}; |
Tokens:
| Token | Valor |
|---|---|
xs | 0 1px 2px 0 rgba(0,0,0,0.10) |
sm | 0 2px 4px 0 rgba(0,0,0,0.10) |
md | 0 4px 8px 0 rgba(0,0,0,0.12), 0 2px 4px 0 rgba(0,0,0,0.08) |
lg | 0 15px 30px 0 rgba(0,0,0,0.11), 0 5px 15px 0 rgba(0,0,0,0.08) |
inner | inset 0 2px 4px 0 rgba(0,0,0,0.06) |
ouline | 0 0 0 3px rgba(52,144,220,0.5) |
none | none |
Referências:
Object Fit
Utilitários para controlar a resposta do elemento à altura e largura de seu container
| Classe | Propriedades |
|---|---|
.z--object-contain | object-fit: contain; |
.z--object-cover | object-fit: cover; |
.z--object-fill | object-fit: fill; |
.z--object-none | object-fit: none; |
.z--object-scale-down | object-fit: scale-down; |
Referências:
Object Position
Utilitários para controlar o posicionamento do elemento à altura e largura de seu container
| Classe | Propriedades |
|---|---|
.z--object-bottom | object-position: bottom; |
.z--object-center | object-position: center; |
.z--object-left | object-position: left; |
.z--object-left-bottom | object-position: left bottom; |
.z--object-left-top | object-position: left top; |
.z--object-right | object-position: right; |
.z--object-right-bottom | object-position: right bottom; |
.z--object-right-top | object-position: right top; |
.z--object-top | object-position: top; |
Referências:
Opacity
Utilitários para controlar a opacidade de um elemento
| Classe | Propriedades |
|---|---|
.z--opacity-{token} | opacity: {token}; |
Tokens:
| Token | Valor |
|---|---|
0 | 0 |
25 | .25 |
50 | .5 |
75 | .75 |
100 | 1 |
Referências:
Outline
Utilitários para controlar o contorno de um elemento
| Classe | Propriedades |
|---|---|
.z--outline-none | outline: 0; |
Referências:
SVG
Utilitários para estilizar elementos SVG
| Classe | Propriedades |
|---|---|
.z--fill-current | fill: currentColor; |
.z--stroke-current | stroke: currentColor; |
Referências: