Addresses Media Object mixin issue in Flex mode. foundation#9038.

Martskin · Sep 25, 2017 · 310e3dc · 310e3dc
1 parent 6ecf7d4
commit 310e3dc
Showing 1 changed file with 33 additions and 33 deletions.
diff --git a/scss/components/_media-object.scss b/scss/components/_media-object.scss
@@ -26,6 +26,18 @@ $mediaobject-image-width-stacked: 100% !default;
   @if $global-flexbox {
     flex-wrap: nowrap;
   }
+
+  img {
+    max-width: none;
+  }
+
+  @if $global-flexbox {
+    &.stack-for-#{$-zf-zero-breakpoint} {
+      @include breakpoint($-zf-zero-breakpoint only) {
+        flex-wrap: wrap;
+      }
+    }
+  }
 }
 
 /// Adds styles for sections within a media object.
@@ -50,6 +62,27 @@ $mediaobject-image-width-stacked: 100% !default;
   > :last-child {
     margin-bottom: 0;
   }
+
+  .stack-for-#{$-zf-zero-breakpoint} & {
+    @include breakpoint($-zf-zero-breakpoint only) {
+      @include media-object-stack;
+    }
+  }
+
+  @if $global-flexbox {
+    &.main-section {
+      flex: 1 1 0px; // sass-lint:disable-line zero-unit
+    }
+  }
+  @else {
+    &.middle {
+      vertical-align: middle;
+    }
+
+    &.bottom {
+      vertical-align: bottom;
+    }
+  }
 }
 
 /// Adds styles to stack sections of a media object. Apply this to the section elements, not the container.
@@ -73,42 +106,9 @@ $mediaobject-image-width-stacked: 100% !default;
 @mixin foundation-media-object {
   .media-object {
     @include media-object-container;
-
-    img {
-      max-width: none;
-    }
-
-    @if $global-flexbox {
-      &.stack-for-#{$-zf-zero-breakpoint} {
-        @include breakpoint($-zf-zero-breakpoint only) {
-          flex-wrap: wrap;
-        }
-      }
-    }
-
-    &.stack-for-#{$-zf-zero-breakpoint} .media-object-section {
-      @include breakpoint($-zf-zero-breakpoint only) {
-        @include media-object-stack;
-      }
-    }
   }
 
   .media-object-section {
     @include media-object-section;
-
-    @if $global-flexbox {
-      &.main-section {
-        flex: 1 1 0px; // sass-lint:disable-line zero-unit
-      }
-    }
-    @else {
-      &.middle {
-        vertical-align: middle;
-      }
-
-      &.bottom {
-        vertical-align: bottom;
-      }
-    }
   }
 }