[Kimchi-devel] [PATCH] [Wok] Fixed radio and checkbox focus event

[sguimaraes943 at gmail.com]

From: Samuel Guimarães <sguimaraes943 at gmail.com>

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 at gmail.com>
---
 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