[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.

4 files changed, 66 insertions, 155 deletions

diff --git a/addons/web_editor/static/src/css/web_editor.css b/addons/web_editor/static/src/css/web_editor.css
index 09a55ac9846..f83b5628b4e 100644
--- a/addons/web_editor/static/src/css/web_editor.css
+++ b/addons/web_editor/static/src/css/web_editor.css
@@ -25,103 +25,6 @@
   min-width: 20px;
 }
 
-/* Vertical Spacing */
-.mt128 {
-  margin-top: 128px !important;
-}
-
-.mt92 {
-  margin-top: 92px !important;
-}
-
-.mt64 {
-  margin-top: 64px !important;
-}
-
-.mt48 {
-  margin-top: 48px !important;
-}
-
-.mt32 {
-  margin-top: 32px !important;
-}
-
-.mt16 {
-  margin-top: 16px !important;
-}
-
-.mt8 {
-  margin-top: 8px !important;
-}
-
-.mt4 {
-  margin-top: 4px !important;
-}
-
-.mt0 {
-  margin-top: 0px !important;
-}
-
-.mb128 {
-  margin-bottom: 128px !important;
-}
-
-.mb92 {
-  margin-bottom: 92px !important;
-}
-
-.mb64 {
-  margin-bottom: 64px !important;
-}
-
-.mb48 {
-  margin-bottom: 48px !important;
-}
-
-.mb32 {
-  margin-bottom: 32px !important;
-}
-
-.mb16 {
-  margin-bottom: 16px !important;
-}
-
-.mb8 {
-  margin-bottom: 8px !important;
-}
-
-.mb4 {
-  margin-bottom: 4px !important;
-}
-
-.mb0 {
-  margin-bottom: 0px !important;
-}
-
-.ml8 {
-  margin-left: 8px !important;
-}
-
-.ml4 {
-  margin-left: 4px !important;
-}
-
-.ml0 {
-  margin-left: 0px !important;
-}
-
-.mr8 {
-  margin-right: 8px !important;
-}
-
-.mr4 {
-  margin-right: 4px !important;
-}
-
-.mr0 {
-  margin-right: 0px !important;
-}
-
 /* Media */
 img.shadow {
   -moz-box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.2);
diff --git a/addons/web_editor/static/src/css/web_editor.sass b/addons/web_editor/static/src/css/web_editor.sass
index c9ea7876c16..2b5b4a8ee2f 100644
--- a/addons/web_editor/static/src/css/web_editor.sass
+++ b/addons/web_editor/static/src/css/web_editor.sass
@@ -27,61 +27,6 @@
         td
             min-width: 20px
 
-
-/* Vertical Spacing */
-
-.mt128
-    margin-top: 128px !important
-.mt92
-    margin-top: 92px !important
-.mt64
-    margin-top: 64px !important
-.mt48
-    margin-top: 48px !important
-.mt32
-    margin-top: 32px !important
-.mt16
-    margin-top: 16px !important
-.mt8
-    margin-top: 8px !important
-.mt4
-    margin-top: 4px !important
-.mt0
-    margin-top: 0px !important
-
-.mb128
-    margin-bottom: 128px !important
-.mb92
-    margin-bottom: 92px !important
-.mb64
-    margin-bottom: 64px !important
-.mb48
-    margin-bottom: 48px !important
-.mb32
-    margin-bottom: 32px !important
-.mb16
-    margin-bottom: 16px !important
-.mb8
-    margin-bottom: 8px !important
-.mb4
-    margin-bottom: 4px !important
-.mb0
-    margin-bottom: 0px !important
-
-.ml8
-    margin-left: 8px !important
-.ml4
-    margin-left: 4px !important
-.ml0
-    margin-left: 0px !important
-
-.mr8
-    margin-right: 8px !important
-.mr4
-    margin-right: 4px !important
-.mr0
-    margin-right: 0px !important
-
 /* Media */
 
 img.shadow
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
diff --git a/addons/web_editor/static/src/xml/snippets.xml b/addons/web_editor/static/src/xml/snippets.xml
index ee996548379..ccced98af2c 100644
--- a/addons/web_editor/static/src/xml/snippets.xml
+++ b/addons/web_editor/static/src/xml/snippets.xml
@@ -33,9 +33,9 @@
                         <a href="#" data-toggle="dropdown" class="btn btn-primary btn-sm" title="Customize">Customize <span class="caret"/></a>
                         <ul class="dropdown-menu" role="menu"></ul>
                     </div>
-                    <a href="#" class="btn btn-default btn-sm oe_snippet_move" title="Drag to Move">&amp;nbsp;<i class="fa fa-arrows"></i>&amp;nbsp;</a>
-                    <a href="#" class="btn btn-default btn-sm oe_snippet_clone" title="Duplicate Container">&amp;nbsp;<i class="fa fa-files-o"></i>&amp;nbsp; </a>
-                    <a href="#" class="btn btn-default btn-sm oe_snippet_remove" title="Remove Block">&amp;nbsp;<i class="fa fa-trash-o"></i>&amp;nbsp; </a>
+                    <a href="#" class="btn btn-default btn-sm oe_snippet_move" title="Drag to Move"><i class="fa fa-arrows ml4 mr4"></i></a>
+                    <a href="#" class="btn btn-default btn-sm oe_snippet_clone" title="Duplicate Container"><i class="fa fa-files-o ml4 mr4"></i></a>
+                    <a href="#" class="btn btn-default btn-sm oe_snippet_remove" title="Remove Block"><i class="fa fa-trash-o ml4 mr4"></i></a>
                 </div>
             </div>
             <div class='oe_handles'>