landmark-serve/public/styles/auth.less

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

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





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

// needed so the included bootstrap components don't break
@import "bootstrap/variables.less";

// reset variables here
@brand-primary:         #348dd9;
@body-bg:               #fafafa;
@gutter-width:          30px;



// Imports
// ------------------------------
@import "bootstrap/mixins.less";
@import "bootstrap/normalize.less";
@import "bootstrap/scaffolding.less";
@import "bootstrap/alerts.less";
@import "bootstrap/forms.less";
@import "bootstrap/buttons.less";




// Type
// ------------------------------
h1,h2,h3 {
	margin-top: 0;
}

.lead {
	font-size: 120%;
}


// Layout
// ------------------------------
html {
	height: 100%;
	overflow-y: auto;
}
body {
	background-color: @body-bg;
	height: 100%;
}
.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-body {
	.box-shadow( 0 2px 1px darken(@body-bg, 3.5%) );
	background-color: white;
	border-radius: @border-radius-small;
	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-body.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;
		}
	}
}




// Buttons
// ------------------------------

.btn-primary {
	#gradient .vertical(lighten(@link-color, 4%), darken(@link-color, 4%));
	// border: 0 none;
}




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

.auth-box {
	.make-row(@gutter-width);
}
.auth-box-col {
	.make-sm-column(6,@gutter-width);
}
.auth-box-brand {
	font-weight: 500;
	font-size: 1.25em;
	line-height: 1;
	margin: 0;
	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-logo {
	display: inline;
}

// fields
.form-control {
	border-top-color: darken(@input-border, 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;
	}
}

// toolbar
.toolbar {
	margin-top: 20px;
}

// alerts
.alert {
	padding: 10px;
	text-align: center;
	
	animation: apparate .4s;
	-webkit-animation: apparate .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); }
}

@keyframes apparate {
	0% { opacity: 0; }
	100% { opacity: 1; }
}
@-webkit-keyframes apparate {
	0% { opacity: 0; }
	100% { opacity: 1; }
}