[IMP] web_editor, website: preserve tabs in modals

2 files changed, 27 insertions, 2 deletions

diff --git a/addons/web_editor/static/src/less/web_editor.ui.components.less b/addons/web_editor/static/src/less/web_editor.ui.components.less
index 9f5549b85ce..ac93545c87b 100644
--- a/addons/web_editor/static/src/less/web_editor.ui.components.less
+++ b/addons/web_editor/static/src/less/web_editor.ui.components.less
@@ -215,8 +215,8 @@ body .modal {
         width: 80%;
 
         .modal-body {
-            .nav-tabs .active > a:not([href="#editor-media-icon"]) {
-                background-color: @o-we-color-paper;
+            .nav-tabs .active > a[href="#editor-media-icon"] {
+                background-color: white;
             }
 
             li.search {
diff --git a/addons/web_editor/static/src/less/web_editor.variables.less b/addons/web_editor/static/src/less/web_editor.variables.less
index 4f8ab834a5c..188d62b955d 100644
--- a/addons/web_editor/static/src/less/web_editor.variables.less
+++ b/addons/web_editor/static/src/less/web_editor.variables.less
@@ -159,6 +159,31 @@
     }
 }
 
+.o-w-preserve-tabs() {
+    .nav-tabs {
+        border-bottom: 1px solid @gray-lighter;
+
+        > li  {
+            > a {
+                line-height: 1.42857143;
+                color: @o-we-color-light;
+                &:hover {
+                    border-color: @gray-lighter;
+                }
+            }
+
+            &.active > a {
+                &, &:hover, &:focus {
+                    color: @o-we-color-normal;
+                    background-color: @o-we-color-paper;
+                    border-color: @gray-lighter;
+                    border-bottom-color: transparent;
+                }
+            }
+        }
+    }
+}
+
 .o-w-preserve-btn() {
     .btn:not(.o_btn_preview) {
         border-width: 1px;