259973dd06
Horizon checkboxes were using a standard checkbox. Unfortunately, this type of checkbox is only customizable through Chrome, and even then, its not completely flexible. The default checkboxes have now been altered to allow for a highly customized experience through the use of CSS pseudo elements and Icon Fonts. This allows the color, size and unselected and selected states of the checkbox to be customized. The 'default' theme uses the standard Font Awesome checked and unchecked icons. The 'material' now uses the Material Design checkbox design. It was also noticed (and fixed) that the help-icon on the forms were not the same color as its corresponding text. Partially-Implements: blueprint horizon-theme-css-reorg Change-Id: I52602357d831a5e978fe6916b37b0cde9edb2b9b
39 lines
841 B
SCSS
39 lines
841 B
SCSS
@import '/horizon/lib/font-awesome/scss/variables';
|
|
@import '/horizon/lib/font-awesome/scss/mixins';
|
|
|
|
//
|
|
// Checkboxes
|
|
// This will ONLY work when the label's 'for' attribute
|
|
// shares the input[type=checkbox]'s 'id' value
|
|
// --------------------------------------------------
|
|
|
|
.themable-checkbox {
|
|
|
|
// Hide the real checkbox
|
|
input[type=checkbox] {
|
|
display:none;
|
|
|
|
// The checkbox - Unchecked
|
|
& + label {
|
|
margin-bottom: 0; // remove the Bootstrap margin
|
|
|
|
&:before {
|
|
@include fa-icon();
|
|
content: $fa-var-square-o;
|
|
width: 1em;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
& > span {
|
|
padding-left: $padding-small-vertical;
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
|
|
// The checkbox - Checked
|
|
&:checked + label:before {
|
|
content: $fa-var-check-square-o;
|
|
}
|
|
}
|
|
}
|