<a href="#" class="checkbox checkbox--link ">
<svg class="
checkbox__icon
checkbox__icon--checked
" role="presentation">
<use xlink:href="/images/icons-sprite.svg#checked"></use>
</svg>
<svg class="
checkbox__icon
checkbox__icon--unchecked
" role="presentation">
<use xlink:href="/images/icons-sprite.svg#unchecked"></use>
</svg>
<span class="checkbox__label">
Checkbox link
</span>
</a>
<a
href="{{href}}"
class="checkbox checkbox--link {{class}}"
>
<svg
class="
checkbox__icon
checkbox__icon--checked
{{ iconChecked.class }}
"
role="presentation"
>
<use xlink:href="{{ svg 'checked' }}"></use>
</svg>
<svg
class="
checkbox__icon
checkbox__icon--unchecked
{{ iconUnchecked.class }}
"
role="presentation"
>
<use xlink:href="{{ svg 'unchecked' }}"></use>
</svg>
<span class="checkbox__label" {{{ labelAttributes }}}>
{{ label.text }}
</span>
</a>
{
"id": "checkbox",
"name": "checkbox-name",
"attributes": "",
"label": {
"text": "Checkbox link",
"class": ""
},
"iconChecked": {
"class": ""
},
"iconUnchecked": {
"class": ""
},
"input": {
"class": ""
},
"class": "",
"href": "#"
}
$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__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-display : block !default;
$checkbox__before-content : '' !default;
$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;
@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;
}
.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;
}
}
&__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__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;
}
}
There are no notes for this item.