Styleguide

Status

Ajouté à la version :

• 0.1.0(actuelle)

---

Changelog:

• 0.1.0: Ajout du composant

---

Statut basique

Ajouter un composant d'icône .icon.icon-xxx dans l'élément .status.

Il est possible d'ajouter des marges en fonction de la position de l'icône :

• .icon.icon-xxx.icon--mRight : marge à droite
• .icon.icon-xxx.icon--mleft : marge à gauche

<div class="status">
  <span class="icon icon--circleInProgress icon--mRight"></span> en cours
</div>

<div class="status">
  en cours <span class="icon icon--circleInProgress icon--mLeft"></span>
</div>

Statut style alternate

Ajouter la classe de modification .status--alternate à l'élément ayant la classe .status afin de modifier son style.

<div class="status status--alternate">
  <span class="icon icon--circleInProgress icon--mRight"></span> en cours
</div>

Liste des icônes disponible

<div class="status">
  <span class="icon icon--circleInfos icon--mRight"></span> infos
</div>

<div class="status">
  <span class="icon icon--circleAlert icon--mRight"></span> alerte / erreur
</div>

<div class="status">
  <span class="icon icon--circleInProgress icon--mRight"></span> en cours / attente
</div>

<div class="status">
  <span class="icon icon--circleCheck icon--mRight"></span> validé / lancé / terminé / retry
</div>

<div class="status">
  <span class="icon icon--circleClose icon--mRight"></span> stoppé
</div>

<div class="status">
  <span class="icon icon--circlePause icon--mRight"></span> en pause
</div>

Gestion de la couleur d'icône

Ajouter un utlis de couleur à l'élément .icon afin de modifier sa couleur.

<div class="status">
  <span class="icon icon--circleInfos icon--mRight u-txtClr1"></span> infos
</div>
<div class="status">
  <span class="icon icon--circleAlert icon--mRight u-txtClr2"></span> alerte / erreur
</div>
<div class="status">
  <span class="icon icon--circleCheck icon--mRight u-txtClr3"></span> validé / lancé / terminé / retry
</div>
<div class="status">
  <span class="icon icon--circleCheck icon--mRight u-txtClr4"></span> validé / lancé / terminé / retry
</div>