[MERGE] forward port branch saas-12.5 up to 197474e5b9a

7 files changed, 546 insertions, 839 deletions

diff --git a/addons/web_editor/static/src/scss/web_editor.backend.scss b/addons/web_editor/static/src/scss/web_editor.backend.scss
index ecbe42721f3..385bb370fd7 100644
--- a/addons/web_editor/static/src/scss/web_editor.backend.scss
+++ b/addons/web_editor/static/src/scss/web_editor.backend.scss
@@ -3,7 +3,7 @@
     word-wrap: break-word;
 
     .note-editable {
-        min-height: 180px;
+        min-height: 330px;
         font: inherit !important;
         font-family: inherit !important;
         line-height: inherit !important;
@@ -23,13 +23,16 @@
         width: 100%;
         margin: 0;
         padding: 0;
-        border: 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;
diff --git a/addons/web_editor/static/src/scss/web_editor.frontend.scss b/addons/web_editor/static/src/scss/web_editor.frontend.scss
index 7df7cacccb4..58a314bb7ad 100644
--- a/addons/web_editor/static/src/scss/web_editor.frontend.scss
+++ b/addons/web_editor/static/src/scss/web_editor.frontend.scss
@@ -3,3 +3,14 @@
         transform: none !important;
     }
 }
+
+.o_wysiwyg_loader {
+    @extend .form-control:disabled;
+    pointer-events: none;
+    min-height: 100px;
+    color: transparent;
+}
+.o_wysiwyg_loading {
+    @include o-position-absolute($top: 50%, $left: 50%);
+    transform: translate(-50%, -50%)
+}
diff --git a/addons/web_editor/static/src/scss/web_editor.variables.scss b/addons/web_editor/static/src/scss/web_editor.variables.scss
index e317fe7616b..0ab8dc07b87 100644
--- a/addons/web_editor/static/src/scss/web_editor.variables.scss
+++ b/addons/web_editor/static/src/scss/web_editor.variables.scss
@@ -2,14 +2,22 @@
 /// This files regroups the variables and mixins which are specific to the editor.
 ///
 
-$o-we-font-family: Roboto, 'Montserrat', "Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif !default;
+$o-we-font-family: Roboto, 'Montserrat', 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif !default;
+
+$o-we-font-size: 13px;
+$o-we-bg-color: #F7F7F7 !default;
+$o-we-bg-color-dark: #a7a7a7 !default;
+$o-we-color: #212629 !default;
+$o-we-border-width: 1px !default;
+$o-we-border-color: rgba(0, 0, 0, 0.125) !default;
+$o-we-dropdown-bg-color: #FFFFFF;
+$o-we-dropdown-color: inherit;
 
 $o-we-color-dark: #2c2c36 !default;
 $o-we-color-darker: darken($o-we-color-dark, 2%) !default;
 $o-we-color-divider: #33363e !default;
 $o-we-color-light: #4e525b !default;
-$o-we-color-normal: #50545d !default;
-$o-we-color-paper: #fcfcfc !default;
+$o-we-color-normal: #3D4047 !default;
 $o-we-color-text-normal: #999999 !default;
 $o-we-color-text-light: #d4d5d7 !default;
 $o-we-color-text-lighter: #ebecee !default;
@@ -18,36 +26,36 @@ $o-we-color-warning: #f0ad4e !default;
 $o-we-color-success: #40ad67 !default;
 $o-we-color-info: #6999a8 !default;
 
-$o-we-sidebar-width: 210px !default;
+$o-we-sidebar-width: 230px !default;
 
-$o-we-tab-active-bg: #3D4048 !default;
+$o-we-handles-offset-to-hide: 10000px !default;
+$o-we-handles-btn-size: 18px !default;
+$o-we-handles-accent-color: #00e2ff !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-handle-border-width-preview: 6px !default;
 
 // Transitions
 $o-we-md-ease: cubic-bezier(0.19, 1, 0.22, 1) !default;
 
 // Editor
-$o-we-dropzone-size: 40px !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;
 
-$o-we-handle-edge-size: 1px !default;
-$o-we-handle-border-width: 1px !default;
-$o-we-handles-offset-to-hide: 10000px !default;
-$o-we-handles-accent-color: #00e2ff !default;
-$o-we-handles-btn-size: 18px !default;
-
-$o-we-overlay-option-size: 25px !default;
-
 $o-we-ace-color: #2F3129 !default;
 
 $o-we-switch-size: 2ex !default;
-$o-we-switch-inactive-color: $o-we-color-paper !default;
+$o-we-switch-inactive-color: $o-we-bg-color !default;
 
 // Checklist
 $o-checklist-margin-left: 20px;
 $o-checklist-checkmark-width: 2px;
 $o-checklist-before-size: 13px;
 
+$o-we-toolbar-height: 32px;
+
 // ============    'Preview' component Mixins    ===============
 // Create a "preview" work-area to edit/customize specific elements
 
@@ -66,6 +74,26 @@ $o-checklist-before-size: 13px;
     box-shadow: 0 0 15px 2px #000;
 }
 
+// Mixins for buttons with alpha bg-color
+@mixin o-alpha-button-preview {
+    position: relative;
+    z-index: 1;
+
+    // Place an overlay that inherit the button's bg-color.
+    &::before {
+        content: "";
+        @include o-position-absolute(0, 0, 0, 0);
+        background-color: inherit;
+    }
+
+    &::after {
+        content: "";
+        @include o-position-absolute(0, 0, 0, 0);
+        z-index: -1;
+        background-image: url('/web_editor/static/src/img/transparent.png');
+        background-size: 10px auto;
+    }
+}
 
 // ============    Preservation mixins    ===============
 // Used to preserve web_editor and website UI from themes customizations
@@ -148,7 +176,7 @@ $o-checklist-before-size: 13px;
 
     .modal-content {
         border-radius: 0;
-        background-color: $o-we-color-paper;
+        background-color: $o-we-bg-color;
 
         .modal-header {
             border-bottom-color: #e9ecef;
@@ -179,7 +207,7 @@ $o-checklist-before-size: 13px;
                 &.active {
                     &, &:hover, &:focus {
                         color: $o-we-color-normal;
-                        background-color: $o-we-color-paper;
+                        background-color: $o-we-bg-color;
                         border-color: #dee2e6 #dee2e6 #FFFFFF;
                     }
                 }
@@ -199,11 +227,11 @@ $o-checklist-before-size: 13px;
             @include button-variant($o-brand-primary, $o-brand-primary);
         }
         &.btn-secondary {
-            @include button-variant($o-we-color-paper, $o-we-color-paper);
+            @include button-variant($o-we-bg-color, $o-we-bg-color);
             color: $o-brand-primary;
         }
         &.btn-link {
-            @include button-variant($o-we-color-paper, $o-we-color-paper);
+            @include button-variant($o-we-bg-color, $o-we-bg-color);
             color: $o-brand-primary;
         }
         &.btn-success {
@@ -225,8 +253,8 @@ $o-checklist-before-size: 13px;
     .card {
         padding: 19px;
         margin-bottom: 20px;
-        background-color: $o-we-color-paper;
-        border: 1px solid darken($o-we-color-paper, 5%);
+        background-color: $o-we-bg-color;
+        border: 1px solid darken($o-we-bg-color, 5%);
         border-radius: 0;
         box-shadow: none;
     }
diff --git a/addons/web_editor/static/src/scss/wysiwyg.scss b/addons/web_editor/static/src/scss/wysiwyg.scss
index cd8fa7bcf44..175463da8f1 100644
--- a/addons/web_editor/static/src/scss/wysiwyg.scss
+++ b/addons/web_editor/static/src/scss/wysiwyg.scss
@@ -1,322 +1,171 @@
-// NOTE EDITOR
+$o-we-overlay-zindex: ($zindex-fixed + $zindex-modal-backdrop) / 2 !default;
+$o-we-zindex: $o-we-overlay-zindex + 1 !default;
 
-body.editor_enable {
-    padding-top: $o-wysiwyg-toolbar-height !important;
-}
+// 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 {
+    --o-we-toolbar-height: #{$o-we-toolbar-height};
 
-#wrapwrap {
-    height: calc(100vh - #{$o-wysiwyg-toolbar-height});
-    border: 1px solid $o-wysiwyg-border-color;
-    border-left: 0;
-    border-top: 0;
+    --o-we-bg-color: #{$o-we-bg-color};
+    --o-we-bg-color-dark: #{$o-we-bg-color-dark};
+    --o-we-color: #{$o-we-color};
+    --o-we-color-accent: #{$o-we-color};
 
-    .btn {
-        -webkit-user-select: none;
-    }
+    --o-we-dropdown-bg-color: #{$o-we-dropdown-bg-color};
+    --o-we-dropdown-color: #{$o-we-dropdown-color};
+
+    --o-we-snippets-bg-color: #{$o-we-bg-color};
+    --o-we-snippets-color: #{$o-we-color};
 }
 
-// TOP BAR (EDIT)
+// EDITOR TOP BAR AND POPOVER
+body.editor_enable {
+    padding-top: var(--o-we-toolbar-height) !important;
+}
 #web_editor-top-edit {
-    height: $o-wysiwyg-toolbar-height;
-    background-color: $o-wysiwyg-bg-color;
-    z-index: $o-wysiwyg-zindex - 2;
+    @include o-position-absolute(0, 0, auto, 0);
     position: fixed;
-    top: 0px;
-    right: 0px;
-    left: 0px;
-    white-space: nowrap;
-    border: 1px solid $o-wysiwyg-border-color;
-    border-bottom: 1px solid rgba(0, 0, 0, 0.125);
-
-    transition: background-color 400ms $o-we-md-ease 0s;
-    font-family: $o-we-font-family;
-}
-
-.note-editor.note-frame {
-    background-color: inherit;
-
-    .note-editing-area .note-editable {
-        background-color: transparent !important;
-        color: inherit;
-        padding-left: 0;
-        padding-right: 0;
-    }
-
-    &.fullscreen {
-        background-color: #fff;
+    z-index: $o-we-zindex;
+    height: var(--o-we-toolbar-height);
+    background-color: var(--o-we-bg-color);
+
+    .note-popover .popover {
+        top: 0 !important;
+        left: 0 !important;
+        right: 0 !important;
+        border: none !important;
     }
 }
 
-.note-editor:not(.note-frame) .note-editing-area {
-    overflow: visible;
-}
-
-#web_editor-top-edit .note-popover .popover {
-    height: $o-wysiwyg-toolbar-height - 2;
-    top: 0 !important;
-    left: 0 !important;
-    padding: 0;
+.wysiwyg_iframe,
+.note-editor {
+    border: $o-we-border-width solid $o-we-border-color;
     margin: 0;
-    border: 0;
-    width: auto;
-    text-align: center;
-    box-shadow: none;
-    background-color: $o-wysiwyg-bg-color;
-    z-index: $o-wysiwyg-zindex;
-
-    .popover-body {
-        height: $o-wysiwyg-toolbar-height - 2;
-
-        > .btn-group {
-            height: $o-wysiwyg-toolbar-height - 2;
-            margin-top: 0;
-        }
-
-        .btn {
-            height: $o-wysiwyg-toolbar-height - 2;
-            border-top: 0;
-        }
-    }
+    padding: 0;
 }
+.note-popover .popover .popover-body,
+.panel-heading.note-toolbar {
+    height: var(--o-we-toolbar-height);
+    padding-bottom: 0;
+    border-bottom: $o-we-border-width solid $o-we-border-color;
+    background-color: var(--o-we-bg-color);
+    font-family: $o-we-font-family;
+    white-space: nowrap;
 
-#web_editor-toolbars .popover,
-.note-popover.popover .popover-content,
-.note-editor .note-toolbar {
-    font-family: $o-wysiwyg-font-family;
-
-    h1,
-    h2,
-    h3,
-    h4,
-    h5,
-    h6,
-    .h1,
-    .h2,
-    .h3,
-    .h4,
-    .h5,
-    .h6 {
-        font-family: $o-wysiwyg-font-family;
-    }
-
-    .btn {
+    // 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;
-        background-color: inherit;
+    }
+    .btn-secondary {
         color: inherit;
-        transition: all 0.3s ease 0s;
+    }
+
+    // Active buttons and opened dropdowns
+    .btn {
+        padding: 0.5em 0.75em !important;
+        border-left: 1px solid transparent;
+        border-right: 1px solid transparent;
+        color: var(--o-we-color);
+        font-size: $o-we-font-size !important;
 
-        >.fa {
-            color: inherit;
+        &.active {
+            background-color: var(--o-we-bg-color-dark);
+            color: var(--o-we-color-accent);
         }
 
         &:hover {
-            border-top: 2px solid inherit;
-            color: inherit;
-
-            >.fa {
-                color: inherit;
-            }
+            color: var(--o-we-color-accent);
         }
 
-        .o_image_alt {
-            @include o-text-overflow(inline-block);
-            max-width: 100px;
+        &:focus, &:active, &:focus:active {
+            @extend %we-active-button;
         }
-
-        &.active {
-            background-color: inherit;
-            color: inherit;
-            box-shadow: inset 0 3px 10px rgba(0, 0, 0, 0.5);
-
-            >.fa {
-                color: inherit;
-            }
+    }
+    .btn-group.show {
+        > .btn {
+            @extend %we-active-button;
         }
-
-        &.o_disabled {
-            opacity: 0.5;
-            pointer-events: none;
+        &::after {
+            content: '';
+            @include o-position-absolute(100%, $o-we-border-width, auto, $o-we-border-width);
+            height: $o-we-border-width;
+            background-color: var(--o-we-dropdown-bg-color);
         }
     }
-
-    .note-btn-group {
-        margin: 0;
+    %we-active-button {
+        border-left-color: $o-we-border-color;
+        border-right-color: $o-we-border-color;
+        background: var(--o-we-dropdown-bg-color);
+        box-shadow: none !important;
+        outline: none !important;
     }
-
-    >.btn-group {
-        margin-top: 0;
-
-        &.show,
-        .btn-group.show {
-            .dropdown-toggle {
-                border-top: 2px solid white;
-                background-color: $o-wysiwyg-bg-color-dark;
-                box-shadow: none;
-
-                >.fa,
-                >span {
-                    color: inherit;
-                }
-            }
-        }
-    }
-
     .dropdown-menu {
-        margin: 0;
+        margin-top: 0;
+        border: $o-we-border-width solid $o-we-border-color;
+        border-top-color: transparent;
         border-radius: 0;
-        background-color: $o-wysiwyg-bg-color;
-        color: inherit;
-        white-space: normal;
-
-        .dropdown-item {
-            width: 100%;
-            color: inherit;
-
-            >.fa {
-                color: inherit;
-            }
-
-            &:hover {
-                background-color: $o-wysiwyg-bg-color-dark;
-                color: inherit;
-
-                >.fa {
-                    color: inherit;
-                }
-            }
-        }
+        background-color: var(--o-we-dropdown-bg-color);
+        color: var(--o-we-dropdown-color);
+        box-shadow: none;
     }
-
-    .note-para .dropdown-menu {
+    .dropdown-menu.show { // To overcome .note-XXX .dropdown-menu rules
         min-width: 0;
-        white-space: nowrap;
     }
+    .dropdown-item { // To overcome summernote rules breaking this in iframes
+        display: block;
+        max-width: none;
+        overflow: visible;
+        color: var(--o-we-color);
 
-    .note-color {
-
-        .note-back-color-preview,
-        .note-fore-color-preview {
-            .dropdown-toggle {
-                padding: 0px 7px;
-                height: 35px;
-                width: auto;
-                border-top: none;
-                border-bottom: 3px solid;
-
-                &:after {
-                    display: none;
-                }
-            }
-        }
-
-        .dropdown-menu {
-            min-width: 180px;
-
-            .note-custom-color {
-                cursor: pointer;
-                border-radius: 5px;
-
-                &:hover {
-                    background-color: gray('400');
-                    color: black
-                }
-            }
-        }
-
-        .dropdown-toggle:after {
-            display: none;
-        }
-
-        .note-palette:first-child {
-            width: 100%;
-
-            .note-color-reset,
-            .note-custom-color {
-                width: 162px;
-            }
-
-            .note-color-reset {
-                padding: 0 3px !important;
-                height: 32px;
-            }
-
-            .note-holder,
-            .note-color-palette .note-color-row,
-            .note-custom-color-palette .note-color-row {
-                height: auto !important;
-
-                &::after {
-                    content: "";
-                    display: table;
-                    clear: both;
-                }
-
-                .note-color-btn {
-                    float: left;
-                    height: 20px;
-                    width: 20px;
-                    margin: 1px 1px 0 0;
-                    border: 1px solid black;
-                    cursor: pointer;
-                    @include o-alpha-button-preview;
-
-                    &.o_small {
-                        width: 16px;
-                        height: 16px;
-                        margin: 3px 3px 2px 2px;
-                        border-radius: 50%;
-                    }
-
-                    &.o_clear {
-                        clear: both;
-                    }
+        &:hover {
+            background-color: var(--o-we-bg-color) !important;
+            color: var(--o-we-color-accent) !important;
 
-                    &.o_btn_transparent {
-                        display: none;
-                    }
-                }
+            > * {
+                color: inherit !important;
             }
         }
     }
-}
-
-.note-popover.popover.note-hint-popover .popover-content {
-    height: auto;
-}
 
-.note-popover,
-.note-editor {
-    .modal .modal-footer p {
-        display: none;
+    // Specific elements
+    .o_image_alt {
+        @include o-text-overflow();
+        max-width: 150px;
     }
-}
-
-.note-handle {
-    pointer-events: none;
-
-    .note-control-selection {
-        z-index: 1;
-        overflow: hidden;
-
-        .note-control-se {
-            border-top: 0;
-            border-left: 0;
-            background: transparent;
-        }
+    .note-color-palette div .note-color-btn {
+        border-color: var(--o-we-dropdown-bg-color);
     }
 }
 
-.o_fake_editable:not([data-oe-model]):focus {
-    outline: none;
+// ANIMATIONS
+@keyframes fadeInDownSmall {
+    0% {
+        opacity: 0;
+        transform: translate(0, -5px);
+    }
+    100% {
+        opacity: 1;
+        transform: translate(0, 0);
+    }
 }
 
-.note-editor.dragover .note-dropzone {
-    z-index: $o-wysiwyg-zindex + 1;
+@keyframes inputHighlighter {
+    from {
+        background: $o-brand-primary;
+    }
+    to {
+        width: 0;
+        background: transparent;
+    }
 }
 
 // MODALS
-
 body .modal {
 
     // SELECT MEDIA
@@ -362,7 +211,7 @@ body .modal {
                     @include o-position-absolute($top: 0, $right: 0);
                     border-radius: 0 0 0 2px;
                     &:hover {
-                        color: $o-wysiwyg-color-danger;
+                        color: $o-we-color-danger;
                     }
                 }
 
@@ -384,13 +233,8 @@ body .modal {
                 }
             }
 
-            .o_we_attachment_selected {
-                border-color: $o-brand-primary;
-                box-shadow: 0px 0px 2px 2px $o-brand-primary;
-            }
-
             .font-icons-icons {
-                >span {
+                > span {
                     text-align: center;
                     font-size: 22px;
                     margin: 5px;
@@ -401,8 +245,8 @@ body .modal {
 
                     &.o_selected {
                         cursor: auto;
-                        background-color: $o-wysiwyg-bg-color-dark;
-                        box-shadow: 0px 0px 0px 1px $o-wysiwyg-color-success;
+                        background-color: $o-we-bg-color-dark;
+                        box-shadow: 0px 0px 0px 1px $o-we-color-success;
                     }
                 }
             }
@@ -421,7 +265,7 @@ body .modal {
                         position: relative;
                         width: 100%;
 
-                        >textarea {
+                        > textarea {
                             width: 100%;
                             min-height: 95px;
                             padding-bottom: 25px;
@@ -460,7 +304,7 @@ body .modal {
 
         .cropper-point {
             background-color: white;
-            transition: all 400ms $o-wysiwyg-md-ease 0s;
+            transition: all 400ms $o-we-md-ease 0s;
             transform: scale(1.5, 1.5);
             border-radius: 10px;
             box-shadow: 0 0 1px 1px rgba(23, 23, 23, 0.5);
@@ -482,7 +326,7 @@ body .modal {
 
     // LINK EDITOR DIALOG COLOR SELECTOR
     .o_link_dialog {
-        .o_link_dialog_color>.o_link_dialog_color_item {
+        .o_link_dialog_color > .o_link_dialog_color_item {
             position: relative;
             width: 30px;
             height: 30px;
@@ -490,7 +334,7 @@ body .modal {
             border: 2px solid rgba(0, 0, 0, 0.25);
             border-radius: 50%;
 
-            input:checked+i::before {
+            input:checked + i::before {
                 content: "\f00c";
                 @include o-position-absolute($top: 6px, $left: 5px);
             }
@@ -498,7 +342,7 @@ body .modal {
             &.btn-link {
                 padding: 3px 9px;
 
-                >span {
+                > span {
                     text-decoration: underline;
                 }
             }
@@ -511,7 +355,7 @@ body .modal {
 
     .o_we_image_optimize_dialog {
         .o_we_title_label {
-            font-size: 1rem;
+            font-size: $o-we-font-size;
         }
         .o_we_preview_area {
             max-height: 400px;
@@ -539,32 +383,3 @@ img.o_we_selected_image {
 img.o_we_custom_image.mx-auto {
     display: block;
 }
-
-// ENTER IN EDIT MODE
-
-.note-editor .css_editable_mode_display {
-    border: 1px dashed rgba(153, 153, 153, 0.5);
-    display: block !important;
-}
-
-.note-editable {
-
-    li,
-    p,
-    h1,
-    h2,
-    h3,
-    h4,
-    h5,
-    h6 {
-        &:empty:after {
-            content: "\00a0"
-        }
-    }
-}
-
-.wysiwyg_iframe {
-    margin: 0;
-    padding: 0;
-    border: 0;
-}
diff --git a/addons/web_editor/static/src/scss/wysiwyg_iframe.scss b/addons/web_editor/static/src/scss/wysiwyg_iframe.scss
index e1af34e41fa..e7554317994 100644
--- a/addons/web_editor/static/src/scss/wysiwyg_iframe.scss
+++ b/addons/web_editor/static/src/scss/wysiwyg_iframe.scss
@@ -16,21 +16,8 @@ iframe.wysiwyg_iframe.o_fullscreen {
 
 body.o_in_iframe {
     background-color: $o-view-background-color;
-    overflow: auto;
-
-    .note-editable {
-        height: calc(100vh - #{$o-wysiwyg-toolbar-height} - 2px);
-    }
 
     .note-statusbar {
         display: none;
     }
-
-    #web_editor-toolbars .popover .btn {
-        font-size: 1rem;
-    }
-
-    .o_mail_theme_selector .btn {
-        font-size: 1rem;
-    }
 }
diff --git a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
index 6b576acecba..d3f10ebd526 100644
--- a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
+++ b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
@@ -2,86 +2,85 @@
 /// This file contains all variables and mixins that are specific to the editor.
 ///
 
-$o-wysiwyg-handles-accent-color: #00e2ff !default;
-$o-wysiwyg-handle-edge-size: 1px !default;
-$o-wysiwyg-dropzone-size: 40px !default;
-$o-wysiwyg-sidebar-width: 210px !default;
-$o-wysiwyg-sidebar-height: 36px !default;
-$o-wysiwyg-overlay-option-size: 25px !default;
-$o-wysiwyg-handles-btn-size: 18px !default;
-$o-wysiwyg-handle-border-width: 1px !default;
-
-$o-wysiwyg-handles-offset-to-hide: 10000px !default;
-
 // OVERRIDES FOR EDITOR WITH SNIPPETS
 body.editor_enable.editor_has_snippets {
     padding-left: $o-we-sidebar-width !important;
 
     #web_editor-top-edit .note-popover .popover {
-        margin: 0 0 0 $o-we-sidebar-width;
+        left: $o-we-sidebar-width !important;
     }
-}
-
-// NOTE EDITOR
-.note-editor.o_snippets_loaded {
-    transition: padding-left 400ms $o-wysiwyg-md-ease 0s;
-    padding-left: 210px !important;
-}
-
-.note-editor.note-frame .note-editing-area .o_wrap_editable_snippets {
-    overflow: auto;
 
-    .note-editable {
-        overflow: visible;
+    .modal:not(.o_technical_modal) {
+        // 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);
     }
 }
 
-.o_in_iframe .note-editor.o_snippets_loaded .note-editable {
-    padding-top: 30px;
-}
-
 // SNIPPET PANEL
 #oe_snippets {
     @include o-w-preserve-btn;
 
+    @include o-position-absolute(0, auto, 0, -$o-we-sidebar-width);
+    position: fixed;
+    z-index: $o-we-zindex;
     display: flex;
     flex-flow: column nowrap;
-    position: fixed;
-    top: 0;
-    width: $o-wysiwyg-sidebar-width;
-    z-index: $o-wysiwyg-zindex - 1;
+    width: $o-we-sidebar-width;
 
-    font-family: Roboto, $font-family-sans-serif;
-    border-right: 1px solid #aaa;
-    transition: left 400ms $o-wysiwyg-md-ease 0s;
-    background-image: linear-gradient(45deg, $o-wysiwyg-bg-color, darken($o-wysiwyg-bg-color, 10%));
+    border-right: $o-we-border-width solid $o-we-border-color;
+    background-color: var(--o-we-snippets-bg-color);
+    color: var(--o-we-snippets-color);
     box-shadow: 0px 10px 10px -10px black inset;
-    border: 1px solid $o-wysiwyg-border-color;
+    font-family: Roboto, $font-family-sans-serif;
+
+    transition: left 400ms $o-we-md-ease 0s;
+
+    &.o_loaded {
+        left: 0 !important;
+    }
 
     #snippets_menu {
         flex: 0 0 auto;
-        height: $o-wysiwyg-toolbar-height;
-        line-height: $o-wysiwyg-sidebar-height;
-        margin: 0;
-        padding: 0;
-        background: $o-wysiwyg-bg-color;
-        text-align: center;
-        font-weight: normal;
-        font-size: 17px;
-        color: $o-wysiwyg-color;
-        font-family: $o-wysiwyg-font-family;
+        display: flex;
+        height: var(--o-we-toolbar-height);
+        background: var(--o-we-bg-color);
+        color: var(--o-we-color);
+        font-family: $o-we-font-family;
+
+        > button {
+            flex: 1 1 auto;
+            border: none;
+            background: transparent;
+            color: inherit;
+            @include o-text-overflow();
+
+            &.active {
+                background: var(--o-we-snippets-bg-color);
+                color: var(--o-we-snippets-color);
+            }
+
+            &:focus, &:active, &:focus:active {
+                outline: none;
+            }
+        }
     }
 
-    #o_scroll {
+    > #o_scroll, > .o_we_customize_panel {
+        flex: 1 1 auto;
         height: 100%;
         overflow: auto;
+    }
+
+    > #o_scroll {
 
         .o_panel_header {
             display: flex;
             align-items: center;
             justify-content: center;
             padding: 3%;
-            color: $o-wysiwyg-color;
+            color: inherit;
             margin-bottom: 3%;
 
             i {
@@ -149,24 +148,130 @@ body.editor_enable.editor_has_snippets {
                     }
                 }
 
-                &:nth-child(2n+1) {
+                &:nth-child(2n + 1) {
                     clear: left;
                 }
             }
         }
     }
 
-    &.o_loaded {
-        left: 0 !important;
+    > .o_we_customize_panel {
+
+        we-button, we-toggler {
+            cursor: pointer;
+            @include o-text-overflow(inline-block);
+            padding: 0.25rem 0.5rem;
+            margin: 0;
+            background-color: var(--o-we-bg-color-dark);
+            color: var(--o-we-color);
+            line-height: 1.5;
+            font-weight: 500;
+            white-space: nowrap;
+        }
+
+        %we-icon-button {
+            position: relative;
+
+            &::after {
+                position: absolute;
+                width: 1em;
+                right: 0.5em;
+                text-align: center;
+                font-family: FontAwesome;
+            }
+        }
+
+        @mixin we-icon-button($icon, $color: null) {
+            @extend %we-icon-button;
+            padding-right: 0.5em + 1em + 0.5em;
+
+            &::after {
+                content: $icon;
+                color: $color;
+            }
+        }
+
+        we-customizeblock-options {
+            display: block;
+            color: var(--o-we-snippets-color);
+            margin-top: 0.5rem;
+
+            > we-title {
+                display: flex;
+                align-items: center;
+                margin: 0.25rem 0;
+                padding: 0 0.5rem;
+                font-weight: bold;
+                color: inherit !important;
+
+                > we-button-group {
+                    flex: 0 0 auto;
+                    display: block;
+                    margin-left: auto;
+                    text-align: center;
+
+                    > we-button {
+                        margin-left: 0.25rem;
+                        width: 1.5rem;
+                        padding: 0.125rem;
+                    }
+                }
+            }
+        }
+
+        we-customizeblock-option {
+            position: relative;
+            display: block;
+
+            > * {
+                display: block;
+                margin-top: 0.25rem;
+            }
+
+            we-button, we-toggler {
+                display: block;
+                text-align: left;
+                border-radius: 0;
+            }
+            we-button {
+                &.active {
+                    @include we-icon-button('\f00c', $o-we-color-success);
+                }
+            }
+            we-collapse {
+                position: relative;
+                display: block;
+                max-height: 0;
+                overflow: hidden;
+                transition: max-height 200ms ease 0s;
+            }
+            we-toggler {
+                @include we-icon-button('\f104');
+
+                &.active {
+                    @include we-icon-button('\f107');
+
+                    + we-collapse {
+                        max-height: 500px;
+                    }
+                }
+            }
+
+            .dropdown-menu {
+                // FIXME temporary fix for m2o option for example
+                position: static !important;
+            }
+        }
     }
 }
 
 .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: 100px;
-    background-color: $o-wysiwyg-bg-color;
-    z-index: $o-wysiwyg-zindex;
+    background-color: var(--o-we-snippets-bg-color);
+    color: var(--o-we-snippets-color);
 
     > :not(.oe_snippet_thumbnail) {
         display: none !important;
@@ -178,7 +283,7 @@ body.editor_enable.editor_has_snippets {
         .oe_snippet_thumbnail_img {
             width: 100%;
             height: 0;
-            border: 1px solid $o-wysiwyg-border-color;
+            border: $o-we-border-width solid $o-we-border-color;
             padding-bottom: 75%;
             background-size: cover;
             background-position: center center;
@@ -193,16 +298,14 @@ body.editor_enable.editor_has_snippets {
 
         .oe_snippet_thumbnail_title {
             display: block;
-            border: 1px solid $o-wysiwyg-bg-color;
             padding: 5px;
             font-size: 12px;
             font-weight: 300;
             text-shadow: none;
-            color: $o-wysiwyg-color;
         }
 
         &:hover .oe_snippet_thumbnail_title {
-            color: $o-wysiwyg-color-light;
+            color: var(--o-we-color-accent);
         }
     }
 }
@@ -212,66 +315,59 @@ body.editor_enable.editor_has_snippets {
     .o_colorpicker_sections {
         font-size: 14px;
 
-        .o_colorpicker_section_tabs {
-            width: 225px;
-            height: 100%;
-        }
-
         button {
             float: left;
-            height: 25px;
-            width: 25px;
-            margin: 1px 1px 0 2px;
-            border: 1px solid black;
+            width: percentage(1 / 8);
+            padding-top: percentage(1 / 8);
+            margin: 0;
+            border: none;
+            box-shadow: inset 0 0 0 1px var(--o-we-snippets-bg-color);
         }
 
-        div[data-group="transparent_grayscale"] button {
-            @include o-alpha-button-preview;
+        .o_colorpicker_section {
 
-            &.o_small {
-                width: 23px;
-                height: 23px;
-                margin: 2px;
-                border-radius: 50%;
-            }
-
-            &:hover,
-            &.selected {
-                box-shadow: 0px 0px 2px 2px $o-wysiwyg-color;
+            > :first-child {
+                margin: 8px 0 4px;
             }
+            button {
+                position: relative;
 
-            &.selected:before {
-                content: "\f00c";
-                font-family: "FontAwesome";
-                padding-top: 1px;
-                color: theme-color('success');
-            }
+                &.o_small {
+                    border-radius: 50%;
+                }
 
-            &[data-event="foreColor"] {
-                background-color: $o-wysiwyg-bg-color;
+                &:hover,
+                &.selected {
+                    box-shadow: inset 0 0 1px 1px var(--o-we-snippets-bg-color);
+                }
 
-                &:before {
-                    background-color: rgba(white, 0.3);
+                &.selected::before {
+                    @include o-position-absolute(0, 0, 0, 0);
+                    content: "\f00c" !important;
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                    font-family: FontAwesome !important;
+                    color: $o-we-color-success;
                 }
-            }
 
-            &.o_btn_transparent::before {
-                background-color: transparent;
+                &.o_btn_transparent::before {
+                    background-color: transparent;
+                }
             }
-        }
 
-        .note-color-palette>div {
-            clear: both;
-        }
+            &[data-name="transparent_grayscale"] button {
+                @include o-alpha-button-preview;
 
-        .note-color-row {
-            height: 28px;
+                &::before, &::after {
+                    box-shadow: inherit;
+                }
+            }
         }
     }
 
     .note-palette-title {
-        padding: 10px 0px 10px 10px;
-        color: $o-wysiwyg-color-light;
+        padding: 10px 0 10px 10px;
         font-weight: bold;
     }
 
@@ -282,14 +378,14 @@ body.editor_enable.editor_has_snippets {
 
         .note-color-reset {
             font-size: 20px !important;
-            color: desaturate(rgba($o-wysiwyg-color-danger, 0.6), 40%);
+            color: desaturate(rgba($o-we-color-danger, 0.6), 40%);
             margin: 1px 0 0;
             padding: 0;
             cursor: pointer;
 
             &:hover {
                 background: transparent !important;
-                color: $o-wysiwyg-color-danger;
+                color: $o-we-color-danger;
             }
         }
     }
@@ -298,50 +394,26 @@ body.editor_enable.editor_has_snippets {
 // DROPZONES
 @keyframes dropZoneInsert {
     to {
-        background-color: rgba($o-brand-odoo, 0.2);
+        background-color: rgba($o-brand-odoo, 0.3);
     }
 }
 
-.note-editable .oe_drop_zone {
-    background-color: rgba($o-brand-odoo, 0.05);
+.oe_drop_zone {
+    background-color: rgba($o-brand-odoo, 0.15);
     animation: dropZoneInsert 1s linear 0s infinite alternate;
 
     &.oe_insert {
-        z-index: $o-wysiwyg-zindex - 1;
-
-        border: 2px dashed $o-wysiwyg-border-color;
-        border-top: none;
-        border-bottom: none;
-
         position: relative;
+        z-index: $o-we-overlay-zindex;
         width: 100%;
-        height: $o-wysiwyg-dropzone-size;
-        margin: (-$o-wysiwyg-dropzone-size/2) 0;
-
-        &:after {
-            content: "";
-            display: block;
-            width: 100%;
-            height: 50%;
-            border-bottom: 2px dashed $o-wysiwyg-border-color;
-            box-sizing: content-box;
-        }
+        height: $o-we-dropzone-size;
+        margin: (-$o-we-dropzone-size/2) 0;
+        border: 2px dashed $o-we-border-color;
 
         &.oe_vertical {
-            border: 2px dashed $o-brand-odoo;
-            border-left: none;
-            border-right: none;
-
-            width: $o-wysiwyg-dropzone-size;
+            width: $o-we-dropzone-size;
             float: left;
-            margin: 0 (-$o-wysiwyg-dropzone-size/2);
-
-            &:after {
-                width: 50%;
-                height: 100%;
-                border-bottom: none;
-                border-right: 2px dashed $o-wysiwyg-border-color;
-            }
+            margin: 0 (-$o-we-dropzone-size/2);
         }
     }
 }
@@ -349,13 +421,14 @@ body.editor_enable.editor_has_snippets {
 // MANIPULATORS
 #oe_manipulators {
     position: relative;
-    z-index: 1;
+    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;
@@ -363,301 +436,94 @@ body.editor_enable.editor_has_snippets {
         &.o_keypress {
             opacity: 0;
         }
-
         &.oe_active {
             display: block;
-        }
-
-        // OVERLAY OPTIONS
-        >.oe_overlay_options {
-            font-family: $o-wysiwyg-font-family;
-            @include o-position-absolute($bottom: 0, $left: 0);
-            width: 250px; // the parent oe_overlay has a width equal to the snippet width, the 250px is there to force the options to stay on one line without overriding bootstrap .btn-group
-            text-align: left;
-            z-index: $o-wysiwyg-zindex + 1;
-
-            >.btn-group {
-                white-space: nowrap;
-                border: 0;
-
-                .btn {
-                    display: inline-block;
-                    width: $o-wysiwyg-overlay-option-size;
-                    height: $o-wysiwyg-overlay-option-size;
-                    padding: 0;
-                    border: 1px solid $o-wysiwyg-bg-color;
-                    line-height: $o-wysiwyg-overlay-option-size;
-                    font-size: 11px;
-                    border-radius: 0;
-                    font-weight: normal;
-
-                    transition: all 400ms ease 0s;
-                    color: $o-wysiwyg-color;
-                    background-color: $o-wysiwyg-bg-color;
-
-                    &:hover {
-                        color: $o-wysiwyg-color-light;
-                        background-color: lighten($o-wysiwyg-bg-color, 10%);
-                    }
-
-                    &.oe_snippet_remove {
-                        color: $o-wysiwyg-color;
-                        background-color: $o-wysiwyg-color-danger;
-                        border-color: darken($o-wysiwyg-color-danger, 20%);
-
-                        >.fa {
-                            color: $o-wysiwyg-color;
-                        }
-
-                        &:hover {
-                            background-color: darken($o-wysiwyg-color-danger, 20%);
-                        }
-                    }
-
-                    &.oe_snippet_parent>i {
-                        transform: scaleX(-1);
-                        font-size: 12px;
-                    }
-
-                    >.fa {
-                        color: $o-wysiwyg-color;
-                        line-height: inherit;
-                        vertical-align: top;
-                    }
-                }
-
-                // CUSTOMIZE MENU BUTTON
-                >.oe_options {
-                    .btn {
-                        width: auto;
-                        padding: 0 25px 0 5px;
-                        background-color: $o-wysiwyg-bg-color;
-                        text-transform: uppercase;
-
-                        &:hover,
-                        &:active,
-                        &:focus {
-                            background-color: lighten($o-wysiwyg-bg-color, 5%);
-                            border-color: lighten($o-wysiwyg-bg-color, 10%);
-                        }
-
-                        &:before,
-                        &:after {
-                            content: "";
-                            width: 7px;
-                            height: 2px;
-                            background-color: $o-wysiwyg-color-light;
-                            @include o-position-absolute(46%);
-                            transition: all 0.3s ease 0s;
-                        }
-
-                        &:before {
-                            right: 9px;
-                            transform: rotate(45deg);
-                        }
-
-                        &:after {
-                            right: 5px;
-                            transform: rotate(-45deg);
-                        }
-                    }
-
-                    // Open menu
-                    &.show .btn {
-
-                        &:active,
-                        &:focus,
-                        &:active:focus {
-                            box-shadow: none;
-                        }
-
-                        &:before,
-                        &:after {
-                            width: 9px;
-                        }
-
-                        &:before {
-                            right: 10px;
-                            transform: translateX(5px) rotate(-45deg);
-                        }
-
-                        &:after {
-                            transform: rotate(45deg);
-                        }
-                    }
-
-                    // CUSTOMIZE MENU
-                    .dropdown-menu {
-                        margin: -1px 0 0 0;
-                        padding: 0;
-                        border: 1px solid $o-wysiwyg-bg-color;
-                        border-radius: 0;
-                        background-color: $o-wysiwyg-bg-color;
-
-                        .dropdown-item {
-                            position: relative;
-                            color: $o-wysiwyg-color-light;
-                            font-weight: normal;
-                            font-size: 12px;
-                            padding: 5px 40px 5px 10px;
-
-                            &:hover {
-                                background: transparent;
-                                cursor: pointer;
-                            }
-
-                            &.active {
-                                &:before {
-                                    @include o-position-absolute($top: 5px, $right: 5px);
-                                    content: "\f00c";
-                                    font-family: "FontAwesome";
-                                    color: $o-brand-primary;
-                                }
-                            }
-
-                            >i {
-                                width: 15px;
-                                margin-right: 10px;
-                                text-align: center;
-                            }
-                        }
-
-                        .dropdown-submenu {
-                            position: relative;
-
-                            &::before {
-                                @include o-position-absolute($top: 12px, $right: 10px);
-                                @include o-caret-right(4px);
-                                border-left-color: $o-wysiwyg-color-light;
-                            }
-
-                            &:hover>.dropdown-menu {
-                                display: block;
-                                left: 100%;
-                                top: 0;
-
-                                &.o_open_to_left {
-                                    left: auto;
-                                    right: 100%;
-                                }
-                            }
-                        }
-
-                        .dropdown-divider {
-                            display: block;
-                            height: 1px;
-                            border-top: 1px solid #666;
-                            margin: 0;
-                        }
-
-                        .dropdown-header {
-                            color: $o-wysiwyg-color-light;
-                            font-size: 11px;
-                            margin-top: 2px;
-                            text-transform: uppercase;
-
-                            &:hover {
-                                background-color: initial;
-                            }
-
-                            &.o_main_header {
-                                padding-left: 10px;
-                            }
-
-                            &.o_parent_editor_header {
-                                position: relative;
-                                color: $o-wysiwyg-color-light;
-                                font-weight: 400;
-                                font-size: 10px;
-                                margin: 10px 0 0 10px;
-                                text-transform: uppercase;
-                                padding-bottom: .25em;
-
-                                &::before {
-                                    content: "\f148";
-                                    @include o-position-absolute($top: 5px, $left: 4px);
-                                    font-family: FontAwesome;
-                                    transform: scaleX(-1);
-                                }
-
-                                ~.dropdown-submenu .dropdown-item,
-                                ~.dropdown-item {
-                                    font-size: 11px;
-                                    opacity: 0.7;
-
-                                    &:hover {
-                                        opacity: 1;
-                                    }
-                                }
-
-                                ~.dropdown-submenu::before {
-                                    @include o-position-absolute($top: 10px, $right: 10px);
-                                }
-                            }
-                        }
-                    }
-                }
-            }
-        }
-
-        &.o_top_cover>.oe_overlay_options {
-            bottom: auto;
-            top: 1px;
-            right: 1px;
+            z-index: 1;
         }
 
         // HANDLES
-        >.o_handles {
-            @include o-position-absolute(-$o-wysiwyg-handles-offset-to-hide, 0, auto, 0);
-            z-index: $o-wysiwyg-zindex;
+        > .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-wysiwyg-handles-accent-color, 0.05);
+            &:hover > .o_handle {
+                background-color: rgba($o-we-handles-accent-color, 0.05);
             }
-
-            >.o_handle {
-
+            > .o_handle {
                 position: relative;
-                border: 0 solid $o-wysiwyg-handles-accent-color;
+                border: 0 solid transparent;
+                border-color: inherit;
                 transition: background 300ms ease 0s;
 
-                &:hover,
-                &.o_active {
-                    background-color: rgba($o-wysiwyg-handles-accent-color, 0.2);
+                &.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;
 
-                    &:before {
-                        content: '';
-                        @include o-position-absolute(0, $left: 50%);
-                        width: 1px;
-                        height: 100%;
-                        margin-left: -1px;
-                        background-color: rgba($o-wysiwyg-handles-accent-color, 0.5);
+                    &: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;
 
-                    &.w:before {
-                        @include o-position-absolute(50%, $left: 0);
-                        width: 100%;
-                        height: 1px;
+                    &: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 {
-                        border-color: darken($o-wysiwyg-handles-accent-color, 10%);
-                        background-color: darken($o-wysiwyg-handles-accent-color, 20%);
+                        @include o-position-absolute($left: 50%, $bottom: 40%);
+                        margin-left: -$o-we-handles-btn-size/2;
                     }
                 }
 
-                &:after {
+                &::after {
+                    z-index: 1;
                     display: block;
-                    width: $o-wysiwyg-handles-btn-size;
-                    height: $o-wysiwyg-handles-btn-size;
-                    border: solid 1px darken($o-wysiwyg-handles-accent-color, 10%);
-                    line-height: $o-wysiwyg-handles-btn-size - 2;
+                    width: $o-we-handles-btn-size;
+                    height: $o-we-handles-btn-size;
+                    border: solid 1px darken($o-we-handles-accent-color, 10%);
+                    line-height: $o-we-handles-btn-size - 2;
                     font-size: 14px;
                     font-family: FontAwesome;
-                    background-color: darken($o-wysiwyg-handles-accent-color, 20%);
+                    background-color: darken($o-we-handles-accent-color, 20%);
                     color: white;
                 }
 
+                &: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";
@@ -694,64 +560,103 @@ body.editor_enable.editor_has_snippets {
                     }
                 }
 
-                &.w {
-                    @include o-position-absolute($o-wysiwyg-handles-offset-to-hide, auto, -$o-wysiwyg-handles-offset-to-hide, 0);
-                    width: $o-wysiwyg-handle-edge-size;
-                    border-width: $o-wysiwyg-handle-border-width;
-                    border-right-width: 0;
-                    cursor: e-resize;
+                &.readonly {
+                    cursor: auto !important;
 
                     &:after {
-                        @include o-position-absolute($top: 50%, $left: 40%);
-                        margin-top: -$o-wysiwyg-handles-btn-size/2;
+                        display: none !important;
+                    }
+
+                    &:hover {
+                        opacity: 0.5;
                     }
                 }
+            }
 
-                &.e {
-                    @include o-position-absolute($o-wysiwyg-handles-offset-to-hide, 0, -$o-wysiwyg-handles-offset-to-hide, auto);
-                    width: $o-wysiwyg-handle-edge-size;
-                    border-right-width: $o-wysiwyg-handle-border-width;
-                    cursor: w-resize;
+            > .o_move_handle {
+                @include o-position-absolute($o-we-handles-offset-to-hide, $left: 50%);
+                transform: translate(-50%, -110%);
+                padding: 2px 4px;
+                border: 1px solid $o-we-color-text-normal;
+                border-radius: 20%;
+                color: $o-we-color-text-normal;
+                opacity: 0.5;
+                transition: opacity 400ms ease 0;
+                cursor: pointer;
+                cursor: move;
 
-                    &:after {
-                        @include o-position-absolute($top: 50%, $right: 40%);
-                        margin-top: -$o-wysiwyg-handles-btn-size/2;
-                    }
+                &::before, &::after {
+                    content: '\f141';
+                    display: block;
+                    font-family: FontAwesome;
+                    font-size: 0.8em;
+                    line-height: 0.35em;
                 }
 
-                &.n {
-                    @include o-position-absolute($o-wysiwyg-handles-offset-to-hide, 0, auto, 0);
-                    border-top-width: $o-wysiwyg-handle-border-width;
-                    cursor: ns-resize;
+                &:hover {
+                    opacity: 1;
+                }
+            }
+        }
 
-                    &:after {
-                        @include o-position-absolute($left: 50%, $top: 40%);
-                        margin-left: -$o-wysiwyg-handles-btn-size/2;
+        &.o_we_overlay_preview {
+            border-color: $o-we-handles-accent-color-preview;
+
+            > .o_handles {
+
+                > .o_handle {
+                    border-style: dashed;
+                    background-color: transparent !important;
+
+                    &::before {
+                        content: '';
+                        @include o-position-absolute(0, 0, 0, 0);
+                        z-index: -1;
+                        display: block;
+                        border-width: inherit;
+                        border-style: solid;
+                        border-color: white;
+                    }
+                    &::after {
+                        display: none;
                     }
-                }
 
-                &.s {
-                    @include o-position-absolute(auto, 0, -$o-wysiwyg-handles-offset-to-hide, 0);
-                    border-bottom-width: $o-wysiwyg-handle-border-width;
-                    cursor: ns-resize;
+                    &.w {
+                        border-width: $o-we-handle-border-width-preview;
+                        border-right-width: 0;
 
-                    &:after {
-                        @include o-position-absolute($left: 50%, $bottom: 40%);
-                        margin-left: -$o-wysiwyg-handles-btn-size/2;
+                        &::before {
+                            top: -$o-we-handle-border-width-preview;
+                            bottom: -$o-we-handle-border-width-preview;
+                            left: -$o-we-handle-border-width-preview;
+                        }
                     }
-                }
+                    &.e {
+                        border-right-width: $o-we-handle-border-width-preview;
 
-                &.readonly {
-                    cursor: auto !important;
+                        &::before {
+                            right: -$o-we-handle-border-width-preview;
+                        }
+                    }
+                    &.n {
+                        border-top-width: $o-we-handle-border-width-preview;
 
-                    &:after {
-                        display: none !important;
+                        &::before {
+                            top: -$o-we-handle-border-width-preview;
+                        }
                     }
+                    &.s {
+                        border-bottom-width: $o-we-handle-border-width-preview;
 
-                    &:hover {
-                        opacity: 0.5;
+                        &::before {
+                            bottom: -$o-we-handle-border-width-preview;
+                        }
                     }
                 }
+
+                > .o_move_handle {
+                    display: none;
+                }
             }
         }
     }
diff --git a/addons/web_editor/static/src/scss/wysiwyg_variables.scss b/addons/web_editor/static/src/scss/wysiwyg_variables.scss
deleted file mode 100644
index 2beafe71681..00000000000
--- a/addons/web_editor/static/src/scss/wysiwyg_variables.scss
+++ /dev/null
@@ -1,42 +0,0 @@
-// Mixins for buttons with alpha bg-color
-@mixin o-alpha-button-preview {
-    position: relative;
-    z-index: 1;
-
-    // Place an overlay that inherit the button's bg-color.
-    &::before {
-        content: "";
-        @include o-position-absolute(0, 0, 0, 0);
-        background-color: inherit;
-    }
-
-    &::after {
-        content: "";
-        @include o-position-absolute(0, 0, 0, 0);
-        z-index: -1;
-        background-image: url('/web_editor/static/src/img/transparent.png');
-        background-size: 10px auto;
-    }
-}
-
-$o-wysiwyg-zindex: 1000;
-
-$o-wysiwyg-md-ease: cubic-bezier(0.19, 1, 0.22, 1) !default;
-
-$o-wysiwyg-font-family: Roboto,
-"Montserrat",
-"Segoe UI",
-"Helvetica Neue",
-Helvetica,
-Arial,
-sans-serif;
-
-$o-wysiwyg-toolbar-height: 32px;
-
-$o-wysiwyg-color: #212629 !default;
-$o-wysiwyg-color-light: #616669 !default;
-$o-wysiwyg-color-danger: #912629 !default;
-$o-wysiwyg-color-success: #219629 !default;
-$o-wysiwyg-bg-color: #f7f7f7 !default;
-$o-wysiwyg-bg-color-dark: #a7a7a7 !default;
-$o-wysiwyg-border-color: #a9a9a9 !default;