[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, 33 insertions, 40 deletions

diff --git a/addons/web/static/src/scss/web_calendar.scss b/addons/web/static/src/scss/web_calendar.scss
index 5179552b3b6..257e81bc89a 100644
--- a/addons/web/static/src/scss/web_calendar.scss
+++ b/addons/web/static/src/scss/web_calendar.scss
@@ -1,20 +1,20 @@
-@nb-calendar-colors: 24;
+$nb-calendar-colors: 24;
 
 @keyframes backgroundfade {
-    from {background-color: fade(@odoo-brand-primary, 50%);}
+    from {background-color: rgba($odoo-brand-primary, 0.5);}
     to {background-color: #f5f5f5;}
 }
 
 .o_calendar_container {
     height: 100%;
-    .o-webclient-padding(@top: @odoo-horizontal-padding/2, @bottom: @odoo-horizontal-padding/2);
-    .o-flex-display();
+    @include o-webclient-padding($top: $odoo-horizontal-padding/2, $bottom: $odoo-horizontal-padding/2);
+    @include o-flex-display;
 
-    .calendar_color_loop(@index) when (@index < @nb-calendar-colors+1) {
-        .o_calendar_color_@{index} {
+    @for $index from 1 through $nb-calendar-colors {
+        .o_calendar_color_#{$index} {
             color: #0D0D0D;
-            background-color: spin(rgb(255, 192, 192), 360/(@nb-calendar-colors+1) * @index);
-            border-color:  spin(rgb(255, 192, 192), 360/(@nb-calendar-colors+1) * @index);
+            background-color: adjust-hue(rgb(255, 192, 192), (360/($nb-calendar-colors+1) * $index) * 1deg);
+            border-color:  adjust-hue(rgb(255, 192, 192), (360/($nb-calendar-colors+1) * $index) * 1deg);
             opacity: 0.7;
             &.o_event_hightlight {
                 font-weight: bold;
@@ -24,30 +24,23 @@
                 color: #666 !important;
             }
         }
-        .calendar_color_loop(@index + 1);
-    }
-    .calendar_color_loop(1);
-
-    .underline_color_loop(@index) when (@index < @nb-calendar-colors+1) {
-        .o_underline_color_@{index} {
-            border-bottom: 4px solid spin(rgba(255, 192, 192, 0.7), 360/(@nb-calendar-colors+1) * @index);
+        .o_underline_color_#{$index} {
+            border-bottom: 4px solid adjust-hue(rgba(255, 192, 192, 0.7), (360/($nb-calendar-colors+1) * $index) * 1deg);
         }
-        .underline_color_loop(@index + 1);
     }
-    .underline_color_loop(1);
 
     .o_calendar_view {
-        .o-flex(1, 1, auto);
+        @include o-flex(1, 1, auto);
         min-width: 0;
 
         .o_calendar_widget {
             height: 100%;
-            background-color: @odoo-view-background-color;
+            background-color: $odoo-view-background-color;
             * {
                 z-index: 0; // FIXME
             }
             .fc-week-number, .fc-widget-header {
-                background-color: lighten(@odoo-brand-secondary, 30%);
+                background-color: lighten($odoo-brand-secondary, 30%);
             }
             .o_avatar_square {
                 border-radius: 5px;
@@ -71,19 +64,19 @@
     }
 
     .o_calendar_sidebar_container {
-        .o-flex(0, 0, @odoo-horizontal-padding);
+        @include o-flex(0, 0, $odoo-horizontal-padding);
         position: relative;
 
         &.o_sidebar_hidden {
-            margin-right: -@odoo-horizontal-padding; // hack to display the toggler in the gutter
+            margin-right: -$odoo-horizontal-padding; // hack to display the toggler in the gutter
             .o_calendar_sidebar_toggler {
                 padding: 4px;
-                color: darken(@odoo-webclient-background-color, 30%);
+                color: darken($odoo-webclient-background-color, 30%);
             }
         }
 
         .o_calendar_sidebar_toggler {
-            .o-position-absolute(@top: 0, @right: 0);
+            @include o-position-absolute($top: 0, $right: 0);
             cursor: pointer;
             padding: 6px;
             z-index: 1;
@@ -95,7 +88,7 @@
         .o_calendar_sidebar {
             width: 250px;
             margin-left: 8px;
-            background: @odoo-view-background-color;
+            background: $odoo-view-background-color;
         }
 
         .ui-datepicker {
@@ -106,18 +99,18 @@
             padding: 0;
 
             .ui-widget-header {
-                .o-flex-display();
+                @include o-flex-display;
                 background: none;
-                background-color: lighten(@odoo-brand-secondary, 30%);
+                background-color: lighten($odoo-brand-secondary, 30%);
                 border-radius: 0;
 
                 .ui-datepicker-prev, .ui-datepicker-next {
-                    .o-flex(0, 0, auto);
+                    @include o-flex(0, 0, auto);
                     position: static;
                     cursor: pointer;
                     padding: 2px;
                     text-align: center;
-                    color: @odoo-main-text-color;
+                    color: $odoo-main-text-color;
                     &.ui-state-hover {
                         background: none;
                         border: none;
@@ -142,7 +135,7 @@
                     }
                 }
                 .ui-datepicker-title {
-                    .o-flex(0, 0, auto);
+                    @include o-flex(0, 0, auto);
                     order: 2;
                     display: inline-block;
                     margin: 0 10px;
@@ -151,31 +144,31 @@
             table {
                 td {
                     padding: 0 2px 2px 0;
-                    background-color: @odoo-view-background-color;
+                    background-color: $odoo-view-background-color;
                     a {
                         border: none;
                         background: none;
-                        background-color: lighten(@odoo-brand-secondary, 40%);
+                        background-color: lighten($odoo-brand-secondary, 40%);
                         text-align: center;
                     }
                 }
                 .ui-state-default {
-                    color: @odoo-brand-primary;
+                    color: $odoo-brand-primary;
                     &:hover {
                         background: none;
-                        background-color: fade(@odoo-brand-primary, 50%);
-                        border-color: @odoo-brand-primary;
-                        color: @odoo-view-background-color;
+                        background-color: rgba($odoo-brand-primary, 0.5);
+                        border-color: $odoo-brand-primary;
+                        color: $odoo-view-background-color;
                     };
                 }
                 .ui-state-active {
                     background: none;
-                    background-color: @odoo-brand-primary;
-                    color: @odoo-view-background-color;
+                    background-color: $odoo-brand-primary;
+                    color: $odoo-view-background-color;
                 }
                 .o_selected_range.o_color {
                     background: none;
-                    background-color: @odoo-brand-primary;
+                    background-color: $odoo-brand-primary;
                     animation: backgroundfade 3s forwards;
                 }
             }
@@ -213,7 +206,7 @@
         padding: 0;
     }
 }
-@media (max-width: @screen-xs-max) {
+@media (max-width: $screen-xs-max) {
     .o_control_panel {
         .o_calendar_button_today {
             float: right;