increase precedence of direction spacing from horizontal and vertical…

… spacing
fluid-framework · Jul 5, 2021 · cec56ce · cec56ce
1 parent 0192bfe
commit cec56ce
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 55 deletions.
diff --git a/src/objects/_spacing+ive.scss b/src/objects/_spacing+ive.scss
@@ -1,21 +1,20 @@
-
 @if $generate-spacing-classes {
   /**
    * Table of Contents:
    *        Basic Margin
+   *        Margin horizontal
+   *        Margin vertical
    *        Margin top
    *        Margin right
    *        Margin bottom
    *        Margin left
-   *        Margin horizontal
-   *        Margin vertical
    *        Basic Padding
+   *        padding horizontal
+   *        padding vertical
    *        Padding top
    *        Padding right
    *        Padding bottom
    *        Padding left
-   *        padding horizontal
-   *        padding vertical
   * ===============================================
   */
 
@@ -28,51 +27,51 @@
     properties: margin,
     selector: "m",
     values: $space-sizes,
-    enable-important-values: true
+    enable-important-values: true,
   );
 
   @include generate-style($config);
 
   //
-  // Directional Margin
+  // Margin horizontal
   //
 
   $config: (
     responsive: true,
-    properties: margin,
-    selector: "m",
+    properties: margin-left margin-right,
+    selector: "mx",
     values: $space-sizes,
-    infixes: $directions,
-    disable-prefix-infixes-keys: true,
-    enable-important-values: true
+    enable-important-values: true,
   );
 
   @include generate-style($config);
 
   //
-  //  Margin horizontal
+  // Margin vertical
   //
 
   $config: (
     responsive: true,
-    properties: margin-left margin-right,
-    selector: "mx",
+    properties: margin-top margin-bottom,
+    selector: "my",
     values: $space-sizes,
-    enable-important-values: true
+    enable-important-values: true,
   );
 
   @include generate-style($config);
 
   //
-  //  Margin vertical
+  // Directional Margin
   //
 
   $config: (
     responsive: true,
-    properties: margin-top margin-bottom,
-    selector: "my",
+    properties: margin,
+    selector: "m",
     values: $space-sizes,
-    enable-important-values: true
+    infixes: $directions,
+    disable-prefix-infixes-keys: true,
+    enable-important-values: true,
   );
 
   @include generate-style($config);
@@ -86,51 +85,51 @@
     properties: padding,
     selector: "p",
     values: $space-sizes,
-    enable-important-values: true
+    enable-important-values: true,
   );
 
   @include generate-style($config);
 
   //
-  // Directional padding
+  // padding horizontal
   //
 
   $config: (
     responsive: true,
-    properties: padding,
-    selector: "p",
+    properties: padding-left padding-right,
+    selector: "px",
     values: $space-sizes,
-    infixes: $directions,
-    disable-prefix-infixes-keys: true,
-    enable-important-values: true
+    enable-important-values: true,
   );
 
   @include generate-style($config);
 
   //
-  //  padding horizontal
+  // padding vertical
   //
 
   $config: (
     responsive: true,
-    properties: padding-left padding-right,
-    selector: "px",
+    properties: padding-top padding-bottom,
+    selector: "py",
     values: $space-sizes,
-    enable-important-values: true
+    enable-important-values: true,
   );
 
   @include generate-style($config);
 
   //
-  //  padding vertical
+  // Directional padding
   //
 
   $config: (
     responsive: true,
-    properties: padding-top padding-bottom,
-    selector: "py",
+    properties: padding,
+    selector: "p",
     values: $space-sizes,
-    enable-important-values: true
+    infixes: $directions,
+    disable-prefix-infixes-keys: true,
+    enable-important-values: true,
   );
 
   @include generate-style($config);

diff --git a/src/objects/_spacing-ive.scss b/src/objects/_spacing-ive.scss
@@ -1,14 +1,13 @@
-
 @if $generate-spacing-classes {
   /**
    * Table of Contents:
    *        Basic Margin
+   *        Margin horizontal
+   *        Margin vertical
    *        Margin top
    *        Margin right
    *        Margin bottom
    *        Margin left
-   *        Margin horizontal
-   *        Margin vertical
   * ===============================================
   */
 
@@ -26,53 +25,51 @@
     properties: margin,
     selector: "m",
     values: $SIZES,
-    enable-important-values: true
+    enable-important-values: true,
   );
 
   @include generate-style($config);
 
   //
-  // Directional Margin
+  // Margin horizontal
   //
 
   $config: (
     responsive: true,
-    properties: margin,
-    selector: "m",
+    properties: margin-left margin-right,
+    selector: "mx",
     values: $SIZES,
-    infixes: $directions,
-    disable-prefix-infixes-keys: true,
-    enable-important-values: true
+    enable-important-values: true,
   );
 
   @include generate-style($config);
 
   //
-  //  Margin horizontal
+  // Margin vertical
   //
 
-  // Idea : remove because it isn't used often ?
   $config: (
     responsive: true,
-    properties: margin-left margin-right,
-    selector: "mx",
+    properties: margin-top margin-bottom,
+    selector: "my",
     values: $SIZES,
-    enable-important-values: true
+    enable-important-values: true,
   );
 
   @include generate-style($config);
 
   //
-  //  Margin vertical
+  // Directional Margin
   //
 
-  // Idea : remove because it isn't used often ?
   $config: (
     responsive: true,
-    properties: margin-top margin-bottom,
-    selector: "my",
+    properties: margin,
+    selector: "m",
     values: $SIZES,
-    enable-important-values: true
+    infixes: $directions,
+    disable-prefix-infixes-keys: true,
+    enable-important-values: true,
   );
 
   @include generate-style($config);