app/soc/content/less/soc/elements/projects.less

// ==========================================================================
// projects
// ==========================================================================
@import "common.less";

.projects {
	max-width: 460px;
	margin: 0 auto 2em;
	position: relative;

	@media @break-medium {
		width: 960px;
		max-width: 100%;
		.clearfix;
	}
}

.project {
	background: white;
	.box-shadow(rgba(0,0,0,.3) 0 0 6px);
	position: relative;
	margin: 0 0 3em 0;
	text-align: center;

	.no-boxshadow & {
		border: 1px solid #ccc;
	}

	&:hover {
		.box-shadow(rgba(0,0,0,.6) 0 0 6px);
	}

	.no-boxshadow &:hover {
		border-color: #aaa;
	}

	h2 {
		color: @link-color;
	}

	a:hover h2 {
		color: @link-color-hover;
	}

	@media @break-medium {
		float: left;
		width: 460px;
		margin: 10px;
	}

	a {
		display: block;
		width: 100%;
		height: 100%;
	}
}

.project-button {
	font-size: 1.125em;
	line-height: 1.25em;
	margin: 0 auto .5em;
	width: 65px;

	&:before {
		content:"";
   		float:left;
		background: url('@{images_soc_location}/house-icon.svg');
		width: 18px;
		height: 18px;
		padding: 0;
		margin-right: 8px;
	}

	.no-svg &:before {
		background-image: url('@{images_soc_location}/house-icon.png');		
	}

	.active & {
		color: @google-orange;

		&:before {
			background-position: 100%;
		}
	}

	a:hover & {
		&:before {
			background: url('@{images_soc_location}/house-icon.svg');
			background-position: 100%;
		}

	}

	.no-svg a:hover &:before {
		background-image: url('@{images_soc_location}/house-icon.png');		
	}

	.active a:hover & {
		color: @google-blue;
		&:before {
			background: url('@{images_soc_location}/house-icon.svg');
		}		
	}

	.no-svg .active a:hover &:before {
		background-image: url('@{images_soc_location}/house-icon.png');		
	}

}

.project-info {
	padding: 20px;
}

.project-description {
	color: @web-black;
	margin: 0 20px 2em;
	font-size: .8em;
}

.project-image {
	background: url('@{images_soc_location}/non-bg.png');
	.background-size(cover);
	padding: 20px;
	height: 275px;
	.box-sizing(border-box);

	img {
		max-height: 100%;
	}

	.active & {
		background: url('@{images_soc_location}/active-bg.jpg');
		.background-size(cover);
	}

	a:hover & {
		background: url('@{images_soc_location}/non-bg-hover.png');
		.background-size(cover);

		.active & {
			background: url('@{images_soc_location}/active-bg-hover.png');
			.background-size(cover);
		}
	}
}


.active-banner {
	display: none;
	position: absolute;
	top: 0;
	right: 20px;
	width: 100px;
	background: #F19906;
	.background-image(linear-gradient(top, #FFBD1F, #F19906));
	color: white;
	text-align: center;
	margin: -10px 0 0 0;

	p {
		font-size: .55em;
		line-height: 1.4em;
		text-transform: uppercase;
		letter-spacing: 2.5px;
		font-weight: 600;
		margin: 10px 0 0 0;
	}

	.triangle-top {
		background: url('@{images_soc_location}/arrow-top.svg');
		position: absolute;
		left: 0;
		top: 0;
		margin: 0 0 0 -12px;
		width: 12px;
		height: 10px;
	}

	.no-svg & .triangle-top {
		background-image: url('@{images_soc_location}/arrow-top.png');
	}

	.triangle-bottom {
		background: url('@{images_soc_location}/arrow-bottom.svg');
		position: absolute;
		left: 0;
		bottom: 0;
		margin: 0 0 -19px 0;
		width: 100px;
		height: 19px;	
	}

	.no-svg & .triangle-bottom {
		background-image: url('@{images_soc_location}/arrow-bottom.png');
	}

	.active & {
		display: block;
	}
}

.unactive-description {
	display: none;
	margin: 5px 0 0 0;
}

// special only one of them is active styles
.one-active {

	@media @break-medium {

		// this makes all projects the size of the small one
		/////////////////////////////////////////////////////
		.project {
			width: 300px; 
			float: right;
			margin-top: 70px;
			min-height: 360px;
		}

		.project-image {
			height: 190px;
		}

		.project-title {
			padding: 0 10px;
		}
		.project-info {
			padding: 20px 35px 0;
		}
		.project-description {
			margin: 0 0 1.5em 0;

			p {
				display: none;
				&.unactive-description {
					display: block;
				}
			}
		}

		.project-button {
			font-size: .9em;
			width: 50px;

			&:before {
				background: url('@{images_soc_location}/house-icon-small.svg');
				width: 14px;
				height: 14px;
			}
		}

		.no-svg & .project-button:before {
			background-image: url('@{images_soc_location}/house-icon-small.png');
		}

		a:hover .project-button:before {
			background: url('@{images_soc_location}/img/house-icon-small.svg');
			width: 14px;
			height: 14px;
			background-position: 100%;
		}

		.no-svg & a:hover .project-button:before {
			background-image: url('@{images_soc_location}/house-icon-small.png');
		}

		// this makes the active project look big
		/////////////////////////////////////////////////////
		.active {

			&.project {
				width: 660px;
				z-index: 100;
				height: 400px;
				position: absolute;
				left: 0;
				top: 0;
				margin-top: 10px;

				a {
					.clearfix;
				}
			}

			.project-image {
				float: left;
				width: 400px;
				height: 100%;
				padding: 50px 40px;
			}

			.project-info {
				text-align: left;
				padding: 50px 20px 20px 420px;
			}

			.project-title {
				padding: 0;
				font-size: 1.95em;
			}

			.project-description {
				margin: 0 0 1.5em 0;
	
				p {
					display: block;
					&.unactive-description {
						display: none;
					}
				}
			}

			.active-banner {
				right: 140px;
			}

			.project-button {
				position: absolute;
				bottom: 20px;
				font-size: 1em;
				width: 60px;

				&:before {
					background: url('@{images_soc_location}/house-icon.svg');
					width: 18px;
					height: 18px;
					background-position: 100%;
				}
			}

			.no-svg & .project-button:before {
				background-image: url('@{images_soc_location}/house-icon.png');
			}

			a:hover .project-button:before {
				background: url('@{images_soc_location}/house-icon.svg');
				width: 18px;
				height: 18px;
				background-position: 0;
			}

			.no-svg & a:hover .project-button:before {
				background-image: url('@{images_soc_location}/house-icon.png');
			}

		}
	}
}