[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, 130 insertions, 124 deletions

diff --git a/addons/mail/static/src/scss/composer.scss b/addons/mail/static/src/scss/composer.scss
index 861ddc1d7fa..b19cde9fb2c 100644
--- a/addons/mail/static/src/scss/composer.scss
+++ b/addons/mail/static/src/scss/composer.scss
@@ -1,7 +1,7 @@
 @font-face {
     font-family: 'emojifont';
-    src: local('Segoe UI'), 
-         local('Apple Color Emoji'), 
+    src: local('Segoe UI'),
+         local('Apple Color Emoji'),
          local('Android Emoji'),
          local('Noto Color Emoji'),
          local('Twitter Color Emoji'),
@@ -14,11 +14,11 @@
 
 .o_chat_composer {
     position: relative;
-    .o-flex(0, 0, auto);
-    .o-flex-display();
+    @include o-flex(0, 0, auto);
+    @include o-flex-display;
     margin: 1px 0;
     border-top: none;
-    background: @gray-lighter;
+    background: $gray-lighter;
 
     .o_composer, .o_composer_subject {
         position: relative;
@@ -30,11 +30,11 @@
     }
 
     .o_composer_subject {
-        .o-flex-display();
+        @include o-flex-display;
         padding-bottom: 5px;
 
         > input {
-            .o-flex(1, 1, auto);
+            @include o-flex(1, 1, auto);
             padding: 5px;
             margin-right: 30px;
         }
@@ -52,7 +52,7 @@
             word-break: break-all;
         }
         .o_composer_mention_dropdown .o_mention_proposition > a {
-            .o-text-overflow();
+            @include o-text-overflow;
             width: 100%;
             padding: 3px 15px;
             .o_mention_name {
@@ -67,26 +67,26 @@
             resize: none;
         }
         .btn-icon {
-            .o-hover-opacity(@default-opacity: 0.8, @hover-opacity: 1);
+            @include o-hover-opacity($default-opacity: 0.8, $hover-opacity: 1);
             border: none;
         }
         .o_composer_button_full_composer {
-            .o-position-absolute(auto, 0);
+            @include o-position-absolute(auto, 0);
         }
-        @media (max-width: @screen-xs-max) {
+        @media (max-width: $screen-xs-max) {
             .o_composer_button_send {
-                color: @odoo-brand-optional;
+                color: $odoo-brand-optional;
             }
         }
     }
 
    .o_mail_emoji_container {
-        padding: 0 @o-mail-chatter-gap @o-mail-chatter-gap 0;
-        border: 1px solid @gray-lighter-dark;
-        background-color: @gray-lighter;
+        padding: 0 $o-mail-chatter-gap $o-mail-chatter-gap 0;
+        border: 1px solid $gray-lighter-dark;
+        background-color: $gray-lighter;
 
         .o_mail_emoji {
-            margin: @o-mail-chatter-gap 0 0 @o-mail-chatter-gap;
+            margin: $o-mail-chatter-gap 0 0 $o-mail-chatter-gap;
             cursor: pointer; // only in the popover
             min-width: 20px;
             min-height: 20px;
@@ -95,18 +95,18 @@
 
     // Both inline and not-inline design. Mini-composer disabled.
     &:not(.o_chat_mini_composer) {
-        padding:  @mail-thread-avatar-size*0.5;
-        padding-left: @grid-gutter-width*0.5 + @mail-thread-avatar-size + @o-mail-chatter-gap;
-        border: 1px solid @gray-lighter-dark;
+        padding:  $mail-thread-avatar-size*0.5;
+        padding-left: $grid-gutter-width*0.5 + $mail-thread-avatar-size + $o-mail-chatter-gap;
+        border: 1px solid $gray-lighter-dark;
         border-top: none;
 
         .o_chatter_avatar {
-            .o-position-absolute(0, @left:  -@mail-thread-avatar-size - @o-mail-chatter-gap);
+            @include o-position-absolute(0, $left:  -$mail-thread-avatar-size - $o-mail-chatter-gap);
         }
 
         .o_chatter_composer_info, .o_composer_suggested_partners {
-            .o-flex(0, 0, 100%);
-            margin-bottom: @o-mail-chatter-gap*0.5;
+            @include o-flex(0, 0, 100%);
+            margin-bottom: $o-mail-chatter-gap*0.5;
         }
 
         .o_composer_container {
@@ -119,10 +119,10 @@
         }
 
         .o_composer, .o_composer_subject {
-            border: 1px solid @gray-lighter-dark;
+            border: 1px solid $gray-lighter-dark;
 
             input {
-                padding: 0 0 @o-mail-chatter-gap;
+                padding: 0 0 $o-mail-chatter-gap;
                 border: none;
             }
         }
@@ -132,34 +132,34 @@
         }
 
         .o_chatter_composer_tools {
-            border-top: 1px solid @gray-lighter-dark;
-            @media (max-width: @screen-xs-max) {
+            border-top: 1px solid $gray-lighter-dark;
+            @media (max-width: $screen-xs-max) {
                 margin-top: 10px;
             }
         }
 
         &:not(.o_chat_inline_composer) {
-            .o-flex-flow(row, wrap);
+            @include o-flex-flow(row, wrap);
 
             .o_composer_container, .o_composer_button_send {
-                .o-flex(1, 0, 100%);
+                @include o-flex(1, 0, 100%);
             }
             .o_composer, .o_composer_subject {
-                padding: @o-mail-chatter-gap @o-mail-chatter-gap 0;
+                padding: $o-mail-chatter-gap $o-mail-chatter-gap 0;
             }
             .o_composer_send {
-                margin-top: @o-mail-chatter-gap;
+                margin-top: $o-mail-chatter-gap;
             }
         }
 
         &.o_chat_inline_composer {
             .o_composer_container {
-                .o-flex(1, 1, auto);
+                @include o-flex(1, 1, auto);
             }
             .o_composer {
                 display: flex;
                 min-height: 40px;
-                padding: @o-mail-chatter-gap @o-mail-chatter-gap 0 @o-mail-chatter-gap;
+                padding: $o-mail-chatter-gap $o-mail-chatter-gap 0 $o-mail-chatter-gap;
                 border-radius: 2px 0 0 2px;
                 border-right-width: 0;
             }
@@ -168,32 +168,32 @@
                 border-width: 1px;
             }
             .o_composer_input {
-                .o-flex-flow(row, wrap);
+                @include o-flex-flow(row, wrap);
             }
             .o_composer_text_field {
-                .o-flex(1, 1, 50%);
+                @include o-flex(1, 1, 50%);
                 margin: -4px 7px 5px 0px;
                 padding: 2.5px 0px 0px 5px;
             }
             .o_chatter_composer_tools {
-                .o-flex(0, 1, auto);
+                @include o-flex(0, 1, auto);
             }
             .o_composer_attachments_list {
-                .o-flex(1, 0, 100%);
+                @include o-flex(1, 0, 100%);
             }
 
             .o_chatter_composer_tools {
                 border: none;
-                border-left: 1px solid @gray-lighter-dark;
-                padding-left: @o-mail-chatter-gap*0.5;
-                .o-transform(translateY(-@o-mail-chatter-gap*0.5));
+                border-left: 1px solid $gray-lighter-dark;
+                padding-left: $o-mail-chatter-gap*0.5;
+                @include o-transform(translateY(-$o-mail-chatter-gap*0.5));
             }
 
             .o_composer_button_send {
                 border-radius: 0 3px 3px 0;
                 // Make the button appear as the same size as the subject input
-                padding: 10px @padding-base-horizontal;
-                border: 1px solid darken(@odoo-brand-optional, 5%);
+                padding: 10px $padding-base-horizontal;
+                border: 1px solid darken($odoo-brand-optional, 5%);
                 border-left-width: 0;
             }
         }
@@ -202,24 +202,24 @@
     // Mini-composer enabled
     &.o_chat_mini_composer {
         .o_composer_container {
-            border-top: 1px solid @gray-lighter-dark;
+            border-top: 1px solid $gray-lighter-dark;
             width: 100%;
         }
         .o_mail_emoji_container {
-            .o-position-absolute(auto, 0, 100%, 0);
+            @include o-position-absolute(auto, 0, 100%, 0);
             border-bottom-width: 1px;
         }
         .o_composer_input {
-            .o-flex-flow(row, nowrap);
+            @include o-flex-flow(row, nowrap);
 
             .o_chatter_composer_tools {
-                .o-flex(0, 0, auto);
+                @include o-flex(0, 0, auto);
             }
         }
         .o_composer_button_send, .o_chatter_avatar {
             display: none;
         }
-        @media (max-width: @screen-xs-max) {
+        @media (max-width: $screen-xs-max) {
             .o_composer_button_send {
                 display: inline-block;
             }
@@ -228,7 +228,7 @@
 }
 
 .o_composer_attachments_list:not(:empty) {
-    margin-top: @o-mail-chatter-gap;
+    margin-top: $o-mail-chatter-gap;
     text-align: justify;
 }
 
@@ -245,34 +245,34 @@
 
 // Attachment Icons (common for chat thread and chat composer)
 // ------------------------------------------------------------------
-@o-mail-attachment-image-size: 38px;
-@o-mail-attachment-margin: 5px;
+$o-mail-attachment-image-size: 38px;
+$o-mail-attachment-margin: 5px;
 
 .o_attachments_list, .o_attachments_previews {
-    margin: 0 -@o-mail-attachment-margin 0;
-    .o-flex-display();
-    .o-flex-flow(row, wrap);
+    margin: 0 -$o-mail-attachment-margin 0;
+    @include o-flex-display;
+    @include o-flex-flow(row, wrap);
 }
 
 .o_attachment {
     position: relative;
     width: 100%;
-    padding: @o-mail-attachment-margin;
+    padding: $o-mail-attachment-margin;
 
-    @media (min-width: @screen-sm-min) {
+    @media (min-width: $screen-sm-min) {
         width: 50%;
     }
-    @media (min-width: @screen-md-min) {
-        width: percentage(1/4);
+    @media (min-width: $screen-md-min) {
+        width: 25%;
     }
 
     .o_attachment_wrap {
         overflow: hidden;
         position: relative;
-        border-bottom: 1px solid fade(black, 10%);
+        border-bottom: 1px solid rgba(black, 0.1);
         border-radius: 2px;
         padding: 4px 6px 0 4px;
-        background-color: fade(black, 5%);
+        background-color: rgba(black, 0.05);
     }
 
     &.o_attachment_editable .o_attachment_wrap  {
@@ -280,10 +280,11 @@
     }
 
     .o_image {
-        .square(@o-mail-attachment-image-size);
+        width: $o-mail-attachment-image-size;
+        height: $o-mail-attachment-image-size;
         image-orientation: from-image; // Only supported in Firefox
         &.o_hover {
-            .o-hover-opacity(@default-opacity: 1, @hover-opacity: 0.7);
+            @include o-hover-opacity($default-opacity: 1, $hover-opacity: 0.7);
         }
     }
 
@@ -292,10 +293,10 @@
     }
 
     .caption {
-        .o-text-overflow(block);
+        @include o-text-overflow(block);
 
         a {
-            .o-hover-text-color(@default-color: @odoo-main-text-color, @hover-color: @headings-color);
+            @include o-hover-text-color($default-color: $odoo-main-text-color, $hover-color: $headings-color);
         }
     }
 
@@ -304,23 +305,23 @@
     }
 
     .o_attachment_uploaded, .o_attachment_delete {
-        .o-position-absolute(0,0,0, @left: auto);
-        .o-flex-display();
-        .o-align-items(center);
-        .o-justify-content(center);
+        @include o-position-absolute(0, 0, 0, $left: auto);
+        @include o-flex-display();
+        @include o-align-items(center);
+        @include o-justify-content(center);
         width: 45px;
     }
 
     .o_attachment_delete {
-        background: desaturate(@brand-primary, 50%);
+        background: desaturate($brand-primary, 50%);
         color: white;
         cursor: pointer;
         font-size: 20px;
-        .o-transform(translateX(100%));
-        .o-transition(all, 0.3s);
+        @include o-transform(translateX(100%));
+        @include o-transition(all, 0.3s);
 
         &:hover {
-            background: @brand-primary;
+            background: $brand-primary;
         }
     }
 
@@ -343,8 +344,8 @@
     }
 
     &:hover .o_attachment_delete {
-        .o-transition(all, 0.1s);
-        .o-transform(translateX(0));
+        @include o-transition(all, 0.1s);
+        @include o-transform(translateX(0));
     }
 }
 
@@ -352,20 +353,20 @@
     > .o_attachment {
         width: 50%;
 
-        @media (min-width: @screen-sm-min) {
+        @media (min-width: $screen-sm-min) {
             width: percentage(1/3);
         }
-        @media (min-width: @screen-md-min) {
+        @media (min-width: $screen-md-min) {
             width: percentage(1/4);
         }
-        @media (min-width: @screen-lg-min) {
+        @media (min-width: $screen-lg-min) {
             width: percentage(1/6);
         }
 
         .o_attachment_wrap {
             padding: 0;
             border-radius: 2px;
-            border: 1px solid @gray-lighter-darker;
+            border: 1px solid $gray-lighter-darker;
         }
 
         .o_image_box {
@@ -373,94 +374,98 @@
             padding-top: 75%;
 
             .o_attachment_image {
-                .o-position-absolute(0,0,0,0);
+                @include o-position-absolute(0, 0, 0, 0);
                 background-size: cover;
                 background-position: center;
-                .o-transform(scale(1.05));
-                .o-transition(all, 0.3s);
+                @include o-transform(scale(1.05));
+                @include o-transition(all, 0.3s);
             }
 
             &:hover .o_attachment_image {
-                .o-transform(scale(1));
+                @include o-transform(scale(1));
             }
         }
 
         .o_image_overlay {
-            .o-position-absolute(@top: 0, @left: 0, @right:0, @bottom:0);
-            .o-hover-opacity(@default-opacity: 0, @hover-opacity: 1);
-            .o-linear-gradient(180deg, fade(black, 20%), fade(black, 90%));
-            .o-transition(all, 0.3s);
+            @include o-position-absolute($top: 0, $left: 0, $right:0, $bottom:0);
+            @include o-hover-opacity($default-opacity: 0, $hover-opacity: 1);
+            @include o-linear-gradient(180deg, rgba(black, 0.2), rgba(black, 0.9));
+            @include o-transition(all, 0.3s);
             padding: 10px;
 
             .o_attachment_title {
-                .o-position-absolute(@bottom: 7px);
+                @include o-position-absolute($bottom: 7px);
                 width: 80%;
-                .o-text-overflow(inline-block);
-                font-size: @font-size-small;
+                @include o-text-overflow(inline-block);
+                font-size: $font-size-small;
             }
 
             .o_attachment_download {
-                .o-position-absolute(@right: 7px, @bottom:7px);
+                @include o-position-absolute($right: 7px, $bottom:7px);
             }
         }
     }
 }
 
-.o_modal_fullscreen {
-    z-index:  @o-chat-window-zindex + 1;
-    .o-viewer-black-btn () {
-        background-color: fade(black, 40%);
-        color: fade(@gray-lighter, 70%);
 
-        &:hover {
-            background-color: fade(black,60%);
-            color: white;
-        }
+@mixin o-viewer-black-btn {
+    background-color: rgba(black, 0.4);
+    color: rgba($gray-lighter, 0.7);
 
-        &.disabled {
-            color: @gray-light;
-            background: none;
-        }
+    &:hover {
+        background-color: rgba(black, 0.6);
+        color: white;
     }
 
+    &.disabled {
+        color: $gray-light;
+        background: none;
+    }
+}
+.o_modal_fullscreen {
+    z-index: $o-chat-window-zindex + 1;
+
     .o_viewer_content {
-        .square(100%);
         position: relative;
+        width: 100%;
+        height: 100%;
 
         .o_viewer-header {
-            .o-position-absolute(0, 0, @left: 0);
+            @include o-position-absolute(0, 0, $left: 0);
             height: 45px;
-            padding: @grid-gutter-width*0.5;
-            background-color: fade(black, 80%);
+            padding: $grid-gutter-width*0.5;
+            background-color: rgba(black, 0.8);
             z-index: 1;
             color: #FFFFFF;
 
             a {
-                .o-hover-text-color(fade(@gray-lighter,60%), white);
+                @include o-hover-text-color(rgba($gray-lighter, 0.6), white);
             }
 
             .o_close_btn {
-                .o-position-absolute(-1px, @grid-gutter-width*0.5);
-                font-size: @font-size-h1;
+                @include o-position-absolute(-1px, $grid-gutter-width*0.5);
+                font-size: $font-size-h1;
                 font-weight: 300;
             }
         }
 
         .o_loading_img {
-            .o-position-absolute(@top: 45%, @right: 0, @left: 0);
+            @include o-position-absolute($top: 45%, $right: 0, $left: 0);
         }
 
         .o_viewer_img_wrapper {
             cursor: pointer;
-            .square(100%);
             position: fixed;
-            background-color: fade(black, 70%);
+            width: 100%;
+            height: 100%;
+            background-color: rgba(black, 0.7);
 
             .o_viewer_zoomer {
-                .square(100%);
-                .o-flex-display();
-                .o-justify-content(center);
-                .o-align-items(center);
+                width: 100%;
+                height: 100%;
+                @include o-flex-display;
+                @include o-justify-content(center);
+                @include o-align-items(center);
                 padding: 45px 0;
 
                 img {
@@ -476,7 +481,8 @@
                 }
 
                 .o_viewer_pdf {
-                    .size(80%, 100%);
+                    width: 80%;
+                    height: 100%;
                     border: 0px;
                     box-shadow: 1px 1px 20px 1px #000;
                 }
@@ -488,29 +494,29 @@
         }
 
         .o_viewer_toolbar {
-            .o-position-absolute(@left: 50%, @bottom: @grid-gutter-width*0.5);
-            .o-transform(translate(-50%, -50%));
+            @include o-position-absolute($left: 50%, $bottom: $grid-gutter-width*0.5);
+            @include o-transform(translate(-50%, -50%));
             overflow: hidden;
             border-radius: 4px;
-            background-color: fade(black, 40%);
+            background-color: rgba(black, 0.4);
 
             .o_viewer_toolbar_btn {
-                .o-viewer-black-btn();
-                padding-left:  8px;
+                @include o-viewer-black-btn;
+                padding-left: 8px;
                 padding-right: 8px;
             }
         }
     }
 
     .arrow {
-        .o-position-absolute(50%, @grid-gutter-width*0.5);
+        @include o-position-absolute(50%, $grid-gutter-width*0.5);
         border-radius: 100%;
         padding: 12px 16px 11px 18px;
-        .o-viewer-black-btn();
+        @include o-viewer-black-btn;
     }
 
     .arrow-left {
-        left: @grid-gutter-width*0.5;
+        left: $grid-gutter-width*0.5;
         right: auto;
         padding: 12px 18px 11px 16px;
     }