Add negative margins

docs/margins.md

@@ -89,6 +89,97 @@ Add one of the following classes to add extra large spacing to block elements.
 | .oc-mx-xxl | Adds extra larger left and right margins. |
 | .oc-my-xxl | Adds extra larger top and bottom margins. |
 
+## Negative margin
+Add one of the following classes to add negative margin to block elements.
+
+| Class | Description |
+| ----- | ----------- |
+| .-oc-m | Adds negative margin to all sides of the element. |
+| .-oc-mt | Adds negative top margin. |
+| .-oc-mb | Adds negative bottom margin. |
+| .-oc-ml | Adds negative left margin. |
+| .-oc-mr | Adds negative right margin. |
+| .-oc-mx | Adds negative left and right margins. |
+| .-oc-my | Adds negative top and bottom margins. |
+
+## Negative X-Small margin
+Add one of the following classes to add very small spacing to block elements.
+
+| Class |	Description |
+| ----- | ----------- |
+| .-oc-m-xs | Adds negative x-small margin to all sides of the element. |
+| .-oc-mt-xs | Adds negative x-small top margin. |
+| .-oc-mb-xs | Adds negative x-small bottom margin. |
+| .-oc-ml-xs | Adds negative x-small left margin. |
+| .-oc-mr-xs | Adds negative x-small right margin. |
+| .-oc-mx-xs | Adds negative x-small left and right margins. |
+| .-oc-my-xs | Adds negative x-small top and bottom margins. |
+
+## Negative Small margin
+Add one of the following classes to add small spacing to block elements.
+
+| Class |	Description |
+| ----- | ----------- |
+| .-oc-m-s | Adds negative small to all sides of the element. |
+| .-oc-mt-s | Adds negative small top margin. |
+| .-oc-mb-s | Adds negative small bottom margin. |
+| .-oc-ml-s | Adds negative small left margin. |
+| .-oc-mr-s | Adds negative small right margin. |
+| .-oc-mx-s | Adds negative small left and right margins. |
+| .-oc-my-s | Adds negative small top and bottom margins. |
+
+## Negative Medium margin
+Add one of the following classes to add medium spacing to block elements.
+
+| Class |	Description |
+| ----- | ----------- |
+| .-oc-m-m | Adds negative medium margin to all sides of the element. |
+| .-oc-mt-m | Adds negative medium top margin.
+| .-oc-mb-m | Adds negative medium bottom margin. |
+| .-oc-ml-m | Adds negative medium left margin. |
+| .-oc-mr-m | Adds negative medium right margin. |
+| .-oc-mx-m | Adds negative medium left and right margins. |
+| .-oc-my-m | Adds negative medium top and bottom margins. |
+
+## Negative Large margin
+Add one of the following classes to add large spacing to block elements.
+
+| Class |	Description |
+| ----- | ----------- |
+| .-oc-m-l | Adds negative large margin to all sides of the element. |
+| .-oc-mt-l | Adds negative large top margin. |
+| .-oc-mb-l | Adds negative large bottom margin. |
+| .-oc-ml-l | Adds negative large left margin. |
+| .-oc-mr-l | Adds negative large right margin. |
+| .-oc-mx-l | Adds negative large left and right margins. |
+| .-oc-my-l | Adds negative large top and bottom margins. |
+
+## Negative X-Large margin
+Add one of the following classes to add very large spacing to block elements.
+
+| Class |	Description |
+| ----- | ----------- |
+| .-oc-m-xl | Adds negative larger margin to all sides of the element. |
+| .-oc-mt-xl | Adds negative larger top margin. |
+| .-oc-mb-xl | Adds negative larger bottom margin. |
+| .-oc-ml-xl | Adds negative larger left margin. |
+| .-oc-mr-xl | Adds negative larger right margin. |
+| .-oc-mx-xl | Adds negative larger left and right margins. |
+| .-oc-my-xl | Adds negative larger top and bottom margins. |
+
+## Negative XX-Large margin
+Add one of the following classes to add extra large spacing to block elements.
+
+| Class |	Description |
+| ----- | ----------- |
+| .-oc-m-xxl | Adds negative extra larger margin to all sides of the element. |
+| .-oc-mt-xxl | Adds negative extra larger top margin. |
+| .-oc-mb-xxl | Adds negative extra larger bottom margin. |
+| .-oc-ml-xxl | Adds negative extra larger left margin. |
+| .-oc-mr-xxl | Adds negative extra larger right margin. |
+| .-oc-mx-xxl | Adds negative extra larger left and right margins. |
+| .-oc-my-xxl | Adds negative extra larger top and bottom margins. |
+
 ## Remove margin
 Add one of the following classes to remove margin from block elements.
 
@@ -100,4 +191,4 @@ Add one of the following classes to remove margin from block elements.
 | .oc-ml-rm | Removes left margin. |
 | .oc-mr-rm | Removes right margin. |
 | .oc-mx-rm | Removes left and right margins. |
-| .oc-my-rm | Removes top and bottom margins. |
+| .oc-my-rm | Removes top and bottom margins. |

src/styles/styles.scss

@@ -14,6 +14,7 @@
 @import "theme/oc-form";
 @import "theme/oc-height";
 @import "theme/oc-position";
+@import "theme/oc-spacing-negative";
 @import "theme/oc-spacing";
 @import "theme/oc-text";
 @import "theme/oc-visibility";

src/styles/theme/oc-spacing-negative.scss

@@ -0,0 +1,27 @@
+$directives: ("m": "margin");
+
+@each $directiveKey, $directiveValue in $directives {
+  .-oc-#{$directiveKey} {
+    #{$directiveValue}: calc(-1 * $oc-space-medium) !important;
+
+    @each $directionKey, $directionValues in $directions {
+      &#{$directionKey} {
+        @each $direction in $directionValues {
+          #{$directiveValue}-#{$direction}: calc(-1 * $oc-space-medium) !important;
+
+          @each $sizeKey, $sizeValue in $sizes {
+            &-#{$sizeKey} {
+              #{$directiveValue}-#{$direction}: calc(-1 * $sizeValue) !important;
+            }
+          }
+        }
+      }
+    }
+
+    @each $sizeKey, $sizeValue in $sizes {
+      &-#{$sizeKey} {
+        #{$directiveValue}: calc(-1 * $sizeValue) !important;
+      }
+    }
+  }
+}