Font awesome glyphs as checkboxes and radios

https://fedorahosted.org/freeipa/ticket/3904

2 files changed, 52 insertions, 43 deletions

diff --git a/install/ui/less/forms-override.less b/install/ui/less/forms-override.less
index 7c356a576..4c3d2162d 100644
--- a/install/ui/less/forms-override.less
+++ b/install/ui/less/forms-override.less
@@ -22,80 +22,89 @@
 // This file contains overrides of reference RCUE implementation to comply
 // with IPA design
 
+
+// variables
+@checkbox-color: darken(#b7b7b7, 20%);
+@checkbox-disabled-color: #d2d2d2;
+@checkbox-hover-color: #64b0db;
+@checkbox-selected-color: darken(@checkbox-hover-color, 20%);
+
 /* Checkboxes and Radios */
 input[type="checkbox"],
 input[type="radio"] {
-  display: none;
+    display: none;
 }
 
 input[type="checkbox"] + label,
 input[type="radio"] + label {
-  display: inline-block;
-  margin: 4px;
-  padding: 0 24px;
-  background-repeat: no-repeat;
-  background-position: center left;
+    display: inline-block;
+    padding: 0;
+    margin: 0;
+
+    &:before {
+        .fa;
+
+        font-size: 125%;
+        vertical-align: -11%;
+        margin-right: 5px;
+    }
 }
 
 input[type="checkbox"].standalone + label,
 input[type="radio"].standalone + label {
-  padding: 0;
-  width: 13px;
+    width: 13px;
+
+    &:before {
+        margin-right: 0px;
+    }
 }
 
+input[type="radio"] + label,
 input[type="checkbox"] + label {
-  background-image: url('../img/checkbutton-background.png');
-}
 
-input[type="checkbox"]:hover + label {
-  background-image: url('../img/checkbutton-background-hover.png');
-}
+    &:before {
+        color: @checkbox-color;
+    }
 
-input[type="checkbox"]:checked + label {
-  background-image: url('../img/checkbutton-background-selected.png');
+    &:hover:before {
+        color: @checkbox-hover-color;
+    }
 }
 
+input[type="radio"]:disabled + label,
 input[type="checkbox"]:disabled + label {
-  background-image: url('../img/checkbutton-background-disabled.png');
-}
+    color: @checkbox-disabled-color;
 
-input[type="checkbox"]:checked:disabled + label {
-  background-image: url('../img/checkbutton-background-selected-disabled.png');
+    &:before,
+    &:hover:before {
+        color: @checkbox-disabled-color;
+    }
 }
 
-input[type="radio"] + label {
-  background-image: url('../img/radiobutton-background.png');
+input[type="checkbox"] + label:before {
+    content: "@{fa-var-square-o} ";
 }
 
-input[type="radio"]:hover + label {
-  background-image: url('../img/radiobutton-background-hover.png');
+input[type="checkbox"]:checked + label:before {
+    content: "@{fa-var-check-square-o} ";
+    color: @checkbox-selected-color;
 }
 
-input[type="radio"]:checked + label {
-  background-image: url('../img/radiobutton-background-selected.png');
+input[type="radio"] + label:before {
+    content: @fa-var-circle-o;
 }
 
-input[type="radio"]:disabled + label {
-  background-image: url('../img/radiobutton-background-disabled.png');
+input[type="radio"]:checked + label:before {
+    content: @fa-var-dot-circle-o;
+    color: @checkbox-selected-color;
 }
 
-input[type="radio"]:checked:disabled + label {
-  background-image: url('../img/radiobutton-background-selected-disabled.png');
+input[type="radio"]:disabled + label {
+    color: @checkbox-disabled-color;
 }
 
 .form-horizontal {
 
-    // lower radio's label width to keep it aligned with other labels when
-    // radio is part of form label
-    .control-label {
-        input[type="checkbox"] + label,
-        input[type="radio"] + label {
-            width: 144px;
-            padding: 0 0 0 16px;
-            margin: 0;
-        }
-    }
-
     .controls {
 
         .link-btn {
diff --git a/install/ui/src/freeipa/widget.js b/install/ui/src/freeipa/widget.js
index c39f3326c..28a068bfb 100644
--- a/install/ui/src/freeipa/widget.js
+++ b/install/ui/src/freeipa/widget.js
@@ -54,7 +54,7 @@ var exp = {};
  * @member IPA
  * @property {number}
  */
-IPA.checkbox_column_width = 22;
+IPA.checkbox_column_width = 13;
 
 /**
  * String to show next to required fields to indicate that the field is required.
@@ -1169,7 +1169,7 @@ IPA.option_widget_base = function(spec, that) {
         }).appendTo(container);
 
         option.label_node =  $('<label/>', {
-            html: option.label || '&nbsp;',
+            html: option.label || '',
             title: option.tooltip || that.tooltip,
             'for': id
         }).appendTo(container);
@@ -1556,7 +1556,7 @@ IPA.standalone_option = function(spec, container, label) {
 
     if (!label) {
         input.addClass('standalone');
-        label = '&nbsp;';
+        label = '';
     }
 
     var label_el = $('<label/>', {