<a href="#" class="checkbox checkbox--link ">
<svg class="checkbox__icon">
<use xlink:href="/images/icons-sprite.svg#checked"></use>
</svg>
<span class="checkbox__label">
Checkbox link
</span>
</a>
<a href="{{href}}" class="checkbox checkbox--link {{class}}">
<svg class="checkbox__icon" {{{ iconAttributes }}}>
<use xlink:href="{{ svg 'checked' }}"></use>
</svg>
<span class="checkbox__label" {{{ labelAttributes }}}>
{{ label.text }}
</span>
</a>
{
"id": "checkbox",
"name": "checkbox-name",
"label": {
"text": "Checkbox link",
"class": ""
},
"icon": {
"class": ""
},
"input": {
"class": ""
},
"class": "",
"href": "#"
}
.checkbox {
position: relative;
&--link {
display: flex;
text-decoration: none;
margin: 5px;
color: $gray-dark;
&:hover,
&:focus {
text-decoration: none;
}
}
&--link-checked {
display: block;
.checkbox__icon {
opacity: 1;
}
.checkbox__label:before {
background-color: transparent;
border: none;
}
}
&__field {
position: absolute;
top: 8px;
left: 0;
opacity: 0;
&:checked + .checkbox__icon {
opacity: 1;
}
&:checked ~ .checkbox__label:before {
background-color: transparent;
border: none;
}
&:focus ~ .checkbox__label {
@include focus();
}
}
&_input {
width: 17px;
height: 17px;
}
& span {
display: inline-block;
margin-left: 5px;
line-height: $font-line-height;
cursor: pointer;
font-family: $font-family-saira;
}
&__label {
display: block;
margin: 0;
padding: $spacer 26px;
line-height: $font-line-height;
cursor: pointer;
font-family: $font-family-saira;
&:before {
content: '';
position: absolute;
top: 8px;
left: 0;
width: 18px;
height: 18px;
background-color: $form-checkbox-background-color;
border: $form-checkbox-border;
border-radius: $border-radius;
}
}
&__icon {
position: absolute;
top: 8px;
left: 0;
width: 18px;
height: 18px;
fill: $color-primary;
background: $white;
cursor: pointer;
opacity: 0;
transition: $transition-base;
}
}
There are no notes for this item.