[FIX] web: missing caret in some fields (settings)

This commit fixes the missing caret in some of the selection fields inside
the settings.

It is not possible to fix it another way than adding a `:not` targeting
the settings `formView`, because the `formView` css rule is overriding any
css in settings.
The caret was also hidden in the `datepicker` field.

This commit also change the `$-down-arrow` variable to a global one,
`$o-caret-down`.

task-3451370

Related to task-3326263

closes odoo/odoo#141672

X-original-commit: e01d4211cd36bd1a7d4ad190c89d3c966ec3e41e
Signed-off-by: Pierre Paridans (app) <app@odoo.com>

addons/web/static/src/scss/secondary_variables.scss

@@ -36,3 +36,8 @@ $o-datepicker-week-bg-color: lighten($o-datepicker-week-color, 30%) !default;
 // is the minimal width of the default form view design for md/lg sizes
 $o-form-sheet-min-width: 990px !default;
 $o-form-separator-color: invert($o-view-background-color, 10%) !default;
+
+$o-caret-down: url("data:image/svg+xml," +
+"<svg xmlns='http://www.w3.org/2000/svg' width='7' height='4' viewBox='0 0 7 4'>" +
+    "<polygon fill='%23#{str-slice(#{$o-main-text-color}, 2)}' points='3.5 4 7 0 0 0'/>" +
+"</svg>");

addons/web/static/src/views/fields/selection/selection_field.scss

@@ -1,7 +1,7 @@
 body:not(.o_touch_device) .o_field_selection {
     &:not(:hover):not(:focus-within) {
         & select:not(:hover) {
-            background: none !important;
+            background-image: none;
         }
     }
 }

addons/web/static/src/webclient/settings_form_view/settings_form_view.scss

@@ -1,3 +1,11 @@
+body:not(.o_touch_device) .o_settings_container .o_field_selection {
+    &:not(:hover):not(:focus-within) {
+        & select:not(:hover) {
+            background: transparent $o-caret-down no-repeat right center;
+        }
+    }
+}
+
 .o_base_settings_view .o_form_renderer {
    height: 100%;
    overflow: auto;
@@ -156,6 +164,10 @@
            .highlighter {
                background: yellow;
            }
+
+            .o_datepicker .o_datepicker_button {
+                visibility: visible;
+            }
        }
 
        .d-block {

addons/web/static/src/webclient/webclient.scss

@@ -162,17 +162,13 @@ select {
   outline: none;
 }
 select {
-  $-down-arrow: url("data:image/svg+xml," +
-    "<svg xmlns='http://www.w3.org/2000/svg' width='7' height='4' viewBox='0 0 7 4'>" +
-        "<polygon fill='%23#{str-slice(#{$o-main-text-color}, 2)}' points='3.5 4 7 0 0 0'/>" +
-    "</svg>");
 
   // FIXME buggy 'padding-left'
   cursor: pointer;
   min-width: 50px;
 
   appearance: none;
-  background: transparent $-down-arrow no-repeat right center;
+  background: transparent $o-caret-down no-repeat right center;
   border-radius: 0; // webkit OSX browsers have a border-radius on select
 
   color: $o-main-text-color;