<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"
      }
    ]
  }
}
  • Content:
    // title
    $bundle-option__title-margin               : $spacer--medium 0 $spacer !default;
    $bundle-option__title-font-family          : $font-family-base !default;
    $bundle-option__title-text-transform       : capitalize !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;
    
  • URL: /components/raw/bundle-option/_bundle-option-variables.scss
  • Filesystem Path: build/components/Organisms/bundle-option/_bundle-option-variables.scss
  • Size: 849 Bytes
  • Content:
    @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;
                }
            }
        }
    }
    
  • URL: /components/raw/bundle-option/_bundle-option.scss
  • Filesystem Path: build/components/Organisms/bundle-option/_bundle-option.scss
  • Size: 1.1 KB

There are no notes for this item.