elemental/less/base/images.less

React UI Framework

//
// Images
// ==============================




// Responsive images
// see ../mixins/image for more information
// ------------------------------

.img-responsive {
	.img-responsive();
}




// Image thumbnail
// ------------------------------

.img-thumbnail {
	background-color: @thumbnail-bg-color;
	border-radius: @border-radius-base;
	border: 1px solid @thumbnail-border-color;
	display: inline-block;
	height: auto;
	line-height: 1;
	max-width: 100%;
	padding: @thumbnail-gutter-width;

	// contain image within the bounds of the element
	> img {
		height: auto;
		max-width: 100%;
	}

	// catch any interior absolutely positioned elements
	position: relative;

	// if the thumbnail is an anchor, handle events
	a&:hover,
	a&:focus {
		background-color: @thumbnail-bg-hover-color;
		border-color: @thumbnail-border-hover-color;
		outline: none;
	}
}