[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, 74 insertions, 75 deletions

diff --git a/addons/hr_org_chart/static/src/scss/hr_org_chart.scss b/addons/hr_org_chart/static/src/scss/hr_org_chart.scss
index 896616d1bcf..c1b2f4b7d51 100644
--- a/addons/hr_org_chart/static/src/scss/hr_org_chart.scss
+++ b/addons/hr_org_chart/static/src/scss/hr_org_chart.scss
@@ -1,67 +1,67 @@
-@o-org-chart-bg: white;
-@o-org-chart-border-color: @odoo-brand-secondary;
+$o-org-chart-bg: white;
+$o-org-chart-border-color: $odoo-brand-secondary;
 
-@o-org-chart-entry-v-gap: 6px;
-@o-org-chart-entry-pic-size: 46px;
-@o-org-chart-entry-line-w: 1px;
-@o-org-chart-entry-border-color: darken(@o-org-chart-bg, 25%);
+$o-org-chart-entry-v-gap: 6px;
+$o-org-chart-entry-pic-size: 46px;
+$o-org-chart-entry-line-w: 1px;
+$o-org-chart-entry-border-color: darken($o-org-chart-bg, 25%);
 
 
 // MIXINS
-.o-org-chart-line() {
+@mixin o-org-chart-line {
     content: '';
-    background-color: @o-org-chart-bg;
-    border: 0px solid @o-org-chart-entry-border-color;
+    background-color: $o-org-chart-bg;
+    border: 0px solid $o-org-chart-entry-border-color;
 }
 
 // MOBILE LAYOUT CUSTOMIZATIONS
-@media screen and (max-width: @screen-xs-max) {
+@media screen and (max-width: $screen-xs-max) {
     #o_employee_right {
         .o_org_chart_title {
             font-size: 20px;
             padding: 5px 0;
-            border-bottom: 1px solid @o-org-chart-border-color;
+            border-bottom: 1px solid $o-org-chart-border-color;
         }
     }
 }
 
 // SMALL DESKTOP LAYOUT
-@media screen and (min-width: @screen-sm-min) {
+@media screen and (min-width: $screen-sm-min) {
     #o_employee_container {
-        .o-flex-display();
+        @include o-flex-display;
         width: 100%;
     }
     #o_employee_main {
-        .o-flex(1, 1, 60%);
+        @include o-flex(1, 1, 60%);
     }
     #o_employee_right {
-        .o-flex(0, 1, 35%);
+        @include o-flex(0, 1, 35%);
         margin-left: 2%;
         padding-left: 2%;
-        border-left: 1px solid @o-org-chart-border-color;
+        border-left: 1px solid $o-org-chart-border-color;
 
         .o_org_chart_title {
-            color: @gray-light
+            color: $gray-light
         }
     }
 }
 
 // MEDIUM DESKTOP LAYOUT
-@media screen and (min-width: @screen-md-min){
+@media screen and (min-width: $screen-md-min){
     #o_employee_right {
-        .o-flex(0, 1, 33%);
+        @include o-flex(0, 1, 33%);
     }
 }
 
 // LARGE DESKTOP LAYOUT
-@media screen and (min-width: @screen-lg-min){
+@media screen and (min-width: $screen-lg-min){
     #o_employee_right {
-        .o-flex(0, 1, 30%);
+        @include o-flex(0, 1, 30%);
     }
 }
 
 #o_employee_right {
-    @tmp-gap-base: @o-org-chart-entry-pic-size*0.7;
+    $tmp-gap-base: $o-org-chart-entry-pic-size*0.7;
 
     // ORGANIGRAM LINES
     .o_field_widget, .o_org_chart_group_up, .o_org_chart_group_down {
@@ -70,56 +70,56 @@
 
     .o_org_chart_group_up {
         &:before {
-            .o-org-chart-line();
-            border-left-width: @o-org-chart-entry-line-w;
-            height: calc(100% ~'+' @o-org-chart-entry-pic-size*0.5) ;
-            .o-position-absolute(
-                @top: @o-org-chart-entry-pic-size*0.1 + 5px,
-                @left: @o-org-chart-entry-pic-size*0.5 - @o-org-chart-entry-line-w*0.5
+            @include o-org-chart-line;
+            border-left-width: $o-org-chart-entry-line-w;
+            height: calc(100% + #{$o-org-chart-entry-pic-size*0.5}) ;
+            @include o-position-absolute(
+                $top: $o-org-chart-entry-pic-size*0.1 + 5px,
+                $left: $o-org-chart-entry-pic-size*0.5 - $o-org-chart-entry-line-w*0.5
             );
         }
         .o_org_chart_entry:last-of-type {
             &:before {
-                .o-org-chart-line();
-                border-width: 0 0 @o-org-chart-entry-line-w @o-org-chart-entry-line-w;
-                .size((@o-org-chart-entry-pic-size*0.5) - (@o-org-chart-entry-v-gap*2), @o-org-chart-entry-pic-size*0.5 + @o-org-chart-entry-v-gap*2 );
-                .o-position-absolute(
-                    @left: @o-org-chart-entry-pic-size*0.5 - @o-org-chart-entry-line-w*0.5,
-                    @top: 100%
+                @include o-org-chart-line;
+                border-width: 0 0 $o-org-chart-entry-line-w $o-org-chart-entry-line-w;
+                @include size(($o-org-chart-entry-pic-size*0.5) - ($o-org-chart-entry-v-gap*2), $o-org-chart-entry-pic-size*0.5 + $o-org-chart-entry-v-gap*2 );
+                @include o-position-absolute(
+                    $left: $o-org-chart-entry-pic-size*0.5 - $o-org-chart-entry-line-w*0.5,
+                    $top: 100%
                 );
             }
         }
     }
 
     .o_org_chart_group_up + .o_org_chart_entry_self {
-        margin-left: @tmp-gap-base;
+        margin-left: $tmp-gap-base;
 
         & + .o_org_chart_group_down {
-            margin-left: @tmp-gap-base*2;
+            margin-left: $tmp-gap-base*2;
         }
     }
 
     .o_org_chart_group_down {
-        margin-left: @tmp-gap-base;
+        margin-left: $tmp-gap-base;
 
         &:before {
-            .o-org-chart-line();
-            border-left-width: @o-org-chart-entry-line-w;
+            @include o-org-chart-line;
+            border-left-width: $o-org-chart-entry-line-w;
             height: 100%;
-            .o-position-absolute(
-                @top: @o-org-chart-entry-v-gap*-1,
-                @left: @tmp-gap-base*-0.5 + @o-org-chart-entry-pic-size*0.1 + @o-org-chart-entry-line-w*0.5
+            @include o-position-absolute(
+                $top: $o-org-chart-entry-v-gap*-1,
+                $left: $tmp-gap-base*-0.5 + $o-org-chart-entry-pic-size*0.1 + $o-org-chart-entry-line-w*0.5
             );
         }
 
         .o_org_chart_entry {
             &:before {
-                .o-org-chart-line();
-                border-top-width:  @o-org-chart-entry-line-w;
-                .size(@tmp-gap-base, 0);
-                .o-position-absolute(
-                    @left: @tmp-gap-base*-0.5 + @o-org-chart-entry-pic-size*0.1 + @o-org-chart-entry-line-w*0.5,
-                    @top: @o-org-chart-entry-pic-size*0.5
+                @include o-org-chart-line;
+                border-top-width:  $o-org-chart-entry-line-w;
+                @include size($tmp-gap-base, 0);
+                @include o-position-absolute(
+                    $left: $tmp-gap-base*-0.5 + $o-org-chart-entry-pic-size*0.1 + $o-org-chart-entry-line-w*0.5,
+                    $top: $o-org-chart-entry-pic-size*0.5
                 );
             }
 
@@ -131,7 +131,7 @@
             }
 
             &.o_org_chart_more {
-                margin-top: @o-org-chart-entry-v-gap;
+                margin-top: $o-org-chart-entry-v-gap;
 
                 &:before {
                     top: 15px;
@@ -142,7 +142,7 @@
 
     // ORGANIGRAM DESIGN
     .o_org_chart_entry {
-        margin-bottom: @o-org-chart-entry-v-gap;
+        margin-bottom: $o-org-chart-entry-v-gap;
         overflow: visible;
         margin-top: 0;
 
@@ -157,12 +157,12 @@
                 float: right;
                 cursor: pointer;
                 margin-right: 5px;
-                color: @gray-light;
-                background: @o-org-chart-bg;
-                border: 1px solid @gray-light;
+                color: $gray-light;
+                background: $o-org-chart-bg;
+                border: 1px solid $gray-light;
                 &:hover {
-                    color: @odoo-brand-optional;
-                    border-color: @odoo-brand-optional;
+                    color: $odoo-brand-optional;
+                    border-color: $odoo-brand-optional;
                 }
                 &:focus {
                     outline: none;
@@ -173,14 +173,14 @@
                 display: block;
                 line-height: 1.2;
                 font-size: 11px;
-                color: lighten(@gray-light, 15%);
+                color: lighten($gray-light, 15%);
             }
         }
 
         .media-object {
-            .square(@o-org-chart-entry-pic-size*0.8);
-            margin: @o-org-chart-entry-pic-size*0.1;
-            box-shadow: 0 0 0 @o-org-chart-entry-line-w darken(@o-org-chart-bg, 20%);
+            @include square($o-org-chart-entry-pic-size*0.8);
+            margin: $o-org-chart-entry-pic-size*0.1;
+            box-shadow: 0 0 0 $o-org-chart-entry-line-w darken($o-org-chart-bg, 20%);
             background-size: cover;
             background-position: center center;
 
@@ -190,15 +190,15 @@
                 border-color: transparent;
                 padding: 0;
                 position: relative;
-                color: @text-color;
+                color: $text-color;
 
                 .o_org_chart_show_more {
                     line-height: 13px;
                 }
 
                 &:hover {
-                    border-color: @o-org-chart-entry-border-color;
-                    color:@odoo-brand-optional;
+                    border-color: $o-org-chart-entry-border-color;
+                    color:$odoo-brand-optional;
                 }
             }
         }
@@ -209,25 +209,25 @@
             }
             .media-body > a {
                 padding-left: 10px;
-                max-width: calc(100% ~'-' 40px);
+                max-width: calc(100% - 40px);
                 display: block;
 
                 .media-heading {
-                    color: lighten(@gray-light, 5%);
+                    color: lighten($gray-light, 5%);
                     font-size: 13px;
                 }
             }
 
             &:hover {
                 .media-object {
-                    box-shadow: 0 0 0 @o-org-chart-entry-line-w*2 fade(@odoo-brand-optional, 60%);
+                    box-shadow: 0 0 0 $o-org-chart-entry-line-w*2 rgba($odoo-brand-optional, 0.6);
                 }
                 .media-body > a {
                     .media-heading {
-                        color: @odoo-brand-optional;
+                        color: $odoo-brand-optional;
                     }
                     strong {
-                        color: lighten(@gray-light, 5%);
+                        color: lighten($gray-light, 5%);
                     }
                 }
             }
@@ -235,18 +235,18 @@
 
         &.o_org_chart_entry_self {
             &:not(:first-child) {
-                margin-top: @o-org-chart-entry-v-gap*1.5;
+                margin-top: $o-org-chart-entry-v-gap*1.5;
             }
 
             strong {
-                color: @text-muted;
+                color: $text-muted;
             }
 
             .media-object {
-                .square(@o-org-chart-entry-pic-size);
+                @include square($o-org-chart-entry-pic-size);
                 margin: 0;
-                border: @o-org-chart-entry-line-w*2 solid @odoo-brand-optional;
-                box-shadow: inset 0 0 0 @o-org-chart-entry-line-w*2 white;
+                border: $o-org-chart-entry-line-w*2 solid $odoo-brand-optional;
+                box-shadow: inset 0 0 0 $o-org-chart-entry-line-w*2 white;
             }
 
             .media-body {
@@ -266,11 +266,11 @@
         padding-right: 50px;
 
         > a {
-            .o-position-absolute(@right: 14px);
+            @include o-position-absolute($right: 14px);
         }
 
         span {
-            .size(30px, 30px);
+            @include size(30px, 30px);
             margin-right: 10px;
             border-radius: 100%;
             background-position: center;
@@ -283,4 +283,3 @@
         margin-bottom: 0;
     }
 }
-