diff --git a/docs/assets/css/bootstrap-responsive.css b/docs/assets/css/bootstrap-responsive.css index d9fa91d6c1..d87edf5096 100644 --- a/docs/assets/css/bootstrap-responsive.css +++ b/docs/assets/css/bootstrap-responsive.css @@ -114,6 +114,18 @@ padding-left: 10px; padding-right: 10px; } + .media .pull-left, + .media .pull-right { + float: none; + display: block; + margin-bottom: 10px; + } + .media .pull-left { + margin-right: 0; + } + .media .pull-right { + margin-left: 0; + } .modal { position: absolute; top: 10px; @@ -169,9 +181,9 @@ width: 100%; min-height: 28px; /* Make inputs at least the height of their button counterpart */ - + /* Makes inputs behave like true block-level elements */ - + -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index 495188af7f..69cc2f0bcd 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -3562,6 +3562,57 @@ a.thumbnail:hover { .thumbnail .caption { padding: 9px; } +.media, +.media-body { + overflow: hidden; + *overflow: visible; + zoom: 1; +} +.media { + margin-bottom: 10px; +} +.media .media { + margin-top: 20px; +} +.media .pull-left { + margin-right: 10px; +} +.media .pull-right { + margin-left: 10px; +} +.media .media-object { + display: block; +} +.medias { + margin-top: 20px; + margin-left: 0; + list-style-type: none; +} +.medias .media { + padding-bottom: 10px; + border-bottom: 1px solid rgba(0, 0, 0, 0.07); +} +.medias > .media:last-child { + margin: 0; + border-bottom: none; +} +.medias > .media .media { + margin-bottom: 0; + padding-bottom: 0; + border-bottom: none; +} +.media-box { + margin-bottom: 19px; + padding: 10px; + background-color: #fff; + border: 1px solid rgba(0, 0, 0, 0.09); + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; + -webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); + -moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); + box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); +} .label { padding: 1px 4px 2px; font-size: 10.998px; diff --git a/docs/components.html b/docs/components.html index 10b2aec202..4f3b0bace9 100644 --- a/docs/components.html +++ b/docs/components.html @@ -101,6 +101,7 @@
  • Badges
  • Typography
  • Thumbnails
    • +
  • Medias
  • Alerts
  • Progress bars
  • Miscellaneous
    • @@ -1680,6 +1681,165 @@ + +
    +
    +

    Medias Layout tools for medias & content

    +
    + +
    +
    +

    Default media

    +

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

    +
    + +
    +

    This is the title

    +

    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.

    +
    +
    +
    + +
    +

    This is the title

    +

    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.

    +
    + +
    +

    This is the title

    +

    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.

    +
    +
    +
    +
    +
    +
    +

    Media list

    +

    With a bit of extra markup, you can use media inside list (useful for comment threads or articles lists).

    +
      +
    • + +
      +

      This is the title

      +

      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.

      +
      + +
      +

      This is the title

      +

      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.

      +
      +
      +
      +
      • +
    • + +
      +

      This is the title

      +

      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.

      +
      +
      • +
    +
    +
    + +
    +
    +

    Media Box

    +

    Wrap your medias and media lists inside a simple box.

    +
    +
    + +
    +

    This is the title

    +

    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.

    +
    + +
    +

    This is the title

    +

    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.

    +
    +
    +
    +
    +
    + + + +
      +
    • + +
      +

      This is the title

      +

      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.

      +
      + +
      +

      This is the title

      +

      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.

      +
      +
      +
      +
      • +
    • + +
      +

      This is the title

      +

      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.

      +
      +
      • +
    • + +
      +

      This is the title

      +

      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.

      +
      +
      • +
    +
    +
    +

    The markup

    +

    The required markup for medias is light and straightforward. Here's a look at the default setup:

    +
    +<div class="media">
+	<a class="pull-left" href="#"><img class="media-object" src="http://placehold.it/64x64"></a>
+	<div class="media-body">
+		<h4>This is the title</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>
+	</div>	
+</div>
+
    +

    The HTML content needed for a media list

    +
    +<ul class="medias">
+	<li class="media">
+		<a class="pull-left" href="#"><img class="media-object" src="http://placehold.it/64x64"></a>
+		<div class="media-body">
+			<h4>This is the title</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>
+		</div>
+	</li>
+</ul>	
+
    +

    Use a <div> with a class .media-box to wrap your media (works with media lists too) in a styled box.

    +
    +<div class="media-box">
+	<div class="media">
+		<a class="pull-left" href="#"><img class="media-object" src="http://placehold.it/64x64"></a>
+		<div class="media-body">
+			<h4>This is the title</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>
+		</div>
+	</div>
+</div>
+
    +
    + +
    +
    + + +
    diff --git a/less/bootstrap.less b/less/bootstrap.less index d115e95671..4802fb4f62 100644 --- a/less/bootstrap.less +++ b/less/bootstrap.less @@ -52,6 +52,7 @@ // Components: Misc @import "thumbnails.less"; +@import "media.less"; @import "labels.less"; @import "badges.less"; @import "progress-bars.less"; diff --git a/less/media.less b/less/media.less new file mode 100644 index 0000000000..87ea1bc1e4 --- /dev/null +++ b/less/media.less @@ -0,0 +1,68 @@ +// COMMON STYLES +// ------------- + +.media, .media-body { + overflow:hidden; + *overflow:visible; + zoom:1; +} +.media { + margin-bottom: 10px; +} +.media .media { + margin-top: 20px; +} +.media .pull-left { + margin-right: 10px; +} +.media .pull-right { + margin-left: 10px; +} +.media .media-object { + display: block; +} + +// Media list +.medias { + margin-top: 20px; + margin-left: 0; + list-style-type: none; +} +.medias .media { + padding-bottom: 10px; + border-bottom: 1px solid rgba(0, 0, 0, .07); +} +.medias > .media:last-child { + margin: 0; + border-bottom: none; +} +.medias > .media .media { + margin-bottom: 0; + padding-bottom: 0; + border-bottom: none; +} + +// Media box +.media-box { + margin-bottom: 19px; + padding: 10px; + background-color: #fff; + border: 1px solid rgba(0,0,0,.09); + .border-radius(4px); + .box-shadow(1px 1px 2px rgba(0, 0, 0, 0.1)); +} + +@media (max-width: 480px) { + .media .pull-left, + .media .pull-right { + float: none; + display: block; + margin-bottom: 10px; + } + .media .pull-left { + margin-right: 0; + } + .media .pull-right { + margin-left: 0; + } +} \ No newline at end of file diff --git a/less/responsive.less b/less/responsive.less index 98485eebd8..b72aa90e2e 100644 --- a/less/responsive.less +++ b/less/responsive.less @@ -106,6 +106,20 @@ padding-left: 10px; padding-right: 10px; } + + // Medias + .media .pull-left, + .media .pull-right { + float: none; + display: block; + margin-bottom: 10px; + } + .media .pull-left { + margin-right: 0; + } + .media .pull-right { + margin-left: 0; + } // Modals .modal {