From f98d1c4b21efa55d8bda8c4862265eebdde7daf2 Mon Sep 17 00:00:00 2001
From: xO-Tx <mou@odoo.com>
Date: Mon, 15 Mar 2021 12:10:04 +0000
Subject: [PATCH] [FIX] web_editor: fix selection style for icons

The code added in [1] to update style for multi image selection
is not compatible with .fa icons and causes a strange behaviour when
trying to select one.
The goal of this commit is to fix style for selected icons on media
dialog.

Also fixes the fact the icons were not centered before.

[1]: https://github.com/odoo/odoo/commit/bb65b742e7eec000248b7df0f048dda61ac3ff5a

closes odoo/odoo#67846

Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
Co-authored-by: qsm-odoo <qsm@odoo.com>
---
 .../static/src/scss/web_editor.variables.scss | 31 +++++++++++--------
 .../web_editor/static/src/scss/wysiwyg.scss   |  2 +-
 2 files changed, 19 insertions(+), 14 deletions(-)

diff --git a/addons/web_editor/static/src/scss/web_editor.variables.scss b/addons/web_editor/static/src/scss/web_editor.variables.scss
index 3951b37d4f8..6362a816779 100644
--- a/addons/web_editor/static/src/scss/web_editor.variables.scss
+++ b/addons/web_editor/static/src/scss/web_editor.variables.scss
@@ -419,19 +419,24 @@ $o-we-sidebar-content-field-toggle-control-shadow: 0 2px 3px 0 $o-we-bg-darkest
 // ------------------------------------------------------------------
 
 @mixin o-we-active-wrapper($icon: '\f00c', $top: auto, $right: auto, $bottom: auto, $left: auto) {
-    border: 3px solid $o-brand-primary;
-    &:before {
-        content: $icon;
-        @include o-position-absolute($top, $right, $bottom, $left);
-        width: 19px;
-        height: 19px;
-        background-color: $o-brand-primary;
-        font-family: 'FontAwesome';
-        color: white;
-        border-radius: 50%;
-        text-align: center;
-        z-index: 1;
-        box-shadow: $box-shadow;
+    box-shadow: 0 0 0 3px $o-brand-primary;
+
+    &:not(.fa) {
+        border: 3px solid $o-brand-primary;
+        box-shadow: none;
+        &:before {
+            content: $icon;
+            @include o-position-absolute($top, $right, $bottom, $left);
+            width: 19px;
+            height: 19px;
+            background-color: $o-brand-primary;
+            font-family: 'FontAwesome';
+            color: white;
+            border-radius: 50%;
+            text-align: center;
+            z-index: 1;
+            box-shadow: $box-shadow;
+        }
     }
 }
 
diff --git a/addons/web_editor/static/src/scss/wysiwyg.scss b/addons/web_editor/static/src/scss/wysiwyg.scss
index 65f863e152b..a1e111a975d 100644
--- a/addons/web_editor/static/src/scss/wysiwyg.scss
+++ b/addons/web_editor/static/src/scss/wysiwyg.scss
@@ -313,7 +313,7 @@ body .modal {
                     margin: 5px;
                     width: 50px;
                     height: 50px;
-                    padding: 15px;
+                    padding: 15px 0; // 0 allows to center properly
                     cursor: pointer;
                 }
             }