Formatage des numéros SVA (service à valeur ajoutée, type numéro vert/gris/indigo) avec TailwindCSS.

1_numeros_sva.md

Numéros SVA

Formatage des numéros SVA (service à valeur ajoutée, type numéro vert/gris/indigo) avec TailwindCSS.

Ajouter les couleurs dans le fichier de configuration tailwind.js

var colors = {
    
    /* ... */
    
    'green-sva': '#78b52a',
    'grey-sva': '#91919a',
    'pink-sva': '#a41979',
    
    /* ... */
    
}

Changer la classe selon le type de numéro

• Numéro vert (100% gratuit) : green
• Numéro gris (gratuit + prix appel) : grey
• Numéro indigo (payant + prix appel) : pink

<div class="sva green"><!-- Contenu SVA --></div>
<div class="sva grey"><!-- Contenu SVA --></div>
<div class="sva pink"><!-- Contenu SVA --></div>

Plus d'informations sur les numéros SVA : infosva.org

2_numeros_sva.png

3_numeros_sva.html

<!--
	Changer la classe selon le type de numéro :
	 - Numéro vert : 'green'
	 - Numéro indigo : 'pink'
	 - Numéro gris : 'grey'
-->

<div class="sva green">
    <a href="tel:0800100200">0 800 100 200</a>
    <div>
        Service & appel<br/>
        + gratuits
    </div>
</div>

<div class="sva grey">
    <a href="tel:0800300400">0 800 300 400</a>
    <div>
        Service gratuit<br/>
        + prix appel
    </div>
</div>

<div class="sva pink">
    <a href="tel:0800500600">0 800 500 600</a>
    <div>
        Service 0,34 € / appel<br/>
        + prix appel
    </div>
</div>

4_numeros_sva.less

.sva {
    @apply .inline-flex .items-center .bg-white .border .border-grey-light .px-2 .mt-2;
}

.sva a {
    @apply .text-xl .no-underline .mr-2;
}

.sva a:hover {
    @apply .cursor-pointer .no-underline;
}

.sva div {
    @apply .relative .text-2xs .leading-none .text-white .py-2 .pr-2 .pl-4 .text-left;
}

.sva div:before {
    @apply .absolute .pin-l .mt-px .border .border-t-8 .border-b-8 .border-l-8;
    content: " ";
    border-color: transparent transparent transparent white;
}

/*
    Couleurs ajoutées dans tailwind.js :
    'green-sva': '#78b52a',
    'grey-sva': '#91919a',
    'pink-sva': '#a41979',
*/

.sva.pink a, .sva.pink a:hover { @apply .text-pink-sva; }
.sva.pink div { @apply .bg-pink-sva; }
.sva.green a, .sva.green a:hover { @apply .text-green-sva; }
.sva.green div { @apply .bg-green-sva; }
.sva.grey a, .sva.grey a:hover { @apply .text-grey-sva; }
.sva.grey div { @apply .bg-grey-sva; }

@screen md {

    .sva a {
        @apply .text-2xl;
    }

    .sva div {
        @apply .text-xs;
    }

    .sva div:before {
        @apply .mt-1;
    }

}