diff options
author | Petr Vobornik <pvoborni@redhat.com> | 2013-11-06 16:58:12 +0100 |
---|---|---|
committer | Martin Kosek <mkosek@redhat.com> | 2014-01-21 12:04:04 +0100 |
commit | 2bfe2b8c51d4e6de68b9b4f9e679d2918bcd41eb (patch) | |
tree | d31adf8613dea9ff4e5eaf612212ef2484c65d85 /install | |
parent | 0f1a756eae0d59b6b3db36cbea36602d8ec385b9 (diff) | |
download | freeipa-2bfe2b8c51d4e6de68b9b4f9e679d2918bcd41eb.tar.gz freeipa-2bfe2b8c51d4e6de68b9b4f9e679d2918bcd41eb.tar.xz freeipa-2bfe2b8c51d4e6de68b9b4f9e679d2918bcd41eb.zip |
Font awesome glyphs as checkboxes and radios
https://fedorahosted.org/freeipa/ticket/3904
Diffstat (limited to 'install')
-rw-r--r-- | install/ui/less/forms-override.less | 89 | ||||
-rw-r--r-- | install/ui/src/freeipa/widget.js | 6 |
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 || ' ', + 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 = ' '; + label = ''; } var label_el = $('<label/>', { |