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