client/app/assets/stylesheets/aleut/components/_components.checkbox.scss
/*------------------------------------*\
#CHECKBOX
\*------------------------------------*/
/**
* Checkbox input component
*
* Works for rform checkboxes, which set the 'checked' class to a span, and
* for Devise checkboxes which have no span.
*/
.c-checkbox {
label {
display: inline-block;
cursor: pointer;
position: relative;
padding-left: 35px;
user-select: none;
}
label:before {
content:"";
display: inline-block;
width: 26px;
height: 26px;
position: absolute;
left: 0;
top: -1px;
border: 1px solid $gray;
border-radius: 20px;
}
input[type=checkbox] {
display: none;
}
span.checked + label:before, input[type=checkbox]:checked + label:before {
font-family: FontAwesome;
content: "\f00c";
font-size: 18px;
color: $primary-color;
text-align: center;
line-height: 25px;
}
}
.c-checkbox--small {
label {
padding-left: 29px;
}
label:before {
width: 22px;
height: 22px;
top: -3px;
}
span.checked + label:before, input[type=checkbox]:checked + label:before {
font-size: 15px;
line-height: 21px;
}
}