META-INF.resources.asset.ajaxjs-ui.less.widgets.carousel.less Maven / Gradle / Ivy

Go to download

Show more of this group Show more artifacts with this name
Show all versions of ajaxjs-web Show documentation

AJAXJS Web aims to full-stack, not only the server-side framework, but also integrates the front-end library. It's written in HTML5 + Java, a successor to the JVM platform, efficient, secure, stable, cross-platform and many other advantages, but it abandoned the traditional enterprise architecture brought about by the large and bloated, emphasizing the lightweight, and fast, very suitable for the Internet fast application.

There is a newer version: 1.3.0

Show newest version

.aj-carousel-base {
	overflow: hidden;
	header ul {
		overflow: hidden;
		li {
			float: left;
			text-align: center;
			cursor: pointer;
		}
	}

	& > div {
		white-space: nowrap;
		.fixTransitionFlash;
		.leftFx;
		transition: transform 400ms linear;
		& > div {
			white-space: normal;
			float: left;
			min-height: 10px;
		}
	}
}

.aj-carousel {
	.aj-carousel-base;
	header li {
//		width: 33.3%;
	}

	margin: 0 auto;
	width: 100%;
	max-width: 700px;
	& > div > div {
		overflow: hidden;
		padding: 10px;
		box-sizing: border-box;
	}

	&.aj-carousel-tab {
		& > div > div {
			background-color: #E7E7E7;
		}
	
		header li {
			border-top: 3px solid transparent;
			&.active {
				border-color: #0084C9 #9A9A9A #9A9A9A;
				border-top-color: #0084C9;
				color: #0084C9;
				background-color: #E7E7E7;
			}
		}
	}

	&.aj-banner {
		position: relative;
		overflow: hidden;
		min-height: 140px;
		& > div > div {
			padding: 0;
			img {
				width: 100%;
			}
		}

		header {
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			z-index: 99999;
			li {
				background-color: rgba(0, 0, 0, 0.5);
				width: 100%;
				height: 25px;
				color: white;
				letter-spacing: 3px;
			}
		}

		ol {
			background: -webkit-gradient(linear, 100% 0, 200 0, from(#222), to(rgba(0, 0, 0, 0)));
			width: 100%;
			margin: 0;
			padding: 0;
			height: 18px;
			line-height: 25px;
			position: absolute;
			bottom: 0;
			left: 0;
			text-align: right;
			li {
				list-style-type: none;
				height: 5px;
				width: 5px;
				display: inline-block;
				margin: 6px 3px;
				color: white;
				text-indent: 99em;
				background: rgba(255, 255, 255, .5);
				cursor: pointer;
				border-radius: 50%;
				&:last-child {
				}

				&.active {
					background: white;
				}
			}
		}
	}
}

@media screen and (min-width: 330px) {
	aj-banner {
		max-height: 180px;
	}
}

@media screen and (min-width: 480px) {
	.aj-banner {
//		max-height: 280px;
	}
}