From 15692d5e5b7456ce3d09cecc80738ca77148ea2e Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 27 Apr 2015 01:50:38 -0700 Subject: [PATCH] flex variation for media --- scss/_media.scss | 76 ++++++++++++++++++++++++++++++------------------ 1 file changed, 48 insertions(+), 28 deletions(-) diff --git a/scss/_media.scss b/scss/_media.scss index e5eb7aba32..a1c26f2ac7 100644 --- a/scss/_media.scss +++ b/scss/_media.scss @@ -2,29 +2,58 @@ // Media // -------------------------------------------------- -.media { - // Proper spacing between instances of .media - margin-top: 15px; +@if $enable-flex { + .media { + display: flex; + margin-bottom: $spacer; + } + .media-body { + flex: 1; + } +} @else { + .media { + margin-top: 15px; - &:first-child { - margin-top: 0; + &:first-child { + margin-top: 0; + } + } + .media, + .media-body { + overflow: hidden; + zoom: 1; + } + .media-body { + width: 10000px; + } + .media-left, + .media-right, + .media-body { + display: table-cell; + vertical-align: top; + } + .media-middle { + vertical-align: middle; + } + .media-bottom { + vertical-align: bottom; } } -.media, -.media-body { - overflow: hidden; - zoom: 1; -} -.media-body { - width: 10000px; -} +// +// Images/elements as the media anchor +// .media-object { display: block; } + +// +// Alignment +// + .media-right, .media > .pull-right { padding-left: 10px; @@ -35,30 +64,21 @@ padding-right: 10px; } -.media-left, -.media-right, -.media-body { - display: table-cell; - vertical-align: top; -} - -.media-middle { - vertical-align: middle; -} -.media-bottom { - vertical-align: bottom; -} +// +// Headings +// -// Reset margins on headings for tighter default spacing .media-heading { margin-top: 0; margin-bottom: 5px; } + +// // Media list variation // -// Undo default ul/ol styles + .media-list { padding-left: 0; list-style: none; -- 2.47.2