Permission is granted to copy, distribute and/or modify this document
   under the terms of the GNU Free Documentation License, Version 1.3
   or any later version published by the Free Software Foundation;
   with no Invariant Sections, no Front-Cover Texts, and no Back-Cover Texts.
   A copy of the license is included in the section entitled "GNU
   Free Documentation License".

# CSS classes and mixins

The stylesheet are based on the framework [ScratchCSS ](https://github.com/Champs-Libres/ScratchCSS).

We added some useful classes and mixins for the Chill usage.

###### CSS Classes

## Statement "empty data"

CSS Selector
   `.chill-no-data-statement`
In which case will you use this selector ?
   When a list is empty, and a message fill the list to inform that the data is empty
Example usage
   ```jinja
   <span class="chill-no-data-statement">{{ 'No reason associated'|trans }}</span>
   ```

## Quotation of user text

CSS Selector
   `blockquote.chill-user-quote`
In which case will you use this selector ?
   When you quote text that were filled by the user in a form.
Example usage
   ```jinja
   <blockquote class="chill-user-quote">{{ entity.remark|nl2br }}</blockquote>
   ```

## Boxes

CSS Selector
   `chill__box`
In which case will you use this selector ?
   When displaying some data in a nice box
Example usage
   ```html
   <span class="chill__box green">A nice box with green background</span>
   <span class="chill__box red">A nice box with red background</span>
   ```

###### Mixins

## Entity decorator

Mixin
   `@mixin entity($background-color, $color: white)`
In which case including this mixin ?
   When you create a `sticker`, a sort of label to represent a text in a way that the user can associate immediatly with a certain type of class / entity.
Example usage
   ```sass
      span.entity.entity-activity.activity-reason {
          @include entity($chill-pink, white);
      }
```