<div class="c-checkbox">
<input class="c-checkbox__input" id="checkbox-id-1" type="checkbox">
<label class="c-checkbox__label" for="checkbox-id-1">
<span class="c-checkbox__text">Checkbox label</span>
</label>
</div>
<div class="c-checkbox{% if modifier is defined %} {{ modifier }}{% endif %}">
<input
class="c-checkbox__input"
id="{{ input.id }}"
type="checkbox"
{% if input.checked == true %}checked{% endif %}
{% if input.required is defined and input.required %}required{% endif %}
>
<label class="c-checkbox__label" for="{{ input.id }}">
{% if label.text %}
<span class="c-checkbox__text">{{ label.text|raw }}</span>
{% endif %}
</label>
</div>
{
"input": {
"name": "checkbox-example",
"id": "checkbox-id-1"
},
"label": {
"text": "Checkbox label"
}
}
.c-checkbox__input {
position: absolute;
overflow: hidden;
clip: rect(0 0 0 0);
height: 1px;
width: 1px;
margin: -1px;
padding: 0;
border: 0;
}
.c-checkbox__label {
position: relative;
cursor: pointer;
padding: 0;
color: useHSL(--base-100);
display: inline-flex;
align-items: center;
&:before {
content: '';
margin-right: 10px;
display: inline-block;
vertical-align: text-top;
width: remify(24px);
height: remify(24px);
aspect-ratio: 1 / 1;
background-color: useHSL(--base-100);
box-shadow: inset 0 0 0 remify(1px) useHSL(--primary-100);
}
}
.c-checkbox__input:focus ~ .c-checkbox__label:before {
@include outline;
}
.c-checkbox__input:checked ~ .c-checkbox__label:before {
background-color: useHSL(--accent-100);
box-shadow: none;
}
.c-checkbox__input:checked ~ .c-checkbox__label:after {
content: '';
position: absolute;
left: remify(6px);
// top: remify(11px);
background-color: useHSL(--base-100);
width: remify(3px);
height: remify(3px);
box-shadow:
remify(2px) 0 0 useHSL(--base-100),
remify(4px) 0 0 useHSL(--base-100),
remify(4px) remify(-2px) 0 useHSL(--base-100),
remify(4px) remify(-4px) 0 useHSL(--base-100),
remify(4px) remify(-6px) 0 useHSL(--base-100),
remify(4px) remify(-8px) 0 useHSL(--base-100);
transform: rotate(45deg);
}
.c-checkbox__text {
@include font-scale(level-2, $font-secondary);
color: useHSL(--primary-100);
a {
color: useHSL(--primary-100);
@include font-scale(level-2, $font-secondary, bold);
}
}
No notes defined.