[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, 131 insertions, 122 deletions

diff --git a/addons/web/static/src/scss/utils.scss b/addons/web/static/src/scss/utils.scss
index e89da21b4f6..6db15976bd5 100644
--- a/addons/web/static/src/scss/utils.scss
+++ b/addons/web/static/src/scss/utils.scss
@@ -5,53 +5,53 @@
 // ------------------------------------------------------------------
 // Padding
 // ------------------------------------------------------------------
-.o-webclient-padding(@top: 0px, @right: @odoo-horizontal-padding, @bottom: 0px, @left: @odoo-horizontal-padding) {
-    padding-top: @top;
-    padding-right: @right;
-    padding-bottom: @bottom;
-    padding-left: @left;
+@mixin o-webclient-padding($top: 0px, $right: $odoo-horizontal-padding, $bottom: 0px, $left: $odoo-horizontal-padding) {
+    padding-top: $top;
+    padding-right: $right;
+    padding-bottom: $bottom;
+    padding-left: $left;
 }
 
 // ------------------------------------------------------------------
 // Caret
 // ------------------------------------------------------------------
-.utils-caret-boilerplate() {
+@mixin utils-caret-boilerplate {
     content: "";
     display: inline-block;
     width: 0;
     height: 0;
     vertical-align: middle;
 }
-.o-caret-down(@caret-width: @caret-width-base) {
-    .utils-caret-boilerplate;
+@mixin o-caret-down($caret-width: $caret-width-base) {
+    @include utils-caret-boilerplate;
     border-bottom: 0;
-    border-left: @caret-width solid transparent;
-    border-right: @caret-width solid transparent;
-    border-top: @caret-width solid;
+    border-left: $caret-width solid transparent;
+    border-right: $caret-width solid transparent;
+    border-top: $caret-width solid;
     -moz-transform: scale(0.9999); // Smooth the caret on firefox
 }
-.o-caret-up(@caret-width: @caret-width-base) {
-    .utils-caret-boilerplate;
-    border-bottom: @caret-width solid;
-    border-left: @caret-width solid transparent;
-    border-right: @caret-width solid transparent;
+@mixin o-caret-up($caret-width: $caret-width-base) {
+    @include utils-caret-boilerplate;
+    border-bottom: $caret-width solid;
+    border-left: $caret-width solid transparent;
+    border-right: $caret-width solid transparent;
     border-top: 0;
     -moz-transform: scale(0.9999); // Smooth the caret on firefox
 }
-.o-caret-left(@caret-width: @caret-width-base) {
-    .utils-caret-boilerplate;
-    border-bottom: @caret-width solid transparent;
+@mixin o-caret-left($caret-width: $caret-width-base) {
+    @include utils-caret-boilerplate;
+    border-bottom: $caret-width solid transparent;
     border-left: 0;
-    border-right: @caret-width solid;
-    border-top: @caret-width solid transparent;
+    border-right: $caret-width solid;
+    border-top: $caret-width solid transparent;
     -moz-transform: scale(0.9999); // Smooth the caret on firefox
 }
-.o-caret-right(@caret-width: @caret-width-base) {
-    .utils-caret-boilerplate;
-    border-bottom: @caret-width solid transparent;
-    border-left: @caret-width solid;
+@mixin o-caret-right($caret-width: $caret-width-base) {
+    @include utils-caret-boilerplate;
+    border-bottom: $caret-width solid transparent;
+    border-left: $caret-width solid;
     border-right: 0;
-    border-top: @caret-width solid transparent;
+    border-top: $caret-width solid transparent;
     -moz-transform: scale(0.9999); // Smooth the caret on firefox
 }
 
@@ -59,7 +59,7 @@
 // Vendor prefixes
 // ------------------------------------------------------------------
 // Flex
-.o-flex-display() {
+@mixin o-flex-display {
     display: -ms-flexbox;
     display: -moz-box;
     display: -webkit-box;
@@ -67,7 +67,7 @@
 
     display: flex;
 }
-.o-inline-flex-display() {
+@mixin o-inline-flex-display {
     display: -ms-inline-flexbox;
     display: -moz-inline-box;
     display: -webkit-inline-box;
@@ -75,66 +75,66 @@
 
     display: inline-flex;
 }
-.o-flex-flow(@direction, @wrap) {
-    -ms-flex-flow: @direction @wrap;
-    -moz-flex-flow: @direction @wrap;
-    -webkit-flex-flow: @direction @wrap;
+@mixin o-flex-flow($direction, $wrap) {
+    -ms-flex-flow: $direction $wrap;
+    -moz-flex-flow: $direction $wrap;
+    -webkit-flex-flow: $direction $wrap;
 
-    flex-flow: @direction @wrap;
+    flex-flow: $direction $wrap;
 }
-.o-flex(@grow, @schrink, @basis) {
-    -ms-flex: @grow @schrink @basis;
-    -moz-flex: @grow @schrink @basis;
-    -webkit-box-flex: @grow;
-    -webkit-flex: @grow @schrink @basis;
+@mixin o-flex($grow, $schrink, $basis) {
+    -ms-flex: $grow $schrink $basis;
+    -moz-flex: $grow $schrink $basis;
+    -webkit-box-flex: $grow;
+    -webkit-flex: $grow $schrink $basis;
 
-    flex: @grow @schrink @basis;
+    flex: $grow $schrink $basis;
 }
-.o-justify-content(@justify) {
-    -moz-justify-content: @justify;
-    -webkit-justify-content: @justify;
+@mixin o-justify-content($justify) {
+    -moz-justify-content: $justify;
+    -webkit-justify-content: $justify;
 
-    justify-content: @justify;
+    justify-content: $justify;
 }
-.o-align-content(@align) {
-    -webkit-align-content: @align;
+@mixin o-align-content($align) {
+    -webkit-align-content: $align;
 
-    align-content: @align;
+    align-content: $align;
 }
-.o-align-items(@align) {
-    -webkit-align-items: @align;
+@mixin o-align-items($align) {
+    -webkit-align-items: $align;
 
-    align-items: @align;
+    align-items: $align;
 }
-.o-align-self(@align) {
-    -webkit-align-self: @align;
+@mixin o-align-self($align) {
+    -webkit-align-self: $align;
 
-    align-self: @align;
+    align-self: $align;
 }
 
 // Background-size
-.o-background-size(@size) {
-    -webkit-background-size: @size;
-    -moz-background-size: @size;
-    -o-background-size: @size;
-    background-size: @size;
+@mixin o-background-size($size) {
+    -webkit-background-size: $size;
+    -moz-background-size: $size;
+    -o-background-size: $size;
+    background-size: $size;
 }
 
 // ------------------------------------------------------------------
 // Dropdowns
 // ------------------------------------------------------------------
-.o-selected-li() {
+@mixin o-selected-li {
     li {
         position: relative;
         > a {
-            color: @odoo-main-text-color;
+            color: $odoo-main-text-color;
             &:hover {
-                color: darken(@odoo-main-text-color, 10%);
+                color: darken($odoo-main-text-color, 10%);
             }
         }
         &.selected {
             > a {
-                color: darken(@odoo-main-text-color, 10%);
+                color: darken($odoo-main-text-color, 10%);
                 font-weight: bold;
                 &:before {
                     font-family: FontAwesome;
@@ -150,68 +150,68 @@
 // ------------------------------------------------------------------
 // Select Appearance
 // ------------------------------------------------------------------
-.o-appearance(@value) {
-    -webkit-appearance: @value;
-    -moz-appearance: @value;
-    appearance: @value;
+@mixin o-appearance($value) {
+    -webkit-appearance: $value;
+    -moz-appearance: $value;
+    appearance: $value;
 }
 
 // ------------------------------------------------------------------
 // Transform
 // ------------------------------------------------------------------
-.o-transform-origin(@x: 50%, @y: 50%, @z: 0) {
-    -ms-transform-origin: @x @y @z;
-    -webkit-transform-origin: @x @y @z;
-    -moz-transform-origin: @x @y @z;
-    transform-origin: @x @y @z;
+@mixin o-transform-origin($x: 50%, $y: 50%, $z: 0) {
+    -ms-transform-origin: $x $y $z;
+    -webkit-transform-origin: $x $y $z;
+    -moz-transform-origin: $x $y $z;
+    transform-origin: $x $y $z;
 }
 
 // ------------------------------------------------------------------
 // Animation
 // ------------------------------------------------------------------
-.o-animation(@name: none, @duration: 0s, @timing-function: ease, @delay: 0s, @iteration-count: 1, @direction: normal, @fill-mode: none, @play-state: running) {
-    -webkit-animation: @name @duration @timing-function @delay @iteration-count @direction @fill-mode @play-state;
-    -moz-animation: @name @duration @timing-function @delay @iteration-count @direction @fill-mode @play-state;
-    -o-animation: @name @duration @timing-function @delay @iteration-count @direction @fill-mode @play-state;
-    animation: @name @duration @timing-function @delay @iteration-count @direction @fill-mode @play-state;
+@mixin o-animation($name: none, $duration: 0s, $timing-function: ease, $delay: 0s, $iteration-count: 1, $direction: normal, $fill-mode: none, $play-state: running) {
+    -webkit-animation: $name $duration $timing-function $delay $iteration-count $direction $fill-mode $play-state;
+    -moz-animation: $name $duration $timing-function $delay $iteration-count $direction $fill-mode $play-state;
+    -o-animation: $name $duration $timing-function $delay $iteration-count $direction $fill-mode $play-state;
+    animation: $name $duration $timing-function $delay $iteration-count $direction $fill-mode $play-state;
 }
 
 // ------------------------------------------------------------------
 // Transition
 // ------------------------------------------------------------------
-.o-transition(@property: all, @duration: 0s, @timing-function: ease, @transition-delay: 0s) {
-    -webkit-transition: @property @duration @timing-function @transition-delay;
-    -moz-transition: @property @duration @timing-function @transition-delay;
-    -o-transition: @property @duration @timing-function @transition-delay;
-    transition: @property @duration @timing-function @transition-delay;
+@mixin o-transition($property: all, $duration: 0s, $timing-function: ease, $transition-delay: 0s) {
+    -webkit-transition: $property $duration $timing-function $transition-delay;
+    -moz-transition: $property $duration $timing-function $transition-delay;
+    -o-transition: $property $duration $timing-function $transition-delay;
+    transition: $property $duration $timing-function $transition-delay;
 }
 
 // ------------------------------------------------------------------
 // Columns
 // ------------------------------------------------------------------
-.o-columns(@width: auto, @col: auto) {
-    -webkit-columns: @width @col;
-    -moz-columns: @width @col;
-    columns: @width @col;
+@mixin o-columns($width: auto, $col: auto) {
+    -webkit-columns: $width $col;
+    -moz-columns: $width $col;
+    columns: $width $col;
 }
 
 // ------------------------------------------------------------------
 // Position absolute
 // ------------------------------------------------------------------
-.o-position-absolute(@top: auto, @right: auto, @bottom: auto, @left: auto) {
+@mixin o-position-absolute($top: auto, $right: auto, $bottom: auto, $left: auto) {
     position: absolute;
-    top: @top;
-    left: @left;
-    bottom: @bottom;
-    right: @right;
+    top: $top;
+    left: $left;
+    bottom: $bottom;
+    right: $right;
 }
 
 // ------------------------------------------------------------------
 // Text overflow
 // ------------------------------------------------------------------
-.o-text-overflow(@display: inline-block, @max-width: 100%) {
-    display: @display;
-    max-width: @max-width;
+@mixin o-text-overflow($display: inline-block, $max-width: 100%) {
+    display: $display;
+    max-width: $max-width;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -221,54 +221,63 @@
 // ------------------------------------------------------------------
 // Gradients
 // ------------------------------------------------------------------
-.o-linear-gradient(@deg: 45deg, @start-color: #555, @end-color: #333) {
+@mixin o-linear-gradient($deg: 45deg, $start-color: #555, $end-color: #333) {
     background-repeat: repeat-x;
-    background-image: -webkit-linear-gradient(@deg, @start-color, @end-color);
-    background-image: -o-linear-gradient(@deg, @start-color, @end-color);
-    background-image: linear-gradient(@deg, @start-color, @end-color);
+    background-image: -webkit-linear-gradient($deg, $start-color, $end-color);
+    background-image: -o-linear-gradient($deg, $start-color, $end-color);
+    background-image: linear-gradient($deg, $start-color, $end-color);
 }
-.o-vertical-gradient(@startColor: #555, @endColor: #333) {
-    background-color: mix(@startColor, @endColor);
-    background-image: -webkit-gradient(linear, left top, left bottom, from(@startColor), to(@endColor));
-    background-image: -webkit-linear-gradient(top, @startColor, @endColor);
-    background-image: -moz-linear-gradient(top, @startColor, @endColor);
-    background-image: -ms-linear-gradient(top, @startColor, @endColor);
-    background-image: -o-linear-gradient(top, @startColor, @endColor);
-    background-image: linear-gradient(to bottom, @startColor, @endColor);
+@mixin o-vertical-gradient($startColor: #555, $endColor: #333) {
+    background-color: mix($startColor, $endColor);
+    background-image: -webkit-gradient(linear, left top, left bottom, from($startColor), to($endColor));
+    background-image: -webkit-linear-gradient(top, $startColor, $endColor);
+    background-image: -moz-linear-gradient(top, $startColor, $endColor);
+    background-image: -ms-linear-gradient(top, $startColor, $endColor);
+    background-image: -o-linear-gradient(top, $startColor, $endColor);
+    background-image: linear-gradient(to bottom, $startColor, $endColor);
 }
-.o-skew-gradient(@startColor: #555, @endColor: #333) {
-    background-color: @endColor;
-    background: -moz-linear-gradient(135deg, @endColor, @startColor);
-    background: -o-linear-gradient(135deg, @startColor, @endColor);
-    background: -webkit-gradient(linear, left top, right bottom, from(@startColor), to(@endColor));
-    background: -ms-linear-gradient(top, @startColor, @endColor);
+@mixin o-skew-gradient($startColor: #555, $endColor: #333) {
+    background-color: $endColor;
+    background: -moz-linear-gradient(135deg, $endColor, $startColor);
+    background: -o-linear-gradient(135deg, $startColor, $endColor);
+    background: -webkit-gradient(linear, left top, right bottom, from($startColor), to($endColor));
+    background: -ms-linear-gradient(top, $startColor, $endColor);
 }
 
 // ------------------------------------------------------------------
 // Transform
 // ------------------------------------------------------------------
-.o-transform(@transform) {
-    -webkit-transform: @transform;
-    -moz-transform: @transform;
-    -ms-transform: @transform;
-    -o-transform: @transform;
-    transform: @transform;
+@mixin o-transform($transform) {
+    -webkit-transform: $transform;
+    -moz-transform: $transform;
+    -ms-transform: $transform;
+    -o-transform: $transform;
+    transform: $transform;
 }
 
 // ------------------------------------------------------------------
 // Hovering effects
 // ------------------------------------------------------------------
-.o-hover-opacity(@default-opacity: 0.5, @hover-opacity: 1) {
-    opacity: @default-opacity;
+@mixin o-hover-opacity($default-opacity: 0.5, $hover-opacity: 1) {
+    opacity: $default-opacity;
 
     &:hover, &:focus, &.focus {
-        opacity: @hover-opacity;
+        opacity: $hover-opacity;
     }
 }
-.o-hover-text-color(@default-color: @text-color, @hover-color: @link-color) {
-    color: @default-color;
+@mixin o-hover-text-color($default-color: $text-color, $hover-color: $link-color) {
+    color: $default-color;
 
     &:hover, &:focus, &.focus {
-        color: @hover-color;
+        color: $hover-color;
     }
 }
+
+//------------------------------------------------------------------------------
+// Colors
+//------------------------------------------------------------------------------
+
+@function o-get-most-contrast($color, $c1, $c2) {
+    $brightness: brightness($color);
+    @return if(abs($brightness - brightness($c1)) > abs($brightness - brightness($c2)), $c1, $c2);
+}