[refs #21] Consistent order for size variants.

As per #21 (comment), we want to define our size variants in the various objects consistently.
inuitcss · Mar 22, 2017 · 803f452 · 803f452
1 parent 0b3f05d
commit 803f452
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 46 deletions.
diff --git a/objects/_objects.box.scss b/objects/_objects.box.scss
@@ -24,7 +24,7 @@
 
 
 
-/* Size variants
+/* Size variants.
    ========================================================================== */
 
 .o-box--flush {

diff --git a/objects/_objects.flag.scss b/objects/_objects.flag.scss
@@ -81,6 +81,16 @@
 /* Size variants.
    ========================================================================== */
 
+.o-flag--flush {
+
+  > .o-flag__img {
+    padding-right: 0;
+    padding-left:  0;
+  }
+
+}
+
+
 .o-flag--tiny {
 
   > .o-flag__img {
@@ -98,6 +108,7 @@
 
 }
 
+
 .o-flag--small {
 
   > .o-flag__img {
@@ -115,6 +126,7 @@
 
 }
 
+
 .o-flag--large {
 
   > .o-flag__img {
@@ -132,6 +144,7 @@
 
 }
 
+
 .o-flag--huge {
 
   > .o-flag__img {
@@ -149,16 +162,6 @@
 
 }
 
-.o-flag--flush {
-
-  > .o-flag__img {
-    padding-right: 0;
-    padding-left:  0;
-  }
-
-}
-
-
 
 
 
@@ -206,6 +209,7 @@
 
 }
 
+
 .o-flag--bottom {
 
   > .o-flag__img,

diff --git a/objects/_objects.layout.scss b/objects/_objects.layout.scss
@@ -116,6 +116,16 @@ $inuit-use-markup-fix: false !default;
 /* Gutter size modifiers.
    ========================================================================== */
 
+.o-layout--flush {
+  margin-left: 0;
+
+  > .o-layout__item {
+    padding-left: 0;
+  }
+
+}
+
+
 .o-layout--tiny {
   margin-left: -$inuit-global-spacing-unit-tiny;
 
@@ -156,17 +166,6 @@ $inuit-use-markup-fix: false !default;
 }
 
 
-.o-layout--flush {
-  margin-left: 0;
-
-  > .o-layout__item {
-    padding-left: 0;
-  }
-
-}
-
-
-
 
 
 /* Vertical alignment modifiers.

diff --git a/objects/_objects.media.scss b/objects/_objects.media.scss
@@ -39,14 +39,28 @@
 
 
 
-/* Size variants
+/* Size variants.
    ========================================================================== */
 
 /**
  * Modify the amount of space between our image and our text. We also have
  * reversible options for all available sizes.
  */
 
+
+/* Gutterless media objects.
+  ========================================================================== */
+
+.o-media--flush {
+
+  > .o-media__img {
+    margin-right: 0;
+    margin-left: 0;
+ }
+
+}
+
+
 .o-media--tiny {
 
   > .o-media__img {
@@ -57,7 +71,7 @@
 
     > .o-media__img {
       margin-right: 0;
-      margin-left:  $inuit-global-spacing-unit-tiny;
+      margin-left: $inuit-global-spacing-unit-tiny;
     }
 
   }
@@ -75,7 +89,7 @@
 
     > .o-media__img {
       margin-right: 0;
-      margin-left:  $inuit-global-spacing-unit-small;
+      margin-left: $inuit-global-spacing-unit-small;
     }
 
   }
@@ -93,7 +107,7 @@
 
     > .o-media__img {
       margin-right: 0;
-      margin-left:  $inuit-global-spacing-unit-large;
+      margin-left: $inuit-global-spacing-unit-large;
     }
 
   }
@@ -111,7 +125,7 @@
 
     > .o-media__img {
       margin-right: 0;
-      margin-left:  $inuit-global-spacing-unit-huge;
+      margin-left: $inuit-global-spacing-unit-huge;
     }
 
   }
@@ -120,9 +134,7 @@
 
 
 
-
-
-/* Reversed media objects
+/* Reversed media objects.
    ========================================================================== */
 
 .o-media--reverse {
@@ -134,19 +146,3 @@
   }
 
 }
-
-
-
-
-
-/* Gutterless media objects
-   ========================================================================== */
-
-.o-media--flush {
-
-  > .o-media__img {
-    margin-right: 0;
-    margin-left:  0;
-  }
-
-}