Utilitaire de style appliquant un fond transparent, une couleur de texte et une bordure colorée sur un même
élément. Disponible en variante neutre et en variante par couleur via la map $colors.
Les classes .outline et .outline-{color}
sont indépendantes de l'élément HTML. Elles peuvent s'appliquer sur un <span>,
un <div>, un <button>
ou tout autre élément selon le contexte.
| CLASSE | DESCRIPTION |
|---|---|
.outline |
Fond transparent, couleur de texte et bordure sur --color-text.
Style et épaisseur de bordure via variables CSS.
|
.outline-{color} |
Fond transparent, couleur de texte et bordure sur la valeur de couleur correspondante dans $colors. Style et épaisseur de bordure via variables
CSS.
|
Chaque entrée de la map $colors génère une classe .outline-{name}.
| CLASSE | COULEUR |
|---|---|
.outline-primary |
--color-primary |
.outline-secondary |
--color-secondary |
.outline-tertiary |
--color-tertiary |
.outline-success |
--color-success |
.outline-info |
--color-info |
.outline-warning |
--color-warning |
.outline-danger |
--color-danger |
.outline-neutral |
--color-neutral |
.outline-light |
--color-light |
.outline-dark |
--color-dark |
.outline-white |
--color-white |
.outline-black |
--color-black |
.outline-primary-ghost |
--color-primary-ghost |
.outline-secondary-ghost |
--color-secondary-ghost |
.outline-tertiary-ghost |
--color-tertiary-ghost |
.outline-success-ghost |
--color-success-ghost |
.outline-info-ghost |
--color-info-ghost |
.outline-warning-ghost |
--color-warning-ghost |
.outline-danger-ghost |
--color-danger-ghost |
.outline-neutral-ghost |
--color-neutral-ghost |
.outline-light-ghost |
--color-light-ghost |
.outline-dark-ghost |
--color-dark-ghost |
.outline-white-ghost |
--color-white-ghost |
.outline-black-ghost |
--color-black-ghost |
| TOKEN | RÔLE |
|---|---|
--color-text |
Couleur de texte et de bordure de la variante neutre .outline
|
--border-style-outline |
Style de bordure appliqué sur toutes les variantes (solid, dashed…)
|
--border-width-outline |
Épaisseur de bordure appliquée sur toutes les variantes |
Utiliser --border-style-outline et
--border-width-outline pour personnaliser globalement
le rendu de toutes les variantes sans toucher au SCSS.
Ne pas définir de background-color sur un élément portant
une classe .outline-{color} : le fond transparent est
constitutif du composant.
Outline · WEBDEV-UI DOCS / V1