Refactor switch toggles so they can be styled in pure CSS.
In an effort to keep reducing the number of image assets needed for the shell theme, it would be great if the switch toggles were entities that could be styled in CSS, i.e. split the switch entity into the background "trough", the on/off labels, and the sliding "handle" of the switch.
Here's potentially what the css could look like.
// Switch
.toggle-switch {
// trough style
border-radius: 3px;
height: 22px;
width: 64px;
background: darken($bg_color, 10%);
// plus appropriate borders and box-shadow
// label style
font-size: 9px;
text-transform: uppercase;
color: white;
// handle
.toggle-switch-handle {
width: 30px;
height: 20px;
// plus appropriate borders and box-shadow
}
// when the switch is checked/on
&:checked {
background: $selected_bg_color;
// plus appropriate borders and box-shadow
// if we choose to style the handle in this state
.toggle-switch-handle {
}
}
}