[IMP] web_editor, website: add background shapes snippet option

This commit adds a new snippet option allowing the user to choose one of
a series of SVG shapes as their background, or to be overlaid over the
background image of a snippet and to customize the colors of those
shapes.

Part of https://github.com/odoo/odoo/pull/53017
task-2210790

closes odoo/odoo#53017

Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>

1 files changed, 47 insertions, 0 deletions

diff --git a/addons/web_editor/static/src/scss/web_editor.frontend.scss b/addons/web_editor/static/src/scss/web_editor.frontend.scss
index a1d057316f8..172ab7fbe22 100644
--- a/addons/web_editor/static/src/scss/web_editor.frontend.scss
+++ b/addons/web_editor/static/src/scss/web_editor.frontend.scss
@@ -31,3 +31,50 @@
         }
     }
 }
+
+// Background shapes
+[data-oe-shape-data] > * {
+    position: relative;
+}
+
+.o_we_shape {
+    @include o-position-absolute(0,0,0,0);
+    // position: absolute needs to be !important otherwise
+    // some classes (video background) override it with position: relative
+    position: absolute !important;
+    background-repeat: no-repeat;
+
+    @each $module, $shapes in $o-bg-shapes {
+        @each $shape, $style in $shapes {
+            $url-params: '';
+            $colors: map-get($style, 'colors');
+            @each $i in $colors {
+                // %23 is the url-encoded form of '#' which doesn't work as is in urls.
+                $color: str-replace("#{map-get($o-color-palette, "o-color-#{$i}")}", '#', '%23');
+                $url-params: '#{$url-params}&c#{$i}=#{$color}';
+            }
+
+            // eg: o_website_shape_bg_1
+            &.o_#{$module}_#{str-replace($shape, '/', '_')} {
+                // When not customized, this URL, built in SCSS, allows for the
+                // shape to be dynamic and adapted if future color changes.
+                background-image: url("/web_editor/shape/#{$module}/#{$shape}.svg?#{str-slice($url-params, 2)}");
+                background-position: map-get($style, 'position');
+                background-size: map-get($style, 'size');
+                @if map-get($style, 'repeat-y') {
+                    background-repeat: repeat-y;
+                }
+            }
+        }
+    }
+}
+
+.o_we_flip_x {
+    transform: scaleX(-1);
+}
+.o_we_flip_y {
+    transform: scaleY(-1);
+}
+.o_we_flip_x.o_we_flip_y {
+    transform: scale(-1);
+}