feat(margin): add responsive utilities - INNO-911 (#556)

* feat(margin): add responsive utilities

* feat(margin): update utilities

framework/utilities/ecl-u-margin/README.md

@@ -11,4 +11,6 @@ Use the following classes to quickly set a margin:
 * **ecl-u-ma-xxs**: Extra extra small margin
 
 You can also set a specific margin (top, right bottom, left, horizontal,
-vertical). See examples for more information.
+vertical), and/or a specific breakpoint.
+
+See examples for more information.

framework/utilities/ecl-u-margin/ecl-u-margin.scss

@@ -14,63 +14,70 @@
     l = left
 */
 
-@each $key, $value in $ecl-spacing {
-  .ecl-u-ma-#{$key} {
-    margin: $value;
-  }
+/* stylelint-disable max-nesting-depth */
+@each $breakpoint in map-keys($ecl-grid-breakpoints) {
+  @include ecl-media-breakpoint-up($breakpoint) {
+    $infix: ecl-breakpoint-infix($breakpoint, $ecl-grid-breakpoints);
 
-  .ecl-u-mh-#{$key} {
-    margin-left: $value;
-    margin-right: $value;
-  }
+    @each $key, $value in $ecl-spacing {
+      .ecl-u-ma#{$infix}-#{$key} {
+        margin: $value;
+      }
 
-  .ecl-u-mv-#{$key} {
-    margin-bottom: $value;
-    margin-top: $value;
-  }
+      .ecl-u-mh#{$infix}-#{$key} {
+        margin-left: $value;
+        margin-right: $value;
+      }
 
-  .ecl-u-mt-#{$key} {
-    margin-top: $value;
-  }
+      .ecl-u-mv#{$infix}-#{$key} {
+        margin-bottom: $value;
+        margin-top: $value;
+      }
 
-  .ecl-u-mr-#{$key} {
-    margin-right: $value;
-  }
+      .ecl-u-mt#{$infix}-#{$key} {
+        margin-top: $value;
+      }
 
-  .ecl-u-mb-#{$key} {
-    margin-bottom: $value;
-  }
+      .ecl-u-mr#{$infix}-#{$key} {
+        margin-right: $value;
+      }
 
-  .ecl-u-ml-#{$key} {
-    margin-left: $value;
-  }
-}
+      .ecl-u-mb#{$infix}-#{$key} {
+        margin-bottom: $value;
+      }
 
-/*
-  ECL Margin auto
-  ===============
-  Base:
-    m = margin
-  Modifiers:
-    a = all
-    h = horizontal
-    r = right
-    l = left
-*/
+      .ecl-u-ml#{$infix}-#{$key} {
+        margin-left: $value;
+      }
+    }
 
-.ecl-u-ma-auto {
-  margin: auto;
-}
+    /*
+      ECL Margin auto
+      ===============
+      Base:
+        m = margin
+      Modifiers:
+        a = all
+        h = horizontal
+        r = right
+        l = left
+    */
 
-.ecl-u-mh-auto {
-  margin-left: auto;
-  margin-right: auto;
-}
+    .ecl-u-ma#{$infix}-auto {
+      margin: auto;
+    }
 
-.ecl-u-mr-auto {
-  margin-right: auto;
-}
+    .ecl-u-mh#{$infix}-auto {
+      margin-left: auto;
+      margin-right: auto;
+    }
 
-.ecl-u-ml-auto {
-  margin-left: auto;
+    .ecl-u-mr#{$infix}-auto {
+      margin-right: auto;
+    }
+
+    .ecl-u-ml#{$infix}-auto {
+      margin-left: auto;
+    }
+  }
 }

framework/utilities/ecl-u-margin/ecl-u-margin.twig

@@ -100,3 +100,11 @@
 <div class="exampleContainerAuto"><div class="exampleAuto ecl-u-mh-auto">ecl-u-mh-auto</div></div>
 <div class="exampleContainerAuto"><div class="exampleAuto ecl-u-mr-auto">ecl-u-mr-auto</div></div>
 <div class="exampleContainerAuto"><div class="exampleAuto ecl-u-ml-auto">ecl-u-ml-auto</div></div>
+
+<h3 class="ecl-heading ecl-heading--h3">Responsive margin</h3>
+<p class="ecl-paragraph">Add the breakpoint before margin size to display it only with corresponding screen size (works for all kind of margin ahead).</p>
+<div class="exampleContainer"><div class="example ecl-u-ma-l">ecl-u-ma-l</div></div>
+<div class="exampleContainer"><div class="example ecl-u-ma-sm-l">ecl-u-ma-sm-l</div></div>
+<div class="exampleContainer"><div class="example ecl-u-ma-md-l">ecl-u-ma-md-l</div></div>
+<div class="exampleContainer"><div class="example ecl-u-ma-lg-l">ecl-u-ma-lg-l</div></div>
+<div class="exampleContainer"><div class="example ecl-u-ma-xl-l">ecl-u-ma-xl-l</div></div>