<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>$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>$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>$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-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>$top-logo-width</code></p></td>
  <td><p>Largeur du logo</p></td>
  <td><p><var>0</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>0</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>$notification-style</code></p></td>
  <td><p>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.</p></td>
  <td><p><var>classic</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>
</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-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-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-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-mode</code></p></td>
  <td><p>Mode d'affichage du menu survolé, 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-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>$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>$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>
</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-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>$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-color-background</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>$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>white</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-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-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 quand leur rendu est
  personnalisé.</p></td>
  <td><p><var>$button-background</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>
</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>Couleur de la bordure des éléments de cellule</p></td>
  <td><p><var>#ccc</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 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.</p></td>
  <td><p><var>none</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>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; les valeurs possibles sont
  middle (milieu de page) et bottom-left (en bas à gauche).</p></td>
  <td><p><var>middle</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-bullet-color</code></p></td>
  <td><p>Couleur du disque de navigation.</p></td>
  <td><p><var>$button-color</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>
</table>

</section>

</page>
