Sutty/trabajo-afectivo
5
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

checkbox-replacement: remove visual focus on click

Browse source
This commit is contained in:
Felix Niklas 2016-03-03 12:16:19 +01:00
parent e253b4cd23
commit 66800ba455
2 changed files with 15 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
app/assets/javascripts/application.js
View file

@ -222,6 +222,17 @@ jQuery.event.special.remove = {
}
};
// checkbox-replacement helper
// native checkbox focus behaviour is the following:
// tab to checkbox: :focus state and focus outline
// click on checkbox: :focus state but no focus outline
$('body').on('click', '.checkbox-replacement, .radio-replacement', function(event){
$(event.currentTarget).find('input').addClass('is-active')
});
$('body').on('blur', '.checkbox-replacement input, .radio-replacement input', function(){
$(this).removeClass('is-active')
});
// start application
jQuery(function(){
new App.Run();

8
app/assets/stylesheets/zammad.scss
View file

@ -993,10 +993,10 @@ th.align-right {
display: none;
}
.checkbox-replacement input:focus ~ .icon-checked,
.checkbox-replacement input:focus ~ .icon-unchecked,
.radio-replacement input:focus ~ .icon-checked,
.radio-replacement input:focus ~ .icon-unchecked, {
.checkbox-replacement input:focus:not(.is-active) ~ .icon-checked,
.checkbox-replacement input:focus:not(.is-active) ~ .icon-unchecked,
.radio-replacement input:focus:not(.is-active) ~ .icon-checked,
.radio-replacement input:focus:not(.is-active) ~ .icon-unchecked, {
box-shadow: 0 0 0 2px hsl(201,62%,90%);
color: hsl(200,71%,59%);
}