IntenseWebs/freeipa
3
0
Fork 0
mirror of https://salsa.debian.org/freeipa-team/freeipa.git synced 2024-12-25 08:21:05 -06:00
Code Issues Packages Projects Releases Wiki Activity

Font awesome glyphs as checkboxes and radios

Browse Source 
https://fedorahosted.org/freeipa/ticket/3904
This commit is contained in:
Petr Vobornik 2013-11-06 16:58:12 +01:00 committed by Martin Kosek
parent 0f1a756eae
commit 2bfe2b8c51
2 changed files with 54 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

83
install/ui/less/forms-override.less
View File

@ -22,6 +22,13 @@
// 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"] {
@ -31,71 +38,73 @@ input[type="radio"] {
input[type="checkbox"] + label,
input[type="radio"] + label {
display: inline-block;
margin: 4px;
padding: 0 24px;
background-repeat: no-repeat;
background-position: center left;
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;
&:before {
margin-right: 0px;
}
}
input[type="radio"] + label,
input[type="checkbox"] + label {
background-image: url('../img/checkbutton-background.png');
&:before {
color: @checkbox-color;
}
input[type="checkbox"]:hover + label {
background-image: url('../img/checkbutton-background-hover.png');
}
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;
&:before,
&:hover:before {
color: @checkbox-disabled-color;
}
}
input[type="checkbox"]:checked:disabled + label {
background-image: url('../img/checkbutton-background-selected-disabled.png');
input[type="checkbox"] + label:before {
content: "@{fa-var-square-o} ";
}
input[type="radio"] + label {
background-image: url('../img/radiobutton-background.png');
input[type="checkbox"]:checked + label:before {
content: "@{fa-var-check-square-o} ";
color: @checkbox-selected-color;
}
input[type="radio"]:hover + label {
background-image: url('../img/radiobutton-background-hover.png');
input[type="radio"] + label:before {
content: @fa-var-circle-o;
}
input[type="radio"]:checked + label {
background-image: url('../img/radiobutton-background-selected.png');
input[type="radio"]:checked + label:before {
content: @fa-var-dot-circle-o;
color: @checkbox-selected-color;
}
input[type="radio"]:disabled + label {
background-image: url('../img/radiobutton-background-disabled.png');
}
input[type="radio"]:checked:disabled + label {
background-image: url('../img/radiobutton-background-selected-disabled.png');
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 {

6
install/ui/src/freeipa/widget.js
View File

@ -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/>', {