Modal

Basic examples

  • Default
  • Hygiene
  • Sleep
  • Activity
  • Food
Show code
<button type="button" class="button -default" data-trigger="modalAbs">Ajouter un contrat</button> <div class="modalContainer" data-modal="modalAbs"> <div class="modalContainer__overlayer" data-close="modalAbs"> <button><span class="icon-close "><span class="path1"></span><span class="path2"></span><span class="path3"></span></span></button> </div> <div class="modalContainer__modal whiteContainer"> <div class="whiteContainer__container"> <div class="row"> <div class="row__left"> <div class="big-title"> <h1>Historique</h1> <span class="has-text-blue-medium">Juliette Kindermans</span> </div> </div> <div class="row__right"> <button><span class="icon-trash "><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span><span class="path5"></span><span class="path6"></span><span class="path7"></span></span></button> </div> </div> <div class="field"> <label>Comptabiliser un repas</label> <p class="has-text-red-medium">Dans le cas où il est préparé ou commandé.</p> <div class="buttonsGroup"> <div class="button"><input type="radio" name="1" value="Oui"><span>Oui</span></div> <div class="button"><input type="radio" name="1" value="Non"><span>Non</span></div> </div> </div> <div class="field -select "> <label for="select1">Raison de l'absence</label> <select id="select1"> <option value="" disabled="" selected="">Sélectionnez une raison</option> <option value="Rendez-vous">Rendez-vous</option> <option value="Malade">Malade</option> <option value="Autre">Autre</option> </select> </div> <div class="field -file "> <label for="input13">Ajouter une pièce jointe</label> <input type="file" placeholder="Ajouter une pièce jointe" id="input13" value=""> <div class="field"> Ajouter un fichier <span class="field__icon"> <span class="icon-edit "><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span><span class="path5"></span><span class="path6"></span><span class="path7"></span><span class="path8"></span><span class="path9"></span><span class="path10"></span><span class="path11"></span><span class="path12"></span><span class="path13"></span><span class="path14"></span><span class="path15"></span></span> </span> </div> </div> </div> </div> </div>
<div class="modalContainer -opened" data-modal="modalHygiene"> <div class="modalContainer__overlayer" data-close="modalHygiene"> <button><span class="icon-close "><span class="path1"></span><span class="path2"></span><span class="path3"></span></span></button> </div> <div class="modalContainer__modal whiteContainer"> <div class="cardToggle -hygiene -active"> <div class="cardToggle__header"> <div class="header__title"> Hygiène </div> <div class="header__buttons"> <button><span class="icon-trash "><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span><span class="path5"></span><span class="path6"></span><span class="path7"></span></span></button> </div> </div> <div class="cardToggle__content" data-content-card-toggle="hygiene"> <div class="field"> <label for="input5">Heure</label> <span class="field__icon"> <input type="text" placeholder="hh:mm" id="input5" value=""> <span class="icon-clock-blue "><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span><span class="path5"></span><span class="path6"></span><span class="path7"></span><span class="path8"></span></span> </span> </div> <div class="rowChoices field"> <div class="cardChoice" data-trigger-choice="poopChoice"> <input type="radio" value="Caca" name="hygiene"> <span class="icon-poop -bgLess"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span><span class="path5"></span></span> <p class="cardChoice__name">Caca</p> </div> <div class="cardChoice"> <input type="radio" value="Pipi" name="hygiene"> <span class="icon-pee -bgLess"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span></span> <p class="cardChoice__name">Pipi</p> </div> <div class="cardChoice" data-trigger-choice="careChoice"> <input type="radio" value="Soin" name="hygiene"> <span class="icon-care -bgLess"><span class="path1"></span><span class="path2"></span><span class="path3"></span></span> <p class="cardChoice__name">Soin</p> </div> <div class="cardChoice"> <input type="radio" value="Change" name="hygiene"> <span class="icon-change -bgLess"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span><span class="path5"></span></span> <p class="cardChoice__name">Change</p> </div> </div> <div class="field" data-choice="poopChoice"> <div class="field"> <div class="rowChoices"> <div class="cardChoice"> <input type="radio" value="Dur" name="shape"> <span class="icon-hard -bgLess"><span class="path1"></span><span class="path2"></span></span> <p class="cardChoice__name">Dur</p> </div> <div class="cardChoice"> <input type="radio" value="normal" name="shape"> <span class="icon-normal -bgLess"><span class="path1"></span><span class="path2"></span></span> <p class="cardChoice__name">normal</p> </div> <div class="cardChoice"> <input type="radio" value="molle" name="shape"> <span class="icon-soft -bgLess"><span class="path1"></span><span class="path2"></span></span> <p class="cardChoice__name">molle</p> </div> <div class="cardChoice"> <input type="radio" value="liquide" name="shape"> <span class="icon-liquid -bgLess"><span class="path1"></span><span class="path2"></span></span> <p class="cardChoice__name">liquide</p> </div> </div> </div> </div> <div class="field" data-choice="careChoice"> <div class="field"> <div class="rowChoices"> <div class="cardChoice"> <input type="radio" value="Nez" name="care"> <span class="icon-nose -bgLess"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span><span class="path5"></span></span> <p class="cardChoice__name">Nez</p> </div> <div class="cardChoice"> <input type="radio" value="Fièvre" name="care"> <span class="icon-fever -bgLess"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span><span class="path5"></span><span class="path6"></span><span class="path7"></span></span> <p class="cardChoice__name">Fièvre</p> </div> <div class="cardChoice"> <input type="radio" value="Medics" name="care"> <span class="icon-medicines -bgLess"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span><span class="path5"></span><span class="path6"></span><span class="path7"></span><span class="path8"></span><span class="path9"></span></span> <p class="cardChoice__name">Medics.</p> </div> <div class="cardChoice"> <input type="radio" value="Autre" name="care"> <span class="icon-other -bgLess"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span></span> <p class="cardChoice__name">Autre</p> </div> </div> </div> </div> <div class="field"> <label for="input10">Commentaire</label> <textarea id="input10" row="10"></textarea> </div> <button class="button -fullWidth">Ajouter</button> </div> </div> </div> </div>
<div class="modalContainer -opened" data-modal="modalSleep"> <div class="modalContainer__overlayer" data-close="modalSleep"> <button><span class="icon-close "><span class="path1"></span><span class="path2"></span><span class="path3"></span></span></button> </div> <div class="modalContainer__modal whiteContainer"> <div class="cardToggle -nap -active"> <div class="cardToggle__header"> <div class="header__title"> Sieste </div> <div class="header__buttons"> <button><span class="icon-trash "><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span><span class="path5"></span><span class="path6"></span><span class="path7"></span></span></button> </div> </div> <div class="cardToggle__content" data-content-card-toggle="sleep"> <div class="field "> <label for="input47">Début</label> <span class="field__icon"> <input type="time" placeholder="hh:mm" id="input47" value=""> <span class="icon-clock-blue "><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span><span class="path5"></span><span class="path6"></span><span class="path7"></span><span class="path8"></span></span> </span> </div> <div class="field "> <label for="input48">Fin</label> <span class="field__icon"> <input type="time" placeholder="hh:mm" id="input48" value=""> <span class="icon-clock-blue "><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span><span class="path5"></span><span class="path6"></span><span class="path7"></span><span class="path8"></span></span> </span> </div> <button class="button has-background-blue-medium-4 -fullWidth">Ajouter</button> </div> </div> </div> </div>
<div class="modalContainer -opened" data-modal="modalActivity"> <div class="modalContainer__overlayer" data-close="modalActivity"> <button><span class="icon-close "><span class="path1"></span><span class="path2"></span><span class="path3"></span></span></button> </div> <div class="modalContainer__modal whiteContainer"> <div class="cardToggle -activity -active"> <div class="cardToggle__header"> <div class="header__title"> Activité </div> <div class="header__buttons"> <button><span class="icon-trash "><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span><span class="path5"></span><span class="path6"></span><span class="path7"></span></span></button> </div> </div> <div class="cardToggle__content" data-content-card-toggle="activity"> <div class="field "> <label for="input125">Heure</label> <span class="field__icon"> <input type="time" placeholder="hh:mm" id="input125" value=""> <span class="icon-clock-blue "><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span><span class="path5"></span><span class="path6"></span><span class="path7"></span><span class="path8"></span></span> </span> </div> <div class="field"> <label for="input10">Commentaire</label> <textarea id="input10" row="10"></textarea> </div> <div class="field rowChoices"> <div class="cardChoice"> <input type="radio" value="Désinteressé" name="activity"> <span class="icon-not-interested -bgLess"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span><span class="path5"></span></span> <p class="cardChoice__name">Désinteressé</p> </div> <div class="cardChoice"> <input type="radio" value="Neutre" name="activity"> <span class="icon-interested -bgLess"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span><span class="path5"></span></span> <p class="cardChoice__name">Neutre</p> </div> <div class="cardChoice"> <input type="radio" value="Interessé" name="activity"> <span class="icon-very-interested -bgLess"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span><span class="path5"></span></span> <p class="cardChoice__name">Interessé</p> </div> </div> <button class="button has-background-blue-medium-4 -fullWidth">Ajouter</button> </div> </div> </div> </div>
<div class="modalContainer -opened" data-modal="modalFood"> <div class="modalContainer__overlayer" data-close="modalFood"> <button><span class="icon-close "><span class="path1"></span><span class="path2"></span><span class="path3"></span></span></button> </div> <div class="modalContainer__modal whiteContainer"> <div class="cardToggle -food -active"> <div class="cardToggle__header"> <div class="header__title"> Repas </div> <div class="header__buttons"> <button><span class="icon-trash "><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span><span class="path5"></span><span class="path6"></span><span class="path7"></span></span></button> </div> </div> <div class="cardToggle__content" data-content-card-toggle="hygiene"> <div class="field "> <label for="input1458">Heure</label> <span class="field__icon"> <input type="time" placeholder="hh:mm" id="input1458" value=""> <span class="icon-clock-blue "><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span><span class="path5"></span><span class="path6"></span><span class="path7"></span><span class="path8"></span></span> </span> </div> <div class="field rowChoices"> <div class="cardChoice" data-trigger-choice="bibberChoice"> <input type="radio" value="Biberon" name="food"> <span class="icon-bibber -bgLess"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span><span class="path5"></span><span class="path6"></span></span> <p class="cardChoice__name">Biberon</p> </div> <div class="cardChoice" data-trigger-choice="mealChoice"> <input type="radio" value="Plat du jour" name="food"> <span class="icon-meal -bgLess"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span><span class="path5"></span></span> <p class="cardChoice__name">Plat du jour</p> </div> <div class="cardChoice" data-trigger-choice="extraChoice"> <input type="radio" value="Extra" name="food"> <span class="icon-extra-food -bgLess"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span><span class="path5"></span><span class="path6"></span></span> <p class="cardChoice__name">Extra</p> </div> </div> <div class="field" data-choice="bibberChoice"> <div class="field"> <div class="rowChoices"> <div class="cardChoice"> <input type="radio" value="Eau" name="foodDrink"> <span class="icon-water -bgLess"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span><span class="path5"></span><span class="path6"></span></span> <p class="cardChoice__name">Eau</p> </div> <div class="cardChoice"> <input type="radio" value="Lait" name="foodDrink"> <span class="icon-milk -bgLess"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span><span class="path5"></span><span class="path6"></span></span> <p class="cardChoice__name">Lait</p> </div> <div class="cardChoice"> <input type="radio" value="Autre" name="foodDrink"> <span class="icon-other -bgLess"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span></span> <p class="cardChoice__name">Autre</p> </div> </div> </div> <div class="field"> <label for="input10">Quantité</label> <input type="text" placeholder="ml" id="input10"> </div> </div> <div class="field" data-choice="mealChoice"> <div class="field"> <label>Entrée</label> <div class="rowChoices"> <div class="cardChoice"> <input type="radio" value="Pas bien" name="apetizerMood"> <span class="icon-not-interested -bgLess"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span><span class="path5"></span></span> <p class="cardChoice__name">Pas bien</p> </div> <div class="cardChoice"> <input type="radio" value="Bien" name="apetizerMood"> <span class="icon-interested -bgLess"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span><span class="path5"></span></span> <p class="cardChoice__name">Bien</p> </div> <div class="cardChoice"> <input type="radio" value="Autre" name="apetizerMood"> <span class="icon-very-interested -bgLess"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span><span class="path5"></span></span> <p class="cardChoice__name">Bien</p> </div> </div> </div> <div class="field"> <label>Plat</label> <div class="rowChoices"> <div class="cardChoice"> <input type="radio" value="Pas bien" name="MealMood"> <span class="icon-not-interested -bgLess"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span><span class="path5"></span></span> <p class="cardChoice__name">Pas bien</p> </div> <div class="cardChoice"> <input type="radio" value="Bien" name="MealMood"> <span class="icon-interested -bgLess"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span><span class="path5"></span></span> <p class="cardChoice__name">Bien</p> </div> <div class="cardChoice"> <input type="radio" value="Autre" name="MealMood"> <span class="icon-very-interested -bgLess"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span><span class="path5"></span></span> <p class="cardChoice__name">Bien</p> </div> </div> </div> <div class="field"> <label>Dessert</label> <div class="rowChoices"> <div class="cardChoice"> <input type="radio" value="Pas bien" name="dessertMood"> <span class="icon-not-interested -bgLess"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span><span class="path5"></span></span> <p class="cardChoice__name">Pas bien</p> </div> <div class="cardChoice"> <input type="radio" value="Bien" name="dessertMood"> <span class="icon-interested -bgLess"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span><span class="path5"></span></span> <p class="cardChoice__name">Bien</p> </div> <div class="cardChoice"> <input type="radio" value="Autre" name="dessertMood"> <span class="icon-very-interested -bgLess"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span><span class="path5"></span></span> <p class="cardChoice__name">Bien</p> </div> </div> </div> </div> <div class="field" data-choice="extraChoice"> <div class="field"> <label for="input157">Type</label> <input type="text" placeholder="Sirop, ..." id="input157"> </div> </div> <button class="button -fullWidth">Ajouter</button> </div> </div> </div> </div>

Historique

Juliette Kindermans

Dans le cas où il est préparé ou commandé.

Oui
Non

Dans le cas où il est préparé ou commandé.

Oui
Non

Dans le cas où il est préparé ou commandé.

Oui
Non

Dans le cas où il est préparé ou commandé.

Oui
Non

Dans le cas où il est préparé ou commandé.

Oui
Non

Dans le cas où il est préparé ou commandé.

Oui
Non

Dans le cas où il est préparé ou commandé.

Oui
Non
Ajouter un fichier
Hygiène

Caca

Pipi

Soin

Change

Dur

normal

molle

liquide

Nez

Fièvre

Medics.

Autre

Sieste
Activité

Désinteressé

Neutre

Interessé

Repas

Biberon

Plat du jour

Extra

Eau

Lait

Autre

Pas bien

Bien

Bien

Pas bien

Bien

Bien

Pas bien

Bien

Bien