From beea3b1777bc24d5763440f478feef3dba59ab76 Mon Sep 17 00:00:00 2001
From: "stefanorigano (SRI)" <sri@odoo.com>
Date: Thu, 24 Jun 2021 14:59:59 +0000
Subject: [PATCH] [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
---
 .../src/legacy/scss/bootstrap_overridden.scss |  2 ++
 .../static/src/legacy/scss/datepicker.scss    |  2 +-
 addons/web/static/src/legacy/scss/fields.scss | 27 ++++++++++++-------
 .../static/src/legacy/scss/fields_extra.scss  | 12 ++++++---
 .../src/legacy/scss/primary_variables.scss    |  3 +++
 addons/web/static/src/legacy/scss/utils.scss  | 21 +++++++--------
 6 files changed, 41 insertions(+), 26 deletions(-)

diff --git a/addons/web/static/src/legacy/scss/bootstrap_overridden.scss b/addons/web/static/src/legacy/scss/bootstrap_overridden.scss
index 1390a0a32e2..d452bb0de76 100644
--- a/addons/web/static/src/legacy/scss/bootstrap_overridden.scss
+++ b/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.
diff --git a/addons/web/static/src/legacy/scss/datepicker.scss b/addons/web/static/src/legacy/scss/datepicker.scss
index 7493c992eef..c3696891d73 100644
--- a/addons/web/static/src/legacy/scss/datepicker.scss
+++ b/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);
         }
     }
 
diff --git a/addons/web/static/src/legacy/scss/fields.scss b/addons/web/static/src/legacy/scss/fields.scss
index 28beddbf4b9..38eb50277a4 100644
--- a/addons/web/static/src/legacy/scss/fields.scss
+++ b/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
diff --git a/addons/web/static/src/legacy/scss/fields_extra.scss b/addons/web/static/src/legacy/scss/fields_extra.scss
index 1dd838d90df..c268c4d2518 100644
--- a/addons/web/static/src/legacy/scss/fields_extra.scss
+++ b/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
diff --git a/addons/web/static/src/legacy/scss/primary_variables.scss b/addons/web/static/src/legacy/scss/primary_variables.scss
index 57bad627ab0..6b3ce842f94 100644
--- a/addons/web/static/src/legacy/scss/primary_variables.scss
+++ b/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
diff --git a/addons/web/static/src/legacy/scss/utils.scss b/addons/web/static/src/legacy/scss/utils.scss
index 3d15150efef..721607a1140 100644
--- a/addons/web/static/src/legacy/scss/utils.scss
+++ b/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
 }
 
 // ------------------------------------------------------------------