[FIX] website: improve mega menus editability

This commit adds the possibility to modify some background colors of the
mega menus so that the templates are fully editable.

Some of these templates have a column with an extended background, using
the :before css pseudo element.
As this is not a DOM element, it cannot be changed from javascript.
It was decided that using shapes would not produce the same effect as
the designer intended, and that it would be too confusing for the user
to be provided with an option allowing to extend the background of a
column.
Therefore, these specific s_mega_menu_gray_area elements must have their
background hardcoded.

task-2668908

X-original-commit: f01c74118ad4c772fb18866956ab9fb214f781fa
Part-of: odoo/odoo#81559
Co-authored-by: qsm-odoo <qsm@odoo.com>

addons/website/static/src/scss/website.scss

@@ -1201,6 +1201,7 @@ header {
         padding-right: $grid-gutter-width / 2;
     }
 }
+
 .o_mega_menu_container_size {
     $-header-template: o-website-value('header-template');
     @if not index(('sidebar', 'hamburger', 'magazine'), $-header-template) {
@@ -1220,6 +1221,26 @@ header {
     @include make-container-max-widths($-mm-max-widths);
 }
 
+// The design of some of the new mega menu templates required a column with
+// an overlay that would overflow until the end of the container. For
+// technical reasons, this overlay has to be hardcoded here.
+%s_mega_menu_gray_area {
+    z-index: 1;
+
+    &:before {
+        content: '';
+        display: block;
+        width: 100vw;
+        height: 100%;
+        position: absolute;
+        left: 0;
+        top: 0;
+        z-index: -1;
+        pointer-events: none;
+        background: rgba(0, 0, 0, .05);
+    }
+}
+
 #wrapwrap.o_header_overlay {
     > header:not(.o_header_affixed):not(.o_top_menu_collapse_shown) {
         @include o-position-absolute(0, 0, auto, 0);

addons/website/static/src/snippets/s_mega_menu_little_icons/000.scss

@@ -7,20 +7,6 @@
     }
 
     .s_mega_menu_gray_area:last-child {
-        // Allow to show the grey background used in the pseudo-element
-        z-index: 1;
-
-        &:before {
-            content: '';
-            display: block;
-            width: 100vw;
-            height: 100%;
-            position: absolute;
-            left: 0;
-            top: 0;
-            z-index: -1;
-            pointer-events: none;
-            background: rgba(0, 0, 0, .05);
-        }
+        @extend %s_mega_menu_gray_area;
     }
 }

addons/website/static/src/snippets/s_mega_menu_menus_logos/000.scss

@@ -1,21 +1,7 @@
 
 .s_mega_menu_menus_logos:not([data-vcss]) {
     .s_mega_menu_gray_area:last-child {
-        // Allow to show the grey background used in the pseudo-element
-        z-index: 1;
-
-        &:before {
-            content: '';
-            display: block;
-            width: 100vw;
-            height: 100%;
-            position: absolute;
-            left: 0;
-            top: 0;
-            z-index: -1;
-            pointer-events: none;
-            background: rgba(0, 0, 0, .05);
-        }
+        @extend %s_mega_menu_gray_area;
     }
 
     .s_mega_menu_menus_logos_wrapper {

addons/website/static/src/snippets/s_mega_menu_odoo_menu/000.scss

@@ -2,7 +2,18 @@
 .s_mega_menu_odoo_menu:not([data-vcss]) {
     .s_mega_menu_odoo_menu_footer {
         // Apply color transparency to match with the preset used
-        border-color: rgba(0, 0, 0, .05) !important;
-        background: rgba(0, 0, 0, .05) !important;
+        border-color: rgba(0, 0, 0, .05);
+
+        .row > div:not(.o_cc) {
+            // TODO this should be replaced by proper structure and color
+            // classes
+            @extend %s_mega_menu_gray_area;
+
+            &::before {
+                @include o-position-absolute(0, 0, 0, 0);
+                width: auto;
+                height: auto;
+            }
+        }
     }
 }

addons/website/static/src/snippets/s_mega_menu_thumbnails/000.scss

@@ -1,5 +1,13 @@
 .s_mega_menu_thumbnails:not([data-vcss]) {
-    .s_mega_menu_thumbnails_footer {
-        background: rgba(0, 0, 0, .05);
+    .s_mega_menu_thumbnails_footer:not(.o_cc) {
+        // TODO this should be replaced by proper structure and color
+        // classes
+        @extend %s_mega_menu_gray_area;
+
+        &::before {
+            @include o-position-absolute(0, 0, 0, 0);
+            width: auto;
+            height: auto;
+        }
     }
 }

addons/website/views/snippets/snippets.xml

@@ -463,8 +463,8 @@
     </div>
 
     <!-- Background -->
-    <t t-set="only_bg_color_selector" t-value="'section .row > div, .s_text_highlight'"/>
-    <t t-set="only_bg_color_exclude" t-value="'.s_col_no_bgcolor, .s_col_no_bgcolor.row > div, .s_masonry_block .row > div, .s_color_blocks_2 .row > div, .o_mega_menu .row > div, .s_image_gallery .row > div'"/>
+    <t t-set="only_bg_color_selector" t-value="'section .row > div, .s_text_highlight, .s_mega_menu_thumbnails_footer'"/>
+    <t t-set="only_bg_color_exclude" t-value="'.s_col_no_bgcolor, .s_col_no_bgcolor.row > div, .s_masonry_block .row > div, .s_color_blocks_2 .row > div, .s_image_gallery .row > div'"/>
 
     <t t-set="base_only_bg_image_selector" t-value="'.s_tabs .oe_structure > *, footer .oe_structure > *'"/>
     <t t-set="only_bg_image_selector" t-value="base_only_bg_image_selector"/>