From: Samuel Guimarães <sguimaraes943(a)gmail.com&gt; Form elements with "display: none;" are ignored by tab, arrow keys and jquery .focus() event. This commit fixes wok-radio and wok-checkbox by changing the opacity to 0 instead of hiding the input fields. Signed-off-by: samhenri <sguimaraes943(a)gmail.com&gt; --- ui/css/src/modules/_wok-forms.scss | 9 ++++++- ui/css/wok.css | 55 ++++++++++++++++++++++++++++++-------- 2 files changed, 52 insertions(+), 12 deletions(-) diff --git a/ui/css/src/modules/_wok-forms.scss b/ui/css/src/modules/_wok-forms.scss index ff348c2..7a7029b 100644 --- a/ui/css/src/modules/_wok-forms.scss +++ b/ui/css/src/modules/_wok-forms.scss @@ -31,7 +31,9 @@ label { // Custom check-boxes and radios input[type=checkbox].wok-checkbox, input[type=radio].wok-radio { - display: none; + opacity: 0; + position: absolute; + top: 0; } input[type=checkbox].wok-checkbox + label:before, @@ -60,6 +62,11 @@ input[type=radio].wok-radio:checked + label:before { letter-spacing: 5px; } +input[type=radio].wok-radio:focus + label:before, +input[type=radio].wok-checkbox:focus + label:before { + text-shadow: 0px 0px 5px $input-border-focus; +} + input[type=radio].wok-checkbox + label, input[type=radio].wok-radio + label { cursor: pointer; diff --git a/ui/css/wok.css b/ui/css/wok.css index 16679ff..602229e 100644 --- a/ui/css/wok.css +++ b/ui/css/wok.css @@ -221,7 +221,8 @@ border-color: #008abf; } -.btn-login:focus, .btn-login.focus { +.btn-login:focus, +.btn-login.focus { color: #fff; background-color: #00658c; border-color: #002e40; @@ -233,14 +234,20 @@ border-color: #005e82; } -.btn-login:active, .btn-login.active, +.btn-login:active, +.btn-login.active, .open > .btn-login.dropdown-toggle { color: #fff; background-color: #00658c; border-color: #005e82; } -.btn-login:active:hover, .btn-login:active:focus, .btn-login:active.focus, .btn-login.active:hover, .btn-login.active:focus, .btn-login.active.focus, +.btn-login:active:hover, +.btn-login:active:focus, +.btn-login:active.focus, +.btn-login.active:hover, +.btn-login.active:focus, +.btn-login.active.focus, .open > .btn-login.dropdown-toggle:hover, .open > .btn-login.dropdown-toggle:focus, .open > .btn-login.dropdown-toggle.focus { @@ -249,12 +256,24 @@ border-color: #002e40; } -.btn-login:active, .btn-login.active, +.btn-login:active, +.btn-login.active, .open > .btn-login.dropdown-toggle { background-image: none; } -.btn-login.disabled, .btn-login.disabled:hover, .btn-login.disabled:focus, .btn-login.disabled.focus, .btn-login.disabled:active, .btn-login.disabled.active, .btn-login[disabled], .btn-login[disabled]:hover, .btn-login[disabled]:focus, .btn-login[disabled].focus, .btn-login[disabled]:active, .btn-login[disabled].active, +.btn-login.disabled, +.btn-login.disabled:hover, +.btn-login.disabled:focus, +.btn-login.disabled.focus, +.btn-login.disabled:active, +.btn-login.disabled.active, +.btn-login[disabled], +.btn-login[disabled]:hover, +.btn-login[disabled]:focus, +.btn-login[disabled].focus, +.btn-login[disabled]:active, +.btn-login[disabled].active, fieldset[disabled] .btn-login, fieldset[disabled] .btn-login:hover, fieldset[disabled] .btn-login:focus, @@ -340,7 +359,8 @@ fieldset[disabled] .btn-login.active { line-height: 2em; } -.menu-flat.dropup, .menu-flat.dropdown { +.menu-flat.dropup, +.menu-flat.dropdown { position: relative; } @@ -421,13 +441,16 @@ fieldset[disabled] .btn-login.active { display: inline-block; } -.menu-flat .dropdown-menu > li > a:hover, .menu-flat .dropdown-menu > li > a:focus { +.menu-flat .dropdown-menu > li > a:hover, +.menu-flat .dropdown-menu > li > a:focus { text-decoration: none; color: #fff; background-color: #3a393b; } -.menu-flat .dropdown-menu > .active > a, .menu-flat .dropdown-menu > .active > a:hover, .menu-flat .dropdown-menu > .active > a:focus { +.menu-flat .dropdown-menu > .active > a, +.menu-flat .dropdown-menu > .active > a:hover, +.menu-flat .dropdown-menu > .active > a:focus { color: #fff; text-decoration: none; outline: 0; @@ -444,11 +467,14 @@ fieldset[disabled] .btn-login.active { background-color: #3a393b; } -.menu-flat .dropdown-menu > .disabled > a, .menu-flat .dropdown-menu > .disabled > a:hover, .menu-flat .dropdown-menu > .disabled > a:focus { +.menu-flat .dropdown-menu > .disabled > a, +.menu-flat .dropdown-menu > .disabled > a:hover, +.menu-flat .dropdown-menu > .disabled > a:focus { color: #999; } -.menu-flat .dropdown-menu > .disabled > a:hover, .menu-flat .dropdown-menu > .disabled > a:focus { +.menu-flat .dropdown-menu > .disabled > a:hover, +.menu-flat .dropdown-menu > .disabled > a:focus { text-decoration: none; background-color: transparent; background-image: none; @@ -781,7 +807,9 @@ label { input[type=checkbox].wok-checkbox, input[type=radio].wok-radio { - display: none; + opacity: 0; + position: absolute; + top: 0; } input[type=checkbox].wok-checkbox + label:before, @@ -810,6 +838,11 @@ input[type=radio].wok-radio:checked + label:before { letter-spacing: 5px; } +input[type=radio].wok-radio:focus + label:before, +input[type=radio].wok-checkbox:focus + label:before { + text-shadow: 0px 0px 5px #66afe9; +} + input[type=radio].wok-checkbox + label, input[type=radio].wok-radio + label { cursor: pointer; -- 1.9.3