bike/BikeBikeBike
1
0
Fork 0
Code Issues 4 Pull Requests Projects Releases Wiki Activity

Fixed labels on inputs when autosomplete is used

Browse Source
This commit is contained in:
Godwin 2016-06-13 17:28:45 -07:00
parent 2b156269f9
commit a099059f2e
2 changed files with 31 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
app/assets/javascripts/main.js
View File

@ -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')) {

27
app/assets/stylesheets/_application.scss
View File

@ -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;
z-index: 1;
@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;
}