There are no notes for this item.
<div class="control control--checkbox checkbox checkbox--partial">
<input type="checkbox" id="checkbox3" class="jsPartial">
<label for="checkbox3" class="control__name">Partial</label>
<div class="control__indicator"></div>
</div>
<script>
var inputs = document.getElementsByClassName("jsPartial");
for (var i = 0; i < inputs.length; i++) {
inputs[i].indeterminate = true;
}
</script>
/*------------------------------------*\
#CHECKBOX
\*------------------------------------*/
// Basic control styles
.control {
position: relative;
}
// Hide default browser input
.control input {
position: absolute;
z-index: -2;
opacity: 0;
}
.control__name {
display: block;
padding-left: 30px;
}
// Pointer-clicker when not disabled
input:not([disabled]) ~ label {
cursor: pointer;
}
// Custom control
.control__indicator {
position: absolute;
left: 0;
top: 2px;
height: 13px;
width: 13px;
background-color: $background-default;
border-radius: 3px;
border: 1px solid $border-form;
z-index: -1;
}
// Hide default browser input
.control input:disabled ~ .control__indicator {
background-color: $background-default;
opacity: .5;
pointer-events: none;
}
// Custom control
.control__indicator:after {
content: '';
position: absolute;
display: none; // Hide check
}
// Show check
.control input:checked ~ .control__indicator:after {
display: block;
}
// Checkbox tick
.control--checkbox .control__indicator:after {
left: 4px;
top: -2px;
width: 5px;
height: 12px;
border: solid $border-hover;
border-width: 0 2px 2px 0;
transform: rotate(27deg);
}
// Indeterminate checkbox tick
input:indeterminate ~ .control__indicator:after {
width: 9px;
height: 0;
display: block;
transform: none;
left: 1px;
top: 4px;
border-width: 0 0 3px 0;
}
// Disabled tick colour
.control--checkbox input:disabled ~ .control__indicator:after {
opacity: .5;
}
// Hover + Hover when checked
.control:hover input:not([disabled]) ~ .control__indicator,
.control:hover input:not([disabled]):checked ~ .control__indicator {
border: 1px solid $border-default;
}
// Pressed + Pressed when checked
.control input:not([disabled]):active ~ .control__indicator:after,
.control input:not([disabled]):checked:active ~ .control__indicator:after {
content: '';
width: 7px;
height: 7px;
border-radius: 2px;
border: none;
background-color: $border-active;
left: 2px;
top: 2px;
display: block;
transform: none;
}