← Todos los ejemplos

Colorea los estados de pedido

Añade contornos de color a las insignias de estado para distinguir al instante pedidos pagados, pendientes o problemáticos.

Código para copiar

.Polaris-Badge:has([class*="text"]) { font-weight: 600 !important; }
.Polaris-Badge--toneSuccess,
.Polaris-Badge--statusSuccess {
  outline: 2px solid #1a7f4b !important;
}
.Polaris-Badge--toneWarning,
.Polaris-Badge--statusWarning {
  outline: 2px solid #b98900 !important;
}
.Polaris-Badge--toneAttention,
.Polaris-Badge--toneCritical,
.Polaris-Badge--statusCritical {
  outline: 2px solid #c4341e !important;
}

Cómo usar este ejemplo

1. Copia el código con el botón de arriba.
2. Instala JustZix (2 minutos) y abre la extensión en la página de destino.
3. Añade una nueva regla que coincida con esa página.
4. Pega el código en el panel CSS de la regla y guarda — el efecto aparece al instante.