[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

1 files changed, 9 insertions, 6 deletions

diff --git a/addons/web/static/src/scss/dropdown.scss b/addons/web/static/src/scss/dropdown.scss
index 9a60d78d9d3..8287e098b32 100644
--- a/addons/web/static/src/scss/dropdown.scss
+++ b/addons/web/static/src/scss/dropdown.scss
@@ -5,7 +5,7 @@
 .ui-autocomplete { // Copy style of bootstrap dropdown
     background-image: none;
     background-color: $dropdown-bg;
-    border: 1px solid $dropdown-border;
+    border: $dropdown-border-width solid $dropdown-border-color;
     font-size: $font-size-base;
     padding: 5px 0px;
     box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.176);
@@ -41,7 +41,7 @@
     .o_inline_dropdown {
         position: relative;
 
-        &> .dropdown-menu {
+        & > .dropdown-menu {
             top: 0;
             left: 100%;
         }
@@ -52,9 +52,12 @@
 }
 
 @mixin dropdown-menu-mixin {
-    .open .dropdown-menu > li {
-        position: relative; // to allow absolute positionning inside the li
-        > a {
+    .show .dropdown-menu {
+        > * {
+            position: relative; // to allow absolute positionning inside the items
+        }
+        
+        .dropdown-item {
             &:focus, &:active, &:focus:active {
                 outline: none;
             }
@@ -62,7 +65,7 @@
             @extend %dropdown-li-a-padding;
         }
 
-        &.dropdown-header {
+        .dropdown-header {
             @extend %dropdown-li-a-padding;
             color: $o-main-text-color;