[MERGE] *: migrate Bootstrap 3.3.7 to 4.1.3

See sub-commits for details.

task-49280
Closes https://github.com/odoo/odoo/pull/25045

4 files changed, 235 insertions, 267 deletions

diff --git a/addons/web_editor/static/src/scss/web_editor.common.bootstrap.scss b/addons/web_editor/static/src/scss/web_editor.common.bootstrap.scss
new file mode 100644
index 00000000000..b7ad30b1bc4
--- /dev/null
+++ b/addons/web_editor/static/src/scss/web_editor.common.bootstrap.scss
@@ -0,0 +1,28 @@
+
+// Automatically extend bootstrap to create theme background/text/button classes
+$theme-colors: () !default;
+$theme-colors: map-merge((
+    'alpha': $color-alpha,
+    'beta': $color-beta,
+    'gamma': $color-gamma,
+    'delta': $color-delta,
+    'epsilon': $color-epsilon,
+), $theme-colors);
+
+// Extend grays with transparent ones (for some reason, BS4 create black-50 and
+// white-50 but does not allow overridding that with variables). Also add black
+// and white ones too as they were also not added by BS4...
+$grays: () !default;
+$grays: map-merge((
+    'black-25': $color-black-25,
+    'black-50': $color-black-50,
+    'black-75': $color-black-75,
+    'white-25': $color-white-25,
+    'white-50': $color-white-50,
+    'white-75': $color-white-75,
+
+    // Note: those two needs to be redefined before bootstrap, otherwise they
+    // do not exist yet
+    'black': $black,
+    'white': $white,
+), $grays);
diff --git a/addons/web_editor/static/src/scss/web_editor.common.scss b/addons/web_editor/static/src/scss/web_editor.common.scss
index ed125d62c1c..11fa94cd010 100644
--- a/addons/web_editor/static/src/scss/web_editor.common.scss
+++ b/addons/web_editor/static/src/scss/web_editor.common.scss
@@ -32,7 +32,7 @@ html, body {
             min-width: 20px;
         }
     }
-    @media (max-width: $screen-xs-max) {
+    @include media-breakpoint-down(sm) {
         .table-responsive > table.table {
             table-layout: auto;
         }
@@ -71,7 +71,7 @@ img.padding-xl, .img.padding-xl, span.fa.padding-xl, iframe.padding-xl {
 .fa-10x {
     font-size: 10em;
 }
-.fa.center-block {
+.fa.d-block.mx-auto {
     text-align: center;
 }
 
@@ -121,12 +121,8 @@ html[data-browser^="msie"] div.media_iframe_video iframe {
     margin-left: 0;
 }
 
-@media (max-width: $screen-xs-max) {
+@include media-breakpoint-down(sm) {
     img:not(.cke_iframe), .media_iframe_video, span.fa, i.fa {
-        -webkit-transform: none !important;
-        -moz-transform: none !important;
-        -ms-transform: none !important;
-        -o-transform: none !important;
         transform: none !important;
     }
 }
@@ -233,40 +229,8 @@ a.o_underline {
     }
 }
 
-// Create classes for theme colors...
-@include o-create-color-classes(alpha, $color-alpha);
-@include o-create-color-classes(beta, $color-beta);
-@include o-create-color-classes(gamma, $color-gamma);
-@include o-create-color-classes(delta, $color-delta);
-@include o-create-color-classes(epsilon, $color-epsilon);
-
-// ... and button classes
-@include o-create-color-btn-classes(alpha, $color-alpha);
-@include o-create-color-btn-classes(beta, $color-beta);
-@include o-create-color-btn-classes(gamma, $color-gamma);
-@include o-create-color-btn-classes(delta, $color-delta);
-@include o-create-color-btn-classes(epsilon, $color-epsilon);
-
-// Create classes for UI colors
-@include o-create-color-classes(primary, $brand-primary);
-@include o-create-color-classes(success, $state-success-bg, $content-color: $state-success-text);
-@include o-create-color-classes(info, $state-info-bg, $content-color: $state-info-text);
-@include o-create-color-classes(warning, $state-warning-bg, $content-color: $state-warning-text);
-@include o-create-color-classes(danger, $state-danger-bg, $content-color: $state-danger-text);
-
-// Create classes for greyscale colors
-@include o-create-color-classes('black', $gray-base);
-@include o-create-color-classes('gray-darker', $gray-darker);
-@include o-create-color-classes('gray-dark', $gray-dark);
-@include o-create-color-classes('gray', $gray);
-@include o-create-color-classes('gray-light', $gray-light);
-@include o-create-color-classes('gray-lighter', $gray-lighter);
-@include o-create-color-classes('white', $gray-white);
-
-// Create classes for greyscale transparent colours
-@include o-create-color-classes('black-25', $color-black-25);
-@include o-create-color-classes('black-50', $color-black-50);
-@include o-create-color-classes('black-75', $color-black-75);
-@include o-create-color-classes('white-25', $color-white-25);
-@include o-create-color-classes('white-50', $color-white-50);
-@include o-create-color-classes('white-75', $color-white-75);
+// Extend bootstrap to create background and text utilities for gray colors too
+@each $color, $value in $grays {
+    @include bg-variant(".bg-#{$color}", $value);
+    @include text-emphasis-variant(".text-#{$color}", $value);
+}
diff --git a/addons/web_editor/static/src/scss/web_editor.ui.scss b/addons/web_editor/static/src/scss/web_editor.ui.scss
index 179f814c4b3..eee93913dc2 100644
--- a/addons/web_editor/static/src/scss/web_editor.ui.scss
+++ b/addons/web_editor/static/src/scss/web_editor.ui.scss
@@ -22,7 +22,7 @@
     z-index: $zindex-modal - 9;
 
     background-color: rgba(0,0,0,0);
-    @include o-transition(background-color, 400ms, $o-we-md-ease);
+    transition: background-color 400ms $o-we-md-ease 0s;
     font-family: $o-we-font-family;
 
     form.navbar-form {
@@ -31,7 +31,7 @@
         margin: 0;
         padding: 0;
         @include o-position-absolute($right: -$o-we-sidebar-width);
-        @include o-transition(right, 0.4s, $o-we-md-ease);
+        transition: right 0.4s $o-we-md-ease 0s;
         border-left: 1px solid $o-we-color-divider;
         background-color: inherit;
 
@@ -47,7 +47,7 @@
             font-size: 13px;
             font-family: $o-we-font-family;
 
-            @include o-transition(all, 0.3s);
+            transition: all 0.3s ease 0s;
             border: none;
             border-radius: 0;
 
@@ -59,10 +59,10 @@
             }
 
             &.btn-primary {
-                @include button-variant(white, $o-brand-primary, $o-brand-primary);
+                @include button-variant($o-brand-odoo, $o-brand-odoo);
             }
-            &.btn-default {
-                @include button-variant(white, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
+            &.btn-secondary {
+                @include button-variant(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
 
                 &:hover {
                     background: rgba(black, 0.5);
@@ -100,8 +100,8 @@ html[lang] > body.editor_enable [data-oe-translation-state] {
 #oe_snippets {
     @include o-w-preserve-btn;
 
-    @include o-flex-display;
-    @include o-flex-flow(column, nowrap);
+    display: flex;
+    flex-flow: column nowrap;
     @include o-position-absolute(0, auto, 0, -$o-we-sidebar-width);
     position: fixed;
     width: $o-we-sidebar-width;
@@ -109,12 +109,12 @@ html[lang] > body.editor_enable [data-oe-translation-state] {
 
     font-family: Roboto, $font-family-sans-serif;
     border-right: 1px solid $o-we-color-divider;
-    @include o-transition(left, 400ms, $o-we-md-ease);
-    @include o-linear-gradient(45deg, $o-we-color-normal, darken($o-we-color-normal, 10%));
+    transition: left 400ms $o-we-md-ease 0s;
+    background-image: linear-gradient(45deg, $o-we-color-normal, darken($o-we-color-normal, 10%));
     box-shadow: 0px 10px 10px -10px black inset;
 
     #snippets_menu {
-        @include o-flex(0, 0, auto);
+        flex: 0 0 auto;
         height: $o-navbar-height;
         line-height: $o-navbar-height;
         margin: 0;
@@ -133,9 +133,9 @@ html[lang] > body.editor_enable [data-oe-translation-state] {
 
         .o_panel_header {
             color: #999999;
-            @include o-flex-display;
-            @include o-align-items(center);
-            @include o-justify-content(center);
+            display: flex;
+            align-items: center;
+            justify-content: center;
             padding: 3%;
             color: white;
             margin-bottom: 3%;
@@ -157,7 +157,7 @@ html[lang] > body.editor_enable [data-oe-translation-state] {
                 margin: 0 0 6% 3%;
                 box-shadow: none;
                 background-color: transparent;
-                @include user-select(none);
+                user-select: none;
 
                 cursor: pointer;
                 cursor: copy;
@@ -173,8 +173,8 @@ html[lang] > body.editor_enable [data-oe-translation-state] {
                     }
 
                     &:hover .oe_snippet_thumbnail_img {
-                        @include o-transition(transform, 200ms, ease);
-                        @include scale(1.05);
+                        transition: transform 200ms ease 0s;
+                        transform: scale(1.05);
                     }
                 }
 
@@ -251,12 +251,12 @@ html[lang] > body.editor_enable [data-oe-translation-state] {
 // DROPZONES
 @keyframes dropZoneInsert {
     to {
-        background-color: rgba($o-brand-primary, 0.2);
+        background-color: rgba($o-brand-odoo, 0.2);
     }
 }
 #wrapwrap .oe_drop_zone {
-    background-color: rgba($o-brand-primary, 0.05);
-    @include o-animation(dropZoneInsert, 1s, linear, 0s, infinite, alternate);
+    background-color: rgba($o-brand-odoo, 0.05);
+    animation: dropZoneInsert 1s linear 0s infinite alternate;
 
     &.oe_insert {
         z-index: 999;
@@ -270,7 +270,7 @@ html[lang] > body.editor_enable [data-oe-translation-state] {
         height: $o-we-dropzone-size;
         margin: (-$o-we-dropzone-size/2) 0;
 
-        @include o-transition(margin, 400ms, linear);
+        transition: margin 400ms linear 0s;
 
         &:after {
             content: "";
@@ -282,7 +282,7 @@ html[lang] > body.editor_enable [data-oe-translation-state] {
         }
 
         &.oe_vertical {
-            border: 2px dashed $o-brand-primary;
+            border: 2px dashed $o-brand-odoo;
             border-left: none;
             border-right: none;
 
@@ -312,7 +312,7 @@ html[lang] > body.editor_enable [data-oe-translation-state] {
         height: 0;
         background: transparent;
         text-align: center;
-        @include o-transition(opacity, 400ms, linear);
+        transition: opacity 400ms linear 0s;
         &.o_keypress {
             opacity: 0;
         }
@@ -341,7 +341,7 @@ html[lang] > body.editor_enable [data-oe-translation-state] {
                     border-radius: 0;
                     font-weight: normal;
 
-                    @include o-transition(all, 400ms);
+                    transition: all 400ms ease 0s;
                     color: $o-we-color-text-light;
                     background-color: $o-we-color-light;
                     &:hover {
@@ -367,7 +367,7 @@ html[lang] > body.editor_enable [data-oe-translation-state] {
                         }
                     }
                     &.oe_snippet_parent > i {
-                        @include scaleX(-1);
+                        transform: scaleX(-1);
                         font-size: 12px;
                     }
 
@@ -397,19 +397,19 @@ html[lang] > body.editor_enable [data-oe-translation-state] {
                             height: 2px;
                             background-color: $o-we-color-text-light;
                             @include o-position-absolute(46%);
-                            @include o-transition(all, 0.3s);
+                            transition: all 0.3s ease 0s;
                         }
                         &:before {
                             right: 9px;
-                            @include rotate(45deg);
+                            transform: rotate(45deg);
                         }
                         &:after {
                             right: 5px;
-                            @include rotate(-45deg);
+                            transform: rotate(-45deg);
                         }
                     }
                     // Open menu
-                    &.open .btn {
+                    &.show .btn {
                         background-color: $o-we-color-light;
                         &:before, &:after {
                             width: 9px;
@@ -419,7 +419,7 @@ html[lang] > body.editor_enable [data-oe-translation-state] {
                             transform: translateX(5px) rotate(-45deg);
                         }
                         &:after {
-                            @include rotate(45deg);
+                            transform: rotate(45deg);
                         }
                     }
 
@@ -430,99 +430,97 @@ html[lang] > body.editor_enable [data-oe-translation-state] {
                         border: 1px solid $o-we-color-dark;
                         border-radius: 0;
                         background-color: $o-we-color-light;
-                        a {
+
+                        .dropdown-item {
+                            position: relative;
                             color: $o-we-color-text-light;
                             font-weight: normal;
                             font-size: 12px;
                             padding: 5px 35px 5px 20px;
-                        }
 
-                        > li {
-                            position: relative;
                             &:hover {
                                 background-color: fade-out($o-we-color-dark, 0.5);
-                                > a {
-                                    color: white;
-                                    background: transparent;
-                                    cursor: pointer;
-                                }
-                                > .dropdown-menu {
-                                    display: block;
-                                    left: 100%;
-                                    top: 0;
-
-                                    &.o_open_to_left {
-                                        left: auto;
-                                        right: 100%;
-                                    }
-                                }
-                            }
-                            &.dropdown-submenu:before {
-                                @include o-position-absolute($top: 10px, $right: 10px);
-                                @include o-caret-right(3px);
-                                border-left-color: $o-we-color-text-light;
-                            }
-                            &.divider {
-                                background-color: $o-we-color-divider;
-                                margin: 0 8px;
+                                color: white;
+                                background: transparent;
+                                cursor: pointer;
                             }
-                            &.active > a {
+                            &.active {
                                 color: white;
                                 background-color: fade-out($o-we-color-dark, 0.5);
                                 &:before {
                                     @include o-position-absolute($top: 5px, $left: 5px);
                                     content: "\f00c";
                                     font-family: "FontAwesome";
-                                    color: $o-brand-optional;
+                                    color: $o-brand-primary;
                                 }
                             }
-                            &.dropdown-header {
-                                color: white;
-                                font-weight: bold;
-                                font-size: 12px;
-                                margin-top: 2px;
 
-                                &:hover {
-                                    background-color: initial;
-                                }
+                            > i {
+                                width: 16px;
+                                margin-right: 8px;
+                            }
+                        }
 
-                                &.o_main_header {
-                                    padding-left: 8px;
-                                }
-                                &.o_parent_editor_header {
-                                    color: wheat;
-                                    font-weight: 400;
-                                    font-size: 10px;
-                                    margin: 7px 0 4px 4px;
-                                    &::before {
-                                        content: "\f148";
-                                        @include o-position-absolute($top: 2px, $left: 8px);
-                                        font-family: FontAwesome;
-                                        @include scaleX(-1);
-                                    }
-                                    ~ li:not(.dropdown-header) {
-                                        a {
-                                            font-size: 11px;
-                                            padding: 4px 35px 4px 20px;
-                                            opacity: 0.8;
-                                            &:hover {
-                                                opacity: 1;
-                                            }
-                                        }
-                                    }
-                                }
+                        .dropdown-submenu {
+                            position: relative;
+
+                            &::before {
+                                @include o-position-absolute($top: 10px, $right: 10px);
+                                @include o-caret-right(3px);
+                                border-left-color: $o-we-color-text-light;
                             }
 
-                            &.separator {
+                            &:hover > .dropdown-menu {
                                 display: block;
-                                margin: 4px 35px 4px 20px;
-                                height: 1px;
-                                background: rgba($o-we-color-text-light, 0.1);
+                                left: 100%;
+                                top: 0;
+
+                                &.o_open_to_left {
+                                    left: auto;
+                                    right: 100%;
+                                }
                             }
+                        }
 
-                            > a > i {
-                                width: 16px;
-                                margin-right: 8px;
+                        .dropdown-divider {
+                            display: block;
+                            height: 1px;
+                            background: rgba($o-we-color-text-light, 0.1);
+                            margin: 0 8px;
+                        }
+
+                        .dropdown-header {
+                            color: white;
+                            font-weight: bold;
+                            font-size: 12px;
+                            margin-top: 2px;
+
+                            &:hover {
+                                background-color: initial;
+                            }
+
+                            &.o_main_header {
+                                padding-left: 8px;
+                            }
+                            &.o_parent_editor_header {
+                                color: wheat;
+                                font-weight: 400;
+                                font-size: 10px;
+                                margin: 7px 0 4px 4px;
+                                &::before {
+                                    content: "\f148";
+                                    @include o-position-absolute($top: 2px, $left: 8px);
+                                    font-family: FontAwesome;
+                                    transform: scaleX(-1);
+                                }
+                                ~ .dropdown-item {
+                                    font-size: 11px;
+                                    padding: 4px 35px 4px 20px;
+                                    opacity: 0.8;
+                                    &:hover {
+                                        opacity: 1;
+                                    }
+                                }
                             }
                         }
                     }
@@ -548,7 +546,7 @@ html[lang] > body.editor_enable [data-oe-translation-state] {
 
                 position: relative;
                 border: 0 solid $o-we-handles-accent-color;
-                @include o-transition(background, 300ms);
+                transition: background 300ms ease 0s;
 
                 &:hover, &.o_active {
                     background-color: rgba($o-we-handles-accent-color, 0.2);
@@ -711,11 +709,11 @@ html[lang] > body.editor_enable [data-oe-translation-state] {
             height: $o-navbar-height;
             border: none;
             border-radius: 0;
-            padding: $padding-base-vertical $padding-base-horizontal; // force this because of themes
+            padding: $btn-padding-y $btn-padding-y; // force this because of themes
             background-color: $o-we-color-dark;
             color: $o-we-color-text-normal;
             border-top: 2px solid transparent;
-            @include o-transition(all, 0.3s);
+            transition: all 0.3s ease 0s;
 
             > .fa {
                 color: $o-we-color-text-normal;
@@ -749,7 +747,7 @@ html[lang] > body.editor_enable [data-oe-translation-state] {
         > .btn-group {
             margin-top: -2px;
 
-            &.open, .btn-group.open {
+            &.show, .btn-group.show {
                 .dropdown-toggle {
                     border-top: 2px solid white;
                     background-color: $o-we-color-darker;
@@ -767,7 +765,9 @@ html[lang] > body.editor_enable [data-oe-translation-state] {
             border-radius: 0;
             background-color: $o-we-color-darker;
             color: $o-we-color-text-normal;
-            > li > a {
+            white-space: normal;
+
+            .dropdown-item {
                 width: 100%;
                 color: $o-we-color-text-light;
 
@@ -831,7 +831,7 @@ html[lang] > body.editor_enable [data-oe-translation-state] {
 
 .note-popover .popover, .note-editor {
     .dropdown-menu {
-        > li > a {
+        .dropdown-item {
             > i {
                 visibility: hidden;
             }
@@ -910,14 +910,13 @@ table.colorpicker {
                     &:focus, &:active, &:focus:active {
                         outline: none;
                     }
-                }
-                &:hover, &.active {
-                    > a {
+                    &.active {
+                        background-color: $o-we-tab-active-bg!important;
                         color: white;
                     }
                 }
-                &.active > a {
-                    background-color: $o-we-tab-active-bg!important;
+                &:hover > a {
+                    color: white;
                 }
             }
         }
@@ -972,7 +971,7 @@ table.colorpicker {
             &.selected:after {
                 content: "\f00c";
                 font-family: "FontAwesome";
-                color: $brand-success;
+                color: theme-color('success');
             }
 
             &[data-event="foreColor"] {
@@ -1030,7 +1029,7 @@ body.editor_enable {
     }
 
     &.editor_has_snippets {
-        @include o-transition(padding-left, 400ms, $o-we-md-ease);
+        transition: padding-left 400ms $o-we-md-ease 0s;
         padding-left: $o-we-sidebar-width!important;
 
         #oe_snippets {
@@ -1069,11 +1068,11 @@ body.editor_enable {
 @keyframes fadeInDownSmall {
     0% {
         opacity: 0;
-        @include translate(0, -5px);
+        transform: translate(0, -5px);
     }
     100% {
         opacity: 1;
-        @include translate(0, 0);
+        transform: translate(0, 0);
     }
 }
 @keyframes fadeInOut {
@@ -1091,14 +1090,14 @@ body.editor_enable {
     }
 }
 @keyframes inputHighlighter {
-    from { background: $o-brand-optional; }
+    from { background: $o-brand-primary; }
     to   { width: 0; background: transparent; }
 }
 
 // INPUTS
 .o_switch {
-    @include o-flex-display;
-    @include o-align-items(center);
+    display: flex;
+    align-items: center;
     font-weight: normal;
     cursor: pointer;
 
@@ -1113,7 +1112,7 @@ body.editor_enable {
             width: $o-we-switch-size * 1.8;
             margin-right: 0.5em;
             display: inline-block;
-            @include transition(all 0.3s $o-we-md-ease);
+            transition: all 0.3s $o-we-md-ease;
 
             &:after {
                 content: "";
@@ -1124,14 +1123,14 @@ body.editor_enable {
                 margin-top: 0.1ex;
                 margin-left: 0.1ex;
                 border-radius: 100rem;
-                @include transition(all 0.3s $o-we-md-ease);
+                transition: all 0.3s $o-we-md-ease;
                 box-shadow: 0 1px 1px darken($o-we-switch-inactive-color,35%), inset 0 0 0 1px lighten($o-we-switch-inactive-color,10%);
             }
         }
 
         &:checked + span {
             box-shadow: none;
-            @include o-linear-gradient(0deg, $o-we-color-success, darken($o-we-color-success, 10%));
+            background-image: linear-gradient(0deg, $o-we-color-success, darken($o-we-color-success, 10%));
 
             &:after {
                 margin-left: ($o-we-switch-size*1.8 - $o-we-switch-size) + 0.1;
@@ -1142,7 +1141,7 @@ body.editor_enable {
         > input {
             &:not(:checked) + span {
                 box-shadow: none;
-                @include o-linear-gradient(0deg, lighten($brand-danger, 5%), darken($brand-danger, 5%));
+                background-image: linear-gradient(0deg, lighten(theme-color('danger'), 5%), darken(theme-color('danger'), 5%));
             }
         }
     }
@@ -1174,7 +1173,7 @@ body.editor_enable {
         font-weight: normal;
         @include o-position-absolute($top: 10px, $left: 5px);
         pointer-events: none;
-        @include transition(0.2s ease all);
+        transition: 0.2s ease all;
     }
 
     /* active state */
@@ -1193,7 +1192,7 @@ body.editor_enable {
         bottom: 1px;
         @include o-position-absolute;
         background: #5264AE;
-        @include transition(0.2s ease all);
+        transition: 0.2s ease all;
     }
     .bar:before {
         left: 50%;
@@ -1218,28 +1217,28 @@ body.editor_enable {
 
     /* active state */
     input:focus ~ .highlight {
-        @include animation(inputHighlighter 0.3s ease);
+        animation: inputHighlighter 0.3s ease;
     }
 }
 
 // DRAG&DROP ANIMATIONS
 .oe_snippet_body {
     opacity: 0;
-    @include o-animation(fadeInDownSmall, 700ms, $fill-mode: forwards);
+    animation: fadeInDownSmall 700ms forwards;
 }
 
 // ACE EDITOR
 .o_ace_view_editor {
     background: $o-we-ace-color;
     color: white;
-    @include o-flex-display;
-    @include o-flex-flow(column, nowrap);
+    display: flex;
+    flex-flow: column nowrap;
     opacity: 0.97;
 
     .o_ace_view_editor_title {
-        @include o-flex(0, 0, auto);
-        @include o-flex-display;
-        @include o-align-items(center);
+        flex: 0 0 auto;
+        display: flex;
+        align-items: center;
         padding: $grid-gutter-width/4;
 
         > .o_ace_type_switcher > button::after {
@@ -1248,27 +1247,27 @@ body.editor_enable {
         }
 
         > * {
-            @include o-flex(0, 0, auto);
+            flex: 0 0 auto;
             margin: 0 $grid-gutter-width/4;
 
             &.o_include_option {
-                @include o-flex-display;
-                @include o-align-items(center);
+                display: flex;
+                align-items: center;
                 font-size: 11px;
 
-                > .o_checkbox {
+                > .custom-control {
                     margin-right: $grid-gutter-width/4;
                 }
             }
 
             &.o_res_list {
-                @include o-flex(1, 1, auto);
+                flex: 1 1 auto;
                 min-width: 60px;
             }
         }
     }
     #ace-view-id {
-        @include o-flex(0, 0, auto);
+        flex: 0 0 auto;
         padding: $grid-gutter-width/4 $grid-gutter-width/2;
         background-color: lighten($o-we-ace-color, 10%);
     }
@@ -1277,13 +1276,13 @@ body.editor_enable {
             content: "";
             z-index: 1000;
             display: block;
-            background-color: $brand-danger;
+            background-color: theme-color('danger');
             opacity: 0.5;
             pointer-events: none;
         }
 
         height: 70%; // in case flex is not supported
-        @include o-flex(1, 1, auto);
+        flex: 1 1 auto;
         .ace_gutter {
             cursor: ew-resize;
 
@@ -1334,7 +1333,7 @@ body.editor_enable {
 body .modal {
     // SELECT MEDIA
     .o_select_media_dialog {
-        width: 80%;
+        max-width: 80%;
 
         .modal-body {
             .nav-tabs .active > a[href="#editor-media-icon"] {
@@ -1342,9 +1341,6 @@ body .modal {
             }
 
             li.search {
-                ul.pager li:last-child{
-                    margin-left: 2px;
-                }
                 .form-group {
                     position: relative;
                     margin: 0 10px 0 0;
@@ -1358,9 +1354,11 @@ body .modal {
                 }
             }
 
-            .well {
-                border-color: $gray-lighter;
+            .card {
+                border-color: gray('200');
                 border-top-width: 0;
+                border-top-left-radius: 0;
+                border-top-right-radius: 0;
             }
 
             .o_existing_attachment_cell {
@@ -1383,7 +1381,7 @@ body .modal {
                 .o_image {
                     border: $o-border-image solid transparent;
                     cursor: pointer;
-                    @include o-transition(opacity, 400ms);
+                    transition: opacity 400ms ease 0s;
 
                     &.o_webimage {
                         width: 100%;
@@ -1396,7 +1394,7 @@ body .modal {
                     }
                 }
                 &.o_selected .o_image {
-                    border-color: $o-brand-primary;
+                    border-color: $o-brand-odoo;
                     box-shadow: 0px 0px 2px 2px $o-brand-secondary;
                 }
                 &:hover .o_existing_attachment_remove {
@@ -1424,7 +1422,7 @@ body .modal {
             }
 
             #editor-media-image, #editor-media-document {
-                .well {
+                .card {
                     label {
                         margin: auto 10px;
                     }
@@ -1436,13 +1434,13 @@ body .modal {
             }
 
             // VIDEO TAB
-            #editor-media-video .well {
+            #editor-media-video .card {
                 padding: 0;
-                @include o-flex-display;
-                @include o-flex-flow(row, wrap);
+                display: flex;
+                flex-flow: row wrap;
 
                 .o_video_dialog_form {
-                    @include o-flex(1, 1, auto);
+                    flex: 1 1 auto;
                     min-width: 0;
                     padding: 20px;
 
@@ -1464,10 +1462,10 @@ body .modal {
                                 display: none;
                             }
                         }
-                        &.has-error > .o_validate_feedback > .fa-exclamation-triangle {
+                        &.o_has_error > .o_validate_feedback > .fa-exclamation-triangle {
                             display: block;
                         }
-                        &.has-success > .o_validate_feedback > .fa-check {
+                        &.o_has_success > .o_validate_feedback > .fa-check {
                             display: block;
                         }
                     }
@@ -1475,10 +1473,10 @@ body .modal {
 
                 #video-preview {
                     position: relative;
-                    @include o-flex(1, 0, 50%);
-                    @include o-flex-display;
-                    @include o-flex-flow(column, nowrap);
-                    @include o-justify-content(center);
+                    flex: 1 0 50%;
+                    display: flex;
+                    flex-flow: column nowrap;
+                    justify-content: center;
 
                     @include o-we-preview-box(0 19px);
                     border: none;
@@ -1493,7 +1491,7 @@ body .modal {
                         max-height: 100%;
 
                         &.alert {
-                            @include o-animation(fadeInDownSmall, 700ms, $fill-mode: forwards);
+                            animation: fadeInDownSmall 700ms forwards;
                             margin: 0 auto;
                         }
                     }
@@ -1523,7 +1521,7 @@ body .modal {
                     border: 1px dotted #888787;
                     background-image: url(/web/image);
                     background-position: center center;
-                    @include o-background-size(cover);
+                    background-size: cover;
                 }
                 .el {
                     @include o-position-absolute(10px, 0, 10px, 0);
@@ -1566,7 +1564,7 @@ body .modal {
                 }
             }
             .o_bg_img_opt_ui_info {
-                @include animation(fadeInOut 2s ease forwards);
+                animation: fadeInOut 2s ease forwards;
                 @include o-position-absolute($bottom: 1px, $right: 0);
                 display: block;
                 padding: 3px 13px;
@@ -1587,7 +1585,7 @@ body .modal {
                 display: block;
                 width: 100%;
                 height: 1px;
-                background: fade-out(lighten($o-brand-optional, 30%), 0.5);
+                background: fade-out(lighten($o-brand-primary, 30%), 0.5);
                 pointer-events: none;
                 &.grid-2 {
                     top: 66.66%
@@ -1616,7 +1614,7 @@ body .modal {
                 box-shadow: 0 0 1px #333;
                 pointer-events: none;
                 &.o_with_transition {
-                    @include o-transition(all, 0.2s);
+                    transition: all 0.2s ease 0s;
                 }
                 &:before {
                     pointer-events: none;
@@ -1631,7 +1629,7 @@ body .modal {
                     border-radius: 100em;
                     opacity: 1;
                     box-shadow: 0 0 0 100em rgba(0, 0, 0, 0.33);
-                    @include o-transition(opacity, 0.2s);
+                    transition: opacity 0.2s ease 0s;
                 }
             }
         }
@@ -1661,7 +1659,7 @@ body .modal {
             }
         }
         .o_link_dialog_preview {
-            border-left: 1px solid $gray-lighter;
+            border-left: 1px solid gray('200');
         }
     }
     // Crop Dialog
@@ -1669,13 +1667,13 @@ body .modal {
         height: 350px;
         .cropper-point {
             background-color: white;
-            @include o-transition(all, 400ms, $o-we-md-ease);
-            @include o-transform(scale(1.5, 1.5));
+            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);
             opacity: 1;
             &:hover {
-                @include o-transform(scale(2.5, 2.5));
+                transform: scale(2.5, 2.5);
             }
         }
         .cropper-line {
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 2d36b3e9756..203b27fc886 100644
--- a/addons/web_editor/static/src/scss/web_editor.variables.scss
+++ b/addons/web_editor/static/src/scss/web_editor.variables.scss
@@ -27,7 +27,7 @@ $o-we-md-ease: cubic-bezier(0.19, 1, 0.22, 1) !default;
 // Editor
 $o-we-dropzone-size: 40px !default;
 $o-we-dropzone-border-width: 2px !default;
-$o-we-dropzone-border: $o-we-dropzone-border-width dashed $o-brand-primary !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;
@@ -49,7 +49,7 @@ $o-we-switch-inactive-color: $o-we-color-paper !default;
     padding: $padding;
     border-top: 1px solid black;
     border-bottom: 1px solid white;
-    @include o-linear-gradient(-150deg, $o-we-color-dark, $o-we-color-darker);
+    background-image: linear-gradient(-150deg, $o-we-color-dark, $o-we-color-darker);
 
     color:  $color-text;
 }
@@ -62,12 +62,12 @@ $o-we-switch-inactive-color: $o-we-color-paper !default;
 }
 
 
-// ============    Preservetion mixins    ===============
+// ============    Preservation mixins    ===============
 // Used to preserve web_editor and website UI from themes customizations
 
 @mixin o-w-preserve-base {
     font-family: $o-we-font-family;
-    line-height: 1.42857143;
+    line-height: 1.5;
     color: $o-we-color-divider;
 
     .text-muted {
@@ -78,7 +78,7 @@ $o-we-switch-inactive-color: $o-we-color-paper !default;
 @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.42857143;
+        line-height: 1.5;
         color: $o-we-color-dark;
         font-weight: bold;
     }
@@ -86,14 +86,14 @@ $o-we-switch-inactive-color: $o-we-color-paper !default;
 
 @mixin o-w-preserve-links {
     a:not(.o_btn_preview) {
-        color: $o-brand-optional;
+        color: $o-brand-primary;
 
         &:focus, &:active, &:focus:active {
             outline: none!important;
         }
     }
 
-    .label {
+    .badge {
         &:hover a, a {
             color: #fff;
         }
@@ -105,21 +105,21 @@ $o-we-switch-inactive-color: $o-we-color-paper !default;
         height: 34px;
         padding: 6px 12px;
         font-size: 14px;
-        line-height: 1.42857143;
+        line-height: 1.5;
         border: 1px solid $o-we-color-text-light;
         color: #555;
         background-color: #fff;
         border-radius: 0;
     }
 
-    .has-error {
-        .form-control {
-            border-color: $state-danger-text;
+    .was-validated {
+        .form-control:invalid {
+            border-color: $danger;
         }
     }
 
     select.form-control {
-        @include o-appearance(none);
+        appearance: none;
         background: url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPScxLjEnIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZycgeG1 sbnM6eGxpbms9J2h0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsnIHdpZHRoPScyNCcgaGVpZ2 h0PScyNCcgdmlld0JveD0nMCAwIDI0IDI0Jz48cGF0aCBpZD0nc3ZnXzEnIGQ9J203LjQwNiw3L jgyOGw0LjU5NCw0LjU5NGw0LjU5NCwtNC41OTRsMC40MDYsMS40MDZsLTUsNC43NjZsLTUsLTQu NzY2bDAuNDA2LC0xLjQwNnonIGZpbGw9JyM4ODgnLz48L3N2Zz4=');
         background-position: 100% 65%;
         background-repeat: no-repeat;
@@ -144,14 +144,14 @@ $o-we-switch-inactive-color: $o-we-color-paper !default;
 
 @mixin o-w-preserve-tabs {
     .nav-tabs {
-        border-bottom: 1px solid $gray-lighter;
+        border-bottom: 1px solid gray('200');
 
         > li  {
             > a {
-                line-height: 1.42857143;
+                line-height: 1.5;
                 color: $o-we-color-light;
                 &:hover {
-                    border-color: $gray-lighter;
+                    border-color: gray('200');
                 }
             }
 
@@ -159,7 +159,7 @@ $o-we-switch-inactive-color: $o-we-color-paper !default;
                 &, &:hover, &:focus {
                     color: $o-we-color-normal;
                     background-color: $o-we-color-paper;
-                    border-color: $gray-lighter;
+                    border-color: gray('200');
                     border-bottom-color: transparent;
                 }
             }
@@ -169,61 +169,57 @@ $o-we-switch-inactive-color: $o-we-color-paper !default;
 
 @mixin o-w-preserve-btn {
     .btn:not(.o_btn_preview) {
-        border-width: 1px;
         border-radius: 0;
         font-weight: normal;
-        @include button-size(6px, 12px, 14px, 1.42857143, 0);
+        @include button-size(.375rem, .75rem, 1rem, 1.5, 0);
 
         &.btn-primary {
-            @include button-variant(white, $o-brand-optional, darken($o-brand-optional,5%));
+            @include button-variant($o-brand-primary, $o-brand-primary);
         }
-        &.btn-default {
-            @include button-variant($o-we-color-normal, white, $o-we-color-text-light);
+        &.btn-secondary {
+            @include button-variant($o-we-color-paper, $o-we-color-paper);
+            color: $o-brand-primary;
         }
         &.btn-link {
-            @include button-variant($o-brand-optional, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
+            @include button-variant($o-we-color-paper, $o-we-color-paper);
+            color: $o-brand-primary;
         }
         &.btn-success {
-            @include button-variant(white, $o-we-color-success, darken($o-we-color-success, 5%));
+            @include button-variant($o-we-color-success, $o-we-color-success);
         }
         &.btn-info {
-            @include button-variant(white, $o-we-color-info, darken($o-we-color-info, 5%));
+            @include button-variant($o-we-color-info, $o-we-color-info);
         }
         &.btn-warning {
-            @include button-variant(white, $o-we-color-warning, darken($o-we-color-warning, 5%));
+            @include button-variant($o-we-color-warning, $o-we-color-warning);
         }
         &.btn-danger {
-            @include button-variant(white, $o-we-color-danger, darken($o-we-color-danger, 5%));
+            @include button-variant($o-we-color-danger, $o-we-color-danger);
         }
 
         &.btn-lg {
-            @include button-size(10px, 16px, 18px, 1.3333333, 0);
+            @include button-size(.5rem, 1rem, 1.25rem, 1.5, 0);
         }
         &.btn-sm {
-            @include button-size(5px, 10px, 12px, 1.5, 0);
-        }
-        &.btn-xs {
-            @include button-size(1px, 5px, 12px, 1.5, 0);
+            @include button-size(.25rem, .5rem, .875rem, 1.5, 0);
         }
     }
 }
 
-@mixin o-w-preserve-wells {
-    .well {
+@mixin o-w-preserve-cards {
+    .card {
         padding: 19px;
         margin-bottom: 20px;
         background-color: $o-we-color-paper;
-        border: 1px solid darken($o-we-color-paper,5%);
+        border: 1px solid darken($o-we-color-paper, 5%);
         border-radius: 0;
-        @include box-shadow(none);
+        box-shadow: none;
     }
 }
 
 // Edition colors
 
 // Colors
-$gray-white: #fff !default;
-
 $color-alpha: #1cc1a9 !default;
 $color-beta: #875A7B !default;
 $color-gamma: #BA3C3D !default;
@@ -238,24 +234,6 @@ $color-white-25: rgba(white, 0.25) !default;
 $color-white-50: rgba(white, 0.5) !default;
 $color-white-75: rgba(white, 0.75) !default;
 
-@mixin o-create-color-classes($name, $color, $complementary: o-get-most-contrast($color, $text-color, #FFF), $content-color: $color) {
-    .bg-#{$name} {
-        background-color: $color;
-        color: $complementary;
-        .text-muted {
-            color: rgba($complementary, 0.4);
-        }
-    }
-    body .text-#{$name} { // body to make the rules more important that bg-* ones
-        color: $content-color;
-    }
-}
-@mixin o-create-color-btn-classes($name, $color, $complementary: o-get-most-contrast($color, $text-color, #FFF), $border-color: darken($color, 5%)) {
-    .btn-#{$name} {
-        @include button-variant($complementary, $color, $border-color);
-    }
-}
-
 // Translations
 $o-we-content-to-translate-color: rgb(255, 255, 90) !default;
 $o-we-translated-content-color: rgb(120, 215, 110) !default;