figure.less

// FIGURE MIXIN
//
// Mixin styles for figure element
// <a href="#">
//     <img src="image.jpg">
//     <div class="info">
//         <h2>Title</h2>
//         <p>Description</p>
//     </div>
// </a>
// ================================================================================

.figure(@_: default) {
	.show_common > .figure();

	.info {
		.bg("common/figure_overlay-bg.png", , repeat-x, 0 0);
	}
	
	// Set different background image for .info
	.set_info_bg_theme(@id) {
		.info {
			background-position: 0 -(@id * 100px);
		}
	}
}

// Custom styles for video figure
.figure(video) {

	.info {
		padding: 2px 5px;
		color: @linkColor;

		h2, 
		h3 {
			.font_size(11px);
			.font_family_base();
			font-weight: normal;
			line-height: 1.1;
		}
	}
	
	> span {
		.bg("home/homepage_sprite.png", , , -120px -95px);
	}

	&:hover {
		background-position: -120px -95px;

		.info {
			color: #FFF;
		}
	}
}