Un mixin SASS pour automatiser la création de boîtes de type info-bulle

blog-mixin-info_bulle

Etant développeur front-end, environ 75% des maquettes graphiques que je dois intégrer comportent actuellement des composants à l'affichage similaire à une info-bulle.

Il y a encore quelques années je me contentais d'un générateur en ligne qui, moyennant quelques paramètres à renseigner dans un formulaire, me fournissait un code CSS à peu près prêt à l'emploi (il fallait souvent le réajuster un peu). Aujourd'hui j'utilise un mixin SASS que j'ai écrit, d'abord en m'inspirant du générateur en ligne dont j'ai fourni le lien ci-dessus (avec quelques soucis de crénelage au niveau des triangles), puis en repensant la quasi-totalité du code en exploitant les possibilités de transformation offertes par CSS3.

Vous trouverez ci-dessous un lien vers une démonstration manipulable de mon mixin SASS, une brève documentation d'utilisation et le code source à ré-exploiter dans vos projets.

Demo manipulable : un mixin SASS pour générer des boites de type info-bulle.

Les paramètres disponibles :

  • $box-border-width : épaisseur de la bordure de la boîte (en px). Valeur par défaut: 1px.
  • $box-border-style : aspect de la bordure de la boîte (avec les paramètres none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit). Valeur par défaut: solid.
  • $box-border-color : couleur de la bordure de la boîte. Valeur par défaut: #000.
  • $box-background-color : couleur de fond de la boîte. Valeur par défaut: #fff.
  • $arrow-position : position du chevron par rapport à la boite (avec les paramètres top|right|bottom|left). Valeur par défaut: top.
  • $arrow-size : largeur d'un côté du chevron (en px). Valeur par défaut: 20px.

Attention : veuillez noter que ce mixin fonctionne uniquement pour des chevrons de forme isocèle (dont les deux côtés qui forment un angle droit ont la même longueur).

Exemple d'utilisation :

Dans votre code HTML :

<div class="box paris">
  <h2>Paris</h2>
  <p>
  Netapsys Conseil<br />
  124 - 126, rue de Provence<br />
  75008 Paris<br />
  Tél : +33 (0)1 70 64 27 33<br />
  Fax : +33 (0)1 42 60 38 27
  </p>
</div>

Dans votre code SASS (en utilisant les paramètres par défaut) :

.box{
  width: 180px;
  margin: 20px;
  padding: 20px;

  @include make-arrow();
}

Dans votre code SASS (en surchargeant les paramètres par défaut) :

.box{
  width: 180px;
  margin: 20px;
  padding: 20px;

  @include make-arrow(
    $box-border-width: 2px,
    $box-border-style: dashed,
    $box-border-color: red,
    $box-background-color: #eee,    
    $arrow-position: bottom,
    $arrow-size: 30px);
}

Code source :

@mixin make-arrow(
  $box-border-width: 1px,
  $box-border-style: solid,
  $box-border-color: #000,
  $box-background-color: #fff,  
  $arrow-position: top,
  $arrow-size: 20px) {

  $side-width: $arrow-size + $box-border-width + ($box-border-width / 3);
  $arrow-calc: ($arrow-size / 2) + $box-border-width;

  position: relative;
  border-width: $box-border-width;
  border-style: $box-border-style;
  border-color: $box-border-color;  
  background-color: $box-background-color;
  
  &::after{
    position: absolute;
    z-index: 1;
    content: "";
    width: $arrow-size;
    height: $arrow-size;
    background-color: $box-background-color;
    border-width: 0;
    border-style: $box-border-style;
    border-color: $box-border-color;
    border-bottom: none 0;
    border-left: none 0;
    #{$arrow-position}: -($side-width / 2) - ($box-border-width / 2);
  }

  @if $arrow-position == top {
    &::after{
      left: calc(50% - #{$arrow-calc});
      border-width: $box-border-width;
      -webkit-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
      transform: rotate(-45deg);
    }
  }

  @if $arrow-position == right {
    &::after{
      top: calc(50% - #{$arrow-calc});
      border-width: $box-border-width;
      -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
      transform: rotate(45deg);
    }
  }

  @if $arrow-position == bottom {
    &::after{
      left: calc(50% - #{$arrow-calc});
      border-width: $box-border-width;
      -webkit-transform: rotate(-225deg);
      -ms-transform: rotate(-225deg);
      transform: rotate(-225deg);
    }
  }

  @if $arrow-position == left {
    &::after{
      top: calc(50% - #{$arrow-calc});
      border-width: $box-border-width;
      -webkit-transform: rotate(-135deg);
      -ms-transform: rotate(-135deg);
      transform: rotate(-135deg);
    }
  }
}

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Captcha *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.