initial commit 2

11 files changed, 4381 insertions, 0 deletions

diff --git a/addons/web_editor/static/src/scss/13_0_color_system_support_primary_variables.scss b/addons/web_editor/static/src/scss/13_0_color_system_support_primary_variables.scss
new file mode 100644
index 00000000..4fb5d42c
--- /dev/null
+++ b/addons/web_editor/static/src/scss/13_0_color_system_support_primary_variables.scss
@@ -0,0 +1 @@
+$o-support-13-0-color-system: true;
diff --git a/addons/web_editor/static/src/scss/bootstrap_overridden.scss b/addons/web_editor/static/src/scss/bootstrap_overridden.scss
new file mode 100644
index 00000000..f48d9bda
--- /dev/null
+++ b/addons/web_editor/static/src/scss/bootstrap_overridden.scss
@@ -0,0 +1,76 @@
+// Use auto threshold for yiq colors
+$yiq-contrasted-threshold: false !default;
+
+// Automatically update bootstrap colors map (unused by BS itself)
+$colors: () !default;
+@each $name, $color in $o-color-palette {
+    $colors: map-merge(('#{$name}': o-color($color)), $colors);
+}
+
+$o-btn-bg-colors: () !default;
+$o-btn-bg-colors: map-merge((
+    'primary': o-color('o-cc1-btn-primary'),
+    'secondary': o-color('o-cc1-btn-secondary'),
+), $o-btn-bg-colors);
+$o-btn-border-colors: () !default;
+$o-btn-border-colors: map-merge((
+    'primary': o-color('o-cc1-btn-primary-border'),
+    'secondary': o-color('o-cc1-btn-secondary-border'),
+), $o-btn-border-colors);
+
+// Automatically extend bootstrap to create theme background/text/button classes
+$theme-colors: () !default;
+@each $name, $color in $o-theme-color-palette {
+    $theme-colors: map-merge(('#{$name}': o-color($color)), $theme-colors);
+}
+
+// Automatically extend bootstrap gray palette (the theme palette is supposed to
+// at least declare white and black)
+$grays: () !default;
+@each $name, $color in $o-gray-color-palette {
+    $grays: map-merge(('#{$name}': o-color($color)), $grays);
+}
+
+// Bootstrap use standard variables to define individual colors which are then
+// placed into a map which is then used to get the value of each individual
+// color. As BS4 allows to extend the map a priori to define our own colors,
+// it does not take care of making the standard variables match the values in
+// the user's map. The problem is that, at least for grays, bootstrap uses the
+// standard variables in its _variables.scss file, so if:
+//
+// User file:
+// $grays: (
+//     '100': blue,
+// );
+//
+// BS4:
+// $gray-100: gray !default;
+// $grays: () !default;
+// $grays: map-merge((
+//     '100': $gray-100,
+// ), $grays);
+//
+// -> Here gray('100') is blue but $gray-100 is still gray... so BS4 is not
+// correctly generated as BS4 uses $gray-100 in _variables.scss
+$primary: theme-color('primary') !default;
+$secondary: theme-color('secondary') !default;
+$success: theme-color('success') !default;
+$info: theme-color('info') !default;
+$warning: theme-color('warning') !default;
+$danger: theme-color('danger') !default;
+$light: theme-color('light') !default;
+$dark: theme-color('dark') !default;
+
+$white: gray('white') !default;
+$gray-100: gray('100') !default;
+$gray-200: gray('200') !default;
+$gray-300: gray('300') !default;
+$gray-400: gray('400') !default;
+$gray-500: gray('500') !default;
+$gray-600: gray('600') !default;
+$gray-700: gray('700') !default;
+$gray-800: gray('800') !default;
+$gray-900: gray('900') !default;
+$black: gray('black') !default;
+
+$o-color-system-initialized: true;
diff --git a/addons/web_editor/static/src/scss/bootstrap_overridden_backend.scss b/addons/web_editor/static/src/scss/bootstrap_overridden_backend.scss
new file mode 100644
index 00000000..ef2d6cf0
--- /dev/null
+++ b/addons/web_editor/static/src/scss/bootstrap_overridden_backend.scss
@@ -0,0 +1,14 @@
+
+$o-theme-color-palette: map-remove($o-theme-color-palette, 'primary', 'secondary', 'success', 'info', 'warning', 'danger', 'light', 'dark');
+$o-gray-color-palette: map-remove($o-gray-color-palette, '100', '200', '300', '400', '500', '600', '700', '800', '900');
+
+$o-btn-bg-colors: () !default;
+$o-btn-bg-colors: map-merge((
+    'primary': null,
+    'secondary': null,
+), $o-btn-bg-colors);
+$o-btn-border-colors: () !default;
+$o-btn-border-colors: map-merge((
+    'primary': null,
+    'secondary': null,
+), $o-btn-border-colors);
diff --git a/addons/web_editor/static/src/scss/secondary_variables.scss b/addons/web_editor/static/src/scss/secondary_variables.scss
new file mode 100644
index 00000000..815e2c72
--- /dev/null
+++ b/addons/web_editor/static/src/scss/secondary_variables.scss
@@ -0,0 +1,137 @@
+
+//------------------------------------------------------------------------------
+// Colors
+//------------------------------------------------------------------------------
+
+// Color combinations
+$o-color-combinations: o-safe-nth($o-color-combinations-presets, $o-color-combinations-preset-number, ()) !default;
+$-combination-additions: ();
+@for $index from 1 through length($o-color-combinations) {
+    $combination: map-merge($o-base-color-combination, nth($o-color-combinations, $index));
+
+    @each $element, $color in $combination {
+        $-combination-additions: map-merge($-combination-additions, (
+            'o-cc#{$index}-#{$element}': $color,
+        ));
+    }
+}
+
+// Colors
+$o-color-palette: o-safe-nth($o-color-palettes, $o-color-palette-number, ()) !default;
+// Original color palette can contain override of the default combinations (so keep 'null' values for this merge)
+$o-color-palette: map-merge($-combination-additions, $o-color-palette);
+$o-color-palette: map-merge($o-base-color-palette, o-map-omit($o-color-palette));
+
+// Theme colors
+$o-theme-color-palette: o-safe-nth($o-theme-color-palettes, $o-theme-color-palette-number, ()) !default;
+@if not $o-support-13-0-color-system {
+    $o-theme-color-palette: map-remove($o-theme-color-palette, 'alpha', 'beta', 'gamma', 'delta', 'epsilon');
+}
+$-main-color: map-get($o-color-palette, 'o-color-1');
+$-main-color-lightness: lightness($-main-color);
+$o-theme-color-palette: map-merge((
+    // color 1 and 2 are used to override primary and secondary BS4
+    // colors by default, so that theme colors affect the default Odoo layouts
+    'primary': $-main-color,
+    'secondary': map-get($o-color-palette, 'o-color-2'),
+
+    // BS light and dark colors are not used for any BS component, just
+    // for color utilities. By default, we set them to a very light and
+    // very dark version of a desaturate version of the main color
+    'light': lighten(desaturate($-main-color, 80%), min(70%, max(0%, 97% - $-main-color-lightness))), // Does not increase over 97% lightness
+    'dark': darken(desaturate($-main-color, 80%), min(70%, max(0%, $-main-color-lightness - 10%))), // Does not lower under 10% lightness
+), o-map-omit($o-theme-color-palette));
+$o-theme-color-palette: map-merge($o-base-theme-color-palette, o-map-omit($o-theme-color-palette));
+
+// Gray colors
+// Extend grays with transparent ones (for some reason, BS4 create black-50 and
+// white-50 but does not allow overridding that with variables).
+$o-gray-color-palette: o-safe-nth($o-gray-color-palettes, $o-gray-color-palette-number, ()) !default;
+$o-gray-color-palette: map-merge($o-transparent-grays, o-map-omit($o-gray-color-palette));
+$o-gray-color-palette: map-merge($o-base-gray-color-palette, o-map-omit($o-gray-color-palette));
+
+$o-color-system-initialized: false;
+
+// Returns:
+// - true if the given name is a css color or null
+// - false if a potential valid color name
+// - throws an error if the given arg cannot reference a color
+@function check-color-identifier-type($name) {
+    $-type: type-of($name);
+    @if $-type == 'color' or $-type == 'null' {
+        @return true;
+    } @else if $-type != 'string' {
+        @error "Color name '#{$name}' is of unsupported type '#{$-type}'";
+    }
+    @return false;
+}
+@function use-cc-bg($name) {
+    @if type-of($name) == 'number' {
+        // Preset number, let's return the background color of the related
+        // preset.
+        @return 'o-cc#{$name}-bg';
+    }
+    @return $name;
+}
+// Looks up for the color related to the given name in the related odoo palettes
+// following redirection a maximum number of time (by default none).
+@function o-related-color($name, $max-recursions: 0, $original-name: $name, $use-cc-bg: false) {
+    @if $use-cc-bg {
+        $name: use-cc-bg($name);
+    } @else if type-of($name) == 'number' {
+        @return $name;
+    }
+
+    @if $max-recursions < 0 or check-color-identifier-type($name) {
+        @return $name;
+    }
+
+    $-value: null;
+    @if map-has-key($o-color-palette, $name) {
+        $-value: map-get($o-color-palette, $name);
+    } @else if map-has-key($o-theme-color-palette, $name) {
+        $-value: map-get($o-theme-color-palette, $name);
+    } @else if map-has-key($o-gray-color-palette, $name) {
+        $-value: map-get($o-gray-color-palette, $name);
+    }
+    @return o-related-color($-value, $max-recursions - 1, $original-name);
+}
+// Function which allows to retrieve a color value from a name, the color being
+// either in $theme-colors, $grays or $colors maps. If those maps are not
+// initialized yet, it will look up the color in the related odoo palettes.
+@function o-color($name) {
+    $name: use-cc-bg($name);
+
+    @if check-color-identifier-type($name) {
+        @return $name;
+    }
+
+    // When the system is initialized, it means that the bootstrap maps have
+    // been configured and contain a direct mapping between color name -> css
+    // value. We can thus search in those.
+    @if $o-color-system-initialized {
+        @if map-has-key($colors, $name) {
+            @return color($name);
+        }
+        @if map-has-key($theme-colors, $name) {
+            @return theme-color($name);
+        }
+        @if map-has-key($grays, $name) {
+            @return gray($name);
+        }
+    }
+
+    // If not initialized, search the css color value in selected color palettes
+    @return o-related-color($name, $max-recursions: 10, $use-cc-bg: true);
+}
+
+// Same as 'increase-contrast' except that the color is not changed if the given
+// related color name is part of the given exclusion list (default to a global
+// exclusion list which can be extended by other apps).
+$o-we-auto-contrast-exclusions: () !default;
+@function auto-contrast($color1, $color2, $color1-name, $exclude: $o-we-auto-contrast-exclusions) {
+    @if index($exclude, $color1-name) {
+        @return $color1;
+    }
+    @return increase-contrast($color1, $color2);
+}
diff --git a/addons/web_editor/static/src/scss/web_editor.backend.scss b/addons/web_editor/static/src/scss/web_editor.backend.scss
new file mode 100644
index 00000000..370baed9
--- /dev/null
+++ b/addons/web_editor/static/src/scss/web_editor.backend.scss
@@ -0,0 +1,69 @@
+.oe_form_field_html {
+    position: relative;
+    word-wrap: break-word;
+
+    .note-editable {
+        min-height: 330px;
+        font: inherit !important;
+        font-family: inherit !important;
+        line-height: inherit !important;
+        color: inherit !important;
+        overflow: visible;
+
+        p, div {
+            font-family: 'Lucida Grande', Helvetica, Verdana, Arial, sans-serif;
+            font-size: 13px;
+        }
+    }
+    ul > li > p, p {
+        margin: 0px;
+    }
+    > iframe {
+        display: block;
+        width: 100%;
+        margin: 0;
+        padding: 0;
+        ul > li > p {
+            margin: 0px;
+        }
+        min-height: 300px;
+        min-height: -webkit-calc(100vh - 170px);
+        min-height: calc(100vh - 170px);
+
+        &.o_readonly {
+            border: none;
+        }
+    }
+    .rounded {
+        border-radius: .25rem !important;
+    }
+    table.table.table-bordered {
+        table-layout: fixed;
+    }
+}
+
+.o_field_widgetTextHtml_fullscreen {
+    .oe_form_field_html.o_form_fullscreen_ancestor iframe {
+        position: absolute !important;
+        left: 0 !important;
+        right: 0 !important;
+        top: 0 !important;
+        bottom: 0 !important;
+        width: 100% !important;
+        min-height: 100% !important;
+        z-index: 1001 !important;
+        border: 0;
+    }
+    > :not(.modal):not(.modal-backdrop) {
+        display: none;
+    }
+    .o_form_fullscreen_ancestor {
+        display: block !important;
+        position: static !important;
+        top: 0 !important;
+        left: 0 !important;
+        width: auto !important;
+        overflow: hidden !important;
+        transform: none !important;
+    }
+}
diff --git a/addons/web_editor/static/src/scss/web_editor.common.scss b/addons/web_editor/static/src/scss/web_editor.common.scss
new file mode 100644
index 00000000..5b261c2f
--- /dev/null
+++ b/addons/web_editor/static/src/scss/web_editor.common.scss
@@ -0,0 +1,782 @@
+///
+/// This file regroups basic style rules for web_editor enable page edition and backend utils.
+///
+
+:root {
+    @each $color, $value in $grays {
+        @include print-variable($color, $value);
+    }
+
+    // Most of the keys of the color combination color should be null. We have
+    // to indicate their fallback values.
+    @for $index from 1 through length($o-color-combinations) {
+        $-bg-color: o-color(color('o-cc#{$index}-bg'));
+
+        $-text: color('o-cc#{$index}-text') or color-yiq(o-color('o-cc#{$index}-bg'));
+        $-headings: color('o-cc#{$index}-headings') or $-text;
+        $-h2: color('o-cc#{$index}-h2') or $-headings;
+        $-h3: color('o-cc#{$index}-h3') or $-h2;
+        $-h4: color('o-cc#{$index}-h4') or $-h3;
+        $-h5: color('o-cc#{$index}-h5') or $-h4;
+        $-h6: color('o-cc#{$index}-h6') or $-h5;
+
+        @if not color('o-cc#{$index}-text') {
+            @include print-variable('o-cc#{$index}-text', $-text);
+        }
+        @if not color('o-cc#{$index}-headings') {
+            @include print-variable('o-cc#{$index}-headings', $-headings);
+        }
+        @if not color('o-cc#{$index}-h2') {
+            @include print-variable('o-cc#{$index}-h2', $-h2);
+        }
+        @if not color('o-cc#{$index}-h3') {
+            @include print-variable('o-cc#{$index}-h3', $-h3);
+        }
+        @if not color('o-cc#{$index}-h4') {
+            @include print-variable('o-cc#{$index}-h4', $-h4);
+        }
+        @if not color('o-cc#{$index}-h5') {
+            @include print-variable('o-cc#{$index}-h5', $-h5);
+        }
+        @if not color('o-cc#{$index}-h6') {
+            @include print-variable('o-cc#{$index}-h6', $-h6);
+        }
+
+        $-link: color('o-cc#{$index}-link');
+        $-link-color: if($-link, o-color($-link), theme-color('primary'));
+        @include print-variable('o-cc#{$index}-link', auto-contrast($-link-color, $-bg-color, 'o-cc#{$index}-link'));
+
+        $-btn-primary: color('o-cc#{$index}-btn-primary');
+        @if not $-btn-primary {
+            @include print-variable('o-cc#{$index}-btn-primary', theme-color('primary'));
+        }
+        @if not color('o-cc#{$index}-btn-primary-border') {
+            @include print-variable('o-cc#{$index}-btn-primary-border', $-btn-primary or theme-color('primary'));
+        }
+
+        $-btn-secondary: color('o-cc#{$index}-btn-secondary');
+        @if not $-btn-secondary {
+            @include print-variable('o-cc#{$index}-btn-secondary', theme-color('secondary'));
+        }
+        @if not color('o-cc#{$index}-btn-secondary-border') {
+            @include print-variable('o-cc#{$index}-btn-secondary-border', $-btn-secondary or theme-color('secondary'));
+        }
+    }
+}
+
+html, body {
+    position: relative;
+    width: 100%;
+    height: 100%;
+}
+
+.css_non_editable_mode_hidden {
+    display: none !important;
+}
+.editor_enable .css_editable_mode_hidden {
+    display: none !important;
+}
+.note-toolbar {
+    margin-left: 0 !important;
+}
+.note-popover .popover > .arrow {
+    display: none;
+}
+
+.note-popover .popover, .note-editor {
+    .dropdown-menu .dropdown-item {
+        > i {
+            visibility: hidden;
+        }
+        &.checked > i {
+            visibility: visible;
+        }
+    }
+}
+
+/* ----- GENERIC LAYOUTING HELPERS ---- */
+/* table */
+#wrapwrap, .o_editable {
+    // Only style editor-made tables (shop/portal/... tables are not supposed to
+    // use table-bordered...)
+    table.table.table-bordered {
+        table-layout: fixed;
+        td {
+            min-width: 20px;
+        }
+    }
+    @include media-breakpoint-down(sm) {
+        .table-responsive > table.table {
+            table-layout: auto;
+        }
+    }
+}
+
+// List
+ul.o_checklist {
+    list-style: none;
+
+    >li {
+        position: relative;
+        margin-left: $o-checklist-margin-left;
+
+        &::before {
+            content: '';
+            position: absolute;
+            left: - $o-checklist-margin-left;
+            display: block;
+            height: $o-checklist-before-size;
+            width: $o-checklist-before-size;
+            margin-top: 4px;
+            border: 1px solid;
+            text-align: center;
+            cursor: pointer;
+        }
+        &.o_checked {
+            text-decoration: line-through;
+            &::after {
+                content: "✓";
+                position: absolute;
+                left: - ($o-checklist-margin-left - $o-checklist-checkmark-width);
+                top: +1px;
+            }
+        }
+    }
+}
+ol > li.o_indent, ul > li.o_indent {
+    margin-left: 0;
+    list-style: none;
+    &::before {
+        content: none;
+    }
+}
+
+// Medias
+img.o_we_custom_image {
+    // Images added with the editor are .img-fluid by default but should
+    // still behave like inline content.
+    display: inline-block;
+}
+
+img.shadow {
+    box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.2);
+}
+img.padding-small, .img.padding-small, span.fa.padding-small, iframe.padding-small {
+    padding: 4px;
+}
+img.padding-medium, .img.padding-medium, span.fa.padding-medium, iframe.padding-medium {
+    padding: 8px;
+}
+img.padding-large, .img.padding-large, span.fa.padding-large, iframe.padding-large {
+    padding: 16px;
+}
+img.padding-xl, .img.padding-xl, span.fa.padding-xl, iframe.padding-xl {
+    padding: 32px;
+}
+img.ml-auto, img.mx-auto {
+    display: block;
+}
+
+.fa-6x {
+    font-size: 6em;
+}
+.fa-7x {
+    font-size: 7em;
+}
+.fa-8x {
+    font-size: 8em;
+}
+.fa-9x {
+    font-size: 9em;
+}
+.fa-10x {
+    font-size: 10em;
+}
+.fa.mx-auto {
+    display: block;
+    text-align: center;
+}
+
+div.media_iframe_video {
+    margin: 0 auto;
+    text-align: center;
+    position: relative;
+    overflow: hidden;
+    min-width: 100px;
+
+    iframe {
+        width: 100%;
+        height: 100%;
+        @include o-position-absolute($top: 0);
+        margin: 0 auto;
+        margin-left: -50%;
+    }
+    &.padding-small iframe {
+        padding: 4px;
+    }
+    &.padding-medium iframe {
+        padding: 8px;
+    }
+    &.padding-large iframe {
+        padding: 16px;
+    }
+    &.padding-xl iframe {
+        padding: 32px;
+    }
+
+    .media_iframe_video_size {
+        padding-bottom: 66.5%;
+        position: relative;
+        width: 100%;
+        height: 0;
+    }
+
+    .css_editable_mode_display {
+        @include o-position-absolute(0,0,0,0);
+        width: 100%;
+        height: 100%;
+        display: none;
+        z-index: 2;
+    }
+}
+
+html[data-browser^="msie"] div.media_iframe_video iframe {
+    margin-left: 0;
+}
+
+// Fields
+address {
+    .fa.fa-mobile-phone {
+        margin: 0 3px 0 2px;
+    }
+    .fa.fa-file-text-o {
+        margin-right: 1px;
+    }
+}
+
+span[data-oe-type="monetary"] {
+    white-space: nowrap;
+}
+
+// Menus
+// TODO should not be here but used by web_studio so must stay here for now
+ul.oe_menu_editor {
+    .oe_menu_placeholder {
+        outline: 1px dashed #4183C4;
+    }
+    ul {
+        list-style: none;
+    }
+    li div {
+        cursor: move;
+    }
+}
+
+// Generate all spacings for all sizes
+@mixin o-spacing-all($factor: 1) {
+    // Generate vertical margin/padding classes used by the editor
+    @for $i from 0 through (256 / 8) {
+        @include o-vspacing($i * 8, $factor);
+    }
+    @include o-vspacing(4, $factor);
+
+    // 92px vertical margin is kept for compatibility
+    @include o-vmargins(92, $factor);
+
+    // Some horizontal margin classes defined for convenience
+    // (and compatibility)
+    @include o-hmargins(0, $factor);
+    @include o-hmargins(4, $factor);
+    @include o-hmargins(8, $factor);
+    @include o-hmargins(16, $factor);
+    @include o-hmargins(32, $factor);
+    @include o-hmargins(64, $factor);
+}
+
+// Generate all spacings for one size, scalled by a given factor
+// (0 <= factor <= 1)
+@mixin o-vspacing($name, $factor: 1) {
+    @include o-vmargins($name, $factor);
+    @include o-vpaddings($name, $factor);
+}
+@mixin o-vmargins($name, $factor: 1) {
+    @include o-vmargins-define($name, $factor * $name);
+}
+@mixin o-vpaddings($name, $factor: 1) {
+    @include o-vpaddings-define($name, $factor * $name);
+}
+@mixin o-hspacing($name, $factor: 1) {
+    @include o-hmargins($name, $factor);
+    @include o-hpaddings($name, $factor);
+}
+@mixin o-hmargins($name, $factor: 1) {
+    @include o-hmargins-define($name, $factor * $name);
+}
+@mixin o-hpaddings($name, $factor: 1) {
+    @include o-hpaddings-define($name, $factor * $name);
+}
+
+// Generate all spacings for one size, given the name of the spacing and
+// intended size
+@mixin o-vmargins-define($name, $size: $name) {
+    .mt#{$name} { margin-top: $size * 1px !important; }
+    .mb#{$name} { margin-bottom: $size * 1px !important; }
+}
+@mixin o-vpaddings-define($name, $size: $name) {
+    .pt#{$name} { padding-top: $size * 1px !important; }
+    .pb#{$name} { padding-bottom: $size * 1px !important; }
+}
+@mixin o-hmargins-define($name, $size: $name) {
+    .ml#{$name} { margin-left: $size * 1px !important; }
+    .mr#{$name} { margin-right: $size * 1px !important; }
+}
+@mixin o-hpaddings-define($name, $size: $name) {
+    .pl#{$name} { padding-left: $size * 1px !important; }
+    .pr#{$name} { padding-right: $size * 1px !important; }
+}
+
+// Generate all margins
+@include o-spacing-all;
+
+// Underline
+a.o_underline {
+    text-decoration: underline;
+    &:hover {
+        text-decoration: underline;
+    }
+}
+
+// ACE EDITOR
+.o_ace_view_editor {
+    background: $o-we-ace-color;
+    color: white;
+    display: flex;
+    flex-flow: column nowrap;
+    opacity: 0.97;
+
+    .o_ace_view_editor_title {
+        flex: 0 0 auto;
+        display: flex;
+        align-items: center;
+        padding: $grid-gutter-width/4;
+
+        >.o_ace_type_switcher>button::after {
+            @include o-caret-down;
+            margin-left: 4px;
+        }
+
+        >* {
+            flex: 0 0 auto;
+            margin: 0 $grid-gutter-width/4;
+
+            &.o_include_option {
+                display: flex;
+                align-items: center;
+                font-size: 11px;
+
+                >.custom-control {
+                    margin-right: $grid-gutter-width/4;
+                }
+            }
+
+            &.o_res_list {
+                flex: 1 1 auto;
+                min-width: 60px;
+            }
+        }
+    }
+
+    #ace-view-id {
+        flex: 0 0 auto;
+        padding: $grid-gutter-width/4 $grid-gutter-width/2;
+        background-color: lighten($o-we-ace-color, 10%);
+
+        .o_ace_editor_resource_info {
+            color: #ebecee;
+        }
+    }
+
+    #ace-view-editor {
+        @mixin ace-line-error-mixin {
+            content: "";
+            z-index: 1000;
+            display: block;
+            background-color: theme-color('danger');
+            opacity: 0.5;
+            pointer-events: none;
+        }
+
+        height: 70%; // in case flex is not supported
+        flex: 1 1 auto;
+
+        .ace_gutter {
+            cursor: ew-resize;
+
+            .ace_gutter-cell.o_error {
+                position: relative;
+
+                &::after {
+                    @include o-position-absolute(-100%, 0, -100%, 0);
+                    @include ace-line-error-mixin;
+                }
+            }
+        }
+
+        .ace_resize_bar {
+            @include o-position-absolute($right: 0);
+            width: 25px;
+            height: 100%;
+            cursor: ew-resize;
+        }
+
+        .ace_scroller.o_error::after {
+            @include o-position-absolute(0, auto, 0, 0);
+            width: 3px;
+            @include ace-line-error-mixin;
+        }
+    }
+}
+
+.ace_editor > .ace_gutter {
+    display: block !important; // display even with aria-hidden
+}
+
+.o_ace_select2_dropdown {
+    width: auto !important;
+    padding-top: 4px;
+    font-family: monospace !important;
+
+    >.select2-results {
+        max-height: none;
+        max-height: 70vh;
+
+        .select2-result-label {
+            padding-top: 1px;
+            padding-bottom: 2px;
+
+            >.o_ace_select2_result {
+                padding: 0;
+                font-size: 12px;
+                white-space: nowrap;
+            }
+        }
+    }
+}
+
+.o_nocontent_help {
+    @include o-nocontent-empty;
+
+    .o_empty_folder_image:before {
+        @extend %o-nocontent-empty-document;
+    }
+}
+
+.o_we_search_prompt {
+    position: relative;
+    min-height: 250px;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    & > h2 {
+        max-width: 500px;
+        text-align: center;
+    }
+
+    &::before {
+        content: "";
+        @include o-position-absolute($top: 0, $right: 50px);
+        width: 100px;
+        height: 150px;
+        opacity: .5;
+        background-image: url('/web_editor/static/src/img/curved_arrow.svg');
+        background-size: 100%;
+        background-repeat: no-repeat;
+    }
+}
+
+@include media-breakpoint-down(sm) {
+    odoo-wysiwyg-container {
+        .panel-heading.note-toolbar {
+            overflow-x: auto;
+        }
+        .btn-group {
+            position: static;
+        }
+    }
+    // modal select media
+    .o_technical_modal.o_web_editor_dialog {
+        // see template 'web_editor.FieldTextHtml.fullscreen'
+        z-index: 2001;
+
+        > .o_select_media_dialog {
+            max-width: inherit !important;
+            z-index: 2001;
+
+            .modal-dialog, .model-content {
+                height: 100%;
+            }
+
+            .modal-body {
+                .nav .nav-item.search {
+                    width: 100%;
+
+                    .btn-group {
+                        display: flex;
+                        justify-content: space-around;
+                        padding: 5px;
+                    }
+                }
+
+                // center pictogram
+                .font-icons-icons {
+                    text-align: center;
+                }
+
+                // fix search image
+                .form-control.o_we_search {
+                    height: inherit;
+                }
+
+                .form-inline {
+                    .btn-group {
+                        width: 100%;
+
+                        .btn.btn-primary:not(.dropdown-toggle) {
+                            width: 90%;
+                        }
+                    }
+
+                    > .input-group.ml-2 {
+                        margin-left: 0 !important;
+
+                        > .input-group-append {
+                            width: 100%;
+
+                            > .btn {
+                                width: 100%;
+                            }
+
+                            > .ml-2 {
+                                margin-left: 0 !important;
+                            }
+                        }
+                    }
+                }
+
+                // attachment cells
+                .o_we_existing_attachments > .row {
+                    flex-direction: column;
+
+                    > .o_existing_attachment_cell {
+                        flex: initial;
+                        max-width: 100%;
+
+                        > .o_existing_attachment_remove {
+                            opacity: inherit;
+                            top: 10px;
+                        }
+                    }
+                }
+
+                // select media dialog unsplash error
+                #editor-media-image .unsplash_img_container .unsplash_error .mx-auto {
+                    width: 100%;
+
+                    .form-group {
+                        input.w-100 {
+                            min-width: 100px;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+// BS4 blockquote has no style anymore, except bloquote <footer>
+blockquote {
+    padding: $spacer/2 $spacer;
+    border-left: 5px solid;
+    border-color: gray('300');
+    font-style: italic;
+}
+
+// Bg/text color classes generation
+.o_cc {
+    #{$o-color-extras-nesting-selector} {
+        // Re-force dropdown-item colors inside presets otherwise the presets
+        // 'link' colors take over.
+        .dropdown-menu .dropdown-item { // Need to add +1 priority thanks to
+                                        // .dropdown-menu to counter a:not(.btn)
+            &, h6 { // Quick fix: sometimes we use h6 in dropdowns
+                color: $dropdown-link-color !important;
+
+                @include hover-focus {
+                    color: $dropdown-link-hover-color !important;
+                }
+            }
+            &.disabled,
+            &:disabled {
+                &, h6 { // Quick fix: sometimes we use h6 in dropdowns
+                    color: $dropdown-link-disabled-color !important;
+                }
+            }
+        }
+    }
+}
+@for $index from 1 through length($o-color-combinations) {
+    $-bg: color('o-cc#{$index}-bg');
+    $-text: color('o-cc#{$index}-text');
+    $-headings: color('o-cc#{$index}-headings');
+    $-h2: color('o-cc#{$index}-h2');
+    $-h3: color('o-cc#{$index}-h3');
+    $-h4: color('o-cc#{$index}-h4');
+    $-h5: color('o-cc#{$index}-h5');
+    $-h6: color('o-cc#{$index}-h6');
+    $-link: color('o-cc#{$index}-link');
+    $-btn-primary: color('o-cc#{$index}-btn-primary');
+    $-btn-primary-border: color('o-cc#{$index}-btn-primary-border');
+    $-btn-secondary: color('o-cc#{$index}-btn-secondary');
+    $-btn-secondary-border: color('o-cc#{$index}-btn-secondary-border');
+
+    // Those color classes color multiple elements when applied on a snippet.
+    // Those rules are not important so that they can be overridden through
+    // bg and text utility classes. **
+    .o_cc#{$index} {
+        // Background & Text
+        $-bg-color: o-color($-bg);
+        @include o-bg-color($-bg-color, o-color($-text), $important: false, $yiq-min-opacity-threshold: 0);
+
+        #{$o-color-extras-nesting-selector} {
+            // Headings
+            h1, h2, h3, h4, h5, h6 {
+                // 'inherit' comes from the o-bg-color mixin
+                color: o-color($-headings);
+            }
+            h2, h3, h4, h5, h6 {
+                color: o-color($-h2);
+            }
+            h3, h4, h5, h6 {
+                color: o-color($-h3);
+            }
+            h4, h5, h6 {
+                color: o-color($-h4);
+            }
+            h5, h6 {
+                color: o-color($-h5);
+            }
+            h6 {
+                color: o-color($-h6);
+            }
+
+            // Links
+            $-link-color: if($-link, o-color($-link), theme-color('primary'));
+            $-link-hover-color: darken($-link-color, 15%);
+            a:not(.btn), .btn-link {
+                color: auto-contrast($-link-color, $-bg-color, 'o-cc#{$index}-link');
+
+                @include hover {
+                    color: auto-contrast($-link-hover-color, $-bg-color, 'o-cc#{$index}-link');
+                }
+            }
+
+            // Buttons
+
+            // Primary
+            $-btn-primary-color: if($-btn-primary, o-color($-btn-primary), theme-color('primary'));
+            $-btn-primary-border-color: if($-btn-primary-border, o-color($-btn-primary-border), $-btn-primary-color);
+            .btn-fill-primary {
+                @include button-variant($-btn-primary-color, $-btn-primary-border-color);
+            }
+            .btn-outline-primary {
+                @include button-outline-variant($-btn-primary-border-color);
+            }
+
+            // Secondary
+            $-btn-secondary-color: if($-btn-secondary, o-color($-btn-secondary), theme-color('secondary'));
+            $-btn-secondary-border-color: if($-btn-secondary-border, o-color($-btn-secondary-border), $-btn-secondary-color);
+            .btn-fill-secondary {
+                @include button-variant($-btn-secondary-color, $-btn-secondary-border-color);
+            }
+            .btn-outline-secondary {
+                @include button-outline-variant($-btn-secondary-border-color);
+            }
+
+            // 'Active' states. Note: this only emulates very common components
+            // used in snippets. This might need to be more complex the day we
+            // can apply color combinations anywhere (page-item, ...).
+            .nav-pills {
+                .nav-link.active,
+                .show > .nav-link {
+                    background-color: $-btn-primary-color;
+                    color: color-yiq($-btn-primary-color);
+                }
+            }
+            .dropdown-menu .dropdown-item { // Need to add +1 priority thanks to
+                                            // .dropdown-menu (see .o_cc).
+                &.active,
+                &:active {
+                    &, h6 { // Quick fix: sometimes we use h6 in dropdowns
+                        @include gradient-bg($-btn-primary-color);
+                        color: color-yiq($-btn-primary-color) !important;
+
+                        @include hover-focus {
+                            color: color-yiq($-btn-primary-color) !important;
+                        }
+                    }
+                }
+            }
+            a.list-group-item {
+                color: $-btn-primary-color;
+
+                &.active {
+                    background-color: $-btn-primary-color;
+                    color: color-yiq($-btn-primary-color);
+                    border-color: $-btn-primary-color;
+                }
+            }
+        }
+    }
+}
+
+// Extend bootstrap to create background and text utilities for some colors
+// outside of the $theme-colors too (but not btn-, alert-, etc).
+@for $index from 1 through 5 {
+    $-color-name: 'o-color-#{$index}';
+    $-color: color($-color-name);
+    @include bg-variant(".bg-#{$-color-name}", $-color);
+    @include text-emphasis-variant(".text-#{$-color-name}", $-color);
+}
+
+// Base snippet rules
+%o-we-background-layer-parent {
+    &, & > * {
+        // Allow background layers to be placed accordingly and snippet content
+        // to be displayed on top. Note: we cannot just position the layers
+        // with z-index: -1, otherwise it would go under the snippet own
+        // background. Adding a z-index: 0 on the snippet to create its own
+        // stacking context won't solve that either as, in that case, any BS
+        // component inside would be using that stacking context (e.g. a
+        // dropdown inside snippet 1 of the page would go under snippet 2
+        // when opened since the dropdown z-index would be confined into
+        // snippet 1's stacking context.
+        position: relative;
+    }
+}
+%o-we-background-layer {
+    @include o-position-absolute(0, 0, 0, 0);
+    position: absolute !important;
+    display: block;
+    overflow: hidden;
+    background-repeat: no-repeat;
+    pointer-events: none;
+}
+
+section, .oe_img_bg, [data-oe-shape-data] {
+    @extend %o-we-background-layer-parent;
+}
+.o_we_bg_filter {
+    @extend %o-we-background-layer;
+}
diff --git a/addons/web_editor/static/src/scss/web_editor.frontend.scss b/addons/web_editor/static/src/scss/web_editor.frontend.scss
new file mode 100644
index 00000000..232b7b90
--- /dev/null
+++ b/addons/web_editor/static/src/scss/web_editor.frontend.scss
@@ -0,0 +1,74 @@
+@include media-breakpoint-down(sm) {
+    img, .media_iframe_video, span.fa, i.fa {
+        transform: none !important;
+    }
+}
+
+.o_wysiwyg_loader {
+    @extend :disabled;
+    pointer-events: none;
+    min-height: 100px;
+    color: transparent;
+}
+.o_wysiwyg_loading {
+    @include o-position-absolute($top: 50%, $left: 50%);
+    transform: translate(-50%, -50%)
+}
+
+.ui-autocomplete {
+    max-height: 50vh;
+    overflow-y: auto;
+    overflow-x: hidden;
+
+    .ui-menu-item {
+        padding: 0;
+        > .ui-state-active {
+            border: none;
+            font-weight: normal;
+            margin: 0;
+        }
+    }
+}
+
+// Background shapes
+.o_we_shape {
+    @extend %o-we-background-layer;
+
+    @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;
+                }
+            }
+        }
+    }
+}
+@include media-breakpoint-down(sm) {
+    .o_we_shape {
+        display: none;
+    }
+}
+.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);
+}
diff --git a/addons/web_editor/static/src/scss/web_editor.variables.scss b/addons/web_editor/static/src/scss/web_editor.variables.scss
new file mode 100644
index 00000000..11cb2be1
--- /dev/null
+++ b/addons/web_editor/static/src/scss/web_editor.variables.scss
@@ -0,0 +1,728 @@
+///
+/// This files regroups the variables and mixins which are specific to the editor.
+///
+
+//------------------------------------------------------------------------------
+// Odoo Editor UI
+//------------------------------------------------------------------------------
+
+$o-we-bg-darkest: #000000 !default;
+$o-we-bg-darker: #141217 !default;
+$o-we-bg-dark: #191922 !default;
+$o-we-bg-light: #2b2b33 !default;
+$o-we-bg-lighter: #3e3e46 !default;
+$o-we-bg-lightest: #595964 !default;
+
+$o-we-fg-darker: #9d9d9d !default;
+$o-we-fg-dark: #C6C6C6 !default;
+$o-we-fg-light: #D9D9D9 !default;
+$o-we-fg-lighter: #FFFFFF !default;
+
+$o-we-color-danger: #e6586c !default;
+$o-we-color-warning: #f0ad4e !default;
+$o-we-color-success: #40ad67 !default;
+$o-we-color-info: #6999a8 !default;
+
+$o-we-bg: $o-we-bg-light !default;
+$o-we-color: $o-we-fg-light !default;
+$o-we-font-size: 13px !default;
+$o-we-font-family: Roboto, 'Montserrat', 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif !default;
+$o-we-accent: #01bad2 !default;
+$o-we-border-width: 1px !default;
+$o-we-border-color: $o-we-bg-light !default;
+
+$o-we-ace-color: #2F3129 !default;
+
+$o-we-handles-offset-to-hide: 10000px !default;
+$o-we-handles-btn-size: 20px !default;
+$o-we-handles-accent-color: $o-we-accent !default;
+$o-we-handles-accent-color-preview: $o-enterprise-color !default;
+$o-we-handle-edge-size: 8px !default;
+$o-we-handle-border-width: 2px !default;
+
+$o-we-dropzone-size: 30px !default; // $grid-gutter-width (todo: allow to use the variable)
+$o-we-dropzone-border-width: 2px !default;
+$o-we-dropzone-border: $o-we-dropzone-border-width dashed $o-brand-odoo !default;
+
+// Translations
+$o-we-content-to-translate-color: rgb(255, 255, 90) !default;
+$o-we-translated-content-color: rgb(120, 215, 110) !default;
+
+$o-we-toolbar-height: 32px !default;
+
+$o-we-item-spacing: 8px !default;
+$o-we-item-border-width: 1px !default;
+$o-we-item-border-color: $o-we-bg-darkest !default;
+$o-we-item-border-radius: 2px !default;
+$o-we-item-clickable-bg: $o-we-bg-lightest!default;
+$o-we-item-clickable-color: $o-we-fg-light!default;
+$o-we-item-clickable-hover-bg: $o-we-bg-dark!default;
+$o-we-item-pressed-bg: $o-we-bg-light !default;
+$o-we-item-pressed-color: $o-we-fg-lighter !default;
+
+$o-we-item-standup-color-light: $o-we-fg-lighter;
+$o-we-item-standup-color-dark: $o-we-bg-darkest;
+$o-we-item-standup-top: inset 0 1px 0;
+$o-we-item-standup-bottom: inset 0 -1px 0;
+
+$o-we-dropdown-spacing: $o-we-item-spacing !default;
+$o-we-dropdown-bg: $o-we-bg-darker !default;
+$o-we-dropdown-border-width: 1px !default;
+$o-we-dropdown-border-color: $o-we-bg-darkest !default;
+$o-we-dropdown-shadow: 0 2px 8px 0 rgba(black, 0.5) !default;
+$o-we-dropdown-item-height: 34px !default;
+$o-we-dropdown-item-spacing: 1px !default;
+$o-we-dropdown-item-bg: $o-we-bg-lightest !default;
+$o-we-dropdown-item-bg-hover: $o-we-bg-light !default;
+$o-we-dropdown-item-color: $o-we-fg-dark !default;
+$o-we-dropdown-item-hover-color: $o-we-fg-light !default;
+$o-we-dropdown-item-active-bg: mix($o-we-dropdown-item-bg, $o-we-dropdown-item-bg-hover) !default;
+$o-we-dropdown-item-active-color: $o-we-fg-lighter !default;
+$o-we-dropdown-caret-spacing: 2px !default;
+
+$o-we-sidebar-bg: $o-we-bg !default;
+$o-we-sidebar-color: $o-we-color !default;
+$o-we-sidebar-font-size: 12px !default;
+$o-we-sidebar-border-width: $o-we-border-width !default;
+$o-we-sidebar-border-color: $o-we-border-color !default;
+$o-we-sidebar-width: $o-we-sidebar-border-width + 290px !default;
+
+$o-we-sidebar-top-height: 46px !default;
+
+$o-we-sidebar-tabs-size-ratio: 1 !default;
+$o-we-sidebar-tabs-bg: $o-we-bg-darker !default;
+$o-we-sidebar-tabs-color: $o-we-sidebar-color !default;
+$o-we-sidebar-tabs-disabled-color: $o-we-fg-darker !default;
+$o-we-sidebar-tabs-active-border-width: 2px !default;
+$o-we-sidebar-tabs-active-border-color: $o-we-accent !default;
+$o-we-sidebar-tabs-active-color: $o-we-fg-lighter !default;
+
+$o-we-sidebar-blocks-content-bg: $o-we-bg-dark !default;
+$o-we-sidebar-blocks-content-spacing: 10px !default;
+$o-we-sidebar-blocks-content-snippet-spacing: 2px !default;
+$o-we-sidebar-blocks-content-snippet-bg: $o-we-bg-lighter !default;
+
+$o-we-sidebar-content-highlight-bar-width: 2px !default;
+$o-we-sidebar-content-highlight-bar-color: $o-we-accent !default;
+
+$o-we-sidebar-content-gutter-item-indent: 5px !default;
+$o-we-sidebar-content-padding-base: 10px !default;
+$o-we-sidebar-content-indent: $o-we-sidebar-content-gutter-item-indent + $o-we-sidebar-content-padding-base !default;
+$o-we-sidebar-content-backdrop-bg: rgba(black, 0.2) !default;
+$o-we-sidebar-content-available-room: $o-we-sidebar-width - $o-we-sidebar-content-padding-base - $o-we-sidebar-content-indent !default;
+
+$o-we-sidebar-content-main-title-height: 32px !default;
+$o-we-sidebar-content-main-title-color: $o-we-fg-lighter !default;
+$o-we-sidebar-content-main-title-font-size: 13px !default;
+
+$o-we-sidebar-content-block-spacing: 10px !default;
+
+$o-we-sidebar-content-fold-block-bg: $o-we-bg-light !default;
+
+$o-we-sidebar-content-field-spacing: $o-we-item-spacing !default;
+$o-we-sidebar-content-field-color: $o-we-fg-darker !default;
+$o-we-sidebar-content-field-control-item-color: $o-we-fg-darker !default;
+$o-we-sidebar-content-field-control-item-size: 1em !default;
+$o-we-sidebar-content-field-control-item-spacing: 0.5em !default;
+$o-we-sidebar-content-field-label-spacing: 6px !default;
+
+$o-we-sidebar-content-field-label-width: $o-we-sidebar-content-available-room * .4 !default;
+$o-we-sidebar-content-field-multi-spacing: $o-we-sidebar-content-field-label-spacing * .5 !default;
+$o-we-sidebar-content-field-height: 22px !default;
+
+$o-we-sidebar-content-field-border-width: $o-we-item-border-width !default;
+$o-we-sidebar-content-field-border-color:$o-we-item-border-color !default;
+$o-we-sidebar-content-field-border-radius: $o-we-item-border-radius !default;
+$o-we-sidebar-content-field-disabled-color: $o-we-sidebar-content-field-control-item-color !default;
+$o-we-sidebar-content-field-clickable-bg: $o-we-item-clickable-bg !default;
+$o-we-sidebar-content-field-clickable-color: $o-we-item-clickable-color !default;
+$o-we-sidebar-content-field-clickable-spacing: $o-we-sidebar-content-field-label-spacing !default;
+$o-we-sidebar-content-field-pressed-bg: $o-we-item-pressed-bg !default;
+$o-we-sidebar-content-field-pressed-color: $o-we-item-pressed-color !default;
+
+$o-we-sidebar-content-field-dropdown-spacing: $o-we-dropdown-spacing !default;
+$o-we-sidebar-content-field-dropdown-bg: $o-we-dropdown-bg !default;
+$o-we-sidebar-content-field-dropdown-border-width: $o-we-dropdown-border-width !default;
+$o-we-sidebar-content-field-dropdown-border-color: $o-we-dropdown-border-color !default;
+$o-we-sidebar-content-field-dropdown-shadow: $o-we-dropdown-shadow !default;
+$o-we-sidebar-content-field-dropdown-item-height: $o-we-dropdown-item-height !default;
+$o-we-sidebar-content-field-dropdown-item-spacing: $o-we-dropdown-item-spacing !default;
+$o-we-sidebar-content-field-dropdown-item-bg: $o-we-dropdown-item-bg !default;
+$o-we-sidebar-content-field-dropdown-item-bg-hover: $o-we-dropdown-item-bg-hover !default;
+$o-we-sidebar-content-field-dropdown-item-color: $o-we-dropdown-item-color !default;
+$o-we-sidebar-content-field-dropdown-item-hover-color: $o-we-dropdown-item-hover-color !default;
+$o-we-sidebar-content-field-dropdown-item-active-bg: $o-we-dropdown-item-active-bg !default;
+$o-we-sidebar-content-field-dropdown-item-active-color: $o-we-dropdown-item-active-color !default;
+
+$o-we-sidebar-content-field-colorpicker-size: 20px !default;
+$o-we-sidebar-content-field-colorpicker-size-large: 26px !default;
+$o-we-sidebar-content-field-colorpicker-shadow: inset 0 0 0 1px rgba(white, 0.5) !default;
+$o-we-sidebar-content-field-colorpicker-dropdown-bg: $o-we-bg-lightest !default;
+$o-we-sidebar-content-field-colorpicker-dropdown-color: $o-we-fg-light !default;
+$o-we-sidebar-content-field-colorpicker-dropdown-active-color: $o-we-fg-lighter !default;
+$o-we-sidebar-content-field-colorpicker-cc-width: 208px !default;
+$o-we-sidebar-content-field-colorpicker-cc-height: 26px !default;
+
+$o-we-sidebar-content-field-input-max-width: 60px !default;
+$o-we-sidebar-content-field-input-bg: $o-we-bg-light !default;
+$o-we-sidebar-content-field-input-font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
+$o-we-sidebar-content-field-input-unit-font-size: 11px !default;
+$o-we-sidebar-content-field-input-border-color: $o-we-accent !default;
+
+$o-we-sidebar-content-field-button-group-button-spacing: $o-we-sidebar-content-field-clickable-spacing;
+
+$o-we-sidebar-content-field-progress-height: 4px !default;
+$o-we-sidebar-content-field-progress-control-height: 10px !default;
+$o-we-sidebar-content-field-progress-color: $o-we-fg-darker !default;
+$o-we-sidebar-content-field-progress-active-color: $o-we-accent !default;
+
+$o-we-sidebar-content-field-toggle-width: 20px !default;
+$o-we-sidebar-content-field-toggle-height: 12px !default;
+$o-we-sidebar-content-field-toggle-bg: $o-we-fg-darker !default;
+$o-we-sidebar-content-field-toggle-active-bg: $o-we-accent !default;
+$o-we-sidebar-content-field-toggle-control-width: 11px !default;
+$o-we-sidebar-content-field-toggle-control-height: $o-we-sidebar-content-field-toggle-height - 2px !default;
+$o-we-sidebar-content-field-toggle-control-bg: $o-we-fg-lighter !default;
+$o-we-sidebar-content-field-toggle-control-shadow: 0 2px 3px 0 $o-we-bg-darkest !default;
+
+//------------------------------------------------------------------------------
+// Preview component Mixins
+//------------------------------------------------------------------------------
+
+@mixin o-we-preview-box($color-text: white) {
+    border-top: 1px solid black;
+    border-bottom: 1px solid white;
+    background-image: linear-gradient(-150deg, $o-we-bg-light, $o-we-bg-dark);
+
+    color:  $color-text;
+}
+
+@mixin o-we-preview-content {
+    display: inline-block;
+    max-width: 100%;
+    overflow: hidden;
+    box-shadow: 0 0 15px 2px #000;
+}
+
+//------------------------------------------------------------------------------
+// Mixins to shield UI from themed bootstrap
+//------------------------------------------------------------------------------
+
+@mixin o-w-preserve-base {
+    font-size: $o-we-font-size;
+    font-family: $o-we-font-family;
+    line-height: 1.5;
+    color: #33363e;
+
+    .text-muted {
+        color: #999999 !important;
+    }
+}
+
+@mixin o-w-preserve-headings {
+    h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
+        font-family: $o-we-font-family;
+        line-height: 1.5;
+        color: $o-we-bg-light;
+        font-weight: bold;
+    }
+    h1, .h1 {
+        font-size: 2.4 * $o-we-font-size;
+    }
+    h2, .h2 {
+        font-size: 1.5 * $o-we-font-size;
+    }
+    h3, .h3 {
+        font-size: 1.3 * $o-we-font-size;
+    }
+    h4, .h4 {
+        font-size: 1.2 * $o-we-font-size;
+    }
+    h5, .h5 {
+        font-size: 1.1 * $o-we-font-size;
+    }
+    h6, .h6 {
+        font-size: $o-we-font-size;
+    }
+}
+
+@mixin o-w-preserve-links {
+    a:not(.o_btn_preview) {
+        color: $o-brand-primary;
+
+        &:focus, &:active, &:focus:active {
+            outline: none!important;
+        }
+    }
+
+    .badge {
+        &:hover a, a {
+            color: #fff;
+        }
+    }
+}
+
+@mixin o-w-preserve-forms {
+    :not(.input-group):not(.form-group):not(.input-group-append):not(.input-group-prepend) > .form-control {
+        height: 34px;
+    }
+    .form-control {
+        padding: 6px 12px;
+        font-size: 14px;
+        line-height: 1.5;
+        border: 1px solid #d4d5d7;
+        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 {
+            border-color: $danger;
+        }
+    }
+
+    select.form-control {
+        appearance: none;
+        background: url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPScxLjEnIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZycgeG1 sbnM6eGxpbms9J2h0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsnIHdpZHRoPScyNCcgaGVpZ2 h0PScyNCcgdmlld0JveD0nMCAwIDI0IDI0Jz48cGF0aCBpZD0nc3ZnXzEnIGQ9J203LjQwNiw3L jgyOGw0LjU5NCw0LjU5NGw0LjU5NCwtNC41OTRsMC40MDYsMS40MDZsLTUsNC43NjZsLTUsLTQu NzY2bDAuNDA2LC0xLjQwNnonIGZpbGw9JyM4ODgnLz48L3N2Zz4=');
+        background-position: 100% 65%;
+        background-repeat: no-repeat;
+    }
+}
+
+@mixin o-w-preserve-modals {
+    .modal-content {
+        border-radius: 0;
+        background-color: white;
+
+        .modal-header {
+            border-bottom-color: #e9ecef;
+        }
+        .modal-body {
+            background-color: white;
+        }
+        .modal-footer {
+            border-top-color: #e9ecef;
+            text-align: left;
+        }
+    }
+
+    .close {
+        font-size: 1.5 * $o-we-font-size;
+    }
+}
+
+@mixin o-w-preserve-tabs {
+    .nav-tabs {
+        border-bottom: 1px solid #e9ecef;
+
+        > li  {
+            > a {
+                line-height: 1.5;
+                color: #4e525b;
+
+                &:hover {
+                    border-color: #dee2e6;
+                }
+
+                &.active {
+                    &, &:hover, &:focus {
+                        color: #3D4047;
+                        background-color: white;
+                        border-color: #dee2e6 #dee2e6 #FFFFFF;
+                    }
+                }
+            }
+        }
+    }
+}
+
+@mixin o-w-preserve-btn {
+    .btn:not(.o_btn_preview) {
+        border-radius: 0;
+        font-weight: normal;
+        text-transform: none;
+        @include button-size(.375rem, .75rem, 0.875rem, 1.5, 0);
+
+        &.btn-primary {
+            @include button-variant($o-brand-primary, $o-brand-primary);
+            color: white;
+        }
+        &.btn-secondary {
+            @include button-variant(white, white);
+            color: $o-brand-primary;
+        }
+        &.btn-link {
+            @include button-variant(white, white);
+            color: $o-brand-primary;
+        }
+        &.btn-success {
+            @include button-variant($o-we-color-success, $o-we-color-success);
+            color: white;
+        }
+        &.btn-info {
+            @include button-variant($o-we-color-info, $o-we-color-info);
+            color: white;
+        }
+        &.btn-warning {
+            @include button-variant($o-we-color-warning, $o-we-color-warning);
+            color: #33363e;
+        }
+        &.btn-danger {
+            @include button-variant($o-we-color-danger, $o-we-color-danger);
+            color: #33363e;
+        }
+    }
+}
+
+@mixin o-w-preserve-cards {
+    .card {
+        padding: 19px;
+        margin-bottom: 20px;
+        background-color: white;
+        border: 1px solid darken(white, 5%);
+        border-radius: 0;
+        box-shadow: none;
+    }
+}
+
+@mixin o-w-preserve-dropdown-menus {
+    .dropdown-menu {
+        background-color: white;
+    }
+    .dropdown-item {
+        color: #212529;
+
+        @include hover-focus {
+            color: darken(#212529, 5%);
+        }
+        &.active,
+        &:active {
+            color: white;
+            @include gradient-bg($o-brand-primary);
+        }
+    }
+}
+
+//------------------------------------------------------------------------------
+// Edited content
+//------------------------------------------------------------------------------
+
+$o-support-13-0-color-system: false !default;
+
+$o-checklist-margin-left: 20px;
+$o-checklist-checkmark-width: 2px;
+$o-checklist-before-size: 13px;
+
+
+// Edition colors
+
+// Note: the "base" palettes contain all possible keys a palette should or
+// must contain, with a default value which should work in use cases where it
+// will be used. Any palette defined by an app will be merged with the base
+// palette once selected to ensure it works.
+
+// Colors
+$o-base-color-palette: (
+    'o-color-1': transparent,
+    'o-color-2': transparent,
+    'o-color-3': transparent,
+    'o-color-4': transparent,
+    'o-color-5': transparent,
+) !default;
+$o-color-palettes: (
+    (
+        'o-color-1': scale-color($o-enterprise-primary-color, $saturation: -50%, $lightness: 20%),
+        'o-color-2': scale-color($o-enterprise-color, $saturation: -50%),
+        'o-color-3': #F6F6F6,
+        'o-color-4': #FFFFFF,
+        'o-color-5': #383E45,
+    ),
+    (
+        'o-color-1': #337ab7,
+        'o-color-2': #e9ecef,
+        'o-color-3': #F8F9FA,
+        'o-color-4': #FFFFFF,
+        'o-color-5': #343a40,
+
+        'menu': 2,
+        'footer': 2,
+        'copyright': 5,
+    ),
+) !default;
+$o-color-palette-number: 1 !default;
+
+// Theme colors
+$o-base-theme-color-palette: () !default;
+$o-theme-color-palettes: (
+    // alpha -> epsilon are old color names kept for compatibility.
+    // They should not be used in the code base anymore and ideally they will
+    // not generate any classes for >= 13.4 databases.
+    (
+        'alpha': $o-enterprise-primary-color,
+        'beta': $o-enterprise-color,
+        'gamma': #5C5B80,
+        'delta': #5B899E,
+        'epsilon': #E46F78,
+    ),
+) !default;
+$o-theme-color-palette-number: 1 !default;
+
+// Greyscale transparent colours
+
+// Note: BS values are forced by default in every palette as the values can
+// be used in bootstrap_overridden.scss files through the o-color function.
+// Also, all of the gray colors generates bg- classes in Odoo so black and white
+// are added for the same reason.
+
+$o-base-gray-color-palette: (
+    'white': #FFFFFF,
+    '100': #F8F9FA,
+    '200': #E9ECEF,
+    '300': #DEE2E6,
+    '400': #CED4DA,
+    '500': #ADB5BD,
+    '600': #6C757D,
+    '700': #495057,
+    '800': #343A40,
+    '900': #212529,
+    'black': #000000,
+) !default;
+$o-transparent-grays: (
+    'black-15': rgba(black, 0.15),
+    'black-25': rgba(black, 0.25),
+    'black-50': rgba(black, 0.5),
+    'black-75': rgba(black, 0.75),
+    'white-25': rgba(white, 0.25),
+    'white-50': rgba(white, 0.5),
+    'white-75': rgba(white, 0.75),
+    'white-85': rgba(white, 0.85),
+) !default;
+$o-gray-color-palettes: () !default;
+$o-gray-color-palette-number: 1 !default;
+
+// Color combinations
+$o-base-color-combination: (
+    'bg': 'white',
+    'text': null, // Default to better contrast with the 'bg'
+    'headings': null, // Default to 'text'
+    'h2': null, // Default to 'h(x-1)'
+    'h3': null,
+    'h4': null,
+    'h5': null,
+    'h6': null,
+    'link': null, // Default to BS 'primary' (= first odoo color)
+    'btn-primary': null, // Default to BS 'primary' (= first odoo color)
+    'btn-primary-border': null, // Default to 'btn-primary'
+    'btn-secondary': null, // Default to BS 'secondary' (= second odoo color)
+    'btn-secondary-border': null, // Default to 'btn-secondary'
+);
+$o-color-combinations-presets: (
+    (
+        (
+            'bg': 'o-color-4',
+        ),
+        (
+            'bg': 'o-color-3',
+            'headings': 'o-color-1',
+        ),
+        (
+            'bg': 'o-color-2',
+            'btn-secondary': 'o-color-3',
+        ),
+        (
+            'bg': 'o-color-1',
+            'link': 'o-color-5',
+            'btn-primary': 'o-color-5',
+            'btn-secondary': 'o-color-3',
+        ),
+        (
+            'bg': 'o-color-5',
+            'headings': 'o-color-4',
+            'btn-secondary': 'o-color-3',
+        ),
+    ),
+) !default;
+$o-color-combinations-preset-number: 1;
+
+// We allow snippets to be colored and elements like card and columns to be
+// colored as well. We need components targeted by those colored classes to
+// use the deepest coloring element config. We only allow here for this to
+// work for one level of nesting. Note: snippets which can contain other
+// snippets will have problem because of this; this is a limitation of the
+// system until a better solution is found.
+$o-color-extras-nesting-selector: '&, .o_colored_level &';
+
+// Apply colors according to the given identifier. Can either be a preset
+// number, a color name or a css color.
+@mixin o-apply-colors($identifier, $with-extras: true, $background: $body-bg) {
+    $-related-color: o-related-color($identifier, $max-recursions: 10);
+    @if type-of($-related-color) == 'number' {
+        // This is a preset to be applied, just extend it. This should probably
+        // be avoided and use the class in XML if possible.
+        @extend .o_cc#{$-related-color};
+    } @else {
+        @include o-bg-color(o-color($-related-color), $with-extras: $with-extras, $background: $background, $important: false);
+    }
+}
+
+// Function which returns if a color has contrast enough in comparaison to
+// another given color.
+@function has-enough-contrast($color1, $color2) {
+    $r: (max(red($color1), red($color2))) - (min(red($color1), red($color2)));
+    $g: (max(green($color1), green($color2))) - (min(green($color1), green($color2)));
+    $b: (max(blue($color1), blue($color2))) - (min(blue($color1), blue($color2)));
+    $sum-rgb: $r + $g + $b;
+    @return ($sum-rgb >= 500);
+}
+
+// Function which transforms a color to increase its contrast in comparison to
+// another given color.
+@function increase-contrast($color1, $color2) {
+    @if not $color1 or not $color2 {
+        @return null;
+    }
+    $luma-c1: luma($color1);
+    $luma-c2: luma($color2);
+    $lightness-c1: lightness($color1);
+    $lightness-inc: if($luma-c1 < $luma-c2, -1%, 1%);
+    $i: 0;
+    // Max 15% lightness change even if not contrasted enough
+    @while ($lightness-c1 > 0.1% and $lightness-c1 < 99.9% and $i < 15 and not has-enough-contrast($color1, $color2)) {
+        $color1: adjust-color($color1, $lightness: $lightness-inc);
+        $lightness-c1: $lightness-c1 + $lightness-inc;
+        $i: $i + 1;
+    }
+    @return $color1;
+}
+
+// Print a document property the right way (depending on the type of the printed
+// variable).
+@mixin print-variable($key, $value) {
+    @if $value != null {
+        $-type: type-of($value);
+        @if $-type == 'string' {
+            --#{$key}: '#{$value}';
+        } @else if $-type == 'list' {
+            --#{$key}: #{inspect($value)};
+        } @else {
+            --#{$key}: #{$value};
+        }
+    }
+}
+
+// format: (module_name: (shape_filename: ('position': X, 'size': Y, 'colors': (1, [3], ...)), ...))
+$o-bg-shapes: ('web_editor': (
+    'Airy/01': ('position': bottom, 'size': 100% auto, 'colors': (1), 'repeat-y': false),
+    'Airy/02': ('position': top, 'size': 100% auto, 'colors': (1), 'repeat-y': false),
+    'Airy/03': ('position': top, 'size': 100% auto, 'colors': (5), 'repeat-y': false),
+    'Airy/04': ('position': center, 'size': 100% 100%, 'colors': (1), 'repeat-y': false),
+    'Airy/05': ('position': center, 'size': 100% 100%, 'colors': (1), 'repeat-y': false),
+    'Airy/06': ('position': bottom, 'size': 100% auto, 'colors': (2), 'repeat-y': false),
+    'Airy/07': ('position': top, 'size': 100% auto, 'colors': (2), 'repeat-y': false),
+    'Airy/08': ('position': bottom, 'size': 100% auto, 'colors': (1), 'repeat-y': false),
+    'Airy/09': ('position': top, 'size': 100% auto, 'colors': (1), 'repeat-y': false),
+    'Airy/10': ('position': bottom, 'size': 100% auto, 'colors': (5), 'repeat-y': false),
+    'Airy/11': ('position': top, 'size': 100% auto, 'colors': (5), 'repeat-y': false),
+    'Airy/12': ('position': top, 'size': 100% auto, 'colors': (1, 3), 'repeat-y': false),
+    'Airy/13': ('position': bottom, 'size': 100% auto, 'colors': (1, 4), 'repeat-y': false),
+    'Airy/14': ('position': bottom, 'size': 100% auto, 'colors': (1, 4), 'repeat-y': false),
+    'Blobs/01': ('position': top, 'size': 100% auto, 'colors': (2), 'repeat-y': false),
+    'Blobs/02': ('position': bottom, 'size': 100% auto, 'colors': (1, 2), 'repeat-y': false),
+    'Blobs/03': ('position': top, 'size': 100% auto, 'colors': (2), 'repeat-y': false),
+    'Blobs/04': ('position': center, 'size': 100% auto, 'colors': (5), 'repeat-y': false),
+    'Blobs/05': ('position': bottom, 'size': 100% auto, 'colors': (1), 'repeat-y': false),
+    'Blobs/06': ('position': top, 'size': 100% auto, 'colors': (1), 'repeat-y': false),
+    'Blobs/07': ('position': top, 'size': 100% auto, 'colors': (5), 'repeat-y': false),
+    'Blobs/08': ('position': right, 'size': 100% auto, 'colors': (1), 'repeat-y': false),
+    'Blobs/09': ('position': bottom, 'size': 100% auto, 'colors': (3), 'repeat-y': false),
+    'Blobs/10': ('position': top, 'size': 100% auto, 'colors': (1, 5), 'repeat-y': false),
+    'Blobs/11': ('position': center, 'size': 100% auto, 'colors': (1), 'repeat-y': false),
+    'Blobs/12': ('position': bottom, 'size': 100% auto, 'colors': (1), 'repeat-y': false),
+    'Blocks/01': ('position': bottom, 'size': 100% auto, 'colors': (1, 3, 5), 'repeat-y': false),
+    'Blocks/01_001': ('position': top, 'size': 100% auto, 'colors': (1, 3, 5), 'repeat-y': false),
+    'Blocks/02': ('position': top, 'size': 100% auto, 'colors': (1, 3, 5), 'repeat-y': false),
+    'Blocks/02_001': ('position': bottom, 'size': 100% auto, 'colors': (1, 3, 5), 'repeat-y': false),
+    'Blocks/03': ('position': bottom, 'size': 100% auto, 'colors': (1, 4), 'repeat-y': false),
+    'Blocks/04': ('position': bottom, 'size': 100% auto, 'colors': (1, 2, 3, 5), 'repeat-y': false),
+    'Bold/01': ('position': top, 'size': 100% auto, 'colors': (2), 'repeat-y': false),
+    'Bold/02': ('position': bottom, 'size': 100% auto, 'colors': (1, 2, 3), 'repeat-y': false),
+    'Bold/03': ('position': bottom, 'size': 100% auto, 'colors': (1, 3, 5), 'repeat-y': false),
+    'Bold/04': ('position': top, 'size': 100% auto, 'colors': (2, 3), 'repeat-y': false),
+    'Bold/05': ('position': center, 'size': 100% auto, 'colors': (5), 'repeat-y': false),
+    'Bold/05_001': ('position': center, 'size': 100% auto, 'colors': (3), 'repeat-y': false),
+    'Bold/06': ('position': center, 'size': 100% auto, 'colors': (5), 'repeat-y': false),
+    'Bold/06_001': ('position': center, 'size': 100% auto, 'colors': (3), 'repeat-y': false),
+    'Bold/07': ('position': bottom, 'size': 100% auto, 'colors': (1, 2), 'repeat-y': false),
+    'Bold/08': ('position': top, 'size': 100% auto, 'colors': (1), 'repeat-y': false),
+    'Bold/09': ('position': bottom, 'size': 100% auto, 'colors': (2, 3), 'repeat-y': false),
+    'Bold/10': ('position': top, 'size': 100% auto, 'colors': (1, 3, 4, 5), 'repeat-y': false),
+    'Bold/10_001': ('position': top, 'size': 100% auto, 'colors': (1, 4, 5), 'repeat-y': false),
+    'Bold/11': ('position': bottom, 'size': 100% auto, 'colors': (1, 2, 3), 'repeat-y': false),
+    'Bold/11_001': ('position': bottom, 'size': 100% auto, 'colors': (1, 2), 'repeat-y': false),
+    'Bold/12': ('position': center, 'size': 100% auto, 'colors': (1, 2, 5), 'repeat-y': false),
+    'Origins/01': ('position': bottom, 'size': 100% auto, 'colors': (2, 5), 'repeat-y': false),
+    'Origins/02': ('position': bottom, 'size': 100% auto, 'colors': (3), 'repeat-y': false),
+    'Origins/03': ('position': top, 'size': 100% auto, 'colors': (3), 'repeat-y': false),
+    'Origins/04': ('position': bottom, 'size': 100% auto, 'colors': (3), 'repeat-y': false),
+    'Origins/05': ('position': top, 'size': 100% auto, 'colors': (3), 'repeat-y': false),
+    'Origins/06': ('position': center, 'size': 100% auto, 'colors': (3), 'repeat-y': false),
+    'Origins/07': ('position': center, 'size': 100% 100%, 'colors': (3), 'repeat-y': false),
+    'Origins/08': ('position': bottom, 'size': 100% auto, 'colors': (3), 'repeat-y': false),
+    'Origins/09': ('position': top, 'size': 100% auto, 'colors': (1, 5), 'repeat-y': false),
+    'Origins/10': ('position': bottom, 'size': 100% auto, 'colors': (2, 5), 'repeat-y': false),
+    'Origins/11': ('position': top, 'size': 100% auto, 'colors': (3, 5), 'repeat-y': false),
+    'Origins/12': ('position': top, 'size': 100% auto, 'colors': (3, 5), 'repeat-y': false),
+    'Origins/13': ('position': center, 'size': 100% auto, 'colors': (3, 5), 'repeat-y': false),
+    'Origins/14': ('position': bottom, 'size': 100% auto, 'colors': (4), 'repeat-y': false),
+    'Origins/15': ('position': top, 'size': 100% auto, 'colors': (4), 'repeat-y': false),
+    'Rainy/01': ('position': bottom, 'size': 100% auto, 'colors': (1, 5), 'repeat-y': false),
+    'Rainy/02': ('position': top, 'size': 100% auto, 'colors': (1, 4, 5), 'repeat-y': false),
+    'Rainy/03': ('position': top, 'size': 100% auto, 'colors': (2, 4, 5), 'repeat-y': true),
+    'Rainy/04': ('position': top, 'size': 100% auto, 'colors': (1, 5), 'repeat-y': false),
+    'Rainy/05': ('position': top, 'size': 100% auto, 'colors': (1, 5), 'repeat-y': false),
+    'Rainy/05_001': ('position': top, 'size': 100% auto, 'colors': (1), 'repeat-y': false),
+    'Rainy/06': ('position': bottom, 'size': 100% auto, 'colors': (1, 2, 3), 'repeat-y': false),
+    'Rainy/07': ('position': top, 'size': 100% auto, 'colors': (1, 2, 3), 'repeat-y': false),
+    'Rainy/08': ('position': top, 'size': 100% auto, 'colors': (1, 4), 'repeat-y': false),
+    'Rainy/09': ('position': top, 'size': 100% auto, 'colors': (1), 'repeat-y': false),
+    'Wavy/01': ('position': bottom, 'size': 100% auto, 'colors': (4), 'repeat-y': false),
+    'Wavy/02': ('position': top, 'size': 100% auto, 'colors': (4), 'repeat-y': false),
+    'Wavy/03': ('position': top, 'size': 100% auto, 'colors': (1, 2), 'repeat-y': false),
+    'Wavy/04': ('position': bottom, 'size': 100% auto, 'colors': (1, 5), 'repeat-y': false),
+    'Wavy/05': ('position': top, 'size': 100% auto, 'colors': (1, 5), 'repeat-y': false),
+    'Wavy/06': ('position': top, 'size': 100% auto, 'colors': (1, 3, 4, 5), 'repeat-y': false),
+    'Wavy/06_001': ('position': top, 'size': 100% auto, 'colors': (1, 3, 5), 'repeat-y': false),
+    'Wavy/07': ('position': top, 'size': 100% auto, 'colors': (3), 'repeat-y': false),
+    'Wavy/08': ('position': top, 'size': 100% auto, 'colors': (2), 'repeat-y': false),
+    'Wavy/09': ('position': bottom, 'size': 100% auto, 'colors': (1, 5), 'repeat-y': false),
+    'Wavy/10': ('position': center, 'size': 100% auto, 'colors': (1, 2), 'repeat-y': false),
+    'Wavy/11': ('position': bottom, 'size': 100% auto, 'colors': (1, 4), 'repeat-y': false),
+    'Wavy/12': ('position': top, 'size': 100% auto, 'colors': (1), 'repeat-y': false),
+    'Wavy/13': ('position': bottom, 'size': 100% auto, 'colors': (4), 'repeat-y': false),
+    'Wavy/14': ('position': bottom, 'size': 100% auto, 'colors': (1, 3), 'repeat-y': false),
+    'Wavy/15': ('position': top, 'size': 100% auto, 'colors': (1), 'repeat-y': false),
+    'Wavy/16': ('position': bottom, 'size': 100% auto, 'colors': (1), 'repeat-y': false),
+    'Wavy/17': ('position': top, 'size': 100% auto, 'colors': (1), 'repeat-y': false),
+    'Wavy/18': ('position': bottom, 'size': 100% auto, 'colors': (5), 'repeat-y': false),
+    'Wavy/19': ('position': top, 'size': 100% auto, 'colors': (5), 'repeat-y': false),
+    'Wavy/20': ('position': bottom, 'size': 100% auto, 'colors': (2), 'repeat-y': false),
+    'Wavy/21': ('position': top, 'size': 100% auto, 'colors': (2), 'repeat-y': false),
+    'Wavy/22': ('position': bottom, 'size': 100% auto, 'colors': (3), 'repeat-y': false),
+    'Wavy/23': ('position': top, 'size': 100% auto, 'colors': (3), 'repeat-y': false),
+    'Zigs/01': ('position': bottom, 'size': 100% auto, 'colors': (2), 'repeat-y': false),
+    'Zigs/02': ('position': bottom, 'size': 100% auto, 'colors': (2), 'repeat-y': false),
+    'Zigs/03': ('position': top, 'size': 100% auto, 'colors': (1), 'repeat-y': true),
+    'Zigs/04': ('position': bottom, 'size': 100% auto, 'colors': (1), 'repeat-y': false),
+    'Zigs/05': ('position': bottom, 'size': 100% auto, 'colors': (3), 'repeat-y': false),
+));
diff --git a/addons/web_editor/static/src/scss/wysiwyg.scss b/addons/web_editor/static/src/scss/wysiwyg.scss
new file mode 100644
index 00000000..429da03a
--- /dev/null
+++ b/addons/web_editor/static/src/scss/wysiwyg.scss
@@ -0,0 +1,522 @@
+$o-we-overlay-zindex: ($zindex-fixed + $zindex-modal-backdrop) / 2 !default;
+$o-we-zindex: $o-we-overlay-zindex + 1 !default;
+
+// Use css variables to control the default style of the editor so that an
+// external assets bundle can influence it without duplicating the css.
+:root {
+    @include print-variable('o-we-toolbar-height', $o-we-toolbar-height);
+}
+
+.o_we_command_protector {
+    font-weight: 400 !important;
+
+    b, strong {
+        font-weight: 700 !important;
+    }
+    * {
+        font-weight: inherit !important;
+    }
+    .btn {
+        text-align: unset !important;
+    }
+}
+
+// EDITOR TOP BAR AND POPOVER
+.note-popover .popover {
+    max-width: 350px;
+    left: 50% !important;
+    transform: translate(-50%, 0);
+
+    .popover-body {
+        white-space: normal;
+    }
+}
+
+#web_editor-top-edit {
+    @include o-position-absolute(0, 0, auto, 0);
+    position: fixed;
+    z-index: $o-we-zindex + 1;
+    height: var(--o-we-toolbar-height);
+    background-color: $o-we-bg;
+
+    .note-popover .popover {
+        top: 0 !important;
+        left: 0 !important;
+        right: 0 !important;
+        border: none !important;
+        max-width: none;
+        transform: none;
+    }
+    .note-popover .popover .popover-body {
+        height: var(--o-we-toolbar-height);
+    }
+}
+
+.wysiwyg_iframe,
+.note-editor {
+    border: $o-we-border-width solid $o-we-border-color;
+    margin: 0;
+    padding: 0;
+}
+// avoid popover bar over its opened modal
+.note-popover .popover {
+    z-index: $o-we-overlay-zindex;
+}
+.note-popover .popover .popover-body,
+.panel-heading.note-toolbar {
+    padding-bottom: 0;
+    border-bottom: $o-we-border-width solid $o-we-border-color;
+    background-color: $o-we-bg;
+    color: $o-we-color;
+    font-family: $o-we-font-family;
+
+    // Main layout of buttons
+    .btn-group, .btn {
+        width: auto !important;
+        height: 100% !important;
+        margin-top: 0;
+        margin-bottom: 0;
+        background: transparent;
+        border: none;
+        border-radius: 0;
+    }
+    .btn-secondary {
+        color: inherit;
+    }
+
+    // Active buttons and opened dropdowns
+    .btn {
+        padding: 0.5em 0.75em !important;
+        border-left: $o-we-item-border-width solid $o-we-item-border-color;
+        border-right: $o-we-item-border-width solid $o-we-item-border-color;
+        background: $o-we-sidebar-content-field-clickable-bg;
+        color: inherit;
+        font-size: $o-we-font-size !important;
+
+        &.active,
+        &:focus, &:active, &:focus:active {
+            @extend %we-active-button;
+        }
+
+        // This element should have been removed but still exists in 13.0 by
+        // mistake. This takes advantage of it to restore the color preview
+        // feature which disappeared and cannot be fixed as in 12.0.
+        // TODO fix the right way in 14.0.
+        > .caret {
+            display: block;
+            @include o-position-absolute(auto, 0, 0, 0);
+            border-bottom: 2px solid transparent;
+        }
+    }
+    .btn-group.show {
+        > .btn {
+            @extend %we-active-button;
+        }
+        &::after {
+            content: '';
+            @include o-position-absolute(100%, $o-we-border-width, auto, $o-we-border-width);
+            height: $o-we-border-width;
+        }
+    }
+    %we-active-button {
+        background: $o-we-sidebar-content-field-pressed-bg;
+        color: $o-we-sidebar-content-field-pressed-color;
+        box-shadow: none !important;
+        outline: none !important;
+    }
+    .dropdown-menu {
+        transform: none !important;
+        margin-top: $o-we-dropdown-spacing;
+        padding: 0;
+        margin-top: $o-we-toolbar-height;
+        border: $o-we-dropdown-border-width solid $o-we-dropdown-border-color;
+        background-color: $o-we-dropdown-bg;
+        box-shadow: $o-we-dropdown-shadow;
+    }
+    .dropdown-menu.show { // To overcome .note-XXX .dropdown-menu rules
+        min-width: 0;
+    }
+    .dropdown-item { // To overcome summernote rules breaking this in iframes
+        display: block;
+        max-width: none;
+        overflow: visible;
+        margin-top: 0;
+        padding: 0 1em;
+        border: none;
+        background: none;
+        background-clip: padding-box;
+        background-color: $o-we-dropdown-item-bg;
+        color: $o-we-dropdown-item-color;
+        line-height: $o-we-dropdown-item-height;
+
+        &:not(.d-none) ~ .dropdown-item {
+            // Use a border-top instead of a margin-top as when the
+            // mouse goes from one select button to another, the
+            // option preview should switch from the first button's
+            // option to the second one without reset to selected
+            // state in between.
+            border-top: $o-we-dropdown-item-spacing solid transparent;
+        }
+
+        &.active {
+            color: $o-we-dropdown-item-active-color;
+        }
+    }
+    li > .dropdown-item {
+        border-top: $o-we-dropdown-item-spacing solid transparent;
+    }
+
+    .note-style {
+        .dropdown-item {
+            > * {
+                display: inline;;
+            }
+            &, > * {
+                line-height: 2;
+            }
+            &[data-value="blockquote"] {
+                padding-top: 0.5em;
+                padding-bottom: 0.5em;
+
+                > * {
+                    display: block;
+                }
+            }
+        }
+    }
+
+    // Specific elements
+    .o_image_alt {
+        @include o-text-overflow();
+        max-width: 150px;
+    }
+    .note-color-palette div .note-color-btn {
+        border-color: $o-we-dropdown-bg;
+    }
+    .note-custom-color-palette .note-color-row {
+        height: auto!important;
+        .note-color-btn {
+            float: left;
+            height: 20px;
+            width: 20px;
+            padding: 0;
+            margin: 0;
+            border: 1px solid $o-we-dropdown-bg;
+        }
+    }
+}
+.note-color ul.show {
+    min-width: 216px !important;
+}
+
+// ANIMATIONS
+@keyframes fadeInDownSmall {
+    0% {
+        opacity: 0;
+        transform: translate(0, -5px);
+    }
+    100% {
+        opacity: 1;
+        transform: translate(0, 0);
+    }
+}
+
+@keyframes inputHighlighter {
+    from {
+        background: $o-brand-primary;
+    }
+    to {
+        width: 0;
+        background: transparent;
+    }
+}
+
+.o_we_horizontal_collapse {
+    width: 0 !important;
+    padding: 0 !important;
+    border: none !important;
+}
+
+.o_we_transition_ease {
+    transition: all ease 0.35s;
+}
+
+// MODALS
+body .modal {
+
+    // SELECT MEDIA
+    .o_select_media_dialog {
+        max-width: 80%;
+
+        .modal-body {
+            .tab-pane {
+                min-height: 300px;
+            }
+
+            .o_we_images > .o_existing_attachment_cell .o_we_media_dialog_img_wrapper {
+                @extend %o-preview-alpha-background;
+
+                &, > img {
+                    width: 100%;
+                }
+            }
+
+            .o_existing_attachment_cell {
+                cursor: pointer;
+                margin: 1px;
+
+                .o_existing_attachment_optimize, .o_existing_attachment_remove {
+                    background-color: rgba(white, 0.4);
+                    opacity: 0;
+                    cursor: pointer;
+                    transition: color 0.2s ease;
+                }
+
+                .o_existing_attachment_optimize {
+                    @include o-position-absolute($top: 0, $left: 0);
+                    border-radius: 0 0 2px 0;
+                }
+
+                .o_existing_attachment_remove {
+                    @include o-position-absolute($top: 0, $right: 0);
+                    z-index: 1;
+                    border-radius: 0 0 0 2px;
+                    &:hover {
+                        color: $o-we-color-danger;
+                    }
+                }
+
+                .o_file_name {
+                    @include o-text-overflow;
+                }
+
+                &:hover {
+                    .o_existing_attachment_optimize, .o_existing_attachment_remove {
+                        opacity: 1;
+                    }
+                    &.o_we_attachment_highlight, .o_we_attachment_highlight {
+                        border-color: $card-border-color;
+                        box-shadow: 0px 0px 2px 2px $card-border-color;
+                    }
+                }
+            }
+
+            .o_we_attachment_selected {
+                border-color: $o-brand-primary;
+                box-shadow: 0px 0px 2px 2px $o-brand-primary;
+            }
+
+            .o_we_attachment_optimized .badge {
+                position: absolute;
+                bottom: 0;
+                right: 0;
+                margin: 2px;
+            }
+
+            .font-icons-icons {
+                > span {
+                    text-align: center;
+                    font-size: 22px;
+                    margin: 5px;
+                    width: 50px;
+                    height: 50px;
+                    padding: 15px;
+                    cursor: pointer;
+                }
+            }
+
+            #editor-media-image,
+            #editor-media-document {
+                .o_we_url_input {
+                    width: 300px;
+                }
+            }
+
+            // VIDEO TAB
+            #editor-media-video {
+                .o_video_dialog_form {
+                    #o_video_form_group {
+                        position: relative;
+                        width: 100%;
+
+                        > textarea {
+                            width: 100%;
+                            min-height: 95px;
+                            padding-bottom: 25px;
+                            overflow-y: scroll;
+                        }
+                    }
+                }
+
+                #video-preview {
+                    position: relative;
+                    @include o-we-preview-box();
+                    border: none;
+
+                    .media_iframe_video {
+                        width: 100%;
+                    }
+
+                    .o_video_dialog_iframe {
+                        @include o-we-preview-content;
+                        max-width: 100%;
+                        max-height: 100%;
+
+                        &.alert {
+                            animation: fadeInDownSmall 700ms forwards;
+                            margin: 0 auto;
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    // LINK EDITOR DIALOG COLOR SELECTOR
+    .o_link_dialog {
+        input.link-style:checked + span::after {
+            content: "\f00c";
+            display: inline-block;
+            font-family: FontAwesome;
+            margin-left: 2px;
+        }
+
+        .o_link_dialog_preview {
+            border-left: 1px solid gray('200');
+        }
+    }
+
+    .o_we_image_optimize_dialog {
+        .o_we_title_label {
+            font-size: $o-we-font-size;
+        }
+        .o_we_preview_area {
+            max-height: 400px;
+            overflow: auto;
+        }
+    }
+}
+
+// Highlight selected image/icon
+%o-we-selected-image {
+    outline: 3px solid rgba(150, 150, 220, 0.3);
+}
+
+img.o_we_selected_image {
+    @extend %o-we-selected-image;
+}
+
+.fa.o_we_selected_image::before {
+    @extend %o-we-selected-image;
+}
+// Override default image selection color from portal. It prevents your from
+// seeing the images' quality clearly in the wysiwyg.
+img::selection {
+    background: transparent;
+}
+.o_we_media_author {
+    font-size: 11px;
+    @include o-position-absolute($bottom: 0, $left: 0, $right: 0);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    text-align: center;
+    background-color: rgba(255, 255, 255, .7);
+}
+
+@include media-breakpoint-down(md) {
+    #web_editor-top-edit {
+        position: initial !important;
+        height: initial !important;
+        top: initial !important;
+        left: initial !important;
+
+        #web_editor-toolbars .popover-body {
+            display: flex;
+            width: 100%;
+            overflow-x: auto;
+
+            .btn-group {
+                position: static;
+            }
+        }
+    }
+}
+
+// User modal in edit mode
+.editor_enable, .note-editable {
+    .modal:not(.o_technical_modal) {
+        top: 40px;
+        right: 0;
+        bottom: 0;
+        right: $o-we-sidebar-width;
+        width: auto;
+        height: auto;
+
+        .modal-dialog {
+            padding: 0.5rem 0; // To use more editor space if necessary
+        }
+    }
+}
+
+.o_we_no_pointer_events {
+    pointer-events: none;
+}
+
+.o_we_crop_widget {
+    background-color: rgba(128, 128, 128, 0.5);
+    @include o-position-absolute(0, 0, 0, 0);
+    z-index: 1024;
+
+    .o_we_cropper_wrapper {
+        position: absolute;
+    }
+
+    .o_we_crop_buttons {
+        margin-top: 0.5rem;
+        display: flex;
+        flex-wrap: wrap;
+
+        input[type=radio] {
+            display: none;
+        }
+
+        .btn-group {
+            border-radius: 0.25rem;
+            margin: 0.1rem;
+        }
+
+        button, label {
+            cursor: pointer !important;
+            padding: 0.2rem 0.3rem;
+        }
+
+        label {
+            display: flex;
+            align-items: center;
+
+            &.active {
+                background-color: $o-we-bg-darkest;
+            }
+        }
+
+        button:not(.btn), label {
+            margin: 0;
+            border: none;
+            border-right: 1px solid $o-we-bg;
+            background-color: $o-we-bg;
+            color: $o-we-color;
+
+            &:first-child {
+                border-top-left-radius: 0.25rem;
+                border-bottom-left-radius: 0.25rem;
+            }
+
+            &:last-child {
+                border-top-right-radius: 0.25rem;
+                border-bottom-right-radius: 0.25rem;
+                border-right: none;
+            }
+        }
+    }
+}
diff --git a/addons/web_editor/static/src/scss/wysiwyg_iframe.scss b/addons/web_editor/static/src/scss/wysiwyg_iframe.scss
new file mode 100644
index 00000000..4e00d0bb
--- /dev/null
+++ b/addons/web_editor/static/src/scss/wysiwyg_iframe.scss
@@ -0,0 +1,27 @@
+iframe.wysiwyg_iframe.o_fullscreen {
+    position: fixed !important;
+    left: 0 !important;
+    right: 0 !important;
+    top: 0 !important;
+    bottom: 0 !important;
+    width: 100% !important;
+    min-height: 100% !important;
+    z-index: 1001 !important;
+    border: 0;
+}
+
+.o_wysiwyg_no_transform {
+    transform: none !important;
+}
+
+body.o_in_iframe {
+    background-color: $o-view-background-color;
+
+    &.editor_enable {
+        padding-top: var(--o-we-toolbar-height) !important;
+    }
+
+    .note-statusbar {
+        display: none;
+    }
+}
diff --git a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
new file mode 100644
index 00000000..20b32893
--- /dev/null
+++ b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
@@ -0,0 +1,1951 @@
+///
+/// This file contains all variables and mixins that are specific to the editor.
+///
+
+// OVERRIDES FOR EDITOR WITH SNIPPETS
+body.editor_enable.editor_has_snippets {
+    padding-right: $o-we-sidebar-width !important;
+
+    #web_editor-top-edit .note-popover .popover {
+        right: $o-we-sidebar-width !important;
+    }
+
+    .modal:not(.o_technical_modal) {
+        top: 0 !important;
+        // set z-index so customize options visible on dialog.
+        z-index: $o-we-overlay-zindex - 1;
+        // just for fake backdrop effect
+        background-color: rgba(66, 66, 66, 0.4);
+    }
+    > .oe_overlay.ui-draggable {
+        .o_handles {
+            display: none;
+        }
+    }
+}
+
+// Mobile fix for mass mailing
+@include media-breakpoint-down(md) {
+    body.editor_enable.editor_has_snippets {
+        #web_editor-top-edit {
+            position: initial !important;
+            height: initial !important;
+            top: initial !important;
+            left: initial !important;
+
+            .note-popover .popover {
+                right: 0 !important;
+            }
+        }
+    }
+}
+
+// Ugly hack to force ugly rules... while waiting for new editor
+#oe_snippets#oe_snippets .o_we_snippet_text_tools {
+    $-text-tools-gap: 3px;
+    $-text-tools-header-height: 35px;
+
+    z-index: $o-we-zindex;
+    flex: 1 0 auto;
+    display: flex;
+    padding: $-text-tools-header-height $o-we-sidebar-content-padding-base ($o-we-sidebar-content-padding-base * 3) $o-we-sidebar-content-indent;
+    box-shadow: $o-we-item-standup-top rgba($o-we-item-standup-color-light, .2);
+    overflow-y: auto;
+
+    .popover {
+        position: static !important;
+        top: 0 !important;
+        left: 0 !important;
+        transform: none !important;
+        border: none !important;
+    }
+    .popover-body {
+        padding: 0 !important;
+        border: none !important;
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: space-between;
+        gap: $-text-tools-gap;
+
+        > * {
+            margin: 0 0 $o-we-sidebar-content-field-spacing*.5 0;
+        }
+    }
+    .btn {
+        @extend %we-generic-button;
+        border-radius: 0;
+        padding: 0 $o-we-sidebar-content-field-button-group-button-spacing!important;
+        line-height: $o-we-sidebar-content-field-height + ($o-we-sidebar-content-field-border-width*2)!important;
+    }
+    // Achieve a "button-group effect" for siblings buttons.
+    .popover-body > .btn-group {
+        > .btn  {
+            border-radius: 0;
+        }
+        > .btn:first-of-type, > div:first-of-type .btn {
+            @include border-left-radius($o-we-sidebar-content-field-border-radius);
+        }
+        > .btn:last-of-type, > div:last-of-type .btn {
+            @include border-right-radius($o-we-sidebar-content-field-border-radius);
+        }
+    }
+    .btn-group {
+
+        &.note-color {
+            order: -3;
+
+            .note-back-color-preview {
+                margin-left: $-text-tools-gap;
+            }
+            .btn::after {
+                display: none;
+            }
+        }
+        &.note-style {
+            order: -2;
+
+            &, > div {
+                flex-grow: 1;
+            }
+        }
+        &.note-fontsize {
+            order: -1;
+        }
+        &.note-font [data-name="clear"] {
+            @include o-position-absolute(($-text-tools-header-height*-1) + 5px, 0);
+            background: 0;
+            border: 0;
+            @extend %we-generic-link;
+        }
+        &.note-para {
+            flex-grow: 1;
+            gap: $-text-tools-gap;
+            justify-content: space-between;
+
+            > * {
+                flex: 1 1 33%;
+            }
+        }
+        > .d-none + * {
+            margin-left: 0 !important;
+        }
+    }
+    .note-color {
+        .btn-group {
+            position: static;
+        }
+        .dropdown-menu { // Drop up
+            margin-top: $o-we-dropdown-spacing;
+        }
+    }
+    .note-popover ~ .note-popover,
+    .note-handle ~ .note-handle,
+    .note-dialog ~ .note-dialog {
+        // Prevent flickering of summernote when switching text tools...
+        display: none;
+    }
+}
+
+.oe_snippet {
+    // No root because can be drag and drop (and the helper is in the body)
+    position: relative;
+    z-index: $o-we-zindex;
+    width: 77px;
+    background-color: $o-we-sidebar-blocks-content-snippet-bg;
+
+    &.ui-draggable-dragging {
+        transform: rotate(-3deg) scale(1.2);
+        box-shadow: 0 5px 25px -10px black;
+        transition: transform 0.3s, box-shadow 0.3s;
+    }
+
+    > .oe_snippet_body {
+        display: none !important;
+    }
+
+    .oe_snippet_thumbnail {
+        width: 100%;
+
+        .oe_snippet_thumbnail_img {
+            width: 100%;
+            padding-top: 75%;
+            background-repeat: no-repeat;
+            background-size: contain;
+            background-position: top center;
+            overflow: hidden;
+        }
+    }
+
+    .oe_snippet_thumbnail_title {
+        display: none;
+    }
+
+    &:not(:hover):not(.o_disabled):not(.o_snippet_install) {
+        background-color: rgba($o-we-sidebar-blocks-content-snippet-bg, .9);
+
+        .oe_snippet_thumbnail {
+            filter: saturate(.7);
+            opacity: .9;
+        }
+    }
+}
+
+@mixin we-svg-icon(
+        $graphic: $o-we-sidebar-content-field-color,
+        $subdle: $o-we-sidebar-content-field-color,
+        $subdle-opacity: 0.5) {
+    svg {
+        .o_graphic {
+            fill: $graphic;
+        }
+        .o_subdle {
+            fill: rgba($subdle, $subdle-opacity);
+        }
+    }
+}
+
+%we-generic-clickable {
+    outline: none;
+    text-decoration: none;
+    line-height: $o-we-sidebar-content-field-height - 2 * $o-we-sidebar-content-field-border-width;
+    cursor: pointer;
+
+    &[disabled] {
+        opacity: .5;
+    }
+
+    &:not([disabled]) {
+        &.active:not(.o_we_no_toggle):not(.o_we_checkbox_wrapper), &:hover {
+            color: $o-we-sidebar-content-field-pressed-color;
+        }
+
+        $-hover-colors: (
+            'success': $o-we-color-success,
+            'info': $o-we-color-info,
+            'warning': $o-we-color-warning,
+            'danger': $o-we-color-danger,
+        );
+
+        @each $name, $color in $-hover-colors {
+            &.o_we_text_#{$name} {
+                color: $color;
+            }
+
+            &.o_we_hover_#{$name}:hover {
+                color: $color;
+            }
+        }
+    }
+}
+
+%we-generic-link {
+    color: $o-we-sidebar-content-field-color;
+    @include we-svg-icon();
+    @extend %we-generic-clickable;
+
+    &:not([disabled]) {
+        &.active, &:hover {
+            @include we-svg-icon($o-we-sidebar-content-field-pressed-color, $subdle-opacity: .75);
+        }
+    }
+}
+
+%we-generic-button {
+    @extend %we-generic-clickable;
+    @include o-text-overflow(block);
+    @include we-svg-icon($o-we-sidebar-content-field-clickable-color, $o-we-sidebar-content-field-clickable-color);
+
+    padding: 0 $o-we-sidebar-content-field-button-group-button-spacing;
+    border: $o-we-sidebar-content-field-border-width solid $o-we-sidebar-content-field-border-color;
+    border-radius: $o-we-sidebar-content-field-border-radius;
+    background-color: $o-we-sidebar-content-field-clickable-bg;
+    color: $o-we-sidebar-content-field-clickable-color;
+
+    &:not([disabled]):hover, &.active:not(.o_we_no_toggle) {
+        @include we-svg-icon($o-we-sidebar-content-field-pressed-color, $subdle-opacity: .75);
+    }
+
+    &.active:not(.o_we_no_toggle) {
+        background-color: $o-we-sidebar-content-field-pressed-bg;
+    }
+}
+
+%we-generic-tab-button {
+    @extend %we-generic-link;
+    @include o-text-overflow(inline-flex);
+    flex: 1 1 auto;
+    justify-content: center;
+    border: none;
+    background-color: transparent;
+    color: inherit;
+    font-weight: normal;
+
+    > span {
+        display: inline-block;
+        $-r: $o-we-sidebar-tabs-size-ratio;
+        padding: (0.6em * $-r) (0.4em * $-r) (0.5em * $-r);
+    }
+    &.active > span {
+        color: $o-we-sidebar-content-field-colorpicker-dropdown-active-color;
+        box-shadow: inset 0 ($o-we-sidebar-tabs-active-border-width * -1) 0 $o-we-sidebar-tabs-active-border-color;
+    }
+}
+
+// SNIPPET PANEL
+#oe_snippets {
+    @include o-w-preserve-btn;
+
+    @include o-position-absolute(var(--o-we-toolbar-height), 0, 0, auto);
+    position: fixed;
+    z-index: $o-we-zindex;
+    display: flex;
+    flex-flow: column nowrap;
+    width: $o-we-sidebar-width;
+
+    border-left: $o-we-sidebar-border-width solid $o-we-sidebar-border-color;
+    background-color: $o-we-sidebar-bg;
+    color: $o-we-sidebar-color;
+    font-family: $o-we-font-family;
+    font-size: $o-we-sidebar-font-size;
+    font-weight: 400;
+
+    transition: transform 400ms ease 0s;
+    transform: translateX(100%);
+
+    &.o_loaded {
+        transform: none;
+    }
+
+    *::selection {
+        background: lighten($o-we-accent, 9);
+        color: $o-we-bg-darkest;
+    }
+
+    #snippets_menu {
+        flex: 0 0 auto;
+        display: flex;
+        background-color: $o-we-sidebar-tabs-bg;
+        box-shadow: $o-we-item-standup-top rgba($o-we-item-standup-color-light, .2);
+        color: $o-we-sidebar-tabs-color;
+
+        > button {
+            @extend %we-generic-tab-button;
+        }
+    }
+
+    // Snippet filter input
+    .o_snippet_search_filter {
+        position: relative;
+        box-shadow: $o-we-item-standup-bottom $o-we-item-standup-color-dark, 0 10px 10px rgba($o-we-item-standup-color-dark, .2);
+        z-index: 2;
+
+        &, .o_snippet_search_filter_input {
+            width: 100%;
+        }
+
+        .o_snippet_search_filter_input {
+            background-color: $o-we-sidebar-content-field-input-bg;
+            padding: $o-we-sidebar-blocks-content-spacing 2em $o-we-sidebar-blocks-content-spacing $o-we-sidebar-blocks-content-spacing;
+            border: 0;
+            border-bottom: $o-we-sidebar-content-field-border-width solid $o-we-sidebar-content-field-border-color;
+            color: $o-we-fg-lighter;
+
+            &::placeholder {
+                font-style: italic;
+                color: $o-we-sidebar-content-field-control-item-color;
+            }
+
+            &:focus {
+                background-color: $o-we-bg-lighter;
+                outline: none;
+            }
+        }
+
+        .o_snippet_search_filter_reset {
+            @include o-position-absolute($o-we-sidebar-blocks-content-spacing, $o-we-sidebar-blocks-content-spacing, $o-we-sidebar-blocks-content-spacing);
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            padding: 0 $o-we-sidebar-content-field-clickable-spacing;
+            @include o-hover-text-color($o-we-sidebar-content-field-control-item-color, $o-we-fg-lighter);
+            cursor: pointer;
+        }
+    }
+
+    > #o_scroll, > .o_we_customize_panel {
+        min-height: 0;
+        overflow: auto;
+    }
+
+    > #o_scroll {
+        background-color: $o-we-sidebar-blocks-content-bg;
+        padding: 0 $o-we-sidebar-blocks-content-spacing;
+        z-index: 1;
+
+        .o_panel, .o_panel_header {
+            padding: $o-we-sidebar-blocks-content-spacing 0;
+        }
+
+        .o_panel_body {
+            display: flex; // Needed for too long snippet names
+            flex-wrap: wrap;
+            margin-left: -$o-we-sidebar-blocks-content-snippet-spacing;
+
+            > .oe_snippet {
+                flex: 0 0 auto;
+                width: percentage(1 / 3);
+                background-clip: padding-box;
+                border-left: $o-we-sidebar-blocks-content-snippet-spacing solid transparent;
+                margin-bottom: $o-we-sidebar-blocks-content-snippet-spacing;
+                user-select: none;
+
+                cursor: pointer;
+                cursor: copy;
+                cursor: grab;
+
+                .oe_snippet_thumbnail_title {
+                    display: block;
+                    padding: $o-we-sidebar-blocks-content-spacing / 2;
+                    text-align: center;
+                }
+
+                &.o_disabled .o_snippet_undroppable {
+                    @include o-position-absolute(8px, 6px, auto, auto);
+                }
+
+                &.o_snippet_install {
+                    .btn.o_install_btn {
+                        @include o-position-absolute($top: 10px);
+                    }
+
+                    &:not(:hover) .btn.o_install_btn {
+                        display: none;
+                    }
+                }
+
+                &.o_disabled, &.o_snippet_install {
+                    background-color: rgba($o-we-sidebar-blocks-content-snippet-bg, .2);
+
+                    .oe_snippet_thumbnail_img {
+                        opacity: .4;
+                        filter: saturate(0) blur(1px);
+                    }
+                }
+            }
+        }
+        #snippet_custom .oe_snippet {
+            width: 100%;
+
+            &, .oe_snippet_thumbnail, .o_delete_btn {
+                display: flex;
+            }
+            .oe_snippet_thumbnail, .o_delete_btn {
+                align-items: center;
+            }
+            .oe_snippet_thumbnail {
+                min-width: 0; // Ensure text-overflow on flex children
+            }
+            .oe_snippet_thumbnail_title {
+                @include o-text-overflow(block);
+            }
+            .oe_snippet_thumbnail_img {
+                flex-shrink: 0;
+                width: 40px;
+                height: 32px;
+                padding: 0;
+            }
+            .o_delete_btn {
+                @extend %we-generic-link;
+                padding-top: 0;
+                padding-bottom: 0;
+            }
+        }
+    }
+
+    > .o_we_customize_panel {
+        position: relative;
+
+        @mixin we-icon-button($icon, $color: $o-we-sidebar-content-field-control-item-color, $align: right) {
+            @extend %we-icon-button;
+            padding-#{$align}: 2 * $o-we-sidebar-content-field-control-item-spacing + $o-we-sidebar-content-field-control-item-size;
+
+            &::after {
+                content: $icon;
+                color: $color;
+
+                @if $align == left {
+                    right: auto;
+                    left: $o-we-sidebar-content-field-control-item-spacing;
+                }
+            }
+        }
+
+        @mixin large-component() {
+            flex: 1 1 auto;
+            width: $o-we-sidebar-content-available-room * .6;
+        }
+
+        we-button, we-toggler {
+            @extend %we-generic-button;
+        }
+
+        we-button.o_we_link {
+            @extend %we-generic-link;
+            margin-top: 0;
+            border: 0;
+            padding: 0;
+            background: 0;
+        }
+
+        we-toggler {
+            @include we-icon-button('\f0d7');
+            text-align: left;
+
+            > img, > svg {
+                max-width: 100%;
+            }
+
+            + * {
+                display: none !important;
+                border: $o-we-sidebar-content-field-dropdown-border-width solid $o-we-sidebar-content-field-dropdown-border-color;
+                background-color: $o-we-sidebar-content-field-dropdown-bg;
+                box-shadow: $o-we-sidebar-content-field-dropdown-shadow;
+            }
+            &.active {
+                @include we-icon-button('\f0d8');
+                + * {
+                    display: block !important;
+                }
+            }
+        }
+        %we-icon-button {
+            position: relative;
+
+            &::after {
+                @include o-position-absolute(50%, $o-we-sidebar-content-field-control-item-spacing);
+                transform: translateY(-50%);
+                width: $o-we-sidebar-content-field-control-item-size;
+                text-align: center;
+                font-family: FontAwesome;
+            }
+        }
+
+        we-title {
+            display: block;
+            text-transform: capitalize;
+        }
+
+        we-customizeblock-options {
+            position: relative;
+            display: block;
+            padding: 0 0 ($o-we-sidebar-content-block-spacing * 1.5) 0;
+            background-color: $o-we-bg-lighter;
+            box-shadow: $o-we-item-standup-bottom rgba($o-we-item-standup-color-dark, 0.8);
+
+            > we-title {
+                display: flex;
+                align-items: center;
+                padding: $o-we-sidebar-content-block-spacing * .3 $o-we-sidebar-content-padding-base 0 $o-we-sidebar-content-indent;
+                background-color: $o-we-bg-light;
+                box-shadow: $o-we-item-standup-top rgba($o-we-item-standup-color-light, .2), $o-we-item-standup-bottom rgba($o-we-item-standup-color-dark, .5);
+                font-size: $o-we-sidebar-content-main-title-font-size;
+
+                > span {
+                    @include o-text-overflow();
+                    flex: 1 1 auto; // Make it full-width so that it is easier to click on
+                    cursor: pointer;
+
+                    color: $o-we-sidebar-content-main-title-color !important;
+                    line-height: $o-we-sidebar-content-main-title-height;
+                }
+
+                > we-top-button-group {
+                    flex: 0 0 auto;
+                    display: flex;
+                    margin-left: auto;
+                    font-size: .9em;
+
+                    .oe_snippet_remove {
+                        font-size: 1.2em;
+                    }
+                    we-customizeblock-option {
+                        display: flex;
+                        padding: 0;
+                    }
+                    we-button {
+                        margin-top: 0 !important;
+                        margin-left: $o-we-sidebar-content-field-multi-spacing;
+                        padding: 0 $o-we-sidebar-content-field-multi-spacing;
+
+                        &.fa {
+                            margin-left: $o-we-sidebar-content-field-label-spacing;
+                        }
+                    }
+                }
+            }
+        }
+
+        we-customizeblock-option {
+            position: relative;
+            display: block;
+            padding: 0 $o-we-sidebar-content-padding-base 0 $o-we-sidebar-content-indent;
+
+            .dropdown-menu {
+                // FIXME temporary fix for m2o option for example
+                position: static !important;
+            }
+
+            > we-alert {
+                background-color: $o-we-color-info;
+                display: block;
+                padding: $o-we-sidebar-content-field-label-spacing;
+
+                we-title {
+                    margin-bottom: $o-we-sidebar-content-field-label-spacing;
+                    text-transform: uppercase;
+                    font-weight: bold;
+                }
+            }
+
+            > we-title {
+                margin-bottom: $o-we-sidebar-content-field-spacing * -0.5;
+                font-size: $o-we-sidebar-font-size + 1;
+                color: $o-we-fg-lighter;
+                font-weight: 500;
+
+                &:not(:first-child) {
+                    margin-top: $o-we-sidebar-content-field-spacing * 2;
+                }
+            }
+        }
+
+        .o_we_fold_icon {
+            @include o-position-absolute(0, 100%, 0, -$o-we-sidebar-content-indent);
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            width: $o-we-sidebar-content-indent;
+
+            @extend %we-generic-link;
+        }
+
+        //----------------------------------------------------------------------
+        // User Value Widgets
+        //----------------------------------------------------------------------
+
+        .o_we_user_value_widget {
+            @extend %o-we-inline;
+            margin-top: $o-we-sidebar-content-field-spacing;
+
+            > div {
+                display: flex;
+                align-items: center;
+                min-height: $o-we-sidebar-content-field-height;
+            }
+        }
+
+        // Buttons
+        we-button.o_we_user_value_widget {
+            > div {
+                // Needed otherwise cannot work because of flex display
+                @include o-text-overflow(block);
+                min-height: $o-we-sidebar-content-field-height - 2 * $o-we-sidebar-content-field-border-width;
+                line-height: $o-we-sidebar-content-field-height - 2 * $o-we-sidebar-content-field-border-width;
+
+                > img {
+                    margin-bottom: 1px; // Not sure why but not really centered otherwise
+                }
+                > svg {
+                    margin-bottom: 2px; // Not sure why but not really centered otherwise
+                }
+            }
+            &.fa > div {
+                display: none;
+            }
+        }
+
+        // Checkboxes
+        we-button.o_we_checkbox_wrapper.o_we_user_value_widget {
+            min-width: $o-we-sidebar-content-field-toggle-width;
+            padding: 0;
+            border: none;
+            background: none;
+            cursor: default;
+
+            > we-title {
+                cursor: pointer;
+            }
+            > div {
+                display: flex;
+                min-height: $o-we-sidebar-content-field-height;
+                line-height: $o-we-sidebar-content-field-height;
+            }
+            we-checkbox {
+                flex: 0 0 auto;
+                display: flex;
+                align-items: center;
+                width: $o-we-sidebar-content-field-toggle-width;
+                height: $o-we-sidebar-content-field-toggle-height;
+                background-color: $o-we-sidebar-content-field-toggle-bg;
+                border-radius: 10rem;
+                cursor: pointer;
+
+                &::after {
+                    content: "";
+                    display: block;
+                    width: $o-we-sidebar-content-field-toggle-control-width;
+                    height: $o-we-sidebar-content-field-toggle-control-height;
+                    border-radius: 10rem;
+                    background-color: $o-we-sidebar-content-field-toggle-control-bg;
+                    box-shadow: $o-we-sidebar-content-field-toggle-control-shadow;
+                }
+            }
+            &.active we-checkbox {
+                background-color: $o-we-sidebar-content-field-toggle-active-bg;
+                justify-content: flex-end;
+            }
+            &.active, &:hover {
+                color: $o-we-sidebar-content-field-clickable-color;
+            }
+        }
+
+        // Selection (select and button groups)
+        we-selection-items {
+            .o_we_user_value_widget {
+                margin-top: 0;
+            }
+        }
+
+        // Selects
+        we-select.o_we_user_value_widget {
+            position: relative;
+
+            &:not(.o_we_icon_select) we-toggler {
+                @include large-component();
+            }
+            &.o_we_widget_opened .o_we_dropdown_caret {
+                position: relative;
+                display: block;
+                align-self: flex-end;
+
+                &::before, &::after {
+                    content: '';
+                    $-toggler-caret-size: 2 * $o-we-sidebar-content-field-control-item-spacing + $o-we-sidebar-content-field-control-item-size;
+                    @include o-position-absolute(100%, $-toggler-caret-size);
+                    z-index: $zindex-dropdown + 1;
+                    transform: translateX(50%);
+                    margin-top: $o-we-dropdown-caret-spacing;
+                    border-bottom: ($o-we-item-spacing + $o-we-sidebar-content-field-dropdown-border-width - $o-we-dropdown-caret-spacing) solid $o-we-dropdown-border-color;
+                    border-left: $o-we-item-spacing solid transparent;
+                    border-right: $o-we-item-spacing solid transparent;
+                }
+                &::after {
+                    border-bottom-color: $o-we-sidebar-content-field-dropdown-item-bg;
+                    border-left-width: ($o-we-item-spacing - 1px);
+                    border-right-width: ($o-we-item-spacing - 1px);
+                }
+            }
+            &:not(.o_we_so_color_palette) + we-button:not(:hover) {
+                background: none;
+            }
+
+            we-selection-items {
+                @include o-position-absolute(100%, 0, auto, 0);
+                z-index: $zindex-dropdown;
+                margin-top: $o-we-sidebar-content-field-dropdown-spacing !important;
+
+                &:not(.o_we_has_pager) {
+                    max-height: 600px;
+                    overflow-y: auto;
+                }
+
+                > we-title {
+                    line-height: $o-we-sidebar-content-field-dropdown-item-height;
+                }
+
+                we-button {
+                    @include we-icon-button('', $align: left); // Always a padding on the left
+                    border: none;
+                    background: none;
+                    background-clip: padding-box;
+                    background-color: $o-we-sidebar-content-field-dropdown-item-bg;
+                    color: $o-we-sidebar-content-field-dropdown-item-color;
+
+                    > we-title {
+                        flex-grow: 1;
+                    }
+
+                    > div, > we-title {
+                        line-height: $o-we-sidebar-content-field-dropdown-item-height;
+
+                        img, svg {
+                            max-width: 100%;
+                        }
+                    }
+
+                    &:not(.d-none) ~ we-button {
+                        // Use a border-top instead of a margin-top as when the
+                        // mouse goes from one select button to another, the
+                        // option preview should switch from the first button's
+                        // option to the second one without reset to selected
+                        // state in between.
+                        border-top: $o-we-sidebar-content-field-dropdown-item-spacing solid transparent;
+                    }
+
+                    &:hover {
+                        background-color: $o-we-sidebar-content-field-dropdown-item-bg-hover;
+                        color: $o-we-sidebar-content-field-dropdown-item-hover-color;
+                    }
+                    &.active {
+                        @include we-icon-button('\f00c', $align: left);
+                        background-color: $o-we-sidebar-content-field-dropdown-item-active-bg;
+                        color: $o-we-sidebar-content-field-dropdown-item-active-color;
+
+                        &:after {
+                            color: $o-we-accent;
+                        }
+                    }
+                }
+            }
+            .o_we_pager_header {
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                background-color: $o-we-sidebar-content-field-dropdown-item-bg;
+                margin-bottom: 1px;
+
+                & > b {
+                    padding: $o-we-sidebar-content-field-label-spacing;
+                    color: $o-we-fg-lighter;
+                }
+            }
+            .o_we_pager_controls {
+                display: flex;
+                align-items: center;
+
+                > span {
+                    margin: 0 $o-we-sidebar-content-field-label-spacing;
+                }
+            }
+            .o_we_pager_next, .o_we_pager_prev {
+                margin: 0.3em;
+                padding: $o-we-sidebar-content-field-label-spacing;
+                cursor: pointer;
+                border: $o-we-item-border-width solid currentColor;
+                border-radius: $o-we-item-border-radius;
+            }
+            we-select-page {
+                display: none;
+                width: 100%;
+                // Cut the last visible option in the list to understand that we can scroll.
+                max-height: 75px * 7.5;
+                overflow-y: auto;
+
+                &.active {
+                    display: block;
+                }
+            }
+        }
+
+        // Button groups
+        we-button-group.o_we_user_value_widget {
+            we-selection-items {
+                display: flex;
+                max-width: 100%;
+
+                we-button {
+                    padding: 0 $o-we-sidebar-content-field-button-group-button-spacing;
+                    border-radius: 0;
+
+                    + we-button {
+                        border-left: none;
+                    }
+                    &:first-child {
+                        @include border-left-radius($o-we-sidebar-content-field-border-radius);
+                    }
+                    &:last-child {
+                        @include border-right-radius($o-we-sidebar-content-field-border-radius);
+                    }
+                }
+            }
+        }
+        // Only when main option (not in a we-row or something like that...)
+        we-customizeblock-option > we-button-group.o_we_user_value_widget we-selection-items {
+            @include large-component();
+
+            we-button {
+                display: flex;
+                justify-content: center;
+                flex: 0 1 percentage(1/4);
+                padding: ($o-we-sidebar-content-field-button-group-button-spacing / 4) ($o-we-sidebar-content-field-button-group-button-spacing / 3);
+                text-align: center;
+            }
+        }
+
+        // Inputs
+        we-input.o_we_user_value_widget {
+
+            > div {
+                flex: 0 1 auto;
+                width: $o-we-sidebar-content-field-input-max-width;
+                border: $o-we-sidebar-content-field-border-width solid $o-we-sidebar-content-field-border-color;
+                border-radius: $o-we-sidebar-content-field-border-radius;
+                background-color: $o-we-sidebar-content-field-input-bg;
+
+                &:focus-within {
+                    border-color: $o-we-sidebar-content-field-input-border-color;
+                }
+
+                > we-button { // for input-group
+                    border: none;
+                }
+            }
+
+            &.o_we_large_input > div {
+                flex: 1 1 auto;
+            }
+
+            input {
+                box-sizing: content-box;
+                flex: 1 1 auto;
+                width: 0;
+                min-width: 2ch;
+                height: $o-we-sidebar-content-field-height - 2 * $o-we-sidebar-content-field-border-width;
+                padding: 0 $o-we-sidebar-content-field-clickable-spacing;
+                border: none;
+                border-radius: 0;
+                background-color: transparent;
+                color: inherit;
+                font-family: $o-we-sidebar-content-field-input-font-family;
+
+                &::placeholder {
+                    color: $o-we-sidebar-content-field-control-item-color;
+                }
+                &:focus {
+                    outline: none;
+                }
+            }
+            span {
+                flex: 0 0 auto;
+                padding-right: $o-we-sidebar-content-field-label-spacing;
+                font-size: $o-we-sidebar-content-field-input-unit-font-size;
+                color: $o-we-sidebar-content-field-control-item-color;
+            }
+        }
+
+        // Color Pickers
+        .o_we_so_color_palette.o_we_user_value_widget {
+
+            .o_we_color_preview {
+                @extend %o-preview-alpha-background;
+                flex: 0 0 auto;
+                display: block;
+                width: $o-we-sidebar-content-field-colorpicker-size;
+                height: $o-we-sidebar-content-field-colorpicker-size;
+                border: $o-we-sidebar-content-field-border-width solid $o-we-sidebar-content-field-border-color;
+                border-radius: 10rem;
+
+                &::after {
+                    box-shadow: $o-we-sidebar-content-field-colorpicker-shadow;
+                }
+            }
+
+            &.o_we_widget_opened {
+
+                .o_we_color_preview {
+                    border: 2px solid $o-we-accent;
+                }
+                .o_we_dropdown_caret {
+                    &::before, &::after {
+                        right: $o-we-sidebar-content-field-colorpicker-size / 2;
+                    }
+                    &::after {
+                        border-bottom-width: ($o-we-item-spacing + $o-we-sidebar-content-field-dropdown-border-width - $o-we-dropdown-caret-spacing) + 1px; // 1px = colorpicker inset box-shadow...
+                    }
+                }
+            }
+
+            we-toggler {
+                display: none;
+            }
+        }
+
+        // Matrix (e.g. Chart Snippet)
+        we-matrix {
+            overflow-y: auto;
+
+            table {
+                table-layout: fixed;
+                width: 100%;
+
+                td, th {
+                    text-align: center;
+                    we-button {
+                        display: inline-block;
+                        color: inherit;
+                        height: 100%;
+
+                        &.o_we_matrix_remove_col, &.o_we_matrix_remove_row {
+                            display: none;
+                        }
+                    }
+                    input {
+                        border: $o-we-sidebar-content-field-border-width solid $o-we-sidebar-content-field-border-color;
+                        background-color: $o-we-sidebar-content-field-input-bg;
+                        color: inherit;
+                        font-size: 12px;
+                        width: 100%;
+                    }
+                    &:last-child {
+                        width: 28px;
+                    }
+                }
+                &.o_we_matrix_five_col {
+                    width: auto;
+                    td, th {
+                        input {
+                            width: 43px;
+                        }
+                    }
+                }
+            }
+        }
+
+        // Progress bar widget
+        we-range.o_we_user_value_widget {
+
+            input[type="range"] {
+                @include large-component();
+                height: $o-we-sidebar-content-field-height;
+                padding: 0 $o-we-item-border-width 0 0;
+                background-color: transparent;
+                appearance: none;
+
+                &:focus {
+                    outline: none;
+
+                    &::-webkit-slider-thumb { box-shadow: none; }
+                    &::-moz-range-thumb     { box-shadow: none; }
+                    &::-ms-thumb            { box-shadow: none; }
+                }
+                &::-moz-focus-outer {
+                    border: 0;
+                }
+                &::-webkit-slider-thumb {
+                    width: $o-we-sidebar-content-field-progress-control-height;
+                    height: $o-we-sidebar-content-field-progress-control-height;
+                    margin-top: ($o-we-sidebar-content-field-progress-height - $o-we-sidebar-content-field-progress-control-height) / 2;
+                    border: none;
+                    border-radius: 10rem;
+                    background-color: $o-we-sidebar-content-field-progress-active-color;
+                    box-shadow: none;
+                    appearance: none;
+
+                    &:active {
+                        background-color: $o-we-sidebar-content-field-progress-active-color;
+                    }
+                }
+                &::-webkit-slider-runnable-track {
+                    width: 100%;
+                    height: $o-we-sidebar-content-field-progress-height;
+                    cursor: pointer;
+                    // Unfortunately, Chrome does not support customizing the lower part of the track
+                    background-color: $o-we-sidebar-content-field-progress-color;
+                    border-color: transparent;
+                    border-radius: 10rem;
+                    box-shadow: none;
+
+                    position: relative;
+                    // z-index: 1000;
+                }
+                &::-moz-range-thumb {
+                    width: $o-we-sidebar-content-field-progress-control-height;
+                    height: $o-we-sidebar-content-field-progress-control-height;
+                    border: none;
+                    border-radius: 10rem;
+                    background-color: $o-we-sidebar-content-field-progress-active-color;
+                    box-shadow: none;
+                    appearance: none;
+
+                    &:active {
+                        background-color: $o-we-sidebar-content-field-progress-active-color;
+                    }
+                }
+                &::-moz-range-track {
+                    width: 100%;
+                    height: $o-we-sidebar-content-field-progress-height;
+                    cursor: pointer;
+                    background-color: $o-we-sidebar-content-field-progress-color;
+                    border-color: transparent;
+                    border-radius: 10rem;
+                    box-shadow: none;
+                }
+                &::-moz-range-progress {
+                    background-color: $o-we-sidebar-content-field-progress-active-color;
+                    height: $o-we-sidebar-content-field-progress-height;
+                    border-color: transparent;
+                    border-radius: 10rem;
+                }
+                &::-ms-thumb {
+                    width: $o-we-sidebar-content-field-progress-control-height;
+                    height: $o-we-sidebar-content-field-progress-control-height;
+                    margin-top: 0;
+                    margin-right: 0;
+                    margin-left: 0;
+                    border: none;
+                    border-radius: 10rem;
+                    background-color: $o-we-sidebar-content-field-progress-active-color;
+                    box-shadow: none;
+                    appearance: none;
+
+                    &:active {
+                        background-color: $o-we-sidebar-content-field-progress-active-color;
+                    }
+                }
+                &::-ms-track {
+                    width: 100%;
+                    height: $o-we-sidebar-content-field-progress-height;
+                    cursor: pointer;
+                    background-color: transparent;
+                    border-color: transparent;
+                    border-width: $o-we-sidebar-content-field-progress-control-height / 2;
+                    box-shadow: none;
+                }
+                &::-ms-fill-lower {
+                    background-color: $o-we-sidebar-content-field-progress-active-color;
+                    border-radius: 10rem;
+                    @include border-radius($custom-range-track-border-radius);
+                }
+                &::-ms-fill-upper {
+                    background-color: $o-we-sidebar-content-field-progress-color;
+                    border-radius: 10rem;
+                }
+
+                &.o_we_inverted_range {
+                    transform: rotate(180deg);
+
+                    &::-moz-range-track {
+                        background-color: $o-we-sidebar-content-field-progress-active-color;
+                    }
+                    &::-moz-range-progress {
+                        background-color: $o-we-sidebar-content-field-progress-color;
+                    }
+                    &::-ms-fill-lower {
+                        background-color: $o-we-sidebar-content-field-progress-color;
+                    }
+                    &::-ms-fill-upper {
+                        background-color: $o-we-sidebar-content-field-progress-active-color;
+                    }
+                }
+            }
+        }
+
+        // Multi widgets
+        we-multi.o_we_user_value_widget {
+            margin-top: 0;
+
+            > div {
+                flex-flow: row wrap;
+
+                > * {
+                    flex: 1 1 auto; // Needed for colorpicker...
+                }
+            }
+        }
+
+        //----------------------------------------------------------------------
+        // Layout Utils
+        //----------------------------------------------------------------------
+
+        we-row {
+            position: relative;
+            @extend %o-we-inline;
+            margin-top: $o-we-sidebar-content-field-spacing;
+
+            .o_we_user_value_widget {
+                margin-top: 0;
+                min-width: 4em; // Ideally rely on actual natural min-width, but does not work...
+            }
+            we-button, .o_we_so_color_palette {
+                &.o_we_user_value_widget {
+                    min-width: auto; // ... except for these ones
+                }
+            }
+
+            > div {
+                display: flex;
+                align-items: center;
+
+                > :not(.d-none) ~ * {
+                    margin-left: $o-we-sidebar-content-field-multi-spacing;
+                }
+            }
+
+            we-select.o_we_user_value_widget {
+                position: static;
+            }
+
+            &.o_we_full_row > div {
+                flex: 1 1 auto;
+            }
+        }
+
+        %o-we-inline {
+            display: flex;
+            flex-flow: row wrap;
+
+            > we-title {
+                width: 100%;
+            }
+            > div {
+                flex: 0 1 auto;
+                min-width: 0;
+                margin-top: $o-we-sidebar-content-field-spacing;
+            }
+
+            &:not(.o_we_fw) {
+                flex-flow: row nowrap;
+                align-items: center;
+
+                > we-title {
+                    flex: 0 0 auto;
+                    @include o-text-overflow();
+                    width: $o-we-sidebar-content-field-label-width;
+                    padding-right: $o-we-sidebar-content-field-label-spacing;
+                }
+                > div {
+                    margin-top: 0;
+                }
+            }
+        }
+
+        we-collapse {
+            position: relative;
+            display: block;
+            padding-left: $o-we-sidebar-content-indent;
+            padding-right: $o-we-sidebar-content-padding-base;
+            margin-right: -$o-we-sidebar-content-padding-base;
+            margin-left: -$o-we-sidebar-content-indent;
+            // Allow inner margin to be considered inside the block + Visual space after/before previous/next widget + No flickering on opening
+            $-inner-spacing: ceil($o-we-sidebar-content-field-spacing / 2);
+            border-top: ($o-we-sidebar-content-field-spacing - $-inner-spacing) solid transparent;
+            padding-bottom: ($o-we-sidebar-content-field-spacing - $-inner-spacing);
+            margin-bottom: -($o-we-sidebar-content-field-spacing - $-inner-spacing);
+            background-clip: padding-box;
+
+            > :first-child, .o_we_collapse_toggler {
+                margin-top: $-inner-spacing;
+            }
+            .o_we_collapse_toggler {
+                @include o-position-absolute($top: 0, $left: 0);
+                width: $o-we-sidebar-content-indent;
+                height: $o-we-sidebar-content-field-height;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                padding: 0;
+                background: none;
+                border: none;
+
+                &::after {
+                    content: '\f0da';
+                    position: static;
+                    transform: none;
+                }
+                &.active {
+
+                    &::after {
+                        content: '\f0d7';
+                    }
+                    + * {
+                        background: none;
+                        border: none;
+                        box-shadow: none;
+                    }
+                }
+            }
+            &.active {
+                background-color: $o-we-sidebar-content-fold-block-bg;
+                box-shadow: $o-we-item-standup-top rgba($o-we-item-standup-color-dark, .5), $o-we-item-standup-bottom rgba($o-we-item-standup-color-light, .2);
+
+                we-collapse.active, we-collapse.active .o_we_collapse_toggler {
+                    background-color: $o-we-bg-lighter;
+                }
+            }
+        }
+
+        .o_we_image_weight {
+            display: flex;
+            justify-content: flex-end;
+            align-items: center;
+            margin: $o-we-sidebar-content-field-spacing *.25 $o-we-item-border-width $o-we-sidebar-content-field-spacing*2;
+
+            b {
+                margin-left: $o-we-sidebar-content-field-label-spacing;
+                font: 1em/1 bold $o-we-sidebar-content-field-input-font-family;
+                color: $o-we-color-success;
+            }
+        }
+
+        .o_we_external_warning {
+            margin-top: $o-we-sidebar-content-field-spacing;
+        }
+
+        .o_we_tag {
+            padding: ($o-we-sidebar-content-field-label-spacing / 2) $o-we-sidebar-content-field-label-spacing;
+            border-radius: 5px;
+            background-color: $o-we-bg-darkest;
+
+            + .fa {
+                margin: 0 0 0 5px;
+            }
+        }
+        .o_we_tag_wrapper {
+            display: inline-flex;
+            margin: $o-we-sidebar-content-field-label-spacing ($o-we-sidebar-content-field-label-spacing / 2) 0 0;
+        }
+        .o_wblog_new_tag {
+            & div, & we-input {
+                width: 100% !important;
+            }
+        }
+    }
+
+    > .o_we_invisible_el_panel {
+        flex: 0 0 auto;
+        max-height: 220px;
+        overflow-y: auto;
+        margin-top: auto;
+        padding: $o-we-sidebar-blocks-content-spacing;
+        background-color: $o-we-sidebar-blocks-content-bg;
+        box-shadow: $o-we-item-standup-top rgba($o-we-item-standup-color-light, .2);
+
+        .o_panel_header {
+            padding: $o-we-sidebar-content-field-spacing 0;
+        }
+
+        .o_we_invisible_entry {
+            padding: $o-we-sidebar-content-field-spacing $o-we-sidebar-content-field-clickable-spacing;
+            cursor: pointer;
+
+            &:hover {
+                background-color: $o-we-sidebar-bg;
+            }
+        }
+    }
+
+    &.o_we_backdrop {
+        > .o_we_customize_panel {
+            // Ensure the panel takes full height so that an opened dropdown
+            // does not make a scrollbar appear for no reason
+            flex: 1 1 auto;
+
+            &::after {
+                content: "";
+                @include o-position-absolute(0, 0, 0, 0);
+                display: block;
+                pointer-events: none;
+                background: $o-we-sidebar-content-backdrop-bg;
+            }
+        }
+
+        .o_we_widget_opened {
+            z-index: $zindex-dropdown;
+        }
+    }
+}
+
+.o_we_cc_preview_wrapper {
+    @extend %o-preview-alpha-background;
+    font-family: sans-serif !important;
+    font-size: 15px !important;
+    padding: $o-we-sidebar-content-field-spacing $o-we-sidebar-content-field-spacing $o-we-sidebar-content-field-spacing*.8;
+}
+.o_we_cc_preview_wrapper > * {
+    margin-bottom: 0 !important;
+    line-height: 1 !important;
+}
+.o_we_color_combination_btn_text {
+    color: inherit !important;
+    font-family: inherit !important;
+    font-size: 0.8em !important;
+    margin-top: .5em!important;
+}
+.o_we_color_combination_btn_title {
+    margin-top: 0 !important;
+    font-size: 1.3em !important;
+}
+.o_we_color_combination_btn_btn {
+    padding: 0.2em 3px 0.3em !important;
+    border-radius: 2px !important;
+    font-size: 0.8em !important;
+}
+
+// SNIPPET OPTIONS
+.colorpicker {
+    background-color: $o-we-sidebar-content-field-colorpicker-dropdown-bg;
+    color: $o-we-sidebar-content-field-colorpicker-dropdown-color;
+
+    .o_we_colorpicker_switch_panel {
+        border-bottom: 1px solid $o-we-bg-dark;
+        box-shadow: inset 0 1px 0 rgba(white, .2);
+    }
+    .o_we_colorpicker_switch_pane_btn {
+        @extend %we-generic-tab-button;
+        flex: 0 0 auto;
+    }
+    .o_colorpicker_reset {
+        max-width: 40%;
+        @extend %we-generic-button;
+    }
+    .o_colorpicker_sections {
+        .o_colorpicker_widget {
+            .o_hex_div, .o_rgba_div  {
+                &:focus-within {
+                    border-color: $o-we-sidebar-content-field-input-border-color;
+                }
+            }
+            .o_color_picker_inputs {
+                input {
+                    border: none;
+                    &:focus {
+                        outline: none;
+                    }
+                }
+            }
+        }
+
+        .o_we_color_btn, .o_we_color_combination_btn {
+            float: left;
+            width: percentage(1 / 8);
+            padding-top: percentage(1 / 10);
+            margin: 0;
+            border: 1px solid $o-we-sidebar-content-field-colorpicker-dropdown-bg;
+            box-shadow: $o-we-sidebar-content-field-colorpicker-shadow;
+
+            &.o_colorpicker_reset {
+                background-color: transparent;
+
+                &::before {
+                    @include o-position-absolute(0, 0, 0, 0);
+                    font-family: FontAwesome !important;
+                    content: "\f00d" !important;// fa-times
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                    color: $o-we-color-danger;
+                }
+            }
+        }
+        .o_we_color_combination_btn {
+            float: none;
+            width: 100%;
+            padding: 0;
+            margin: 0;
+            border: 0;
+            background-color: transparent;
+            background-clip: padding-box;
+
+            // Borders instead of margins so that the user smoothly goes from
+            // one button to another without leaving them.
+            border-top: $o-we-sidebar-content-field-spacing solid transparent;
+            border-bottom: $o-we-sidebar-content-field-spacing solid transparent;
+
+            + .o_we_color_combination_btn {
+                margin-top: $o-we-sidebar-content-field-spacing * -.5;
+            }
+
+            &.selected {
+                > .o_we_cc_preview_wrapper {
+                    box-shadow: 0 0 0 1px $o-we-color-success !important;
+                }
+                .o_we_color_combination_btn_title::before {
+                    content: "\f00c";
+                    margin-right: $o-we-sidebar-content-field-spacing;
+                    font-size: 0.8em;
+                    font-family: FontAwesome;
+                    color: $o-we-color-success;
+                }
+            }
+
+            .o_we_cc_preview_wrapper:after {
+                // For some reasons, in this specific context we have to
+                // compensate a 1px gap between the flex container and the
+                // absolute positioned pseudo-element that generates the bg.
+                bottom: -1px;
+            }
+        }
+        .o_colorpicker_section {
+            padding-top: $o-we-sidebar-content-field-spacing;
+
+            &::after {
+                content: "";
+                display: table;
+                clear: both;
+            }
+
+            .o_we_color_btn {
+                position: relative;
+
+                &.selected {
+                    box-shadow: inset 0 0 0 1px $o-we-sidebar-content-field-colorpicker-dropdown-bg,
+                                inset 0 0 0 3px $o-we-accent,
+                                inset 0 0 0 4px white;
+                }
+
+                &.o_btn_transparent::before {
+                    background-color: transparent;
+                }
+            }
+
+            &[data-name="transparent_grayscale"], &[data-name="theme"], &[data-name="reset"] {
+                .o_we_color_btn {
+                    @extend %o-preview-alpha-background;
+
+                    &::before, &::after {
+                        box-shadow: inherit;
+                    }
+                }
+            }
+        }
+    }
+}
+
+// DROPZONES
+@keyframes dropZoneInsert {
+    to {
+        background-color: rgba($o-brand-odoo, 0.3);
+    }
+}
+
+.oe_drop_zone {
+    background-color: rgba($o-brand-odoo, 0.15);
+    animation: dropZoneInsert 1s linear 0s infinite alternate;
+
+    &.oe_insert {
+        position: relative;
+        z-index: $o-we-overlay-zindex;
+        width: 100%;
+        min-width: $o-we-dropzone-size;
+        height: $o-we-dropzone-size;
+        min-height: $o-we-dropzone-size;
+        margin: (-$o-we-dropzone-size/2) 0;
+        border: 2px dashed $o-we-border-color;
+
+        &.oe_vertical {
+            width: $o-we-dropzone-size;
+            float: left;
+            margin: 0 (-$o-we-dropzone-size/2);
+        }
+    }
+}
+
+// MANIPULATORS
+#oe_manipulators {
+    position: relative;
+    z-index: $o-we-overlay-zindex;
+
+    // SNIPPET MANIPULATORS
+    .oe_overlay {
+        @include o-position-absolute;
+        display: none;
+        height: 0;
+        border-color: $o-we-handles-accent-color;
+        background: transparent;
+        text-align: center;
+        transition: opacity 400ms linear 0s;
+
+        &.o_overlay_hidden {
+            opacity: 0;
+            transition: none;
+        }
+        &.oe_active {
+            display: block;
+            z-index: 1;
+        }
+
+        // HANDLES
+        > .o_handles {
+            @include o-position-absolute(-$o-we-handles-offset-to-hide, 0, auto, 0);
+            border-color: inherit;
+
+            &:hover > .o_handle {
+                background-color: rgba($o-we-handles-accent-color, 0.05);
+            }
+            > .o_handle {
+                position: relative;
+                border: 0 solid transparent;
+                border-color: inherit;
+                transition: background 300ms ease 0s;
+
+                &.w {
+                    @include o-position-absolute($o-we-handles-offset-to-hide, auto, -$o-we-handles-offset-to-hide, 0);
+                    width: $o-we-handle-edge-size;
+                    border-width: $o-we-handle-border-width;
+                    border-right-width: 0;
+                    cursor: e-resize;
+
+                    &:after {
+                        @include o-position-absolute($top: 50%, $left: 40%);
+                        margin-top: -$o-we-handles-btn-size/2;
+                    }
+                }
+                &.e {
+                    @include o-position-absolute($o-we-handles-offset-to-hide, 0, -$o-we-handles-offset-to-hide, auto);
+                    width: $o-we-handle-edge-size;
+                    border-right-width: $o-we-handle-border-width;
+                    cursor: w-resize;
+
+                    &:after {
+                        @include o-position-absolute($top: 50%, $right: 40%);
+                        margin-top: -$o-we-handles-btn-size/2;
+                    }
+                }
+                &.n {
+                    @include o-position-absolute($o-we-handles-offset-to-hide, 0, auto, 0);
+                    height: $o-we-handle-edge-size;
+                    border-top-width: $o-we-handle-border-width;
+                    cursor: ns-resize;
+
+                    &:after {
+                        @include o-position-absolute($left: 50%, $top: 40%);
+                        margin-left: -$o-we-handles-btn-size/2;
+                    }
+                }
+                &.s {
+                    @include o-position-absolute(auto, 0, -$o-we-handles-offset-to-hide, 0);
+                    height: $o-we-handle-edge-size;
+                    border-bottom-width: $o-we-handle-border-width;
+                    cursor: ns-resize;
+
+                    &:after {
+                        @include o-position-absolute($left: 50%, $bottom: 40%);
+                        margin-left: -$o-we-handles-btn-size/2;
+                    }
+                }
+
+                &::after {
+                    z-index: 1;
+                    display: block;
+                    width: $o-we-handles-btn-size;
+                    height: $o-we-handles-btn-size;
+                    border: solid 1px darken($o-we-handles-accent-color, 20%);
+                    line-height: $o-we-handles-btn-size - 2;
+                    font-size: 14px;
+                    font-family: FontAwesome;
+                    background-color: darken($o-we-handles-accent-color, 10%);
+                    color: white;
+                }
+
+                &.o_handle_start:after {
+                    background-color: rgba($o-we-sidebar-content-field-clickable-bg, .6);
+                    border-color: rgba($o-we-sidebar-content-field-border-color, .2);
+                }
+
+                &:hover,
+                &.o_active {
+                    background-color: rgba($o-we-handles-accent-color, 0.2);
+
+                    &::after {
+                        border-color: darken($o-we-handles-accent-color, 10%);
+                        background-color: darken($o-we-handles-accent-color, 20%);
+                    }
+                }
+
+                &.w:after,
+                &.e:after {
+                    content: "\f07e";
+                }
+
+                &.s:after,
+                &.n:after {
+                    content: "\f07d";
+                }
+
+                &.o_handle_start {
+
+                    &.w:after,
+                    &.e:after {
+                        content: '\f061';
+                    }
+
+                    &.n:after,
+                    &.s:after {
+                        content: '\f063';
+                    }
+                }
+
+                &.o_handle_end {
+
+                    &.w:after,
+                    &.e:after {
+                        content: '\f060';
+                    }
+
+                    &.n:after,
+                    &.s:after {
+                        content: '\f062';
+                    }
+                }
+
+                &.readonly {
+                    cursor: auto !important;
+
+                    &:after {
+                        display: none !important;
+                    }
+
+                    &:hover {
+                        opacity: 0.5;
+                    }
+                }
+            }
+
+            > .o_overlay_options_wrap {
+                @include o-position-absolute($o-we-handles-offset-to-hide, $left: 50%);
+                transform: translate(-50%, -110%);
+
+                &, > .o_overlay_move_options {
+                    display: flex;
+                }
+                > .o_overlay_move_options {
+                    > *, + * {
+                        @extend %we-generic-button;
+                        margin: 0 1px 0;
+                        min-width: 22px;
+                        padding: 0 $o-we-sidebar-content-field-button-group-button-spacing * .5;
+                        color: $o-we-fg-lighter;
+                    }
+                }
+                > .oe_snippet_remove {
+                    margin-left: $o-we-sidebar-content-field-button-group-button-spacing;
+                    background-color: mix($o-we-color-danger, $o-we-sidebar-content-field-clickable-bg);;
+                }
+                > .o_overlay_move_options > .o_move_handle {
+                    cursor: move;
+                    width: 30px;
+                    height: 22px;
+                    background-image: url('/web_editor/static/src/img/snippets_options/o_overlay_move_drag.svg');
+                    background-position: center;
+                    background-repeat: no-repeat;
+                }
+                &:hover {
+                    > .o_overlay_move_options {
+                        > *, + * {
+                            @include o-hover-opacity(.6);
+
+                            &:hover {
+                                border-color: mix($o-we-handles-accent-color, $o-we-sidebar-content-field-pressed-bg, .4);
+                                background-color: $o-we-sidebar-content-field-pressed-bg;
+                            }
+                        }
+                    }
+                    > .oe_snippet_remove:hover {
+                        border-color: mix($o-we-color-danger, $o-we-sidebar-content-field-pressed-bg, .4);
+                        background-color: $o-we-color-danger;
+                    }
+                }
+            }
+        }
+
+        &.o_top_cover > .o_handles > .o_overlay_options_wrap {
+            top: auto;
+            bottom: -$o-we-handles-offset-to-hide;
+            transform: translate(-50%, 110%);
+        }
+
+        &.o_we_overlay_preview {
+            pointer-events: none;
+
+            > .o_handles {
+
+                > .o_handle::after, .o_overlay_options_wrap {
+                    display: none;
+                }
+            }
+        }
+
+        // Background position overlay
+        &.o_we_background_position_overlay {
+            background-color: rgba(0,0,0,.7);
+            z-index: auto;
+
+            .o_we_overlay_content {
+                cursor: grab;
+
+                .o_we_grabbing {
+                    cursor: grabbing;
+                }
+            }
+
+            .o_overlay_background > * {
+                display: block !important;
+                top: 0 !important;
+                right: 0 !important;
+                bottom: 0 !important;
+                left: 0 !important;
+                transform: none !important;
+                max-width: unset !important;
+                max-height: unset !important;
+            }
+        }
+    }
+}
+
+.s-resize-important * {
+    cursor: s-resize !important;
+}
+
+.n-resize-important * {
+    cursor: n-resize !important;
+}
+
+.e-resize-important * {
+    cursor: e-resize !important;
+}
+
+.w-resize-important * {
+    cursor: w-resize !important;
+}
+
+.move-important * {
+    cursor: move !important;
+}
+
+.dropdown-menu label .o_switch {
+    margin: 0;
+    padding: 2px 0;
+}
+
+.text-input-group {
+    position: relative;
+    margin-bottom: 45px;
+
+    input {
+        font-size: 18px;
+        padding: 10px 10px 10px 5px;
+        display: block;
+        width: 300px;
+        border: none;
+        border-bottom: 1px solid #757575;
+    }
+
+    input:focus {
+        outline: none;
+    }
+
+    /* LABEL ======================================= */
+    label {
+        color: #999;
+        font-size: 18px;
+        font-weight: normal;
+        @include o-position-absolute($top: 10px, $left: 5px);
+        pointer-events: none;
+        transition: 0.2s ease all;
+    }
+
+    /* active state */
+    input:focus~label,
+    input:valid~label {
+        top: -20px;
+        font-size: 14px;
+        color: #5264AE;
+    }
+
+    /* BOTTOM BARS ================================= */
+    .bar {
+        position: relative;
+        display: block;
+        width: 300px;
+    }
+
+    .bar:before,
+    .bar:after {
+        content: '';
+        height: 2px;
+        width: 0;
+        bottom: 1px;
+        @include o-position-absolute;
+        background: #5264AE;
+        transition: 0.2s ease all;
+    }
+
+    .bar:before {
+        left: 50%;
+    }
+
+    .bar:after {
+        right: 50%;
+    }
+
+    /* active state */
+    input:focus~.bar:before,
+    input:focus~.bar:after {
+        width: 50%;
+    }
+
+    /* HIGHLIGHTER ================================== */
+    .highlight {
+        @include o-position-absolute($top: 25%, $left: 0);
+        height: 60%;
+        width: 100px;
+        pointer-events: none;
+        opacity: 0.5;
+    }
+
+    /* active state */
+    input:focus~.highlight {
+        animation: inputHighlighter 0.3s ease;
+    }
+}
+
+// DRAG&DROP ANIMATIONS
+.oe_snippet_body {
+    opacity: 0;
+    animation: fadeInDownSmall 700ms forwards;
+}
+
+// CONTAINER PREVIEW
+.o_container_preview {
+    outline: 2px dashed $o-we-handles-accent-color;
+}
+
+we-select.o_we_shape_menu {
+    we-button[data-shape] {
+        padding: 0 !important;
+
+        &.active {
+            border: 1px solid $o-we-color-success !important;
+        }
+        div {
+            width: 100%;
+        }
+        .o_we_shape_btn_content {
+            @extend %o-preview-alpha-background;
+            width: 100%;
+            height: 75px;
+        }
+    }
+}
+
+.o_we_ui_loading {
+    @include o-position-absolute(0, 0, 0, 0);
+    z-index: $o-we-zindex;
+    background-color: $o-we-sidebar-content-backdrop-bg;
+    color: $o-we-fg-lighter;
+}
+#oe_manipulators > .o_we_ui_loading {
+    // hacky solution to be over the content, ideally that loader should only
+    // be over the content being reloaded (with a covering similar to the editor
+    // overlay covering).
+    position: fixed;
+    right: $o-we-sidebar-width;
+}
+
+.o_we_force_no_transition {
+    // Note: this is forced through a CSS class instead of inline style to avoid
+    // overridding existing inline styles or forgetting to restore them as the
+    // code evolves. We may need to increase the CSS priority of this. It will
+    // also not work to override important inline style... this is a limitation.
+    transition: none !important;
+}