mirror of
https://gitlab.com/Chill-Projet/chill-bundles.git
synced 2025-06-07 18:44:08 +00:00
78 lines
2.1 KiB
ReStructuredText
78 lines
2.1 KiB
ReStructuredText
.. Copyright (C) 2016 Champs Libres Cooperative SCRLFS
|
|
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
|
|
:code:`.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
|
|
.. code-block:: html+jinja
|
|
|
|
<span class="chill-no-data-statement">{{ 'No reason associated'|trans }}</span>
|
|
|
|
|
|
Quotation of user text
|
|
=======================
|
|
|
|
CSS Selector
|
|
:code:`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
|
|
.. code-block:: html+jinja
|
|
|
|
<blockquote class="chill-user-quote">{{ entity.remark|nl2br }}</blockquote>
|
|
|
|
Boxes
|
|
=====
|
|
|
|
CSS Selector
|
|
:code:`chill__box`
|
|
In which case will you use this selector ?
|
|
When displaying some data in a nice box
|
|
Example usage
|
|
.. code-block:: html+twig
|
|
|
|
<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
|
|
:code:`@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
|
|
.. code-block:: sass
|
|
|
|
span.entity.entity-activity.activity-reason {
|
|
@include entity($chill-pink, white);
|
|
}
|