<!-- Default -->
<div class="checkbox ">
<input type="checkbox" id="checkbox" name="checkbox-name" class="checkbox__field ">
<svg class="checkbox__icon ">
<use xlink:href="/images/icons-sprite.svg#checked"></use>
</svg>
<label for="checkbox" class="checkbox__label ">
1 x Sprite Yoga Strap 8 foot
</label>
</div>
<!-- Long Label -->
<div class="checkbox ">
<input type="checkbox" id="checkbox-long-label" name="checkbox-name" class="checkbox__field ">
<svg class="checkbox__icon ">
<use xlink:href="/images/icons-sprite.svg#checked"></use>
</svg>
<label for="checkbox-long-label" class="checkbox__label ">
I hereby agree for processing my personal data, included in my job offer, for the purpose of recruitment (as defined in the Act of August 29, 1997 on the Protection of Personal Data (Journal of Laws No. 133, item 883).
</label>
</div>
<!-- Link -->
<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>
<!-- Default -->
<div class="checkbox {{ class }}">
<input type="checkbox"
id="{{ id }}"
name="{{ name }}"
class="checkbox__field {{ input.class }}"
>
<svg class="checkbox__icon {{ icon.class }}">
<use xlink:href="{{ svg 'checked' }}"></use>
</svg>
<label for="{{ id }}" class="checkbox__label {{ label.class }}">
{{{ label.text }}}
</label>
</div>
<!-- Long Label -->
<div class="checkbox {{ class }}">
<input type="checkbox"
id="{{ id }}"
name="{{ name }}"
class="checkbox__field {{ input.class }}"
>
<svg class="checkbox__icon {{ icon.class }}">
<use xlink:href="{{ svg 'checked' }}"></use>
</svg>
<label for="{{ id }}" class="checkbox__label {{ label.class }}">
{{{ label.text }}}
</label>
</div>
<!-- Link -->
<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>
/* Default */
{
"id": "checkbox",
"name": "checkbox-name",
"label": {
"text": "Checkbox field",
"class": ""
},
"icon": {
"class": ""
},
"input": {
"class": ""
}
}
/* Long Label */
{
"id": "checkbox-long-label",
"name": "checkbox-name",
"label": {
"text": "I hereby agree for processing my personal data, included in my job offer, for the purpose of recruitment (as defined in the Act of August 29, 1997 on the Protection of Personal Data (Journal of Laws No. 133, item 883).",
"class": ""
},
"icon": {
"class": ""
},
"input": {
"class": ""
}
}
/* Link */
{
"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.