TimelineJS/source/less/slider.less

/*
 * Slider
 * 
 * ------------------------------------------------------------------------------------------- */
 



/* SLIDER CONTAINERS 
================================================== */
.slider {
	width:100%;
	height:100%;
	overflow:hidden;
	//-webkit-overflow-scrolling: touch;
	.slider-container-mask {
		text-align: center;
		width:100%;
		height:100%;
		overflow:hidden;
		
		.slider-container {
			position:absolute;
			top:0px;
			left: -2160px;
			
			//overflow:hidden;
			
			width:100%;
			height:100%;
			
			text-align: center;
			
			display:block;

			background-color: @white;
			
			.slider-item-container {
				//overflow:hidden;
				display:table-cell;
				vertical-align:middle;
			}

		}

	}
}

/* SLIDER ELEMENTS
================================================== */
.slider {
	img, embed, object, video, iframe {
		max-width: 100%;
	}
}

/* SLIDER NAV
================================================== */
.slider {
	//position: relative;
	
	.nav-previous, .nav-next {
		position:fixed;
		top: 0px;
		//background-color: #f5f5f5; // TEMP
		width: @feature-nav-width; 
		//height: @feature-nav-height;
		color: #DBDBDB;
		font-size:@base-font-small;
		.nav-container {
			height:100px;
			position:absolute;
		}
		.icon {
			//line-height:@feature-nav-height;
			margin-bottom:@base-space;
		}
		.date {
			//#font > .navigation(bold,@base-font,@base-line);
			#font > .navigation(bold,@base-font,@color-background-dark);
			text-transform: uppercase;
			margin-bottom:5px;
		}
		.date, .title {
			line-height:14px;
			a {
				color: @color-nav-description;
			}
			small {
				display:none;
			}
			
		}
	}
	
	.nav-previous:hover, .nav-next:hover {
		color: @color-dark-second;
		cursor: pointer;
	}
	
	.nav-previous {
		float: left;
		text-align:left;
		
		
		//margin-left: -100%;
		
		.icon {
			margin-left: 10px;
			padding-left: 20px;
			.icon-previous();
		}
		.date, .title {
			text-align:left;
			padding-left:10px;
		}
	}
	
	.nav-previous:hover {
		.icon {
			margin-left: 5px;
			padding-left: 20px;
		}
	}
	
	.nav-next {
		float: right;
		text-align:right;
		
		//margin-left: -@feature-nav-width;
		
		.icon {
			margin-right: 10px;
			padding-right: 20px;
			.icon-next()
		}
		.date, .title {
			text-align:right;
			padding-right:10px;
		}
	}
	
	.nav-next:hover {
		.icon {
			margin-right: 5px;
			padding-right: 20px;
		}
	}
	
	
}


/* SLIDE CONTENT
================================================== */
.slider {
	
	.slider-item {
		//top: 0px;
		position:absolute;
		width:700px;
		height:100%;
		//border: 1px solid #CCC;
		padding:0px;
		margin:0px;
		overflow: hidden;
		//overflow:scroll;
		
		display:table;
		//margin-left: auto;
		//margin-right: auto;
		.content {
			display:table-cell;
			vertical-align:middle;
			
			/* Layouts
			================================================== */
			
			/* All Slides
			================================================== */
			.content-container {
				
				display:table;
				vertical-align:middle;
				
				.text {
					//float: left; 
					//height:100%;
					width:40%;
					max-width:50%;
					min-width:120px;
					display:table-cell;
					vertical-align:middle;
					//overflow:auto;
					.container {
						display:table-cell;
						vertical-align:middle;
						text-align:left;
						padding-right: @base-space;
						//overflow:hidden;
						
					}
					
				}
				.media {
					width:100%;
					min-width:50%;
					float: left;
					
					.media-wrapper {
						margin-left: auto;
						margin-right: auto;
						
						.media-container {
							display:inline-block;
							overflow: hidden;
							line-height:0px;
							padding:0px;
							//max-height:400px;
							img, iframe {
								border: 1px solid @color-line;
								//max-height:350px;
							}
							.credit, .caption {
								font-family: @font-sansserif;

							}
							.credit {
								color: @color-credit;
								text-align: right;
								font-size: 10px;
								line-height: 10px;
								display: block;
								margin: 0 auto;
								margin-top:4px;
							}
							.caption {
								text-align:left;
								margin-top:10px;
								color: @color-caption;
								font-size: 11px;
								line-height: 14px;
							}
						}
						
					}
				}
				.media.text-media {
					.media-wrapper {
						.media-container {
							border: none;
							background-color: @white;
						}
					}
				}
				
				
			}
			
			/* Text Only Slides
			================================================== */
			.content-container.layout-text {
				width:100%;
				.text {
					width:100%;
					max-width:100%;
					//.content-columns(2, @base-space);
					.container {
						display:block;
						vertical-align:middle;
						text-align:left;
						padding:0px;
						width: 60%;
						text-align:left;
						margin-left: auto;
						margin-right: auto;
						
					}
				}
			}

			/* Media Only Slides
			================================================== */
			.content-container.layout-media {
				width:100%;
				.text {
					width:100%;
					height:100%;
					max-width:100%;
					display:block;
					//margin-left:10%;
					text-align:center;
					.container {
						display:block;
						text-align:center;
						width:100%;
						margin-left: none;
						margin-right: none;
					}
				}
				.media {
					width:100%;
					min-width:50%;
					float: none;
					
					.media-wrapper {
						//width:100%;
						display:block;
						//margin-left: none;
						//margin-right: none;
						
						.media-container {
							margin-left: auto;
							margin-right: auto;
							//display:block;
							overflow: hidden;
							line-height:0px;
							padding:0px;
							//max-height:400px;

						}
						
					}
				}
			}


		}
	}
}