slider.less

//
// Slider
// --------------------------------------------------

#slider {
	position: relative;

	// Padding, margin, border width
	.orange-box(
		@gutterWidth @gutterWidth @smallGutterWidth,
		-(@gutterWidth + 20px - 6px) -(@gutterWidth) @gutterWidth -(@gutterWidth),
		0 0 4px
	);
}

.slides-container {
	.clearfix;
}

.flex-viewport {
	max-height: 2000px;
	.transition(all 1s ease);
}

.loading .flex-viewport {
	max-height: 300px;
}

/* Slider content */
.slide {
	/* Hide the slides before the JS is loaded to avoid page jumping */
	display: none;
	-webkit-backface-visibility: hidden;

	.thumbnail,
	.slider-video {
		float: left;
		max-width: 100%;
		margin: 0 @gutterWidth 2px 2px;
	}

	.entry-title {
		margin-top: 0;
	}
}

/* Control navigation */
.flex-control-nav {
	list-style: none;
	margin: 20px auto 0 -60px;
	text-align: center;

	li {
		display: inline-block;
		margin: 0 0 0 7px;

		&:first-child {
			margin-left: 0;
		}
	}
}

/* Slider pagination */
.flex-control-paging li {
	a {
		background: @orangeLight;
		text-indent: -9999px;
		border-radius: 50%;
		cursor: pointer;
		display: block;
		.square(16px);
		.transition(all 150ms ease);

		&:hover {
			background: @orange;
		}
	}

	.flex-active,
	.flex-active:hover {
		background: @orangeDark;
		cursor: default;
		.scale(1.07);
	}
}

.flex-pauseplay a {
	cursor: pointer;
}

/* Next/prev buttons */
.flex-direction-nav {
	list-style: none;
	margin: 0; padding: 0;

	a {
		background-color: @white;
		box-shadow: 0 0 7px fade(@black, 30%);
		border-radius: 50%;
		.square(42px);
		margin: 0;
		opacity: 0.6;
		position: absolute;
		top: 200px;
		text-indent: -9999px;
		.transition(opacity 150ms ease);

		&:focus {
			background: @orangeLight;
		}

		&:after {
			#font > .alternative(36px, bold);
			text-indent: 0;
			color: @gray;
			position: absolute;
			top: -14px;
			left: 11px;
			z-index: 10;
		}

		#slider:hover & {
			opacity: 1;
		}
	}

	.flex-prev {
		left: -21px;

		&:after {
			content: "\00AB";
		}
	}

	.flex-next {
		right: -21px;

		&:after {
			content: "\00BB";
			left: 13px;
		}
	}

	.flex-direction-nav .disabled {
		cursor: default;
		opacity: 0.3 !important;
		filter: alpha(opacity=30);
	}

	.flex-prev:active,
	.flex-next:active {
		box-shadow: inset 0 0 5px rgba(0,0,0, 0.3), 0 0 7px rgba(0,0,0, 0.3);
	}
}

/* Move the navigation arrows when the screen is smaller */
@media screen and (max-width: 1130px) {
	.flex-direction-nav .flex-prev { opacity: 1; left: 10px; }
	.flex-direction-nav .flex-next { opacity: 1; right: 10px; }
}

/* Fallback to a border for browsers without box-shadow support */
.no-boxshadow .flex-direction-nav .flex-prev,
.no-boxshadow .flex-direction-nav .flex-next {
	border: 2px solid @orangeLight;

	&:hover {
		border-color: @orangeDark;
	}
}

/* No-javaScript fallback */
.no-js .slides-container > .slide {
	display: none;

	&:first-child {
		display: block;
	}
}

.no-js .slides-container > .slide:first-child {
	display: block;
}