mirror of
https://gitlab.com/Chill-Projet/chill-bundles.git
synced 2025-11-23 04:17:45 +00:00
64 lines
1.9 KiB
Markdown
64 lines
1.9 KiB
Markdown
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);
|
|
}
|
|
```
|