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

diff --git a/addons/web/static/src/scss/bootstrap_overridden.scss b/addons/web/static/src/scss/bootstrap_overridden.scss
index 5bbe61ecdf6..9a364231415 100644
--- a/addons/web/static/src/scss/bootstrap_overridden.scss
+++ b/addons/web/static/src/scss/bootstrap_overridden.scss
@@ -3,74 +3,74 @@
 // ------------------------------------------------------------------
 
 //== Grid
-@grid-gutter-width: @odoo-horizontal-padding*2;
+$grid-gutter-width: $odoo-horizontal-padding*2;
 
 //== Colors
-@brand-primary: @odoo-brand-primary;
-@gray-lighter: @odoo-color-silver;
+$brand-primary: $odoo-brand-primary;
+$gray-lighter: $odoo-color-silver;
 
 //== Titles
-@font-size-h1: @odoo-font-size-base + 13px;
-@font-size-h2: @odoo-font-size-base + 7px;
-@font-size-h3: @odoo-font-size-base + 3px;
-@font-size-h4: @odoo-font-size-base + 2px;
-@font-size-h5: @odoo-font-size-base + 1px;
-@font-size-h6: @odoo-font-size-base;
+$font-size-h1: $odoo-font-size-base + 13px;
+$font-size-h2: $odoo-font-size-base + 7px;
+$font-size-h3: $odoo-font-size-base + 3px;
+$font-size-h4: $odoo-font-size-base + 2px;
+$font-size-h5: $odoo-font-size-base + 1px;
+$font-size-h6: $odoo-font-size-base;
 
 //== Scaffolding
-@body-bg: @odoo-brand-secondary;
-@text-color: @odoo-main-text-color;
-@link-color: @odoo-brand-optional;
-@link-hover-decoration: none;
+$body-bg: $odoo-brand-secondary;
+$text-color: $odoo-main-text-color;
+$link-color: $odoo-brand-optional;
+$link-hover-decoration: none;
 
 //== Typography
-@font-family-sans-serif: "Lucida Grande", Helvetica, Verdana, Arial, sans-serif;
-@font-size-base: @odoo-font-size-base;
-@headings-font-weight: bold;
+$font-family-sans-serif: "Lucida Grande", Helvetica, Verdana, Arial, sans-serif;
+$font-size-base: $odoo-font-size-base;
+$headings-font-weight: bold;
 
 //== Components
-@component-active-bg: @gray-lighter;
-@component-active-color: @odoo-brand-optional;
+$component-active-bg: $gray-lighter;
+$component-active-color: $odoo-brand-optional;
 
 //== Badges
-@badge-bg: @odoo-brand-optional;
-@badge-color: white;
-@badge-line-height: @line-height-base;
-@badge-font-weight: normal;
+$badge-bg: $odoo-brand-optional;
+$badge-color: white;
+$badge-line-height: $line-height-base;
+$badge-font-weight: normal;
 
 //== Breadcrumbs
-@breadcrumb-active-color: #777777;
-@breadcrumb-bg: @odoo-control-panel-background-color;
-@breadcrumb-color: #777777;
-@breadcrumb-padding-horizontal: 0;
-@breadcrumb-padding-vertical: 0;
+$breadcrumb-active-color: #777777;
+$breadcrumb-bg: $odoo-control-panel-background-color;
+$breadcrumb-color: #777777;
+$breadcrumb-padding-horizontal: 0;
+$breadcrumb-padding-vertical: 0;
 
 //== Buttons
-@btn-default-bg: white;
-@btn-default-border: #cccccc;
-@btn-default-color: @odoo-main-text-color;
-@btn-primary-bg: @odoo-brand-optional;
-@btn-primary-border: @odoo-brand-optional;
-@btn-primary-color: white;
+$btn-default-bg: white;
+$btn-default-border: #cccccc;
+$btn-default-color: $odoo-main-text-color;
+$btn-primary-bg: $odoo-brand-optional;
+$btn-primary-border: $odoo-brand-optional;
+$btn-primary-color: white;
 
 //== Dropdowns
-@dropdown-bg: white;
-@dropdown-border: @gray-lighter-dark;
-@dropdown-divider-bg: @gray-lighter-dark;
-@dropdown-link-color: @odoo-main-text-color;
-@dropdown-link-hover-color: @gray-dark;
-@dropdown-link-hover-bg: @gray-lighter;
-@dropdown-link-active-color: @component-active-color;
-@dropdown-link-active-bg: @component-active-bg;
-@dropdown-link-disabled-color: @gray-light;
-@dropdown-header-color: @gray-light;
+$dropdown-bg: white;
+$dropdown-border: $gray-lighter-dark;
+$dropdown-divider-bg: $gray-lighter-dark;
+$dropdown-link-color: $odoo-main-text-color;
+$dropdown-link-hover-color: $gray-dark;
+$dropdown-link-hover-bg: $gray-lighter;
+$dropdown-link-active-color: $component-active-color;
+$dropdown-link-active-bg: $component-active-bg;
+$dropdown-link-disabled-color: $gray-light;
+$dropdown-header-color: $gray-light;
 
 //== Modals
-@modal-sm: 300px;
-@modal-md: 650px;
-@modal-lg: 980px;
-@modal-inner-padding: @odoo-horizontal-padding;
-@modal-title-padding: @odoo-horizontal-padding;
+$modal-sm: 300px;
+$modal-md: 650px;
+$modal-lg: 980px;
+$modal-inner-padding: $odoo-horizontal-padding;
+$modal-title-padding: $odoo-horizontal-padding;
 
 // Change the z-index of the modal-backdrop elements to be equal to the
 // modal elements' ones. Bootstrap does not support multi-modals, and without
@@ -81,32 +81,32 @@
 // cannot happen in odoo though as modals are not hidden but removed from
 // the DOM and are always put at the end of the body when opened.
 //
-// Note that the variable @zindex-modal-background may be renamed/removed in
+// Note that the variable $zindex-modal-background may be renamed/removed in
 // newer versions of bootstrap.
 //
 // TODO the following code was disabled because it is saas-incompatible
 //
-// @zindex-modal-background: @zindex-modal;
+// $zindex-modal-background: $zindex-modal;
 
 //== Navs
-@nav-link-padding: 10px 15px;
-@nav-pills-border-radius: 0;
-@nav-pills-active-link-hover-color: white;
-@nav-pills-active-link-hover-bg: @odoo-brand-optional;
-@nav-tabs-active-link-hover-bg: white;
+$nav-link-padding: 10px 15px;
+$nav-pills-border-radius: 0;
+$nav-pills-active-link-hover-color: white;
+$nav-pills-active-link-hover-bg: $odoo-brand-optional;
+$nav-tabs-active-link-hover-bg: white;
 
 //== Navbar
-@navbar-height: @odoo-navbar-height - 2;
-@navbar-margin-bottom: 0;
-@navbar-inverse-bg: #222222;
-@navbar-inverse-link-color: #9d9d9d;
-@navbar-inverse-link-hover-bg: #222222;
-@navbar-inverse-toggle-hover-bg: #222222;
-@navbar-border-radius: 0;
+$navbar-height: $odoo-navbar-height - 2;
+$navbar-margin-bottom: 0;
+$navbar-inverse-bg: #222222;
+$navbar-inverse-link-color: #9d9d9d;
+$navbar-inverse-link-hover-bg: #222222;
+$navbar-inverse-toggle-hover-bg: #222222;
+$navbar-border-radius: 0;
 
 //== Tables
-@table-bg-accent: #efeff8; // FIXME: expose
-@table-bg-hover: darken(@table-bg-accent,5%);
+$table-bg-accent: #efeff8; // FIXME: expose
+$table-bg-hover: darken($table-bg-accent,5%);
 
 // ------------------------------------------------------------------
 // Bootstrap components rules (non exposed features variables)
@@ -121,9 +121,9 @@
 
 //== Buttons
 // Mixin to define variations for btn-links and muted btn-links
-.o-btn-link-variant(@color, @color-active) {
+@mixin o-btn-link-variant($color, $color-active) {
     text-transform: none;
-    .o-hover-text-color(@default-color: @color, @hover-color: @color-active);
+    @include o-hover-text-color($default-color: $color, $hover-color: $color-active);
 
     &, &:hover, &:focus, &:active, &.active {
         border-color: transparent;
@@ -131,30 +131,30 @@
     }
 
     &.text-muted, .text-muted {
-        .o-hover-opacity();
-        .o-hover-text-color(@default-color: @text-muted, @hover-color: @color-active);
+        @include o-hover-opacity;
+        @include o-hover-text-color($default-color: $text-muted, $hover-color: $color-active);
     }
 }
 .btn-icon {
-  .button-variant(@btn-default-color; @btn-default-bg; @btn-default-border);
+  @include button-variant($btn-default-color, $btn-default-bg, $btn-default-border);
 }
 .btn-link {
-    font-weight: @btn-font-weight;
+    font-weight: $btn-font-weight;
 
     &.btn-default {
-        .o-btn-link-variant(@text-color, @headings-color);
+        @include o-btn-link-variant($text-color, $headings-color);
     }
     &.btn-success, &.text-success {
-        .o-btn-link-variant(@text-color, @brand-success);
+        @include o-btn-link-variant($text-color, $brand-success);
     }
     &.btn-warning, &.text-warning {
-        .o-btn-link-variant(@text-color, @brand-warning);
+        @include o-btn-link-variant($text-color, $brand-warning);
     }
     &.btn-danger, &.text-danger {
-        .o-btn-link-variant(@text-color, @brand-danger);
+        @include o-btn-link-variant($text-color, $brand-danger);
     }
     &.btn-info, &.text-info {
-        .o-btn-link-variant(@text-color, darken(@brand-info, 20%));
+        @include o-btn-link-variant($text-color, darken($brand-info, 20%));
     }
 }