<div class="bundle-option ">
<h4 class="bundle-option__title" id="radio-options-title">
Sprite Stasis Ball
</h4>
<div class="radio bundle-option__radio margin-bottom-xs">
<fieldset class="fieldset " aria-labelledby="radio-options-title">
<div class="radio__handler">
<input type="radio" id="id1" name="radio1" class="radio__field">
<label for="id1" class="radio__label">
<span class="radio__text">
Sprite Stasis Ball 55 cm
</span>
</label>
</div>
<div class="radio__handler">
<input type="radio" id="id2" name="radio1" class="radio__field">
<label for="id2" class="radio__label">
<span class="radio__text">
Sprite Stasis Ball 65 cm
</span>
</label>
</div>
<div class="radio__handler">
<input type="radio" id="id3" name="radio1" class="radio__field">
<label for="id3" class="radio__label">
<span class="radio__text">
Sprite Stasis Ball 75 cm
</span>
</label>
</div>
</fieldset>
</div>
<div class="input bundle-option__qty margin-bottom-0">
<label class="
label
input__label
bundle-option__qty-label margin-0
" for="qty1">
Qty:
</label>
<input class="input__field bundle-option__qty-input margin-left-xs text-center" id="qty1" name="qty1" type="number" placeholder="" min="0">
</div>
</div>
<div
class="bundle-option {{ class }}"
{{{ attributes }}}
>
{{#if title}}
{{ render '@heading' title }}
{{/if}}
{{ render '@radio' radio merge=true }}
{{#if qty }}
{{ render '@input' qty merge=true }}
{{/if}}
</div>
{
"title": {
"tag": "h4",
"class": "bundle-option__title",
"text": "Sprite Stasis Ball",
"attributes": "id=\"radio-options-title\""
},
"qty": {
"class": "bundle-option__qty margin-bottom-0",
"label": {
"class": "bundle-option__qty-label margin-0",
"text": "Qty:"
},
"field": {
"type": "number",
"class": "bundle-option__qty-input margin-left-xs text-center",
"id": "qty1",
"name": "qty1",
"placeholder": "",
"attributes": "min=\"0\""
}
},
"radio": {
"legend": false,
"legendId": "radio-options-title",
"class": "bundle-option__radio margin-bottom-xs",
"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"
}
]
}
}
// title
$bundle-option__title-margin : $spacer--medium 0 $spacer !default;
$bundle-option__title-font-family : $font-family-base !default;
$bundle-option__title-text-transform : normal !default;
$bundle-option__title-font-size : $font-size-base !default;
$bundle-option__title-color : $gray-dark !default;
$bundle-option__title-font-weight : $font-weight-normal !default;
$bundle-option__title-color--required : $color-error !default;
$bundle-option__title-font-weight--required: $font-weight-normal !default;
// select
$bundle-option__select-max-width : 350px !default;
// qty
$bundle-option__qty-input-max-width : 100px !default;
$bundle-option__qty-input-color--disabled : $gray !default;
$bundle-option__qty-input-cursor--disabled : default !default;
@import 'bundle-option-variables';
.bundle-option {
&__title {
margin: $bundle-option__title-margin;
color: $bundle-option__title-color;
font-family: $bundle-option__title-font-family;
font-size: $bundle-option__title-font-size;
font-weight: $bundle-option__title-font-weight;
text-transform: $bundle-option__title-text-transform;
&--required {
&:after {
content: '*';
color: $bundle-option__title-color--required;
font-weight: $bundle-option__title-font-weight--required;
}
}
}
&__select {
max-width: $bundle-option__select-max-width;
}
&__qty {
display: flex;
align-items: center;
}
&__qty-input {
max-width: $bundle-option__qty-input-max-width;
&:disabled {
color: $bundle-option__qty-input-color--disabled;
&:hover {
cursor: $bundle-option__qty-input-cursor--disabled;
}
}
}
}
There are no notes for this item.