diff options
| author | Petr Vobornik <pvoborni@redhat.com> | 2014-02-27 18:21:05 +0100 |
|---|---|---|
| committer | Petr Vobornik <pvoborni@redhat.com> | 2014-03-20 08:57:42 +0100 |
| commit | fddb2212bc3394068ba0cd6aebbfcf2e77cb6def (patch) | |
| tree | 891556c9c078d553cc463dd963fa41e8213c081e /install/ui/less | |
| parent | c82c598163996997570807827e02de11ca541c94 (diff) | |
| download | freeipa-fddb2212bc3394068ba0cd6aebbfcf2e77cb6def.tar.gz freeipa-fddb2212bc3394068ba0cd6aebbfcf2e77cb6def.tar.xz freeipa-fddb2212bc3394068ba0cd6aebbfcf2e77cb6def.zip | |
webui-css: improve radio,checkbox keyboard support and color
checkboxes and radio buttons:
- do not change color on hover when disabled
- are focusable and checkable be keyboard again. This uses a little
trick where the real checkbox is hidden under the artificial
checkbox. That way it has the same position and therefore it
works even in containers with overflow set.
https://fedorahosted.org/freeipa/ticket/4217
Reviewed-By: Adam Misnyovszki <amisnyov@redhat.com>
Diffstat (limited to 'install/ui/less')
| -rw-r--r-- | install/ui/less/forms-override.less | 40 |
1 files changed, 32 insertions, 8 deletions
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 { |