CSS – Checkbox instead of slider for user controls

In August 2022, Ex Libris added the ability to include/exclude full text matches in CDI, including the option to enable user control of this facet, using a slider instead of the checkbox used for other facets. The user control to select/de-select the Expand My Results facet was also changed to a slider at this time.

The following CSS from Corinna Baksik at Harvard Library (Primo BO) will replace the default sliders with checkboxes. (Also works for for Primo VE, see Buffalo.)

/*        FACETS          */
/* BEGIN FULL TEXT SWITCH (toggle for search inside fulltext CDI) */
prm-facet .switch-results {
    transition:none;
}
prm-facet .switch-results md-switch .md-bar,
prm-facet .switch-results md-switch.md-checked .md-bar {
    background-color:transparent;
}
prm-facet .switch-results md-switch.md-checked .md-thumb {
    color:#fff;
    background-color:#848484;
    border: 1px solid #848484;
    border-radius: 4px;
    padding: 9px;
    top:-3px;
    margin-left: -11px;
}
prm-facet .switch-results md-switch .md-thumb {
    color:#fff;
    background-color:#FFF;
    border: 1px solid #848484;
    border-radius: 4px;
    padding: 9px;
    top:-3px;
    margin-left: 1px;
}
prm-facet .switch-results md-switch:hover .md-bar,
prm-facet .switch-results md-switch:focus .md-bar,
prm-facet .switch-results md-switch:hover.md-checked .md-bar,
prm-facet .switch-results md-switch:focus.md-checked .md-bar {
    color:#000!important;
    opacity:0;
}
prm-facet .switch-results md-switch:hover.md-checked .md-thumb,
prm-facet .switch-results md-switch:focus.md-checked .md-thumb {
    color:#848484!important; 
}

prm-facet .switch-results md-switch .md-thumb:before {
    content:"X";
    font-size: 19px;
    font-weight: bold;
    top: -3px;
    left: 3px;
    transition:none;
}
prm-facet .switch-results md-switch.md-checked .md-thumb:before {
    content:"✓";
    font-size: 19px;
    font-weight: bold;
    top: -3px;
    left: 3px;
    transition:none;
}
md-switch:not(.md-dragging) .md-bar, 
md-switch:not(.md-dragging) .md-thumb,
md-switch:not(.md-dragging) .md-thumb-container {
    transition:none;
}
prm-facet .switch-results md-switch .md-label,
prm-facet .switch-results md-switch.md-checked .md-label {
    color:#3a3a3a;
    font-weight:600;
    font-size:14.25px;
    font-family:"Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
    border-radius:4px;
    padding-right:8px;
}
prm-facet .switch-results md-switch:hover .md-label,
prm-facet .switch-results md-switch:focus .md-label {
    color: #FFF;
}
prm-facet .switch-results md-switch:hover,
prm-facet .switch-results md-switch:focus,
prm-facet .switch-results md-switch:hover.active,
prm-facet .switch-results md-switch:focus.active {
    background-color:#1e1e1e;
    border-radius:4px;
} 
prm-facet .switch-results md-switch.active:hover:not([disabled]),
prm-facet .switch-results md-switch.active:focus:not([disabled]) {
    background-color:#1e1e1e;
} 
/* END FULL TEXT SWITCH  */

3.2.2023