From bbc24e3f76752149dd9811b8a54431bbcd498b6f Mon Sep 17 00:00:00 2001
From: qsm-odoo <qsm@odoo.com>
Date: Thu, 14 Feb 2019 15:40:13 +0000
Subject: [PATCH] [FIX] website, *: restore and enforce Odoo UI design

* web_editor

BS conflicts with our UI again: btn sizes and form controls are
more difficult to force with BS4, this commit adapts the controls to
use less problematic sizes, and adds/adapts some more forcing rules.

Part of https://github.com/odoo/odoo/pull/31117
task-1941156
---
 .../static/src/scss/web_editor.variables.scss | 42 ++++++++++---------
 addons/web_editor/static/src/xml/editor.xml   |  8 ++--
 .../static/src/xml/website.pageProperties.xml |  4 +-
 3 files changed, 29 insertions(+), 25 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 9bb6b705c8d..ef75f0f2cc9 100644
--- a/addons/web_editor/static/src/scss/web_editor.variables.scss
+++ b/addons/web_editor/static/src/scss/web_editor.variables.scss
@@ -112,10 +112,17 @@ $o-we-switch-inactive-color: $o-we-color-paper !default;
         color: #555;
         background-color: #fff;
         border-radius: 0;
+
         &.is-invalid {
             border-color: $danger;
         }
     }
+    .input-group .form-control {
+        height: auto;
+    }
+    .input-group-text {
+        background-color: #e9ecef;
+    }
 
     .was-validated {
         .form-control:invalid {
@@ -138,10 +145,14 @@ $o-we-switch-inactive-color: $o-we-color-paper !default;
         border-radius: 0;
         background-color: $o-we-color-paper;
 
+        .modal-header {
+            border-bottom-color: #e9ecef;
+        }
         .modal-body {
             background-color: white;
         }
         .modal-footer {
+            border-top-color: #e9ecef;
             text-align: left;
         }
     }
@@ -149,23 +160,23 @@ $o-we-switch-inactive-color: $o-we-color-paper !default;
 
 @mixin o-w-preserve-tabs {
     .nav-tabs {
-        border-bottom: 1px solid gray('200');
+        border-bottom: 1px solid #e9ecef;
 
         > li  {
             > a {
                 line-height: 1.5;
                 color: $o-we-color-light;
-                &:hover {
-                    border-color: gray('200');
-                }
-            }
 
-            &.active > a {
-                &, &:hover, &:focus {
-                    color: $o-we-color-normal;
-                    background-color: $o-we-color-paper;
-                    border-color: gray('200');
-                    border-bottom-color: transparent;
+                &:hover {
+                    border-color: #dee2e6;
+                }
+
+                &.active {
+                    &, &:hover, &:focus {
+                        color: $o-we-color-normal;
+                        background-color: $o-we-color-paper;
+                        border-color: #dee2e6 #dee2e6 #FFFFFF;
+                    }
                 }
             }
         }
@@ -177,7 +188,7 @@ $o-we-switch-inactive-color: $o-we-color-paper !default;
         border-radius: 0;
         font-weight: normal;
         text-transform: none;
-        @include button-size(.375rem, .75rem, 1rem, 1.5, 0);
+        @include button-size(.375rem, .75rem, 0.875rem, 1.5, 0);
 
         &.btn-primary {
             @include button-variant($o-brand-primary, $o-brand-primary);
@@ -202,13 +213,6 @@ $o-we-switch-inactive-color: $o-we-color-paper !default;
         &.btn-danger {
             @include button-variant($o-we-color-danger, $o-we-color-danger);
         }
-
-        &.btn-lg {
-            @include button-size(.5rem, 1rem, 1.25rem, 1.5, 0);
-        }
-        &.btn-sm {
-            @include button-size(.25rem, .5rem, .875rem, 1.5, 0);
-        }
     }
 }
 
diff --git a/addons/web_editor/static/src/xml/editor.xml b/addons/web_editor/static/src/xml/editor.xml
index 631bd069e8b..0b8d3c8219d 100644
--- a/addons/web_editor/static/src/xml/editor.xml
+++ b/addons/web_editor/static/src/xml/editor.xml
@@ -401,7 +401,7 @@
                     <label class="col-md-3 col-form-label" for="o_bg_img_opt_custom_size_x">Background width</label>
                     <div class="col-md-5">
                         <div class="input-group">
-                            <input type="number" min="0" max="100" class="form-control form-control-sm" id="o_bg_img_opt_custom_size_x" placeholder="auto"/>
+                            <input type="number" min="0" max="100" class="form-control" id="o_bg_img_opt_custom_size_x" placeholder="auto"/>
                             <div class="input-group-append">
                                 <div class="input-group-text">%</div>
                             </div>
@@ -412,7 +412,7 @@
                     <label class="col-md-3 col-form-label" for="o_bg_img_opt_custom_size_y">Background height</label>
                     <div class="col-md-5">
                         <div class="input-group">
-                            <input type="number" min="0" max="100" class="form-control form-control-sm" id="o_bg_img_opt_custom_size_y" placeholder="auto"/>
+                            <input type="number" min="0" max="100" class="form-control" id="o_bg_img_opt_custom_size_y" placeholder="auto"/>
                             <div class="input-group-append">
                                 <div class="input-group-text">%</div>
                             </div>
@@ -427,7 +427,7 @@
                     <label class="col-md-3 col-form-label" for="o_bg_img_opt_custom_pos_x">Horizontal</label>
                     <div class="col-md-5">
                         <div class="input-group">
-                            <input type="number" min="0" max="100" class="form-control form-control-sm" id="o_bg_img_opt_custom_pos_x" placeholder="auto"/>
+                            <input type="number" min="0" max="100" class="form-control " id="o_bg_img_opt_custom_pos_x" placeholder="auto"/>
                             <div class="input-group-append">
                                 <div class="input-group-text">%</div>
                             </div>
@@ -438,7 +438,7 @@
                     <label class="col-md-3 col-form-label" for="o_bg_img_opt_custom_pos_y">Vertical</label>
                     <div class="col-md-5">
                         <div class="input-group">
-                            <input type="number" min="0" max="100" class="form-control form-control-sm" id="o_bg_img_opt_custom_pos_y" placeholder="auto"/>
+                            <input type="number" min="0" max="100" class="form-control" id="o_bg_img_opt_custom_pos_y" placeholder="auto"/>
                             <div class="input-group-append">
                                 <div class="input-group-text">%</div>
                             </div>
diff --git a/addons/website/static/src/xml/website.pageProperties.xml b/addons/website/static/src/xml/website.pageProperties.xml
index beab83b17e6..34af489606b 100644
--- a/addons/website/static/src/xml/website.pageProperties.xml
+++ b/addons/website/static/src/xml/website.pageProperties.xml
@@ -49,7 +49,7 @@
                 <div class="form-group row">
                     <label class="col-form-label col-md-3" for="page_name">Page Name</label>
                     <div class="col-md-9">
-                        <input type="text" class="form-control form-control-sm" id="page_name" t-att-value="widget.page.name" />
+                        <input type="text" class="form-control" id="page_name" t-att-value="widget.page.name" />
                     </div>
                 </div>
                 <div class="form-group warn_about_call"></div>
@@ -60,7 +60,7 @@
                             <div class="input-group-prepend">
                                 <span class="input-group-text" t-att-title="widget.serverUrl"><small><t t-esc="widget.serverUrlTrunc"/></small></span>
                             </div>
-                            <input type="text" class="form-control form-control-sm" id="page_url" t-att-value="widget.page.url" />
+                            <input type="text" class="form-control" id="page_url" t-att-value="widget.page.url" />
                         </div>
                     </div>
                 </div>