From 2ecb5e17772009c6098b0311fdb9e5102e2aa431 Mon Sep 17 00:00:00 2001
From: Younn Olivier <yol@odoo.com>
Date: Tue, 2 Mar 2021 08:56:26 +0000
Subject: [PATCH] [FIX] web, web_editor: customize colorpicker inputs from
 web_editor

Styles for the hex and rgba inputs from the color picker were modified
on directly from the web module, which means that for a specification
concerning only the frontend colorpicker, the backend colorpicker was
also changed.

This commit reverts the changes that were made and only applies the new
style for the website editor.

Related to https://github.com/odoo/odoo/pull/65249

closes odoo/odoo#67396

X-original-commit: 9529e29615699942aac89099cd37144e052b9004
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
---
 addons/web/static/src/scss/colorpicker.scss       |  7 -------
 addons/web/static/src/xml/colorpicker.xml         |  2 +-
 .../static/src/scss/wysiwyg_snippets.scss         | 15 +++++++++++++++
 3 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/addons/web/static/src/scss/colorpicker.scss b/addons/web/static/src/scss/colorpicker.scss
index ffbebee4771..ae618504a0c 100644
--- a/addons/web/static/src/scss/colorpicker.scss
+++ b/addons/web/static/src/scss/colorpicker.scss
@@ -28,9 +28,6 @@
     }
     .o_slider_pointer, .o_opacity_pointer, .o_picker_pointer, .o_color_preview, .o_hex_div, .o_rgba_div  {
         border: 1px solid black;
-        &:focus-within {
-            border-color: $o-we-sidebar-content-field-input-border-color;
-        }
     }
     .o_color_picker_inputs {
         font-size: 10px;
@@ -39,10 +36,6 @@
             font-family: monospace !important; // FIXME: the monospace font used in the editor has not consistent ch units on Firefox
             height: 18px;
             font-size: 11px;
-            border: none;
-            &:focus {
-                outline: none;
-            }
         }
         .o_hex_div input {
             width: 7ch;
diff --git a/addons/web/static/src/xml/colorpicker.xml b/addons/web/static/src/xml/colorpicker.xml
index 1aaf6718249..23b35846bcf 100644
--- a/addons/web/static/src/xml/colorpicker.xml
+++ b/addons/web/static/src/xml/colorpicker.xml
@@ -16,7 +16,7 @@
         </div>
         <div t-if="widget.options.colorPreview" class="o_color_preview mb-1 w-100 p-2"/>
         <div class="o_color_picker_inputs d-flex justify-content-between mb-2">
-            <t t-set="input_classes" t-value="'p-0 text-center text-monospace bg-transparent text-white'" />
+            <t t-set="input_classes" t-value="'p-0 border-0 text-center text-monospace bg-transparent text-white'" />
 
             <div class="o_hex_div bg-black-50 px-1 d-flex align-items-baseline">
                 <input type="text" t-attf-class="o_hex_input {{input_classes}}" data-color-method="hex" size="1"/>
diff --git a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
index 8c6b62ac461..89a9de5779b 100644
--- a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
+++ b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
@@ -1517,6 +1517,21 @@ body.editor_enable.editor_has_snippets {
         @extend %we-generic-button;
     }
     .o_colorpicker_sections {
+        .o_colorpicker_widget {
+            .o_hex_div, .o_rgba_div  {
+                &:focus-within {
+                    border-color: $o-we-sidebar-content-field-input-border-color;
+                }
+            }
+            .o_color_picker_inputs {
+                input {
+                    border: none;
+                    &:focus {
+                        outline: none;
+                    }
+                }
+            }
+        }   
 
         .o_we_color_btn, .o_we_color_combination_btn {
             float: left;