Flexslider v2.0 CSS ported to SCSS

_flexslider.scss

/*
 * jQuery FlexSlider v2.0
 * http://www.woothemes.com/flexslider/
 *
 * Copyright 2012 WooThemes
 * Free to use under the GPLv2 license.
 * http://www.gnu.org/licenses/gpl-2.0.html
 *
 * Contributing author: Tyler Smith (@mbmufffin)
 */


/* Browser Resets */
.flex-container a:active,
.flexslider a:active,
.flex-container a:focus,
.flexslider a:focus {

	outline: none;
}

.slides,
.flex-control-nav,
.flex-direction-nav {

	margin: 0;
	padding: 0;
	list-style: none;
}

/* FlexSlider Necessary Styles
*********************************/
.flexslider {

	margin: 0;
	padding: 0;

	.slides {

		> li {

			display: none;
			-webkit-backface-visibility: hidden;
		}

		img {

			width: 100%;
			display: block;
		}
	}
}

.flex-pauseplay span {

	text-transform: capitalize;
}

/* Clearfix for the .slides element */
.slides:after
{
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}

html[xmlns] .slides {

	display: block;
}

* html .slides {

	height: 1%;
}


/* No JavaScript Fallback */
/* If you are not using another script, such as Modernizr, make sure you
 * include js that eliminates this class on page load */
.no-js .slides > li:first-child {

	display: block;
}

/* FlexSlider Default Theme
*********************************/
.flexslider {

	margin: 0 0 60px;
	background: #fff;
	border: 4px solid #fff;
	position: relative;
	@include border-radius( 4px );
	@include box-shadow( 0 1px 4px rgba(0,0,0,.2) );
	zoom: 1;

	.slides {

		zoom: 1;
	}
}

.flex-viewport {

	max-height: 2000px;
	@include transition( all 1s ease );
}

.loading .flex-viewport {

	max-height: 300px;
}

.carousel li {

	margin-right: 5px;
}

/* Direction Nav */
.flex-direction-nav {

	*height: 0;

	a {

		width: 30px;
		height: 30px;
		margin: -20px 0 0;
		display: block;
		background: url(images/bg_direction_nav.png) no-repeat 0 0;
		position: absolute;
		top: 50%;
		z-index: 10;
		cursor: pointer;
		text-indent: -9999px;
		@include opacity( 0 );
		-webkit-transition: all .3s ease;
	}

	.flex-next {

		background-position: 100% 0;
		right: -36px;
	}

	.flex-prev {

		left: -36px;
	}

	.flex-disabled {

		@include opacity( 0.3 );
		cursor: default
	}
}

.flexslider:hover {

	.flex-next {

		@include opacity( 0.8 );
		right: 5px;
	}

	.flex-prev {

		@include opacity( 0.3 );
		left: 5px;
	}

	.flex-next:hover,
	.flex-prev:hover {

		@include opacity( 1 );
	}
}

/* Control Nav */
.flex-control-nav {

	width: 100%;
	position: absolute;
	bottom: -40px;
	text-align: center;

	li {

		margin: 0 6px;
		display: inline-block;
		zoom: 1;
		*display: inline;
	}
}

.flex-control-paging {

	li {

		a {

			width: 11px;
			height: 11px;
			display: block;
			background: #666;
			background: rgba(0,0,0,0.5);
			cursor: pointer;
			text-indent: -9999px;
			@include border-radius( 20px );
			box-shadow: inset 0 0 3px rgba(0,0,0,0.3);

			&:hover {

				background: #333;
				background: rgba(0,0,0,0.7);
			}

			&.flex-active {

				background: #000;
				background: rgba(0,0,0,0.9);
				cursor: default;
			}
		}
	}
}

.flex-control-thumbs {

	margin: 5px 0 0;
	position: static;
	overflow: hidden;

	li {

		width: 25%;
		float: left;
		margin: 0;
	}

	img {

		width: 100%;
		display: block;
		@include opacity( 0.7 );
		cursor: pointer;

		&:hover {

			@include opacity( 1 );
		}
	}

	.flex-active {

		@include opacity( 1 );
		cursor: default;
	}
}


@media screen and (max-width: 860px) {

	.flex-direction-nav {

		.flex-prev {

			@include opacity( 1 );
			left: 0;
		}

		.flex-next {

			@include opacity( 1 );
			right: 0;
		}
	}
}