From a099059f2e1e2cba48a0c099c18602dd02733cd6 Mon Sep 17 00:00:00 2001
From: Godwin <goodgodwin@hotmail.com>
Date: Mon, 13 Jun 2016 17:28:45 -0700
Subject: [PATCH] Fixed labels on inputs when autosomplete is used

---
 app/assets/javascripts/main.js           | 22 +++++++++++++--------
 app/assets/stylesheets/_application.scss | 25 +++++++++++++++---------
 2 files changed, 30 insertions(+), 17 deletions(-)

diff --git a/app/assets/javascripts/main.js b/app/assets/javascripts/main.js
index 2c6c800..c9655db 100644
--- a/app/assets/javascripts/main.js
+++ b/app/assets/javascripts/main.js
@@ -18,19 +18,25 @@
 			field.classList[input.value ? 'remove' : 'add']('empty');
 		}
 		positionLabel(input);
-		input.addEventListener('keyup', function(event) { positionLabel(event.target); });
-		input.addEventListener('blur', function(event) { field.classList.remove('focused'); });
-		input.addEventListener('focus', function(event) { field.classList.add('focused'); });
+		input.addEventListener('keyup', function(event) {
+			positionLabel(event.target);
+		});
+		input.addEventListener('blur', function(event) {
+			positionLabel(event.target);
+			field.classList.remove('focused');
+		});
+		input.addEventListener('focus', function(event) {
+			field.classList.add('focused');
+		});
 	});
 	var body = document.querySelector('body');
 	var primaryContent = document.getElementById('primary-content');
 	var overlay = document.getElementById('content-overlay');
 	primaryContent.addEventListener('keydown', function(event) {
-		event.stopPropagation();
-		return false;
-		//if (body.classList.contains('has-overlay')) {
-		//	return false;
-		//}
+		if (body.classList.contains('has-overlay')) {
+			event.stopPropagation();
+			return false;
+		}
 	});
 	document.addEventListener('focus', function(event) {
 		if (overlay.querySelector('.dlg.open') && !overlay.querySelector('.dlg.open :focus')) {
diff --git a/app/assets/stylesheets/_application.scss b/app/assets/stylesheets/_application.scss
index 183675d..cd218b4 100644
--- a/app/assets/stylesheets/_application.scss
+++ b/app/assets/stylesheets/_application.scss
@@ -2333,19 +2333,26 @@ html[data-lingua-franca-example="html"] {
 }
 
 @include breakpoint(medium) {
-	html[data-input="kb"] {
-		:focus,
-		input[type="submit"]:focus,
-		.check-box-field input:focus + label,
-		.radio-button-field input:focus + label,
-		.select-field select:focus,
-		.workshop-link:focus .title,
-		#main-nav .nav a:focus .title {
-			outline: 0.25rem solid rgba($colour-2, 0.5);
+	:focus,
+	input[type="submit"]:focus,
+	.check-box-field input:focus + label,
+	.radio-button-field input:focus + label,
+	.select-field select:focus,
+	.workshop-link:focus .title,
+	#main-nav .nav a:focus .title {
+		html & {
+			outline: 0.25rem solid rgba($colour-2, 0);
 			outline-offset: 0.2rem;
+			@include _(transition, outline 150ms ease-in-out);
+		}
+
+		html[data-input="kb"] & {
+			outline: 0.25rem solid rgba($colour-2, 0.5);
 			z-index: 1;
 		}
+	}
 
+	html[data-input="kb"] {
 		#main-nav .logo:focus {
 			outline-offset: -0.2em;
 		}