keystone/admin/public/styles/auth.less

Web Application Framework and Admin GUI / Content Management System built on Express.js and Mongoose

//
// Auth
// ==============================





// Variables
// ------------------------------

@gutter-width:          30px;

// Layout
// ------------------------------

.auth-wrapper {
	margin: 0 auto;
	max-width: 600px;
	padding-top: 20px;
	width: 90%;

	@media (min-width: @screen-sm) {
		margin: -160px 0 0 -300px;
		position: absolute;
		left: 50%;
		top: 40%;
	}
	@media (max-width: @screen-xs-max) {
		padding-bottom: @gutter-width;

		.Alert--placeholder {
			display: none;
		}
	}
}




// Body
// ------------------------------
.auth-box {
	.box-shadow( 0 2px 1px darken(@body-bg, 3.5%) );
	background-color: white;
	border-radius: @border-radius-base;
	border: 1px solid darken(@body-bg, 6.5%);
	border-bottom-color: darken(@body-bg, 11.5%);
	margin-bottom: 2em;
	padding: @gutter-width;
}

// shake when there's errors
.auth-box--has-errors {
	animation: shake 0.5s 0.25s 1;
	-webkit-animation: shake 0.5s 0.25s 1;
}




// Footer
// ------------------------------
.auth-footer {
	color: @gray-light;
	font-size: .85em;
	text-align: center;

	> a {
		color: darken(@gray-light, 15%);

		&:hover {
			color: @gray;
		}
	}
}




// Signin Form
// ------------------------------

.auth-box__inner {
	&:extend(.u-clearfix all);
	margin-left:  ceil((@grid-gutter-width / -2));
	margin-right: floor((@grid-gutter-width / -2));
}
.auth-box__col {
	min-height: 1px;
	padding-left:  (@grid-gutter-width / 2);
	padding-right: (@grid-gutter-width / 2);
	position: relative;

	@media (min-width: @screen-sm-min) {
		float: left;
		width: 50%;
	}
}
.auth-box__brand {
	line-height: 1;
	text-align: center;

	img { max-width: 100%; }

	@media (min-width: @screen-sm) {
		// background-color: @body-bg;
		border-right: 1px solid @gray-lighter;
		min-height: 185px;
		line-height: 185px;
		padding-right: @gutter-width;
	}
	@media (max-width: @screen-xs-max) {
		border-bottom: 1px solid @gray-lighter;
		margin-bottom: @gutter-width;
		padding-bottom: @gutter-width;
	}
}
.auth-box__brand__logo {
	display: inline;
}

// fields
.form-control {
	border-top-color: darken(@input-border-color, 13.5%);
	-webkit-appearance: none;

	&:focus {
		@shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 3px 1px fade(@link-color, 25%);
		.box-shadow( @shadow );
		border-color: @link-color;
		outline: 0;
	}
}

// alerts
.Alert {
	.animation( fadeIn .4s );
}



// Animations
// ------------------------------

// courtesy of https://github.com/daneden/animate.css

@keyframes shake {
	0%, 100% { transform: translateX(0); }
	20%, 60% { transform: translateX(-10px); }
	40%, 80% { transform: translateX(10px); }
}
@-webkit-keyframes shake {
	0%, 100% { -webkit-transform: translateX(0); }
	20%, 60% { -webkit-transform: translateX(-10px); }
	40%, 80% { -webkit-transform: translateX(10px); }
}