From 702499430fef35b7faede1ef5c9ca4d611287836 Mon Sep 17 00:00:00 2001
From: qsm-odoo <qsm@odoo.com>
Date: Thu, 12 Jul 2018 14:44:53 +0200
Subject: [PATCH] [REF] web_editor, website: BS4, adapt website UI

---
 .../static/src/js/editor/snippets.options.js        |  4 ++--
 .../web_editor/static/src/scss/web_editor.ui.scss   | 13 ++++++-------
 addons/web_editor/static/src/xml/snippets.xml       |  2 +-
 addons/website/static/src/scss/website.ui.scss      |  2 +-
 4 files changed, 10 insertions(+), 11 deletions(-)

diff --git a/addons/web_editor/static/src/js/editor/snippets.options.js b/addons/web_editor/static/src/js/editor/snippets.options.js
index 059a0524ab4..199c3a0b8ad 100644
--- a/addons/web_editor/static/src/js/editor/snippets.options.js
+++ b/addons/web_editor/static/src/js/editor/snippets.options.js
@@ -666,10 +666,10 @@ registry.colorpicker = SnippetOption.extend({
                     var $palette_def = $tabs.find('div[data-name="' + self.data.paletteDefault + '"]');
                     var pos = $tabs.find('> div').index($palette_def);
 
-                    $toggles.children('li').eq(pos).addClass('active');
+                    $toggles.children('li').eq(pos).find('a').addClass('active');
                     $palette_def.addClass('active');
                 } else {
-                    $toggles.find('li').first().addClass('active');
+                    $toggles.find('li').first().find('a').addClass('active');
                     $tabs.find('div').first().addClass('active');
                 }
 
diff --git a/addons/web_editor/static/src/scss/web_editor.ui.scss b/addons/web_editor/static/src/scss/web_editor.ui.scss
index e85f04e8327..eee93913dc2 100644
--- a/addons/web_editor/static/src/scss/web_editor.ui.scss
+++ b/addons/web_editor/static/src/scss/web_editor.ui.scss
@@ -59,10 +59,10 @@
             }
 
             &.btn-primary {
-                @include button-variant(white, $o-brand-odoo, $o-brand-odoo);
+                @include button-variant($o-brand-odoo, $o-brand-odoo);
             }
             &.btn-secondary {
-                @include button-variant(white, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
+                @include button-variant(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
 
                 &:hover {
                     background: rgba(black, 0.5);
@@ -910,14 +910,13 @@ table.colorpicker {
                     &:focus, &:active, &:focus:active {
                         outline: none;
                     }
-                }
-                &:hover, &.active {
-                    > a {
+                    &.active {
+                        background-color: $o-we-tab-active-bg!important;
                         color: white;
                     }
                 }
-                &.active > a {
-                    background-color: $o-we-tab-active-bg!important;
+                &:hover > a {
+                    color: white;
                 }
             }
         }
diff --git a/addons/web_editor/static/src/xml/snippets.xml b/addons/web_editor/static/src/xml/snippets.xml
index a0c35288b93..93fc31c7de9 100644
--- a/addons/web_editor/static/src/xml/snippets.xml
+++ b/addons/web_editor/static/src/xml/snippets.xml
@@ -32,7 +32,7 @@
             </div>
         </div>
         <div class="o_colorpicker_sections">
-            <ul class="nav nav-pills o_colorpicker_section_menu"/>
+            <ul class="nav nav-pills flex-column o_colorpicker_section_menu"/>
             <div class="tab-content o_colorpicker_section_tabs"/>
         </div>
     </div>
diff --git a/addons/website/static/src/scss/website.ui.scss b/addons/website/static/src/scss/website.ui.scss
index e8c0073fec6..91e6675c82f 100644
--- a/addons/website/static/src/scss/website.ui.scss
+++ b/addons/website/static/src/scss/website.ui.scss
@@ -45,7 +45,7 @@ body.o_connected_user {
             }
 
             &[data-action="edit"], &[data-action="translate"], &.css_edit_dynamic {
-                @include button-variant(white, $o-brand-primary, $o-brand-primary);
+                @include button-variant($o-brand-primary, $o-brand-primary);
             }
 
             > .fa-plus, > .fa-pencil {