| Classe | Description |
|---|---|
.{colorName} |
Définir une couleur à l'élément. |
.child{ColorName} |
Définir une couleur aux enfant direct d'un élément. |
.bg{ColorName} |
Définir une couleur d'arrière plan à l'élément. |
.childBg{ColorName} |
Définir une couleur d'arrière plan aux enfant direct d'un élément. |
.bd{ColorName} |
Définir une couleur de bordure d'un élément. |
.childBd{ColorName} |
Définir une couleur de bordure aux enfant direct d'un élément. |
.darkenHover.lightenHover
|
Modifier l'opacité de l'arrière plan au survol de l'élément. Utilisé par défault sur les boutons. |
Ajouter les classes précédentes à votre couleurs personalisées dans le fichier css du site internet.
Il est recommandé de nommer les couleurs personnalisées par un terme générique (color1, primaryColor..) pour changer facilement de couleur au site.
<style>
.color1,
.childColor1 > * {
color: #2196F3 !important;
}
.bgColor1,
.childBgColor1 > * {
background-color: #2196F3 !important;
}
.bdColor1,
.childBdColor1 > * {
border-color: #2196F3 !important;
}
</style>
Ajouter l'attribut data-color sur la balise html permet de définir la couleur par défault de la page.
Cette couleur sera appliquée sur certains éléments comme les sliders.
redLight
red
redDark
pinkLight
pink
pinkDark
purpleLight
purple
purpleDark
indigoLight
indigo
indigoDark
blueLight
blue
blueDark
greenLight
green
greenDark
yellowLight
yellow
yellowDark
orangeLight
orange
orangeDark
Success
Warning
Danger
white
gray1
gray2
gray3
gray4
gray5
gray6
gray7
gray8
gray9
black
light
dark
transparent
.lightenHover
.darkenHover