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