From 770aec399c4e6e29cfc5854318cbda19a605315d Mon Sep 17 00:00:00 2001
From: qsm-odoo <qsm@odoo.com>
Date: Wed, 27 Jun 2018 17:55:08 +0200
Subject: [PATCH] [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.
---
.../static/src/scss/account_dashboard.scss | 6 +-
.../src/scss/account_reconciliation.scss | 12 +-
addons/calendar/static/src/scss/calendar.scss | 2 +-
addons/event/static/src/scss/event.scss | 6 +-
.../static/src/scss/hr_attendance.scss | 26 +--
.../static/src/scss/hr_org_chart.scss | 10 +-
.../static/src/scss/hr_job.scss | 18 +-
.../static/src/scss/im_livechat.scss | 2 +-
.../src/scss/im_livechat_bootstrap.scss | 2 +-
.../im_support/static/src/scss/systray.scss | 4 +-
.../src/scss/abstract_thread_window.scss | 14 +-
addons/mail/static/src/scss/chatter.scss | 4 +-
addons/mail/static/src/scss/composer.scss | 72 ++++----
addons/mail/static/src/scss/discuss.scss | 58 +++----
.../mail/static/src/scss/mail_activity.scss | 2 +-
addons/mail/static/src/scss/systray.scss | 20 +--
addons/mail/static/src/scss/thread.scss | 6 +-
.../mail/static/src/scss/thread_window.scss | 8 +-
.../static/src/scss/mass_mailing.ui.scss | 12 +-
addons/note/static/src/scss/note.scss | 6 +-
addons/portal/static/src/scss/portal.scss | 2 +-
.../static/src/scss/project_dashboard.scss | 4 +-
addons/web/static/src/scss/animation.scss | 16 --
addons/web/static/src/scss/base_settings.scss | 40 ++---
addons/web/static/src/scss/control_panel.scss | 24 +--
addons/web/static/src/scss/data_export.scss | 32 ++--
.../web/static/src/scss/domain_selector.scss | 32 ++--
.../web/static/src/scss/dropdown_extra.scss | 2 +-
addons/web/static/src/scss/fields.scss | 38 ++--
addons/web/static/src/scss/form_view.scss | 56 +++---
.../src/scss/kanban_column_progressbar.scss | 20 +--
.../web/static/src/scss/kanban_dashboard.scss | 24 +--
.../src/scss/kanban_examples_dialog.scss | 10 +-
addons/web/static/src/scss/kanban_view.scss | 50 +++---
.../static/src/scss/kanban_view_mobile.scss | 2 +-
addons/web/static/src/scss/list_view.scss | 4 +-
.../web/static/src/scss/list_view_extra.scss | 2 +-
addons/web/static/src/scss/modal.scss | 14 +-
.../static/src/scss/model_field_selector.scss | 16 +-
addons/web/static/src/scss/navbar.scss | 8 +-
addons/web/static/src/scss/pivot_view.scss | 2 +-
addons/web/static/src/scss/rainbow.scss | 58 +++----
addons/web/static/src/scss/search_view.scss | 28 +--
addons/web/static/src/scss/utils.scss | 162 +-----------------
addons/web/static/src/scss/web_calendar.scss | 12 +-
addons/web/static/src/scss/webclient.scss | 6 +-
.../web/static/src/scss/webclient_layout.scss | 32 ++--
.../static/src/scss/web_editor.common.scss | 4 -
.../static/src/scss/web_editor.ui.scss | 132 +++++++-------
.../static/src/scss/web_editor.variables.scss | 6 +-
.../web_tour/static/src/scss/keyframes.scss | 24 +--
addons/web_tour/static/src/scss/tip.scss | 4 +-
.../static/src/scss/website.backend.scss | 4 +-
.../static/src/scss/website.edit_mode.scss | 8 +-
addons/website/static/src/scss/website.scss | 4 +-
.../website/static/src/scss/website.ui.scss | 28 +--
.../static/src/scss/website_blog.scss | 2 +-
.../static/src/scss/website_sale.scss | 5 +-
.../static/src/scss/website_sale_backend.scss | 8 +-
.../src/scss/website_sale_dashboard.scss | 4 +-
.../src/scss/website_sale_frontend.scss | 2 +-
.../src/scss/website_theme_install.scss | 26 +--
odoo/addons/base/models/assetsbundle.py | 6 +-
.../base/static/src/scss/onboarding.scss | 98 +++++------
64 files changed, 591 insertions(+), 760 deletions(-)
diff --git a/addons/account/static/src/scss/account_dashboard.scss b/addons/account/static/src/scss/account_dashboard.scss
index 938bc058af27..50f6f1169a13 100644
--- a/addons/account/static/src/scss/account_dashboard.scss
+++ b/addons/account/static/src/scss/account_dashboard.scss
@@ -5,9 +5,9 @@
}
.o_account_dashboard_header {
- @include o-flex(1, 0, 100%);
- @include o-flex-flow(column, nowrap);
- @include o-align-self(flex-start);
+ flex: 1 0 100%;
+ flex-flow: column nowrap;
+ align-self: flex-start;
width: 100%;
height: auto; // cancel o_form_view height 100%, which hides the help tip message at the bottom of the screen
min-height: 0%; // cancel o_form_view min-height 100%, which hides the help tip message at the bottom of the screen
diff --git a/addons/account/static/src/scss/account_reconciliation.scss b/addons/account/static/src/scss/account_reconciliation.scss
index 590e6d8df32c..64a61c4e13c0 100644
--- a/addons/account/static/src/scss/account_reconciliation.scss
+++ b/addons/account/static/src/scss/account_reconciliation.scss
@@ -200,12 +200,12 @@
/* Icons */
.toggle_match, .toggle_create {
- @include o-transform(rotate(0deg));
- @include o-transition(transform, 300ms);
+ transform: rotate(0deg);
+ transition: transform 300ms ease 0s;
}
.visible_toggle, &[data-mode="match"] .toggle_match, &[data-mode="create"] .toggle_create {
visibility: visible !important;
- @include o-transform(rotate(90deg));
+ transform: rotate(90deg);
}
.toggle_create {
font-size: 10px;
@@ -218,18 +218,18 @@
max-height: 0px;
overflow: hidden;
margin-bottom: 5px;
- @include o-transition(max-height, 250ms);
+ transition: max-height 250ms ease 0s;
}
&[data-mode="match"] > .match {
display: block;
max-height: none;
overflow: visible;
- @include o-transition(max-height, 400ms);
+ transition: max-height 400ms ease 0s;
}
&[data-mode="create"] > .create {
display: block;
max-height: 210px;
- @include o-transition(max-height, 400ms);
+ transition: max-height 400ms ease 0s;
}
}
diff --git a/addons/calendar/static/src/scss/calendar.scss b/addons/calendar/static/src/scss/calendar.scss
index 6d75477cfb69..49198688112b 100644
--- a/addons/calendar/static/src/scss/calendar.scss
+++ b/addons/calendar/static/src/scss/calendar.scss
@@ -42,7 +42,7 @@
}
.o_calendar_invitation_page {
- @include o-flex(0, 0, auto);
+ flex: 0 0 auto;
width: 50%;
margin: 30px auto 0;
@include o-webclient-padding($top: 10px, $bottom: 10px);
diff --git a/addons/event/static/src/scss/event.scss b/addons/event/static/src/scss/event.scss
index 46cf2e629ccf..fcbdb009b652 100644
--- a/addons/event/static/src/scss/event.scss
+++ b/addons/event/static/src/scss/event.scss
@@ -4,10 +4,10 @@
position: relative;
padding: 0;
- @include o-flex-display;
+ display: flex;
.o_event_left {
- @include o-flex(1, 1, 25%);
+ flex: 1 1 25%;
text-align: center;
color: white;
background-color: $o-brand-optional;
@@ -19,7 +19,7 @@
}
.o_event_right {
- @include o-flex(1, 1, 75%);
+ flex: 1 1 75%;
padding: 8px;
margin-left: 8px;
}
diff --git a/addons/hr_attendance/static/src/scss/hr_attendance.scss b/addons/hr_attendance/static/src/scss/hr_attendance.scss
index ff61632b45a9..bfa67a298d7d 100644
--- a/addons/hr_attendance/static/src/scss/hr_attendance.scss
+++ b/addons/hr_attendance/static/src/scss/hr_attendance.scss
@@ -38,14 +38,14 @@
}
.o_hr_attendance_kiosk_mode_container {
- @include o-flex-display;
- @include o-flex-flow(column, nowrap);
- @include o-justify-content(flex-start);
- @include o-align-items(center);
+ display: flex;
+ flex-flow: column nowrap;
+ justify-content: flex-start;
+ align-items: center;
@include o-position-absolute(0, 0, 0, 0);
@media (min-width: $screen-sm-min) {
- @include o-justify-content(center);
+ justify-content: center;
}
}
@@ -58,7 +58,7 @@
@media (max-width: $screen-xs-max) {
overflow: hidden;
padding: 0 2em 2em;
- @include o-flex(1,0,auto);
+ flex: 1 0 auto;
}
@media (min-width: $screen-sm-min) {
@@ -68,13 +68,13 @@
width: 100%;
border-radius: 0.2em;
font-size: 1.2em;
- @include o-animation(fadeInDownSmall, .3s);
+ animation: fadeInDownSmall .3s;
}
.o_hr_attendance_kiosk_welcome_row {
@media (min-width: $screen-sm-min){
- @include o-flex-display();
- @include o-align-items(center);
+ display: flex;
+ align-items: center;
}
@media (max-width: $screen-sm-max){
> div {
@@ -110,7 +110,7 @@
}
.hidden-xs.btn-default {
- @include o-transform(translate(-50%, -50%));
+ transform: translate(-50%, -50%);
@include o-position-absolute(0, $left:0);
@include square(2em);
border-radius: 50%;
@@ -130,7 +130,7 @@
}
.o_hr_attendance_user_badge {
- @include o-skew-gradient(#77717e, #c9a8a9);
+ background: linear-gradient(linear, left top, right bottom, #77717e, #c9a8a9);
img {
background: white;
@@ -149,11 +149,11 @@
border-radius: .2em .2em 0 0;
border-top: 1px solid fade-out(white, 0.8);
@include o-position-absolute(auto, 0, 100%, 0);
- @include o-transform(translateY(3px));
+ transform: translateY(3px);
img {
@include square(80px);
- @include o-transform(translateX(-50%)translateY(35%));
+ transform: translateX(-50%)translateY(35%);
@include o-position-absolute($bottom: 0);
}
}
diff --git a/addons/hr_org_chart/static/src/scss/hr_org_chart.scss b/addons/hr_org_chart/static/src/scss/hr_org_chart.scss
index e211654d5e02..15dcf3aa8aaf 100644
--- a/addons/hr_org_chart/static/src/scss/hr_org_chart.scss
+++ b/addons/hr_org_chart/static/src/scss/hr_org_chart.scss
@@ -12,14 +12,14 @@
// SMALL DESKTOP LAYOUT
@media screen and (min-width: $screen-sm-min) {
#o_employee_container {
- @include o-flex-display;
+ display: flex;
width: 100%;
}
#o_employee_main {
- @include o-flex(1, 1, 60%);
+ flex: 1 1 60%;
}
#o_employee_right {
- @include o-flex(0, 1, 35%);
+ flex: 0 1 35%;
margin-left: 2%;
padding-left: 2%;
border-left: 1px solid $o-hr-org-chart-border-color;
@@ -33,14 +33,14 @@
// MEDIUM DESKTOP LAYOUT
@media screen and (min-width: $screen-md-min){
#o_employee_right {
- @include o-flex(0, 1, 33%);
+ flex: 0 1 33%;
}
}
// LARGE DESKTOP LAYOUT
@media screen and (min-width: $screen-lg-min){
#o_employee_right {
- @include o-flex(0, 1, 30%);
+ flex: 0 1 30%;
}
}
diff --git a/addons/hr_recruitment/static/src/scss/hr_job.scss b/addons/hr_recruitment/static/src/scss/hr_job.scss
index 671d7d20882e..0b9675c86bba 100644
--- a/addons/hr_recruitment/static/src/scss/hr_job.scss
+++ b/addons/hr_recruitment/static/src/scss/hr_job.scss
@@ -1,5 +1,5 @@
.o_kanban_view.o_kanban_ungrouped {
- @include o-flex-display;
+ display: flex;
.o_kanban_record {
width: 350px;
}
@@ -7,24 +7,24 @@
.o_kanban_view.o_kanban_dashboard {
.o_recruitment_kanban_boxes {
- @include o-flex-display;
- @include o-flex-flow(row, nowrap);
+ display: flex;
+ flex-flow: row nowrap;
.o_recruitment_kanban_box {
position: relative;
text-align: center;
padding: 0 0 0 0;
- @include o-flex(1, 1, auto);
- @include o-flex-display;
- @include o-flex-flow(row, nowrap);
- @include o-justify-content(center);
+ flex: 1 1 auto;
+ display: flex;
+ flex-flow: row nowrap;
+ justify-content: center;
&:first-child {
- @include o-justify-content(flex-start);
+ justify-content: flex-start;
padding-left: 16px;
}
&:last-child {
- @include o-justify-content(flex-end);
+ justify-content: flex-end;
padding-right: 16px;
}
diff --git a/addons/im_livechat/static/src/scss/im_livechat.scss b/addons/im_livechat/static/src/scss/im_livechat.scss
index 2971cb0fb712..1c154c270497 100644
--- a/addons/im_livechat/static/src/scss/im_livechat.scss
+++ b/addons/im_livechat/static/src/scss/im_livechat.scss
@@ -27,7 +27,7 @@
.o_livechat_rating {
/* Livechat Rating : feedback smiley */
- @include o-flex(1, 1, auto);
+ flex: 1 1 auto;
overflow: auto;
padding: 15px;
font-size: 14px;
diff --git a/addons/im_livechat/static/src/scss/im_livechat_bootstrap.scss b/addons/im_livechat/static/src/scss/im_livechat_bootstrap.scss
index 8367e3b50af3..14751937d9a6 100644
--- a/addons/im_livechat/static/src/scss/im_livechat_bootstrap.scss
+++ b/addons/im_livechat/static/src/scss/im_livechat_bootstrap.scss
@@ -9,7 +9,7 @@
.o_thread_window {
&,* {
- @include box-sizing(border-box);
+ box-sizing: border-box;
}
.o_thread_window_header {
height: 28px;
diff --git a/addons/im_support/static/src/scss/systray.scss b/addons/im_support/static/src/scss/systray.scss
index 444896368b9e..eb82d2b559d2 100644
--- a/addons/im_support/static/src/scss/systray.scss
+++ b/addons/im_support/static/src/scss/systray.scss
@@ -5,8 +5,8 @@
box-sizing: content-box;
.o_preview_info {
- @include o-flex-display;
- @include o-align-items(center);
+ display: flex;
+ align-items: center;
}
}
}
diff --git a/addons/mail/static/src/scss/abstract_thread_window.scss b/addons/mail/static/src/scss/abstract_thread_window.scss
index c55662f4bb33..a05d6c24fdaa 100644
--- a/addons/mail/static/src/scss/abstract_thread_window.scss
+++ b/addons/mail/static/src/scss/abstract_thread_window.scss
@@ -1,8 +1,8 @@
$o-mail-thread-window-zindex: $zindex-modal + 1 !default;
.o_thread_window {
- @include o-flex-display;
- @include o-flex-flow(column, nowrap);
+ display: flex;
+ flex-flow: column nowrap;
position: fixed;
width: $o-mail-thread-window-width;
max-width: 100%;
@@ -28,8 +28,8 @@ $o-mail-thread-window-zindex: $zindex-modal + 1 !default;
}
.o_thread_window_header {
- @include o-flex-display;
- @include o-flex(0, 0, auto);
+ display: flex;
+ flex: 0 0 auto;
color: white;
padding: $o-mail-chatter-gap*0.5 $o-mail-chatter-gap;
border-radius: 3px 3px 0 0;
@@ -54,12 +54,12 @@ $o-mail-thread-window-zindex: $zindex-modal + 1 !default;
.o_thread_window_title {
cursor: pointer;
- @include o-flex(1, 1, auto);
+ flex: 1 1 auto;
@include o-text-overflow;
}
.o_thread_window_buttons {
- @include o-flex(0, 0, auto);
+ flex: 0 0 auto;
.o_thread_window_close, .o_thread_window_expand {
color: white;
padding: 3px;
@@ -71,7 +71,7 @@ $o-mail-thread-window-zindex: $zindex-modal + 1 !default;
}
.o_mail_thread {
- @include o-flex(1, 1, auto);
+ flex: 1 1 auto;
overflow: auto;
-webkit-overflow-scrolling: touch; // smooth scrolling in iOS app (Safari)
.o_thread_date_separator {
diff --git a/addons/mail/static/src/scss/chatter.scss b/addons/mail/static/src/scss/chatter.scss
index 314eb9b8bacc..059c4e983208 100644
--- a/addons/mail/static/src/scss/chatter.scss
+++ b/addons/mail/static/src/scss/chatter.scss
@@ -14,7 +14,7 @@
position: relative;
margin: $grid-gutter-width*0.5 0 0;
padding: 0;
- @include o-flex-display;
+ display: flex;
> .btn {
height: $o-statusbar-height + 1;
@@ -24,7 +24,7 @@
> .o_followers {
height: $o-statusbar-height + 1;
border-bottom: 1px solid transparent;
- @include o-flex(1,1,auto);
+ flex: 1 1 auto;
}
}
diff --git a/addons/mail/static/src/scss/composer.scss b/addons/mail/static/src/scss/composer.scss
index 58bf5596cd32..f12d0cbf5283 100644
--- a/addons/mail/static/src/scss/composer.scss
+++ b/addons/mail/static/src/scss/composer.scss
@@ -14,8 +14,8 @@
.o_thread_composer {
position: relative;
- @include o-flex(0, 0, auto);
- @include o-flex-display;
+ flex: 0 0 auto;
+ display: flex;
margin: 1px 0;
border-top: none;
background: $gray-lighter;
@@ -30,11 +30,11 @@
}
.o_composer_subject {
- @include o-flex-display;
+ display: flex;
padding-bottom: 5px;
> input {
- @include o-flex(1, 1, auto);
+ flex: 1 1 auto;
padding: 5px;
margin-right: 30px;
}
@@ -100,7 +100,7 @@
}
.o_chatter_composer_info, .o_composer_suggested_partners {
- @include o-flex(0, 0, 100%);
+ flex: 0 0 100%;
margin-bottom: $o-mail-chatter-gap*0.5;
}
@@ -137,10 +137,10 @@
}
&:not(.o_chat_inline_composer) {
- @include o-flex-flow(row, wrap);
+ flex-flow: row wrap;
.o_composer_container, .o_composer_button_send {
- @include o-flex(1, 0, 100%);
+ flex: 1 0 100%;
}
.o_composer, .o_composer_subject {
padding: $o-mail-chatter-gap $o-mail-chatter-gap 0;
@@ -152,7 +152,7 @@
&.o_chat_inline_composer {
.o_composer_container {
- @include o-flex(1, 1, auto);
+ flex: 1 1 auto;
}
.o_composer {
padding: $o-mail-chatter-gap $o-mail-chatter-gap 0 $o-mail-chatter-gap;
@@ -165,26 +165,26 @@
}
}
.o_composer_input {
- @include o-flex-display();
- @include o-flex-flow(row, wrap);
+ display: flex;
+ flex-flow: row wrap;
}
.o_composer_text_field {
- @include o-flex(1, 1, 50%);
+ flex: 1 1 50%;
margin: 0;
padding: 0;
}
.o_chatter_composer_tools {
- @include o-flex(0, 1, auto);
+ flex: 0 1 auto;
}
.o_composer_attachments_list {
- @include o-flex(1, 0, 100%);
+ flex: 1 0 100%;
}
.o_chatter_composer_tools {
border: none;
border-left: 1px solid $gray-lighter-dark;
padding-left: $o-mail-chatter-gap*0.5;
- @include o-transform(translateY(-$o-mail-chatter-gap*0.5));
+ transform: translateY(-$o-mail-chatter-gap*0.5);
}
.o_composer_button_send {
@@ -210,15 +210,15 @@
}
}
.o_composer_input {
- @include o-flex-display();
- @include o-flex-flow(row, nowrap);
+ display: flex;
+ flex-flow: row nowrap;
textarea.o_composer_text_field {
- @include o-flex(1, 1, auto);
+ flex: 1 1 auto;
}
.o_chatter_composer_tools {
- @include o-flex(0, 0, auto);
+ flex: 0 0 auto;
}
@media (max-width: $screen-xs-max) {
.o_composer_button_send {
@@ -255,8 +255,8 @@ $o-mail-attachment-margin: 5px;
.o_attachments_list, .o_attachments_previews {
margin: 0 (-$o-mail-attachment-margin) 0;
- @include o-flex-display;
- @include o-flex-flow(row, wrap);
+ display: flex;
+ flex-flow: row wrap;
}
.o_attachment {
@@ -311,9 +311,9 @@ $o-mail-attachment-margin: 5px;
.o_attachment_uploaded, .o_attachment_delete {
@include o-position-absolute(0, 0, 0, $left: auto);
- @include o-flex-display();
- @include o-align-items(center);
- @include o-justify-content(center);
+ display: flex;
+ align-items: center;
+ justify-content: center;
width: 45px;
}
@@ -322,8 +322,8 @@ $o-mail-attachment-margin: 5px;
color: white;
cursor: pointer;
font-size: 20px;
- @include o-transform(translateX(100%));
- @include o-transition(all, 0.3s);
+ transform: translateX(100%);
+ transition: all 0.3s ease 0s;
&:hover {
background: $brand-primary;
@@ -349,8 +349,8 @@ $o-mail-attachment-margin: 5px;
}
&:hover .o_attachment_delete {
- @include o-transition(all, 0.1s);
- @include o-transform(translateX(0));
+ transition: all 0.1s ease 0s;
+ transform: translateX(0);
}
}
@@ -382,20 +382,20 @@ $o-mail-attachment-margin: 5px;
@include o-position-absolute(0, 0, 0, 0);
background-size: cover;
background-position: center;
- @include o-transform(scale(1.05));
- @include o-transition(all, 0.3s);
+ transform: scale(1.05);
+ transition: all 0.3s ease 0s;
}
&:hover .o_attachment_image {
- @include o-transform(scale(1));
+ transform: scale(1);
}
}
.o_image_overlay {
@include o-position-absolute($top: 0, $left: 0, $right:0, $bottom:0);
@include o-hover-opacity($default-opacity: 0, $hover-opacity: 1);
- @include o-linear-gradient(180deg, rgba(black, 0.2), rgba(black, 0.9));
- @include o-transition(all, 0.3s);
+ background-image: linear-gradient(180deg, rgba(black, 0.2), rgba(black, 0.9));
+ transition: all 0.3s ease 0s;
padding: 10px;
.o_attachment_title {
@@ -468,9 +468,9 @@ $o-mail-attachment-margin: 5px;
.o_viewer_zoomer {
width: 100%;
height: 100%;
- @include o-flex-display;
- @include o-justify-content(center);
- @include o-align-items(center);
+ display: flex;
+ justify-content: center;
+ align-items: center;
padding: 45px 0;
img {
@@ -500,7 +500,7 @@ $o-mail-attachment-margin: 5px;
.o_viewer_toolbar {
@include o-position-absolute($left: 50%, $bottom: $grid-gutter-width*0.5);
- @include o-transform(translate(-50%, -50%));
+ transform: translate(-50%, -50%);
overflow: hidden;
border-radius: 4px;
background-color: rgba(black, 0.4);
diff --git a/addons/mail/static/src/scss/discuss.scss b/addons/mail/static/src/scss/discuss.scss
index 2bbf26ba2201..8096138ef5ff 100644
--- a/addons/mail/static/src/scss/discuss.scss
+++ b/addons/mail/static/src/scss/discuss.scss
@@ -12,13 +12,13 @@
background-color: #DFA941;
color: white;
text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.25);
- @include o-flex-display;
+ display: flex;
border-bottom: 1px solid $o-main-color-muted;
.o_mail_request_permission {
- @include o-flex-display;
+ display: flex;
justify-content: center;
- @include o-flex(1,1, auto);
+ flex: 1 1 auto;
}
> span {
font-size: 16px;
@@ -48,7 +48,7 @@
}
.o_mail_sidebar_title {
- @include o-flex-display;
+ display: flex;
padding: 6px $o-horizontal-padding 0 $o-horizontal-padding;
align-items: center;
justify-content: space-between;
@@ -64,16 +64,16 @@
}
}
.o_mail_discuss_item {
- @include o-flex-display;
+ display: flex;
width: 100%;
padding: 2px $o-horizontal-padding 2px ($o-horizontal-padding + 12px); // compensate icon
.o_thread_name {
- @include o-flex(1, 1, auto);
+ flex: 1 1 auto;
@include o-text-overflow;
}
.o_mail_sidebar_needaction, .o_mail_partner_unpin, .o_mail_channel_settings {
- @include o-flex(0, 0, auto);
+ flex: 0 0 auto;
}
.o_mail_sidebar_needaction {
margin: 0 0 0 5px;
@@ -111,8 +111,8 @@
}
.o_mail_discuss_content {
- @include o-flex-display;
- @include o-flex-flow(column, nowrap);
+ display: flex;
+ flex-flow: column nowrap;
height: 100%;
margin-left: $o-mail-chat-sidebar-width;
position: relative;
@@ -125,7 +125,7 @@
}
.o_mail_thread {
- @include o-flex(1, 0, 0);
+ flex: 1 0 0;
overflow: auto;
padding: 0 0 15px 0;
-webkit-overflow-scrolling: touch; // smooth scrolling in iOS app (Safari)
@@ -262,18 +262,18 @@
// ------------------------------------------------------------------
@media (max-width: $screen-xs-max) {
.o_mail_discuss {
- @include o-flex-display;
- @include o-flex-flow(column, nowrap);
+ display: flex;
+ flex-flow: column nowrap;
background: white;
.o_mail_discuss_mobile_mailboxes_buttons {
- @include o-flex-display;
- @include o-flex(0, 0, auto);
+ display: flex;
+ flex: 0 0 auto;
z-index: 2;
box-shadow: 0 2px 4px $gray-lighter-darker;
.o_mailbox_inbox_item {
- @include o-flex(1, 1, auto);
+ flex: 1 1 auto;
width: 50%;
padding: 2%;
@@ -284,7 +284,7 @@
}
.o_mail_discuss_content {
- @include o-flex(1, 0, 0);
+ flex: 1 0 0;
margin-left: 10px;
margin-right: 10px;
background-color: transparent;
@@ -310,7 +310,7 @@
}
}
.o_mail_mobile_tabs {
- @include o-flex(0, 0, auto);
+ flex: 0 0 auto;
}
}
}
@@ -320,7 +320,7 @@
// ------------------------------------------------------------------
.o_mail_preview {
- @include o-flex-display;
+ display: flex;
background-color: $gray-lighter;
color: $o-main-text-color;
cursor: pointer;
@@ -339,7 +339,7 @@
border-bottom: 1px solid $gray-lighter-darker;
}
.o_mail_preview_image {
- @include o-flex(0, 0, auto);
+ flex: 0 0 auto;
position: relative;
> img {
@include square(100%);
@@ -353,19 +353,19 @@
}
}
.o_preview_info {
- @include o-flex(1, 1, 100%);
+ flex: 1 1 100%;
overflow: hidden;
.o_preview_title {
- @include o-flex-display;
+ display: flex;
.o_preview_name {
- @include o-flex(0, 1, auto);
+ flex: 0 1 auto;
@include o-text-overflow;
}
.o_preview_counter {
- @include o-flex(1, 1, auto);
+ flex: 1 1 auto;
}
.o_last_message_date {
- @include o-flex(0, 0, auto);
+ flex: 0 0 auto;
color: $o-main-color-muted;
font-weight: 500;
}
@@ -429,15 +429,15 @@
}
.o_mail_mobile_tabs {
- @include o-flex-display;
+ display: flex;
box-shadow: 0 0 8px $gray-lighter-darker;
.o_mail_mobile_tab {
- @include o-flex-display;
- @include o-flex(1, 1, auto);
+ display: flex;
+ flex: 1 1 auto;
width: 20%;
- @include o-flex-flow(column, nowrap);
- @include o-justify-content(space-between);
+ flex-flow: column nowrap;
+ justify-content: space-between;
padding: $o-mail-chatter-mobile-gap $o-mail-chatter-mobile-gap*2;
box-shadow: 1px 0 0 $gray-lighter-darker;
text-align: center;
diff --git a/addons/mail/static/src/scss/mail_activity.scss b/addons/mail/static/src/scss/mail_activity.scss
index d4d9a3ffecb6..b4bd611f31c9 100644
--- a/addons/mail/static/src/scss/mail_activity.scss
+++ b/addons/mail/static/src/scss/mail_activity.scss
@@ -16,7 +16,7 @@
&.collapsed {
margin-bottom: 0;
- @include o-transition(margin, 0.8s);
+ transition: margin 0.8s ease 0s;
.o_chatter_planned_activities_summary {
display: inline-block;
diff --git a/addons/mail/static/src/scss/systray.scss b/addons/mail/static/src/scss/systray.scss
index 9937608e0405..dfad781ab42d 100644
--- a/addons/mail/static/src/scss/systray.scss
+++ b/addons/mail/static/src/scss/systray.scss
@@ -9,15 +9,15 @@
&.o_no_notification > a {
opacity: 0.5;
> i {
- @include o-transform(translateY(0px));
+ transform: translateY(0px);
}
.o_notification_counter {
display: none;
}
}
&.open .o_mail_systray_dropdown {
- @include o-flex-display;
- @include o-flex-flow(column, nowrap);
+ display: flex;
+ flex-flow: column nowrap;
}
.o_notification_counter {
@include o-position-absolute($top: 20%, $right: 1px);
@@ -31,16 +31,16 @@
padding: 0;
.o_spinner {
- @include o-flex-display;
- @include o-align-items(center);
- @include o-justify-content(center);
+ display: flex;
+ align-items: center;
+ justify-content: center;
color: $o-main-text-color;
height: 50px;
}
.o_mail_systray_dropdown_top {
- @include o-flex-display;
- @include o-flex(0, 0, auto);
+ display: flex;
+ flex: 0 0 auto;
justify-content: space-between;
border-bottom: 1px solid $gray-lighter-darker;
box-shadow: 0 0 2px $gray-lighter-darker;
@@ -60,7 +60,7 @@
}
.o_mail_systray_dropdown_items {
- @include o-flex(0, 1, auto);
+ flex: 0 1 auto;
max-height: 400px;
min-height: 50px;
overflow-y: auto;
@@ -91,7 +91,7 @@
}
.o_no_activity {
cursor: initial;
- @include o-align-items(center);
+ align-items: center;
color: grey;
opacity: 0.5;
padding: 3px;
diff --git a/addons/mail/static/src/scss/thread.scss b/addons/mail/static/src/scss/thread.scss
index 6d8eb8b8254b..1bcc80daa6b7 100644
--- a/addons/mail/static/src/scss/thread.scss
+++ b/addons/mail/static/src/scss/thread.scss
@@ -38,7 +38,7 @@
}
.o_thread_message {
- @include o-flex-display;
+ display: flex;
padding: 4px $o-horizontal-padding;
margin-bottom: 0px;
@@ -48,7 +48,7 @@
}
.o_thread_message_sidebar {
- @include o-flex(0, 0, $o-mail-thread-avatar-size);
+ flex: 0 0 $o-mail-thread-avatar-size;
margin-right: 10px;
margin-top: 2px;
text-align: center;
@@ -99,7 +99,7 @@
}
.o_thread_message_core {
- @include o-flex(1, 1, auto);
+ flex: 1 1 auto;
min-width: 0;
max-width: 100%;
word-wrap: break-word;
diff --git a/addons/mail/static/src/scss/thread_window.scss b/addons/mail/static/src/scss/thread_window.scss
index bca79bc9c7a2..572ff0c8ff3d 100644
--- a/addons/mail/static/src/scss/thread_window.scss
+++ b/addons/mail/static/src/scss/thread_window.scss
@@ -1,18 +1,18 @@
.o_thread_window {
&.o_thread_less {
.o_thread_search_input {
- @include o-flex-display;
- @include o-align-items(baseline);
+ display: flex;
+ align-items: baseline;
padding: $o-mail-chatter-gap*0.5 $o-mail-chatter-gap;
> span {
- @include o-flex(0, 0, auto);
+ flex: 0 0 auto;
}
> input {
margin-left: 5px;
padding: $o-mail-chatter-gap*0.5;
- @include o-flex(1, 1, 100%);
+ flex: 1 1 100%;
}
}
diff --git a/addons/mass_mailing/static/src/scss/mass_mailing.ui.scss b/addons/mass_mailing/static/src/scss/mass_mailing.ui.scss
index eaac6c4d2dd6..93ea16898828 100644
--- a/addons/mass_mailing/static/src/scss/mass_mailing.ui.scss
+++ b/addons/mass_mailing/static/src/scss/mass_mailing.ui.scss
@@ -14,9 +14,9 @@
border-radius: 0;
background-color: $o-we-color-darker;
color: $o-we-color-text-normal;
- @include o-flex-display;
- @include o-justify-content(center);
- @include o-align-items(center);
+ display: flex;
+ justify-content: center;
+ align-items: center;
&:hover, &:focus, &:active {
color: $o-we-color-text-light;
@@ -93,7 +93,7 @@ body.o_force_mail_theme_choice {
max-width: 25%;
> a {
- @include o-transition(all, 0.3s, ease);
+ transition: all 0.3s ease 0s;
.o_thumb {
display: none;
@@ -102,8 +102,8 @@ body.o_force_mail_theme_choice {
border-top: 1px solid $o-we-color-text-normal;
box-shadow: 0 5px 10px rgba(black, 0.8);
will-change: transform;
- @include backface-visibility(hidden);
- @include o-transition(all, 0.3s);
+ backface-visibility: hidden;
+ transition: all 0.3s ease 0s;
&.small {
display: block;
diff --git a/addons/note/static/src/scss/note.scss b/addons/note/static/src/scss/note.scss
index f1e90d80d57f..c487e7bbb85f 100644
--- a/addons/note/static/src/scss/note.scss
+++ b/addons/note/static/src/scss/note.scss
@@ -30,13 +30,13 @@
.o_preview_info {
.o_preview_title {
.o_preview_name {
- @include o-flex(1, 1, 100%);
+ flex: 1 1 100%;
}
}
.o_note_input_box {
- @include o-flex-display;
+ display: flex;
p {
- @include o-flex(1, 1, auto);
+ flex: 1 1 auto;
}
}
.o_note_save {
diff --git a/addons/portal/static/src/scss/portal.scss b/addons/portal/static/src/scss/portal.scss
index a8ea6995d14c..0a4798c88459 100644
--- a/addons/portal/static/src/scss/portal.scss
+++ b/addons/portal/static/src/scss/portal.scss
@@ -331,7 +331,7 @@ img.o_we_custom_image {
background-color: $table-bg-active;
border-radius: $btn-border-radius-base;
border-top-right-radius: 0;
- @include o-transform(translateY(-2px));
+ transform: translateY(-2px);
&.in {
overflow: visible;
diff --git a/addons/project/static/src/scss/project_dashboard.scss b/addons/project/static/src/scss/project_dashboard.scss
index 919da241023b..221f91fc8a9b 100644
--- a/addons/project/static/src/scss/project_dashboard.scss
+++ b/addons/project/static/src/scss/project_dashboard.scss
@@ -1,7 +1,7 @@
.o_kanban_view.o_kanban_dashboard.o_project_kanban {
.o_project_kanban_boxes {
- @include o-flex-display;
- @include o-flex-flow(row, nowrap);
+ display: flex;
+ flex-flow: row nowrap;
.o_project_kanban_box {
position: relative;
diff --git a/addons/web/static/src/scss/animation.scss b/addons/web/static/src/scss/animation.scss
index 92097a23298b..d65a509bcad2 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 7cd25c7e5789..2ebad35337a5 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 13913bdf3d52..345009ac3e91 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 17cec27d3a54..ab2635657ad3 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 6755bed49e91..ed4ed956a9ee 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 c14144e02d34..cc51876d0177 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 370fdc036b32..52417cfad9f0 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 f46de22e9db1..02079d09178d 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 2cb35d33a2e3..a96f1037c6d6 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 e6317d4f89ea..9a1bbd2b98ca 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 a42962ed8f0d..b2ae3aa00057 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 4d00f1be3cfd..1a610cd72c20 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 ed4e6ad84364..c73c47e14db1 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 27c10cda5563..d92d79973c30 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 ec53efc6df55..83791ce42ddb 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 82faabfa3bcd..5881a54a7a8c 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 0eec3e60049c..5d451a06942e 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 770532d66939..c2ba099cf957 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 3efddd8eab21..9aa0e21bbdd1 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 8a705242adc9..9e654c71bcc3 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 0ff5fd320e7d..0ad27f5c3916 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 efb8dce7598a..4b76f10b1d29 100644
--- a/addons/web/static/src/scss/utils.scss
+++ b/addons/web/static/src/scss/utils.scss
@@ -13,119 +13,6 @@
vertical-align: middle;
}
-// ------------------------------------------------------------------
-// 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
// ------------------------------------------------------------------
@@ -149,43 +36,6 @@
vertical-align: top; // To update display context changed by overflow:hidden
}
-// ------------------------------------------------------------------
-// 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
// ------------------------------------------------------------------
@@ -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 7091cbc3c98c..e38a25b5e583 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 8f4dadb22dff..68be626b93a1 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 f811df488023..db550f85d741 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;
diff --git a/addons/web_editor/static/src/scss/web_editor.common.scss b/addons/web_editor/static/src/scss/web_editor.common.scss
index ed125d62c1c8..67301b3a35f5 100644
--- a/addons/web_editor/static/src/scss/web_editor.common.scss
+++ b/addons/web_editor/static/src/scss/web_editor.common.scss
@@ -123,10 +123,6 @@ html[data-browser^="msie"] div.media_iframe_video iframe {
@media (max-width: $screen-xs-max) {
img:not(.cke_iframe), .media_iframe_video, span.fa, i.fa {
- -webkit-transform: none !important;
- -moz-transform: none !important;
- -ms-transform: none !important;
- -o-transform: none !important;
transform: none !important;
}
}
diff --git a/addons/web_editor/static/src/scss/web_editor.ui.scss b/addons/web_editor/static/src/scss/web_editor.ui.scss
index 179f814c4b32..585f134afb76 100644
--- a/addons/web_editor/static/src/scss/web_editor.ui.scss
+++ b/addons/web_editor/static/src/scss/web_editor.ui.scss
@@ -22,7 +22,7 @@
z-index: $zindex-modal - 9;
background-color: rgba(0,0,0,0);
- @include o-transition(background-color, 400ms, $o-we-md-ease);
+ transition: background-color 400ms $o-we-md-ease 0s;
font-family: $o-we-font-family;
form.navbar-form {
@@ -31,7 +31,7 @@
margin: 0;
padding: 0;
@include o-position-absolute($right: -$o-we-sidebar-width);
- @include o-transition(right, 0.4s, $o-we-md-ease);
+ transition: right 0.4s $o-we-md-ease 0s;
border-left: 1px solid $o-we-color-divider;
background-color: inherit;
@@ -47,7 +47,7 @@
font-size: 13px;
font-family: $o-we-font-family;
- @include o-transition(all, 0.3s);
+ transition: all 0.3s ease 0s;
border: none;
border-radius: 0;
@@ -100,8 +100,8 @@ html[lang] > body.editor_enable [data-oe-translation-state] {
#oe_snippets {
@include o-w-preserve-btn;
- @include o-flex-display;
- @include o-flex-flow(column, nowrap);
+ display: flex;
+ flex-flow: column nowrap;
@include o-position-absolute(0, auto, 0, -$o-we-sidebar-width);
position: fixed;
width: $o-we-sidebar-width;
@@ -109,12 +109,12 @@ html[lang] > body.editor_enable [data-oe-translation-state] {
font-family: Roboto, $font-family-sans-serif;
border-right: 1px solid $o-we-color-divider;
- @include o-transition(left, 400ms, $o-we-md-ease);
- @include o-linear-gradient(45deg, $o-we-color-normal, darken($o-we-color-normal, 10%));
+ transition: left 400ms $o-we-md-ease 0s;
+ background-image: linear-gradient(45deg, $o-we-color-normal, darken($o-we-color-normal, 10%));
box-shadow: 0px 10px 10px -10px black inset;
#snippets_menu {
- @include o-flex(0, 0, auto);
+ flex: 0 0 auto;
height: $o-navbar-height;
line-height: $o-navbar-height;
margin: 0;
@@ -133,9 +133,9 @@ html[lang] > body.editor_enable [data-oe-translation-state] {
.o_panel_header {
color: #999999;
- @include o-flex-display;
- @include o-align-items(center);
- @include o-justify-content(center);
+ display: flex;
+ align-items: center;
+ justify-content: center;
padding: 3%;
color: white;
margin-bottom: 3%;
@@ -157,7 +157,7 @@ html[lang] > body.editor_enable [data-oe-translation-state] {
margin: 0 0 6% 3%;
box-shadow: none;
background-color: transparent;
- @include user-select(none);
+ user-select: none;
cursor: pointer;
cursor: copy;
@@ -173,8 +173,8 @@ html[lang] > body.editor_enable [data-oe-translation-state] {
}
&:hover .oe_snippet_thumbnail_img {
- @include o-transition(transform, 200ms, ease);
- @include scale(1.05);
+ transition: transform 200ms ease 0s;
+ transform: scale(1.05);
}
}
@@ -256,7 +256,7 @@ html[lang] > body.editor_enable [data-oe-translation-state] {
}
#wrapwrap .oe_drop_zone {
background-color: rgba($o-brand-primary, 0.05);
- @include o-animation(dropZoneInsert, 1s, linear, 0s, infinite, alternate);
+ animation: dropZoneInsert 1s linear 0s infinite alternate;
&.oe_insert {
z-index: 999;
@@ -270,7 +270,7 @@ html[lang] > body.editor_enable [data-oe-translation-state] {
height: $o-we-dropzone-size;
margin: (-$o-we-dropzone-size/2) 0;
- @include o-transition(margin, 400ms, linear);
+ transition: margin 400ms linear 0s;
&:after {
content: "";
@@ -312,7 +312,7 @@ html[lang] > body.editor_enable [data-oe-translation-state] {
height: 0;
background: transparent;
text-align: center;
- @include o-transition(opacity, 400ms, linear);
+ transition: opacity 400ms linear 0s;
&.o_keypress {
opacity: 0;
}
@@ -341,7 +341,7 @@ html[lang] > body.editor_enable [data-oe-translation-state] {
border-radius: 0;
font-weight: normal;
- @include o-transition(all, 400ms);
+ transition: all 400ms ease 0s;
color: $o-we-color-text-light;
background-color: $o-we-color-light;
&:hover {
@@ -367,7 +367,7 @@ html[lang] > body.editor_enable [data-oe-translation-state] {
}
}
&.oe_snippet_parent > i {
- @include scaleX(-1);
+ transform: scaleX(-1);
font-size: 12px;
}
@@ -397,15 +397,15 @@ html[lang] > body.editor_enable [data-oe-translation-state] {
height: 2px;
background-color: $o-we-color-text-light;
@include o-position-absolute(46%);
- @include o-transition(all, 0.3s);
+ transition: all 0.3s ease 0s;
}
&:before {
right: 9px;
- @include rotate(45deg);
+ transform: rotate(45deg);
}
&:after {
right: 5px;
- @include rotate(-45deg);
+ transform: rotate(-45deg);
}
}
// Open menu
@@ -419,7 +419,7 @@ html[lang] > body.editor_enable [data-oe-translation-state] {
transform: translateX(5px) rotate(-45deg);
}
&:after {
- @include rotate(45deg);
+ transform: rotate(45deg);
}
}
@@ -498,7 +498,7 @@ html[lang] > body.editor_enable [data-oe-translation-state] {
content: "\f148";
@include o-position-absolute($top: 2px, $left: 8px);
font-family: FontAwesome;
- @include scaleX(-1);
+ transform: scaleX(-1);
}
~ li:not(.dropdown-header) {
a {
@@ -548,7 +548,7 @@ html[lang] > body.editor_enable [data-oe-translation-state] {
position: relative;
border: 0 solid $o-we-handles-accent-color;
- @include o-transition(background, 300ms);
+ transition: background 300ms ease 0s;
&:hover, &.o_active {
background-color: rgba($o-we-handles-accent-color, 0.2);
@@ -715,7 +715,7 @@ html[lang] > body.editor_enable [data-oe-translation-state] {
background-color: $o-we-color-dark;
color: $o-we-color-text-normal;
border-top: 2px solid transparent;
- @include o-transition(all, 0.3s);
+ transition: all 0.3s ease 0s;
> .fa {
color: $o-we-color-text-normal;
@@ -1030,7 +1030,7 @@ body.editor_enable {
}
&.editor_has_snippets {
- @include o-transition(padding-left, 400ms, $o-we-md-ease);
+ transition: padding-left 400ms $o-we-md-ease 0s;
padding-left: $o-we-sidebar-width!important;
#oe_snippets {
@@ -1069,11 +1069,11 @@ body.editor_enable {
@keyframes fadeInDownSmall {
0% {
opacity: 0;
- @include translate(0, -5px);
+ transform: translate(0, -5px);
}
100% {
opacity: 1;
- @include translate(0, 0);
+ transform: translate(0, 0);
}
}
@keyframes fadeInOut {
@@ -1097,8 +1097,8 @@ body.editor_enable {
// INPUTS
.o_switch {
- @include o-flex-display;
- @include o-align-items(center);
+ display: flex;
+ align-items: center;
font-weight: normal;
cursor: pointer;
@@ -1113,7 +1113,7 @@ body.editor_enable {
width: $o-we-switch-size * 1.8;
margin-right: 0.5em;
display: inline-block;
- @include transition(all 0.3s $o-we-md-ease);
+ transition: all 0.3s $o-we-md-ease;
&:after {
content: "";
@@ -1124,14 +1124,14 @@ body.editor_enable {
margin-top: 0.1ex;
margin-left: 0.1ex;
border-radius: 100rem;
- @include transition(all 0.3s $o-we-md-ease);
+ transition: all 0.3s $o-we-md-ease;
box-shadow: 0 1px 1px darken($o-we-switch-inactive-color,35%), inset 0 0 0 1px lighten($o-we-switch-inactive-color,10%);
}
}
&:checked + span {
box-shadow: none;
- @include o-linear-gradient(0deg, $o-we-color-success, darken($o-we-color-success, 10%));
+ background-image: linear-gradient(0deg, $o-we-color-success, darken($o-we-color-success, 10%));
&:after {
margin-left: ($o-we-switch-size*1.8 - $o-we-switch-size) + 0.1;
@@ -1142,7 +1142,7 @@ body.editor_enable {
> input {
&:not(:checked) + span {
box-shadow: none;
- @include o-linear-gradient(0deg, lighten($brand-danger, 5%), darken($brand-danger, 5%));
+ background-image: linear-gradient(0deg, lighten($brand-danger, 5%), darken($brand-danger, 5%));
}
}
}
@@ -1174,7 +1174,7 @@ body.editor_enable {
font-weight: normal;
@include o-position-absolute($top: 10px, $left: 5px);
pointer-events: none;
- @include transition(0.2s ease all);
+ transition: 0.2s ease all;
}
/* active state */
@@ -1193,7 +1193,7 @@ body.editor_enable {
bottom: 1px;
@include o-position-absolute;
background: #5264AE;
- @include transition(0.2s ease all);
+ transition: 0.2s ease all;
}
.bar:before {
left: 50%;
@@ -1218,28 +1218,28 @@ body.editor_enable {
/* active state */
input:focus ~ .highlight {
- @include animation(inputHighlighter 0.3s ease);
+ animation: inputHighlighter 0.3s ease;
}
}
// DRAG&DROP ANIMATIONS
.oe_snippet_body {
opacity: 0;
- @include o-animation(fadeInDownSmall, 700ms, $fill-mode: forwards);
+ animation: fadeInDownSmall 700ms forwards;
}
// ACE EDITOR
.o_ace_view_editor {
background: $o-we-ace-color;
color: white;
- @include o-flex-display;
- @include o-flex-flow(column, nowrap);
+ display: flex;
+ flex-flow: column nowrap;
opacity: 0.97;
.o_ace_view_editor_title {
- @include o-flex(0, 0, auto);
- @include o-flex-display;
- @include o-align-items(center);
+ flex: 0 0 auto;
+ display: flex;
+ align-items: center;
padding: $grid-gutter-width/4;
> .o_ace_type_switcher > button::after {
@@ -1248,12 +1248,12 @@ body.editor_enable {
}
> * {
- @include o-flex(0, 0, auto);
+ flex: 0 0 auto;
margin: 0 $grid-gutter-width/4;
&.o_include_option {
- @include o-flex-display;
- @include o-align-items(center);
+ display: flex;
+ align-items: center;
font-size: 11px;
> .o_checkbox {
@@ -1262,13 +1262,13 @@ body.editor_enable {
}
&.o_res_list {
- @include o-flex(1, 1, auto);
+ flex: 1 1 auto;
min-width: 60px;
}
}
}
#ace-view-id {
- @include o-flex(0, 0, auto);
+ flex: 0 0 auto;
padding: $grid-gutter-width/4 $grid-gutter-width/2;
background-color: lighten($o-we-ace-color, 10%);
}
@@ -1283,7 +1283,7 @@ body.editor_enable {
}
height: 70%; // in case flex is not supported
- @include o-flex(1, 1, auto);
+ flex: 1 1 auto;
.ace_gutter {
cursor: ew-resize;
@@ -1383,7 +1383,7 @@ body .modal {
.o_image {
border: $o-border-image solid transparent;
cursor: pointer;
- @include o-transition(opacity, 400ms);
+ transition: opacity 400ms ease 0s;
&.o_webimage {
width: 100%;
@@ -1438,11 +1438,11 @@ body .modal {
// VIDEO TAB
#editor-media-video .well {
padding: 0;
- @include o-flex-display;
- @include o-flex-flow(row, wrap);
+ display: flex;
+ flex-flow: row wrap;
.o_video_dialog_form {
- @include o-flex(1, 1, auto);
+ flex: 1 1 auto;
min-width: 0;
padding: 20px;
@@ -1475,10 +1475,10 @@ body .modal {
#video-preview {
position: relative;
- @include o-flex(1, 0, 50%);
- @include o-flex-display;
- @include o-flex-flow(column, nowrap);
- @include o-justify-content(center);
+ flex: 1 0 50%;
+ display: flex;
+ flex-flow: column nowrap;
+ justify-content: center;
@include o-we-preview-box(0 19px);
border: none;
@@ -1493,7 +1493,7 @@ body .modal {
max-height: 100%;
&.alert {
- @include o-animation(fadeInDownSmall, 700ms, $fill-mode: forwards);
+ animation: fadeInDownSmall 700ms forwards;
margin: 0 auto;
}
}
@@ -1523,7 +1523,7 @@ body .modal {
border: 1px dotted #888787;
background-image: url(/web/image);
background-position: center center;
- @include o-background-size(cover);
+ background-size: cover;
}
.el {
@include o-position-absolute(10px, 0, 10px, 0);
@@ -1566,7 +1566,7 @@ body .modal {
}
}
.o_bg_img_opt_ui_info {
- @include animation(fadeInOut 2s ease forwards);
+ animation: fadeInOut 2s ease forwards;
@include o-position-absolute($bottom: 1px, $right: 0);
display: block;
padding: 3px 13px;
@@ -1616,7 +1616,7 @@ body .modal {
box-shadow: 0 0 1px #333;
pointer-events: none;
&.o_with_transition {
- @include o-transition(all, 0.2s);
+ transition: all 0.2s ease 0s;
}
&:before {
pointer-events: none;
@@ -1631,7 +1631,7 @@ body .modal {
border-radius: 100em;
opacity: 1;
box-shadow: 0 0 0 100em rgba(0, 0, 0, 0.33);
- @include o-transition(opacity, 0.2s);
+ transition: opacity 0.2s ease 0s;
}
}
}
@@ -1669,13 +1669,13 @@ body .modal {
height: 350px;
.cropper-point {
background-color: white;
- @include o-transition(all, 400ms, $o-we-md-ease);
- @include o-transform(scale(1.5, 1.5));
+ transition: all 400ms $o-we-md-ease 0s;
+ transform: scale(1.5, 1.5);
border-radius: 10px;
box-shadow: 0 0 1px 1px rgba(23, 23, 23, 0.5);
opacity: 1;
&:hover {
- @include o-transform(scale(2.5, 2.5));
+ transform: scale(2.5, 2.5);
}
}
.cropper-line {
diff --git a/addons/web_editor/static/src/scss/web_editor.variables.scss b/addons/web_editor/static/src/scss/web_editor.variables.scss
index 2d36b3e97569..196af3ff0ad9 100644
--- a/addons/web_editor/static/src/scss/web_editor.variables.scss
+++ b/addons/web_editor/static/src/scss/web_editor.variables.scss
@@ -49,7 +49,7 @@ $o-we-switch-inactive-color: $o-we-color-paper !default;
padding: $padding;
border-top: 1px solid black;
border-bottom: 1px solid white;
- @include o-linear-gradient(-150deg, $o-we-color-dark, $o-we-color-darker);
+ background-image: linear-gradient(-150deg, $o-we-color-dark, $o-we-color-darker);
color: $color-text;
}
@@ -119,7 +119,7 @@ $o-we-switch-inactive-color: $o-we-color-paper !default;
}
select.form-control {
- @include o-appearance(none);
+ appearance: none;
background: url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPScxLjEnIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZycgeG1 sbnM6eGxpbms9J2h0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsnIHdpZHRoPScyNCcgaGVpZ2 h0PScyNCcgdmlld0JveD0nMCAwIDI0IDI0Jz48cGF0aCBpZD0nc3ZnXzEnIGQ9J203LjQwNiw3L jgyOGw0LjU5NCw0LjU5NGw0LjU5NCwtNC41OTRsMC40MDYsMS40MDZsLTUsNC43NjZsLTUsLTQu NzY2bDAuNDA2LC0xLjQwNnonIGZpbGw9JyM4ODgnLz48L3N2Zz4=');
background-position: 100% 65%;
background-repeat: no-repeat;
@@ -215,7 +215,7 @@ $o-we-switch-inactive-color: $o-we-color-paper !default;
background-color: $o-we-color-paper;
border: 1px solid darken($o-we-color-paper,5%);
border-radius: 0;
- @include box-shadow(none);
+ box-shadow: none;
}
}
diff --git a/addons/web_tour/static/src/scss/keyframes.scss b/addons/web_tour/static/src/scss/keyframes.scss
index 71b390211f09..0e7bb598fb27 100644
--- a/addons/web_tour/static/src/scss/keyframes.scss
+++ b/addons/web_tour/static/src/scss/keyframes.scss
@@ -1,49 +1,49 @@
@-webkit-keyframes move-left-right {
0% {
- @include translate(-3px, 0);
+ transform: translate(-3px, 0);
}
100% {
- @include translate(3px, 0);
+ transform: translate(3px, 0);
}
}
@-moz-keyframes move-left-right {
0% {
- @include translate(-3px, 0);
+ transform: translate(-3px, 0);
}
100% {
- @include translate(3px, 0);
+ transform: translate(3px, 0);
}
}
@keyframes move-left-right {
0% {
- @include translate(-3px, 0);
+ transform: translate(-3px, 0);
}
100% {
- @include translate(3px, 0);
+ transform: translate(3px, 0);
}
}
@-webkit-keyframes move-bottom-top {
0% {
- @include translate(0, -3px);
+ transform: translate(0, -3px);
}
100% {
- @include translate(0, 3px);
+ transform: translate(0, 3px);
}
}
@-moz-keyframes move-bottom-top {
0% {
- @include translate(0px, -3px);
+ transform: translate(0px, -3px);
}
100% {
- @include translate(0, 3px);
+ transform: translate(0, 3px);
}
}
@keyframes move-bottom-top {
0% {
- @include translate(0px, -3px);
+ transform: translate(0px, -3px);
}
100% {
- @include translate(0, 3px);
+ transform: translate(0, 3px);
}
}
diff --git a/addons/web_tour/static/src/scss/tip.scss b/addons/web_tour/static/src/scss/tip.scss
index 2cb72fcd9f85..3ed0f986fabe 100644
--- a/addons/web_tour/static/src/scss/tip.scss
+++ b/addons/web_tour/static/src/scss/tip.scss
@@ -72,9 +72,9 @@
border-radius $o-tip-border-radius-duration-out ease $o-tip-border-radius-delay-out;
&.o_animated {
- @include o-animation(move-bottom-top, 500ms, ease-in, 0ms, infinite, alternate);
+ animation: move-bottom-top 500ms ease-in 0ms infinite alternate;
&.right, &.left {
- @include animation-name(move-left-right);
+ animation-name: move-left-right;
}
}
diff --git a/addons/website/static/src/scss/website.backend.scss b/addons/website/static/src/scss/website.backend.scss
index 373af1ec6479..04ea2a8529de 100644
--- a/addons/website/static/src/scss/website.backend.scss
+++ b/addons/website/static/src/scss/website.backend.scss
@@ -75,7 +75,7 @@
float: left;
g.nvd3.nv-wrap.nv-lineChart {
- @include translate(45, 30); // FIXME was marked important before scss convertion
+ transform: translate(45, 30); // FIXME was marked important before scss convertion
}
g.nv-x.nv-axis .tick > line {
@@ -210,7 +210,7 @@
.o_properties_selection {
@media (min-width: $screen-md-min) {
- @include o-flex-display;
+ display: flex;
}
margin-top: 10px;
diff --git a/addons/website/static/src/scss/website.edit_mode.scss b/addons/website/static/src/scss/website.edit_mode.scss
index c315e493e08c..1d0dfe3fe9c6 100644
--- a/addons/website/static/src/scss/website.edit_mode.scss
+++ b/addons/website/static/src/scss/website.edit_mode.scss
@@ -5,8 +5,8 @@
font-family: Roboto, $font-family-sans-serif;
.o_tooltip_container {
- @include o-inline-flex-display;
- @include o-align-items(center);
+ display: inline-flex;
+ align-items: center;
> .o_tooltip {
@include o-position-absolute;
@@ -33,7 +33,7 @@
display: inline-block;
}
.btn, &.btn {
- @include user-select(auto);
+ user-select: auto;
cursor: text!important;
}
/* Summernote not Support for placeholder text https://github.com/summernote/summernote/issues/581 */
@@ -65,7 +65,7 @@
/* Prevent the text contents of draggable elements from being selectable. */
[draggable] {
- @include user-select(none);
+ user-select: none;
}
.oe_editable:focus,
diff --git a/addons/website/static/src/scss/website.scss b/addons/website/static/src/scss/website.scss
index 37f979f7e342..a05e9b320672 100644
--- a/addons/website/static/src/scss/website.scss
+++ b/addons/website/static/src/scss/website.scss
@@ -508,7 +508,7 @@ div.carousel {
border-bottom: $navbar-default-border;
margin-top: -200px;
- @include o-transition(margin-top, 500ms);
+ transition: margin-top 500ms ease 0s;
&.affixed {
margin-top: 0px;
@@ -549,7 +549,7 @@ div.carousel {
}
@media (min-width: $screen-sm-min) {
.row {
- @include o-flex-display;
+ display: flex;
> div {
margin: auto 0;
}
diff --git a/addons/website/static/src/scss/website.ui.scss b/addons/website/static/src/scss/website.ui.scss
index 3f2e65f7fb35..71afd29fc99c 100644
--- a/addons/website/static/src/scss/website.ui.scss
+++ b/addons/website/static/src/scss/website.ui.scss
@@ -88,11 +88,11 @@ body.o_connected_user {
background: $color;
@include size(100%, $thickness);
@include o-position-absolute(50%, $left:0);
- @include o-transform(rotate(45deg));
+ transform: rotate(45deg);
}
&:after {
- @include o-transform(rotate(-45deg));
+ transform: rotate(-45deg);
}
}
@@ -158,10 +158,10 @@ body .modal {
$mobile-preview-width: 320px;
$mobile-preview-height: 530px;
- @include o-flex-display;
+ display: flex;
width: $mobile-preview-width + 15;
height: $mobile-preview-height;
- @include o-transition(all, 400ms);
+ transition: all 400ms ease 0s;
&.o_invert_orientation {
width: $mobile-preview-height + 15;
@@ -252,7 +252,7 @@ body .modal {
tbody {
td {
padding: 5px;
- @include o-transition(padding, .3s);
+ transition: padding .3s ease 0s;
&:first-child {
border-width: 0 1px;
@@ -287,7 +287,7 @@ body .modal {
}
tr {
- @include o-animation(fadeInDownSmall, .3s);
+ animation: fadeInDownSmall .3s ease 0s 1 normal none running;
&:first-child {
td:first-child {
@@ -354,9 +354,9 @@ body .modal {
#o_new_content_menu_choices {
@include o-position-absolute($o-navbar-height, 0, 0, 0);
position: fixed;
- @include o-flex-display;
- @include o-justify-content(center);
- @include o-align-items(center);
+ display: flex;
+ justify-content: center;
+ align-items: center;
font-family: $o-we-font-family;
&::before {
@@ -369,9 +369,9 @@ body .modal {
}
> ul {
- @include o-flex-display;
- @include o-flex-flow(row, wrap);
- @include o-justify-content(space-around);
+ display: flex;
+ flex-flow: row wrap;
+ justify-content: space-around;
width: auto;
max-width: 60%;
max-height: 100%;
@@ -382,7 +382,7 @@ body .modal {
li {
display: block;
opacity: 0;
- @include animation(fadeInDownSmall 1s forwards);
+ animation: fadeInDownSmall 1s forwards;
margin: 2em 32px;
padding: 0 15px;
@@ -401,7 +401,7 @@ body .modal {
background-color: #2C2C36;
color: white;
- @include o-transition(all, 0.5s, cubic-bezier(0.19, 1, 0.22, 1));
+ transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1) 0s;
}
p {
color: white;
diff --git a/addons/website_blog/static/src/scss/website_blog.scss b/addons/website_blog/static/src/scss/website_blog.scss
index 5f09d61a3adb..1a06b1d584ed 100644
--- a/addons/website_blog/static/src/scss/website_blog.scss
+++ b/addons/website_blog/static/src/scss/website_blog.scss
@@ -43,7 +43,7 @@
@include o-position-absolute(0, 0, 0, 0);
display: none;
- @include o-background-size(cover);
+ background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
diff --git a/addons/website_sale/static/src/scss/website_sale.scss b/addons/website_sale/static/src/scss/website_sale.scss
index f6b3cbcaa28e..fbe8bf392dad 100644
--- a/addons/website_sale/static/src/scss/website_sale.scss
+++ b/addons/website_sale/static/src/scss/website_sale.scss
@@ -230,10 +230,7 @@
font: bold 15px Sans-Serif;
color: white;
text-align: center;
- -webkit-transform: rotate(45deg);
- -moz-transform: rotate(45deg);
- -ms-transform: rotate(45deg);
- -o-transform: rotate(45deg);
+ transform: rotate(45deg);
position: relative;
padding: 7px 0;
left: -5px;
diff --git a/addons/website_sale/static/src/scss/website_sale_backend.scss b/addons/website_sale/static/src/scss/website_sale_backend.scss
index c5ef9a72b4dd..fbdd8fdbdefc 100644
--- a/addons/website_sale/static/src/scss/website_sale_backend.scss
+++ b/addons/website_sale/static/src/scss/website_sale_backend.scss
@@ -6,18 +6,18 @@
background: none;
margin: 0 0 $grid-gutter-width*0.2;
padding: $o-mail-attachment-margin;
- @include o-flex(0, 1, 50%);
+ flex: 0 1 50%;
@media (min-width: $screen-sm-min) {
- @include o-flex(0, 0, percentage(1/3));
+ flex: 0 0 percentage(1/3);
}
@media (min-width: $screen-md-min) {
- @include o-flex(0, 0, percentage(1/5));
+ flex: 0 0 percentage(1/5);
}
@media (min-width: $screen-lg-min){
- @include o-flex(0, 0, percentage(1/6));
+ flex: 0 0 percentage(1/6);
}
.o_image_box {
diff --git a/addons/website_sale/static/src/scss/website_sale_dashboard.scss b/addons/website_sale/static/src/scss/website_sale_dashboard.scss
index 00549094a6fd..687ba5741f20 100644
--- a/addons/website_sale/static/src/scss/website_sale_dashboard.scss
+++ b/addons/website_sale/static/src/scss/website_sale_dashboard.scss
@@ -16,8 +16,8 @@
color: $o-main-color-muted;
width: 100%;
@include o-position-absolute($left: 0, $top: 12%);
- @include o-flex-display;
- @include o-justify-content(center);
+ display: flex;
+ justify-content: center;
}
.o_link_enable {
@media (min-width: $screen-md-min) {
diff --git a/addons/website_sale/static/src/scss/website_sale_frontend.scss b/addons/website_sale/static/src/scss/website_sale_frontend.scss
index a0eb2f6aa23d..825318212639 100644
--- a/addons/website_sale/static/src/scss/website_sale_frontend.scss
+++ b/addons/website_sale/static/src/scss/website_sale_frontend.scss
@@ -84,7 +84,7 @@ $o-wsale-wizard-label-completed: $state-success-text;
&.active {
.progress-wizard-dot {
- @include o-animation(fadeIn, 1s);
+ animation: fadeIn 1s ease 0s 1 normal none running;
background: $o-wsale-wizard-dot-active;
box-shadow: 0 0 0 $o-wsale-wizard-dot-active-glow - 1px $o-wsale-wizard-color-inner,
0 0 0 $o-wsale-wizard-dot-active-glow rgba($o-wsale-wizard-dot-active, 0.5);
diff --git a/addons/website_theme_install/static/src/scss/website_theme_install.scss b/addons/website_theme_install/static/src/scss/website_theme_install.scss
index 47399f98ea6d..f8cfc0c250af 100644
--- a/addons/website_theme_install/static/src/scss/website_theme_install.scss
+++ b/addons/website_theme_install/static/src/scss/website_theme_install.scss
@@ -5,7 +5,7 @@
/// Un-grouped Layout (default)
&.o_kanban_ungrouped {
- @include o-justify-content(space-between);
+ justify-content: space-between;
margin: 0 0 0 ($o-kanban-record-margin - 2 * $grid-gutter-width);
@media (max-width: $screen-xs-max) {
@@ -14,7 +14,7 @@
}
.o_kanban_record {
- @include o-flex(1, 0, 220px);
+ flex: 1 0 220px;
}
}
@@ -47,8 +47,8 @@
.o_theme_preview_top {
border: 1px solid darken($o-theme-kanban-gray, 20%);
border-radius: 2px;
- @include o-transform-origin(center, bottom);
- @include o-transition(all, .1s);
+ transform-origin: center bottom;
+ transition: all .1s ease 0s;
.o_theme_cover, .o_theme_logo, .o_theme_screenshot {
width: 100%;
@@ -75,12 +75,12 @@
.o_button_area {
@include o-position-absolute(20px, -1px, -1px, -1px);
- @include o-transition(opacity, 100ms);
- @include o-flex-display;
- @include o-flex-flow(column, nowrap);
- @include o-justify-content(center);
- @include translate3d(0,0,0);
- @include o-linear-gradient(0deg, rgba(black, 0.6), rgba(black, 0.3));
+ transition: opacity 100ms ease 0s;
+ display: flex;
+ flex-flow: column nowrap;
+ justify-content: center;
+ transform: translate3d(0,0,0);
+ background-image: linear-gradient(0deg, rgba(black, 0.6), rgba(black, 0.3));
padding: 10% 20%;
opacity: 0;
visibility: hidden;
@@ -96,15 +96,15 @@
&:not(.o_theme_installed) {
.o_theme_preview_top:hover {
- @include o-transition(all, .3s);
- @include o-transform(translateY(-10px));
+ transition: all .3s ease 0s;
+ transform: translateY(-10px);
border-color: darken($o-theme-kanban-gray, 26%);
box-shadow: 0 15px 12px -8px rgba(0, 0, 0, .4);
.o_button_area {
opacity: 1;
visibility: visible;
- @include o-transition(opacity, 0.2s, ease, 0.1s);
+ transition: opacity 0.2s ease 0.1s;
}
}
}
diff --git a/odoo/addons/base/models/assetsbundle.py b/odoo/addons/base/models/assetsbundle.py
index f229a007787c..e5812e848d86 100644
--- a/odoo/addons/base/models/assetsbundle.py
+++ b/odoo/addons/base/models/assetsbundle.py
@@ -419,7 +419,11 @@ class AssetsBundle(object):
except psycopg2.Error:
pass
- return '\n'.join(asset.minify() for asset in self.stylesheets)
+ css_content = '\n'.join(asset.minify() for asset in self.stylesheets)
+
+ # Post process the produced css to add required vendor prefixes here
+
+ return css_content
def compile_css(self, compiler, source):
"""Sanitizes @import rules, remove duplicates @import rules, then compile"""
diff --git a/odoo/addons/base/static/src/scss/onboarding.scss b/odoo/addons/base/static/src/scss/onboarding.scss
index 56c23c27576d..c152e86b31d8 100644
--- a/odoo/addons/base/static/src/scss/onboarding.scss
+++ b/odoo/addons/base/static/src/scss/onboarding.scss
@@ -33,13 +33,13 @@ $o-onboarding-violet-ui-2: #FBEEC8;
}
.o_onboarding_btn_fold, .o_onboarding_btn_close {
- @include o-position-absolute(auto,0,0);
+ @include o-position-absolute(auto, 0, 0);
padding: 6px $o-horizontal-padding + 6px;
cursor: pointer;
}
.o_onboarding_btn_close {
- top:0
+ top: 0;
}
.modal-body, .modal-title {
@@ -47,15 +47,15 @@ $o-onboarding-violet-ui-2: #FBEEC8;
}
.o_onboarding_steps, .o_onboarding_step {
- @include o-flex-display();
+ display: flex;
}
.o_onboarding_steps {
- @include o-flex-flow(row, nowrap);
- @include o-justify-content(initial);
+ flex-flow: row nowrap;
+ justify-content: initial;
@media (max-width: $screen-xs-max) {
- @include o-flex-flow(column, nowrap);
+ flex-flow: column nowrap;
.o_onboarding_folded_title {
border-right: none;
@@ -64,9 +64,9 @@ $o-onboarding-violet-ui-2: #FBEEC8;
}
.o_onboarding_step {
- @include o-flex-flow(column, nowrap);
- @include o-flex(1, 1, auto);
- @include o-align-items(center);
+ flex-flow: column nowrap;
+ flex: 1 1 auto;
+ align-items: center;
text-align: center;
position: relative;
opacity: 0.6;
@@ -74,7 +74,7 @@ $o-onboarding-violet-ui-2: #FBEEC8;
@media (max-width: $screen-xs-max) {
text-align: left;
margin-bottom: 16px;
- @include o-align-items(baseline);
+ align-items: baseline;
.o_onboarding_step_content {
max-width: none;
@@ -87,7 +87,7 @@ $o-onboarding-violet-ui-2: #FBEEC8;
}
.o_onboarding_dot {
- @include transition-delay(0s);
+ transition-delay: 0s;
}
}
@@ -111,8 +111,8 @@ $o-onboarding-violet-ui-2: #FBEEC8;
background-color: $gray-lighter;
.progress-bar {
- @include o-linear-gradient($deg: 90deg, $start-color: $o-brand-optional, $end-color: $o-brand-primary);
- @include o-transition(opacity, $o-onboarding-dot-timing);
+ background-image: linear-gradient(90deg, $o-brand-optional, $o-brand-primary);
+ transition: opacity $o-onboarding-dot-timing;
}
}
@@ -125,7 +125,7 @@ $o-onboarding-violet-ui-2: #FBEEC8;
border-radius: 100%;
background-color: $gray-lighter;
position: relative;
- @include o-transition(background, $o-onboarding-dot-timing, ease, $o-onboarding-dot-timing);
+ transition: background $o-onboarding-dot-timing ease $o-onboarding-dot-timing;
}
.o_onboarding_all_done {
@@ -139,13 +139,13 @@ $o-onboarding-violet-ui-2: #FBEEC8;
.o_onboarding_progress .progress-bar {
width: 100%;
box-shadow: none;
- @include o-transition(width, $o-onboarding-dot-timing);
+ transition: width $o-onboarding-dot-timing;
}
}
&.o_onboarding_current {
.o_onboarding_step_action, .o_onboarding_dot {
- @include o-animation(bounceIn, $duration: $o-onboarding-dot-timing*2);
+ animation: bounceIn ($o-onboarding-dot-timing*2);
}
.o_onboarding_step_action {
@@ -164,17 +164,17 @@ $o-onboarding-violet-ui-2: #FBEEC8;
}
.o_onboarding_all_done {
- @include o-animation(bounceIn, $duration: $o-onboarding-dot-timing*2);
+ animation: bounceIn ($o-onboarding-dot-timing*2);
display: block;
}
.o_onboarding_step_content_info {
- @include o-animation(o_onb_fadeIn, $duration: $o-onboarding-dot-timing*3);
+ animation: o_onb_fadeIn ($o-onboarding-dot-timing*3);
}
+ .o_onboarding_done {
.o_onboarding_dot {
- @include transition-delay(0s);
+ transition-delay: 0s;
}
.o_onboarding_progress {
@@ -196,7 +196,7 @@ $o-onboarding-violet-ui-2: #FBEEC8;
// ========= Transition =========
&.collapsing {
- @include o-transition(all, .25s);
+ transition: all .25s;
min-height: 30px;
}
@@ -215,7 +215,7 @@ $o-onboarding-violet-ui-2: #FBEEC8;
.o_onboarding_btn_fold {
top: 0;
left: 0;
- @include o-transform(scaleY(-1));
+ transform: scaleY(-1);
}
.o_onboarding_wrap {
@@ -223,7 +223,7 @@ $o-onboarding-violet-ui-2: #FBEEC8;
.o_onboarding_steps {
padding: 0;
- @include o-justify-content(baseline);
+ justify-content: baseline;
}
.o_onboarding_folded_title {
@@ -235,12 +235,12 @@ $o-onboarding-violet-ui-2: #FBEEC8;
}
.o_onboarding_folded_title, .o_onboarding_step {
- @include o-inline-flex-display();
+ display: inline-flex;
}
.o_onboarding_step {
- @include o-align-items(flex-start);
- @include o-flex(0,1,auto);
+ align-items: flex-start;
+ flex: 0 1 auto;
padding-right: 12px;
&:not(:last-of-type) {
@@ -263,7 +263,7 @@ $o-onboarding-violet-ui-2: #FBEEC8;
.o_onboarding_step_content {
padding: 0;
- @include o-flex-display();
+ display: flex;
}
.o_onboarding_step_content_info .o_onboarding_step_title {
@@ -292,7 +292,7 @@ $o-onboarding-violet-ui-2: #FBEEC8;
}
.o_onboarding_wrap {
- @include o-vertical-gradient(fade-out($bg1, 0.5), $bg2);
+ background-image: linear-gradient(to bottom, fade-out($bg1, 0.5), $bg2);
box-shadow: inset 0 -7px 20px -5px fade-out(black, 0.7);
}
@@ -305,7 +305,7 @@ $o-onboarding-violet-ui-2: #FBEEC8;
}
.progress-bar {
- @include o-linear-gradient($deg: 90deg, $start-color: $ui1, $end-color: $ui2);
+ background-image: linear-gradient(90deg, $ui1, $ui2);
}
.o_onboarding_step {
@@ -336,15 +336,15 @@ $o-onboarding-violet-ui-2: #FBEEC8;
// ========= "Cannon Confetti" animation ==========
.o_onboarding_confetti {
- @include o-animation(cannon-explosion, $o-onboarding-dot-timing*3, ease-out, 0s, 1, normal, both);
+ animation: cannon-explosion ($o-onboarding-dot-timing*3) ease-out 0s 1 normal both;
@include o-position-absolute(0, 50%, 30px);
- @include o-transform-origin(50%, 100%);
+ transform-origin: 50% 100%;
display: none;
width: 1px;
@keyframes cannon-explosion {
0% {
- @include o-transform(scale(0));
+ transform: scale(0);
}
70% {
opacity: 1;
@@ -356,63 +356,63 @@ $o-onboarding-violet-ui-2: #FBEEC8;
> div {
@include o-position-absolute(auto, 0, 5px,0);
- @include o-transform-origin(50%, 100%);
- @include o-flex-display();
- @include o-flex-flow(column, nowrap);
- @include o-justify-content(space-around);
- @include o-align-content(center);
+ transform-origin: 50% 100%;
+ display: flex;
+ flex-flow: column nowrap;
+ justify-content: space-around;
+ align-content: center;
padding-bottom: 30%;
&:nth-child(1), &:nth-child(5) {
height: 90%;
- @include o-transform(rotate(-20deg));
+ transform: rotate(-20deg);
}
&:nth-child(2), &:nth-child(4) {
height: 95%;
- @include o-transform(rotate(-10deg));
+ transform: rotate(-10deg);
}
&:nth-child(3) {
height: 100%;
}
&:nth-child(4) {
- @include o-transform(rotate(10deg));
+ transform: rotate(10deg);
}
&:nth-child(5) {
- @include o-transform(rotate(20deg));
+ transform: rotate(20deg);
}
> div {
- @include o-flex(0,1,auto);
- @include o-animation(confetti-rotate-l, $o-onboarding-dot-timing*3, ease-out, 0s, 1, normal, both);
+ flex: 0 1 auto;
+ animation: confetti-rotate-l ($o-onboarding-dot-timing*3) ease-out 0s 1 normal both;
&:nth-child(odd) {
- @include o-animation(confetti-rotate-r, $o-onboarding-dot-timing*3, ease-out, 0s, 1, normal, both);
+ animation: confetti-rotate-r ($o-onboarding-dot-timing*3) ease-out 0s 1 normal both;
}
@keyframes confetti-rotate-l {
0% {
- @include o-transform(rotate(0) scaleY(1));
+ transform: rotate(0) scaleY(1);
}
50% {
- @include o-transform(rotate(2turn) scaleY(1.5));
+ transform: rotate(2turn) scaleY(1.5);
opacity: 1;
}
100% {
- @include o-transform(rotate(2.05turn) scaleY(1));
+ transform: rotate(2.05turn) scaleY(1);
opacity: 0;
}
}
@keyframes confetti-rotate-r {
0% {
- @include o-transform(rotate(0) scaleY(1));
+ transform: rotate(0) scaleY(1);
}
50% {
- @include o-transform(rotate(-2turn) scaleY(1.5));
+ transform: rotate(-2turn) scaleY(1.5);
opacity: 1;
}
100% {
- @include o-transform(rotate(-2.05turn) scaleY(1));
+ transform: rotate(-2.05turn) scaleY(1);
opacity: 0;
}
}
--
GitLab