Sha256: 0c60ef4edefa686e547369c1baf3070943493f78d2dd650e810a1df51fc8108b
Contents?: true
Size: 1.65 KB
Versions: 34
Compression:
Stored size: 1.65 KB
Contents
/*------------------------------------*\
#CHECKBOX
\*------------------------------------*/
$checkbox-size: $spacing-unit * 2 !default;
$checkbox-bg-color: $white !default;
$checkbox-border-color: $off-black !default;
$checkbox-bg-color-active: $blue !default;
$checkbox-border-radius: 3px !default;
$checkbox-icon-color: $white !default;
$checkbox-icon-size: 16px !default;
.checkbox {
display: inline-block;
}
.checkbox--indeterminate {}
/**
* Actual input hidden off page
*/
.checkbox__input {
@extend %visually-hidden;
}
/**
* Default UI State
* 1. Icon
*/
.checkbox__label {
position: relative;
display: inline-block;
width: $checkbox-size;
height: $checkbox-size;
background-color: $checkbox-bg-color;
border-radius: $checkbox-border-radius;
box-shadow: 0 0 0 1px $checkbox-border-color;
appearance: none;
vertical-align: middle;
font-size: 0;
&::after { /* [1] */
@include center;
display: inline-block;
font-weight: bold;
font-size: $checkbox-icon-size;
color: $checkbox-icon-color;
}
}
/**
* Checked UI State
* 1. Icon
*/
.checkbox__input:checked ~ .checkbox__label {
background-color: $checkbox-bg-color-active;
&::after { /* [1] */
content: '✔';
}
}
/**
* Indeterminate UI State
* 1. Icon
*/
.checkbox--indeterminate .checkbox__label {
background-color: $checkbox-bg-color-active;
&::after { /* [1] */
content: '–';
}
}
Version data entries
34 entries across 34 versions & 1 rubygems