From f5fd5e752329d92d3fde2e3f37f3406db62c400b Mon Sep 17 00:00:00 2001 From: Giuliano Velli Date: Fri, 20 Apr 2012 17:54:51 +0200 Subject: Added Medias code and documentation Added media.less and edited bootstrap.less and responsive.less to manage media components. Added a section to the documentation (Media, in components.html) outlining how Medias work. Edited bootstrap.css and bootstrap-responsive.css to add the code for the demos Signed-off-by: Giuliano Velli --- less/bootstrap.less | 1 + less/media.less | 68 ++++++++++++++++++++++++++++++++++++++++++++++++++++ less/responsive.less | 14 +++++++++++ 3 files changed, 83 insertions(+) create mode 100644 less/media.less (limited to 'less') diff --git a/less/bootstrap.less b/less/bootstrap.less index d115e9567..4802fb4f6 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 000000000..87ea1bc1e --- /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 98485eebd..b72aa90e2 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 { -- cgit v1.2.3 From 4fbb400754986b969b40fc12eacfd332ace1a174 Mon Sep 17 00:00:00 2001 From: Giuliano Velli Date: Fri, 20 Apr 2012 17:54:51 +0200 Subject: Added Medias code and documentation Fix for Issue #1711 Added media.less and edited bootstrap.less and responsive.less to manage media components. Added a section to the documentation (Media, in components.html) outlining how Medias work. Edited bootstrap.css and bootstrap-responsive.css to add the code for the demos Signed-off-by: Giuliano Velli --- less/bootstrap.less | 1 + less/media.less | 68 ++++++++++++++++++++++++++++++++++++++++++++++++++++ less/responsive.less | 14 +++++++++++ 3 files changed, 83 insertions(+) create mode 100644 less/media.less (limited to 'less') diff --git a/less/bootstrap.less b/less/bootstrap.less index d115e9567..4802fb4f6 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 000000000..87ea1bc1e --- /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 98485eebd..b72aa90e2 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 { -- cgit v1.2.3 From 143fef9f95daca088c1a910fccd07f2b520d8b0b Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 17 Sep 2012 18:15:39 -0700 Subject: overhaul the docs and css to merge into 2.1.2 since this was against master --- less/media.less | 86 ++++++++++++++++++------------------------ less/responsive-767px-max.less | 8 ++-- 2 files changed, 40 insertions(+), 54 deletions(-) (limited to 'less') diff --git a/less/media.less b/less/media.less index dbcc212a0..1decab71d 100644 --- a/less/media.less +++ b/less/media.less @@ -1,69 +1,55 @@ -// COMMON STYLES -// ------------- +// Media objects +// Source: http://stubbornella.org/content/?p=497 +// -------------------------------------------------- -.media, + +// Common styles +// ------------------------- + +// Clear the floats +.media, .media-body { overflow: hidden; *overflow: visible; zoom: 1; } -.media { - margin-bottom: 10px; -} + +// Proper spacing between instances of .media +.media, .media .media { - margin-top: 20px; -} -.media .pull-left { - margin-right: 10px; + margin-top: 15px; } -.media .pull-right { - margin-left: 10px; +.media:first-child { + margin-top: 0; } -.media .media-object { + +// For images and videos, set to block +.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); +// Reset margins on headings for tighter default spacing +.media-heading { + margin: 0 0 5px; } -.medias > .media.last { - 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,.1)); -} -@media (max-width: 480px) { -.media .pull-left, -.media .pull-right { - float: none; - display: block; - margin-bottom: 10px; -} +// Media image alignment +// ------------------------- + .media .pull-left { - margin-right: 0; // we stack the components so the indent is not needed anymore + margin-right: 10px; } .media .pull-right { - margin-left: 0; // we stack the components so the indent is not needed anymore + margin-left: 10px; +} + + +// Media list variation +// ------------------------- + +// Undo default ul/ol styles +.media-list { + margin-left: 0; + list-style: none; } -} \ No newline at end of file diff --git a/less/responsive-767px-max.less b/less/responsive-767px-max.less index 322acae21..5a23fc683 100644 --- a/less/responsive-767px-max.less +++ b/less/responsive-767px-max.less @@ -156,16 +156,16 @@ } // Medias + // Reset float and spacing to stack .media .pull-left, - .media .pull-right { + .media .pull-right { float: none; display: block; margin-bottom: 10px; } - .media .pull-left { + // Remove side margins since we stack instead of indent + .media-object { margin-right: 0; - } - .media .pull-right { margin-left: 0; } -- cgit v1.2.3