Nous commençons avec une liste de déclaration de variables. Les premières sont les couleurs utilisées, puis la largeur, hauteur de chaque rang ainsi que leur nombre et enfin la taille de l'ampoule.
Le bloc ligne 48 définit le style du label. Ligne 64, nous avons une boucle permettant de définir la taille de chacun des labels qui compose la "jauge". Notez que la boucle ne prend en compte que le strict minimum de ligne, la taille, pour ne pas encombrer le CSS final.
Enfin, nous pouvons aller ligne 71 où l'ampoule est créée, puis ligne 120, où nous allons commencer à détailler.
Ligne 122, nous avons "&:checked ~ label" qui prends un opacity : 0.5 . Cette ligne fait que tous les labels après l'input radio checke sont translucides, pour représenter le fait qu'ils sont "inactifs". Si vous avez pris le temps de regarder les étoiles que nous avons proposé en fin d'article la semaine dernière, vous pouvez noter que c'est exactement la même technique qui est utilisée ici.
Enfin, nous avons une boucle ligne 125, qui va générer une centaine de ce genre de bloc, en changeant juste les valeurs chiffrées :
&.rank-1:checked ~ .light-bulb .base .bulb {
box-shadow: 0 0 2px * 1 lighten($yellow,0.5 * 1);
background-color: lighten($yellow,0.5 * 1);
}
Comme vous pouvez le voir, c'est exactement la même manière de cibler l'élément de manière détournée que le second exemple de la semaine dernière, la checkbox était juste ici remplacée par une liste de radios.
