2ca32b40bc
Add a new content focused on SCSS and user-interface. - SCSS coding guidelines: regroup information already available (eg [1]) or based on "oral tradition". The aim is not to establish new rules, ~99% of the current codebase is already compliant. - SCSS inheritance: explain how SCSS assets management works in odoo. For example, people still find confusing that overrides are defined *before* the variable to customize. - SCSS optimization tips: suggestions to lean SCSS code. Based on SCSS optimization task's know-how [2]. - CSS variables: explain how this feature is commonly used in odoo to adapt layout & design without raw CSS overrides. - UI Icons: Add link to fontAwesome4 library . Replace the picture of odoo icons with the actual font (90kb image VS 15Kb font) [1] https://github.com/odoo/odoo/wiki/SCSS-coding-guidelines [2] https://www.odoo.com/web#id=2704984&menu_id=4720&cids=1&model=project.task&view_type=form task-3090800 closes odoo/documentation#3093 Signed-off-by: Antoine Vandevenne (anv) <anv@odoo.com>
115 lines
3.5 KiB
ReStructuredText
115 lines
3.5 KiB
ReStructuredText
:hide-page-toc:
|
|
|
|
========
|
|
UI icons
|
|
========
|
|
|
|
Odoo's user interface mostly relies on `FontAwesome4 icons <https://fontawesome.com/v4/icons/>`_.
|
|
|
|
To cover FontAwesome's lack of iconography for specific functionalities, we designed our own
|
|
icon-font. These icons can be rendered using the main `oi` class in conjunction with the specific
|
|
icon class.
|
|
|
|
.. example::
|
|
|
|
.. code-block:: html
|
|
|
|
<i class="oi oi-odoo"/>
|
|
|
|
.. raw:: html
|
|
|
|
<section class="row">
|
|
|
|
<div class="o_icon_card col-6 col-sm-4 col-md-3 col-xl-2 mb-3">
|
|
<div class="card text-center">
|
|
<i class="oi oi-apps h1 p-4"></i>
|
|
<code>oi-apps</code>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="o_icon_card col-6 col-sm-4 col-md-3 col-xl-2 mb-3">
|
|
<div class="card text-center">
|
|
<i class="oi oi-group h1 p-4"></i>
|
|
<code>oi-group</code>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="o_icon_card col-6 col-sm-4 col-md-3 col-xl-2 mb-3">
|
|
<div class="card text-center">
|
|
<i class="oi oi-launch h1 p-4"></i>
|
|
<code>oi-launch</code>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="o_icon_card col-6 col-sm-4 col-md-3 col-xl-2 mb-3">
|
|
<div class="card text-center">
|
|
<i class="oi oi-odoo h1 p-4"></i>
|
|
<code>oi-odoo</code>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="o_icon_card col-6 col-sm-4 col-md-3 col-xl-2 mb-3">
|
|
<div class="card text-center">
|
|
<i class="oi oi-panel-right h1 p-4"></i>
|
|
<code>oi-panel-right</code>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="o_icon_card col-6 col-sm-4 col-md-3 col-xl-2 mb-3">
|
|
<div class="card text-center">
|
|
<i class="oi oi-search h1 p-4"></i>
|
|
<code>oi-search</code>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="o_icon_card col-6 col-sm-4 col-md-3 col-xl-2 mb-3">
|
|
<div class="card text-center">
|
|
<i class="oi oi-settings-adjust h1 p-4"></i>
|
|
<code>oi-settings-adjust</code>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="o_icon_card col-6 col-sm-4 col-md-3 col-xl-2 mb-3">
|
|
<div class="card text-center">
|
|
<i class="oi oi-studio h1 p-4"></i>
|
|
<code>oi-studio</code>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="o_icon_card col-6 col-sm-4 col-md-3 col-xl-2 mb-3">
|
|
<div class="card text-center">
|
|
<i class="oi oi-view-cohort h1 p-4"></i>
|
|
<code>oi-view-cohort</code>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="o_icon_card col-6 col-sm-4 col-md-3 col-xl-2 mb-3">
|
|
<div class="card text-center">
|
|
<i class="oi oi-view-kanban h1 p-4"></i>
|
|
<code>oi-view-kanban</code>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="o_icon_card col-6 col-sm-4 col-md-3 col-xl-2 mb-3">
|
|
<div class="card text-center">
|
|
<i class="oi oi-view-list h1 p-4"></i>
|
|
<code>oi-view-list</code>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="o_icon_card col-6 col-sm-4 col-md-3 col-xl-2 mb-3">
|
|
<div class="card text-center">
|
|
<i class="oi oi-view-pivot h1 p-4"></i>
|
|
<code>oi-view-pivot</code>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="o_icon_card col-6 col-sm-4 col-md-3 col-xl-2 mb-3">
|
|
<div class="card text-center">
|
|
<i class="oi oi-voip h1 p-4"></i>
|
|
<code>oi-voip</code>
|
|
</div>
|
|
</div>
|
|
|
|
</section>
|