[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, 339 insertions, 0 deletions

diff --git a/addons/web_editor/static/src/less/web_editor.ui.components.less b/addons/web_editor/static/src/less/web_editor.ui.components.less
new file mode 100644
index 00000000000..6cf994e2f03
--- /dev/null
+++ b/addons/web_editor/static/src/less/web_editor.ui.components.less
@@ -0,0 +1,339 @@
+
+// INPUTS
+.o_switch {
+    .o-flex-display();
+    .o-align-items(center);
+    font-weight: normal;
+    height: 1.5em;
+    cursor: pointer;
+
+    > input {
+        display: none;
+
+        + span {
+            background: #bababa;
+            border-radius: 0.4em;
+            height: 1em;
+            width: 2.5em;
+            margin-right: 0.5em;
+            display: inline-block;
+            .transition(all 0.3s @o-we-md-ease);
+            &:after {
+                content: "";
+                background: #fafafa;
+                display: block;
+                width: 1.5em;
+                height: 1.5em;
+                border-radius: 100em;
+                margin-top: -0.3em;
+                margin-left: -0.1em;
+                .transition(all 0.3s @o-we-md-ease);
+                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);
+            }
+        }
+
+        &:checked + span {
+            background-color: rgb(142, 224, 212);
+            background-color: transparentize(@odoo-brand-optional, 0.5);
+            &:after {
+                background-color: @odoo-brand-optional;
+                margin-left: 1.1em;
+            }
+        }
+    }
+    &:hover > input + span:after {
+        background-color: mix(@odoo-brand-optional, #fafafa);
+    }
+}
+.text-input-group {
+    position: relative;
+    margin-bottom: 45px;
+
+    input {
+        font-size: 18px;
+        padding: 10px 10px 10px 5px;
+        display: block;
+        width: 300px;
+        border: none;
+        border-bottom: 1px solid #757575;
+    }
+    input:focus { outline: none; }
+
+    /* LABEL ======================================= */
+    label {
+        color: #999;
+        font-size: 18px;
+        font-weight: normal;
+        .o-position-absolute(@top: 10px, @left: 5px);
+        pointer-events: none;
+        .transition(0.2s ease all)
+    }
+
+    /* active state */
+    input:focus ~ label, input:valid ~ label {
+        top: -20px;
+        font-size: 14px;
+        color: #5264AE;
+    }
+
+    /* BOTTOM BARS ================================= */
+    .bar    { position: relative; display: block; width: 300px; }
+    .bar:before, .bar:after {
+        content: '';
+        height: 2px;
+        width: 0;
+        bottom: 1px;
+        .o-position-absolute();
+        background: #5264AE;
+        .transition(0.2s ease all);
+    }
+    .bar:before {
+        left: 50%;
+    }
+    .bar:after {
+        right: 50%;
+    }
+
+    /* active state */
+    input:focus ~ .bar:before, input:focus ~ .bar:after {
+        width: 50%;
+    }
+
+    /* HIGHLIGHTER ================================== */
+    .highlight {
+        .o-position-absolute(@top: 25%, @left: 0);
+        height: 60%;
+        width: 100px;
+        pointer-events: none;
+        opacity: 0.5;
+    }
+
+    /* active state */
+    input:focus ~ .highlight {
+        .animation(inputHighlighter 0.3s ease);
+    }
+}
+
+// DRAG&DROP ANIMATIONS
+.oe_snippet_body {
+    opacity: 0;
+    .o-animation(fadeInDownSmall, 700ms, @fill-mode: forwards);
+}
+
+// MODALS
+body .modal {
+    // SELECT MEDIA
+    .o_select_media_dialog {
+        width: 80%;
+
+        .modal-body {
+            li.search {
+                float: right;
+
+                ul.pager {
+                    margin: 0;
+                    > li > a {
+                        border-radius: 3px;
+                        margin-left: 2px;
+                        padding: 6px 14px;
+                    }
+                }
+                .form-group {
+                    position: relative;
+                    margin: 0 10px 0 0;
+                    > input {
+                        padding-right: 30px;
+                    }
+                    > span {
+                        .o-position-absolute(7px, 7px);
+                        font-size: 1.3em;
+                    }
+                }
+            }
+            .dropdown-toggle {
+                line-height: 0;
+                height: 34px;
+            }
+            .o_existing_attachment_cell {
+                @odoo-border-image: 1px;
+                .o_existing_attachment_remove {
+                    .o-position-absolute(@odoo-border-image, 15px + @odoo-border-image);
+                    padding: 3px 3px 12px 12px;
+                    background-color: white;
+                    border-bottom: 1px solid black;
+                    border-left: 1px solid black;
+                    border-radius: 0 0 0 100%;
+                    opacity: 0.8;
+                }
+                .o_image {
+                    border: @odoo-border-image solid transparent;
+                    cursor: pointer;
+
+                    &.o_webimage {
+                        width: 100%;
+                        height: auto;
+                    }
+                }
+                &.o_selected .o_image {
+                    border-color: @odoo-brand-primary;
+                    box-shadow: 0px 0px 2px 2px @odoo-brand-secondary;
+                }
+            }
+            .font-icons-icons > span {
+                font-size: 30px;
+                margin: 5px;
+                padding: 3px;
+                cursor: pointer;
+
+                &.o_selected {
+                    box-shadow: 0px 0px 2px 2px @odoo-brand-secondary;
+                }
+            }
+        }
+    }
+
+    // BACKGROUND IMAGE OPTIONS
+    .o_bg_img_opt_modal .o_bg_img_opt {
+        margin: 15px 0;
+
+        .help-control {
+            .o-position-absolute(15px, 15px);
+        }
+        .help {
+            margin: 15px 0;
+
+            .simulator {
+                position: relative;
+                float: left;
+                margin-right: 15px;
+                width: 120px;
+                height: 100px;
+                .bg {
+                    .o-position-absolute(0, 0, 0, 0);
+                    border: 1px dotted #888787;
+                    background-image: url(/web/image);
+                    background-position: center center;
+                    .o-background-size(cover);
+                }
+                .el {
+                    .o-position-absolute(10px, 0, 10px, 0);
+                    border: 1px solid #222;
+                }
+                &.contain_bg {
+                    .bg {
+                        .o-position-absolute(0, 12px, 20px, 12px);
+                    }
+                    .el {
+                        .o-position-absolute(0, 0, 20px, 0);
+                    }
+                }
+            }
+            + * {
+                clear: left;
+            }
+        }
+
+        .o_bg_img_opt_cover_edition {
+            border-top: 1px solid black;
+            border-bottom: 1px solid white;
+            padding: 0px 25px 25px 25px;
+            .o-linear-gradient(-150deg, lighten(#2c2c36, 5%), darken(#2c2c36, 10%));
+            h6 {
+                color: white;
+                font-weight: bold;
+            }
+            .o_bg_img_opt_object {
+                width: 100%;
+                background: white;
+                min-height: 10px;
+                position: relative;
+                overflow: hidden;
+                box-shadow: 0 0 10px #000;
+                > img {
+                    cursor: crosshair;
+                    border-top: 1px solid #5A5A5A;
+                    border-bottom: 1px solid #111;
+                }
+                &:hover .o_focus_point:before {
+                    opacity: 0.5;
+                }
+            }
+            .o_bg_img_opt_ui_info {
+                .animation(fadeInOut 2s ease forwards);
+                .o-position-absolute(@bottom: 1px, @right: 0);
+                display: block;
+                padding: 3px 13px;
+                background-color: rgba(255, 255, 255, 0.8);
+                color: #333;
+                text-align: center;
+                font-weight: bold;
+                pointer-events: none;
+                span {
+                    font-weight: normal;
+                }
+                .o_x {
+                    margin-right: 10px
+                }
+            }
+            .grid {
+                .o-position-absolute(@top: 33.33%, @left: 0);
+                display: block;
+                width: 100%;
+                height: 1px;
+                background: fadeOut(lighten(@odoo-brand-optional, 30%), 50%);
+                pointer-events: none;
+                &.grid-2 {
+                    top: 66.66%
+                }
+                &.grid-3 {
+                    top: 0;
+                    left: 33.33%;
+                    width: 1px;
+                    height: 100%
+                }
+                &.grid-4 {
+                    top: 0;
+                    left: 66.66%;
+                    width: 1px;
+                    height: 100%
+                }
+            }
+            .o_focus_point {
+                .o-position-absolute(@top: 0, @left: 0);
+                width: 30px;
+                height: 30px;
+                border: 2px solid white;
+                border-radius: 100%;
+                margin-top: -15px;
+                margin-left: -15px;
+                box-shadow: 0 0 1px #333;
+                pointer-events: none;
+                &.o_with_transition {
+                    .o-transition(all, 0.2s);
+                }
+                &:before {
+                    pointer-events: none;
+                    content: "";
+                    display: block;
+                    width: 100px;
+                    height: 100px;
+                    margin-top: -37px;
+                    margin-left: -37px;
+                    border: 1px solid #EAEAEA;
+                    background: rgba(247, 76, 76, 0);
+                    border-radius: 100em;
+                    opacity: 1;
+                    box-shadow: 0 0 0 100em rgba(0, 0, 0, 0.33);
+                    .o-transition(opacity, 0.2s);
+                }
+            }
+        }
+    }
+
+    &.web_editor-dialog {
+        li > label {
+            width: 96%;
+            margin: 4px 2% 0;
+        }
+    }
+}