IntenseWebs/freeipa
3
0
Fork 0
mirror of https://salsa.debian.org/freeipa-team/freeipa.git synced 2025-02-25 18:55:28 -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
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 // This file contains overrides of reference RCUE implementation to comply
// with IPA design // 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 */ /* Checkboxes and Radios */
input[type="checkbox"], input[type="checkbox"],
input[type="radio"] { input[type="radio"] {
@@ -31,71 +38,73 @@ input[type="radio"] {
input[type="checkbox"] + label, input[type="checkbox"] + label,
input[type="radio"] + label { input[type="radio"] + label {
display: inline-block; display: inline-block;
margin: 4px; padding: 0;
padding: 0 24px; margin: 0;
background-repeat: no-repeat;
background-position: center left; &:before {
.fa;
font-size: 125%;
vertical-align: -11%;
margin-right: 5px;
}
} }
input[type="checkbox"].standalone + label, input[type="checkbox"].standalone + label,
input[type="radio"].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 { input[type="checkbox"] + label {
background-image: url('../img/checkbutton-background.png');
&:before {
color: @checkbox-color;
} }
input[type="checkbox"]:hover + label { &:hover:before {
background-image: url('../img/checkbutton-background-hover.png'); color: @checkbox-hover-color;
} }
input[type="checkbox"]:checked + label {
background-image: url('../img/checkbutton-background-selected.png');
} }
input[type="radio"]:disabled + label,
input[type="checkbox"]: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 { input[type="checkbox"] + label:before {
background-image: url('../img/checkbutton-background-selected-disabled.png'); content: "@{fa-var-square-o} ";
} }
input[type="radio"] + label { input[type="checkbox"]:checked + label:before {
background-image: url('../img/radiobutton-background.png'); content: "@{fa-var-check-square-o} ";
color: @checkbox-selected-color;
} }
input[type="radio"]:hover + label { input[type="radio"] + label:before {
background-image: url('../img/radiobutton-background-hover.png'); content: @fa-var-circle-o;
} }
input[type="radio"]:checked + label { input[type="radio"]:checked + label:before {
background-image: url('../img/radiobutton-background-selected.png'); content: @fa-var-dot-circle-o;
color: @checkbox-selected-color;
} }
input[type="radio"]:disabled + label { input[type="radio"]:disabled + label {
background-image: url('../img/radiobutton-background-disabled.png'); color: @checkbox-disabled-color;
}
input[type="radio"]:checked:disabled + label {
background-image: url('../img/radiobutton-background-selected-disabled.png');
} }
.form-horizontal { .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 { .controls {
.link-btn { .link-btn {

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

@@ -54,7 +54,7 @@ var exp = {};
* @member IPA * @member IPA
* @property {number} * @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. * 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); }).appendTo(container);
option.label_node = $('<label/>', { option.label_node = $('<label/>', {
html: option.label || '&nbsp;', html: option.label || '',
title: option.tooltip || that.tooltip, title: option.tooltip || that.tooltip,
'for': id 'for': id
}).appendTo(container); }).appendTo(container);
@@ -1556,7 +1556,7 @@ IPA.standalone_option = function(spec, container, label) {
if (!label) { if (!label) {
input.addClass('standalone'); input.addClass('standalone');
label = '&nbsp;'; label = '';
} }
var label_el = $('<label/>', { var label_el = $('<label/>', {