<div class="bundle-option ">
<h4 class="bundle-option__title">
Sprite Yoga Strap
</h4>
<div class="checkbox ">
<input type="checkbox" id="checkbox-1" name="checkbox-name-1" class="checkbox__field ">
<svg class="checkbox__icon ">
<use xlink:href="/images/icons-sprite.svg#checked"></use>
</svg>
<label for="checkbox-1" class="checkbox__label ">
1 x Sprite Yoga Strap 6 foot
</label>
</div>
<div class="checkbox ">
<input type="checkbox" id="checkbox-2" name="checkbox-name-2" class="checkbox__field ">
<svg class="checkbox__icon ">
<use xlink:href="/images/icons-sprite.svg#checked"></use>
</svg>
<label for="checkbox-2" class="checkbox__label ">
1 x Sprite Yoga Strap 8 foot
</label>
</div>
</div>
<div class="bundle-option {{ class }}" {{{ attributes }}}>
{{#if title}}
<{{{title.tag}}} class="bundle-option__title">
{{ title.message }}
</{{{title.tag}}}>
{{/if}}
{{#each checkboxes }}
{{ render '@checkbox' this merge=true }}
{{/each}}
{{#if qty }}
{{ render '@input' qty merge=true }}
{{/if}}
</div>
{
"title": {
"tag": "h4",
"message": "Sprite Yoga Strap"
},
"qty": false,
"radio": {
"legend": false,
"class": "bundle-option__radio",
"options": [
{
"id": "id1",
"label": "Sprite Stasis Ball 55 cm"
},
{
"id": "id2",
"label": "Sprite Stasis Ball 65 cm"
},
{
"id": "id3",
"label": "Sprite Stasis Ball 75 cm"
}
]
},
"checkboxes": [
{
"id": "checkbox-1",
"name": "checkbox-name-1",
"label": {
"text": "1 x Sprite Yoga Strap 6 foot"
}
},
{
"id": "checkbox-2",
"name": "checkbox-name-2",
"label": {
"text": "1 x Sprite Yoga Strap 8 foot"
}
}
]
}
$bundle-option__title-margin : 24px 0 $spacer !default;
$bundle-option__title-color--required : $red !default;
$bundle-option__title-font-weight--required: $font-weight-normal !default;
$bundle-option__label-margin : 0 !default;
$bundle-option__radio-margin-bottom : $spacer !default;
$bundle-option__select-max-width : 100% !default;
$bundle-option__select-margin-bottom : $spacer--medium !default;
$bundle-option__select-background : $form-select-background--gray !default;
$bundle-option__select-z-index : 50 !default;
$bundle-option__qty-margin-bottom : 16px !default;
$bundle-option__qty-input-max-width : 100px !default;
$bundle-option__qty-input-margin-left : $spacer !default;
$bundle-option__qty-input-color--disabled : $gray !default;
$bundle-option__qty-input-cursor--disabled : default !default;
.bundle-option {
&__title {
margin: $bundle-option__title-margin;
&--required {
&:after {
content: '*';
color: $bundle-option__title-color--required;
font-weight: $bundle-option__title-font-weight--required;
}
}
}
&__radio {
margin-bottom: $spacer;
}
&__select {
max-width: $bundle-option__select-max-width;
margin-bottom: $bundle-option__select-margin-bottom;
.select__field {
height: 40px;
padding: 0 2rem 0 0.5rem;
&-list--single {
border: none;
}
&-item {
overflow: hidden;
}
}
.choices__list--dropdown {
display: none;
&.is-active {
display: block;
position: absolute;
width: $bundle-option__select-max-width;
background: $bundle-option__select-background;
z-index: $bundle-option__select-z-index;
}
}
}
&__qty {
display: flex;
align-items: center;
margin-bottom: $bundle-option__qty-margin-bottom;
justify-content: space-between;
}
&__label {
margin: $bundle-option__label-margin;
}
&__qty-input {
max-width: $bundle-option__qty-input-max-width;
margin-left: $bundle-option__qty-input-margin-left;
&:disabled {
color: $bundle-option__qty-input-color--disabled;
&:hover,
&:focus {
cursor: $bundle-option__qty-input-cursor--disabled;
}
}
}
}
There are no notes for this item.