sportsbet-mobile/client/style/login.import.less

Sportsbet mobile

.login {

	.btn {
		text-align: center;
		width: 100%;
	}

	.navbar {

		nav {
			display: none;
		}
		.navbar-header {
			border-bottom: 2px solid #ADEC4D;
		}
	}

	.modal-dialog {
		width: 100%;
		background: #fff;
		margin: 0px auto;
		height: calc(~"100vh - 92px");
	}

	.modal-header {
		padding: 15px;
		border-bottom: none;
		min-height: 16.42857143px;
		height: 100px;
		z-index: 9;
		position: relative;
	}

	.modal-body {
		position: relative;
		max-height: 100%;
		padding: 30px 1%;
		overflow-y: auto;
		padding-bottom: 20px;
	}

	.modal-content {
		background: url('/images/login.jpg') no-repeat top center;
		zoom: 0.7;
		&.forgot {
			background: none;
			.modal-header {
				background: #63B600;
				font-size: 30px;
				text-align: center;
				vertical-align: middle;
				color: #FFF;
				text-transform: uppercase;
				font-weight: bold;
			}
			.no-results {
				padding: 60px;
			}
		}
	}

	.modal-footer {
		padding: 15px;
		padding-top: 2px;
		text-align: center;
		border-top: none;
		background: #fff;

		a {
			display: block;
			margin-top: 25px;
			color: #444444;
			text-decoration: underline;
			margin-bottom: 15px;
			font-size: 21px;
		}

	}

	.separator {
		height: 10px;
	}

	.input-group {
		position: relative;
		display: table;
		border-collapse: separate;
		width: 95%;
		margin: 0px auto;

		i {
			margin-left: 10px;
			font-size: 16px;
		}

		.icon {
			width: 40px;
			height: 40px;
			background: url("/images/icons.png") no-repeat -3px -679px #89c331;
			display: inline-block;
			float: left;
			-webkit-border-radius: 3px;
			-moz-border-radius: 3px;
			border-radius: 3px;
			margin-right: 2%;
			position: absolute;
			left: 0;

			&.password {
				background-position-y: -719px;
			}
			&.google {
				background-position-y: -759px;
			}
			&.email {
				background-position-y: -802px;
				background-position-x: -5px;
			}
			&.date {
				background-position-y: -842px;
				background-position-x: -4px;
			}
			&.referal {
				background-position-y: -884px;
				background-position-x: -5px;
			}
		}

		.control, .bootstrap-select button, select {
			width: 86%;
			display: inline-block;
			-webkit-border-radius: 3px;
			-moz-border-radius: 3px;
			border-radius: 3px;
			border: 1px solid #ccc;
			height: 40px;
			background: #aeaead;
			color: #444444;
			text-align: left;
			-webkit-box-shadow: inset 0px 8px 5px -1px rgba(0, 0, 0, 0.75);
			-moz-box-shadow: inset 0px 8px 5px -1px rgba(0, 0, 0, 0.75);
			box-shadow: inset 0px 8px 5px -1px rgba(0, 0, 0, 0.15);
			font-size: 14px;
			padding: 0px 2% 0px 2%;
			line-height: 30px;
			position: relative;
			margin-top: -1px;
			margin-left: 10%;
			margin-bottom: 0px;

			&.pwd {
				width: 80%;
			}


		}

		.select-holder {
			float: left;
			width: 87%;

			.bootstrap-select {
				width: 100%;
			}

			select {
				width: 104%;
				margin-left: 12%;
				margin-bottom: 11px;
			}

		}

	}

	.fade {
		background: rgba(5, 8, 0, 0.59);
	}

}

/* Base for label styling */

//[type="checkbox"]:not(:checked),
//[type="checkbox"]:checked {
//	position: absolute;
//	left: -9999px;
//}
//
//[type="checkbox"]:not(:checked) + label, [type="checkbox"]:checked + label {
//	position: relative;
//	padding-left: 45px;
//	cursor: pointer;
//	margin-left: 2px;
//}

/* checkbox aspect */

//[type="checkbox"]:not(:checked) + label:before, [type="checkbox"]:checked + label:before {
//	content: '';
//	position: absolute;
//	left: 0;
//	top: -9px;
//	width: 37px;
//	height: 37px;
//	background: #000000;
//	box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
//	-webkit-border-radius: 50px;
//	-moz-border-radius: 50px;
//	border-radius: 50px;
//}
//
///* checked mark aspect */
//
//[type="checkbox"]:not(:checked) + label:after, [type="checkbox"]:checked + label:after {
//	content: '';
//	background: url("/images/icons.png") no-repeat -11px -653px;
//	position: absolute;
//	top: 2px;
//	left: 4px;
//	font-size: 18px;
//	line-height: 0.8;
//	color: #09ad7e;
//	transition: all .2s;
//	height: 20px;
//	width: 30px;
//}

/* checked mark aspect changes */

//[type="checkbox"]:not(:checked) + label:after {
//	opacity: 0;
//	transform: scale(0);
//}
//
//[type="checkbox"]:checked + label:after {
//	opacity: 1;
//	transform: scale(1);
//}
//
///* disabled checkbox */
//
//[type="checkbox"]:disabled:not(:checked) + label:before,
//[type="checkbox"]:disabled:checked + label:before {
//	box-shadow: none;
//	border-color: #bbb;
//	background-color: #ddd;
//}
//
//[type="checkbox"]:disabled:checked + label:after {
//	color: #999;
//}
//
//[type="checkbox"]:disabled + label {
//	color: #aaa;
//}
//
///* accessibility */
//
//[type="checkbox"]:checked:focus + label:before,
//[type="checkbox"]:not(:checked):focus + label:before {
//	border: 1px dotted blue;
//}
//
///* hover style just for information */
//
//label:hover:before {
//	border: 1px solid #4778d9 !important;
//}
//
//[type="checkbox"]:not(:checked) + label:after {
//	//opacity: 1;
//	transform: scale(1);
//	display: block;
//}

.collapsed:after {
	display: none !important;
}

.register {

	.square-holder {
		margin-top: 5px;
		margin-bottom: 5px;
	}

	.squaredOne {
		margin-left: 6vw;
	}

	.square-label {
		width: 100vw;
		label {
			font-size: 12px;
		}
	}

	//[type="checkbox"]:not(:checked) + label:after {
	//	opacity: 0;
	//	transform: scale(0);
	//	display: block;
	//}

	.btn.green.disabled {
		pointer-events: none;
		opacity: 0.5;
	}

}

.register {

	.modal-content {
		background: none;
	}
	.modal-body {
		padding-top: 0px;
	}
	.modal-body:before {
		content: '';
		background: url('/images/register.jpg') no-repeat top center;
		padding-top: 100px;
		display: block;
		height: 28px;
		margin-left: -10px;
		margin-right: -10px;
	}

	label {
		display: block;
		margin-bottom: 5px;
		//width: 350px;
	}
	label[for="terms"]:before {
		top: -10px !important;
	}

	.modal-header {
		display: none;
	}

	.input-group {
		margin: 5px auto;
		&.checkbox {
			margin: 14px auto;
		}
	}

	//[type="checkbox"]:not(:checked) + label:before, [type="checkbox"]:checked + label:before {
	//	left: 0;
	//	top: 0px;
	//}
	//
	//[type="checkbox"]:not(:checked) + label:after, [type="checkbox"]:checked + label:after {
	//	top: 11px;
	//	left: 4px;
	//}

	.modal-body {
		padding-bottom: 0px;
	}

}

.generalError {
	border: solid 1px red;
	border-radius: 3px;
	background: lightcoral;
	padding: 8px;
	margin-left: 13px;
	margin-bottom: 5px;
	margin-right: 10px;
	color: #FFF;
	display: none;
}

.error {
	border: solid 1px red;
	border-radius: 3px;
	background: lightcoral;
	padding: 8px;
	margin-left: 13px;
	margin-bottom: 5px;
	margin-right: 10px;
	color: #FFF;
	font-size: 18px;
	text-align: left;
	line-height: 24px;
}