From 919b4ccb15209d47f7cc3f740654b0bcd5cf1870 Mon Sep 17 00:00:00 2001 From: Nicole Sullivan Date: Tue, 14 Oct 2014 17:09:57 -0400 Subject: [PATCH] Fixes #14799: Add vertical alignment of image in media component Signed-off-by: Jenn Dodd --- dist/css/bootstrap.css | 37 ++++++----- docs/_includes/components/media.html | 94 ++++++++++++++++++++++------ docs/dist/css/bootstrap.css | 37 ++++++----- less/media.less | 73 ++++++++++----------- 4 files changed, 150 insertions(+), 91 deletions(-) diff --git a/dist/css/bootstrap.css b/dist/css/bootstrap.css index 02a92e6393..3c224382e4 100644 --- a/dist/css/bootstrap.css +++ b/dist/css/bootstrap.css @@ -4886,29 +4886,34 @@ a.thumbnail.active { background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); } -.media, -.media-body { - overflow: hidden; - zoom: 1; -} -.media, -.media .media { +.media { margin-top: 15px; } +.media .media-right, +.media .pull-right { + padding-left: 10px; +} +.media .media-left, +.media .pull-left { + padding-right: 10px; +} .media:first-child { margin-top: 0; } -.media-object { - display: block; +.media .media-left, +.media .media-right, +.media .media-body { + display: table-cell; + vertical-align: top; +} +.media .media-middle { + vertical-align: middle; +} +.media .media-bottom { + vertical-align: bottom; } .media-heading { - margin: 0 0 5px; -} -.media > .pull-left { - margin-right: 10px; -} -.media > .pull-right { - margin-left: 10px; + margin: 0 0 5px 0; } .media-list { padding-left: 0; diff --git a/docs/_includes/components/media.html b/docs/_includes/components/media.html index 57aee1e1dc..9c166375e3 100644 --- a/docs/_includes/components/media.html +++ b/docs/_includes/components/media.html @@ -4,10 +4,10 @@

Abstract object styles for building various types of components (like blog comments, Tweets, etc) that feature a left- or right-aligned image alongside textual content.

Default media

-

The default media allow to float a media object (images, video, audio) to the left or right of a content block.

+

The default media displays a media object (images, video, audio) to the left or right of a content block.

- + Generic placeholder image
@@ -16,14 +16,14 @@
- + Generic placeholder image

Media heading

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.
- + Generic placeholder image
@@ -33,10 +33,31 @@
+
+
+

Media heading

+ 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. +
+ + Generic placeholder image + +
+
+ + Generic placeholder image + + + Generic placeholder image + +
+

Deprecated pull-right pull-left example

+ 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. +
+
{% highlight html %}
- + ...
@@ -44,6 +65,50 @@ ...
+{% endhighlight %} + +

The classes .pull-left and .pull-right also exist and were previously used as part of the media component, but are deprecated for that use as of v3.3.0. They are approximately equivalent to .media-left and .media-right, except that .media-right should be placed after the .media-body in the html.

+

Media alignment

+

The images or other media can be aligned top, middle, or bottom. The default is top aligned.

+
+
+ + Generic placeholder image + +
+

Top aligned media

+ 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. +
+
+
+ + Generic placeholder image + +
+

Middle aligned media

+ 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. +
+
+
+ + Generic placeholder image + +
+

Bottom aligned media

+ 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. +
+
+
+{% highlight html %} +
+ + ... + +
+

Middle aligned media

+ ... +
+
{% endhighlight %}

Media list

@@ -51,7 +116,7 @@
  • - + Generic placeholder image
    @@ -59,7 +124,7 @@

    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.

    - + Generic placeholder image
    @@ -67,7 +132,7 @@ 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.
    - + Generic placeholder image
    @@ -79,7 +144,7 @@
    - + Generic placeholder image
    @@ -89,21 +154,12 @@
    • -
  • - - Generic placeholder image - -
    -

    Media heading

    - 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. -
    -
{% highlight html %}
  • - + ...
    diff --git a/docs/dist/css/bootstrap.css b/docs/dist/css/bootstrap.css index 02a92e6393..3c224382e4 100644 --- a/docs/dist/css/bootstrap.css +++ b/docs/dist/css/bootstrap.css @@ -4886,29 +4886,34 @@ a.thumbnail.active { background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); } -.media, -.media-body { - overflow: hidden; - zoom: 1; -} -.media, -.media .media { +.media { margin-top: 15px; } +.media .media-right, +.media .pull-right { + padding-left: 10px; +} +.media .media-left, +.media .pull-left { + padding-right: 10px; +} .media:first-child { margin-top: 0; } -.media-object { - display: block; +.media .media-left, +.media .media-right, +.media .media-body { + display: table-cell; + vertical-align: top; +} +.media .media-middle { + vertical-align: middle; +} +.media .media-bottom { + vertical-align: bottom; } .media-heading { - margin: 0 0 5px; -} -.media > .pull-left { - margin-right: 10px; -} -.media > .pull-right { - margin-left: 10px; + margin: 0 0 5px 0; } .media-list { padding-left: 0; diff --git a/less/media.less b/less/media.less index 5ad22cd6d5..eee1c78f3a 100644 --- a/less/media.less +++ b/less/media.less @@ -1,51 +1,44 @@ -// Media objects -// Source: http://stubbornella.org/content/?p=497 -// -------------------------------------------------- - - -// Common styles -// ------------------------- - -// Clear the floats -.media, -.media-body { - overflow: hidden; - zoom: 1; -} - -// Proper spacing between instances of .media -.media, -.media .media { +.media { + // Proper spacing between instances of .media margin-top: 15px; -} -.media:first-child { - margin-top: 0; -} -// For images and videos, set to block -.media-object { - display: block; + // Proper spacing of .media-right + .media-right, + .pull-right { + padding-left: 10px; + } + + // Proper spacing of .media-left + .media-left, + .pull-left { + padding-right: 10px; + } + + &:first-child { + margin-top: 0; + } + + .media-left, + .media-right, + .media-body { + display: table-cell; + vertical-align: top; + } + + .media-middle { + vertical-align: middle; + } + + .media-bottom { + vertical-align: bottom; + } } // Reset margins on headings for tighter default spacing .media-heading { - margin: 0 0 5px; + margin: 0 0 5px 0; } - -// Media image alignment -// ------------------------- - -.media { - > .pull-left { - margin-right: 10px; - } - > .pull-right { - margin-left: 10px; - } -} - - // Media list variation // -------------------------