sutter/helloFront

extends ../../../layout/styleguide

append config
  - var template = 't-styleguide'
  - var title = "Utils de couleur de texte"
  - var metaDesc = "Utils de couleur de texte - CSS"
  - var path = './../../'

block content
  .hf-head
    .hf-wrapper
      h1 Text Color
  .hf-content.hf-wrapper
    h2 Documentation
    p Les utilitaires de couleurs permettent de modifier les couleurs des éléments.
  .hf-content.hf-wrapper
    h3 Couleur : Light (blanc)
    table
      thead
        tr
          th Class
          th Rendu
      tbody
        tr
          td
            code .u-text-color-light
          td.u-text-color-light lorem ipsum dolor
  .hf-content.hf-wrapper
    h3 Couleur : Clr0 (noir)
    table
      thead
        tr
          th Class
          th Rendu
      tbody
        tr
          td
            code .u-text-color-0-darken
          td
            .u-text-color-0-darken lorem ipsum dolor
        tr
          td
            code .u-text-color-0-dark
          td
            .u-text-color-0-dark lorem ipsum dolor
        tr
          td
            code .u-text-color-0
          td
            .u-text-color-0 lorem ipsum dolor
        tr
          td
            code .u-text-color-0-light
          td
            .u-text-color-0-light lorem ipsum dolor
        tr
          td
            code .u-text-color-0-lighten
          td
            .u-text-color-0-lighten lorem ipsum dolor
  .hf-content.hf-wrapper
    h3 Couleur : Clr1 (bleu)
    table
      thead
        tr
          th Class
          th Rendu
      tbody
        tr
          td
            code .u-text-color-1-darken
          td
            .u-text-color-1-darken lorem ipsum dolor
        tr
          td
            code .u-text-color-1-dark
          td
            .u-text-color-1-dark lorem ipsum dolor
        tr
          td
            code .u-text-color-1
          td
            .u-text-color-1 lorem ipsum dolor
        tr
          td
            code .u-text-color-1-light
          td
            .u-text-color-1-light lorem ipsum dolor
        tr
          td
            code .u-text-color-1-lighten
          td
            .u-text-color-1-lighten lorem ipsum dolor
    .hf-content.hf-wrapper
      h3 Couleur : Clr2 (violet)
      table
        thead
          tr
            th Class
            th Rendu
        tbody
          tr
            td
              code .u-text-color-2-darken
            td
              .u-text-color-2-darken lorem ipsum dolor
          tr
            td
              code .u-text-color-2-dark
            td
              .u-text-color-2-dark lorem ipsum dolor
          tr
            td
              code .u-text-color-2
            td
              .u-text-color-2 lorem ipsum dolor
          tr
            td
              code .u-text-color-2-light
            td
              .u-text-color-2-light lorem ipsum dolor
          tr
            td
              code .u-text-color-2-lighten
            td
              .u-text-color-2-lighten lorem ipsum dolor
    .hf-content.hf-wrapper
      h3 Couleur : État
      table
        thead
          tr
            th Class
            th Rendu
        tbody
          tr
            td
              code .u-text-color-notice
            td
              .u-text-color-notice lorem ipsum dolor
          tr
            td
              code .u-text-color-error
            td
              .u-text-color-error lorem ipsum dolor
          tr
            td
              code .u-text-color-warning
            td
              .u-text-color-warning lorem ipsum dolor
          tr
            td
              code .u-text-color-success
            td
              .u-text-color-success lorem ipsum dolor