facetwp checkbox styles

djrmom

{{gist file=”facet.css” lang=”css”}}
/** style checked label differently **/
.facetwp-type-checkboxes .facetwp-checkbox.checked {
color: red;
text-decoration: underline;
font-style: italic;
font-weight: bold;
}

/** basic example of inline row of checkboxes **/
.facetwp-type-checkboxes .facetwp-checkbox {
display: inline-block;
width: 200px;
}

/** hides top level checkbox icon
** widens click area for +/- so that it triggers expand/collapse instead of selecition
**/

.facetwp-type-checkboxes > .facetwp-checkbox {
position: relative;
background-image: none;
padding-left: 0;
}
.facetwp-type-checkboxes > .facetwp-checkbox.checked {
background-image: none;
}

.facetwp-type-checkboxes > .facetwp-checkbox .facetwp-expand {
width: 100%;
position: absolute;
right: 0;
display: block;
top: 0;
text-align: right;
}

/** right aligned checkboxes **/
.facetwp-type-checkboxes .facetwp-checkbox {
background-position-x: right;
padding-right: 20px;
padding-left: 0;
}
{{/gist}}