-<!DOCTYPE html><html lang="fr" xmlns="http://www.w3.org/1999/xhtml"><head><link rel="stylesheet" href="charte-site.29c24d28.css"><script type="module" src="charte.7bb65ff6.js"></script><link rel="stylesheet" href="charte.1ece3905.css"><script type="module" src="charte.9cf52341.js"></script><script type="module" src="charte.9021d772.js"></script><script type="module" src="charte.de3722b8.js"></script><link rel="stylesheet" href="charte.c37781d9.css"><script type="module" src="charte.runtime.398c47ea.js"></script><script type="module" src="charte.5a2f67fd.js"></script><script type="module" src="charte.2f3b80cb.js"></script><script type="module" src="charte-site.bdfacd55.js"></script><script type="module" src="charte-site.17e31e79.js"></script><title>Macarte-utils</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><meta name="description" content="Maps"><meta name="keywords" content><link rel="icon" type="image/png" href="logo.fb0b1dda.png"><meta name="mobile-web-app-capable" content="yes"><meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="translucent-black"><link rel="apple-touch-icon" href="logo.fb0b1dda.png"><link rel="apple-touch-startup-image" href="logo.fb0b1dda.png"><meta name="format-detection" content="telephone=no"><meta name="msapplication-tap-highlight" content="no"></head><body data-example="charteSite" data-page="site" data-univers="carto"> <div data-role="content"> <h1>Charte IGN - site Macarte</h1> <p class="lead">Différents composant pour l'affichage dans Ma carte</p> <ul class="breadcrumb"> <li><a href="#">Accueil</a></li> <li><a href="#">mcutils</a></li> <li>Charte</li> </ul> <h2>Boutons et autres...</h2> <p> <label class="ol-ext-check ol-ext-checkbox"><input type="checkbox"><span></span>un checkbox</label> </p> <p> <label class="ol-ext-check ol-ext-radio"><input type="radio" name="radio" checked><span></span>un radio bouton</label> </p> <p> <label class="ol-ext-check ol-ext-radio"><input type="radio" name="radio"><span></span>un autre</label> </p> <p> <label class="ol-ext-toggle-switch">un switch<input type="checkbox" name="radio"><span></span>ok</label> </p> <p> <label class="ol-ext-check ol-ext-checkbox small"><input type="checkbox"><span></span>un petit checkbox</label> </p> <p> <select> <option>Option 1</option> <option>Option 2</option> <option>Option 3</option> <option>Option 4</option> <option>Option 5</option> </select> </p> <p> Symbole : <input class="symbol" type="text"> </p> <p> Couleur : <input class="color" type="text"> </p> <p> Taille : <input class="size" type="number"> </p> <p> Largeur : <input class="width" type="number"> </p> <p> Pointillés : <input class="dash"> </p> <p> Motifs : <input class="pattern"> </p> <p> <button type="button" class="button button-colored">un bouton</button> <button type="button" class="button button-ghost">un bouton ghost</button> <button type="button" class="button button-accent">un bouton accentué</button> </p><p> <button type="button" class="button button-colored" disabled>un bouton disabled</button> <button type="button" class="button button-ghost" disabled>ghost + disabled</button> <button type="button" class="button button-accent" disabled>accentué + disabled</button> </p> <p> <a href="#" class="button button-colored" draggable="false">un lien bouton</a> </p> <p> Ceci est <a href="#">un lien</a>. <br> Ceci est <a href="https://www.ign.fr/" target="_new">un lien externe</a>. <br> Ceci est <a class="article" href="#">un lien article</a>. <br> <a class="article button" href="#">un lien button</a>. </p> <p> <span class="accent">Un texte accentué...</span> </p> <h2>Dialogues</h2> <p> <button type="button" class="button button-ghost message">un message...</button> <button type="button" class="alert button button-ghost">une alerte...</button> <button type="button" class="button button-ghost progress">une patience...</button> <button type="button" class="button button-accent E404">404!</button> </p> <p> <button type="button" class="button button-ghost notification">Notification</button> <button type="button" class="button button-ghost flashMessage">FlahsMessage</button> </p> <h2>Champs</h2> <p> Un champ texte : <input type="text" placeholder="zone da saisie..."> </p> <p> Un champ invalid : <input type="text" class="invalid" placeholder="champ non valide..."> </p> <p class="error"> Une ligne en erreur... </p> <h2>Accordéons</h2> <ul class="accordion"> <li class="accordion-title"> <label>Accordéons</label> </li> <li> <input type="radio" name="accordion-1"> <label onclick="accordionCheck(this)">Lorem 1</label> <div> Eveniet a illum in, laborum amet quia nesciunt nisi odio ex. Impedit tenetur corrupti obcaecati, totam adipisci similique vel est alias placeat! </div> </li> <li> <input type="radio" name="accordion-1"> <label onclick="accordionCheck(this)">Lorem 2</label> <div> Eveniet a illum in, laborum amet quia nesciunt nisi odio ex. Impedit tenetur corrupti obcaecati, totam adipisci similique vel est alias placeat! </div> </li> </ul> <h2>Onglets</h2> <div data-role="tabs"> <div data-title> <div data-tab="1" class="selected"> Onglet 1 </div><div data-tab="2"> Onglet 2 </div><div data-tab="3"> Onglet 3 </div> </div> <div data-tab="1"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div> <div data-tab="2"> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </div> <div data-tab="3"> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> </div> <h2>Placeholder retractables</h2> <p> <input class="input-placeholder" type="text" placeholder="saisissez quelque chose"> </p> <p> <input class="input-placeholder" type="email" placeholder="Un email"> </p> <p> <textarea class="input-placeholder" placeholder="saisissez quelque chose"></textarea> </p> <p> Code: </p> <pre><code><!-- ajouter un placeholder retractable -->
0 commit comments