[MERGE] *: use SCSS as language for design (instead of LESS)

The main reason this is done is to prepare the migration to bootstrap 4.
It has other advantages though, like speed to compute the css and more
convenient language features (if/else/maps/...).

Detailed information about this merge can be found in the merge's
sub-commits.

1 files changed, 0 insertions, 308 deletions

diff --git a/addons/web_editor/static/src/less/web_editor.common.less b/addons/web_editor/static/src/less/web_editor.common.less
deleted file mode 100644
index 99f6a474397..00000000000
--- a/addons/web_editor/static/src/less/web_editor.common.less
+++ /dev/null
@@ -1,308 +0,0 @@
-///
-/// This file regroups basic style rules for web_editor enable page edition and backend utils.
-///
-
-html, body {
-    width: 100%;
-    height: 100%;
-}
-
-.css_non_editable_mode_hidden {
-    display: none !important;
-}
-.editor_enable .css_editable_mode_hidden {
-    display: none !important;
-}
-.note-toolbar {
-    margin-left: 0 !important;
-}
-.note-popover .popover > .arrow {
-    display: none;
-}
-
-/* ----- GENERIC LAYOUTING HELPERS ---- */
-/* table */
-#wrapwrap, .o_editable {
-    // Only style editor-made tables (shop/portal/... tables are not supposed to
-    // use table-bordered...)
-    table.table.table-bordered {
-        table-layout: fixed;
-        td {
-            min-width: 20px;
-        }
-    }
-    @media (max-width: @screen-xs-max) {
-        .table-responsive > table.table {
-            table-layout: auto;
-        }
-    }
-}
-
-// Medias
-img.shadow {
-    box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.2);
-}
-img.padding-small, .img.padding-small, span.fa.padding-small, iframe.padding-small {
-    padding: 4px;
-}
-img.padding-medium, .img.padding-medium, span.fa.padding-medium, iframe.padding-medium {
-    padding: 8px;
-}
-img.padding-large, .img.padding-large, span.fa.padding-large, iframe.padding-large {
-    padding: 16px;
-}
-img.padding-xl, .img.padding-xl, span.fa.padding-xl, iframe.padding-xl {
-    padding: 32px;
-}
-
-.fa-6x {
-    font-size: 6em;
-}
-.fa-7x {
-    font-size: 7em;
-}
-.fa-8x {
-    font-size: 8em;
-}
-.fa-9x {
-    font-size: 9em;
-}
-.fa-10x {
-    font-size: 10em;
-}
-.fa.center-block {
-    text-align: center;
-}
-
-div.media_iframe_video {
-    margin: 0 auto;
-    text-align: center;
-    position: relative;
-    overflow: hidden;
-
-    iframe {
-        width: 100%;
-        height: 100%;
-        .o-position-absolute(@top: 0);
-        margin: 0 auto;
-        margin-left: -50%;
-    }
-    &.padding-small iframe {
-        padding: 4px;
-    }
-    &.padding-medium iframe {
-        padding: 8px;
-    }
-    &.padding-large iframe {
-        padding: 16px;
-    }
-    &.padding-xl iframe {
-        padding: 32px;
-    }
-
-    .media_iframe_video_size {
-        padding-bottom: 66.5%;
-        position: relative;
-        width: 100%;
-        height: 0;
-    }
-
-    .css_editable_mode_display {
-        .o-position-absolute();
-        width: 100%;
-        height: 100%;
-        display: none;
-        z-index: 2;
-    }
-}
-
-html[data-browser^="msie"] div.media_iframe_video iframe {
-    margin-left: 0;
-}
-
-@media (max-width: @screen-xs-max) {
-    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;
-    }
-}
-
-// Fields
-address {
-    .fa.fa-mobile-phone {
-        margin: 0 3px 0 2px;
-    }
-    .fa.fa-file-text-o {
-        margin-right: 1px;
-    }
-}
-
-span[data-oe-type="monetary"] {
-    white-space: nowrap;
-}
-
-// Menus
-// TODO should not be here but used by web_studio so must stay here for now
-ul.oe_menu_editor {
-    .oe_menu_placeholder {
-        outline: 1px dashed #4183C4;
-    }
-    ul {
-        list-style: none;
-    }
-    li div {
-        cursor: move;
-    }
-}
-
-// Generate all spacings for all sizes
-.o-spacing-all(@factor: 1) {
-    // Generate vertical margin/padding classes used by the editor
-    .o-generate-spacings(256/8);
-    .o-generate-spacings(@n, @i: 0) when (@i =< @n) {
-        .o-vspacing(@i * 8);
-        .o-generate-spacings(@n, @i + 1);
-    }
-    .o-vspacing(4, @factor);
-
-    // 92px vertical margin is kept for compatibility
-    .o-vmargins(92, @factor);
-
-    // Some horizontal margin classes defined for convenience
-    // (and compatibility)
-    .o-hmargins(0, @factor);
-    .o-hmargins(4, @factor);
-    .o-hmargins(8, @factor);
-    .o-hmargins(16, @factor);
-    .o-hmargins(32, @factor);
-    .o-hmargins(64, @factor);
-}
-
-// Generate all spacings for one size, scalled by a given factor
-// (0 <= factor <= 1)
-.o-vspacing(@name, @factor: 1) {
-    .o-vmargins(@name, @factor);
-    .o-vpaddings(@name, @factor);
-}
-.o-vmargins(@name, @factor: 1) {
-    .o-vmargins-define(@name, @factor * @name);
-}
-.o-vpaddings(@name, @factor: 1) {
-    .o-vpaddings-define(@name, @factor * @name);
-}
-.o-hspacing(@name, @factor: 1) {
-    .o-hmargins(@name, @factor);
-    .o-hpaddings(@name, @factor);
-}
-.o-hmargins(@name, @factor: 1) {
-    .o-hmargins-define(@name, @factor * @name);
-}
-.o-hpaddings(@name, @factor: 1) {
-    .o-hpaddings-define(@name, @factor * @name);
-}
-
-// Generate all spacings for one size, given the name of the spacing and
-// intended size
-.o-vmargins-define(@name, @size: @name) {
-    .mt@{name} { margin-top: unit(@size, px)!important; }
-    .mb@{name} { margin-bottom: unit(@size, px)!important; }
-}
-.o-vpaddings-define(@name, @size: @name) {
-    .pt@{name} { padding-top: unit(@size, px)!important; }
-    .pb@{name} { padding-bottom: unit(@size, px)!important; }
-}
-.o-hmargins-define(@name, @size: @name) {
-    .ml@{name} { margin-left: unit(@size, px)!important; }
-    .mr@{name} { margin-right: unit(@size, px)!important; }
-}
-.o-hpaddings-define(@name, @size: @name) {
-    .pl@{name} { padding-left: unit(@size, px)!important; }
-    .pr@{name} { padding-right: unit(@size, px)!important; }
-}
-
-// Generate all margins
-.o-spacing-all();
-
-// Underline
-a.o_underline {
-    text-decoration: underline;
-    &:hover {
-        text-decoration: underline;
-    }
-}
-
-// Colors
-@gray-white: #fff;
-
-@color-alpha: #1cc1a9;
-@color-beta: #875A7B;
-@color-gamma: #BA3C3D;
-@color-delta: #0D6759;
-@color-epsilon: #0B2E59;
-
-// Greyscale transparent colours
-@color-black-25: fade(black, 25%);
-@color-black-50: fade(black, 50%);
-@color-black-75: fade(black, 75%);
-@color-white-25: fade(white, 25%);
-@color-white-50: fade(white, 50%);
-@color-white-75: fade(white, 75%);
-
-.o-create-color-classes(@name, @color, @complementary: contrast(@color, @text-color, #FFF, 60%), @content-color: @color) {
-    .bg-@{name} {
-        background-color: @color;
-        color: @complementary;
-        .text-muted {
-            color: fade(@complementary, 40%);
-        }
-    }
-    body .text-@{name} { // body to make the rules more important that bg-* ones
-        color: @content-color;
-    }
-}
-.o-create-color-btn-classes(@name, @color, @complementary: contrast(@color, @text-color, #FFF, 60%), @border-color: darken(@color, 5%)) {
-    .btn-@{name} {
-        .button-variant(@complementary, @color, @border-color);
-    }
-}
-
-// Create classes for theme colors...
-.o-create-color-classes(alpha, @color-alpha);
-.o-create-color-classes(beta, @color-beta);
-.o-create-color-classes(gamma, @color-gamma);
-.o-create-color-classes(delta, @color-delta);
-.o-create-color-classes(epsilon, @color-epsilon);
-
-// ... and button classes
-.o-create-color-btn-classes(alpha, @color-alpha);
-.o-create-color-btn-classes(beta, @color-beta);
-.o-create-color-btn-classes(gamma, @color-gamma);
-.o-create-color-btn-classes(delta, @color-delta);
-.o-create-color-btn-classes(epsilon, @color-epsilon);
-
-// Create classes for UI colors
-.o-create-color-classes(primary, @brand-primary);
-.o-create-color-classes(success, @state-success-bg, @content-color: @state-success-text);
-.o-create-color-classes(info, @state-info-bg, @content-color: @state-info-text);
-.o-create-color-classes(warning, @state-warning-bg, @content-color: @state-warning-text);
-.o-create-color-classes(danger, @state-danger-bg, @content-color: @state-danger-text);
-
-// Create classes for greyscale colors
-.o-create-color-classes(~'black', @gray-base);
-.o-create-color-classes(~'gray-darker', @gray-darker);
-.o-create-color-classes(~'gray-dark', @gray-dark);
-.o-create-color-classes(~'gray', @gray);
-.o-create-color-classes(~'gray-light', @gray-light);
-.o-create-color-classes(~'gray-lighter', @gray-lighter);
-.o-create-color-classes(~'white', @gray-white);
-
-// Create classes for greyscale transparent colours
-.o-create-color-classes(~'black-25', @color-black-25);
-.o-create-color-classes(~'black-50', @color-black-50);
-.o-create-color-classes(~'black-75', @color-black-75);
-.o-create-color-classes(~'white-25', @color-white-25);
-.o-create-color-classes(~'white-50', @color-white-50);
-.o-create-color-classes(~'white-75', @color-white-75);