<div class="checkbox ">
<input type="checkbox" id="checkbox-long-label" name="checkbox-long-label-name" class="checkbox__field ">
<svg class="
checkbox__icon
checkbox__icon--checked
" role="presentation">
<use href="/images/icons-sprite.svg#checked"></use>
</svg>
<svg class="
checkbox__icon
checkbox__icon--unchecked
" role="presentation">
<use href="/images/icons-sprite.svg#unchecked"></use>
</svg>
<label for="checkbox-long-label" class="checkbox__label ">
<span class="checkbox__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).
</span>
</label>
</div>
<div class="checkbox {{ class }}">
<input
type="checkbox"
id="{{ id }}"
name="{{ name }}"
class="checkbox__field {{ input.class }}"
{{{ attributes }}}
>
<svg
class="
checkbox__icon
checkbox__icon--checked
{{ iconChecked.class }}
"
role="presentation"
>
<use href="{{ svg 'checked' }}"></use>
</svg>
<svg
class="
checkbox__icon
checkbox__icon--unchecked
{{ iconUnchecked.class }}
"
role="presentation"
>
<use href="{{ svg 'unchecked' }}"></use>
</svg>
<label
for="{{ id }}"
class="checkbox__label {{ label.class }}"
>
<span class="checkbox__text">
{{{ label.text }}}
</span>
</label>
</div>
{
"id": "checkbox-long-label",
"name": "checkbox-long-label-name",
"attributes": "",
"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": ""
},
"iconChecked": {
"class": ""
},
"iconUnchecked": {
"class": ""
},
"input": {
"class": ""
}
}
$checkbox__line-height : $font-line-height !default;
$checkbox__top : 50% !default;
$checkbox__left : 0 !default;
$checkbox__transform : translateY(-$checkbox__top) !default;
$checkbox__label-margin : 0 !default;
$checkbox__label-padding : $spacer--small 0 $spacer--small $spacer--large !default;
$checkbox__label-color : $color-secondary !default;
$checkbox__label-color--active : $color-primary !default;
$checkbox__label-font-size : $font-size-base !default;
$checkbox__label-text-decoration--no-icon : underline !default;
$checkbox__label-padding-left--no-icon : 0 !default;
$checkbox__icon-transition : $transition-base !default;
$checkbox__icon-size : 24px !default;
$checkbox__icon-fill : $white !default;
$checkbox__label-text-decoration-active--link: none !default;
$checkbox__color--link : $color-secondary !default;
$checkbox__text-width : calc(100% - #{$spacer--large}) !default;
// active
$checkbox__transition : all 0.5s ease-in-out !default;
// before used in active state
$checkbox__before-size : 20px !default;
$checkbox__before-position-left : 2px !default;
$checkbox__before-position-top : $checkbox__top !default;
$checkbox__before-border-radius : 2px !default;
$checkbox__before-background : $color-primary !default;
$checkbox__before-transform : scaleX(0) translateY(-$checkbox__top) !default;
$checkbox__before-transform-origin : 0 50% !default;
$checkbox__before-transform-hover : scaleX(1) translateY(-$checkbox__top) !default;
// error
$checkbox__error-bottom : -#{$spacer} !default;
$checkbox__link-inner-text-decoration : underline !default;
// disabled
$checkbox__field-background--disabled : $gray !default;
@import 'checkbox-variables';
.checkbox {
position: relative;
&--link {
display: block;
text-decoration: none;
color: $checkbox__color--link;
&:hover {
text-decoration: $checkbox__label-text-decoration-active--link;
}
&.focus-visible {
@include focus();
background-color: transparent;
text-decoration: $checkbox__label-text-decoration-active--link;
}
}
&--link-checked {
display: block;
.checkbox__label {
color: $checkbox__label-color--active;
&:after {
transform: $checkbox__before-transform-hover;
}
}
.checkbox__icon--checked {
opacity: 1;
}
}
&__label {
position: relative;
display: flex;
flex-flow: row nowrap;
height: auto;
width: 100%;
margin: $checkbox__label-margin;
padding: $checkbox__label-padding;
line-height: $checkbox__line-height;
color: $checkbox__label-color;
font-size: $checkbox__label-font-size;
cursor: pointer;
&:after {
content: '';
display: block;
position: absolute;
top: $checkbox__before-position-top;
left: $checkbox__before-position-left;
width: $checkbox__before-size;
height: $checkbox__before-size;
border-radius: $checkbox__before-border-radius;
background-color: $checkbox__before-background;
transform: $checkbox__before-transform;
transform-origin: $checkbox__before-transform-origin;
transition: $checkbox__transition;
}
&--no-icon {
padding-left: $checkbox__label-padding-left--no-icon;
text-decoration: $checkbox__label-text-decoration--no-icon;
&:after {
display: none;
}
}
a {
text-decoration: $checkbox__link-inner-text-decoration;
}
}
&__icon {
position: absolute;
top: $checkbox__top;
left: $checkbox__left;
transform: $checkbox__transform;
width: $checkbox__icon-size;
height: $checkbox__icon-size;
opacity: 1;
transition: $checkbox__icon-transition;
fill: $checkbox__icon-fill;
cursor: pointer;
&--checked {
opacity: 0;
z-index: 1;
}
}
&__field {
position: absolute;
top: $checkbox__top;
left: $checkbox__left;
transform: $checkbox__transform;
width: $checkbox__icon-size;
height: $checkbox__icon-size;
z-index: $z-index-normal;
opacity: 0;
cursor: pointer;
&:checked {
&.checkbox__field--disabled {
& ~ .checkbox__label {
&:after {
background-color: $checkbox__field-background--disabled;
}
}
}
}
&:checked ~ .checkbox__icon--checked {
opacity: 1;
}
&:checked ~ .checkbox__label {
color: $checkbox__label-color--active;
&:after {
transform: $checkbox__before-transform-hover;
}
}
&.focus-visible ~ .checkbox__label {
@include focus();
}
}
&__text {
width: $checkbox__text-width;
}
.mage-error {
position: absolute;
bottom: $checkbox__error-bottom;
}
&.amgdpr-checkbox {
margin-bottom: $spacer;
}
}
No notes defined.