Add flexbox mode to media object

diff --git a/docs/pages/media-object.md b/docs/pages/media-object.md
index 1dfd39399ce0be954b657ebee55ace9032d057f0..39e8fb02612a17e7dc7a9a3651bc8d804e14628c 100644 (file)
--- a/docs/pages/media-object.md
+++ b/docs/pages/media-object.md
@@ -22,6 +22,22 @@ A media object is a container with the class `.media-object`, and two or three s
 </div>
 ```
 
+In flexbox mode, the class `.main-section` must be added to your center section in order to properly size it.
+
+```html
+<div class="media-object">
+  <div class="media-object-section">
+    <div class="thumbnail">
+      <img src= "assets/img/avatar-1.jpg">
+    </div>
+  </div>
+  <div class="media-object-section main-section">
+    <h4>Dreams feel real while we're in them.</h4>
+    <p>I'm going to improvise. Listen, there's something you should know about me... about inception. An idea is like a virus, resilient, highly contagious. The smallest seed of an idea can grow. It can grow to define or destroy you.</p>
+  </div>
+</div>
+```
+
 ---
 
 ## Section Alignment
@@ -48,6 +64,28 @@ Each section aligns to the top by default, but individual sections can also be m
 </div>
 ```
 
+In flexbox mode, you can use the <a href="flex-classes.html">flexbox helper classes</a> instead to get the same result. The `.align-*` classes can be used on the container to align every child section at once, or individual child sections can be aligned with `.align-self-*` classes.
+
+```html
+<div class="media-object">
+  <div class="media-object-section align-self-center">
+    <div class="thumbnail">
+      <img src= "assets/img/avatar-2.jpg">
+    </div>
+  </div>
+  <div class="media-object-section main-section">
+    <h4>Why is it so important to dream?</h4>
+    <p>So, once we've made the plant, how do we go out? Hope you have something more elegant in mind than shooting me in the head? A kick. What's a kick? This, Ariadne, would be a kick.</p>
+    <p>What is the most resilient parasite? Bacteria? A virus? An intestinal worm? An idea. Resilient... highly contagious. Once an idea has taken hold of the brain it's almost impossible to eradicate. An idea that is fully formed - fully understood - that sticks; right in there somewhere.</p>
+  </div>
+  <div class="media-object-section align-self-bottom">
+    <div class="thumbnail">
+      <img src= "assets/img/avatar-3.jpg">
+    </div>
+  </div>
+</div>
+```
+
 ---
 
 ### Stack on Small

diff --git a/scss/components/_media-object.scss b/scss/components/_media-object.scss
index 30e691cd28c2f48ac3c12057d2d96ad9d7fa1331..814863ae1d4702ef507021ee52a1bc75c1c14ce4 100644 (file)
--- a/scss/components/_media-object.scss
+++ b/scss/components/_media-object.scss
@@ -21,30 +21,46 @@ $mediaobject-image-width-stacked: 100% !default;
 /// Adds styles for a media object container.
 @mixin media-object-container {
   margin-bottom: $mediaobject-margin-bottom;
-  display: block;
+  display: if($global-flexbox, flex, block);
+
+  @if $global-flexbox {
+    flex-wrap: nowrap;
+  }
 }
 
 /// Adds styles for sections within a media object.
 /// @param {Number} $padding [$mediaobject-section-padding] - Padding between sections.
 @mixin media-object-section($padding: $mediaobject-section-padding) {
-  display: table-cell;
-  vertical-align: top;
+  @if $global-flexbox {
+    flex: 0 0 auto;
+  }
+  @else {
+    display: table-cell;
+    vertical-align: top;
+  }
 
   &:first-child {
     padding-#{$global-right}: $padding;
   }
 
-  &:last-child:not(+ #{&}:first-child) {
+  &:last-child:not(:nth-child(2)) {
     padding-#{$global-left}: $padding;
   }
 }
 
 /// Adds styles to stack sections of a media object. Apply this to the section elements, not the container.
 @mixin media-object-stack {
-  display: block;
   padding: 0;
   padding-bottom: $mediaobject-section-padding;
 
+  @if $global-flexbox {
+    flex-basis: 100%;
+    max-width: 100%;
+  }
+  @else {
+    display: block;
+  }
+
   img {
     width: $mediaobject-image-width-stacked;
   }
@@ -58,6 +74,12 @@ $mediaobject-image-width-stacked: 100% !default;
       max-width: none;
     }
 
+    @if $global-flexbox {
+      &.stack-for-small {
+        flex-wrap: wrap;
+      }
+    }
+
     &.stack-for-small .media-object-section {
       @include breakpoint(small only) {
         @include media-object-stack;
@@ -68,7 +90,12 @@ $mediaobject-image-width-stacked: 100% !default;
   .media-object-section {
     @include media-object-section;
 
-    &.middle { vertical-align: middle; }
-    &.bottom { vertical-align: bottom; }
+    @if $global-flexbox {
+      &.main-section { flex: 1 1 0px; }
+    }
+    @else {
+      &.middle { vertical-align: middle; }
+      &.bottom { vertical-align: bottom; }
+    }
   }
 }