diff options
| author | qsm-odoo <qsm@odoo.com> | 2018-03-14 16:21:14 +0100 |
|---|---|---|
| committer | qsm-odoo <qsm@odoo.com> | 2018-07-27 12:36:54 +0200 |
| commit | 1c1c0897e8eca607c7f1b96b68a06c026c543e6a (patch) | |
| tree | 1f667224be28146cbcbe602892094046052ea93b /doc | |
| parent | 220e49f9d66f2e2ea875143c2da0c20919ec0b3e (diff) | |
[REF] *: BS4, adapt dropdowns and carets
- The dropdown structure was simplified, allowing to get rid of the
3-levels structure induced by <ul/> elements and dropdowns can now
contain anything. The class 'dropdown-item' is now mandatory for
each dropdown clickable element. The class 'dropdown-item-text' can
be used to add same padding and style but without making the element
have a clickable look.
- Dividers now use the class 'dropdown-divider'
- The way dropdowns are opened and hidden also changed (before the
'open' class was added on the `.dropdown-menu` parent, now the
'show' class is added on both the `.dropdown-menu` parent and the
`.dropdown-menu` itself).
- JS-wise, no click event handlers can be put on `.dropdown-toggle`
elements anymore (instead, use handlers for dropdown events).
- Carets are automatically put on `.dropdown-toggle` elements, so this
commit replaces the `.caret` elements with this. This feature was
possible to disable but would prevent us from adding a caret with
scss. Also, this simplifies the DOM. The 'o-no-caret' class was also
introduced to allow using the 'dropdown-toggle' class on non-caret
elements.
- Also adapt the scss to use $caret-width instead of $caret-width-base
Diffstat (limited to 'doc')
| -rw-r--r-- | doc/howtos/themes.rst | 10 |
1 files changed, 5 insertions, 5 deletions
diff --git a/doc/howtos/themes.rst b/doc/howtos/themes.rst index a4ca988306f..0ce91112e43 100644 --- a/doc/howtos/themes.rst +++ b/doc/howtos/themes.rst @@ -763,11 +763,11 @@ We start by adding a new file in our views folder - name it **options.xml** and <div data-selector=".snippet_testimonial"> <!-- Options group --> <li class="dropdown-submenu"> <a href="#">Your Option</a> - <ul class="dropdown-menu"> <!-- Options list --> - <li data-select-class="opt_shadow"><a>Shadow Images</a></li> - <li data-select-class="opt_grey_bg"><a>Grey Bg</a></li> - <li data-select-class=""><a>None</a></li> - </ul> + <div class="dropdown-menu"> <!-- Options list --> + <a href="#" class="dropdown-item" data-select-class="opt_shadow">Shadow Images</a> + <a href="#" class="dropdown-item" data-select-class="opt_grey_bg">Grey Bg</a> + <a href="#" class="dropdown-item" data-select-class="">None</a> + </div> </li> </div> </xpath> |