===================
Styling
===================

Stylesheets
===========

For :term:`MEG QMS`, we are using 2 formats for

* Static styles (:file:`megforms.css`, :file:`print.css`, :file:`fields-list.css`, etc)
* SCSS compiled stylesheets (:file:`application.css`, etc)

.. note:: There also other stylesheets used as part of the bootstrap library but they should not be edited.

Compiling stylesheets
======================

When editing **scss** stylesheets, it is necessary to compile **css** files using the method below,
and commit the changes together with **css** changes.

Build SASS script
-----------------
Install `libsass <https://pypi.org/project/libsass/>`_  -
should be already installed as a part of :file:`requirements-dev.txt`,
but can be installed manually with :code:`pip install libsass`

.. code-block:: shell
    :caption: Run the following command to build css files from stylesheets

    sh/build-sass.sh

.. code-block:: bash
    :caption: If you need css to keep re-compiling while you're working on it, use the following snippet

    while true; do sh/build-sass.sh; sleep 1; done

Alternatively, you can use a tool such as `Watchman <https://facebook.github.io/watchman/>`_ to automatically re-build
css whenever changes are made to source sass files.

Other compilers
-----------------
Other tools for compiling sass are available, such as `Koala <http://koala-app.com/>`_,
but their output may be different and trigger lint errors therefore it is not recommended.

If you are using different compiler, make sure you set the following options to make the output compatible:

+----------------+---------+
| Option         | Value   |
+================+=========+
| OUTPUT STYLE   | Expanded|
+----------------+---------+
| AUTO COMPILE   | True    |
+----------------+---------+
| COMPASS MODE   | False   |
+----------------+---------+
| SOURCE MAP     | False   |
+----------------+---------+
| LINE COMMENTS  | False   |
+----------------+---------+
| DEBUG INFO     | False   |
+----------------+---------+

SCSS Stylesheets
================

Sass files are located in :file:`meg_forms/megforms/static/sass/`.
The styles are broken into the following files:

:file:`mixins.scss`
    These contain the variables and common mixins used throughout the other styles.
:file:`fonts.scss`
    Font import, base styles
:file:`buttons.scss`
    Custom button styles.
:file:`dropdowns.scss`
    Custom dropdowns and overwrites.
:file:`forms.scss`
    custom form elements.
:file:`global.scss`
    All common and global styles
:file:`components.scss`
    All individual components styles
:file:`tables.scss`
    Custom table attributes here
:file:`bootstrap4injections.scss`
    For two-factor custom styles
:file:`responsive.scss`
    Responsive styles for all above styles.