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