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

diff --git a/addons/web_editor/static/src/less/web_editor.common.less b/addons/web_editor/static/src/less/web_editor.common.less
index f83b5628b4e..a7dc0edb622 100644
--- a/addons/web_editor/static/src/less/web_editor.common.less
+++ b/addons/web_editor/static/src/less/web_editor.common.less
@@ -1,166 +1,279 @@
+html, body {
+    width: 100%;
+    height: 100%;
+}
+
 /* ----- EDITOR ----- */
 .css_non_editable_mode_hidden {
-  display: none !important;
+    display: none !important;
 }
 
 /* ----- Editor (for public user, like forum) ----- */
 .note-toolbar {
-  margin-left: 0 !important;
+    margin-left: 0 !important;
 }
 
 .note-popover .popover > .arrow {
-  display: none;
+    display: none;
 }
 
 /* ----- GENERIC LAYOUTING HELPERS ---- */
-.hidden {
-  display: none !important;
-}
-
 /* table */
-#wrapwrap table.table, .o_editable table.table {
-  table-layout: fixed;
-}
-#wrapwrap table.table td, .o_editable table.table td {
-  min-width: 20px;
+#wrapwrap, .o_editable {
+    table.table {
+        table-layout: fixed;
+        td {
+            min-width: 20px;
+        }
+    }
 }
 
 /* Media */
 img.shadow {
-  -moz-box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.2);
-  -webkit-box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.2);
-  box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.2);
+    box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.2);
 }
 
 img.padding-small, .img.padding-small, span.fa.padding-small, iframe.padding-small {
-  padding: 4px;
+    padding: 4px;
 }
 img.padding-medium, .img.padding-medium, span.fa.padding-medium, iframe.padding-medium {
-  padding: 8px;
+    padding: 8px;
 }
 img.padding-large, .img.padding-large, span.fa.padding-large, iframe.padding-large {
-  padding: 16px;
+    padding: 16px;
 }
 img.padding-xl, .img.padding-xl, span.fa.padding-xl, iframe.padding-xl {
-  padding: 32px;
+    padding: 32px;
 }
 
-div.media_iframe_video.padding-small iframe {
-  padding: 4px;
-}
-div.media_iframe_video.padding-medium iframe {
-  padding: 8px;
-}
-div.media_iframe_video.padding-large iframe {
-  padding: 16px;
-}
-div.media_iframe_video.padding-xl iframe {
-  padding: 32px;
+div.media_iframe_video {
+    &.padding-small iframe {
+        padding: 4px;
+    }
+    &.padding-medium iframe {
+        padding: 8px;
+    }
+    &.padding-large iframe {
+        padding: 16px;
+    }
+    &.padding-xl iframe {
+        padding: 32px;
+    }
 }
 
 /* font awsome */
 .fa-6x {
-  font-size: 6em;
+    font-size: 6em;
 }
 
 .fa-7x {
-  font-size: 7em;
+    font-size: 7em;
 }
 
 .fa-8x {
-  font-size: 8em;
+    font-size: 8em;
 }
 
 .fa-9x {
-  font-size: 9em;
+    font-size: 9em;
 }
 
 .fa-10x {
-  font-size: 10em;
+    font-size: 10em;
 }
 
 .fa.center-block {
-  text-align: center;
+    text-align: center;
 }
 
 /* video */
 div.media_iframe_video {
-  margin: 0 auto;
-  text-align: center;
-  position: relative;
-  overflow: hidden;
-}
-div.media_iframe_video iframe {
-  width: 100%;
-  height: 100%;
-  top: 0;
-  position: absolute;
-  margin: 0 auto;
-  margin-left: -50%;
-}
-div.media_iframe_video .media_iframe_video_size {
-  padding-bottom: 66.5%;
-  position: relative;
-  width: 100%;
-  height: 0;
-}
-div.media_iframe_video .css_editable_mode_display {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  display: none;
-  z-index: 2;
+    margin: 0 auto;
+    text-align: center;
+    position: relative;
+    overflow: hidden;
+
+    iframe {
+        width: 100%;
+        height: 100%;
+        .o-position-absolute(@top: 0);
+        margin: 0 auto;
+        margin-left: -50%;
+    }
+
+    .media_iframe_video_size {
+        padding-bottom: 66.5%;
+        position: relative;
+        width: 100%;
+        height: 0;
+    }
+
+    .css_editable_mode_display {
+        .o-position-absolute();
+        width: 100%;
+        height: 100%;
+        display: none;
+        z-index: 2;
+    }
 }
 
 html[data-browser^="msie"] div.media_iframe_video iframe {
-  margin-left: 0;
+    margin-left: 0;
 }
 
 /* Mobile view */
-@media (max-width: 768px) {
-  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;
-  }
+@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;
+    }
 }
+
 /* ---- fields --- */
-address .fa.fa-mobile-phone {
-  margin: 0 3px 0 2px;
-}
-address .fa.fa-file-text-o {
-  margin-right: 1px;
+address {
+    .fa.fa-mobile-phone {
+        margin: 0 3px 0 2px;
+    }
+    .fa.fa-file-text-o {
+        margin-right: 1px;
+    }
 }
 
 span[data-oe-type="monetary"] {
-  white-space: nowrap;
+    white-space: nowrap;
 }
 
 /* ---- MENU ---- {{{ */
 div.oe_menu_buttons {
-  top: -8px;
-  right: -8px;
+    top: -8px;
+    right: -8px;
 }
 
-ul.oe_menu_editor .fa-home {
-  display: none;
+ul.oe_menu_editor { 
+    .fa-home {
+        display: none;
+    }
+    > li:first-child > div > span > .fa-home {
+        display: block;
+    }
+    .oe_menu_placeholder {
+        outline: 1px dashed #4183C4;
+    }
+    ul {
+        list-style: none;
+    }
+    li div {
+        cursor: move;
+    }
+    .disclose {
+        cursor: pointer;
+        width: 10px;
+        display: none;
+    }
 }
-ul.oe_menu_editor > li:first-child > div > span > .fa-home {
-  display: block;
+
+// Generate all margins for all sizes
+.o-margins-all(@factor: 1) {
+    // Unfortunately, the margins sizes are not
+    // mathematically related by a single function
+    .o-margins(128, @factor);
+    .o-margins(96, @factor);
+    .o-margins(92, @factor);
+    .o-margins(64, @factor);
+    .o-margins(48, @factor);
+    .o-margins(32, @factor);
+    .o-margins(24, @factor);
+    .o-margins(16, @factor);
+    .o-margins(8, @factor);
+    .o-margins(4, @factor);
+    .o-margins(0, @factor);
 }
-ul.oe_menu_editor .oe_menu_placeholder {
-  outline: 1px dashed #4183C4;
+
+// Generate all margins for one size, scalled by a
+// given factor (0 <= factor <= 1)
+.o-margins(@name, @factor: 1) {
+    .o-margins-define(@name, @factor * @name);
 }
-ul.oe_menu_editor ul {
-  list-style: none;
+
+// Generate all margins for one size, given
+// the name of the margin and intended size
+.o-margins-define(@name, @size: @name) {
+    .mt@{name} {margin-top: ~"@{size}px"!important;}
+    .mb@{name} {margin-bottom: ~"@{size}px"!important;}
+    .ml@{name} {margin-left: ~"@{size}px"!important;}
+    .mr@{name} {margin-right: ~"@{size}px"!important;}
 }
-ul.oe_menu_editor li div {
-  cursor: move;
+
+// Generate all margins
+.o-margins-all();
+
+// Possibility to change the margins ratio for small screen sizes, e.g.:
+// @media (max-width: 768px) {
+//     .o-margins-all(0.75);
+// }
+// Possibility to only redefine single margins for small screen sizes, e.g.:
+// @media (max-width: 768px) {
+//     .o-margins(64, 0.50);
+//     .o-margins(48, 0.50);
+// }
+// Possibility to directly redefine the size of single margins instead of refering to a factor for small screen sizes, e.g.:
+// @media (max-width: 768px) {
+//     .o-margins-define(128, 48);
+//     .o-margins-define(96, 48);
+//     .o-margins-define(64, 48);
+// }
+
+a.o_underline {
+    text-decoration: underline;
+    &:hover {
+        text-decoration: underline;
+    }
 }
-ul.oe_menu_editor .disclose {
-  cursor: pointer;
-  width: 10px;
-  display: none;
+
+// Colors
+@gray-white: #fff;
+
+@color-alpha: #1cc1a9;
+@color-beta: #a24689;
+@color-gamma: #BA3C3D;
+@color-delta: #0D6759;
+@color-epsilon: #0B2E59;
+
+.o-create-color-classes(@class_name, @color, @complementary: contrast(@color, @text-color, #FFF, 60%)) {
+    .bg-@{class_name} {
+        background-color: @color;
+        color: @complementary;
+        .text-muted {
+            color: fade(@complementary, 40%);
+        }
+    }
+    body .text-@{class_name} { // html to make the rules more important that bg-* ones
+        color: @color;
+    }
 }
+
+// Create classes for theme colors
+.o-create-color-classes(alpha, @color-alpha);
+.o-create-color-classes(beta, @color-beta);
+.o-create-color-classes(gamma, @color-gamma);
+.o-create-color-classes(delta, @color-delta);
+.o-create-color-classes(epsilon, @color-epsilon);
+
+// Create classes for UI colors
+.o-create-color-classes(primary, @brand-primary);
+.o-create-color-classes(success, @brand-success);
+.o-create-color-classes(info, @brand-info);
+.o-create-color-classes(warning, @brand-warning);
+.o-create-color-classes(danger, @brand-danger);
+
+// Create classes for greyscale colors
+.o-create-color-classes(~'black', @gray-base);
+.o-create-color-classes(~'gray-darker', @gray-darker);
+.o-create-color-classes(~'gray-dark', @gray-dark);
+.o-create-color-classes(~'gray', @gray);
+.o-create-color-classes(~'gray-light', @gray-light);
+.o-create-color-classes(~'gray-lighter', @gray-lighter);
+.o-create-color-classes(~'white', @gray-white);