[IMP] web_editor,website: added scalable margins in less

The original commit by fka used to define less variables like this:
@px-4: 4px
@px-8: 8px

The goal was to be able to change the margin values in
media queries for smaller screens.
However, as the less is only compiled once in css, those
variables didn't really help as you couldn't redefine them
from inside a media query and have the less magically
reassign the margins on the fly.

I created less helper functions to be able to easily redefine
the margins for smaller screens from inside media queries.

The task also required to replace the nbsp in the html by the
newly created mr and ml classes.

This is also the first phase of the sass -> less transition.

1 files changed, 63 insertions, 0 deletions

diff --git a/addons/web_editor/static/src/less/web_editor.less b/addons/web_editor/static/src/less/web_editor.less
new file mode 100644
index 00000000000..8cc69271afa
--- /dev/null
+++ b/addons/web_editor/static/src/less/web_editor.less
@@ -0,0 +1,63 @@
+// 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);
+}
+
+// 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);
+}
+
+// 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";}
+    .mb@{name} {margin-bottom: ~"@{size}px";}
+    .ml@{name} {margin-left: ~"@{size}px";}
+    .mr@{name} {margin-right: ~"@{size}px";}
+}
+
+// Generate all margins
+.o-margins-all();
+
+// It is possible to change the margins ratio for
+// small screen sizes using media queries, e.g.:
+// @media (max-width: 768px) {
+//     .o-margins-all(0.75);
+// }
+
+// It is also possible to only redefine single margins
+// for small screen sizes using media queries, e.g.:
+// @media (max-width: 768px) {
+//     .o-margins(64, 0.50);
+//     .o-margins(48, 0.50);
+// }
+
+// It is also possible to directly redefine the size
+// of single margins instead of refering to a factor
+// for small screen sizes using media queries, 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;
+    }
+}
\ No newline at end of file