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


CSS Selector
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>


Entity decorator

@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);