[IMP] mass_mailing: review theme style location and convention

* Use the theme class selector as root for the less file
-> Allow to style the editor as applied to the body
-> Split in editor/color/layout/snippets

* Create an assets to contain all mm themes so that the compilation is
made by the odoo system, and allow minification and variable sharing
between themes
-> Remove css files

* Reformat the LESS files content

1 files changed, 296 insertions, 0 deletions

diff --git a/addons/mass_mailing/static/src/less/themes/theme_default.less b/addons/mass_mailing/static/src/less/themes/theme_default.less
new file mode 100644
index 00000000000..80a8e523d48
--- /dev/null
+++ b/addons/mass_mailing/static/src/less/themes/theme_default.less
@@ -0,0 +1,296 @@
+// lessc@1.4.2
+
+// ============================
+// Mass Mailing "Theme Default"
+// ============================
+
+// ===== Default Theme palette =====
+@o_mm_def_color_alpha: #f5f5f5;
+@o_mm_def_color_beta: #ffffff;
+@o_mm_def_color_gamma: #706482;
+@o_mm_def_color_delta: #464646;
+@o_mm_def_color_epsilon: darken(@o_mm_def_color_gamma, 5%);
+@o_mm_def_color_zeta: #706482;
+@o_mm_def_color_eta: #87a6b5;
+
+// ===== Default Theme variables =====
+@o_mm_def_body_width    : 600px;
+@o_mm_def_body_bobile   : 480px;
+@o_mm_def_b_radius      : 2px;
+
+@o_mm_def_font          : -apple-system, "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
+@o_mm_def_text_color    : @o_mm_def_color_delta;
+
+@o_mm_def_btn_bg        : @o_mm_def_color_gamma;
+@o_mm_def_btn_text      : @o_mm_def_color_beta;
+
+// ===== Editor =====
+#web_editor_inside_iframe {
+    #wrapwrap > main #editable_area {
+        background-color: transparent;
+    }
+}
+
+// ===== Colors =====
+.bg-beta {
+    background-color: @o_mm_def_color_zeta;
+    color:  @o_mm_def_color_beta;
+
+    h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
+        color: @o_mm_def_color_beta;
+    }
+}
+.text-beta {
+    color: @o_mm_def_color_zeta;
+}
+.bg-delta {
+    background-color: @o_mm_def_color_eta;
+}
+.bg-gray-lighter {
+    background-color: @o_mm_def_color_alpha;
+}
+
+
+// ===== Layout =====
+.o_layout {
+    font-family: @o_mm_def_font;
+    color: lighten(@o_mm_def_text_color, 20%);
+    overflow: hidden;
+    width: 100%;
+    min-height: 100%;
+    background-color: @o_mm_def_color_alpha;
+    padding: 24px;
+
+    > .o_mail_wrapper {
+        width: 100%;
+        max-width: @o_mm_def_body_width;
+        margin: auto;
+        border: 1px solid darken(@o_mm_def_color_alpha, 2%);
+        background-color: @o_mm_def_color_beta;
+    }
+}
+
+// ===== Snippets (general) =====
+.o_mail_snippet_general {
+    width: 100%;
+    max-width: @o_mm_def_body_width;
+    margin: 0 auto;
+
+    h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
+        color: @o_mm_def_text_color;
+    }
+
+    .btn.btn-primary {
+        -webkit-user-select: none;
+        color: @o_mm_def_btn_text;
+        border: none;
+        text-decoration: none;
+        font-weight: normal;
+        font-family: @o_mm_def_font;
+        cursor: pointer;
+        border-radius: @o_mm_def_b_radius;
+        background-color: @o_mm_def_btn_bg;
+    }
+
+    a, .btn.btn-link {
+        color: @o_mm_def_color_epsilon;
+        font-weight: bold;
+        text-decoration: none !important;
+
+        &:hover, &:focus, &:active {
+            text-decoration: none !important;
+        }
+    }
+
+    img {
+        width: 100%;
+        max-width: 100%;
+        height: auto;
+    }
+
+    .separator {
+        height: 2px;
+        background-color: @o_mm_def_color_alpha;
+    }
+}
+
+// ===== Snippets (specific) =====
+.o_mail_block_header_social, .o_mail_block_header_text_social, .o_mail_block_header_logo {
+    .o_mail_logo_container {
+        img {
+            width: auto;
+        }
+    }
+    .o_mail_header_social {
+        margin-right: 20px;
+    }
+}
+
+.o_mail_block_header_text_social {
+    h3 {
+        font-weight: bold;
+    }
+}
+
+.o_mail_block_steps {
+    background-color: @o_mm_def_color_alpha;
+}
+
+.o_mail_block_two_cols, .o_mail_block_three_cols {
+    font-size: small;
+
+    .o_mail_col_container {
+        padding: 10px 20px;
+
+        h4 {
+            margin-top: 15px;
+        }
+    }
+}
+
+.o_mail_block_image_text, .o_mail_block_text_image {
+    font-size: small;
+}
+
+.o_mail_block_event {
+    margin-left: 20px;
+    margin-right: 20px;
+    .o_mail_snippet_general{
+        background: darken(@o_mm_def_color_alpha, 2%);
+    }
+}
+
+.o_mail_block_footer_separator {
+    margin-left: 20px;
+    margin-right: 20px;
+}
+
+.o_mail_block_comparison_table {
+    .separator {
+        height: 1px;
+        background-color: darken(@o_mm_def_color_alpha, 15%);
+    }
+}
+
+.o_mail_block_discount2 {
+    .o_code {
+        padding: 5px 10px;
+        background: @o_mm_def_color_alpha;
+        border-radius: 3px;
+        font-family: monospace;
+    }
+}
+
+.o_mail_block_footer_social {
+    .o_mail_table_styles {
+        border-top: 2px solid @o_mm_def_color_alpha;
+        padding-top: 20px;
+    }
+
+    .o_mail_footer_links {
+        padding-top: 10px;
+        padding-bottom: 10px;
+
+        .btn-link{
+            padding: 0;
+            font-size: 12px;
+        }
+    }
+
+    .o_mail_footer_copy {
+        font-size: 9px;
+        font-weight: bold;
+        color: lighten(@o_mm_def_text_color, 30%);
+    }
+
+    &.o_mail_footer_social_center {
+        .o_mail_footer_social, .o_mail_footer_links, .o_mail_footer_copy {
+            text-align: center;
+        }
+    }
+
+    &.o_mail_footer_social_left {
+        .o_mail_footer_description {
+            padding-left: 20px;
+        }
+        .o_mail_footer_social {
+            padding-right: 20px;
+            text-align: right;
+            vertical-align: top;
+
+            .btn-link{
+                padding: 0;
+                font-size: 12px;
+            }
+        }
+    }
+}
+
+.o_mail_display_coupon {
+    font-size: 50px;
+    line-height: 1;
+}
+
+// ===== Misc =====
+.o_mail_h_padding {
+    padding-left: 20px;
+    padding-right: 20px;
+}
+.o_mail_v_padding {
+    padding-top: 20px;
+    padding-bottom: 20px;
+}
+.o_mail_no_margin {
+    margin: 0;
+
+    &.o_mail_display_coupon {
+        line-height: 1.1;
+    }
+}
+.o_mail_table_styles {
+    width: 100%;
+    border-collapse:separate;
+}
+
+// ===== Mobile =====
+@media screen and (max-width: @o_mm_def_body_bobile) {
+    .o_mail_col_mv {
+        display: block!important;
+        max-width: @o_mm_def_body_bobile!important;
+        width: 100%!important;
+    }
+
+    .o_mail_table_styles {
+        max-width: @o_mm_def_body_bobile!important;
+        width: 100%!important;
+    }
+}
+
+// ===== Margins on td (replaced by paddings) =====
+.o-paddings-all(@factor: 1) {
+    .o-paddings(128, @factor);
+    .o-paddings(96, @factor);
+    .o-paddings(92, @factor);
+    .o-paddings(64, @factor);
+    .o-paddings(48, @factor);
+    .o-paddings(32, @factor);
+    .o-paddings(24, @factor);
+    .o-paddings(16, @factor);
+    .o-paddings(8, @factor);
+    .o-paddings(4, @factor);
+    .o-paddings(0, @factor);
+}
+.o-paddings(@name, @factor: 1) {
+    .o-paddings-define(@name, @factor * @name);
+}
+.o-paddings-define(@name, @size: @name) {
+    td.mt@{name} {
+        margin-top: auto!important;
+        padding-top: ~"@{size}px"!important;
+    }
+    td.mb@{name} {
+        margin-bottom: auto!important;
+        padding-bottom: ~"@{size}px"!important;
+    }
+}
+.o-paddings-all();