src/forms/checkbox/style.scss
@import "../_variables/variables";
@import "../_mixins/mixins";
label.checkbox {
position: relative;
padding-left: 18px;
}
label.checkbox > input {
box-sizing: border-box;
position: absolute;
z-index: -1;
padding: 0;
opacity: 0;
margin: 0;
}
label.checkbox > .icon {
position: absolute;
top: .2rem;
left: 0;
display: block;
width: 1.4rem;
height: 1.4rem;
line-height:1rem;
text-align: center;
user-select: none;
border-radius: .35rem;
background-repeat: no-repeat;
background-position: center center;
background-size: 50% 50%;
}
label.checkbox:not(.active) > .icon {
background-color: #ddd;
border: 1px solid #bbb;
}
label.checkbox > input:focus ~ .icon {
outline: 0;
border: 1px solid #66afe9;
box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
}
label.checkbox.active > .icon {
background-size: 1rem 1rem;
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNyIgaGVpZ2h0PSI3Ij48cGF0aCBmaWxsPSIjZmZmIiBkPSJtNS43MywwLjUybC0zLjEyNDIyLDMuMzQxNjFsLTEuMzM4OTUsLTEuNDMyMTJsLTEuMjQ5NjksMS4zMzY2NWwyLjU4ODYzLDIuNzY4NzZsNC4zNzM5LC00LjY3ODI2bC0xLjI0OTY5LC0xLjMzNjY1bDAsMGwwLjAwMDAyLDAuMDAwMDF6Ii8+PC9zdmc+);
background-color: $brand-primary;
@include themify($themes) {
background-color: themed('brand-primary');
}
}
label.checkbox.active .btn-default { filter: brightness(75%); }
label.checkbox.disabled,
label.checkbox.readonly,
.btn.readonly {
filter: alpha(opacity=65);
box-shadow: none;
opacity: .65;
}
label.btn > input[type=checkbox] {
position: absolute;
clip: rect(0,0,0,0);
pointer-events: none;
}