Timeline UI, Sprites, and Mixin

mp-timeline.less

@import '../bi.less';

/*==============================
=            Header            =
==============================*/

.mp-header{

	margin-bottom       : 23px;
	padding-left        : 28px;

	.mp-h2{
		font-size     : 32px;
		color         : #273645;
		font-style    : normal;
		text-align    : left;
		font-family   : @facit;
		font-weight   : bold;
	}

	.mp-h4{
		font-size     : 32px;
		color         : #273645;
		font-style    : normal;
		text-align    : left;
		font-family   : @facit;
		font-weight   : 400;
	}

	.flex-row {

		display       : flex;

		.mp-key {
			flex          : 0 0 auto;
			margin        : 20px 20px 20px 0px;
		}
	}


	.mp-key {
		display       : flex;
		color         : #6b6b6a;
	}

	.mp-key .sprite {
		margin        : 0 10px 0 0;
	}

	.mp-header-line{
		padding-top   : 20px;
		border-bottom : 2px solid silver;
		width         : 97%;
		margin-bottom : 20px;
	}


}


/*===============================
=            Sprites            =
===============================*/


.sprite( @x: 0, @y: 0, @width: 0, @height: 0, @margin-left:0,@margin-top:0) {
	background-position: @x @y;
	width: @width;
	height: @height;
	margin-left : @margin-left;
	margin-top  : @margin-top;
}

.sprite {
	background-image  : url(/BIM/resources/images/sprites/sprites.png);
	background-repeat : no-repeat;
	float             : left;

	&.check-o {
		.sprite(0px, -154px, 20px, 20px, 9px, 9px );
	}

	&.circle-o {
		.sprite(-40px ,-154px, 20px, 20px , 9px, 9px);
	}

	&.db-circle-o {
		.sprite(-80px , -154px, 20px, 20px , 9px, 9px);
	}

	&.pencil {
		.sprite(-110px , 0px, 24px, 22px , 8px, 8px);
	}
}



/*================================
=            Timeline            =
================================*/

.tl-row{
	height              : 132px;
}

.tl-box-wrapper {
	width               : 196px;
	height              : 80px;

	.tl-selected {
		width               : 100%;
		height              : 100%;
		border              : 2px solid orange;
		display             : table;
	}
}

.tl-box {
	width               : 100%;
	height              : 100%;
	border              : 1px solid black;
	display             : table;
	position            : relative;
	z-index             : 1;


	.fa {
		color               : #4e90cb;
		font-size           : 20px;
	}
	.scroll-disabled .fa {
		color: #999 !important;
	}

	.num {
		color               : #4e90cb;
		font-size           : 30px;
		font-family         : @adelle;
		font-weight         : bold;
		font-style          : normal;
		text-align          : center;

	}


	// Top
	.tl-top {
		width               : 100%;
		height              : 39px;
		text-align          : center;
		border-right        : 1px solid silver;
		border-bottom       : 1px solid silver;
		text-align          : center;
		font-size           : 12px;
		color               : #4e90cb;
		background-color    : #f9f9f9;

		i {
			margin-top          : 10px;
		}

	}


	// Bottom Box
	.tl-bot {
		width               : 100%;
		height              : 39px;
		vertical-align      : middle;
		text-align          : center;
		border-right        : 1px solid silver;
		text-align          : center;
		font-size           : 12px;
		color               : #4e90cb;
		background-color    : #f9f9f9;


		i{
			margin-top          : 10px;
		}

	}


	// Right
	.tl-right {
		width               : 80%;
		height              : 100%;
		display             : table-cell;
		vertical-align      : middle;
		text-align          : left;
		font-size           : 12px;
		padding-left        : 26px;
		position            : relative;
		z-index             : 1;
		background          : white;

		.tl-text {
			text-align  : left;
			color       : #273645;
			font-size   : 14px;
			font-family : @facit;

		}
	}

}


/*================================
=            Carousel            =
================================*/


.mp-carousel {
	margin-bottom       : 12px;
	overflow            : hidden;
	-ms-overflow-style  : none;

	.mp-arrow-container {
		float               : left;
		width               : 10%;
		position            : relative;
		z-index             : 1;
	}
	.mp-carousel-view-container {
		float               : left;
		width               : 80%;
		padding-right       : 6px;
	}

	@media (min-width   : 992px) {
		.mp-arrow-container {
			width      : 6%;
			position   : relative;
			z-index    : 1;
		}
		.mp-carousel-view-container {
			width               : 88%;
		}
	}

	::-webkit-scrollbar {
		display             : none;
	}

	.mp-arrows {
		width               : 45px;
		border              : 1px solid #273645;
		height              : 45px;
		text-align          : center;
		padding-top         : 6px;
		cursor              : pointer;
		margin-top          : 16px;
		-moz-user-select    : none;
		-ms-user-select     : none;
		-webkit-user-select : none;
		z-index             : 0;
		background-color    : white;

		.fa {
			font-size           : 30px;
			text-align          : center;
		}

	}

	.mp-arrows[disabled] {
		cursor              : not-allowed;
		color               : #999;
		border-color        : #999;
	}


	.mp-carousel-view {
		height              : 82px;
		overflow-x          : scroll;
		overflow            : -moz-scrollbars-none;
		margin              : 0;
		padding             : 0;
	}
	.mp-resource {
		float               : left;
		margin-right        : 20px;
	}
	.mp-resource-icon {
		width               : 100%;
		height              : 90px;
	}
	#mp-carousel-overflow {
		font-size           : 0;
		margin              : 0;
		padding             : 0;
		float               : left;
		position            : relative;
	}
	#mp-carousel-overflow:before {
		content         : '';
		position        : absolute;
		width           : 100%;
		border-top      : 2px dashed #4e92cd;
		height          : 1px;
		top             : 40px;
		z-index         : 1;
		left            : 0;
	}
	#mp-carousel-overflow .mp-resource-label {
		font-size           : 14px;
	}


}


/*===============================
=            General            =
===============================*/


#change-course{
	white-space         : nowrap;
	font-size           : 12px;
	color               : #273645;
	text-align          : center;
	text-decoration     : underline;


}

#mp-book{
	width               : 76px;
	margin-top          : -16px;
}

.vertical-line {
	border-left         : 1px solid #999;
	height              : 111px;
	text-align          : center;
	width               : 2px;
	margin-left         : 45px;
	margin-top          : -16px;
}