Created
June 6, 2013 17:20
-
-
Save appastair/5723225 to your computer and use it in GitHub Desktop.
Twitter Bootstrap Responsive Thumbnails (2.3.2)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// | |
// Thumbnails | |
// -------------------------------------------------- | |
// Note: `.thumbnails` and `.thumbnails > li` are overriden in responsive files | |
// Make wrapper ul behave like the grid | |
.thumbnails { | |
margin-left: -@gridGutterWidth; | |
list-style: none; | |
.clearfix(); | |
} | |
// Fluid rows have no left margin | |
.row-fluid .thumbnails { | |
margin-left: 0; | |
} | |
// Float li to make thumbnails appear in a row | |
.thumbnails > li { | |
float: left; // Explicity set the float since we don't require .span* classes | |
margin-bottom: @baseLineHeight; | |
margin-left: @gridGutterWidth; | |
} | |
// Responsive Thumbnail "Rows" (https://github.com/twitter/bootstrap/issues/3494) | |
.row-fluid .thumbnails .span2:nth-child(6n+1), | |
.row-fluid .thumbnails .span3:nth-child(4n+1), | |
.row-fluid .thumbnails .span4:nth-child(3n+1), | |
.row-fluid .thumbnails .span6:nth-child(2n+1) { | |
margin-left: 0; | |
} | |
// The actual thumbnail (can be `a` or `div`) | |
.thumbnail { | |
display: block; | |
padding: 4px; | |
line-height: @baseLineHeight; | |
border: 1px solid #ddd; | |
.border-radius(@baseBorderRadius); | |
.box-shadow(0 1px 3px rgba(0,0,0,.055)); | |
.transition(all .2s ease-in-out); | |
} | |
// Add a hover/focus state for linked versions only | |
a.thumbnail:hover, | |
a.thumbnail:focus { | |
border-color: @linkColor; | |
.box-shadow(0 1px 4px rgba(0,105,214,.25)); | |
} | |
// Images and captions | |
.thumbnail > img { | |
display: block; | |
max-width: 100%; | |
margin-left: auto; | |
margin-right: auto; | |
} | |
.thumbnail .caption { | |
padding: 9px; | |
color: @gray; | |
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
--- thumbnails.less 2013-06-07 02:59:20.164172023 +1000 | |
+++ thumbnails.less 2013-06-07 03:16:31.908186570 +1000 | |
@@ -23,6 +23,14 @@ | |
margin-left: @gridGutterWidth; | |
} | |
+// Responsive Thumbnail "Rows" (https://github.com/twitter/bootstrap/issues/3494) | |
+.row-fluid .thumbnails .span2:nth-child(6n+1), | |
+.row-fluid .thumbnails .span3:nth-child(4n+1), | |
+.row-fluid .thumbnails .span4:nth-child(3n+1), | |
+.row-fluid .thumbnails .span6:nth-child(2n+1) { | |
+ margin-left: 0; | |
+} | |
+ | |
// The actual thumbnail (can be `a` or `div`) | |
.thumbnail { | |
display: block; | |
@@ -51,3 +59,4 @@ | |
padding: 9px; | |
color: @gray; | |
} | |
+ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
twbs/bootstrap#3494