[REF] web,web_editor,website,report,mass_mailing,mail: LESS

* Convert some CSS to LESS
* Split/Join LESS files
* Remove duplicates between website and web_editor
* UI improvements
* Allow simple customizations thanks to LESS var&mixins for website

1 files changed, 76 insertions, 75 deletions

diff --git a/addons/web_editor/static/src/less/web_editor.variables.less b/addons/web_editor/static/src/less/web_editor.variables.less
index d72d63931bd..043dd0f404e 100644
--- a/addons/web_editor/static/src/less/web_editor.variables.less
+++ b/addons/web_editor/static/src/less/web_editor.variables.less
@@ -1,76 +1,77 @@
 
-// Fonts
-// =======================
-@we_font-default  : "Roboto", Roboto, sans-serif;
-@we_font-size-def : 14px;
-
-// COLORS UI
-// =======================
-@we_color-dark    : #2c2c36;
-@we_color-darker  : darken(@we_color-dark,2%);
-@we_color-divider : #33363e;
-@we_color-normal  : #50545d;
-@we_color-light   : #4e525b;
-
-@we_color-paper    : #fbfbfd;
-@we_color-inactive : #646465;
-
-@we_color-text-normal : #999999;
-@we_color-text-light  : #d4d5d7;
-@we_color-text-dark   : #505050;
-
-@we_color-accent         : #1cc1a9;
-@we_color-accent-d10     : darken(@we_color-accent, 10%);
-@we_color-primary        : #b35e9b;
-@we_color-primary-d10    : darken(@we_color-primary, 10%);
-@we_color-primary-l10    : lighten(@we_color-primary, 10%);
-@we_color-primary-hover  : #7e376b;
-
-@we_color-danger  : #e6586c;
-@we_color-success : #4ab980;
-
-
-// LAYOUT
-// =======================
-@we_screen_xs : 480px;
-@we_screen_sm : 768px;
-@we_screen_md : 992px;
-@we_screen_lg : 1200px;
-
-
-// TOP BAR
-// =======================
-@we_editor-bar-height             : 45px;
-@we_editor-dropdown-border-height : 2px;
-@we_editor-bar-bg                 : @we_color-primary;
-@we_editor-bar-link-color         : @we_color-paper;
-@we_editor-bar-link-shadow        : @we_color-primary-d10;
-
-
-// EDITOR
-// =======================
-@we_sidebar-width: 210px;
-
-
-// SHADOWS
-// =======================
-@we_box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
-                0 3px 1px -2px rgba(0, 0, 0, 0.2),
-                0 1px 5px 0 rgba(0, 0, 0, 0.12);
-
-
-// DROPDOWNS
-// =======================
-@we_dropdown-toggle-color        : @we_color-paper;
-@we_dropdown-toggle-shadow-color : @we_color-primary-d10;
-@we_dropdown-menu-color          : @we_color-primary-hover;
-    // open
-    @we_dropdown--open-toggle-color        : white;
-    @we_dropdown--open-toggle-bg-color     : @we_color-primary-hover;
-    @we_dropdown--open-toggle-shadow-color : @we_color-primary-hover;
-
-
-// TABS
-// =======================
-@we_tab-bg: @we_color-darker;
-@we_tab--active-bg: #3D4048;
+@o-we-color-dark: #2c2c36;
+@o-we-color-darker: darken(@o-we-color-dark, 2%);
+@o-we-color-divider: #33363e;
+@o-we-color-light: #4e525b;
+@o-we-color-normal: #50545d;
+@o-we-color-paper: #fbfbfd;
+@o-we-color-text-normal: #999999;
+@o-we-color-text-light: #d4d5d7;
+@o-we-color-danger: #e6586c;
+
+@o-we-sidebar-width: 210px;
+
+@o-we-tab-active-bg: #3D4048;
+
+// Transitions
+@o-we-md-ease: cubic-bezier(0.19, 1, 0.22, 1);
+
+// Animations
+@-webkit-keyframes fadeInDownSmall {
+    0% {
+        opacity: 0;
+        .translate(0, -5px);
+    }
+    100% {
+        opacity: 1;
+        .translate(0, 0);
+    }
+}
+@keyframes fadeInDownSmall {
+    0% {
+        opacity: 0;
+        .translate(0, -5px);
+    }
+    100% {
+        opacity: 1;
+        .translate(0, 0);
+    }
+}
+
+@-webkit-keyframes fadeInOut {
+    0% {
+        opacity: 0;
+    }
+    25% {
+        opacity: 1;
+    }
+    75% {
+        opacity: 1;
+    }
+    100% {
+        opacity: 0;
+    }
+}
+@keyframes fadeInOut {
+    0% {
+        opacity: 0;
+    }
+    25% {
+        opacity: 1;
+    }
+    75% {
+        opacity: 1;
+    }
+    100% {
+        opacity: 0;
+    }
+}
+
+@-webkit-keyframes inputHighlighter {
+    from { background: @odoo-brand-optional; }
+    to   { width: 0; background: transparent; }
+}
+@keyframes inputHighlighter {
+    from { background: @odoo-brand-optional; }
+    to   { width: 0; background: transparent; }
+}