[REF] web_editor, website: BS4, adapt website UI

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');
                 }
 

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;
                 }
             }
         }

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>

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 {