Documentation en ligne

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

$font-family

Famille de police du texte

sans-serif

$width

Largeur maximale de la page

1000px

$footer-background

Couleur de fond du pied de page

#666666

$footer-color

Couleur du texte du pied de page

white

$top-logo-width

Largeur du logo

0

$border-radius

Taille de l'arrondi à appliquer à différents éléments

0

$sidebar-position

Position de la barre latérale (left/right)

left

$sidebar-width

Largeur de la barre latérale

300px

$notification-style

Rendu des notifications (messages, erreurs, etc.), soit « classic » soit « border-icon » pour un rendu plaçant l'icône en couleur sur une bordure à gauche.

classic

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

$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

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

$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-color-background

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

white

$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-border-radius

Taille de l'arrondi à appliquer aux champs de formulaire (texte, liste…)

0

$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 quand leur rendu est personnalisé.

$button-background

$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

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

Couleur de la bordure des éléments de cellule

#ccc

$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

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; les valeurs possibles sont middle (milieu de page) et bottom-left (en bas à gauche).

middle

$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

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

Dernière mise à jour le 14 octobre 2019 22:23 — Éditer