<info> <name>Frédéric Péters</name> <email>fpeters@entrouvert.com</email> </info>

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.

Généralités

`$body-background` | Couleur de fond de page | white
`$font-color` | Couleur du texte | #333
`$link-color` | Couleur des liens | #028
`$link-hover-decoration` | Décoration au survol des liens | underline
`$font-family` | Famille de police du texte | sans-serif
`$width` | Largeur maximale de la page | 1000px
`$header-background-color` | Couleur de fond de l'entête de la page | null
`$header-full-width-background` | 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) | true
`$header-logo-size` | Taille du logo de l'entête. 2 valeurs sont attendues : largeur et hauteur (ex: `150px 75px`). | null
`$show-site-title` | Afficher le titre du site. Le titre est masqué par défaut lorsqu'un logo est défini. `true` ou `false` | null
`$footer-background` | Couleur de fond du pied de page | #666666
`$footer-full-width-background` | Extension de la couleur de fond du pied de page à la largeur de l'écran (plutôt que la largeur du contenu). | true
`$footer-color` | Couleur du texte du pied de page | white
`$footer-link-color` | Couleur des liens du pied de page | $link-color
`$border-radius` | Taille de l'arrondi à appliquer à différents éléments | null
`$sidebar-position` | Position de la barre latérale (left/right) | left
`$sidebar-width` | Largeur de la barre latérale | 300px
`$sidebar-max-width` | Largeur maximale de la barre latérale, utile dans le cas où la valeur de `$sidebar-width` est définie en % | $sidebar-width
`$sidebar-min-width` | Largeur minimale de la barre latérale, utile dans le cas où la valeur de `$sidebar-width` est définie en % | 0
`$columns-gutter` | Espace (« gouttière ») entre les colonnes des modèles de page. | 20px
`$sidebar-columns-gutter` | Espace (« gouttière ») entre la barre latérale et les colonnes. | $columns-gutter
`$grid-gutter` | Espace (« gouttière ») entre les éléments disposés en grille. | 1rem

Titres

`$title-background` | Couleur de fond des titres | white
`$title-color` | Couleur du texte des titres | black
`$title-transform` | Transformation des caractères des titres | none
`$title-font-family` | Famille de police pour les titres | $font-family
`$title-font-size` | Taille de la police des titres | $font-size * 1.1
`$title-font-style` | Style de la police des titres | normal
`$title-padding` | Padding des titres | 0.7rem 1rem
`$title-weight` | Graisse de la police des titres | normal
`$title-border-bottom` | Bordure pour le bas des titres | 0
`$title-border-radius` | Taille de l'arrondi à appliquer aux titres | $border-radius
`$title-border-top` | Bordure pour le haut des titres | 0

Navigation

Ces paramètres contrôlent l'apparence de la barre de navigation.

`$nav-background` | Couleur de fond | white
`$nav-full-width-background` | Extension de la couleur de fond de la navigation à la largeur de l'écran (plutôt que la largeur du contenu). | false
`$nav-color` | Couleur du texte | black
`$nav-active-color` | Couleur "active", utilisée comme valeur par défaut pour des éléments ci-dessous | #005EA9
`$nav-border-color` | Couleur des bordures | $nav-active-color
`$nav-border-radius` | Taille de l'arrondi de la navigation | $border-radius
`$nav-height` | Hauteur | 3em
`$nav-item-background` | Couleur de fond des éléments | transparent
`$nav-item-selected-background` | Couleur de fond de la page active | $nav-active-color
`$nav-item-selected-color` | Couleur du texte de la page active | $nav-menu-color
`$nav-item-hover-background` | Couleur de fond d'un élément au survol | $nav-item-selected-background
`$nav-item-hover-color` | Couleur du texte d'un élément au survol | $nav-item-selected-color
`$nav-item-spacing` | Espace entre les éléments | 0px
`$nav-mobile-menu-background` | Couleur de fond du menu en mode mobile | #eee
`$nav-mobile-menu-item-color` | Couleur des entrées du menu en mode mobile | black
`$nav-item-selected-mode` | 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. | background
`$nav-item-selected-border` | Style de la bordure de l'élément sélectionné. | 2px solid $nav-active-color
`$nav-item-hover-mode` | Mode d'affichage du menu survolé, soit background pour en changer la couleur du fond, soit bottom-border pour ajouter une bordure sous lui. | background
`$nav-item-hover-border` | Style de la bordure de l'élément survolé. | $nav-item-selected-border
`$nav-after-image` | Ajout sous la navigation d'un bandeau avec l'image associée à la page. (ne fonctionne pas avec Internet Explorer) | true
`$nav-after-image-height` | Hauteur de l'éventuel bandeau image. | 300px
`$nav-mobile-mode` | Rendu de la navigation en mode mobile, none pour conserver le rendu « desktop », hamburger pour placer la navigation dans un menu « hamburger », bottom-bar pour placer la navigation dans une barre en bas d'écran, hidden pour cacher la navigation. Les paramètres supplémentaires pour le rendu bottom-bar sont détaillés dans la section application mobile. | hamburger

Mode <em>responsive</em>

Ces paramètres contrôlent l'apparence de différents éléments quand la largeur de la fenêtre est sous une certaine taille.

`$mobile-limit` | Largeur sous laquelle adopter le style "mobile" | 800px
`$mobile-width` | Largeur maximale de la page "mobile" | null
`$nav-mobile-limit` | Largeur sous laquelle adopter la navigation "mobile" | $mobile-limit
`$responsive-menu` | Apparence du menu de navigation responsive, soit top-to-bottom, soit left-to-right | top-to-bottom
`$nav-button-background` | Couleur de fond du bouton de navigation (menu hamburger) | $nav-active-color
`$nav-button-color` | Couleur des traits du bouton de navigation (menu hamburger) | $nav-menu-color
`$nav-menu-side` | Taille d'un bord du bouton de navigation | 50px
`$nav-menu-color` | Couleur des lignes dans le menu de navigation | white

Application mobile (PWA)

Ces paramètres contrôlent le rendu de la barre de navigation de bas d'écran, présente en mode mobile quand `$nav-mobile-mode` a pour valeur bottom-bar.

`$nav-mobile-bottom-bar-height` | Hauteur de la barre de navigation en mode mobile. | 64px
`$nav-mobile-bottom-bar-background` | Couleur du fond | white
`$nav-mobile-bottom-bar-color` | Couleur du texte | $nav-color
`$nav-mobile-bottom-bar-item-hover-background` | Couleur de fond d'un élément au survol | $nav-item-hover-background
`$nav-mobile-bottom-bar-item-hover-color` | Couleur du texte d'un élément au survol | $nav-item-hover-color
`$nav-mobile-bottom-bar-item-selected-background` | Couleur de fond de l'élément actif | $nav-item-selected-backgroud
`$nav-mobile-bottom-bar-item-selected-color` | Couleur du texte de l'élément actif | $nav-item-selected-backgroud
`$nav-mobile-bottom-bar-badge-background` | Couleur de fond du badge reprenant le nombre de notifications. | #ee2222 (rouge)
`$nav-mobile-bottom-bar-badge-color` | Couleur du texte du badge reprenant le nombre de notifications. | white
`$pwa-nav-limit` | Largeur sous laquelle la navigation PWA est visible | $mobile-limit

Formulaires

`$form-style` | 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. | classic
`$form-sidebar-position` | Position du code de suivi et des étapes, « left », « right » ou « top ». | left
`$form-sidebar-width` | Largeur de la barre latérale au formulaire | 18.5%
`$form-sidebar-gutter` | Espace entre la barre latérale et le formulaire | 2%
`$form-titlebar-mode` | Mode d’affichage du titre de la démarche, soit sur toute la largeur de page (page), soit sur la largeur et aligné avec le formulaire (form). | page
`$form-accent-color` | Couleur des cases à cocher et boutons radios natifs sélectionnés | null
`$button-background` | Couleur de fond des boutons | #37a7da
`$button-color` | Couleur du texte des boutons | blanc/noir selon $button-background
`$button-border` | Style de bordure des boutons | 1px solid transparent
`$button-hover-background` | Couleur de fond des boutons au survol | $button-background
`$button-hover-color` | Couleur du texte des boutons au survol | $button-color
`$button-border-radius` | Taille de l'arrondi à appliquer aux boutons | $border-radius
`$button-focus-outline` | Style du contour des boutons quand ils sont actifs | $widget-focus-outline
`$button-focus-outline-offset` | Décalage du contour des boutons quand ils ont actifs | $widget-focus-outline-offset
`$widget-background` | Couleur de fond des champs de formulaire (texte, liste…) | white
`$widget-color` | Couleur du texte des champs de formulaire (texte, liste…) | $font-color
`$widget-border` | Style de bordure des champs de formulaire (texte, liste…) | 1px solid #AAA
`$widget-focus-background` | Couleur de fond des champs de formulaire lorsqu'ils sont actifs (texte, liste…) | $widget-background
`$widget-focus-color` | Couleur du texte des champs de formulaire lorsqu'ils sont actifs (texte, liste…) | $widget-color
`$widget-focus-border` | Style de bordure des champs de formulaire lorsqu'ils sont actifs (texte, liste…) | $widget-border
`$widget-focus-outline` | Style du contour des champs de formulaire quand ils sont actifs | none
`$widget-focus-outline-offset` | Décalage du contour des champs de formulaire quand ils sont actifs | 0
`$widget-box-shadow` | Ombre des champs de formulaire | null
`$widget-focus-box-shadow` | Ombre des champs de formulaire quand ils sont actifs | none
`$widget-border-radius` | Taille de l'arrondi à appliquer aux champs de formulaire (texte, liste…) | 0
`$widget-padding` | Écarts de remplissage (padding) à appliquer aux champs de formulaire et aux boutons. | 0.4em 0.7em
`$widget-custom-radio-checkbox` | Rendu personnalisé des cases à cocher et des boutons radios (plutôt que le rendu standard proposé par le navigateur). | false
`$widget-custom-radio-checkbox-color` | Couleur des cases à cocher et boutons radios (bordure et marqueur) quand leur rendu est personnalisé. | $button-background
`$widget-custom-radio-checkbox-border-color` | Couleur de la bordure des cases à cocher et boutons radios quand leur rendu est personnalisé. | $widget-custom-radio-checkbox-color
`$widget-custom-radio-checkbox-marker-color` | Couleur du marqueur des cases à cocher et des boutons radios cochés quand leur rendu est personnalisé. | $widget-custom-radio-checkbox-color
`$widget-unique-checkbox-position` | 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é. | bottom
`$buttons-order` | Ordre particulier des boutons. Indiquer les boutons (`submit`, `cancel`, `previous`) dans l'ordre souhaité séparé par des vigules. Ajouter l'option `(grow)` après l'identifiant d'un bouton va pousser le⋅s bouton⋅s suivant⋅s sur la droite (ex: `previous, cancel (grow), submit`). | null
`$buttons-alignment` | Alignement des boutons. Toutes valeurs CSS de `justify-content` | null
`$timetable-cell-background` | Couleur de fond des créneaux horaires. | transparentize($button-background, 0.8)
`$timetable-cell-hover-color` | Couleur du texte au survol des créneaux horaires. | $button-color
`$timetable-cell-hover-background` | Couleur de fond au survol des créneaux horaires. | $button-background
`$timetable-cell-selected-color` | Couleur du texte du créneau horaire selectionné. | $timetable-cell-hover-color
`$timetable-cell-selected-background` | Couleur de fond du créneau horaire selectionné. | $timetable-cell-hover-background

Bloc étapes d'une démarche

Ces paramètres contrôlent le rendu du bloc présentant les étapes ou pages d'une démarche.

Le rendu de ce bloc diffère automatiquement en fonction de la taille de l'écran et de la position de la sidebar `$form-sidebar-position` pour s'adapter aux différents terminaux :

<list> <item>

rendu mobile : seul l'étape courante est affichée avec une indication du nombre totale d'étapes ;

</item> <item>

rendu horizontal :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 ;

</item> <item>

rendu vertical : (s'affiche uniquement si la variable `$form-sidebar-position` a la valeur left ou right) dispose les étapes les unes au dessous des autres avec chacune leur numéro et leur label

</item>. </list>

Plusieurs options sont également disponibles pour gérer le rendu du marqueur d'étape (chiffre).

`$wcs-steps-background` | Couleur de fond du bloc | transparent
`$wcs-steps-spacing` | Fixe la taille des espacements entre les différents blocs, mais également entre les marqueurs chiffres et leur label | 0.35rem
`$wcs-step-color` | Couleur du texte des étapes non courantes | #868686
`$wcs-step-current-color` | Couleur du texte de l'étape courantes | $primary-color
`$wcs-step-background` | Couleur de fond des étapes | transparent
`$wcs-step-current-background` | Couleur de fond de l'étape courante | $wcs-step-background
`$wcs-step-border-bottom` | É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 none supprimera les filets. | 1px solid $wcs-step-color
`$wcs-step-current-border-bottom` | Épaisseur et couleur du filet de l'étape courante. Si `$wcs-step-border-bottom` est à none, ce filet sera automatiquement none également. | 3px solid $wcs-step-current-color
`$wsc-step-before-piled` | Cette option n'est valable qu'en mode vertical et si `$wcs-step-background` a une valeur différente de transparent. Avec la valeur true, elle va superposer les étapes passée les unes sur les autres pour gagner de la place. | false
`$wcs-step-marker-color` | Couleur du chiffre des marqueurs d'étapes non courantes | $wcs-step-color
`$wcs-step-current-marker-color` | Couleur du chiffre du marqueur d'étape courante | $wcs-step-current-color
`$wcs-step-marker-background` | Couleur de fond des marqueurs d'étapes non courantes | $wcs-step-background
`$wcs-step-current-marker-background` | Couleur de fond du marqueur d'étape courante | $wcs-step-current-background
`$wcs-step-marker-size` | Taille du marqueur. La taille du marquer n'influe pas sur la taille du chiffre | 2.1em
`$wcs-step-current-marker-enlarge` | Facteur d'agrandissement de la taille du marqueur courant. Une valeur de 1.1 agrandira le marqueur de 110% | 1
`$wcs-step-marker-type` | 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: tied, disc, disc tied. Il est possible de gérer le rendu de la ligne avec les variables `$wcs-step-marker-tie-color` et `$wcs-step-marker-tie-width` | square
`$wcs-step-marker-background-type` | Cette option ne fonctionnera que si `$wcs-step-marker-background` est une couleur pleine. Avec la valeur gradient, elle permet de générer un dégradé en fond des marqueurs non courant permettant de souligner visuellement la progression. | solid
`$wcs-step-current-label-color` | Cette option ne fonctionnera que si `$wcs-step-marker-background` est une couleur pleine. Avec la valeur gradient, elle permet de générer un dégradé en fond des marqueurs non courant permettant de souligner visuellement la progression. | $wcs-step-current-color
$wcs-step-current-color | Couleur du label de l'étape courante | solid
$wcs-steps-small-layout-limit | Fixe la valeur du point de rupture entre le rendu mobile et horizontal | $very-small-limit

Cellules

`$cell-background` | Couleur de fond des cellules | white
`$cell-border` | Bordure des cellules | 1px solid #ccc
`$cell-border-radius` | Taille de l'arrondi des cellules | $border-radius
`$cell-color` | Couleur du texte des cellules | inherit
`$cell-entry-border-color` | Bordure des éléments de cellule | 1px solid #ccc
`$cell-entry-font-weight` | Graisse du texte (lien) d'un élément | normal
`$cell-entry-color` | Couleur du texte (lien) d'un élément | $link-color
`$cell-entry-hover-background` | Couleur de fond d'un élément survolé | inherit
`$cell-entry-hover-color` | Couleur du texte d'un élément survolé | inherit
`$cell-entry-hover-effect` | Effet au survol des éléments dans les cellules, none pour un fond directement uni, left-to-right pour faire apparaître 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. | none
`$cell-image-position` | Position de l'image qui peut être associée à une cellule « démarches d'une catégorie », les valeurs possibles sont top pour avoir l'image en haut de cellule et after-title pour avoir l'image après le titre de cellule. | after-title
`$cell-image-padding` | Espace autour de l'image qui peut être associée à une cellule « démarches d'une catégorie ». | 0.5rem
`$cell-title-cover-border` | Détermine si le titre des cellules doit couvrir la bordure | true
`$footer-menucell-separator` | Style de bordure utilisée comme séparateur vertical entre les entrées d'une cellule menu placée dans le pied de page | none

Messages

Options pour paraméter l'affichage des messages. 4 types de messages : succès, information, avertissement, erreur.

`$notification-style` | 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. | classic
`$notification-icon-size` | Taille de l'icône illustrant le message | 1.5rem ou 2rem
`$notification-icon-position` | Position vertical de l'icône du message. « top » ou « center ». | top

Carrousels

Une cellule menu prendra la forme « carrousel » si elle est définie avec « carrousel » comme slug.

`$carrousel-height` | Hauteur du carrousel | 20rem
`$carrousel-text-position` | Position du texte des différentes pages; indiqué par 2 valeurs séparées par un espace. La première indique le positionnement vertical (left, middle ou right), la seconde le positionnement horizontal (top, middle ou bottom). | Exemple : top right
`$carrousel-navigation` | Détermine si la navigation permettant de passer d'un élément à l'autre est affichée. (visible ou none) | visible
`$carrousel-navigation-bullet-border` | Bordure du disque de navigation. | 1px solid white
`$carrousel-navigation-bullet-color` | Couleur du disque de navigation. | $button-color
`$carrousel-navigation-bullet-size` | Taille du disque de navigation. | 10px
`$carrousel-arrows` | Détermine si les flèches (gauche/droite) permettant de passer d'un élément à l'autre sont affichées. (visible ou none) | visible
`$carrousel-item-mask-color` | Couleur du masque qui se superpose à l'image de la diapositive | rgba(0, 0, 0, 0.3)

Tableaux

Ces paramètres contrôlent l'apparence des tableaux sur lesquels la classe pk-data-table est appliquée.

`$table-caption-color` | Couleur du texte de la légende des tableaux | $title-color
`$table-caption-side` | Position de la légende par rapport au tableau; les valeurs possibles sont top (au-dessus) et bottom (en-dessous). | top

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).

`$table-headers-background` | Couleur de fond de l'entête | $title-background
`$table-headers-color` | Couleur du texte de l'entête | $title-color
`$table-headers-font-style` | Style de la police de l'entête | $title-font-style
`$table-headers-font-size` | Taille de la police de l'entête | $title-font-size
`$table-headers-font-weight` | Graisse de la police de l'entête | $title-weight
`$table-headers-font-family` | Famille de police de l'entête | $title-font-family
`$table-headers-text-transform` | Transformation des caractères de l'entête | $title-transform

Retour en haut

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

`$back-top-display` | Condition d'affichage du bouton. Valeurs possibles: mobile-only, block, inline, none. | none
`$back-top-icon-character` | Caractère UTF-8 de l'icône du bouton. | "\f102"(icone "angle-double-top")
`$back-top-icon-size` | Taille de l'icône. | 2.5em
`$back-top-icon-label-space` | Espace entre l'icône et le label du bouton | 0.33em
`$back-top-layout-direction` | Position de l'icône par rapport au label. Soit vertical : icône au dessus du label, soit horizontal: icône à côté du label | vertical