[FIX] web: solve inputs' caret inconsistencies

Before this commit input carets appeared different in color and size.
Moreover, since '$caret-width' was set using 'em' units, the caret was
sometimes cropped due to inconsistencies on how browsers handle decimal
border-width values.

This commit will uniform the way how input carets are achieved for
both versions and introduces caret's contextual variations (:focus /
required / invalid).

The caret color will now always matches the '--o-input-border-color' css
variable that changes according its the context.

task-2579123

addons/web/static/src/legacy/scss/bootstrap_overridden.scss

@@ -71,6 +71,8 @@ $border-color: $o-gray-300 !default;
 $component-active-color: $o-brand-primary !default;
 $component-active-bg: $gray-200 !default;
 
+$caret-width: 4px !default;
+
 // Fonts
 //
 // Font, line-height, and color for body text, headings, and more.

addons/web/static/src/legacy/scss/datepicker.scss

@@ -22,7 +22,7 @@
         @include o-position-absolute(2px, 4px);
         pointer-events: none; // let click events go through the underlying input
         &:after {
-            @include o-caret-down;
+            @include o-caret-down($caret-width: 4px);
         }
     }
 

addons/web/static/src/legacy/scss/fields.scss

@@ -29,7 +29,7 @@
 
 .o_input {
     border:$input-border-width solid var(--o-input-border-color);
-    padding: 2px 4px;
+    padding: $o-input-padding-y $o-input-padding-x;
 
     // -- Nested o_input(s)
     .o_input {
@@ -66,6 +66,22 @@
         text-align: inherit;
     }
 
+    // Dropdowns inputs
+    .o_input_dropdown, &.o_datepicker {
+        > input {
+            padding-right: ($caret-width * 2.5) + $o-input-padding-x;
+        }
+
+        .o_dropdown_button, .o_datepicker_button {
+            @include o-position-absolute($o-input-padding-y, $o-input-padding-x, $input-border-width);
+            pointer-events: none;
+
+            &:after {
+                @include o-caret-down;
+            }
+        }
+    }
+
     // Block fields
     &.note-editor, &.oe_form_field_html, &.oe_form_field_text, &.o_field_domain, &.o_graph_linechart, &.o_graph_barchart {
         display: block;
@@ -86,21 +102,12 @@
         width: 100%;
 
         > input {
-            padding-right: 15px;
             cursor: pointer;
 
             &::-ms-clear {
                 display: none;
             }
         }
-
-        .o_dropdown_button {
-            @include o-position-absolute(0, 0);
-            pointer-events: none;
-            &:after {
-                @include o-caret-down;
-            }
-        }
     }
 
     // Text

addons/web/static/src/legacy/scss/fields_extra.scss

@@ -15,9 +15,15 @@
 //------------------------------------------------------------------------------
 
 .o_field_widget {
-    // Dropdowns input carret
-    .o_input_dropdown .o_dropdown_button {
-        @include o-position-absolute(2px, 4px);
+    &.o_field_many2manytags {
+        .o_dropdown_button {
+            top: 0;
+            right: 0;
+        }
+
+        &.avatar .o_dropdown_button {
+            top: $o-input-padding-y;
+        }
     }
 
     // Many2one

addons/web/static/src/legacy/scss/primary_variables.scss

@@ -68,6 +68,9 @@ $o-tooltip-title-background-color: #F7F7F7 !default;
 // Forms
 
 // o-inputs
+$o-input-padding-y: 2px !default;
+$o-input-padding-x: 4px !default;
+
 $o-input-border-required: $o-brand-primary !default;
 
 // Bootstrap clone, we just change the icon color

addons/web/static/src/legacy/scss/utils.scss

@@ -11,6 +11,7 @@
     width: 0;
     height: 0;
     vertical-align: middle;
+    -moz-transform: scale(0.9999); // Smooth the caret on firefox
 }
 
 // ------------------------------------------------------------------
@@ -136,37 +137,33 @@
 // ------------------------------------------------------------------
 // Caret
 // ------------------------------------------------------------------
-@mixin o-caret-down($caret-width: $caret-width) {
+@mixin o-caret-down($caret-width: $caret-width, $caret-color: var(--o-input-border-color, currentColor)) {
     @include utils-caret-boilerplate;
     border-bottom: 0;
     border-left: $caret-width solid transparent;
     border-right: $caret-width solid transparent;
-    border-top: $caret-width solid;
-    -moz-transform: scale(0.9999); // Smooth the caret on firefox
+    border-top: $caret-width solid $caret-color;
 }
-@mixin o-caret-up($caret-width: $caret-width) {
+@mixin o-caret-up($caret-width: $caret-width, $caret-color: var(--o-input-border-color, currentColor)) {
     @include utils-caret-boilerplate;
-    border-bottom: $caret-width solid;
+    border-bottom: $caret-width solid $caret-color;
     border-left: $caret-width solid transparent;
     border-right: $caret-width solid transparent;
     border-top: 0;
-    -moz-transform: scale(0.9999); // Smooth the caret on firefox
 }
-@mixin o-caret-left($caret-width: $caret-width) {
+@mixin o-caret-left($caret-width: $caret-width, $caret-color: var(--o-input-border-color, currentColor)) {
     @include utils-caret-boilerplate;
     border-bottom: $caret-width solid transparent;
     border-left: 0;
-    border-right: $caret-width solid;
+    border-right: $caret-width solid $caret-color;
     border-top: $caret-width solid transparent;
-    -moz-transform: scale(0.9999); // Smooth the caret on firefox
 }
-@mixin o-caret-right($caret-width: $caret-width) {
+@mixin o-caret-right($caret-width: $caret-width, $caret-color: var(--o-input-border-color, currentColor)) {
     @include utils-caret-boilerplate;
     border-bottom: $caret-width solid transparent;
-    border-left: $caret-width solid;
+    border-left: $caret-width solid $caret-color;
     border-right: 0;
     border-top: $caret-width solid transparent;
-    -moz-transform: scale(0.9999); // Smooth the caret on firefox
 }
 
 // ------------------------------------------------------------------