feat: add utility classes for margin left and right

computas · Nov 28, 2024 · 3fc0a9b · 3fc0a9b
1 parent 3459116
commit 3fc0a9b
Show file tree

Hide file tree

Showing 2 changed files with 83 additions and 17 deletions.
diff --git a/src/global-css/margins.css b/src/global-css/margins.css
@@ -1,3 +1,61 @@
+/* Margin top */
+.cx-mt-05 {
+  margin-top: var(--cx-spacing-05) !important;
+}
+
+.cx-mt-1 {
+  margin-top: var(--cx-spacing-1) !important;
+}
+
+.cx-mt-2 {
+  margin-top: var(--cx-spacing-2) !important;
+}
+
+.cx-mt-3 {
+  margin-top: var(--cx-spacing-3) !important;
+}
+
+.cx-mt-4 {
+  margin-top: var(--cx-spacing-4) !important;
+}
+
+.cx-mt-5 {
+  margin-top: var(--cx-spacing-5) !important;
+}
+
+.cx-mt-6 {
+  margin-top: var(--cx-spacing-6) !important;
+}
+
+/* Margin right */
+.cx-mr-05 {
+  margin-right: var(--cx-spacing-05) !important;
+}
+
+.cx-mr-1 {
+  margin-right: var(--cx-spacing-1) !important;
+}
+
+.cx-mr-2 {
+  margin-right: var(--cx-spacing-2) !important;
+}
+
+.cx-mr-3 {
+  margin-right: var(--cx-spacing-3) !important;
+}
+
+.cx-mr-4 {
+  margin-right: var(--cx-spacing-4) !important;
+}
+
+.cx-mr-5 {
+  margin-right: var(--cx-spacing-5) !important;
+}
+
+.cx-mr-6 {
+  margin-right: var(--cx-spacing-6) !important;
+}
+
 /* Margin bottom */
 .cx-mb-05 {
   margin-bottom: var(--cx-spacing-05) !important;
@@ -27,33 +85,33 @@
   margin-bottom: var(--cx-spacing-6) !important;
 }
 
-/* Margin top */
-.cx-mt-05 {
-  margin-top: var(--cx-spacing-05) !important;
+/* Margin left */
+.cx-ml-05 {
+  margin-left: var(--cx-spacing-05) !important;
 }
 
-.cx-mt-1 {
-  margin-top: var(--cx-spacing-1) !important;
+.cx-ml-1 {
+  margin-left: var(--cx-spacing-1) !important;
 }
 
-.cx-mt-2 {
-  margin-top: var(--cx-spacing-2) !important;
+.cx-ml-2 {
+  margin-left: var(--cx-spacing-2) !important;
 }
 
-.cx-mt-3 {
-  margin-top: var(--cx-spacing-3) !important;
+.cx-ml-3 {
+  margin-left: var(--cx-spacing-3) !important;
 }
 
-.cx-mt-4 {
-  margin-top: var(--cx-spacing-4) !important;
+.cx-ml-4 {
+  margin-left: var(--cx-spacing-4) !important;
 }
 
-.cx-mt-5 {
-  margin-top: var(--cx-spacing-5) !important;
+.cx-ml-5 {
+  margin-left: var(--cx-spacing-5) !important;
 }
 
-.cx-mt-6 {
-  margin-top: var(--cx-spacing-6) !important;
+.cx-ml-6 {
+  margin-left: var(--cx-spacing-6) !important;
 }
 
 /* Gap */

diff --git a/stories/UtilitiyClasses.mdx b/stories/UtilitiyClasses.mdx
@@ -52,13 +52,21 @@ is called `05`. All CSS classes and CSS variables that has to do with spacing us
   </thead>
 
   <tbody>
+    <tr>
+      <td>`.cx-mt-<05|1|2|3|4|5|6>`</td>
+      <td>Applies margin top, using the spacing units mentioned above.</td>
+    </tr>
+    <tr>
+      <td>`.cx-mr-<05|1|2|3|4|5|6>`</td>
+      <td>Applies margin right, using the spacing units mentioned above.</td>
+    </tr>
     <tr>
       <td>`.cx-mb-<05|1|2|3|4|5|6>`</td>
       <td>Applies margin bottom, using the spacing units mentioned above.</td>
     </tr>
     <tr>
-      <td>`.cx-mt-<05|1|2|3|4|5|6>`</td>
-      <td>Applies margin top, using the spacing units mentioned above.</td>
+      <td>`.cx-ml-<05|1|2|3|4|5|6>`</td>
+      <td>Applies margin left, using the spacing units mentioned above.</td>
     </tr>
     <tr>
       <td>`.cx-gap-<05|1|2|3|4|5|6>`</td>