[REF] *: get rid of vendor prefixes

BS4 do not provide vendor prefixes scss mixins anymore as it is meant
to be used with the 'autoprefixer' library. As we only support the last
version of every major browsers in Odoo, we took the decision to not
use the library as it was also complex to integrate in Odoo. We decided
to do the library's work by hand if it ever become necessary.

25 files changed, 262 insertions, 428 deletions

diff --git a/addons/web/static/src/scss/animation.scss b/addons/web/static/src/scss/animation.scss
index 92097a23298..d65a509bcad 100644
--- a/addons/web/static/src/scss/animation.scss
+++ b/addons/web/static/src/scss/animation.scss
@@ -144,19 +144,3 @@
             transform: scale3d(1, 1, 1);
   }
 }
-
-/************** MIXINS for ANIMATIONS **************/
-@mixin o-display-marked($content, $top, $left, $color) {
-    @include o-position-absolute($top: $top, $left: $left);
-    font-size: 300px;
-    font-family: "FontAwesome";
-    content: $content;
-    color: $color;
-    @include o-transform-origin;
-    @include o-animation(markAnim, 1s, ease-in-out, 0s, 1, normal, forwards);
-
-    @media (max-width: $screen-sm-max) {
-        left: 40%;
-        font-size: 30vw;
-    }
-}
diff --git a/addons/web/static/src/scss/base_settings.scss b/addons/web/static/src/scss/base_settings.scss
index 7cd25c7e578..2ebad35337a 100644
--- a/addons/web/static/src/scss/base_settings.scss
+++ b/addons/web/static/src/scss/base_settings.scss
@@ -9,8 +9,8 @@
 
 // Use a very specif selector to overwrite generic form-view rules
 .o_form_view.o_form_nosheet.o_base_settings {
-    @include o-flex-display;
-    @include o-flex-flow(column, nowrap);
+    display: flex;
+    flex-flow: column nowrap;
     padding: 0px;
 }
 
@@ -19,18 +19,18 @@
     height: 100%;
 
     @media (max-width: $screen-xs-max) {
-        @include o-flex-flow(column, nowrap);
+        flex-flow: column nowrap;
     }
 
     .o_control_panel {
         .o_panel {
-            @include o-flex-display;
-            @include o-flex-flow(row, wrap);
+            display: flex;
+            flex-flow: row wrap;
             margin-bottom: $o-sheet-vpadding*0.5;
             width: 100%;
 
             .title, .o_setting_search {
-                @include o-flex(1, 0, auto);
+                flex: 1 0 auto;
                 width: $screen-xs-min*0.5;
             }
 
@@ -70,26 +70,26 @@
     }
 
     .o_setting_container {
-        @include o-flex-display;
-        @include o-flex(1, 1, auto);
+        display: flex;
+        flex: 1 1 auto;
 
         overflow: auto;
 
         @media (max-width: $screen-xs-max) {
-            @include o-flex-flow(column, nowrap);
+            flex-flow: column nowrap;
         }
 
         .settings_tab {
-            @include o-flex-display;
-            @include o-flex(0, 0, auto);
-            @include o-flex-flow(column, nowrap);
+            display: flex;
+            flex: 0 0 auto;
+            flex-flow: column nowrap;
             background: $gray-dark;
             overflow: auto;
             padding-top: $o-horizontal-padding*0.5;
 
             @media (max-width: $screen-xs-max) {
-                @include o-flex(0, 0, $o-base-settings-mobile-tabs-height);
-                @include o-inline-flex-display;
+                flex: 0 0 $o-base-settings-mobile-tabs-height;
+                display: inline-flex;
                 position: relative;
                 overflow: hidden;
                 padding: 0;
@@ -105,7 +105,7 @@
             }
 
             .tab {
-                @include o-flex-display;
+                display: flex;
                 padding: 0 $o-horizontal-padding*2 0 $o-horizontal-padding;
                 height: 40px;
                 color: $gray-lighter-darker;
@@ -128,8 +128,8 @@
                     font-size: 14px;
                     font-weight: 500;
                     line-height: inherit;
-                    @include o-transition(0.2s, all);
-                    @include o-transform(translate3d(0,0,0));
+                    transition: 0.2s all ease 0s;
+                    transform: translate3d(0,0,0);
 
                     .app_name {
                         display: block;
@@ -142,7 +142,7 @@
                         opacity: 0;
                         @include o-position-absolute(auto, 0, 0, 0);
                         @include size(100%, 3px);
-                        @include o-transition(0.2s, all);
+                        transition: 0.2s all ease 0s;
                     }
 
                     &.previous, &.before {
@@ -171,7 +171,7 @@
 
         .settings {
             position: relative;
-            @include o-flex(1, 1, 100%);
+            flex: 1 1 100%;
             background-color: $o-view-background-color;
             overflow: auto;
 
@@ -196,7 +196,7 @@
             }
 
             .settingSearchHeader {
-                @include o-flex-display;
+                display: flex;
                 margin: 30px 0 10px;
                 @include o-base-settings-horizontal-padding;
                 background-color: $gray-lighter;
diff --git a/addons/web/static/src/scss/control_panel.scss b/addons/web/static/src/scss/control_panel.scss
index 13913bdf3d5..345009ac3e9 100644
--- a/addons/web/static/src/scss/control_panel.scss
+++ b/addons/web/static/src/scss/control_panel.scss
@@ -1,7 +1,7 @@
 
 .o_control_panel {
-    @include o-flex-display;
-    @include o-flex-flow(row, wrap);
+    display: flex;
+    flex-flow: row wrap;
     border-bottom: 1px solid darken($o-control-panel-background-color, 20%);
     @include o-webclient-padding($top: 10px, $bottom: 10px);
     background-color: $o-control-panel-background-color;
@@ -36,8 +36,8 @@
     }
 
     > .o_cp_left {
-        @include o-flex-display;
-        @include o-justify-content(space-between);
+        display: flex;
+        justify-content: space-between;
         width: 50%;
         margin-top: 5px;
 
@@ -71,7 +71,7 @@
     }
 
     > .o_cp_right {
-        @include o-flex-display;
+        display: flex;
         width: 50%;
         margin-top: 5px;
 
@@ -79,11 +79,11 @@
             margin: auto 0 auto auto;
             padding-left: 5px;
             text-align: center;
-            @include user-select(none);
+            user-select: none;
 
             > div {
-                @include o-flex-display;
-                @include o-align-items(center);
+                display: flex;
+                align-items: center;
             }
 
             .o_pager_counter {
@@ -101,11 +101,11 @@
 }
 
 .o_x2m_control_panel {
-    @include o-flex-display;
-    @include o-flex-flow(row, wrap);
+    display: flex;
+    flex-flow: row wrap;
 
     .o_cp_buttons {
-        @include o-flex-display;
+        display: flex;
         margin-right: auto;
         > div {
             margin-top: 5px;
@@ -115,7 +115,7 @@
         }
     }
     .o_cp_pager {
-        @include o-flex-display;
+        display: flex;
         margin-left: auto;
     }
 }
diff --git a/addons/web/static/src/scss/data_export.scss b/addons/web/static/src/scss/data_export.scss
index 17cec27d3a5..ab2635657ad 100644
--- a/addons/web/static/src/scss/data_export.scss
+++ b/addons/web/static/src/scss/data_export.scss
@@ -1,23 +1,23 @@
 .o_web_client .o_export {
-    @include o-flex(1, 1, auto);
-    @include o-flex-display;
-    @include o-flex-flow(column, nowrap);
+    flex: 1 1 auto;
+    display: flex;
+    flex-flow: column nowrap;
     min-height: 0;
 
     > p, > .row {
-        @include o-flex(0, 0, auto);
+        flex: 0 0 auto;
     }
 
     .o_export_panel {
-        @include o-flex(1, 1, auto);
+        flex: 1 1 auto;
         position: relative;
         min-height: 0;
 
         > div {
             height: 100%;
-            @include o-flex-display;
-            @include o-flex-flow(column, nowrap);
-            @include o-justify-content(center);
+            display: flex;
+            flex-flow: column nowrap;
+            justify-content: center;
 
             &.o_left_panel { // Needed because of chrome
                 @include o-position-absolute($top: 0, $bottom: 0, $left: 0, $right: 57%);
@@ -30,18 +30,18 @@
             }
 
             > h4, > div {
-                @include o-flex(0, 0, auto);
+                flex: 0 0 auto;
             }
 
             > button {
-                @include o-flex(0, 0, auto);
+                flex: 0 0 auto;
                 margin-top: 10px;
             }
 
             .o_left_field_panel, .o_fields_list {
                 border: 1px solid $o-brand-lightsecondary;
                 overflow: auto;
-                @include o-flex(1, 1, auto);
+                flex: 1 1 auto;
                 min-height: 0;
             }
 
@@ -49,7 +49,7 @@
                 cursor: pointer;
                 position: relative;
                 padding-left: 20px;
-                @include user-select(none);
+                user-select: none;
 
                 &.o_selected > .o_tree_column {
                     background-color: $o-brand-primary;
@@ -74,16 +74,16 @@
             }
 
             .o_save_list, .o_exported_lists {
-                @include o-flex-display;
-                @include o-align-items(baseline);
+                display: flex;
+                align-items: baseline;
 
                 > label, > button {
                     margin: 0 0 5px;
-                    @include o-flex(0, 0, auto);
+                    flex: 0 0 auto;
                 }
                 > input, > select {
                     width: 0;
-                    @include o-flex(1, 0, auto);
+                    flex: 1 0 auto;
                 }
             }
         }
diff --git a/addons/web/static/src/scss/domain_selector.scss b/addons/web/static/src/scss/domain_selector.scss
index 6755bed49e9..ed4ed956a9e 100644
--- a/addons/web/static/src/scss/domain_selector.scss
+++ b/addons/web/static/src/scss/domain_selector.scss
@@ -9,12 +9,12 @@
 
     // Rows in a domain node (selector) have a minimum height and holds the control panel
     .o_domain_selector_row {
-        @include o-flex-display;
-        @include o-align-items(center);
+        display: flex;
+        align-items: center;
         min-height: $o-domain-selector-row-height;
 
         > * {
-            @include o-flex(0, 0, auto);
+            flex: 0 0 auto;
         }
 
         > .o_domain_node_control_panel {
@@ -92,7 +92,7 @@
     // Rules specific to domain parts which do not contain sub-domain parts
     &.o_domain_leaf {
         &.o_read_mode {
-            @include o-inline-flex-display;
+            display: inline-flex;
             margin-right: 4px;
         }
 
@@ -119,21 +119,21 @@
         }
 
         > .o_domain_leaf_edition {
-            @include o-flex-display;
+            display: flex;
             width: 100%;
             padding: 4px ($o-domain-selector-panel-space/2) 4px 0;
 
             > * {
-                @include o-flex(1, 1, 15%); // operator select
+                flex: 1 1 15%; // operator select
                 width: auto;
                 background-color: white;
 
                 &:first-child { // field selector
-                    @include o-flex(0, 1, 55%);
+                    flex: 0 1 55%;
                 }
 
                 &:last-child { // field value
-                    @include o-flex(1, 1, 25%);
+                    flex: 1 1 25%;
                 }
 
                 + * {
@@ -146,13 +146,13 @@
             }
 
             .o_domain_leaf_value_tags {
-                @include o-flex-display;
+                display: flex;
 
                 > * {
-                    @include o-flex(0, 0, auto);
+                    flex: 0 0 auto;
                 }
                 > input {
-                    @include o-flex(1, 1, auto);
+                    flex: 1 1 auto;
                     width: 0;
                     min-width: 50px;
                 }
@@ -164,7 +164,7 @@
     }
 
     // Animation effects
-    @include o-transition(margin-bottom, .05s, ease, .05s);
+    transition: margin-bottom .05s ease .05s;
 
     &::after {
         content: "";
@@ -172,8 +172,8 @@
         display: block;
         height: $o-domain-animation-bar-height;
         max-height: 0;
-        @include o-linear-gradient(45deg, rgba($o-brand-optional, 0.4), rgba($o-brand-optional, 0.1));
-        @include o-transition(max-height, .05s, ease, .05s);
+        background-image: linear-gradient(45deg, rgba($o-brand-optional, 0.4), rgba($o-brand-optional, 0.1));
+        transition: max-height .05s ease .05s;
     }
 
     &.o_hover_btns, &.o_hover_add_node {
@@ -191,11 +191,11 @@
 
     &.o_hover_add_node {
         margin-bottom: $o-domain-animation-bar-height;
-        @include o-transition(margin, .15s, ease, .5s);
+        transition: margin .15s ease .5s;
 
         &::after {
             max-height: $o-domain-animation-bar-height;
-            @include o-transition(max-height, .15s, ease, .5s);
+            transition: max-height .15s ease .5s;
         }
         &.o_hover_add_inset_node::after {
             left: $o-domain-selector-indent;
diff --git a/addons/web/static/src/scss/dropdown_extra.scss b/addons/web/static/src/scss/dropdown_extra.scss
index c14144e02d3..cc51876d017 100644
--- a/addons/web/static/src/scss/dropdown_extra.scss
+++ b/addons/web/static/src/scss/dropdown_extra.scss
@@ -41,7 +41,7 @@
         margin: 0;
         padding: 2px 8px;
         &:hover {
-            @include o-vertical-gradient(#f0f0fa, #eeeef6);
+            background-image: linear-gradient(to bottom, #f0f0fa, #eeeef6);
             box-shadow: none;
         }
         > a {
diff --git a/addons/web/static/src/scss/fields.scss b/addons/web/static/src/scss/fields.scss
index 370fdc036b3..52417cfad9f 100644
--- a/addons/web/static/src/scss/fields.scss
+++ b/addons/web/static/src/scss/fields.scss
@@ -39,15 +39,15 @@
 
     // Flex fields (inline)
     &.o_field_many2one, &.o_field_radio, &.o_field_many2manytags, &.o_field_percent_pie, &.o_field_monetary, &.o_field_binary_file {
-        @include o-inline-flex-display;
+        display: inline-flex;
         > span, > button {
-            @include o-flex(0, 0, auto);
+            flex: 0 0 auto;
         }
     }
 
     // Dropdowns input (many2one, ...)
     .o_input_dropdown {
-        @include o-flex(1, 1, auto);
+        flex: 1 1 auto;
         position: relative;
         width: 100%;
 
@@ -75,28 +75,28 @@
     // Monetary
     &.o_field_monetary {
         &.o_input {
-            @include o-align-items(baseline);
+            align-items: baseline;
 
             > input {
                 width: 100px;
-                @include o-flex(1, 0, auto);
+                flex: 1 0 auto;
             }
         }
     }
 
     // Many2many tags
     &.o_field_many2manytags {
-        @include o-flex-flow(row, wrap);
-        @include o-align-items(baseline);
+        flex-flow: row wrap;
+        align-items: baseline;
 
         > .o_field_widget {
-            @include o-flex(1, 0, 100px);
+            flex: 1 0 100px;
             position: initial;
             max-width: 100%;
         }
 
         > .badge {
-            @include o-flex(0, 0, auto);
+            flex: 0 0 auto;
             border: 0;
             font-size: 12px;
             color: white;
@@ -261,12 +261,12 @@
         }
 
         .o_radio_item {
-            @include o-flex(0, 0, auto);
-            @include o-flex-display;
-            @include o-align-items(center);
+            flex: 0 0 auto;
+            display: flex;
+            align-items: center;
 
             > input {
-                @include o-flex(0, 0, auto);
+                flex: 0 0 auto;
                 margin: 0 $o-form-spacing-unit 0 0;
             }
             > label {
@@ -281,7 +281,7 @@
         }
 
         &.o_vertical {
-            @include o-flex-flow(column, nowrap);
+            flex-flow: column nowrap;
             .o_radio_item {
                 margin-bottom: $o-form-spacing-unit;
             }
@@ -290,7 +290,7 @@
 
     // Percent pie
     &.o_field_percent_pie {
-        @include o-align-items(center);
+        align-items: center;
 
         > .o_pie {
             position: relative;
@@ -311,7 +311,7 @@
 
             .o_mask {
                 @include o-position-absolute(0, 0);
-                @include o-transform-origin(0);
+                transform-origin: 0;
                 width: 50%;
                 height: 100%;
                 background-color: $o-view-background-color;
@@ -321,9 +321,9 @@
             }
 
             .o_pie_value {
-                @include o-flex-display;
-                @include o-justify-content(center);
-                @include o-align-items(center);
+                display: flex;
+                justify-content: center;
+                align-items: center;
 
                 border-radius: 100%;
 
diff --git a/addons/web/static/src/scss/form_view.scss b/addons/web/static/src/scss/form_view.scss
index f46de22e9db..02079d09178 100644
--- a/addons/web/static/src/scss/form_view.scss
+++ b/addons/web/static/src/scss/form_view.scss
@@ -34,16 +34,16 @@
     @media (min-width: $screen-xs-min) {
         .o_row {
             &, &.o_field_widget { // Some field may want to use o_row as root and these rules must prevalue
-                @include o-flex-display;
+                display: flex;
                 width: auto!important;
             }
 
-            @include o-align-items(baseline);
+            align-items: baseline;
             min-width: 50px;
             margin: 0 (-$o-form-spacing-unit/2);
 
             > div, > span, > button, > label, > a, > input { // > * did not add a level of priority to the rule
-                @include o-flex(0, 0, auto);
+                flex: 0 0 auto;
                 width: auto!important;
                 margin-right: $o-form-spacing-unit/2;
                 margin-left: $o-form-spacing-unit/2;
@@ -57,7 +57,7 @@
                 padding-bottom: 0;
             }
             > .o_field_boolean {
-                @include o-align-self(center);
+                align-self: center;
             }
         }
     }
@@ -106,11 +106,11 @@
         @media (min-width: $screen-xs-min) {
             .o_row {
                 > .o_field_widget, > div {
-                    @include o-flex(1, 1, auto);
+                    flex: 1 1 auto;
                     width: 0!important; // 3rd flex argument does not work with input (must be auto and real width 0)
 
                     &.o_field_boolean, &.o_priority {
-                        @include o-flex(0, 0, auto);
+                        flex: 0 0 auto;
                         width: auto!important;
                     }
                 }
@@ -140,25 +140,25 @@
     // Statusbar
     .o_form_statusbar {
         position: relative; // Needed for the "More" dropdown
-        @include o-flex-display;
-        @include o-justify-content(space-between);
+        display: flex;
+        justify-content: space-between;
         padding-left: $o-horizontal-padding;
         border-bottom: 1px solid $gray-lighter-darker;
         background-color: $o-view-background-color;
 
         > .o_statusbar_buttons, > .o_statusbar_status {
-            @include o-flex-display;
-            @include o-align-items(center);
-            @include o-align-content(space-around);
+            display: flex;
+            align-items: center;
+            align-content: space-around;
         }
 
         > .o_field_widget {
-            @include o-align-self(center);
+            align-self: center;
             margin-bottom: 0px;
         }
 
         > .o_statusbar_buttons {
-            @include o-flex-flow(row, wrap);
+            flex-flow: row wrap;
 
             > .btn {
                 $o-statusbar-buttons-vmargin: 4px;
@@ -171,9 +171,9 @@
 
         > .o_statusbar_status {
             margin-left: auto;
-            @include o-flex-flow(row-reverse, wrap-reverse);
-            @include o-align-self(stretch);
-            @include o-align-items(stretch);
+            flex-flow: row-reverse wrap-reverse;
+            align-self: stretch;
+            align-items: stretch;
             overflow-x: hidden; // to prevent horizontal scroll due to last arrow
 
             > .o_arrow_button {
@@ -185,7 +185,7 @@
                 color: $gray;
                 border-width: 0 0 0;
                 border-radius: 0;
-                @include o-transition(all, 0.1s);
+                transition: all 0.1s ease 0s;
 
                 &:first-child {
                     padding-right: $o-horizontal-padding; // Compensate container padding
@@ -215,7 +215,7 @@
                     border-bottom: ceil($o-statusbar-height/2) solid transparent;
                     border-right: none;
                     border-left: $o-statusbar-arrow-width solid $o-view-background-color;
-                    @include o-transition(border, 0.2s);
+                    transition: border 0.2s ease 0s;
                     -moz-transform: scale(0.9999); // Smooth the triangle on firefox
                 }
 
@@ -349,7 +349,7 @@
             width: 100%;
 
             > .btn {
-                @include o-flex(0, 0, auto);
+                flex: 0 0 auto;
                 padding: 0 10px;
             }
         }
@@ -361,7 +361,7 @@
             // Makes extra buttons (e.g. m2o external button) overflow on the
             // right padding of the parent element
             .o_input_dropdown {
-                @include o-flex(1, 0, auto);
+                flex: 1 0 auto;
             }
         }
 
@@ -463,7 +463,7 @@
 
             .o_field_widget {
                 text-align: right;
-                @include o-justify-content(flex-end);
+                justify-content: flex-end;
                 width: 100%;
             }
         }
@@ -484,7 +484,7 @@
     .o_address_format {
         width: 100%;
         .o_address_street, .o_address_country {
-            @include o-flex-display;
+            display: flex;
         }
 
         .o_address_city {
@@ -675,11 +675,11 @@ label.o_light_label, .o_light_label label {
         display: block;
 
         > tr {
-            @include o-flex-display;
-            @include o-flex-flow(row, wrap);
+            display: flex;
+            flex-flow: row wrap;
 
             > td {
-                @include o-flex(1, 0, auto);
+                flex: 1 0 auto;
                 display: block;
                 max-width: 100%;
                 padding: 0;
@@ -718,9 +718,9 @@ label.o_light_label, .o_light_label label {
 
 // Settings form views
 .o_settings_container {
-    @include o-flex-display;
-    @include o-flex(0, 1, auto);
-    @include o-flex-flow(row, wrap);
+    display: flex;
+    flex: 0 1 auto;
+    flex-flow: row wrap;
     .o_setting_box:visible:nth-child(odd) {
         clear: left;
     }
diff --git a/addons/web/static/src/scss/kanban_column_progressbar.scss b/addons/web/static/src/scss/kanban_column_progressbar.scss
index 2cb35d33a2e..a96f1037c6d 100644
--- a/addons/web/static/src/scss/kanban_column_progressbar.scss
+++ b/addons/web/static/src/scss/kanban_column_progressbar.scss
@@ -56,9 +56,9 @@
 
 .o_kanban_counter {
     position: relative;
-    @include o-flex-display;
-    @include o-align-items(center);
-    @include o-transition(opacity, 0.3s);
+    display: flex;
+    align-items: center;
+    transition: opacity 0.3s ease 0s;
     margin-bottom: $o-kanban-record-margin*2;
 
     > .o_kanban_counter_progress {
@@ -81,7 +81,7 @@
 
         .o_kanban_counter_label {
             font-size: 10px;
-            @include user-select(none);
+            user-select: none;
         }
     }
 
@@ -91,14 +91,14 @@
         color: $headings-color;
         text-align: right;
         white-space: nowrap;
-        @include o-transform-origin(right, center);
+        transform-origin: right center;
 
         &.o_kanban_grow {
-            @include o-animation(grow, 1s, ease);
+            animation: grow 1s ease 0s 1 normal none running;
         }
 
         &.o_kanban_grow_huge {
-            @include o-animation(grow_huge, 1s, ease);
+            animation: grow_huge 1s ease 0s 1 normal none running;
         }
 
         // Target currency icon
@@ -117,11 +117,11 @@
     @include o-kanban-css-filter(danger, $brand-danger);
 
     &.o_kanban_group_show {
-        @include o-flex-display;
-        @include o-flex-flow(column, nowrap);
+        display: flex;
+        flex-flow: column nowrap;
 
         > * {
-            @include o-flex(0, 0, auto);
+            flex: 0 0 auto;
         }
     }
 }
diff --git a/addons/web/static/src/scss/kanban_dashboard.scss b/addons/web/static/src/scss/kanban_dashboard.scss
index e6317d4f89e..9a1bbd2b98c 100644
--- a/addons/web/static/src/scss/kanban_dashboard.scss
+++ b/addons/web/static/src/scss/kanban_dashboard.scss
@@ -1,13 +1,13 @@
 
 .o_kanban_view.o_kanban_dashboard {
     // correctly display the no_content_helper in dashboards
-    @include o-flex-flow(row, wrap);
+    flex-flow: row wrap;
 
     .o_kanban_record {
         position: relative;
-        @include o-flex-display;
-        @include o-flex-flow(column, nowrap);
-        @include o-justify-content(space-between);
+        display: flex;
+        flex-flow: column nowrap;
+        justify-content: space-between;
         padding: $o-kanban-dashboard-vpadding $o-kanban-dashboard-hpadding;
 
         @media (max-width: $screen-xs-max) {
@@ -55,9 +55,9 @@
                 max-width: 400px;
 
                 .row {
-                    @include o-flex-display;
-                    @include o-flex-flow(row, nowrap);
-                    @include o-justify-content(space-between);
+                    display: flex;
+                    flex-flow: row nowrap;
+                    justify-content: space-between;
                     margin-left: 0;
                     margin-right: 0;
                     padding-left: $o-kanban-dashboard-dropdown-complex-gap*2;
@@ -65,7 +65,7 @@
                 }
 
                 div[class*="col-"] {
-                    @include o-flex(1, 1, percentage(100/3));
+                    flex: 1 1 percentage(100/3);
                     padding-left: $o-kanban-dashboard-dropdown-complex-gap;
                     padding-right: $o-kanban-dashboard-dropdown-complex-gap;
 
@@ -154,10 +154,10 @@
         }
 
         .o_kanban_card_header + .container.o_kanban_card_content {
-            @include o-flex(1, 0, auto);
-            @include o-flex-display;
-            @include o-flex-flow(column, nowrap);
-            @include o-justify-content(space-between);
+            flex: 1 0 auto;
+            display: flex;
+            flex-flow: column nowrap;
+            justify-content: space-between;
             margin-top: $o-kanban-dashboard-vpadding * 2;
             padding-right: 0;
             padding-left: 0;
diff --git a/addons/web/static/src/scss/kanban_examples_dialog.scss b/addons/web/static/src/scss/kanban_examples_dialog.scss
index a42962ed8f0..b2ae3aa0005 100644
--- a/addons/web/static/src/scss/kanban_examples_dialog.scss
+++ b/addons/web/static/src/scss/kanban_examples_dialog.scss
@@ -1,11 +1,11 @@
 .o_kanban_examples_dialog {
-    @include o-flex-display;
+    display: flex;
     padding: 0px;
     background: $o-color-silver;
 
     // sidebar
     .o_kanban_examples_dialog_nav {
-        @include o-flex(0, 0, auto);
+        flex: 0 0 auto;
         border-right: 1px solid $gray-lighter-dark;
         background: white;
 
@@ -31,18 +31,18 @@
 
     // content
     .o_kanban_examples_dialog_content {
-        @include o-flex(1, 1, 100%);
+        flex: 1 1 100%;
 
         .o_kanban_examples_description {
             padding: 16px 16px 0;
             text-align: justify;
         }
         .o_kanban_examples {
-            @include o-flex-display;
+            display: flex;
             padding: 0 6px;
 
             .o_kanban_examples_group {
-                @include o-flex(1, 1, 100%);
+                flex: 1 1 100%;
                 margin: 10px;
 
                 .o_kanban_examples_ghost {
diff --git a/addons/web/static/src/scss/kanban_view.scss b/addons/web/static/src/scss/kanban_view.scss
index 4d00f1be3cf..1a610cd72c2 100644
--- a/addons/web/static/src/scss/kanban_view.scss
+++ b/addons/web/static/src/scss/kanban_view.scss
@@ -1,8 +1,8 @@
 
 // ------- Kanban View Layout -------
 .o_kanban_view {
-    @include o-flex-display;
-    @include o-align-content(stretch);
+    display: flex;
+    align-content: stretch;
     overflow-x: visible;
 
     @media (max-width: $screen-xs-max) {
@@ -61,11 +61,11 @@
         }
 
         .o_kanban_record_top, .o_kanban_record_bottom  {
-            @include o-flex-display;
+            display: flex;
         }
 
         .o_kanban_record_top {
-            @include o-align-items(flex-start);
+            align-items: flex-start;
 
             .o_dropdown_kanban {
                 // For v11 layout, reset positioning to default to properly use
@@ -77,7 +77,7 @@
 
             .o_kanban_record_headings {
                 line-height: 1.2;
-                @include o-flex(1, 1, auto);
+                flex: 1 1 auto;
                 // Ensure long word doesn't break out of container
                 word-wrap: break-word;
                 overflow: hidden;
@@ -95,12 +95,12 @@
 
         .o_kanban_record_bottom {
             .oe_kanban_bottom_left, .oe_kanban_bottom_right {
-                @include o-flex-display;
-                @include o-align-items(center);
+                display: flex;
+                align-items: center;
                 height: 20px;
             }
             .oe_kanban_bottom_left {
-                @include o-flex(1, 1, auto);
+                flex: 1 1 auto;
 
                 > * {
                     margin-right: 6px;
@@ -113,7 +113,7 @@
                 }
             }
             .oe_kanban_bottom_right{
-                @include o-flex(0, 1, auto);
+                flex: 0 1 auto;
 
                 .oe_kanban_avatar {
                     width: 20px;
@@ -219,9 +219,9 @@
         }
 
         &.ui-sortable-helper {
-            @include o-transform(rotate(-3deg));
+            transform: rotate(-3deg);
             box-shadow: 0 5px 25px -10px black;
-            @include transition(transform 0.6s, box-shadow 0.3s);
+            transition: transform 0.6s, box-shadow 0.3s;
         }
 
         .o_attachment_image > img {
@@ -230,18 +230,18 @@
         }
 
         .o_progressbar {
-            @include o-flex-display;
+            display: flex;
             height: $o-kanban-progressbar-height;
 
             .o_progressbar_title {
-                @include o-flex(0, 0, auto);
+                flex: 0 0 auto;
             }
             .o_progress {
-                @include o-flex(1, 1, auto);
+                flex: 1 1 auto;
                 margin-top: 3px;
             }
             .o_progressbar_value {
-                @include o-flex(0, 0, auto);
+                flex: 0 0 auto;
                 width: auto;
                 height: 100%;
                 text-align: right;
@@ -279,11 +279,11 @@
         }
 
         .o_kanban_footer {
-            @include o-flex-display;
-            @include o-justify-content(space-between);
-            @include o-align-items(center);
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
             > * {
-                @include o-flex(0, 0, auto);
+                flex: 0 0 auto;
             }
         }
 
@@ -320,14 +320,14 @@
 
     // Kanban Grouped Layout - Column default
     .o_kanban_group {
-        @include o-flex(0, 0, auto);
+        flex: 0 0 auto;
         padding: 0 $o-kanban-group-padding $o-kanban-group-padding $o-kanban-group-padding;
 
         .o_kanban_header > .o_kanban_header_title {
             @include o-kanban-header-title;
 
             .o_column_title {
-                @include o-flex(1, 1, auto);
+                flex: 1 1 auto;
                 @include o-text-overflow;
                 font-size: 16px;
                 font-weight: 500;
@@ -474,19 +474,19 @@
 
     // Kanban UN-grouped Layout
     &.o_kanban_ungrouped {
-        @include o-flex-flow(row, wrap);
-        @include o-justify-content(flex-start);
+        flex-flow: row wrap;
+        justify-content: flex-start;
 
         padding: $o-kanban-record-margin ($o-horizontal-padding - $o-kanban-record-margin);
 
         .o_kanban_record {
-            @include o-flex(1, 1, auto);
+            flex: 1 1 auto;
             width: $o-kanban-default-record-width;
             margin: ($o-kanban-record-margin * 0.5) $o-kanban-record-margin;
 
             @media (max-width: $screen-xs-max) {
                 margin: 0 0 -1px 0;
-                @include o-flex(1, 0, 100%);
+                flex: 1 0 100%;
             }
 
             &.o_kanban_ghost {
diff --git a/addons/web/static/src/scss/kanban_view_mobile.scss b/addons/web/static/src/scss/kanban_view_mobile.scss
index ed4e6ad8436..c73c47e14db 100644
--- a/addons/web/static/src/scss/kanban_view_mobile.scss
+++ b/addons/web/static/src/scss/kanban_view_mobile.scss
@@ -11,7 +11,7 @@
 
             .o_kanban_mobile_tab {
                 @include o-position-absolute($left: 100%);
-                @include o-transform(translateX(-50%));
+                transform: translateX(-50%);
                 height: $o-kanban-mobile-tabs-height;
                 padding: 10px;
                 font-size: 14px;
diff --git a/addons/web/static/src/scss/list_view.scss b/addons/web/static/src/scss/list_view.scss
index 27c10cda556..d92d79973c3 100644
--- a/addons/web/static/src/scss/list_view.scss
+++ b/addons/web/static/src/scss/list_view.scss
@@ -41,7 +41,7 @@
 
     .o_column_sortable {
         position: relative;
-        @include user-select(none);  // Prevent unwanted selection while sorting
+        user-select: none;  // Prevent unwanted selection while sorting
 
         &::after {
             font-family: FontAwesome;
@@ -96,7 +96,7 @@
         }
         .o_group_pager {
             cursor: text;
-            @include user-select(none);
+            user-select: none;
             text-align: right;
             padding-top: 0;
             padding-bottom: 0;
diff --git a/addons/web/static/src/scss/list_view_extra.scss b/addons/web/static/src/scss/list_view_extra.scss
index ec53efc6df5..83791ce42dd 100644
--- a/addons/web/static/src/scss/list_view_extra.scss
+++ b/addons/web/static/src/scss/list_view_extra.scss
@@ -5,6 +5,6 @@
     }
 
     tbody > tr.o_group_header {
-        @include o-vertical-gradient(#fcfcfc, #dedede);
+        background-image: linear-gradient(to bottom, #fcfcfc, #dedede);
     }
 }
diff --git a/addons/web/static/src/scss/modal.scss b/addons/web/static/src/scss/modal.scss
index 82faabfa3bc..5881a54a7a8 100644
--- a/addons/web/static/src/scss/modal.scss
+++ b/addons/web/static/src/scss/modal.scss
@@ -39,11 +39,11 @@
 
             .modal-content {
                 max-height: 100%;
-                @include o-flex-display;
-                @include o-flex-flow(column, nowrap);
+                display: flex;
+                flex-flow: column nowrap;
 
                 .modal-header, .modal-footer {
-                    @include o-flex(0, 0, auto);
+                    flex: 0 0 auto;
                 }
 
                 .modal-body {
@@ -54,15 +54,15 @@
 
                     &.o_dialog_error {
                         overflow: visible;
-                        @include o-flex-display;
-                        @include o-flex-flow(column, nowrap);
+                        display: flex;
+                        flex-flow: column nowrap;
 
                         > .alert, > button {
-                            @include o-flex(0, 0, auto);
+                            flex: 0 0 auto;
                         }
 
                         > .o_error_detail {
-                            @include o-flex(1, 1, auto);
+                            flex: 1 1 auto;
                             min-height: 0;
                             overflow: auto;
                         }
diff --git a/addons/web/static/src/scss/model_field_selector.scss b/addons/web/static/src/scss/model_field_selector.scss
index 0eec3e60049..5d451a06942 100644
--- a/addons/web/static/src/scss/model_field_selector.scss
+++ b/addons/web/static/src/scss/model_field_selector.scss
@@ -3,9 +3,9 @@
     position: relative;
 
     > .o_field_selector_value {
-        @include o-flex-display;
-        @include o-flex-flow(row, wrap);
-        @include o-align-items(center);
+        display: flex;
+        flex-flow: row wrap;
+        align-items: center;
         height: 100%;
         min-height: 20px; // needed when there is no value in it and used standalone
         &:active, &:focus, &:active:focus {
@@ -19,15 +19,15 @@
             margin-bottom: 1px;
         }
         > i {
-            @include o-align-self(center);
+            align-self: center;
             margin: 0 2px;
             font-size: 10px;
         }
     }
     > .o_field_selector_controls {
         @include o-position-absolute(0, 0, 1px);
-        @include o-flex-display;
-        @include o-align-items(center);
+        display: flex;
+        align-items: center;
         cursor: pointer;
     }
 
@@ -110,8 +110,8 @@
                         }
                         .o_field_selector_relation_icon {
                             @include o-position-absolute($top: 0, $right: 0, $bottom: 0);
-                            @include o-flex-display;
-                            @include o-align-items(center);
+                            display: flex;
+                            align-items: center;
                             padding: 10px;
                         }
                     }
diff --git a/addons/web/static/src/scss/navbar.scss b/addons/web/static/src/scss/navbar.scss
index 770532d6693..c2ba099cf95 100644
--- a/addons/web/static/src/scss/navbar.scss
+++ b/addons/web/static/src/scss/navbar.scss
@@ -17,7 +17,7 @@
         color: inherit;
 
         font-size: 18px;
-        @include user-select(none);
+        user-select: none;
 
         &:hover, &:focus {
             background-color: $o-navbar-inverse-link-hover-bg;
@@ -32,7 +32,7 @@
         display: block;
         float: left;
         margin-right: 35px;
-        @include user-select(none);
+        user-select: none;
         color: white;
         font-size: 22px;
         font-weight: 500;
@@ -147,12 +147,12 @@
 
         .oe_topbar_avatar {
             height: 17px;
-            @include o-transform(translateY(-2px));
+            transform: translateY(-2px);
         }
     }
 
     @media (max-width: $screen-sm-max) {
-        @include o-transition(height, 200ms, linear);
+        transition: height 200ms linear 0s;
 
         position: relative;
         height: $o-navbar-height;
diff --git a/addons/web/static/src/scss/pivot_view.scss b/addons/web/static/src/scss/pivot_view.scss
index 3efddd8eab2..9aa0e21bbdd 100644
--- a/addons/web/static/src/scss/pivot_view.scss
+++ b/addons/web/static/src/scss/pivot_view.scss
@@ -23,7 +23,7 @@
             background-color: lighten($o-brand-secondary, 40%);
             cursor: pointer;
             white-space: nowrap;
-            @include user-select(none);
+            user-select: none;
             &:hover {
                 background-color: lighten($o-brand-secondary, 30%);
             }
diff --git a/addons/web/static/src/scss/rainbow.scss b/addons/web/static/src/scss/rainbow.scss
index 8a705242adc..9e654c71bcc 100644
--- a/addons/web/static/src/scss/rainbow.scss
+++ b/addons/web/static/src/scss/rainbow.scss
@@ -17,7 +17,7 @@
     background-image: -o-radial-gradient(#EDEFF4 30%, transparent 70%, transparent);
     background-image: radial-gradient(#EDEFF4 30%, transparent 70%, transparent);
 
-    @include o-animation(reward-fading, $reward-base-time * 0.5, ease-in-out, 0s, 1, normal, forwards);
+    animation: reward-fading ($reward-base-time * 0.5) ease-in-out 0s 1 normal forwards;
     @include o-position-absolute(20%, auto, auto, 50%);
     @include size($reward-size, $reward-size);
     @media (max-width: $screen-xs-max) {
@@ -26,15 +26,15 @@
 
     &.o_reward_fading {
         display: block;
-        @include o-animation(reward-fading-reverse, ($reward-base-time * 0.4), ease-in-out, 0s, 1, normal, forwards);
+        animation: reward-fading-reverse ($reward-base-time * 0.4) ease-in-out 0s 1 normal forwards;
 
         .o_reward_face_group {
-            @include o-animation(reward-jump-reverse, ($reward-base-time * 0.4), ease-in-out, 0s, 1, normal, forwards);
+            animation: reward-jump-reverse ($reward-base-time * 0.4) ease-in-out 0s 1 normal forwards;
         }
 
         .o_reward_rainbow {
             path {
-                @include o-animation(reward-rainbow-reverse, ($reward-base-time * 0.5), ease-out, 0s, 1, normal, forwards);
+                animation: reward-rainbow-reverse ($reward-base-time * 0.5) ease-out 0s 1 normal forwards;
             }
         }
 
@@ -51,13 +51,13 @@
             fill: none;
             stroke-linecap: round;
             stroke-width: 21px;
-            @include o-animation(reward-rainbow, ($reward-base-time ), ease-out, 0s, 1, normal, forwards);
+            animation: reward-rainbow $reward-base-time ease-out 0s 1 normal forwards;
         }
     }
 
     .o_reward_face_group {
         transform-origin: center;
-        @include o-animation(reward-jump, $reward-base-time * 0.8, ease-in-out);
+        animation: reward-jump $reward-base-time * 0.8 ease-in-out 0s 1 normal none running;
         @include o-position-absolute(6%, 0, 0, 0);
         @include size(100%, 60%);
     }
@@ -68,7 +68,7 @@
         position: relative;
         border-radius: 100%;
         background: center center / contain no-repeat;
-        @include o-animation(reward-float, $reward-base-time, ease-in-out, $reward-base-time, infinite, alternate);
+        animation: reward-float $reward-base-time ease-in-out $reward-base-time infinite alternate;
         @include size(34%, 56.67%);
     }
 
@@ -83,10 +83,10 @@
         svg {
             transform-origin: center center;
             @include o-position-absolute(28%, $left:3%);
-            @include o-animation(reward-stars, $reward-base-time, ease-in-out, 0s, infinite, alternate-reverse);
+            animation: reward-stars $reward-base-time ease-in-out 0s infinite alternate-reverse;
 
             &.star2, &.star4 {
-                @include o-animation(reward-stars, ($reward-base-time*1.2), ease-in-out, 0s, infinite, alternate);
+                animation: reward-stars ($reward-base-time*1.2) ease-in-out 0s infinite alternate;
             }
 
             &.star2 {
@@ -110,7 +110,7 @@
     .o_reward_thumbup {
         width: 40px;
         display: block;
-        @include o-animation(reward-scale, $reward-base-time * 0.5, ease-in-out, 0s, infinite, alternate);
+        animation: reward-scale ($reward-base-time * 0.5) ease-in-out 0s infinite alternate;
         @include o-position-absolute(63%, auto, auto, 65%);
     }
 
@@ -121,9 +121,9 @@
         margin-left: 15%;
 
         // Translate before animate
-        @include o-transform(translateY(5px));
+        transform: translateY(5px);
 
-        @include o-animation(reward-float, $reward-base-time, ease-in-out, $reward-base-time, infinite, alternate-reverse);
+        animation: reward-float $reward-base-time ease-in-out $reward-base-time infinite alternate-reverse;
         @include o-position-absolute(85%, auto, auto, 0%);
 
         .o_reward_thumb_right {
@@ -155,16 +155,16 @@
         }
 
         .o_reward_shadow_container {
-            @include o-transform(translateY(0px) rotateZ(0));
-            @include o-animation(reward-float, $reward-base-time, ease-in-out, $reward-base-time, infinite, alternate);
+            transform: translateY(0px) rotateZ(0);
+            animation: reward-float $reward-base-time ease-in-out $reward-base-time infinite alternate;
         }
 
         .o_reward_shadow {
             @include size(100%, 12px);
             background-color: #e7eaf0;
             border-radius: 100%;
-            @include o-transform(scale(0.8) rotateZ(0));
-            @include o-animation(reward-scale, $reward-base-time, ease-in-out, $reward-base-time, infinite, alternate);
+            transform: scale(0.8) rotateZ(0);
+            animation: reward-scale $reward-base-time ease-in-out $reward-base-time infinite alternate;
             @include o-position-absolute(auto, auto, -40px, 0);
         }
     }
@@ -187,25 +187,25 @@
 
 @keyframes reward-jump {
     0% {
-        @include o-transform(scale(0.5));
+        transform: scale(0.5);
     }
     50% {
-        @include o-transform(scale(1.05));
+        transform: scale(1.05);
     }
     to {
-        @include o-transform(scale(1));
+        transform: scale(1);
     }
 }
 
 @keyframes reward-jump-reverse {
     0% {
-        @include o-transform(scale(1));
+        transform: scale(1);
     }
     50% {
-        @include o-transform(scale(1.05));
+        transform: scale(1.05);
     }
     to {
-        @include o-transform(scale(0.5));
+        transform: scale(0.5);
     }
 }
 
@@ -226,30 +226,30 @@
 
 @keyframes reward-float {
     from {
-        @include o-transform(translateY(0px));
+        transform: translateY(0px);
     }
     to {
-        @include o-transform(translateY(5px));
+        transform: translateY(5px);
     }
 }
 
 @keyframes reward-stars {
     from {
-        @include o-transform(scale(0.3) rotate(0deg));
+        transform: scale(0.3) rotate(0deg);
     }
     50% {
-        @include o-transform(scale(1.0) rotate(20deg));
+        transform: scale(1.0) rotate(20deg);
     }
     to {
-        @include o-transform(scale(0.3) rotate(80deg));
+        transform: scale(0.3) rotate(80deg);
     }
 }
 
 @keyframes reward-scale {
     from {
-        @include o-transform(scale(0.8));
+        transform: scale(0.8);
     }
     to {
-        @include o-transform(scale(1.0));
+        transform: scale(1.0);
     }
 }
diff --git a/addons/web/static/src/scss/search_view.scss b/addons/web/static/src/scss/search_view.scss
index 0ff5fd320e7..0ad27f5c391 100644
--- a/addons/web/static/src/scss/search_view.scss
+++ b/addons/web/static/src/scss/search_view.scss
@@ -5,7 +5,7 @@
 }
 
 .o_searchview {
-    @include o-align-items(flex-end);
+    align-items: flex-end;
     position: relative;
     padding: 0 20px 1px 0;
 
@@ -15,25 +15,25 @@
     }
 
     .o_searchview_input_container {
-        @include o-flex-display;
-        @include o-flex-flow(row, wrap);
+        display: flex;
+        flex-flow: row wrap;
 
         .o_searchview_facet {
             $o-searchview-facet-remove-width: 18px;
-            @include o-flex(0, 0, auto);
+            flex: 0 0 auto;
             max-width: 100%;
-            @include o-flex-display;
+            display: flex;
             position: relative;
             margin: 1px 3px 0 0;
 
             .o_searchview_facet_label {
-                @include o-flex(0, 0, auto);
+                flex: 0 0 auto;
                 @include o-text-overflow;
                 padding: 0 3px;
                 color: white;
 
-                @include o-flex-display;
-                @include o-align-items(center);
+                display: flex;
+                align-items: center;
             }
 
             .o_facet_values {
@@ -43,10 +43,10 @@
                 }
             }
             .o_facet_remove {
-                @include o-flex(0, 0, auto);
-                @include o-flex-display;
-                @include o-justify-content(center);
-                @include o-align-items(center);
+                flex: 0 0 auto;
+                display: flex;
+                justify-content: center;
+                align-items: center;
                 @include o-position-absolute(0, 0, 0);
                 width: $o-searchview-facet-remove-width;
                 cursor: pointer;
@@ -54,7 +54,7 @@
         }
         .o_searchview_input {
             width: 100px;
-            @include o-flex(1, 0, auto);
+            flex: 1 0 auto;
         }
 
         .o_searchview_more {
@@ -107,7 +107,7 @@
 
     display: inline-block;
     cursor: pointer;
-    @include user-select(none);  // Prevent text selection when toggling the dropdowns
+    user-select: none;  // Prevent text selection when toggling the dropdowns
     > a { // dropdown togglers
         color: $o-main-text-color;
         &:hover {
diff --git a/addons/web/static/src/scss/utils.scss b/addons/web/static/src/scss/utils.scss
index efb8dce7598..4b76f10b1d2 100644
--- a/addons/web/static/src/scss/utils.scss
+++ b/addons/web/static/src/scss/utils.scss
@@ -14,119 +14,6 @@
 }
 
 // ------------------------------------------------------------------
-// Vendor prefixes
-// ------------------------------------------------------------------
-// Flex
-@mixin o-flex-display {
-    display: -ms-flexbox;
-    display: -moz-box;
-    display: -webkit-box;
-    display: -webkit-flex;
-
-    display: flex;
-}
-@mixin o-inline-flex-display {
-    display: -ms-inline-flexbox;
-    display: -moz-inline-box;
-    display: -webkit-inline-box;
-    display: -webkit-inline-flex;
-
-    display: inline-flex;
-}
-@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;
-}
-@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;
-}
-@mixin o-justify-content($justify) {
-    -moz-justify-content: $justify;
-    -webkit-justify-content: $justify;
-
-    justify-content: $justify;
-}
-@mixin o-align-content($align) {
-    -webkit-align-content: $align;
-
-    align-content: $align;
-}
-@mixin o-align-items($align) {
-    -webkit-align-items: $align;
-
-    align-items: $align;
-}
-@mixin o-align-self($align) {
-    -webkit-align-self: $align;
-
-    align-self: $align;
-}
-
-// Background-size
-@mixin o-background-size($size) {
-    -webkit-background-size: $size;
-    -moz-background-size: $size;
-    -o-background-size: $size;
-    background-size: $size;
-}
-
-// ------------------------------------------------------------------
-// Select Appearance
-// ------------------------------------------------------------------
-@mixin o-appearance($value) {
-    -webkit-appearance: $value;
-    -moz-appearance: $value;
-    appearance: $value;
-}
-
-// ------------------------------------------------------------------
-// Transform
-// ------------------------------------------------------------------
-@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
-// ------------------------------------------------------------------
-@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
-// ------------------------------------------------------------------
-@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
-// ------------------------------------------------------------------
-@mixin o-columns($width: auto, $col: auto) {
-    -webkit-columns: $width $col;
-    -moz-columns: $width $col;
-    columns: $width $col;
-}
-
-// ------------------------------------------------------------------
 // Position absolute
 // ------------------------------------------------------------------
 @mixin o-position-absolute($top: auto, $right: auto, $bottom: auto, $left: auto) {
@@ -150,43 +37,6 @@
 }
 
 // ------------------------------------------------------------------
-// Gradients
-// ------------------------------------------------------------------
-@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);
-}
-@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);
-}
-@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
-// ------------------------------------------------------------------
-@mixin o-transform($transform) {
-    -webkit-transform: $transform;
-    -moz-transform: $transform;
-    -ms-transform: $transform;
-    -o-transform: $transform;
-    transform: $transform;
-}
-
-// ------------------------------------------------------------------
 // Hovering effects
 // ------------------------------------------------------------------
 @mixin o-hover-opacity($default-opacity: 0.5, $hover-opacity: 1) {
@@ -339,22 +189,22 @@
 }
 @mixin o-kanban-slim-col {
     position: relative;
-    @include o-flex(0, 0, auto);
+    flex: 0 0 auto;
     margin: 0;
     padding: 0 floor($o-kanban-group-padding * 0.7);
     cursor: pointer;
 }
 @mixin o-kanban-header-title {
-    @include o-flex-display;
-    @include o-align-items(center);
+    display: flex;
+    align-items: center;
     height: $o-kanban-header-title-height;
     line-height: 2.2;
     color: $headings-color;
 }
 @mixin o-kanban-v-title {
     @include o-position-absolute($o-kanban-inside-vgutter * 2, $left: floor(-$o-kanban-inside-vgutter * 1.2));
-    @include o-transform-origin(left, bottom, $z: 0);
-    @include o-transform(rotate(90deg));
+    transform-origin: left bottom 0;
+    transform: rotate(90deg);
     overflow: visible;
     white-space: nowrap;
     font-size: 15px;
@@ -424,7 +274,7 @@
                 display: block;
                 width: 1px;
                 height: 20px;
-                @include rotate(45deg);
+                transform: rotate(45deg);
                 background-color: red;
             }
             &::after {
diff --git a/addons/web/static/src/scss/web_calendar.scss b/addons/web/static/src/scss/web_calendar.scss
index 7091cbc3c98..e38a25b5e58 100644
--- a/addons/web/static/src/scss/web_calendar.scss
+++ b/addons/web/static/src/scss/web_calendar.scss
@@ -6,7 +6,7 @@
 .o_calendar_container {
     height: 100%;
     @include o-webclient-padding($top: $o-horizontal-padding/2, $bottom: $o-horizontal-padding/2);
-    @include o-flex-display;
+    display: flex;
 
     @for $index from 1 through $o-nb-calendar-colors {
         .o_calendar_color_#{$index} {
@@ -28,7 +28,7 @@
     }
 
     .o_calendar_view {
-        @include o-flex(1, 1, auto);
+        flex: 1 1 auto;
         min-width: 0;
 
         .o_calendar_widget {
@@ -62,7 +62,7 @@
     }
 
     .o_calendar_sidebar_container {
-        @include o-flex(0, 0, $o-horizontal-padding);
+        flex: 0 0 $o-horizontal-padding;
         position: relative;
 
         &.o_sidebar_hidden {
@@ -97,13 +97,13 @@
             padding: 0;
 
             .ui-widget-header {
-                @include o-flex-display;
+                display: flex;
                 background: none;
                 background-color: lighten($o-brand-secondary, 30%);
                 border-radius: 0;
 
                 .ui-datepicker-prev, .ui-datepicker-next {
-                    @include o-flex(0, 0, auto);
+                    flex: 0 0 auto;
                     position: static;
                     cursor: pointer;
                     padding: 2px;
@@ -133,7 +133,7 @@
                     }
                 }
                 .ui-datepicker-title {
-                    @include o-flex(0, 0, auto);
+                    flex: 0 0 auto;
                     order: 2;
                     display: inline-block;
                     margin: 0 10px;
diff --git a/addons/web/static/src/scss/webclient.scss b/addons/web/static/src/scss/webclient.scss
index 8f4dadb22df..68be626b93a 100644
--- a/addons/web/static/src/scss/webclient.scss
+++ b/addons/web/static/src/scss/webclient.scss
@@ -33,8 +33,8 @@
         }
 
         .o_notification_title {
-            @include o-flex-display;
-            @include o-align-items(center);
+            display: flex;
+            align-items: center;
 
             border-bottom: 1px solid rgba(0, 0, 0, 0.1);
             padding: 10px 10px 10px 20px;
@@ -104,7 +104,7 @@ div.o_boolean_toggle {
         background-color: $o-brand-optional;
 
         &:before {
-            @include translate(14px, 0px);
+            transform: translate(14px, 0px);
         }
     }
 }
diff --git a/addons/web/static/src/scss/webclient_layout.scss b/addons/web/static/src/scss/webclient_layout.scss
index f811df48802..db550f85d74 100644
--- a/addons/web/static/src/scss/webclient_layout.scss
+++ b/addons/web/static/src/scss/webclient_layout.scss
@@ -1,7 +1,7 @@
 
 .o_web_client {
-    @include o-flex-display;
-    @include o-flex-flow(column, nowrap);
+    display: flex;
+    flex-flow: column nowrap;
     overflow: hidden;
 
     &.o_fullscreen {
@@ -15,7 +15,7 @@
 
 
     .navbar {
-        @include o-flex(0, 0, auto);
+        flex: 0 0 auto;
 
         li > a {
             padding: 4px 8px;
@@ -30,20 +30,20 @@
     }
 
     > .o_main {
-        @include o-flex(1, 1, auto);
-        @include o-flex-display;
+        flex: 1 1 auto;
+        display: flex;
         min-height: 0; // Allow flex to shrink this element as much as it wants
         height: 100%;
 
         .o_sub_menu {
-            @include o-flex(0, 0, 220px);
-            @include o-flex-display;
-            @include o-flex-flow(column, nowrap);
+            flex: 0 0 220px;
+            display: flex;
+            flex-flow: column nowrap;
             border-right: 1px solid darken($o-control-panel-background-color, 20%);
             background-color: $o-control-panel-background-color;
 
             .o_sub_menu_logo {
-                @include o-flex(0, 0, auto);
+                flex: 0 0 auto;
                 text-align: center;
                 position: relative;
 
@@ -67,7 +67,7 @@
             }
 
             .o_sub_menu_content {
-                @include o-flex(1, 1, auto);
+                flex: 1 1 auto;
                 height:100%;
                 overflow-y: auto;
 
@@ -128,7 +128,7 @@
             }
 
             .o_sub_menu_footer {
-                @include o-flex(0, 0, auto);
+                flex: 0 0 auto;
                 text-align: center;
 
                 > a {
@@ -141,15 +141,15 @@
         }
 
         .o_main_content {
-            @include o-flex(1, 1, auto);
-            @include o-flex-display;
-            @include o-flex-flow(column, nowrap);
+            flex: 1 1 auto;
+            display: flex;
+            flex-flow: column nowrap;
 
             .o_control_panel {
-                @include o-flex(0, 0, auto);
+                flex: 0 0 auto;
             }
             .o_content {
-                @include o-flex(1, 1, auto);
+                flex: 1 1 auto;
                 height: 100%;
                 overflow: auto;
                 position: relative;