vpn.email/bower_components/metro/less/carousel.less

vpn.email client

@import (once) "vars";
@import (once) "typography";
@import (once) "utils";

.carousel {
	display: block;
	width: 100%;
	position: relative;
	min-height: 100px;
	overflow: hidden;

	.slide {
		top: 0;
		left: 0;
		position: absolute;
		display: block;
		width: 100%;
		height: 100%;
		min-height: 100%;
		.clear-float;
	}

	[class*="carousel-switch"], .carousel-bullets {
		position: absolute;
		display: block;
		z-index: @zindexDropdown - 1;
        .no-user-select;
	}

	.carousel-bullets {
		left: 0;
		right: 0;
		bottom: .625rem;

		.align-center;

		.carousel-bullet {
			display: inline-block;
			float: none;
			width: .625rem;
			height: .625rem;
			background-color: #ababab;
			box-shadow: none;
			border-radius: 50%;
			margin-right: .625rem;
			cursor: pointer;
			border: 1px @white solid;

			&:last-child {
				margin-right: 0;
			}

			&.bullet-on {
				background-color: @lightCyan;
			}

			&:hover {
			}
		}
	}

	&.square-bullets {
		.carousel-bullet {
			border-radius: 0 ;
		}
	}

	.carousel-switch-next, .carousel-switch-prev {
		width: auto;
		line-height: 4rem;
		height: 4rem;
		text-decoration: none;
		margin-top: -2rem;
		top: 50%;
		font-size: 4rem;
		font-weight: 300;
		color: @grayLighter;
		cursor: pointer;
		vertical-align: middle;
		padding: 0;

		&:hover {
			color: @white;
			.text-shadow;
		}

		img {
			max-width: 64px;
			max-height: 64px;
		}
	}

	.carousel-switch-next {
		right: 0;
		left: auto;
	}

	.carousel-switch-prev {
		left: 0;
		right: auto;
	}
}