Infrastructure SCSS

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-color	Couleur au survol des liens	null
$link-decoration	Décoration des liens	none
$link-hover-decoration	Décoration au survol des liens	underline
$font-family	Famille de police du texte	sans-serif
$font-size	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 à 100%.	100%
$font-line-height	Hauteur de l’interlignage du corps de texte	1.4
$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
$edge-gutter	Espace (« gouttière ») entre le contenu et le bord du navigateur.	legacy
$grid-gutter	Espace (« gouttière ») entre les éléments disposés en grille.	1rem
$zebra-color	Couleur d’arrière-plan par défaut des zebras	hsla(0, 0%, 0%, 0.06)

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-text-transform	Transformation des caractères des entrées du menu	none
$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-font-family	Famille de police de la navigation	null
$nav-font-style	Style de la police de la navigation	null
$nav-font-size	Taille de la police de la navigation	null
$nav-font-weight	Graisse de la police de la navigation	bold
$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-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 responsive

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
$edge-gutter-mobile	Espace (« gouttière ») entre le contenu et le bord du navigateur.	$edge-gutter
$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
$responsive-menu-mask	Affichage d’un masque lorsque le menu mobile est déplié. Valable uniquement si $responsive-menu=left-to-right	false
$responsive-menu-mask-background	Couleur de fond du masque du menu mobile	rgba(0, 0, 0, 0.45)
$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-background	Couleur de fond d’une démarche.	$body-background
$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-font-weight	Graisse du texte des boutons	null
$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
$buttons-with-icons	Ajoute des icônes aux boutons des formulaires des demandes.	false
$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 :

rendu mobile : seul l’étape courante est affichée avec une indication du nombre totale d’étapes ;
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 ;
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

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 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.	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-color	Couleur des éléments de navigation (disque et flêches)	$button-color
$carrousel-navigation-bullet-border	Bordure du disque de navigation.	1px solid white
$carrousel-navigation-bullet-color	Couleur du disque de navigation.	$carrousel-navigation-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-arrows-color	Couleur des flèches de navigation.	$carrousel-navigation-color
$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

Documentation en ligne