[REF] *: rename all LESS files to SCSS

This is a simple renaming without adaptation.

1 files changed, 308 insertions, 0 deletions

diff --git a/addons/web_editor/static/src/scss/web_editor.common.scss b/addons/web_editor/static/src/scss/web_editor.common.scss
new file mode 100644
index 00000000000..99f6a474397
--- /dev/null
+++ b/addons/web_editor/static/src/scss/web_editor.common.scss
@@ -0,0 +1,308 @@
+///
+/// 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);