2017-05-24 20:24:00 +02:00
|
|
|
|
<page xmlns="http://projectmallard.org/1.0/"
|
|
|
|
|
type="topic" id="misc-css-classes" xml:lang="fr">
|
|
|
|
|
|
|
|
|
|
<info>
|
|
|
|
|
<revision docversion="0.1" date="2017-05-24" status="draft"/>
|
|
|
|
|
<credit type="author">
|
|
|
|
|
<name>Frédéric Péters</name>
|
|
|
|
|
<email>fpeters@entrouvert.com</email>
|
|
|
|
|
</credit>
|
|
|
|
|
|
|
|
|
|
</info>
|
|
|
|
|
|
|
|
|
|
<title>Classes CSS réutilisables</title>
|
|
|
|
|
|
|
|
|
|
<p>
|
|
|
|
|
En complément du système de grille CSS, les thèmes Publik fournissent une série
|
|
|
|
|
de classes CSS réutilisables.
|
|
|
|
|
</p>
|
|
|
|
|
|
2017-06-25 22:26:40 +02:00
|
|
|
|
<section>
|
|
|
|
|
<title>Classes « responsive »</title>
|
|
|
|
|
|
|
|
|
|
<table shade="rows">
|
|
|
|
|
<tr>
|
2020-03-11 17:40:02 +01:00
|
|
|
|
<td><p><code>pk-mobile-only</code></p></td>
|
2017-06-25 22:26:40 +02:00
|
|
|
|
<td><p>Limite l'affichage à la vue « mobile » du site, c'est-à-dire quand la
|
|
|
|
|
largeur de l'écran est faible, par défaut inférieure ou égale à 800 pixels.
|
|
|
|
|
</p></td>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr>
|
2020-03-11 17:40:02 +01:00
|
|
|
|
<td><p><code>pk-desktop-only</code></p></td>
|
2017-06-25 22:26:40 +02:00
|
|
|
|
<td><p>Limite l'affichage à la vue « ordinateur » du site, c'est-à-dire dans
|
|
|
|
|
la situation inverse, quand la largeur de l'écran est par défaut supérieure à
|
|
|
|
|
800 pixels.
|
|
|
|
|
</p></td>
|
|
|
|
|
</tr>
|
|
|
|
|
</table>
|
|
|
|
|
|
|
|
|
|
</section>
|
|
|
|
|
|
2017-05-24 20:24:00 +02:00
|
|
|
|
<section>
|
|
|
|
|
<title>Classes pour les cellules</title>
|
|
|
|
|
|
|
|
|
|
<table shade="rows">
|
2021-10-05 17:21:22 +02:00
|
|
|
|
<tr>
|
|
|
|
|
<td><p><code>pk-no-border</code></p></td>
|
|
|
|
|
<td><p>Retire la bordure de la cellule.</p></td>
|
|
|
|
|
</tr>
|
2018-01-03 15:10:20 +01:00
|
|
|
|
<tr>
|
|
|
|
|
<td><p><code>pk-transparent</code></p></td>
|
|
|
|
|
<td><p>Assure un fond transparent à la cellule.</p></td>
|
|
|
|
|
</tr>
|
2017-10-18 11:33:22 +02:00
|
|
|
|
<tr>
|
|
|
|
|
<td><p><code>foldable</code></p></td>
|
2018-06-05 11:51:55 +02:00
|
|
|
|
<td><p>Rend le contenu d'une cellule pliable.</p></td>
|
2017-10-18 11:33:22 +02:00
|
|
|
|
</tr>
|
|
|
|
|
<tr>
|
|
|
|
|
<td><p><code>folded</code></p></td>
|
2018-06-05 11:51:55 +02:00
|
|
|
|
<td><p>Associée à la classe foldable, définit le contenu
|
|
|
|
|
d'une cellule comme étant plié par défaut.</p></td>
|
2017-10-18 11:33:22 +02:00
|
|
|
|
</tr>
|
2018-10-22 16:21:24 +02:00
|
|
|
|
<tr>
|
|
|
|
|
<td><p><code>links-list</code></p></td>
|
|
|
|
|
<td><p>Permet de donner à une cellule de texte le style commun
|
|
|
|
|
« titre et liens », pour cela le texte doit contenir un titre
|
|
|
|
|
(<h2>) suivi d'une liste de liens (<ul>).</p></td>
|
|
|
|
|
</tr>
|
2020-06-24 18:56:15 +02:00
|
|
|
|
<tr>
|
|
|
|
|
<td><p><code>pk-information</code></p></td>
|
|
|
|
|
<td><p>Donne à la cellule le style de bloc d’information.</p></td>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr>
|
|
|
|
|
<td><p><code>pk-attention</code></p></td>
|
|
|
|
|
<td><p>Donne à la cellule le style de bloc d’attention.</p></td>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr>
|
|
|
|
|
<td><p><code>pk-error</code></p></td>
|
|
|
|
|
<td><p>Donne à la cellule le style de bloc d’erreur.</p></td>
|
|
|
|
|
</tr>
|
2022-01-22 12:16:43 +01:00
|
|
|
|
<tr>
|
|
|
|
|
<td><p><code>pk-success</code></p></td>
|
|
|
|
|
<td><p>Donne à la cellule le style de bloc de réussite.</p></td>
|
|
|
|
|
</tr>
|
2022-10-19 11:53:10 +02:00
|
|
|
|
<tr>
|
|
|
|
|
<td><p><code>pk-cell-bold-title</code></p></td>
|
2022-10-19 12:48:00 +02:00
|
|
|
|
<td><p>Met en gras le titre d’une cellule.</p></td>
|
2022-10-19 11:53:10 +02:00
|
|
|
|
</tr>
|
2022-10-19 11:54:24 +02:00
|
|
|
|
<tr>
|
|
|
|
|
<td><p><code>pk-cell-center-title</code></p></td>
|
2022-10-19 12:48:00 +02:00
|
|
|
|
<td><p>Place au centre le titre d’une cellule.</p></td>
|
2022-10-19 11:54:24 +02:00
|
|
|
|
</tr>
|
2017-05-24 20:24:00 +02:00
|
|
|
|
</table>
|
|
|
|
|
|
|
|
|
|
</section>
|
|
|
|
|
|
2017-09-11 10:58:32 +02:00
|
|
|
|
<section>
|
|
|
|
|
<title>Classes pour les champs des formulaires</title>
|
|
|
|
|
<table shade="rows">
|
2019-05-06 15:39:50 +02:00
|
|
|
|
<tr>
|
2020-03-11 17:40:02 +01:00
|
|
|
|
<td><p><code>pk-budget-table</code></p></td>
|
2019-05-06 15:39:50 +02:00
|
|
|
|
<td><p>Met en forme un champ de type « tableau » pour la saisie
|
|
|
|
|
d'informations budgétaires (libellés alignés à gauche, utilisation de toute
|
|
|
|
|
la largeur, colonne de saisie des nombres poussée sur la droite).</p></td>
|
|
|
|
|
</tr>
|
2022-08-09 08:46:51 +02:00
|
|
|
|
<tr>
|
|
|
|
|
<td><p><code>pk-compact-file</code></p></td>
|
|
|
|
|
<td><p>Dispose les champs de type « Fichier » dans une version compacte,
|
|
|
|
|
moins haute.</p></td>
|
|
|
|
|
</tr>
|
2017-09-11 10:58:32 +02:00
|
|
|
|
<tr>
|
2020-03-11 17:40:02 +01:00
|
|
|
|
<td><p><code>pk-hidden</code></p></td>
|
2017-09-11 10:58:32 +02:00
|
|
|
|
<td><p>Cache le champ (applicable uniquement aux champs de type « Liste »).</p></td>
|
|
|
|
|
</tr>
|
2020-06-19 10:15:20 +02:00
|
|
|
|
<tr>
|
|
|
|
|
<td><p><code>pk-important</code></p></td>
|
|
|
|
|
<td><p>Marque le champ comme étant particulièrement important, le rendu sera
|
|
|
|
|
généralement un libellé mis en gras.</p></td>
|
|
|
|
|
</tr>
|
2020-06-24 18:56:15 +02:00
|
|
|
|
<tr>
|
|
|
|
|
<td><p><code>pk-information</code></p></td>
|
|
|
|
|
<td><p>Marque le champ commentaire avec le style de bloc d’information.</p></td>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr>
|
|
|
|
|
<td><p><code>pk-attention</code></p></td>
|
|
|
|
|
<td><p>Marque le champ commentaire avec le style de bloc d’attention.</p></td>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr>
|
|
|
|
|
<td><p><code>pk-error</code></p></td>
|
|
|
|
|
<td><p>Marque le champ commentaire avec le style de bloc d’erreur.</p></td>
|
|
|
|
|
</tr>
|
2020-12-18 15:47:56 +01:00
|
|
|
|
<tr>
|
|
|
|
|
<td><p><code>pk-blocks-zebra</code></p></td>
|
|
|
|
|
<td><p>Alterne les couleurs de fond des lignes des blocs de champs.</p></td>
|
|
|
|
|
</tr>
|
2017-09-11 10:58:32 +02:00
|
|
|
|
</table>
|
|
|
|
|
</section>
|
|
|
|
|
|
2018-01-03 14:40:36 +01:00
|
|
|
|
<section>
|
|
|
|
|
<title>Classes pour des éléments de texte</title>
|
|
|
|
|
<table>
|
|
|
|
|
<tr>
|
|
|
|
|
<td><p><code>pk-button</code></p></td>
|
|
|
|
|
<td><p>Applique une apparence de bouton à un lien.</p></td>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr>
|
|
|
|
|
<td><p><code>pk-big-button</code></p></td>
|
|
|
|
|
<td><p>Applique une apparence de bouton de grande taille à un lien.</p></td>
|
|
|
|
|
</tr>
|
|
|
|
|
</table>
|
2020-03-11 17:33:50 +01:00
|
|
|
|
|
|
|
|
|
<note><p>Les classes <code>pk-button</code> et <code>pk-big-button</code>
|
|
|
|
|
peuvent également être appliquées aux cellules de type « Lien ».</p></note>
|
2018-01-03 14:40:36 +01:00
|
|
|
|
</section>
|
|
|
|
|
|
2018-01-23 12:17:30 +01:00
|
|
|
|
<section>
|
|
|
|
|
<title>Classes pour les tableaux</title>
|
|
|
|
|
<table shade="rows">
|
|
|
|
|
<tr>
|
|
|
|
|
<td><p><code>pk-data-table</code></p></td>
|
|
|
|
|
<td><p>Applique un style commun de présentation au tableau, obligatoire
|
2022-09-13 11:03:57 +02:00
|
|
|
|
pour que les autres styles de tableau prennent effet. Cela concerne les
|
|
|
|
|
balises <table>, la classe n’est pas nécessaire pour l’affichage de
|
|
|
|
|
fiches sous forme de tableau.
|
|
|
|
|
</p></td>
|
2018-01-23 12:17:30 +01:00
|
|
|
|
</tr>
|
|
|
|
|
<tr>
|
|
|
|
|
<td><p><code>pk-table-headers</code></p></td>
|
|
|
|
|
<td><p>Applique aux entêtes de colonne un style distinctif, par défaut
|
|
|
|
|
proche de celui des titres de cellule.</p></td>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr>
|
|
|
|
|
<td><p><code>pk-table-borders</code></p></td>
|
|
|
|
|
<td><p>Applique des bordures de tous les côtés des cellules du
|
|
|
|
|
tableau.</p></td>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr>
|
|
|
|
|
<td><p><code>pk-table-center</code></p></td>
|
|
|
|
|
<td><p>Centre par défaut le contenu de toutes les cellules.</p></td>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr>
|
|
|
|
|
<td><p><code>pk-table-zebra</code></p></td>
|
|
|
|
|
<td><p>Alterne les couleurs de fond des lignes.</p></td>
|
|
|
|
|
</tr>
|
2020-09-22 16:40:11 +02:00
|
|
|
|
<tr>
|
|
|
|
|
<td><p><code>pk-table-wrapper</code></p></td>
|
2020-10-02 15:39:32 +02:00
|
|
|
|
<td><p>Permet aux usagers de mobiles de faire défiler le tableau
|
|
|
|
|
horizontalement. Cette classe ne s’applique pas à la balise
|
|
|
|
|
<table> elle-même, elle doit se poser sur une balise
|
|
|
|
|
<div> englobant le tableau.</p></td>
|
2020-09-22 16:40:11 +02:00
|
|
|
|
</tr>
|
2018-01-23 12:17:30 +01:00
|
|
|
|
</table>
|
|
|
|
|
</section>
|
|
|
|
|
|
2017-05-24 20:24:00 +02:00
|
|
|
|
</page>
|