[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, 64 insertions, 68 deletions

diff --git a/addons/web/static/src/scss/fields.scss b/addons/web/static/src/scss/fields.scss
index ff6fe9eb20b..f28e3ba349c 100644
--- a/addons/web/static/src/scss/fields.scss
+++ b/addons/web/static/src/scss/fields.scss
@@ -6,8 +6,8 @@
 // Invalid
 .o_field_invalid {
     &.o_input, .o_input, &.o_form_label {
-        color: @brand-danger!important;
-        border-color: @brand-danger!important; // enterprise o_required_modifier rule overrides this without !important
+        color: $brand-danger!important;
+        border-color: $brand-danger!important; // enterprise o_required_modifier rule overrides this without !important
     }
 }
 
@@ -39,17 +39,17 @@
 
     // Flex fields (inline)
     &.o_field_many2one, &.o_field_radio, &.o_field_many2manytags, &.o_field_percent_pie, &.o_field_monetary, &.o_field_binary_file {
-        @media (min-width: @screen-sm-min) {
-            .o-inline-flex-display();
+        @media (min-width: $screen-sm-min) {
+            @include o-inline-flex-display;
         }
         > span, > button {
-            .o-flex(0, 0, auto);
+            @include o-flex(0, 0, auto);
         }
     }
 
     // Dropdowns input (many2one, ...)
     .o_input_dropdown {
-        .o-flex(1, 1, auto);
+        @include o-flex(1, 1, auto);
         position: relative;
         width: 100%;
 
@@ -60,10 +60,10 @@
         }
 
         .o_dropdown_button {
-            .o-position-absolute(0, 0);
+            @include o-position-absolute(0, 0);
             pointer-events: none;
             &:after {
-                .o-caret-down;
+                @include o-caret-down;
             }
         }
     }
@@ -77,51 +77,51 @@
     // Monetary
     &.o_field_monetary {
         &.o_input {
-            .o-align-items(baseline);
+            @include o-align-items(baseline);
 
             > input {
                 width: 100px;
-                .o-flex(1, 0, auto);
+                @include o-flex(1, 0, auto);
             }
         }
     }
 
     // Many2many tags
     &.o_field_many2manytags {
-        .o-flex-flow(row, wrap);
-        .o-align-items(baseline);
+        @include o-flex-flow(row, wrap);
+        @include o-align-items(baseline);
 
         > .o_field_widget {
-            .o-flex(1, 0, 100px);
+            @include o-flex(1, 0, 100px);
             position: initial;
             max-width: 100%;
         }
 
         > .badge {
-            .o-flex(0, 0, auto);
+            @include o-flex(0, 0, auto);
             border: 0;
             font-size: 12px;
             color: white;
             cursor: pointer;
 
             > .o_badge_text {
-                .o-text-overflow(inline-block);
+                @include o-text-overflow(inline-block);
                 max-width: 200px;
             }
 
             // o-kanban-colorpicker without customizing
             // '&:first-child > a::before' (transparent red-crossed colorpick)
-            .o-tag-colorpicker() {
-                @o-tag-colorpicker-padding-right: @odoo-dropdown-hpadding - 2 * @o-kanban-inner-hmargin;
+            @mixin o-tag-colorpicker {
+                $o-tag-colorpicker-padding-right: $odoo-dropdown-hpadding - 2 * 5px; // FIXME was $o-kanban-inner-hmargin before scss convertion
 
                 max-width: 100%;
-                padding: 3px @o-tag-colorpicker-padding-right 3px @odoo-dropdown-hpadding;
+                padding: 3px $o-tag-colorpicker-padding-right 3px $odoo-dropdown-hpadding;
 
                 > li {
                     display: inline-block;
-                    margin: @o-kanban-inner-hmargin @o-kanban-inner-hmargin 0 0;
+                    margin: 5px 5px 0 0; // FIXME was $o-kanban-inner-hmargin before scss convertion
                     border: 1px solid white;
-                    box-shadow: 0 0 0 1px @gray-lighter-dark;
+                    box-shadow: 0 0 0 1px $gray-lighter-dark;
 
                     > a {
                         display: block;
@@ -136,7 +136,7 @@
 
                     &:last-of-type {
                         box-shadow: 0 0 0 0px white; // remove grey border on hide in kanban
-                        color: @odoo-main-text-color;
+                        color: $odoo-main-text-color;
                     }
                 }
             }
@@ -147,7 +147,7 @@
             }
 
             > .o_colorpicker > ul {
-                .o-tag-colorpicker();
+                @include o-tag-colorpicker;
                 white-space: normal;
             }
 
@@ -156,28 +156,24 @@
             }
         }
 
-        .o-tag-color(@size: 0) when (@size = 0) {
-            .o_tag_color_@{size} {
-                & {
-                    background-color: white;
-                    color: ~"@{odoo-color-@{size}}";
-                    box-shadow: inset 0 0 0 2px ~"@{odoo-color-@{size}}";
-                }
-                &::after {
-                    background-color: ~"@{odoo-color-@{size}}";
-                }
-            }
-            .o-tag-color(@size + 1);
-        }
-        .o-tag-color(@size: 0) when (@size > 0) and (@size < @odoo-nb-ui-color) {
-            .o_tag_color_@{size} {
-                &, &::after {
-                    background-color: ~"@{odoo-color-@{size}}";
+        @for $size from 1 through $odoo-nb-ui-color {
+            .o_tag_color_#{$size - 1} {
+                @if $size == 1 {
+                    & {
+                        background-color: white;
+                        color: nth($odoo-colors, $size);
+                        box-shadow: inset 0 0 0 2px nth($odoo-colors, $size);
+                    }
+                    &::after {
+                        background-color: nth($odoo-colors, $size);
+                    }
+                } @else {
+                    &, &::after {
+                        background-color: nth($odoo-colors, $size);
+                    }
                 }
             }
-            .o-tag-color(@size + 1);
         }
-        .o-tag-color();
     }
 
     // Stars
@@ -199,7 +195,7 @@
             }
 
             &.fa-star-o {
-                color: @odoo-main-color-muted;
+                color: $odoo-main-color-muted;
             }
             &.fa-star {
                 color: gold;
@@ -213,7 +209,7 @@
             font-size: 16px;
         }
         i.fa-star-o {
-            color: @odoo-main-color-muted;
+            color: $odoo-main-color-muted;
             &:hover {
                 color: gold;
             }
@@ -225,7 +221,7 @@
 
     // Specific success color for toggle_button widget
     .fa.o_toggle_button_success {
-        color: @brand-success;
+        color: $brand-success;
     }
 
     // Handle widget
@@ -240,13 +236,13 @@
         }
 
         .o_radio_item {
-            .o-flex(0, 0, auto);
-            .o-flex-display();
-            .o-align-items(center);
+            @include o-flex(0, 0, auto);
+            @include o-flex-display;
+            @include o-align-items(center);
 
             > input {
-                .o-flex(0, 0, auto);
-                margin: 0 @odoo-form-spacing-unit 0 0;
+                @include o-flex(0, 0, auto);
+                margin: 0 $odoo-form-spacing-unit 0 0;
             }
             > label {
                 margin: 0;
@@ -255,21 +251,21 @@
 
         &.o_horizontal {
             .o_radio_item {
-                margin-right: @odoo-form-spacing-unit * 2;
+                margin-right: $odoo-form-spacing-unit * 2;
             }
         }
 
         &.o_vertical {
-            .o-flex-flow(column, nowrap);
+            @include o-flex-flow(column, nowrap);
             .o_radio_item {
-                margin-bottom: @odoo-form-spacing-unit;
+                margin-bottom: $odoo-form-spacing-unit;
             }
         }
     }
 
     // Percent pie
     &.o_field_percent_pie {
-        .o-align-items(center);
+        @include o-align-items(center);
 
         > .o_pie {
             position: relative;
@@ -278,36 +274,36 @@
             margin-right: 10px;
             border-radius: 100%;
             overflow: hidden;
-            background-color: @odoo-brand-optional;
+            background-color: $odoo-brand-optional;
 
             &:after { // Outside pie border to go over border-radius irregularities
                 content: " ";
-                .o-position-absolute(0, 0);
+                @include o-position-absolute(0, 0);
                 width: 100%;
                 height: 100%;
                 border-radius: 100%;
             }
 
             .o_mask {
-                .o-position-absolute(0, 0);
-                .o-transform-origin(0);
+                @include o-position-absolute(0, 0);
+                @include o-transform-origin(0);
                 width: 50%;
                 height: 100%;
-                background-color: @odoo-view-background-color;
+                background-color: $odoo-view-background-color;
                 &.o_full {
                     background-color: inherit;
                 }
             }
 
             .o_pie_value {
-                .o-flex-display();
-                .o-justify-content(center);
-                .o-align-items(center);
+                @include o-flex-display;
+                @include o-justify-content(center);
+                @include o-align-items(center);
 
                 border-radius: 100%;
 
                 font-weight: 700;
-                color: @odoo-brand-primary;
+                color: $odoo-brand-primary;
             }
         }
     }
@@ -326,11 +322,11 @@
         position: relative;
 
         .o_form_image_controls {
-            .o-position-absolute(0, 0);
+            @include o-position-absolute(0, 0);
             width: 100%;
 
             color: white;
-            background-color: @odoo-brand-optional;
+            background-color: $odoo-brand-optional;
             opacity: 0;
             transition: opacity ease 400ms;
 
@@ -339,7 +335,7 @@
                 cursor: pointer;
             }
         }
-        @media (max-width: @screen-xs-min) {
+        @media (max-width: $screen-xs-min) {
             .o_form_image_controls{
                 position: initial;
                 opacity: 1;
@@ -349,10 +345,10 @@
                     margin: 0px;
                     text-align: center;
                     &.o_select_file_button{
-                        background: @odoo-brand-optional;
+                        background: $odoo-brand-optional;
                     }
                     &.o_clear_file_button{
-                        background: @brand-danger;
+                        background: $brand-danger;
                     }
                 }
             }
@@ -377,7 +373,7 @@
             position: relative;
 
             > .o_field_domain_panel {
-                .o-position-absolute(0, 0);
+                @include o-position-absolute(0, 0);
                 margin-top: 0;
             }
         }