diff --git a/install/ui/less/forms-override.less b/install/ui/less/forms-override.less index ac442bb0b..b8c2e5d35 100644 --- a/install/ui/less/forms-override.less +++ b/install/ui/less/forms-override.less @@ -30,9 +30,27 @@ @checkbox-selected-color: darken(@checkbox-hover-color, 20%); /* Checkboxes and Radios */ + +.radio, .checkbox { + position: relative; + padding: 0; +} + input[type="checkbox"], input[type="radio"] { - display: none; + display: inline; + position: absolute; + overflow: hidden; + margin:0; + padding:0; + border:0; + outline:0; + opacity:0; +} + +input[type="checkbox"]:focus + label:before, +input[type="radio"]:focus + label:before { + outline: thin dotted @checkbox-selected-color; } input[type="checkbox"] + label, @@ -45,7 +63,7 @@ input[type="radio"] + label { .fa; font-size: 125%; - vertical-align: -11%; + vertical-align: -7%; margin-right: 5px; } } @@ -81,12 +99,22 @@ input[type="checkbox"]:disabled + label { } } +input[type="radio"]:disabled:checked + label, +input[type="checkbox"]:disabled:checked + label { + color: @checkbox-color; + + &:before, + &:hover:before { + color: @checkbox-color; + } +} + input[type="checkbox"] + label:before { - content: "@{fa-var-square-o} "; + content: @fa-var-square-o; } input[type="checkbox"]:checked + label:before { - content: "@{fa-var-check-square-o} "; + content: @fa-var-check-square-o; color: @checkbox-selected-color; } @@ -99,10 +127,6 @@ input[type="radio"]:checked + label:before { color: @checkbox-selected-color; } -input[type="radio"]:disabled + label { - color: @checkbox-disabled-color; -} - .form-horizontal { .controls { diff --git a/install/ui/src/freeipa/widget.js b/install/ui/src/freeipa/widget.js index 6ee61c658..f3b6c97d7 100644 --- a/install/ui/src/freeipa/widget.js +++ b/install/ui/src/freeipa/widget.js @@ -1166,6 +1166,10 @@ IPA.option_widget_base = function(spec, that) { var id = that._option_next_id + input_name; var enabled = that.enabled && option.enabled; + var opt_cont = $('', { + "class": that.intput_type + }).appendTo(container); + option.input_node = $('', { id: id, type: that.input_type, @@ -1174,13 +1178,13 @@ IPA.option_widget_base = function(spec, that) { value: option.value, title: option.tooltip || that.tooltip, change: that.on_input_change - }).appendTo(container); + }).appendTo(opt_cont); option.label_node = $('