[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

2 files changed, 74 insertions, 76 deletions

diff --git a/addons/mass_mailing/static/src/scss/mass_mailing.ui.scss b/addons/mass_mailing/static/src/scss/mass_mailing.ui.scss
index 1c6d5b1557a..0854637a003 100644
--- a/addons/mass_mailing/static/src/scss/mass_mailing.ui.scss
+++ b/addons/mass_mailing/static/src/scss/mass_mailing.ui.scss
@@ -1,25 +1,25 @@
 .o_form_view .o_form_sheet .o_notebook .tab-content .tab-pane .o_mail_body {
     // cancel padding of form_sheet
-    margin-top: -@odoo-sheet-cancel-tpadding;
-    margin-left: -@odoo-sheet-cancel-hpadding;
-    margin-right: -@odoo-sheet-cancel-hpadding;
-    margin-bottom: -@odoo-sheet-cancel-bpadding;
+    margin-top: -$odoo-sheet-cancel-tpadding;
+    margin-left: -$odoo-sheet-cancel-hpadding;
+    margin-right: -$odoo-sheet-cancel-hpadding;
+    margin-bottom: -$odoo-sheet-cancel-bpadding;
 }
 
 .o_mail_theme_selector {
     > a {
-        .o-position-absolute(0, 0, auto, 0);
-        height: @odoo-navbar-height;
+        @include o-position-absolute(0, 0, auto, 0);
+        height: $odoo-navbar-height;
         line-height: 31px;
         border-radius: 0;
-        background-color: @o-we-color-darker;
-        color: @o-we-color-text-normal;
-        .o-flex-display();
-        .o-justify-content(center);
-        .o-align-items(center);
+        background-color: $o-we-color-darker;
+        color: $o-we-color-text-normal;
+        @include o-flex-display;
+        @include o-justify-content(center);
+        @include o-align-items(center);
 
         &:hover, &:focus, &:active {
-            color: @o-we-color-text-light;
+            color: $o-we-color-text-light;
         }
 
         i {
@@ -29,15 +29,15 @@
 
     &.open > a {
         color: white;
-        background-color: @o-we-color-dark;
+        background-color: $o-we-color-dark;
     }
 
     .dropdown-menu {
-        .o-position-absolute(@odoo-navbar-height - 1, -1px, -1px, -1px);
+        @include o-position-absolute($odoo-navbar-height - 1, -1px, -1px, -1px);
         margin: 0;
         border-radius: 0;
         overflow: auto;
-        background-color: @o-we-color-dark;
+        background-color: $o-we-color-dark;
 
         > li {
             margin: 0;
@@ -49,8 +49,8 @@
                     display: none;
                     background-size: cover;
                     padding-top: 50%;
-                    border: 1px solid @o-we-color-light;
-                    border-top: 1px solid @o-we-color-text-normal;
+                    border: 1px solid $o-we-color-light;
+                    border-top: 1px solid $o-we-color-text-normal;
 
                     &.logo {
                         display: block;
@@ -59,7 +59,7 @@
             }
 
             &:hover > a {
-                background-color: @o-we-color-darker;
+                background-color: $o-we-color-darker;
 
                 .o_thumb {
                     border: 1px solid white;
@@ -67,8 +67,8 @@
             }
 
             &.selected > a .o_thumb {
-                border: 2px solid @odoo-brand-primary;
-                background-color: @o-we-color-dark;
+                border: 2px solid $odoo-brand-primary;
+                background-color: $o-we-color-dark;
             }
         }
     }
@@ -93,17 +93,17 @@ body.o_force_mail_theme_choice {
                     max-width: 25%;
 
                     > a {
-                        .o-transition(all, 0.3s, ease);
+                        @include o-transition(all, 0.3s, ease);
 
                         .o_thumb {
                             display: none;
                             padding-top: 107%;
-                            border: 1px solid @o-we-color-light;
-                            border-top: 1px solid @o-we-color-text-normal;
-                            box-shadow: 0 5px 10px fade(black, 80%);
+                            border: 1px solid $o-we-color-light;
+                            border-top: 1px solid $o-we-color-text-normal;
+                            box-shadow: 0 5px 10px rgba(black, 0.8);
                             will-change: transform;
-                            .backface-visibility(hidden);
-                            .o-transition(all, 0.3s);
+                            @include backface-visibility(hidden);
+                            @include o-transition(all, 0.3s);
 
                             &.small {
                                 display: block;
@@ -121,10 +121,10 @@ body.o_force_mail_theme_choice {
                     }
 
                     &:hover > a {
-                        background-color: @o-we-color-dark;
+                        background-color: $o-we-color-dark;
 
                         .o_thumb {
-                            box-shadow: 0 5px 30px 1px fade(black, 60%);
+                            box-shadow: 0 5px 30px 1px rgba(black, 0.6);
                         }
                     }
 
@@ -135,7 +135,7 @@ body.o_force_mail_theme_choice {
                         opacity: 0.2;
 
                         > .fa {
-                            .o-position-absolute(0, 0, 0, 0);
+                            @include o-position-absolute(0, 0, 0, 0);
                             text-align: center;
                             font-size: 50px;
                             color: white;
diff --git a/addons/mass_mailing/static/src/scss/themes/theme_default.scss b/addons/mass_mailing/static/src/scss/themes/theme_default.scss
index aba67dbeb64..704ea7656d7 100644
--- a/addons/mass_mailing/static/src/scss/themes/theme_default.scss
+++ b/addons/mass_mailing/static/src/scss/themes/theme_default.scss
@@ -1,42 +1,40 @@
-// lessc@1.4.2
-
 // ============================
 // Mass Mailing "Theme Default"
 // ============================
 
 // ===== Default Theme palette =====
-@o_mm_def_color_alpha: #f5f5f5;
-@o_mm_def_color_beta: #ffffff;
-@o_mm_def_color_gamma: #706482;
-@o_mm_def_color_delta: #464646;
-@o_mm_def_color_epsilon: darken(@o_mm_def_color_gamma, 5%);
-@o_mm_def_color_zeta: #706482;
-@o_mm_def_color_eta: #87a6b5;
+$o-mm-def-color-alpha: #f5f5f5;
+$o-mm-def-color-beta: #ffffff;
+$o-mm-def-color-gamma: #706482;
+$o-mm-def-color-delta: #464646;
+$o-mm-def-color-epsilon: darken($o-mm-def-color-gamma, 5%);
+$o-mm-def-color-zeta: #706482;
+$o-mm-def-color-eta: #87a6b5;
 
 // ===== Default Theme variables =====
-@o_mm_def_body_width    : 600px;
-@o_mm_def_body_bobile   : 480px;
-@o_mm_def_b_radius      : 2px;
+$o-mm-def-body-width    : 600px;
+$o-mm-def-body-bobile   : 480px;
+$o-mm-def-b-radius      : 2px;
 
-@o_mm_def_font          : -apple-system, "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
-@o_mm_def_text_color    : @o_mm_def_color_delta;
+$o-mm-def-font          : -apple-system, "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
+$o-mm-def-text-color    : $o-mm-def-color-delta;
 
-@o_mm_def_btn_bg        : @o_mm_def_color_gamma;
-@o_mm_def_btn_text      : @o_mm_def_color_beta;
+$o-mm-def-btn-bg        : $o-mm-def-color-gamma;
+$o-mm-def-btn-text      : $o-mm-def-color-beta;
 
 // ===== Colors =====
 .bg-beta {
-    background-color: @o_mm_def_color_zeta;
-    color:  @o_mm_def_color_beta;
+    background-color: $o-mm-def-color-zeta;
+    color:  $o-mm-def-color-beta;
 }
 .text-beta {
-    color: @o_mm_def_color_zeta;
+    color: $o-mm-def-color-zeta;
 }
 .bg-delta {
-    background-color: @o_mm_def_color_eta;
+    background-color: $o-mm-def-color-eta;
 }
 .bg-gray-lighter {
-    background-color: @o_mm_def_color_alpha;
+    background-color: $o-mm-def-color-alpha;
 }
 
 td {
@@ -51,7 +49,7 @@ td {
     box-sizing: content-box;
     width: 94%;
     min-height: 100%;
-    background-color: @o_mm_def_color_alpha;
+    background-color: $o-mm-def-color-alpha;
     padding: 0 3%;
 
     // Forces on <p/> and <hx/> elements as several mail clients does not
@@ -60,8 +58,8 @@ td {
         font-size: 14px; // force bootstrap default
     }
     &, p, h1, h2, h3, h4, h5, h6 {
-        font-family: @o_mm_def_font;
-        color: lighten(@o_mm_def_text_color, 20%);
+        font-family: $o-mm-def-font;
+        color: lighten($o-mm-def-text-color, 20%);
     }
 
     > .o_mail_wrapper {
@@ -71,9 +69,9 @@ td {
                                    // same width
 
         .o_mail_wrapper_td {
-            width: @o_mm_def_body_width;
-            border: 1px solid darken(@o_mm_def_color_alpha, 2%);
-            background-color: @o_mm_def_color_beta;
+            width: $o-mm-def-body-width;
+            border: 1px solid darken($o-mm-def-color-alpha, 2%);
+            background-color: $o-mm-def-color-beta;
         }
     }
 }
@@ -81,27 +79,27 @@ td {
 // ===== Snippets (general) =====
 .o_mail_snippet_general {
     width: 100%;
-    max-width: @o_mm_def_body_width; // should not be necessary thanks to mail wrapper
+    max-width: $o-mm-def-body-width; // should not be necessary thanks to mail wrapper
     margin: 0 auto;
 
     h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
-        color: @o_mm_def_text_color;
+        color: $o-mm-def-text-color;
     }
 
     .btn.btn-primary {
         -webkit-user-select: none;
-        color: @o_mm_def_btn_text;
+        color: $o-mm-def-btn-text;
         border: none;
         text-decoration: none;
         font-weight: normal;
-        font-family: @o_mm_def_font;
+        font-family: $o-mm-def-font;
         cursor: pointer;
-        border-radius: @o_mm_def_b_radius;
-        background-color: @o_mm_def_btn_bg;
+        border-radius: $o-mm-def-b-radius;
+        background-color: $o-mm-def-btn-bg;
     }
 
     a, .btn.btn-link {
-        color: @o_mm_def_color_epsilon;
+        color: $o-mm-def-color-epsilon;
         font-weight: bold;
         text-decoration: none !important;
 
@@ -118,20 +116,20 @@ td {
 
     .separator {
         height: 2px;
-        background-color: @o_mm_def_color_alpha;
+        background-color: $o-mm-def-color-alpha;
     }
 
     .bg-beta {
         h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
-            color: @o_mm_def_color_beta;
+            color: $o-mm-def-color-beta;
         }
 
         .btn.btn-primary {
-            background-color: @o_mm_def_color_eta;
+            background-color: $o-mm-def-color-eta;
         }
 
         a, .btn.btn-link {
-            color: @o_mm_def_color_eta;
+            color: $o-mm-def-color-eta;
         }
     }
 
@@ -165,7 +163,7 @@ td {
 }
 
 .o_mail_block_steps {
-    background-color: @o_mm_def_color_alpha;
+    background-color: $o-mm-def-color-alpha;
 }
 
 .o_mail_block_two_cols, .o_mail_block_three_cols {
@@ -196,7 +194,7 @@ td {
     margin-left: 20px;
     margin-right: 20px;
     .o_mail_snippet_general{
-        background: darken(@o_mm_def_color_alpha, 2%);
+        background: darken($o-mm-def-color-alpha, 2%);
     }
 }
 
@@ -208,7 +206,7 @@ td {
 .o_mail_block_comparison_table {
     .separator {
         height: 1px;
-        background-color: darken(@o_mm_def_color_alpha, 15%);
+        background-color: darken($o-mm-def-color-alpha, 15%);
     }
     table table {
         td, th {
@@ -227,7 +225,7 @@ td {
 .o_mail_block_discount2 {
     .o_code {
         padding: 5px 10px;
-        background: @o_mm_def_color_alpha;
+        background: $o-mm-def-color-alpha;
         border-radius: 3px;
         font-family: monospace;
     }
@@ -235,7 +233,7 @@ td {
 
 .o_mail_block_footer_social {
     .o_mail_table_styles {
-        border-top: 2px solid @o_mm_def_color_alpha;
+        border-top: 2px solid $o-mm-def-color-alpha;
         padding-top: 20px;
         padding-bottom: 20px;
     }
@@ -253,7 +251,7 @@ td {
     .o_mail_footer_copy {
         font-size: 9px;
         font-weight: bold;
-        color: lighten(@o_mm_def_text_color, 30%);
+        color: lighten($o-mm-def-text-color, 30%);
     }
 
     &.o_mail_footer_social_center {
@@ -309,15 +307,15 @@ td {
 }
 
 // ===== Mobile =====
-@media screen and (max-width: @o_mm_def_body_bobile) {
+@media screen and (max-width: $o-mm-def-body-bobile) {
     .o_mail_col_mv {
         display: block!important;
-        max-width: @o_mm_def_body_bobile!important;
+        max-width: $o-mm-def-body-bobile!important;
         width: 100%!important;
     }
 
     .o_mail_table_styles {
-        max-width: @o_mm_def_body_bobile!important;
+        max-width: $o-mm-def-body-bobile!important;
         width: 100%!important;
     }
 }