From 1bdf6c4bd609b3dbe528b46a880f3b702b0f4b0c Mon Sep 17 00:00:00 2001 From: Mark Otto <markdotto@gmail.com> Date: Fri, 19 Aug 2016 21:00:57 -0700 Subject: [PATCH 1/2] Fixes #20513: Remove all default margin on .media given it's utility purpose and our margin utils --- scss/_media.scss | 8 -------- 1 file changed, 8 deletions(-) diff --git a/scss/_media.scss b/scss/_media.scss index d970c946a0..d1ebbcdeb2 100644 --- a/scss/_media.scss +++ b/scss/_media.scss @@ -1,7 +1,6 @@ @if $enable-flex { .media { display: flex; - margin-bottom: $spacer; } .media-body { flex: 1; @@ -13,13 +12,6 @@ align-self: flex-end; } } @else { - .media { - margin-top: $media-margin-top; - - &:first-child { - margin-top: 0; - } - } .media, .media-body { overflow: hidden; -- GitLab From 86e3a351612b98d5c9ac4a1d43a2947c32845d27 Mon Sep 17 00:00:00 2001 From: Mark Otto <markdotto@gmail.com> Date: Fri, 19 Aug 2016 21:20:00 -0700 Subject: [PATCH 2/2] add some margin utils --- docs/layout/media-object.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/docs/layout/media-object.md b/docs/layout/media-object.md index 602bd210a7..fcb89a3b5a 100644 --- a/docs/layout/media-object.md +++ b/docs/layout/media-object.md @@ -45,7 +45,7 @@ Media components can also be nested. <div class="media-body"> <h4 class="media-heading">Media heading</h4> Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. - <div class="media"> + <div class="media m-t-2"> <a class="media-left" href="#"> <img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image"> </a> @@ -123,7 +123,7 @@ With a bit of extra markup, you can use media inside list (useful for comment th <h4 class="media-heading">Media heading</h4> <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.</p> <!-- Nested media object --> - <div class="media"> + <div class="media m-t-2"> <a class="media-left" href="#"> <img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image"> </a> @@ -131,7 +131,7 @@ With a bit of extra markup, you can use media inside list (useful for comment th <h4 class="media-heading">Nested media heading</h4> Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. <!-- Nested media object --> - <div class="media"> + <div class="media m-t-2"> <div class="media-left"> <a href="#"> <img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image"> @@ -145,7 +145,7 @@ With a bit of extra markup, you can use media inside list (useful for comment th </div> </div> <!-- Nested media object --> - <div class="media"> + <div class="media m-t-2"> <div class="media-left"> <a href="#"> <img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image"> @@ -158,7 +158,7 @@ With a bit of extra markup, you can use media inside list (useful for comment th </div> </div> </li> - <li class="media"> + <li class="media m-t-2"> <div class="media-body"> <h4 class="media-heading">Media heading</h4> Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. -- GitLab