[REF] *: convert less content to scss content

Convert content so that the assets compile on app installation. The
style is still broken after this as the variables/mixins/... are not
defined in the right order (as it did not matter in LESS but does in
SCSS).

This commit basically changes:
- Variables: @​var_hello -> $var-hello
- Mixins: .mixin_world() {} -> @​mixin mixin-world {}
- Classes used as mixin: .my_class() -> @​extend .my_class
    - Here there were no other solution than to convert the use of
      a mixin call by the use of an extend as a first approximation
- LESS functions -> SCSS functions (e.g. fade -> rgba)
- Move first variable definition before the variable is used
    - Still need to make sure last variable definition is at the
      right place

1 files changed, 59 insertions, 59 deletions

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 40f4625c9ad..08c67c9c7f6 100644
--- a/addons/web_editor/static/src/scss/web_editor.variables.scss
+++ b/addons/web_editor/static/src/scss/web_editor.variables.scss
@@ -2,41 +2,41 @@
 /// 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;
+$o-we-font-family: Roboto, 'Montserrat', "Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;
 
-@o-we-color-dark: #2c2c36;
-@o-we-color-darker: darken(@o-we-color-dark, 2%);
-@o-we-color-divider: #33363e;
-@o-we-color-light: #4e525b;
-@o-we-color-normal: #50545d;
-@o-we-color-paper: #fcfcfc;
-@o-we-color-text-normal: #999999;
-@o-we-color-text-light: #d4d5d7;
-@o-we-color-danger: #e6586c;
-@o-we-color-warning: #f0ad4e;
-@o-we-color-success: #40ad67;
-@o-we-color-info: #6999a8;
+$o-we-color-dark: #2c2c36;
+$o-we-color-darker: darken($o-we-color-dark, 2%);
+$o-we-color-divider: #33363e;
+$o-we-color-light: #4e525b;
+$o-we-color-normal: #50545d;
+$o-we-color-paper: #fcfcfc;
+$o-we-color-text-normal: #999999;
+$o-we-color-text-light: #d4d5d7;
+$o-we-color-danger: #e6586c;
+$o-we-color-warning: #f0ad4e;
+$o-we-color-success: #40ad67;
+$o-we-color-info: #6999a8;
 
-@o-we-sidebar-width: 210px;
+$o-we-sidebar-width: 210px;
 
-@o-we-tab-active-bg: #3D4048;
+$o-we-tab-active-bg: #3D4048;
 
 // Transitions
-@o-we-md-ease: cubic-bezier(0.19, 1, 0.22, 1);
+$o-we-md-ease: cubic-bezier(0.19, 1, 0.22, 1);
 
 // ============    'Preview' component Mixins    ===============
 // Create a "preview" work-area to edit/customize specific elements
 
-.o-we-preview-box(@padding: 0px 25px 25px 25px, @color-text: white) {
-    padding: @padding;
+@mixin o-we-preview-box($padding: 0px 25px 25px 25px, $color-text: white) {
+    padding: $padding;
     border-top: 1px solid black;
     border-bottom: 1px solid white;
-    .o-linear-gradient(-150deg, @o-we-color-dark, @o-we-color-darker);
+    @include o-linear-gradient(-150deg, $o-we-color-dark, $o-we-color-darker);
 
-    color:  @color-text;
+    color:  $color-text;
 }
 
-.o-we-preview-content() {
+@mixin o-we-preview-content {
     display: inline-block;
     max-width: 100%;
     overflow: hidden;
@@ -47,28 +47,28 @@
 // ============    Preservetion mixins    ===============
 // Used to preserve web_editor and website UI from themes customizations
 
-.o-w-preserve-base() {
-    font-family: @o-we-font-family;
+@mixin o-w-preserve-base {
+    font-family: $o-we-font-family;
     line-height: 1.42857143;
-    color: @o-we-color-divider;
+    color: $o-we-color-divider;
 
     .text-muted {
-        color: @o-we-color-text-normal;
+        color: $o-we-color-text-normal;
     }
 }
 
-.o-w-preserve-headings() {
+@mixin o-w-preserve-headings {
     h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
-        font-family: @o-we-font-family;
+        font-family: $o-we-font-family;
         line-height: 1.42857143;
-        color: @o-we-color-dark;
+        color: $o-we-color-dark;
         font-weight: bold;
     }
 }
 
-.o-w-preserve-links() {
+@mixin o-w-preserve-links {
     a:not(.o_btn_preview) {
-        color: @odoo-brand-optional;
+        color: $odoo-brand-optional;
 
         &:focus, &:active, &:focus:active {
             outline: none!important;
@@ -82,13 +82,13 @@
     }
 }
 
-.o-w-preserve-forms() {
+@mixin o-w-preserve-forms {
     .form-control {
         height: 34px;
         padding: 6px 12px;
         font-size: 14px;
         line-height: 1.42857143;
-        border: 1px solid @o-we-color-text-light;
+        border: 1px solid $o-we-color-text-light;
         color: #555;
         background-color: #fff;
         border-radius: 0;
@@ -96,24 +96,24 @@
 
     .has-error {
         .form-control {
-            border-color: @state-danger-text;
+            border-color: $state-danger-text;
         }
     }
 
     select.form-control {
-        .o-appearance(none);
+        @include o-appearance(none);
         background: url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPScxLjEnIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZycgeG1 sbnM6eGxpbms9J2h0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsnIHdpZHRoPScyNCcgaGVpZ2 h0PScyNCcgdmlld0JveD0nMCAwIDI0IDI0Jz48cGF0aCBpZD0nc3ZnXzEnIGQ9J203LjQwNiw3L jgyOGw0LjU5NCw0LjU5NGw0LjU5NCwtNC41OTRsMC40MDYsMS40MDZsLTUsNC43NjZsLTUsLTQu NzY2bDAuNDA2LC0xLjQwNnonIGZpbGw9JyM4ODgnLz48L3N2Zz4=');
         background-position: 100% 65%;
         background-repeat: no-repeat;
     }
 }
 
-.o-w-preserve-modals() {
+@mixin o-w-preserve-modals {
     background: 0;
 
     .modal-content {
         border-radius: 0;
-        background-color: @o-we-color-paper;
+        background-color: $o-we-color-paper;
 
         .modal-body {
             background-color: white;
@@ -124,24 +124,24 @@
     }
 }
 
-.o-w-preserve-tabs() {
+@mixin o-w-preserve-tabs {
     .nav-tabs {
-        border-bottom: 1px solid @gray-lighter;
+        border-bottom: 1px solid $gray-lighter;
 
         > li  {
             > a {
                 line-height: 1.42857143;
-                color: @o-we-color-light;
+                color: $o-we-color-light;
                 &:hover {
-                    border-color: @gray-lighter;
+                    border-color: $gray-lighter;
                 }
             }
 
             &.active > a {
                 &, &:hover, &:focus {
-                    color: @o-we-color-normal;
-                    background-color: @o-we-color-paper;
-                    border-color: @gray-lighter;
+                    color: $o-we-color-normal;
+                    background-color: $o-we-color-paper;
+                    border-color: $gray-lighter;
                     border-bottom-color: transparent;
                 }
             }
@@ -149,54 +149,54 @@
     }
 }
 
-.o-w-preserve-btn() {
+@mixin o-w-preserve-btn {
     .btn:not(.o_btn_preview) {
         border-width: 1px;
         border-radius: 0;
         font-weight: normal;
-        .button-size(6px; 12px; 14px; 1.42857143; 0);
+        @include button-size(6px, 12px, 14px, 1.42857143, 0);
 
         &.btn-primary {
-            .button-variant(white, @odoo-brand-optional, darken(@odoo-brand-optional,5%));
+            @include button-variant(white, $odoo-brand-optional, darken($odoo-brand-optional,5%));
         }
         &.btn-default {
-            .button-variant(@o-we-color-normal, white, @o-we-color-text-light);
+            @include button-variant($o-we-color-normal, white, $o-we-color-text-light);
         }
         &.btn-link {
-            .button-variant(@odoo-brand-optional, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
+            @include button-variant($odoo-brand-optional, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
         }
         &.btn-success {
-            .button-variant(white; @o-we-color-success; darken(@o-we-color-success, 5%));
+            @include button-variant(white, $o-we-color-success, darken($o-we-color-success, 5%));
         }
         &.btn-info {
-            .button-variant(white; @o-we-color-info; darken(@o-we-color-info, 5%));
+            @include button-variant(white, $o-we-color-info, darken($o-we-color-info, 5%));
         }
         &.btn-warning {
-            .button-variant(white; @o-we-color-warning; darken(@o-we-color-warning, 5%));
+            @include button-variant(white, $o-we-color-warning, darken($o-we-color-warning, 5%));
         }
         &.btn-danger {
-            .button-variant(white; @o-we-color-danger; darken(@o-we-color-danger, 5%));
+            @include button-variant(white, $o-we-color-danger, darken($o-we-color-danger, 5%));
         }
 
         &.btn-lg {
-            .button-size(10px; 16px; 18px; 1.3333333; 0);
+            @include button-size(10px, 16px, 18px, 1.3333333, 0);
         }
         &.btn-sm {
-            .button-size(5px; 10px; 12px; 1.5; 0);
+            @include button-size(5px, 10px, 12px, 1.5, 0);
         }
         &.btn-xs {
-            .button-size(1px; 5px; 12px; 1.5; 0);
+            @include button-size(1px, 5px, 12px, 1.5, 0);
         }
     }
 }
 
-.o-w-preserve-wells() {
+@mixin o-w-preserve-wells {
     .well {
         padding: 19px;
         margin-bottom: 20px;
-        background-color: @o-we-color-paper;
-        border: 1px solid darken(@o-we-color-paper,5%);
+        background-color: $o-we-color-paper;
+        border: 1px solid darken($o-we-color-paper,5%);
         border-radius: 0;
-        .box-shadow(none);
+        @include box-shadow(none);
     }
 }