From cde1b9a1782a6592e2d41ce2ad60aadd74e5539c Mon Sep 17 00:00:00 2001 From: Kevin Lisota Date: Mon, 16 Sep 2013 08:21:09 -0700 Subject: add responsive CSS to hyperlinked images when thumbnail caption markup is used When thumbnail caption markup is used in combination with a hyperlinked image, the image is not responsive. (non-hyperlinked images are fine, like the example in the docs) Adding a selector to apply responsiveness to hyperlinked images when thumbnail captions are used. --- less/thumbnails.less | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'less/thumbnails.less') diff --git a/less/thumbnails.less b/less/thumbnails.less index a210cac72..f6064a245 100644 --- a/less/thumbnails.less +++ b/less/thumbnails.less @@ -9,7 +9,8 @@ display: block; // Override the inline-block from `.img-thumbnail` margin-bottom: @line-height-computed; - > img { + > img, + a > img { .img-responsive(); } } -- cgit v1.2.3 From e20b02ad0b1253c8e3d9703409a256927f55ede8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rog=C3=A9rio=20Yokomizo?= Date: Mon, 14 Oct 2013 20:10:49 -0300 Subject: extended hover state of linked versions of .thumbnail --- less/thumbnails.less | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'less/thumbnails.less') diff --git a/less/thumbnails.less b/less/thumbnails.less index a210cac72..df46fbdc2 100644 --- a/less/thumbnails.less +++ b/less/thumbnails.less @@ -17,7 +17,8 @@ // Add a hover state for linked versions only a.thumbnail:hover, -a.thumbnail:focus { +a.thumbnail:focus, +a.thumbnail.active { border-color: @link-color; } -- cgit v1.2.3 From 688ca328c995d112848f93266d8ffb11b5923827 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Zlatan=20Vasovi=C4=87?= Date: Wed, 30 Oct 2013 10:00:28 +0100 Subject: Combine multiple .thumbnail > img styles --- less/thumbnails.less | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) (limited to 'less/thumbnails.less') diff --git a/less/thumbnails.less b/less/thumbnails.less index df46fbdc2..a09aa9b83 100644 --- a/less/thumbnails.less +++ b/less/thumbnails.less @@ -11,6 +11,8 @@ > img { .img-responsive(); + margin-left: auto; + margin-right: auto; } } @@ -22,11 +24,7 @@ a.thumbnail.active { border-color: @link-color; } -// Images and captions -.thumbnail > img { - margin-left: auto; - margin-right: auto; -} +// Image captions .thumbnail .caption { padding: @thumbnail-caption-padding; color: @thumbnail-caption-color; -- cgit v1.2.3 From 3dc0ed35d1f07da48f2adbe585a6fd7dcf268c49 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Zlatan=20Vasovi=C4=87?= Date: Fri, 1 Nov 2013 22:09:01 +0100 Subject: Use nesting for thumbnail styles --- less/thumbnails.less | 23 +++++++++++------------ 1 file changed, 11 insertions(+), 12 deletions(-) (limited to 'less/thumbnails.less') diff --git a/less/thumbnails.less b/less/thumbnails.less index a09aa9b83..bc4178bbf 100644 --- a/less/thumbnails.less +++ b/less/thumbnails.less @@ -14,18 +14,17 @@ margin-left: auto; margin-right: auto; } -} - -// Add a hover state for linked versions only -a.thumbnail:hover, -a.thumbnail:focus, -a.thumbnail.active { - border-color: @link-color; -} + // Add a hover state for linked versions only + a&:hover, + a&:focus, + a&.active { + border-color: @link-color; + } -// Image captions -.thumbnail .caption { - padding: @thumbnail-caption-padding; - color: @thumbnail-caption-color; + // Image captions + .caption { + padding: @thumbnail-caption-padding; + color: @thumbnail-caption-color; + } } -- cgit v1.2.3 From e4848286c86af39c5a30c845748fdc46de8b8dd5 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 29 Nov 2013 23:19:04 -0800 Subject: Fix #10979: Don't use .img-thumbnail as a mixin for .thumbnail to avoid dupe and unnecessary styles --- less/thumbnails.less | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) (limited to 'less/thumbnails.less') diff --git a/less/thumbnails.less b/less/thumbnails.less index bc4178bbf..43e7d1d26 100644 --- a/less/thumbnails.less +++ b/less/thumbnails.less @@ -5,9 +5,14 @@ // Mixin and adjust the regular image class .thumbnail { - .img-thumbnail(); - display: block; // Override the inline-block from `.img-thumbnail` + display: block; + padding: @thumbnail-padding; margin-bottom: @line-height-computed; + line-height: @line-height-base; + background-color: @thumbnail-bg; + border: 1px solid @thumbnail-border; + border-radius: @thumbnail-border-radius; + .transition(all .2s ease-in-out); > img { .img-responsive(); -- cgit v1.2.3