1.9 KiB
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 .
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);
}