help: apply typography fixes (#38280)
gitea/publik-base-theme/pipeline/head This commit looks good
Details
gitea/publik-base-theme/pipeline/head This commit looks good
Details
This commit is contained in:
parent
91e632fa0d
commit
8915e74e39
|
|
@ -23,14 +23,14 @@ de classes CSS réutilisables.
|
|||
<table shade="rows">
|
||||
<tr>
|
||||
<td><p><code>pk-mobile-only</code></p></td>
|
||||
<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.
|
||||
<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>
|
||||
<td><p><code>pk-desktop-only</code></p></td>
|
||||
<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 à
|
||||
<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>
|
||||
|
|
@ -52,18 +52,18 @@ de classes CSS réutilisables.
|
|||
</tr>
|
||||
<tr>
|
||||
<td><p><code>foldable</code></p></td>
|
||||
<td><p>Rend le contenu d'une cellule pliable.</p></td>
|
||||
<td><p>Rend le contenu d’une cellule pliable.</p></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><p><code>folded</code></p></td>
|
||||
<td><p>Associée à la classe foldable, définit le contenu
|
||||
d'une cellule comme étant plié par défaut.</p></td>
|
||||
d’une cellule comme étant plié par défaut.</p></td>
|
||||
</tr>
|
||||
<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>
|
||||
(<h2>) suivi d’une liste de liens (<ul>).</p></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><p><code>pk-information</code></p></td>
|
||||
|
|
@ -99,7 +99,7 @@ de classes CSS réutilisables.
|
|||
<tr>
|
||||
<td><p><code>pk-budget-table</code></p></td>
|
||||
<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
|
||||
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>
|
||||
<tr>
|
||||
|
|
|
|||
|
|
@ -34,21 +34,21 @@ et 12.
|
|||
<p>
|
||||
Sur des écrans de petite dimension, la grille est automatiquement adaptée pour
|
||||
ne pas rétrécir outre mesure les éléments, la largeur de ceux-ci est doublée,
|
||||
par exemple un élément configuré pour une largeur d'un quart d'écran prendra
|
||||
non pas un quart d'écran mais un demi écran.
|
||||
par exemple un élément configuré pour une largeur d’un quart d’écran prendra
|
||||
non pas un quart d’écran mais un demi écran.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Sur les très petits écrans, la mécanique de grille est totalement annulée et
|
||||
tous les éléments de grille sont affichés sur toute la largeur disponible.
|
||||
Il est cependant possible d'empêcher ce comportement en accompagnant la classe
|
||||
Il est cependant possible d’empêcher ce comportement en accompagnant la classe
|
||||
<code>grid-x-y</code> de la classe <code>never-alone</code>.
|
||||
</p>
|
||||
</note>
|
||||
|
||||
<p>
|
||||
Pour forcer un retour en début de ligne, ou pour assurer un rendu correct
|
||||
quand les éléments d'une ligne n'ont pas tous la même hauteur, une classe
|
||||
quand les éléments d’une ligne n’ont pas tous la même hauteur, une classe
|
||||
supplémentaire, <code>newline</code> peut être posée sur le premier
|
||||
élément de la nouvelle ligne.
|
||||
</p>
|
||||
|
|
|
|||
|
|
@ -61,7 +61,7 @@ paramètre, la deuxième sa description et la troisième la valeur par défaut.
|
|||
</tr>
|
||||
<tr>
|
||||
<td><p><code>$font-line-height</code></p></td>
|
||||
<td><p>Hauteur de l'interlignage du corps de texte</p></td>
|
||||
<td><p>Hauteur de l’interlignage du corps de texte</p></td>
|
||||
<td><p><var>1.4</var></p></td>
|
||||
</tr>
|
||||
<tr>
|
||||
|
|
@ -71,23 +71,23 @@ paramètre, la deuxième sa description et la troisième la valeur par défaut.
|
|||
</tr>
|
||||
<tr>
|
||||
<td><p><code>$header-background-color</code></p></td>
|
||||
<td><p>Couleur de fond de l'entête de la page</p></td>
|
||||
<td><p>Couleur de fond de l’entête de la page</p></td>
|
||||
<td><p><var>null</var></p></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><p><code>$header-full-width-background</code></p></td>
|
||||
<td><p>Extension de la couleur de fond de l'entête de la page à la largeur de l'écran
|
||||
<td><p>Extension de la couleur de fond de l’entête de la page à la largeur de l’écran
|
||||
(plutôt que la largeur du contenu)</p></td>
|
||||
<td><p><var>true</var></p></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><p><code>$header-logo-size</code></p></td>
|
||||
<td><p>Taille du logo de l'entête. 2 valeurs sont attendues : largeur et hauteur (ex: <code>150px 75px</code>).</p></td>
|
||||
<td><p>Taille du logo de l’entête. 2 valeurs sont attendues : largeur et hauteur (ex: <code>150px 75px</code>).</p></td>
|
||||
<td><p><var>null</var></p></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><p><code>$show-site-title</code></p></td>
|
||||
<td><p>Afficher le titre du site. Le titre est masqué par défaut lorsqu'un logo est défini. <code>true</code> ou <code>false</code></p></td>
|
||||
<td><p>Afficher le titre du site. Le titre est masqué par défaut lorsqu’un logo est défini. <code>true</code> ou <code>false</code></p></td>
|
||||
<td><p><var>null</var></p></td>
|
||||
</tr>
|
||||
<tr>
|
||||
|
|
@ -97,7 +97,7 @@ paramètre, la deuxième sa description et la troisième la valeur par défaut.
|
|||
</tr>
|
||||
<tr>
|
||||
<td><p><code>$footer-full-width-background</code></p></td>
|
||||
<td><p>Extension de la couleur de fond du pied de page à la largeur de l'écran
|
||||
<td><p>Extension de la couleur de fond du pied de page à la largeur de l’écran
|
||||
(plutôt que la largeur du contenu).</p></td>
|
||||
<td><p><var>true</var></p></td>
|
||||
</tr>
|
||||
|
|
@ -113,7 +113,7 @@ paramètre, la deuxième sa description et la troisième la valeur par défaut.
|
|||
</tr>
|
||||
<tr>
|
||||
<td><p><code>$border-radius</code></p></td>
|
||||
<td><p>Taille de l'arrondi à appliquer à différents éléments</p></td>
|
||||
<td><p>Taille de l’arrondi à appliquer à différents éléments</p></td>
|
||||
<td><p><var>null</var></p></td>
|
||||
</tr>
|
||||
<tr>
|
||||
|
|
@ -153,7 +153,7 @@ paramètre, la deuxième sa description et la troisième la valeur par défaut.
|
|||
</tr>
|
||||
<tr>
|
||||
<td><p><code>$zebra-color</code></p></td>
|
||||
<td><p>Couleur d'arrière-plan par défaut des zebras</p></td>
|
||||
<td><p>Couleur d’arrière-plan par défaut des zebras</p></td>
|
||||
<td><p><var>hsla(0, 0%, 0%, 0.06)</var></p></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
|
@ -210,7 +210,7 @@ paramètre, la deuxième sa description et la troisième la valeur par défaut.
|
|||
</tr>
|
||||
<tr>
|
||||
<td><p><code>$title-border-radius</code></p></td>
|
||||
<td><p>Taille de l'arrondi à appliquer aux titres</p></td>
|
||||
<td><p>Taille de l’arrondi à appliquer aux titres</p></td>
|
||||
<td><p><var>$border-radius</var></p></td>
|
||||
</tr>
|
||||
<tr>
|
||||
|
|
@ -225,7 +225,7 @@ paramètre, la deuxième sa description et la troisième la valeur par défaut.
|
|||
<title>Navigation</title>
|
||||
|
||||
<p>
|
||||
Ces paramètres contrôlent l'apparence de la barre de navigation.
|
||||
Ces paramètres contrôlent l’apparence de la barre de navigation.
|
||||
</p>
|
||||
|
||||
<table shade="rows">
|
||||
|
|
@ -236,7 +236,7 @@ paramètre, la deuxième sa description et la troisième la valeur par défaut.
|
|||
</tr>
|
||||
<tr>
|
||||
<td><p><code>$nav-full-width-background</code></p></td>
|
||||
<td><p>Extension de la couleur de fond de la navigation à la largeur de l'écran
|
||||
<td><p>Extension de la couleur de fond de la navigation à la largeur de l’écran
|
||||
(plutôt que la largeur du contenu).</p></td>
|
||||
<td><p><var>false</var></p></td>
|
||||
</tr>
|
||||
|
|
@ -258,7 +258,7 @@ paramètre, la deuxième sa description et la troisième la valeur par défaut.
|
|||
</tr>
|
||||
<tr>
|
||||
<td><p><code>$nav-border-radius</code></p></td>
|
||||
<td><p>Taille de l'arrondi de la navigation </p></td>
|
||||
<td><p>Taille de l’arrondi de la navigation </p></td>
|
||||
<td><p><var>$border-radius</var></p></td>
|
||||
</tr>
|
||||
<tr>
|
||||
|
|
@ -288,12 +288,12 @@ paramètre, la deuxième sa description et la troisième la valeur par défaut.
|
|||
</tr>
|
||||
<tr>
|
||||
<td><p><code>$nav-item-hover-background</code></p></td>
|
||||
<td><p>Couleur de fond d'un élément au survol</p></td>
|
||||
<td><p>Couleur de fond d’un élément au survol</p></td>
|
||||
<td><p><var>$nav-item-selected-background</var></p></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><p><code>$nav-item-hover-color</code></p></td>
|
||||
<td><p>Couleur du texte d'un élément au survol</p></td>
|
||||
<td><p>Couleur du texte d’un élément au survol</p></td>
|
||||
<td><p><var>$nav-item-selected-color</var></p></td>
|
||||
</tr>
|
||||
<tr>
|
||||
|
|
@ -333,29 +333,29 @@ paramètre, la deuxième sa description et la troisième la valeur par défaut.
|
|||
</tr>
|
||||
<tr>
|
||||
<td><p><code>$nav-item-selected-mode</code></p></td>
|
||||
<td><p>Mode d'affichage du menu sélectionné, soit background pour en changer
|
||||
<td><p>Mode d’affichage du menu sélectionné, soit background pour en changer
|
||||
la couleur du fond, soit bottom-border pour ajouter une bordure sous lui.</p></td>
|
||||
<td><p><var>background</var></p></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><p><code>$nav-item-selected-border</code></p></td>
|
||||
<td><p>Style de la bordure de l'élément sélectionné.</p></td>
|
||||
<td><p>Style de la bordure de l’élément sélectionné.</p></td>
|
||||
<td><p><var>2px solid $nav-active-color</var></p></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><p><code>$nav-item-hover-border</code></p></td>
|
||||
<td><p>Style de la bordure de l'élément survolé.</p></td>
|
||||
<td><p>Style de la bordure de l’élément survolé.</p></td>
|
||||
<td><p><var>$nav-item-selected-border</var></p></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><p><code>$nav-after-image</code></p></td>
|
||||
<td><p>Ajout sous la navigation d'un bandeau avec l'image associée à la page.
|
||||
<td><p>Ajout sous la navigation d’un bandeau avec l’image associée à la page.
|
||||
(ne fonctionne pas avec Internet Explorer)</p></td>
|
||||
<td><p><var>true</var></p></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><p><code>$nav-after-image-height</code></p></td>
|
||||
<td><p>Hauteur de l'éventuel bandeau image.</p></td>
|
||||
<td><p>Hauteur de l’éventuel bandeau image.</p></td>
|
||||
<td><p><var>300px</var></p></td>
|
||||
</tr>
|
||||
<tr>
|
||||
|
|
@ -363,7 +363,7 @@ paramètre, la deuxième sa description et la troisième la valeur par défaut.
|
|||
<td><p>Rendu de la navigation en mode mobile, <var>none</var> pour conserver
|
||||
le rendu « desktop », <var>hamburger</var> pour placer la navigation dans un
|
||||
menu « hamburger », <var>bottom-bar</var> pour placer la navigation dans une
|
||||
barre en bas d'écran, <var>hidden</var> pour cacher la navigation.</p>
|
||||
barre en bas d’écran, <var>hidden</var> pour cacher la navigation.</p>
|
||||
<p>Les paramètres supplémentaires pour le rendu <var>bottom-bar</var> sont
|
||||
détaillés dans la section <link xref="#pwa">application mobile</link>.</p>
|
||||
</td>
|
||||
|
|
@ -376,7 +376,7 @@ paramètre, la deuxième sa description et la troisième la valeur par défaut.
|
|||
<title>Mode <em>responsive</em></title>
|
||||
|
||||
<p>
|
||||
Ces paramètres contrôlent l'apparence de différents éléments quand la largeur
|
||||
Ces paramètres contrôlent l’apparence de différents éléments quand la largeur
|
||||
de la fenêtre est sous une certaine taille.
|
||||
</p>
|
||||
|
||||
|
|
@ -404,7 +404,7 @@ paramètre, la deuxième sa description et la troisième la valeur par défaut.
|
|||
</tr>
|
||||
<tr>
|
||||
<td><p><code>$responsive-menu-mask</code></p></td>
|
||||
<td><p>Affichage d'un masque lorsque le menu mobile est déplié. Valable
|
||||
<td><p>Affichage d’un masque lorsque le menu mobile est déplié. Valable
|
||||
uniquement si <code>$responsive-menu=left-to-right</code></p></td>
|
||||
<td><p><var>false</var></p></td>
|
||||
</tr>
|
||||
|
|
@ -425,7 +425,7 @@ paramètre, la deuxième sa description et la troisième la valeur par défaut.
|
|||
</tr>
|
||||
<tr>
|
||||
<td><p><code>$nav-menu-side</code></p></td>
|
||||
<td><p>Taille d'un bord du bouton de navigation</p></td>
|
||||
<td><p>Taille d’un bord du bouton de navigation</p></td>
|
||||
<td><p><var>50px</var></p></td>
|
||||
</tr>
|
||||
<tr>
|
||||
|
|
@ -441,7 +441,7 @@ paramètre, la deuxième sa description et la troisième la valeur par défaut.
|
|||
|
||||
<p>
|
||||
Ces paramètres contrôlent le rendu de la barre de navigation de bas
|
||||
d'écran, présente en mode mobile quand <code>$nav-mobile-mode</code>
|
||||
d’écran, présente en mode mobile quand <code>$nav-mobile-mode</code>
|
||||
a pour valeur <var>bottom-bar</var>.
|
||||
</p>
|
||||
|
||||
|
|
@ -463,22 +463,22 @@ paramètre, la deuxième sa description et la troisième la valeur par défaut.
|
|||
</tr>
|
||||
<tr>
|
||||
<td><p><code>$nav-mobile-bottom-bar-item-hover-background</code></p></td>
|
||||
<td><p>Couleur de fond d'un élément au survol</p></td>
|
||||
<td><p>Couleur de fond d’un élément au survol</p></td>
|
||||
<td><p><var>$nav-item-hover-background</var></p></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><p><code>$nav-mobile-bottom-bar-item-hover-color</code></p></td>
|
||||
<td><p>Couleur du texte d'un élément au survol</p></td>
|
||||
<td><p>Couleur du texte d’un élément au survol</p></td>
|
||||
<td><p><var>$nav-item-hover-color</var></p></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><p><code>$nav-mobile-bottom-bar-item-selected-background</code></p></td>
|
||||
<td><p>Couleur de fond de l'élément actif</p></td>
|
||||
<td><p>Couleur de fond de l’élément actif</p></td>
|
||||
<td><p><var>$nav-item-selected-backgroud</var></p></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><p><code>$nav-mobile-bottom-bar-item-selected-color</code></p></td>
|
||||
<td><p>Couleur du texte de l'élément actif</p></td>
|
||||
<td><p>Couleur du texte de l’élément actif</p></td>
|
||||
<td><p><var>$nav-item-selected-backgroud</var></p></td>
|
||||
</tr>
|
||||
<tr>
|
||||
|
|
@ -514,7 +514,7 @@ paramètre, la deuxième sa description et la troisième la valeur par défaut.
|
|||
</tr>
|
||||
<tr>
|
||||
<td><p><code>$form-background</code></p></td>
|
||||
<td><p>Couleur de fond d'une démarche.</p></td>
|
||||
<td><p>Couleur de fond d’une démarche.</p></td>
|
||||
<td><p><var>$body-background</var></p></td>
|
||||
</tr>
|
||||
<tr>
|
||||
|
|
@ -572,7 +572,7 @@ paramètre, la deuxième sa description et la troisième la valeur par défaut.
|
|||
</tr>
|
||||
<tr>
|
||||
<td><p><code>$button-border-radius</code></p></td>
|
||||
<td><p>Taille de l'arrondi à appliquer aux boutons</p></td>
|
||||
<td><p>Taille de l’arrondi à appliquer aux boutons</p></td>
|
||||
<td><p><var>$border-radius</var></p></td>
|
||||
</tr>
|
||||
<tr>
|
||||
|
|
@ -602,17 +602,17 @@ paramètre, la deuxième sa description et la troisième la valeur par défaut.
|
|||
</tr>
|
||||
<tr>
|
||||
<td><p><code>$widget-focus-background</code></p></td>
|
||||
<td><p>Couleur de fond des champs de formulaire lorsqu'ils sont actifs (texte, liste…)</p></td>
|
||||
<td><p>Couleur de fond des champs de formulaire lorsqu’ils sont actifs (texte, liste…)</p></td>
|
||||
<td><p><var>$widget-background</var></p></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><p><code>$widget-focus-color</code></p></td>
|
||||
<td><p>Couleur du texte des champs de formulaire lorsqu'ils sont actifs (texte, liste…)</p></td>
|
||||
<td><p>Couleur du texte des champs de formulaire lorsqu’ils sont actifs (texte, liste…)</p></td>
|
||||
<td><p><var>$widget-color</var></p></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><p><code>$widget-focus-border</code></p></td>
|
||||
<td><p>Style de bordure des champs de formulaire lorsqu'ils sont actifs (texte, liste…)</p></td>
|
||||
<td><p>Style de bordure des champs de formulaire lorsqu’ils sont actifs (texte, liste…)</p></td>
|
||||
<td><p><var>$widget-border</var></p></td>
|
||||
</tr>
|
||||
<tr>
|
||||
|
|
@ -637,7 +637,7 @@ paramètre, la deuxième sa description et la troisième la valeur par défaut.
|
|||
</tr>
|
||||
<tr>
|
||||
<td><p><code>$widget-border-radius</code></p></td>
|
||||
<td><p>Taille de l'arrondi à appliquer aux champs de formulaire (texte, liste…)</p></td>
|
||||
<td><p>Taille de l’arrondi à appliquer aux champs de formulaire (texte, liste…)</p></td>
|
||||
<td><p><var>0</var></p></td>
|
||||
</tr>
|
||||
<tr>
|
||||
|
|
@ -672,7 +672,7 @@ paramètre, la deuxième sa description et la troisième la valeur par défaut.
|
|||
</tr>
|
||||
<tr>
|
||||
<td><p><code>$widget-unique-checkbox-position</code></p></td>
|
||||
<td><p>Positionnement de la case à cocher d'un champ de type « Case à
|
||||
<td><p>Positionnement de la case à cocher d’un champ de type « Case à
|
||||
cocher (choix unique); soit « bottom » pour un rendu sous le libellé du
|
||||
champ (option par défaut), soit « left » pour un rendu à la gauche du
|
||||
libellé.</p></td>
|
||||
|
|
@ -680,7 +680,7 @@ paramètre, la deuxième sa description et la troisième la valeur par défaut.
|
|||
</tr>
|
||||
<tr>
|
||||
<td><p><code>$buttons-order</code></p></td>
|
||||
<td><p>Ordre particulier des boutons. Indiquer les boutons (<code>submit</code>, <code>cancel</code>, <code>previous</code>) dans l'ordre souhaité séparé par des vigules. Ajouter l'option <code>(grow)</code> après l'identifiant d'un bouton va pousser le⋅s bouton⋅s suivant⋅s sur la droite (ex: <code>previous, cancel (grow), submit</code>).</p>
|
||||
<td><p>Ordre particulier des boutons. Indiquer les boutons (<code>submit</code>, <code>cancel</code>, <code>previous</code>) dans l’ordre souhaité séparé par des vigules. Ajouter l’option <code>(grow)</code> après l’identifiant d’un bouton va pousser le⋅s bouton⋅s suivant⋅s sur la droite (ex: <code>previous, cancel (grow), submit</code>).</p>
|
||||
</td>
|
||||
<td><p><var>null</var></p></td>
|
||||
</tr>
|
||||
|
|
@ -730,21 +730,21 @@ paramètre, la deuxième sa description et la troisième la valeur par défaut.
|
|||
</section>
|
||||
|
||||
<section>
|
||||
<title>Bloc étapes d'une démarche</title>
|
||||
<title>Bloc étapes d’une démarche</title>
|
||||
|
||||
<p>
|
||||
Ces paramètres contrôlent le rendu du bloc présentant les étapes ou pages d'une démarche.
|
||||
Ces paramètres contrôlent le rendu du bloc présentant les étapes ou pages d’une démarche.
|
||||
</p>
|
||||
<p>
|
||||
Le rendu de ce bloc diffère automatiquement en fonction de la taille de l'écran et de la position de la <em>sidebar</em> <code>$form-sidebar-position</code> pour s'adapter aux différents terminaux :
|
||||
Le rendu de ce bloc diffère automatiquement en fonction de la taille de l’écran et de la position de la <em>sidebar</em> <code>$form-sidebar-position</code> pour s’adapter aux différents terminaux :
|
||||
</p>
|
||||
<list>
|
||||
<item><p><em>rendu mobile :</em> seul l'étape courante est affichée avec une indication du nombre totale d'étapes ;</p></item>
|
||||
<item><p><em>rendu horizontal :</em>Les marqueurs d'étapes (chiffres) s'affichent côte à côte et sur plusieurs itemgnes s'il le faut. Seul le label de l'étape en cours s'affiche ;</p></item>
|
||||
<item><p><em>rendu vertical :</em> (s'affiche uniquement si la variable <code>$form-sidebar-position</code> a la valeur <var>left</var> ou <var>right</var>) dispose les étapes les unes au dessous des autres avec chacune leur numéro et leur label</p></item>.
|
||||
<item><p><em>rendu mobile :</em> seul l’étape courante est affichée avec une indication du nombre totale d’étapes ;</p></item>
|
||||
<item><p><em>rendu horizontal :</em>Les marqueurs d’étapes (chiffres) s’affichent côte à côte et sur plusieurs itemgnes s’il le faut. Seul le label de l’étape en cours s’affiche ;</p></item>
|
||||
<item><p><em>rendu vertical :</em> (s’affiche uniquement si la variable <code>$form-sidebar-position</code> a la valeur <var>left</var> ou <var>right</var>) dispose les étapes les unes au dessous des autres avec chacune leur numéro et leur label</p></item>.
|
||||
</list>
|
||||
<p>
|
||||
Plusieurs options sont également disponibles pour gérer le rendu du <em>marqueur d'étape</em> (chiffre).
|
||||
Plusieurs options sont également disponibles pour gérer le rendu du <em>marqueur d’étape</em> (chiffre).
|
||||
</p>
|
||||
|
||||
<table shade="rows">
|
||||
|
|
@ -767,7 +767,7 @@ paramètre, la deuxième sa description et la troisième la valeur par défaut.
|
|||
</tr>
|
||||
<tr>
|
||||
<td><p><code>$wcs-step-current-color</code></p></td>
|
||||
<td><p>Couleur du texte de l'étape courantes</p></td>
|
||||
<td><p>Couleur du texte de l’étape courantes</p></td>
|
||||
<td><p><var>$primary-color</var></p></td>
|
||||
</tr>
|
||||
<tr>
|
||||
|
|
@ -777,7 +777,7 @@ paramètre, la deuxième sa description et la troisième la valeur par défaut.
|
|||
</tr>
|
||||
<tr>
|
||||
<td><p><code>$wcs-step-current-background</code></p></td>
|
||||
<td><p>Couleur de fond de l'étape courante</p></td>
|
||||
<td><p>Couleur de fond de l’étape courante</p></td>
|
||||
<td><p><var>$wcs-step-background</var></p></td>
|
||||
</tr>
|
||||
<tr>
|
||||
|
|
@ -794,7 +794,7 @@ paramètre, la deuxième sa description et la troisième la valeur par défaut.
|
|||
<td><p><code>$wcs-step-current-border-bottom</code></p></td>
|
||||
<td>
|
||||
<p>
|
||||
Épaisseur et couleur du filet de l'étape courante.
|
||||
Épaisseur et couleur du filet de l’étape courante.
|
||||
Si <code>$wcs-step-border-bottom</code> est à <var>none</var>, ce filet sera automatiquement <var>none</var> également.
|
||||
</p>
|
||||
</td>
|
||||
|
|
@ -804,7 +804,7 @@ paramètre, la deuxième sa description et la troisième la valeur par défaut.
|
|||
<td><p><code>$wsc-step-before-piled</code></p></td>
|
||||
<td>
|
||||
<p>
|
||||
Cette option n'est valable qu'en mode vertical et si <code>$wcs-step-background</code> a une valeur différente de <var>transparent</var>.
|
||||
Cette option n’est valable qu’en mode vertical et si <code>$wcs-step-background</code> a une valeur différente de <var>transparent</var>.
|
||||
Avec la valeur <var>true</var>, elle va superposer les étapes passée les unes sur les autres pour gagner de la place.
|
||||
</p>
|
||||
</td>
|
||||
|
|
@ -812,32 +812,32 @@ paramètre, la deuxième sa description et la troisième la valeur par défaut.
|
|||
</tr>
|
||||
<tr>
|
||||
<td><p><code>$wcs-step-marker-color</code></p></td>
|
||||
<td><p>Couleur du chiffre des marqueurs d'étapes non courantes</p></td>
|
||||
<td><p>Couleur du chiffre des marqueurs d’étapes non courantes</p></td>
|
||||
<td><p><var>$wcs-step-color</var></p></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><p><code>$wcs-step-current-marker-color</code></p></td>
|
||||
<td><p>Couleur du chiffre du marqueur d'étape courante</p></td>
|
||||
<td><p>Couleur du chiffre du marqueur d’étape courante</p></td>
|
||||
<td><p><var>$wcs-step-current-color</var></p></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><p><code>$wcs-step-marker-background</code></p></td>
|
||||
<td><p>Couleur de fond des marqueurs d'étapes non courantes</p></td>
|
||||
<td><p>Couleur de fond des marqueurs d’étapes non courantes</p></td>
|
||||
<td><p><var>$wcs-step-background</var></p></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><p><code>$wcs-step-current-marker-background</code></p></td>
|
||||
<td><p>Couleur de fond du marqueur d'étape courante</p></td>
|
||||
<td><p>Couleur de fond du marqueur d’étape courante</p></td>
|
||||
<td><p><var>$wcs-step-current-background</var></p></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><p><code>$wcs-step-marker-size</code></p></td>
|
||||
<td><p>Taille du marqueur. La taille du marquer n'influe pas sur la taille du chiffre</p></td>
|
||||
<td><p>Taille du marqueur. La taille du marquer n’influe pas sur la taille du chiffre</p></td>
|
||||
<td><p><var>2.1em</var></p></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><p><code>$wcs-step-current-marker-enlarge</code></p></td>
|
||||
<td><p>Facteur d'agrandissement de la taille du marqueur courant. Une valeur de <var>1.1</var> agrandira le marqueur de 110%</p></td>
|
||||
<td><p>Facteur d’agrandissement de la taille du marqueur courant. Une valeur de <var>1.1</var> agrandira le marqueur de 110%</p></td>
|
||||
<td><p><var>1</var></p></td>
|
||||
</tr>
|
||||
<tr>
|
||||
|
|
@ -873,7 +873,7 @@ paramètre, la deuxième sa description et la troisième la valeur par défaut.
|
|||
</tr>
|
||||
<tr>
|
||||
<td><p><var>$wcs-step-current-color</var></p></td>
|
||||
<td><p>Couleur du label de l'étape courante</p></td>
|
||||
<td><p>Couleur du label de l’étape courante</p></td>
|
||||
<td><p><var>solid</var></p></td>
|
||||
</tr>
|
||||
<tr>
|
||||
|
|
@ -900,7 +900,7 @@ paramètre, la deuxième sa description et la troisième la valeur par défaut.
|
|||
</tr>
|
||||
<tr>
|
||||
<td><p><code>$cell-border-radius</code></p></td>
|
||||
<td><p>Taille de l'arrondi des cellules</p></td>
|
||||
<td><p>Taille de l’arrondi des cellules</p></td>
|
||||
<td><p><var>$border-radius</var></p></td>
|
||||
</tr>
|
||||
<tr>
|
||||
|
|
@ -915,22 +915,22 @@ paramètre, la deuxième sa description et la troisième la valeur par défaut.
|
|||
</tr>
|
||||
<tr>
|
||||
<td><p><code>$cell-entry-font-weight</code></p></td>
|
||||
<td><p>Graisse du texte (lien) d'un élément</p></td>
|
||||
<td><p>Graisse du texte (lien) d’un élément</p></td>
|
||||
<td><p><var>normal</var></p></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><p><code>$cell-entry-color</code></p></td>
|
||||
<td><p>Couleur du texte (lien) d'un élément</p></td>
|
||||
<td><p>Couleur du texte (lien) d’un élément</p></td>
|
||||
<td><p><var>$link-color</var></p></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><p><code>$cell-entry-hover-background</code></p></td>
|
||||
<td><p>Couleur de fond d'un élément survolé</p></td>
|
||||
<td><p>Couleur de fond d’un élément survolé</p></td>
|
||||
<td><p><var>inherit</var></p></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><p><code>$cell-entry-hover-color</code></p></td>
|
||||
<td><p>Couleur du texte d'un élément survolé</p></td>
|
||||
<td><p>Couleur du texte d’un élément survolé</p></td>
|
||||
<td><p><var>inherit</var></p></td>
|
||||
</tr>
|
||||
<tr>
|
||||
|
|
@ -944,16 +944,16 @@ paramètre, la deuxième sa description et la troisième la valeur par défaut.
|
|||
</tr>
|
||||
<tr>
|
||||
<td><p><code>$cell-image-position</code></p></td>
|
||||
<td><p>Position de l'image qui peut être associée à une cellule « démarches
|
||||
d'une catégorie », les valeurs possibles sont <var>top</var> pour
|
||||
avoir l'image en haut de cellule et <var>after-title</var> pour avoir
|
||||
l'image après le titre de cellule.</p></td>
|
||||
<td><p>Position de l’image qui peut être associée à une cellule « démarches
|
||||
d’une catégorie », les valeurs possibles sont <var>top</var> pour
|
||||
avoir l’image en haut de cellule et <var>after-title</var> pour avoir
|
||||
l’image après le titre de cellule.</p></td>
|
||||
<td><p><var>after-title</var></p></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><p><code>$cell-image-padding</code></p></td>
|
||||
<td><p>Espace autour de l'image qui peut être associée à une cellule « démarches
|
||||
d'une catégorie ».</p></td>
|
||||
<td><p>Espace autour de l’image qui peut être associée à une cellule « démarches
|
||||
d’une catégorie ».</p></td>
|
||||
<td><p><var>0.5rem</var></p></td>
|
||||
</tr>
|
||||
<tr>
|
||||
|
|
@ -964,7 +964,7 @@ paramètre, la deuxième sa description et la troisième la valeur par défaut.
|
|||
<tr>
|
||||
<td><p><code>$footer-menucell-separator</code></p></td>
|
||||
<td><p>Style de bordure utilisée comme séparateur vertical entre les entrées
|
||||
d'une cellule menu placée dans le pied de page</p></td>
|
||||
d’une cellule menu placée dans le pied de page</p></td>
|
||||
<td><p><var>none</var></p></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
|
@ -974,26 +974,26 @@ paramètre, la deuxième sa description et la troisième la valeur par défaut.
|
|||
<title>Messages</title>
|
||||
|
||||
<p>
|
||||
Options pour paraméter l'affichage des messages. 4 types de messages : succès, information, avertissement, erreur.
|
||||
Options pour paraméter l’affichage des messages. 4 types de messages : succès, information, avertissement, erreur.
|
||||
</p>
|
||||
|
||||
<table shade="rows">
|
||||
<tr>
|
||||
<td><p><code>$notification-style</code></p></td>
|
||||
<td><p>Rendu des messages, soit « classic »,
|
||||
soit « border-icon » pour un rendu plaçant l'icône en couleur sur un trait
|
||||
soit « border-icon » pour un rendu plaçant l’icône en couleur sur un trait
|
||||
à gauche, soit « border-bar » pour un rendu avec une bordure et une bande
|
||||
de couleur pour l’icône.</p></td>
|
||||
<td><p><var>classic</var></p></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><p><code>$notification-icon-size</code></p></td>
|
||||
<td><p>Taille de l'icône illustrant le message</p></td>
|
||||
<td><p>Taille de l’icône illustrant le message</p></td>
|
||||
<td><p><var>1.5rem</var> ou <var>2rem</var></p></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><p><code>$notification-icon-position</code></p></td>
|
||||
<td><p>Position vertical de l'icône du message. « top » ou « center ». </p></td>
|
||||
<td><p>Position vertical de l’icône du message. « top » ou « center ». </p></td>
|
||||
<td><p><var>top</var></p></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
|
@ -1024,8 +1024,8 @@ paramètre, la deuxième sa description et la troisième la valeur par défaut.
|
|||
</tr>
|
||||
<tr>
|
||||
<td><p><code>$carrousel-navigation</code></p></td>
|
||||
<td><p>Détermine si la navigation permettant de passer d'un élément à
|
||||
l'autre est affichée. (visible ou none)</p></td>
|
||||
<td><p>Détermine si la navigation permettant de passer d’un élément à
|
||||
l’autre est affichée. (visible ou none)</p></td>
|
||||
<td><p><var>visible</var></p></td>
|
||||
</tr>
|
||||
<tr>
|
||||
|
|
@ -1050,8 +1050,8 @@ paramètre, la deuxième sa description et la troisième la valeur par défaut.
|
|||
</tr>
|
||||
<tr>
|
||||
<td><p><code>$carrousel-arrows</code></p></td>
|
||||
<td><p>Détermine si les flèches (gauche/droite) permettant de passer d'un
|
||||
élément à l'autre sont affichées. (visible ou none)</p></td>
|
||||
<td><p>Détermine si les flèches (gauche/droite) permettant de passer d’un
|
||||
élément à l’autre sont affichées. (visible ou none)</p></td>
|
||||
<td><p><var>visible</var></p></td>
|
||||
</tr>
|
||||
<tr>
|
||||
|
|
@ -1061,7 +1061,7 @@ paramètre, la deuxième sa description et la troisième la valeur par défaut.
|
|||
</tr>
|
||||
<tr>
|
||||
<td><p><code>$carrousel-item-mask-color</code></p></td>
|
||||
<td><p>Couleur du masque qui se superpose à l'image de la diapositive</p></td>
|
||||
<td><p>Couleur du masque qui se superpose à l’image de la diapositive</p></td>
|
||||
<td><p><var>rgba(0, 0, 0, 0.3)</var></p></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
|
@ -1072,7 +1072,7 @@ paramètre, la deuxième sa description et la troisième la valeur par défaut.
|
|||
<title>Tableaux</title>
|
||||
|
||||
<p>
|
||||
Ces paramètres contrôlent l'apparence des tableaux sur lesquels la
|
||||
Ces paramètres contrôlent l’apparence des tableaux sur lesquels la
|
||||
classe pk-data-table est appliquée.
|
||||
</p>
|
||||
|
||||
|
|
@ -1091,45 +1091,45 @@ paramètre, la deuxième sa description et la troisième la valeur par défaut.
|
|||
</table>
|
||||
|
||||
<p>
|
||||
Ces paramètres contrôlent l'apparence de l'entête des tableaux sur lesquels la
|
||||
classe pk-data-table-headers est appliquée (n'a d'effet que si la classe
|
||||
Ces paramètres contrôlent l’apparence de l’entête des tableaux sur lesquels la
|
||||
classe pk-data-table-headers est appliquée (n’a d’effet que si la classe
|
||||
pk-data-table est aussi appliquée).
|
||||
</p>
|
||||
|
||||
<table shade="rows">
|
||||
<tr>
|
||||
<td><p><code>$table-headers-background</code></p></td>
|
||||
<td><p>Couleur de fond de l'entête</p></td>
|
||||
<td><p>Couleur de fond de l’entête</p></td>
|
||||
<td><p><var>$title-background</var></p></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><p><code>$table-headers-color</code></p></td>
|
||||
<td><p>Couleur du texte de l'entête</p></td>
|
||||
<td><p>Couleur du texte de l’entête</p></td>
|
||||
<td><p><var>$title-color</var></p></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><p><code>$table-headers-font-style</code></p></td>
|
||||
<td><p>Style de la police de l'entête</p></td>
|
||||
<td><p>Style de la police de l’entête</p></td>
|
||||
<td><p><var>$title-font-style</var></p></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><p><code>$table-headers-font-size</code></p></td>
|
||||
<td><p>Taille de la police de l'entête</p></td>
|
||||
<td><p>Taille de la police de l’entête</p></td>
|
||||
<td><p><var>$title-font-size</var></p></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><p><code>$table-headers-font-weight</code></p></td>
|
||||
<td><p>Graisse de la police de l'entête</p></td>
|
||||
<td><p>Graisse de la police de l’entête</p></td>
|
||||
<td><p><var>$title-weight</var></p></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><p><code>$table-headers-font-family</code></p></td>
|
||||
<td><p>Famille de police de l'entête</p></td>
|
||||
<td><p>Famille de police de l’entête</p></td>
|
||||
<td><p><var>$title-font-family</var></p></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><p><code>$table-headers-text-transform</code></p></td>
|
||||
<td><p>Transformation des caractères de l'entête</p></td>
|
||||
<td><p>Transformation des caractères de l’entête</p></td>
|
||||
<td><p><var>$title-transform</var></p></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
|
@ -1139,33 +1139,33 @@ paramètre, la deuxième sa description et la troisième la valeur par défaut.
|
|||
<title>Retour en haut</title>
|
||||
|
||||
<p>
|
||||
Bouton permettant de remonter en haut de page. Élément masqué par défaut. Si affiché, il le sera par défaut sous la forme d'un lien en fin de pied de page
|
||||
Bouton permettant de remonter en haut de page. Élément masqué par défaut. Si affiché, il le sera par défaut sous la forme d’un lien en fin de pied de page
|
||||
</p>
|
||||
|
||||
<table shade="rows">
|
||||
<tr>
|
||||
<td><p><code>$back-top-display</code></p></td>
|
||||
<td><p>Condition d'affichage du bouton. Valeurs possibles: <var>mobile-only</var>, <var>block</var>, <var>inline</var>, <var>none</var>.</p></td>
|
||||
<td><p>Condition d’affichage du bouton. Valeurs possibles: <var>mobile-only</var>, <var>block</var>, <var>inline</var>, <var>none</var>.</p></td>
|
||||
<td><p><var>none</var></p></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><p><code>$back-top-icon-character</code></p></td>
|
||||
<td><p>Caractère UTF-8 de l'icône du bouton.</p></td>
|
||||
<td><p>Caractère UTF-8 de l’icône du bouton.</p></td>
|
||||
<td><p><var>"\f102"</var>(icone "angle-double-top")</p></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><p><code>$back-top-icon-size</code></p></td>
|
||||
<td><p>Taille de l'icône.</p></td>
|
||||
<td><p>Taille de l’icône.</p></td>
|
||||
<td><p><var>2.5em</var></p></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><p><code>$back-top-icon-label-space</code></p></td>
|
||||
<td><p>Espace entre l'icône et le label du bouton</p></td>
|
||||
<td><p>Espace entre l’icône et le label du bouton</p></td>
|
||||
<td><p><var>0.33em</var></p></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><p><code>$back-top-layout-direction</code></p></td>
|
||||
<td><p>Position de l'icône par rapport au label. Soit <var>vertical</var> : icône au dessus du label, soit <var>horizontal</var>: icône à côté du label</p></td>
|
||||
<td><p>Position de l’icône par rapport au label. Soit <var>vertical</var> : icône au dessus du label, soit <var>horizontal</var>: icône à côté du label</p></td>
|
||||
<td><p><var>vertical</var></p></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
|
|
|||
Loading…
Reference in New Issue