Flexslider SCSS

_flexslider.scss

/******************************************************************
Site Name:
Author:

Stylesheet: Flexslider Stylesheet

******************************************************************/

// Resets
.flex-container,
.flex-slider {
	a:hover {
		outline: none;
	}
}

.flexslider .slides,
.flexslider .slides > li,
.flex-control-nav,
.flex-direction-nav {
	margin: 0;
	padding: 0;
	list-style: none;
	
	li {
		margin: 0;
		padding: 0;
	}
}

.flex-pauseplay span {
	text-transform: capitalize;
}

// Base Styles
.flexslider {
	margin: 0;
	padding: 0;
	clear: both;

	.slides > li {
  		display: none;
  		-webkit-backface-visibility: hidden;
	}
	
	.slides {
		&:after {
			content: "";
			display: block;
			clear: both;
			visibility: hidden;
			line-height: 0;
			height: 0;
		}
		
		li {
			position: relative;
		}
		
		img {
			width: 100%;
			display: block;
		}
	}
}

html[xmlns] .flexslider .slides {
	display: block;
}

* html .flexslider .slides {
	height: 1%;
}

.no-js .flexslider .slides > li:first-child {
	display: block;
	-webkit-backface-visibility: visible;
}

// Defaults
.flexslider {
	padding-bottom: 40px;
	position: relative;
	zoom: 1;
	
	.slides {
		zoom: 1;
		
		img {
			height: auto;
			-moz-user-select: none;
		}
	}
	
	&:hover {
		.flex-prev,
		.flex-next {
			opacity: 0.7;
			
			&:hover {
				opacity: 1;
			}
		}
		
		.flex-prev {
			left: 10px;
		}
		
		.flex-next {
			right: 10px;
		}
	}
}

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

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

.carousel li {
	margin-right: 5px;
}

.flex-direction-nav {
	*height: 0;

	a {
		text-decoration: none;
		display: block;
		width: 40px;
		height: 40px;
		margin: -20px 0 0;
		position: absolute;
		top: 50%;
		z-index: 10;
		overflow: hidden;
		cursor: pointer;
		color: rgba(0, 0, 0, 0.8);
		text-indent: -9999px;
		opacity: 0;
		@include transition(all 0.3s ease);
		
		&:before {
			font-family: "FontAwesome";
			font-size: 40px;
			display: inline-block;
		}
		
		&.flex-next {
			right: -50px;
			text-align: right;
			
			&:before {
  				content: "\f138"; //chevron circle right
			}
		}
		
		&.flex-prev {
			left: -50px;
			
			&:before {
				content: "\f137"; // chevron circle left
			}
		}
	}
	
	.flex-disabled {
		opacity: 0 !important;
		filter: alpha(opacity=0);
		cursor: default;
		z-index: -1;
	}
}

.flex-pauseplay {
	a {
		display: block;
		width: 20px;
		height: 20px;
		position: absolute;
		bottom: 5px;
		left: 10px;
		opacity: 0.8;
		z-index: 10;
		overflow: hidden;
		cursor: pointer;
		color: #000;
	
		&:before {
			font-family: "FontAwesome";
			font-size: 20px;
			display: inline-block;
			content: '\f04c';
		}
		
		&:hover {
			opacity: 1;
		}
		
		&.flex-play {
			&:before {
				content: '\f04b';
			}
		}
	}
}

.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 {
	height: 15px;
	bottom: 10px;
	
	li {
		a {
			width: 15px;
			height: 15px;
			display: block;
			border: 1px solid #FFF;
			background: none;
			cursor: pointer;
			text-indent: -9999px;
			@include border-radius(20px);
			
			&:hover {
				background: #FFF;
  				background: rgba(255, 255, 255, 0.7);
			}
			
			&.flex-active {
				background: $color__link;
				border-color: $color__link;
  				cursor: default;
			}
		}
	}
}

.flex-control-thumbs {
	margin: 5px 0 0;
	position: static;
	overflow: hidden;
	
	li {
		width: 25%;
		float: left;
  		margin: 0;
	}
	
	img {
		width: 100%;
		height: auto;
		display: block;
		opacity: 0.7;
		cursor: pointer;
		-moz-user-select: none;
		@include transition(all 1s ease);
		
		&:hover {
			opacity: 1;
		}
	}
	
	.flex-active {
  		opacity: 1;
  		cursor: default;
	}
}

// Responsive
@media only screen and (min-width: $screen-sm-min) {
	
	.flex-direction-nav {
		.flex-prev { 
			opacity: 1; 
			left: 10px;
		}

		.flex-next { 
			opacity: 1; 
			right: 10px;
		}
	}
	
}