1187 lines
41 KiB
Plaintext
1187 lines
41 KiB
Plaintext
<page xmlns="http://projectmallard.org/1.0/"
|
||
type="topic" id="misc-scss" xml:lang="fr">
|
||
|
||
<info>
|
||
<revision docversion="0.1" date="2015-12-04" status="draft"/>
|
||
<credit type="author">
|
||
<name>Frédéric Péters</name>
|
||
<email>fpeters@entrouvert.com</email>
|
||
</credit>
|
||
|
||
</info>
|
||
|
||
<title>Infrastructure SCSS</title>
|
||
|
||
<p>
|
||
Les tableaux ci-dessous reprennent les différents paramètres permettant de
|
||
modifier le rendu général des pages. La première colonne reprend le nom du
|
||
paramètre, la deuxième sa description et la troisième la valeur par défaut.
|
||
</p>
|
||
|
||
<section>
|
||
<title>Généralités</title>
|
||
|
||
<table shade="rows">
|
||
<tr>
|
||
<td><p><code>$body-background</code></p></td>
|
||
<td><p>Couleur de fond de page</p></td>
|
||
<td><p><var>white</var></p></td>
|
||
</tr>
|
||
<tr>
|
||
<td><p><code>$font-color</code></p></td>
|
||
<td><p>Couleur du texte</p></td>
|
||
<td><p><var>#333</var></p></td>
|
||
</tr>
|
||
<tr>
|
||
<td><p><code>$link-color</code></p></td>
|
||
<td><p>Couleur des liens</p></td>
|
||
<td><p><var>#028</var></p></td>
|
||
</tr>
|
||
<tr>
|
||
<td><p><code>$link-decoration</code></p></td>
|
||
<td><p>Décoration des liens</p></td>
|
||
<td><p><var>none</var></p></td>
|
||
</tr>
|
||
<tr>
|
||
<td><p><code>$link-hover-decoration</code></p></td>
|
||
<td><p>Décoration au survol des liens</p></td>
|
||
<td><p><var>underline</var></p></td>
|
||
</tr>
|
||
<tr>
|
||
<td><p><code>$font-family</code></p></td>
|
||
<td><p>Famille de police du texte</p></td>
|
||
<td><p><var>sans-serif</var></p></td>
|
||
</tr>
|
||
<tr>
|
||
<td><p><code>$font-size</code></p></td>
|
||
<td><p>Taille du corps du texte. Pour des raison d’accessibilité, il est
|
||
préférable de laisser l’usager pouvoir choisir sa taille en laissant cette
|
||
valeur à <var>100%</var>.</p></td>
|
||
<td><p><var>100%</var></p></td>
|
||
</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><var>1.4</var></p></td>
|
||
</tr>
|
||
<tr>
|
||
<td><p><code>$width</code></p></td>
|
||
<td><p>Largeur maximale de la page</p></td>
|
||
<td><p><var>1000px</var></p></td>
|
||
</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><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
|
||
(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><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><var>null</var></p></td>
|
||
</tr>
|
||
<tr>
|
||
<td><p><code>$footer-background</code></p></td>
|
||
<td><p>Couleur de fond du pied de page</p></td>
|
||
<td><p><var>#666666</var></p></td>
|
||
</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
|
||
(plutôt que la largeur du contenu).</p></td>
|
||
<td><p><var>true</var></p></td>
|
||
</tr>
|
||
<tr>
|
||
<td><p><code>$footer-color</code></p></td>
|
||
<td><p>Couleur du texte du pied de page</p></td>
|
||
<td><p><var>white</var></p></td>
|
||
</tr>
|
||
<tr>
|
||
<td><p><code>$footer-link-color</code></p></td>
|
||
<td><p>Couleur des liens du pied de page</p></td>
|
||
<td><p><var>$link-color</var></p></td>
|
||
</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><var>null</var></p></td>
|
||
</tr>
|
||
<tr>
|
||
<td><p><code>$sidebar-position</code></p></td>
|
||
<td><p>Position de la barre latérale (left/right)</p></td>
|
||
<td><p><var>left</var></p></td>
|
||
</tr>
|
||
<tr>
|
||
<td><p><code>$sidebar-width</code></p></td>
|
||
<td><p>Largeur de la barre latérale</p></td>
|
||
<td><p><var>300px</var></p></td>
|
||
</tr>
|
||
<tr>
|
||
<td><p><code>$sidebar-max-width</code></p></td>
|
||
<td><p>Largeur maximale de la barre latérale, utile dans le cas où la valeur de <code>$sidebar-width</code> est définie en %</p></td>
|
||
<td><p><var>$sidebar-width</var></p></td>
|
||
</tr>
|
||
<tr>
|
||
<td><p><code>$sidebar-min-width</code></p></td>
|
||
<td><p>Largeur minimale de la barre latérale, utile dans le cas où la valeur de <code>$sidebar-width</code> est définie en %</p></td>
|
||
<td><p><var>0</var></p></td>
|
||
</tr>
|
||
<tr>
|
||
<td><p><code>$columns-gutter</code></p></td>
|
||
<td><p>Espace (« gouttière ») entre les colonnes des modèles de page.</p></td>
|
||
<td><p><var>20px</var></p></td>
|
||
</tr>
|
||
<tr>
|
||
<td><p><code>$sidebar-columns-gutter</code></p></td>
|
||
<td><p>Espace (« gouttière ») entre la barre latérale et les colonnes.</p></td>
|
||
<td><p><var>$columns-gutter</var></p></td>
|
||
</tr>
|
||
<tr>
|
||
<td><p><code>$edge-gutter</code></p></td>
|
||
<td><p>Espace (« gouttière ») entre le contenu et le bord du navigateur.</p></td>
|
||
<td><p><var>legacy</var></p></td>
|
||
</tr>
|
||
<tr>
|
||
<td><p><code>$grid-gutter</code></p></td>
|
||
<td><p>Espace (« gouttière ») entre les éléments disposés en grille.</p></td>
|
||
<td><p><var>1rem</var></p></td>
|
||
</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><var>hsla(0, 0%, 0%, 0.06)</var></p></td>
|
||
</tr>
|
||
</table>
|
||
</section>
|
||
|
||
<section>
|
||
<title>Titres</title>
|
||
|
||
<table shade="rows">
|
||
<tr>
|
||
<td><p><code>$title-background</code></p></td>
|
||
<td><p>Couleur de fond des titres</p></td>
|
||
<td><p><var>white</var></p></td>
|
||
</tr>
|
||
<tr>
|
||
<td><p><code>$title-color</code></p></td>
|
||
<td><p>Couleur du texte des titres</p></td>
|
||
<td><p><var>black</var></p></td>
|
||
</tr>
|
||
<tr>
|
||
<td><p><code>$title-transform</code></p></td>
|
||
<td><p>Transformation des caractères des titres</p></td>
|
||
<td><p><var>none</var></p></td>
|
||
</tr>
|
||
<tr>
|
||
<td><p><code>$title-font-family</code></p></td>
|
||
<td><p>Famille de police pour les titres</p></td>
|
||
<td><p><var>$font-family</var></p></td>
|
||
</tr>
|
||
<tr>
|
||
<td><p><code>$title-font-size</code></p></td>
|
||
<td><p>Taille de la police des titres</p></td>
|
||
<td><p><var>$font-size * 1.1</var></p></td>
|
||
</tr>
|
||
<tr>
|
||
<td><p><code>$title-font-style</code></p></td>
|
||
<td><p>Style de la police des titres</p></td>
|
||
<td><p><var>normal</var></p></td>
|
||
</tr>
|
||
<tr>
|
||
<td><p><code>$title-padding</code></p></td>
|
||
<td><p>Padding des titres</p></td>
|
||
<td><p><var>0.7rem 1rem</var></p></td>
|
||
</tr>
|
||
<tr>
|
||
<td><p><code>$title-weight</code></p></td>
|
||
<td><p>Graisse de la police des titres</p></td>
|
||
<td><p><var>normal</var></p></td>
|
||
</tr>
|
||
<tr>
|
||
<td><p><code>$title-border-bottom</code></p></td>
|
||
<td><p>Bordure pour le bas des titres</p></td>
|
||
<td><p><var>0</var></p></td>
|
||
</tr>
|
||
<tr>
|
||
<td><p><code>$title-border-radius</code></p></td>
|
||
<td><p>Taille de l’arrondi à appliquer aux titres</p></td>
|
||
<td><p><var>$border-radius</var></p></td>
|
||
</tr>
|
||
<tr>
|
||
<td><p><code>$title-border-top</code></p></td>
|
||
<td><p>Bordure pour le haut des titres</p></td>
|
||
<td><p><var>0</var></p></td>
|
||
</tr>
|
||
</table>
|
||
</section>
|
||
|
||
<section>
|
||
<title>Navigation</title>
|
||
|
||
<p>
|
||
Ces paramètres contrôlent l’apparence de la barre de navigation.
|
||
</p>
|
||
|
||
<table shade="rows">
|
||
<tr>
|
||
<td><p><code>$nav-background</code></p></td>
|
||
<td><p>Couleur de fond</p></td>
|
||
<td><p><var>white</var></p></td>
|
||
</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
|
||
(plutôt que la largeur du contenu).</p></td>
|
||
<td><p><var>false</var></p></td>
|
||
</tr>
|
||
<tr>
|
||
<td><p><code>$nav-color</code></p></td>
|
||
<td><p>Couleur du texte</p></td>
|
||
<td><p><var>black</var></p></td>
|
||
</tr>
|
||
<tr>
|
||
<td><p><code>$nav-active-color</code></p></td>
|
||
<td><p>Couleur "active", utilisée comme valeur par défaut pour des éléments
|
||
ci-dessous</p></td>
|
||
<td><p><var>#005EA9</var></p></td>
|
||
</tr>
|
||
<tr>
|
||
<td><p><code>$nav-border-color</code></p></td>
|
||
<td><p>Couleur des bordures</p></td>
|
||
<td><p><var>$nav-active-color</var></p></td>
|
||
</tr>
|
||
<tr>
|
||
<td><p><code>$nav-border-radius</code></p></td>
|
||
<td><p>Taille de l’arrondi de la navigation </p></td>
|
||
<td><p><var>$border-radius</var></p></td>
|
||
</tr>
|
||
<tr>
|
||
<td><p><code>$nav-height</code></p></td>
|
||
<td><p>Hauteur</p></td>
|
||
<td><p><var>3em</var></p></td>
|
||
</tr>
|
||
<tr>
|
||
<td><p><code>$nav-item-background</code></p></td>
|
||
<td><p>Couleur de fond des éléments</p></td>
|
||
<td><p><var>transparent</var></p></td>
|
||
</tr>
|
||
<tr>
|
||
<td><p><code>$nav-text-transform</code></p></td>
|
||
<td><p>Transformation des caractères des entrées du menu</p></td>
|
||
<td><p><var>none</var></p></td>
|
||
</tr>
|
||
<tr>
|
||
<td><p><code>$nav-item-selected-background</code></p></td>
|
||
<td><p>Couleur de fond de la page active</p></td>
|
||
<td><p><var>$nav-active-color</var></p></td>
|
||
</tr>
|
||
<tr>
|
||
<td><p><code>$nav-item-selected-color</code></p></td>
|
||
<td><p>Couleur du texte de la page active</p></td>
|
||
<td><p><var>$nav-menu-color</var></p></td>
|
||
</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><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><var>$nav-item-selected-color</var></p></td>
|
||
</tr>
|
||
<tr>
|
||
<td><p><code>$nav-item-spacing</code></p></td>
|
||
<td><p>Espace entre les éléments</p></td>
|
||
<td><p><var>0px</var></p></td>
|
||
</tr>
|
||
<tr>
|
||
<td><p><code>$nav-font-family</code></p></td>
|
||
<td><p>Famille de police de la navigation</p></td>
|
||
<td><p><var>null</var></p></td>
|
||
</tr>
|
||
<tr>
|
||
<td><p><code>$nav-font-style</code></p></td>
|
||
<td><p>Style de la police de la navigation</p></td>
|
||
<td><p><var>null</var></p></td>
|
||
</tr>
|
||
<tr>
|
||
<td><p><code>$nav-font-size</code></p></td>
|
||
<td><p>Taille de la police de la navigation</p></td>
|
||
<td><p><var>null</var></p></td>
|
||
</tr>
|
||
<tr>
|
||
<td><p><code>$nav-font-weight</code></p></td>
|
||
<td><p>Graisse de la police de la navigation</p></td>
|
||
<td><p><var>bold</var></p></td>
|
||
</tr>
|
||
<tr>
|
||
<td><p><code>$nav-mobile-menu-background</code></p></td>
|
||
<td><p>Couleur de fond du menu en mode mobile</p></td>
|
||
<td><p><var>#eee</var></p></td>
|
||
</tr>
|
||
<tr>
|
||
<td><p><code>$nav-mobile-menu-item-color</code></p></td>
|
||
<td><p>Couleur des entrées du menu en mode mobile</p></td>
|
||
<td><p><var>black</var></p></td>
|
||
</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
|
||
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><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><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.
|
||
(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><var>300px</var></p></td>
|
||
</tr>
|
||
<tr>
|
||
<td><p><code>$nav-mobile-mode</code></p></td>
|
||
<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>
|
||
<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>
|
||
<td><p><var>hamburger</var></p></td>
|
||
</tr>
|
||
</table>
|
||
</section>
|
||
|
||
<section>
|
||
<title>Mode <em>responsive</em></title>
|
||
|
||
<p>
|
||
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>
|
||
|
||
<table shade="rows">
|
||
<tr>
|
||
<td><p><code>$mobile-limit</code></p></td>
|
||
<td><p>Largeur sous laquelle adopter le style "mobile"</p></td>
|
||
<td><p><var>800px</var></p></td>
|
||
</tr>
|
||
<tr>
|
||
<td><p><code>$mobile-width</code></p></td>
|
||
<td><p>Largeur maximale de la page "mobile"</p></td>
|
||
<td><p><var>null</var></p></td>
|
||
</tr>
|
||
<tr>
|
||
<td><p><code>$edge-gutter-mobile</code></p></td>
|
||
<td><p>Espace (« gouttière ») entre le contenu et le bord du navigateur.</p></td>
|
||
<td><p><var>$edge-gutter</var></p></td>
|
||
</tr>
|
||
<tr>
|
||
<td><p><code>$nav-mobile-limit</code></p></td>
|
||
<td><p>Largeur sous laquelle adopter la navigation "mobile"</p></td>
|
||
<td><p><var>$mobile-limit</var></p></td>
|
||
</tr>
|
||
<tr>
|
||
<td><p><code>$responsive-menu</code></p></td>
|
||
<td><p>Apparence du menu de navigation responsive, soit top-to-bottom, soit
|
||
left-to-right</p></td>
|
||
<td><p><var>top-to-bottom</var></p></td>
|
||
</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
|
||
uniquement si <code>$responsive-menu=left-to-right</code></p></td>
|
||
<td><p><var>false</var></p></td>
|
||
</tr>
|
||
<tr>
|
||
<td><p><code>$responsive-menu-mask-background</code></p></td>
|
||
<td><p>Couleur de fond du masque du menu mobile</p></td>
|
||
<td><p><var>rgba(0, 0, 0, 0.45)</var></p></td>
|
||
</tr>
|
||
<tr>
|
||
<td><p><code>$nav-button-background</code></p></td>
|
||
<td><p>Couleur de fond du bouton de navigation (menu hamburger)</p></td>
|
||
<td><p><var>$nav-active-color</var></p></td>
|
||
</tr>
|
||
<tr>
|
||
<td><p><code>$nav-button-color</code></p></td>
|
||
<td><p>Couleur des traits du bouton de navigation (menu hamburger)</p></td>
|
||
<td><p><var>$nav-menu-color</var></p></td>
|
||
</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><var>50px</var></p></td>
|
||
</tr>
|
||
<tr>
|
||
<td><p><code>$nav-menu-color</code></p></td>
|
||
<td><p>Couleur des lignes dans le menu de navigation</p></td>
|
||
<td><p><var>white</var></p></td>
|
||
</tr>
|
||
</table>
|
||
</section>
|
||
|
||
<section id="pwa">
|
||
<title>Application mobile (PWA)</title>
|
||
|
||
<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>
|
||
a pour valeur <var>bottom-bar</var>.
|
||
</p>
|
||
|
||
<table shade="rows">
|
||
<tr>
|
||
<td><p><code>$nav-mobile-bottom-bar-height</code></p></td>
|
||
<td><p>Hauteur de la barre de navigation en mode mobile.</p></td>
|
||
<td><p><var>64px</var></p></td>
|
||
</tr>
|
||
<tr>
|
||
<td><p><code>$nav-mobile-bottom-bar-background</code></p></td>
|
||
<td><p>Couleur du fond</p></td>
|
||
<td><p>white</p></td>
|
||
</tr>
|
||
<tr>
|
||
<td><p><code>$nav-mobile-bottom-bar-color</code></p></td>
|
||
<td><p>Couleur du texte</p></td>
|
||
<td><p><var>$nav-color</var></p></td>
|
||
</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><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><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><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><var>$nav-item-selected-backgroud</var></p></td>
|
||
</tr>
|
||
<tr>
|
||
<td><p><code>$nav-mobile-bottom-bar-badge-background</code></p></td>
|
||
<td><p>Couleur de fond du badge reprenant le nombre de notifications.</p></td>
|
||
<td><p>#ee2222 (rouge)</p></td>
|
||
</tr>
|
||
<tr>
|
||
<td><p><code>$nav-mobile-bottom-bar-badge-color</code></p></td>
|
||
<td><p>Couleur du texte du badge reprenant le nombre de notifications.</p></td>
|
||
<td><p>white</p></td>
|
||
</tr>
|
||
<tr>
|
||
<td><p><code>$pwa-nav-limit</code></p></td>
|
||
<td><p>Largeur sous laquelle la navigation PWA est visible</p></td>
|
||
<td><p>$mobile-limit</p></td>
|
||
</tr>
|
||
</table>
|
||
|
||
</section>
|
||
|
||
|
||
<section>
|
||
<title>Formulaires</title>
|
||
|
||
<table shade="rows">
|
||
<tr>
|
||
<td><p><code>$form-style</code></p></td>
|
||
<td><p>Style général des formulaires, soit « classic », soit « light » pour
|
||
un rendu avec les libellés plus légers et uniquement une bordure basse
|
||
pour les éléments.</p></td>
|
||
<td><p><var>classic</var></p></td>
|
||
</tr>
|
||
<tr>
|
||
<td><p><code>$form-background</code></p></td>
|
||
<td><p>Couleur de fond d’une démarche.</p></td>
|
||
<td><p><var>$body-background</var></p></td>
|
||
</tr>
|
||
<tr>
|
||
<td><p><code>$form-sidebar-position</code></p></td>
|
||
<td><p>Position du code de suivi et des étapes, « left », « right » ou
|
||
« top ».</p></td>
|
||
<td><p><var>left</var></p></td>
|
||
</tr>
|
||
<tr>
|
||
<td><p><code>$form-sidebar-width</code></p></td>
|
||
<td><p>Largeur de la barre latérale au formulaire</p></td>
|
||
<td><p><var>18.5%</var></p></td>
|
||
</tr>
|
||
<tr>
|
||
<td><p><code>$form-sidebar-gutter</code></p></td>
|
||
<td><p>Espace entre la barre latérale et le formulaire</p></td>
|
||
<td><p><var>2%</var></p></td>
|
||
</tr>
|
||
<tr>
|
||
<td><p><code>$form-titlebar-mode</code></p></td>
|
||
<td><p>Mode d’affichage du titre de la démarche, soit sur toute la largeur de
|
||
page (<var>page</var>), soit sur la largeur et aligné avec le formulaire
|
||
(<var>form</var>).</p></td>
|
||
<td><p><var>page</var></p></td>
|
||
</tr>
|
||
<tr>
|
||
<td><p><code>$form-accent-color</code></p></td>
|
||
<td><p>Couleur des cases à cocher et boutons radios natifs sélectionnés</p></td>
|
||
<td><p><var>null</var></p></td>
|
||
</tr>
|
||
<tr>
|
||
<td><p><code>$button-background</code></p></td>
|
||
<td><p>Couleur de fond des boutons</p></td>
|
||
<td><p><var>#37a7da</var></p></td>
|
||
</tr>
|
||
<tr>
|
||
<td><p><code>$button-color</code></p></td>
|
||
<td><p>Couleur du texte des boutons</p></td>
|
||
<td><p><var>blanc/noir selon $button-background</var></p></td>
|
||
</tr>
|
||
<tr>
|
||
<td><p><code>$button-border</code></p></td>
|
||
<td><p>Style de bordure des boutons</p></td>
|
||
<td><p><var>1px solid transparent</var></p></td>
|
||
</tr>
|
||
<tr>
|
||
<td><p><code>$button-hover-background</code></p></td>
|
||
<td><p>Couleur de fond des boutons au survol</p></td>
|
||
<td><p><var>$button-background</var></p></td>
|
||
</tr>
|
||
<tr>
|
||
<td><p><code>$button-hover-color</code></p></td>
|
||
<td><p>Couleur du texte des boutons au survol</p></td>
|
||
<td><p><var>$button-color</var></p></td>
|
||
</tr>
|
||
<tr>
|
||
<td><p><code>$button-border-radius</code></p></td>
|
||
<td><p>Taille de l’arrondi à appliquer aux boutons</p></td>
|
||
<td><p><var>$border-radius</var></p></td>
|
||
</tr>
|
||
<tr>
|
||
<td><p><code>$button-focus-outline</code></p></td>
|
||
<td><p>Style du contour des boutons quand ils sont actifs</p></td>
|
||
<td><p><var>$widget-focus-outline</var></p></td>
|
||
</tr>
|
||
<tr>
|
||
<td><p><code>$button-focus-outline-offset</code></p></td>
|
||
<td><p>Décalage du contour des boutons quand ils ont actifs</p></td>
|
||
<td><p><var>$widget-focus-outline-offset</var></p></td>
|
||
</tr>
|
||
<tr>
|
||
<td><p><code>$widget-background</code></p></td>
|
||
<td><p>Couleur de fond des champs de formulaire (texte, liste…)</p></td>
|
||
<td><p><var>white</var></p></td>
|
||
</tr>
|
||
<tr>
|
||
<td><p><code>$widget-color</code></p></td>
|
||
<td><p>Couleur du texte des champs de formulaire (texte, liste…)</p></td>
|
||
<td><p><var>$font-color</var></p></td>
|
||
</tr>
|
||
<tr>
|
||
<td><p><code>$widget-border</code></p></td>
|
||
<td><p>Style de bordure des champs de formulaire (texte, liste…)</p></td>
|
||
<td><p><var>1px solid #AAA</var></p></td>
|
||
</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><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><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><var>$widget-border</var></p></td>
|
||
</tr>
|
||
<tr>
|
||
<td><p><code>$widget-focus-outline</code></p></td>
|
||
<td><p>Style du contour des champs de formulaire quand ils sont actifs</p></td>
|
||
<td><p><var>none</var></p></td>
|
||
</tr>
|
||
<tr>
|
||
<td><p><code>$widget-focus-outline-offset</code></p></td>
|
||
<td><p>Décalage du contour des champs de formulaire quand ils sont actifs</p></td>
|
||
<td><p><var>0</var></p></td>
|
||
</tr>
|
||
<tr>
|
||
<td><p><code>$widget-box-shadow</code></p></td>
|
||
<td><p>Ombre des champs de formulaire</p></td>
|
||
<td><p><var>null</var></p></td>
|
||
</tr>
|
||
<tr>
|
||
<td><p><code>$widget-focus-box-shadow</code></p></td>
|
||
<td><p>Ombre des champs de formulaire quand ils sont actifs</p></td>
|
||
<td><p><var>none</var></p></td>
|
||
</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><var>0</var></p></td>
|
||
</tr>
|
||
<tr>
|
||
<td><p><code>$widget-padding</code></p></td>
|
||
<td><p>Écarts de remplissage (padding) à appliquer aux champs de formulaire
|
||
et aux boutons.</p></td>
|
||
<td><p><var>0.4em 0.7em</var></p></td>
|
||
</tr>
|
||
<tr>
|
||
<td><p><code>$widget-custom-radio-checkbox</code></p></td>
|
||
<td><p>Rendu personnalisé des cases à cocher et des boutons radios (plutôt
|
||
que le rendu standard proposé par le navigateur).</p></td>
|
||
<td><p><var>false</var></p></td>
|
||
</tr>
|
||
<tr>
|
||
<td><p><code>$widget-custom-radio-checkbox-color</code></p></td>
|
||
<td><p>Couleur des cases à cocher et boutons radios (bordure et marqueur)
|
||
quand leur rendu est personnalisé.</p></td>
|
||
<td><p><var>$button-background</var></p></td>
|
||
</tr>
|
||
<tr>
|
||
<td><p><code>$widget-custom-radio-checkbox-border-color</code></p></td>
|
||
<td><p>Couleur de la bordure des cases à cocher et boutons radios
|
||
quand leur rendu est personnalisé.</p></td>
|
||
<td><p><var>$widget-custom-radio-checkbox-color</var></p></td>
|
||
</tr>
|
||
<tr>
|
||
<td><p><code>$widget-custom-radio-checkbox-marker-color</code></p></td>
|
||
<td><p>Couleur du marqueur des cases à cocher et des boutons radios
|
||
cochés quand leur rendu est personnalisé.</p></td>
|
||
<td><p><var>$widget-custom-radio-checkbox-color</var></p></td>
|
||
</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 à
|
||
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>
|
||
<td><p><var>bottom</var></p></td>
|
||
</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>
|
||
<td><p><var>null</var></p></td>
|
||
</tr>
|
||
<tr>
|
||
<td><p><code>$buttons-alignment</code></p></td>
|
||
<td><p>Alignement des boutons. Toutes valeurs CSS de <code>justify-content</code></p>
|
||
</td>
|
||
<td><p><var>null</var></p></td>
|
||
</tr>
|
||
<tr>
|
||
<td><p><code>$buttons-with-icons</code></p></td>
|
||
<td><p>Ajoute des icônes aux boutons des formulaires des demandes.</p>
|
||
</td>
|
||
<td><p><var>false</var></p></td>
|
||
</tr>
|
||
<tr>
|
||
<td><p><code>$timetable-cell-background</code></p></td>
|
||
<td><p>Couleur de fond des créneaux horaires.</p>
|
||
</td>
|
||
<td><p><var>transparentize($button-background, 0.8)</var></p></td>
|
||
</tr>
|
||
<tr>
|
||
<td><p><code>$timetable-cell-hover-color</code></p></td>
|
||
<td><p>Couleur du texte au survol des créneaux horaires.</p>
|
||
</td>
|
||
<td><p><var>$button-color</var></p></td>
|
||
</tr>
|
||
<tr>
|
||
<td><p><code>$timetable-cell-hover-background</code></p></td>
|
||
<td><p>Couleur de fond au survol des créneaux horaires.</p>
|
||
</td>
|
||
<td><p><var>$button-background</var></p></td>
|
||
</tr>
|
||
<tr>
|
||
<td><p><code>$timetable-cell-selected-color</code></p></td>
|
||
<td><p>Couleur du texte du créneau horaire selectionné.</p>
|
||
</td>
|
||
<td><p><var>$timetable-cell-hover-color</var></p></td>
|
||
</tr>
|
||
<tr>
|
||
<td><p><code>$timetable-cell-selected-background</code></p></td>
|
||
<td><p>Couleur de fond du créneau horaire selectionné.</p>
|
||
</td>
|
||
<td><p><var>$timetable-cell-hover-background</var></p></td>
|
||
</tr>
|
||
</table>
|
||
</section>
|
||
|
||
<section>
|
||
<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.
|
||
</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 :
|
||
</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>.
|
||
</list>
|
||
<p>
|
||
Plusieurs options sont également disponibles pour gérer le rendu du <em>marqueur d’étape</em> (chiffre).
|
||
</p>
|
||
|
||
<table shade="rows">
|
||
<tr>
|
||
<td><p><code>$wcs-steps-background</code></p></td>
|
||
<td><p>Couleur de fond du bloc</p></td>
|
||
<td><p><var>transparent</var></p></td>
|
||
</tr>
|
||
<tr>
|
||
<td><p><code>$wcs-steps-spacing</code></p></td>
|
||
<td>
|
||
<p>Fixe la taille des espacements entre les différents blocs, mais également entre les marqueurs chiffres et leur label</p>
|
||
</td>
|
||
<td><p><var>0.35rem</var></p></td>
|
||
</tr>
|
||
<tr>
|
||
<td><p><code>$wcs-step-color</code></p></td>
|
||
<td><p>Couleur du texte des étapes non courantes</p></td>
|
||
<td><p><var>#868686</var></p></td>
|
||
</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><var>$primary-color</var></p></td>
|
||
</tr>
|
||
<tr>
|
||
<td><p><code>$wcs-step-background</code></p></td>
|
||
<td><p>Couleur de fond des étapes</p></td>
|
||
<td><p><var>transparent</var></p></td>
|
||
</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><var>$wcs-step-background</var></p></td>
|
||
</tr>
|
||
<tr>
|
||
<td><p><code>$wcs-step-border-bottom</code></p></td>
|
||
<td>
|
||
<p>
|
||
Épaisseur et couleur du filet qui sépare les étapes en mode vertical et du filet présent sous les marqueurs en mode horizontal.
|
||
la valeur <var>none</var> supprimera les filets.
|
||
</p>
|
||
</td>
|
||
<td><p><var>1px solid $wcs-step-color</var></p></td>
|
||
</tr>
|
||
<tr>
|
||
<td><p><code>$wcs-step-current-border-bottom</code></p></td>
|
||
<td>
|
||
<p>
|
||
É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>
|
||
<td><p><var>3px solid $wcs-step-current-color</var></p></td>
|
||
</tr>
|
||
<tr>
|
||
<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>.
|
||
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>
|
||
<td><p><var>false</var></p></td>
|
||
</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><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><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><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><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><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><var>1</var></p></td>
|
||
</tr>
|
||
<tr>
|
||
<td><p><code>$wcs-step-marker-type</code></p></td>
|
||
<td>
|
||
<p>
|
||
Défini le style des marqueurs. Les marqueurs peuvent être sous forme de carrés (par défaut), de cercles mais également liés entre eux (par une ligne).
|
||
Valeurs possibles: <var>tied</var>, <var>disc</var>, <var>disc tied</var>.
|
||
Il est possible de gérer le rendu de la ligne avec les variables <code>$wcs-step-marker-tie-color</code> et <code>$wcs-step-marker-tie-width</code>
|
||
</p>
|
||
</td>
|
||
<td><p><var>square</var></p></td>
|
||
</tr>
|
||
<tr>
|
||
<td><p><code>$wcs-step-marker-background-type</code></p></td>
|
||
<td>
|
||
<p>
|
||
Cette option ne fonctionnera que si <code>$wcs-step-marker-background</code> est une couleur pleine.
|
||
Avec la valeur <var>gradient</var>, elle permet de générer un dégradé en fond des marqueurs non courant permettant de souligner visuellement la progression.
|
||
</p>
|
||
</td>
|
||
<td><p><var>solid</var></p></td>
|
||
</tr>
|
||
<tr>
|
||
<td><p><code>$wcs-step-current-label-color</code></p></td>
|
||
<td>
|
||
<p>
|
||
Cette option ne fonctionnera que si <code>$wcs-step-marker-background</code> est une couleur pleine.
|
||
Avec la valeur <var>gradient</var>, elle permet de générer un dégradé en fond des marqueurs non courant permettant de souligner visuellement la progression.
|
||
</p>
|
||
</td>
|
||
<td><p><var>$wcs-step-current-color</var></p></td>
|
||
</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><var>solid</var></p></td>
|
||
</tr>
|
||
<tr>
|
||
<td><p><var>$wcs-steps-small-layout-limit</var></p></td>
|
||
<td><p>Fixe la valeur du point de rupture entre le rendu mobile et horizontal</p></td>
|
||
<td><p><var>$very-small-limit</var></p></td>
|
||
</tr>
|
||
</table>
|
||
</section>
|
||
|
||
<section>
|
||
<title>Cellules</title>
|
||
|
||
<table shade="rows">
|
||
<tr>
|
||
<td><p><code>$cell-background</code></p></td>
|
||
<td><p>Couleur de fond des cellules</p></td>
|
||
<td><p><var>white</var></p></td>
|
||
</tr>
|
||
<tr>
|
||
<td><p><code>$cell-border</code></p></td>
|
||
<td><p>Bordure des cellules</p></td>
|
||
<td><p><var>1px solid #ccc</var></p></td>
|
||
</tr>
|
||
<tr>
|
||
<td><p><code>$cell-border-radius</code></p></td>
|
||
<td><p>Taille de l’arrondi des cellules</p></td>
|
||
<td><p><var>$border-radius</var></p></td>
|
||
</tr>
|
||
<tr>
|
||
<td><p><code>$cell-color</code></p></td>
|
||
<td><p>Couleur du texte des cellules</p></td>
|
||
<td><p><var>inherit</var></p></td>
|
||
</tr>
|
||
<tr>
|
||
<td><p><code>$cell-entry-border-color</code></p></td>
|
||
<td><p>Bordure des éléments de cellule</p></td>
|
||
<td><p><var>1px solid #ccc</var></p></td>
|
||
</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><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><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><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><var>inherit</var></p></td>
|
||
</tr>
|
||
<tr>
|
||
<td><p><code>$cell-entry-hover-effect</code></p></td>
|
||
<td><p>Effet au survol des éléments dans les cellules, none pour un fond
|
||
directement uni, left-to-right pour faire apparaitre celui-ci de gauche à
|
||
droit, right-to-left de droite à gauche, top-to-bottom de haut en bas,
|
||
bottom-to-top de bas en haut et middle-to-edges, horizontalement du milieu
|
||
vers les bords.</p></td>
|
||
<td><p><var>none</var></p></td>
|
||
</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><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><var>0.5rem</var></p></td>
|
||
</tr>
|
||
<tr>
|
||
<td><p><code>$cell-title-cover-border</code></p></td>
|
||
<td><p>Détermine si le titre des cellules doit couvrir la bordure</p></td>
|
||
<td><p><var>true</var></p></td>
|
||
</tr>
|
||
<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>
|
||
<td><p><var>none</var></p></td>
|
||
</tr>
|
||
</table>
|
||
</section>
|
||
|
||
<section>
|
||
<title>Messages</title>
|
||
|
||
<p>
|
||
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
|
||
à 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><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><var>top</var></p></td>
|
||
</tr>
|
||
</table>
|
||
</section>
|
||
|
||
<section>
|
||
<title>Carrousels</title>
|
||
|
||
<p>
|
||
Une cellule menu prendra la forme « carrousel » si elle est définie avec
|
||
« carrousel » comme slug.
|
||
</p>
|
||
|
||
<table shade="rows">
|
||
<tr>
|
||
<td><p><code>$carrousel-height</code></p></td>
|
||
<td><p>Hauteur du carrousel</p></td>
|
||
<td><p><var>20rem</var></p></td>
|
||
</tr>
|
||
<tr>
|
||
<td><p><code>$carrousel-text-position</code></p></td>
|
||
<td><p>Position du texte des différentes pages; indiqué par 2 valeurs
|
||
séparées par un espace. La première indique le positionnement vertical
|
||
(<var>left</var>, <var>middle</var> ou <var>right</var>),
|
||
la seconde le positionnement horizontal (<var>top</var>, <var>middle</var>
|
||
ou <var>bottom</var>).</p></td>
|
||
<td><p>Exemple : <var>top right</var></p></td>
|
||
</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><var>visible</var></p></td>
|
||
</tr>
|
||
<tr>
|
||
<td><p><code>$carrousel-navigation-color</code></p></td>
|
||
<td><p>Couleur des éléments de navigation (disque et flêches)</p></td>
|
||
<td><p><var>$button-color</var></p></td>
|
||
</tr>
|
||
<tr>
|
||
<td><p><code>$carrousel-navigation-bullet-border</code></p></td>
|
||
<td><p>Bordure du disque de navigation.</p></td>
|
||
<td><p><var>1px solid white</var></p></td>
|
||
</tr>
|
||
<tr>
|
||
<td><p><code>$carrousel-navigation-bullet-color</code></p></td>
|
||
<td><p>Couleur du disque de navigation.</p></td>
|
||
<td><p><var>$carrousel-navigation-color</var></p></td>
|
||
</tr>
|
||
<tr>
|
||
<td><p><code>$carrousel-navigation-bullet-size</code></p></td>
|
||
<td><p>Taille du disque de navigation.</p></td>
|
||
<td><p><var>10px</var></p></td>
|
||
</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><var>visible</var></p></td>
|
||
</tr>
|
||
<tr>
|
||
<td><p><code>$carrousel-arrows-color</code></p></td>
|
||
<td><p>Couleur des flèches de navigation.</p></td>
|
||
<td><p><var>$carrousel-navigation-color</var></p></td>
|
||
</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><var>rgba(0, 0, 0, 0.3)</var></p></td>
|
||
</tr>
|
||
</table>
|
||
|
||
</section>
|
||
|
||
<section>
|
||
<title>Tableaux</title>
|
||
|
||
<p>
|
||
Ces paramètres contrôlent l’apparence des tableaux sur lesquels la
|
||
classe pk-data-table est appliquée.
|
||
</p>
|
||
|
||
<table shade="rows">
|
||
<tr>
|
||
<td><p><code>$table-caption-color</code></p></td>
|
||
<td><p>Couleur du texte de la légende des tableaux</p></td>
|
||
<td><p><var>$title-color</var></p></td>
|
||
</tr>
|
||
<tr>
|
||
<td><p><code>$table-caption-side</code></p></td>
|
||
<td><p>Position de la légende par rapport au tableau; les valeurs possibles sont
|
||
top (au-dessus) et bottom (en-dessous).</p></td>
|
||
<td><p><var>top</var></p></td>
|
||
</tr>
|
||
</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
|
||
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><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><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><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><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><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><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><var>$title-transform</var></p></td>
|
||
</tr>
|
||
</table>
|
||
</section>
|
||
|
||
<section>
|
||
<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
|
||
</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><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><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><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><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><var>vertical</var></p></td>
|
||
</tr>
|
||
</table>
|
||
|
||
</section>
|
||
|
||
|
||
</page>
|