CSS classes and mixins

The stylesheet are based on the framework 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
<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
<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
<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
span.entity.entity-activity.activity-reason {
    @include entity($chill-pink, white);
}