Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Formatage des numéros SVA (service à valeur ajoutée, type numéro vert/gris/indigo) avec TailwindCSS.

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

<!--
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>
.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;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.