<div class="bundle-option ">
    <h4 class="bundle-option__title">
        Sprite Foam Roller
    </h4>

    <div class="select bundle-option__select margin-bottom-m">
        <label class="
            label
            label--hidden
        " for="field-id">
            Label text
        </label>
        <select id="field-id" class="select__field bundle-option__select" name="field-name">
            <option class="" value="option1">
                Sprite Foam Roller
            </option>
            <option class="" value="option2">
                Sprite Foam Roller S
            </option>
            <option class="" value="option3" false>
                Sprite Foam Roller XL
            </option>
        </select>
    </div>

    <script src="/components/raw/select/select.js"></script>

    <div class="input bundle-option__qty margin-bottom-0">
        <label class="
            label
            input__label
            bundle-option__qty-label margin-0
        " for="qty2">
            Qty:
        </label>
        <input class="input__field bundle-option__qty-input margin-left-xs text-center" id="qty2" name="qty2" type="number" placeholder="" min="0">
    </div>

</div>
<div
    class="bundle-option {{ class }}"
    {{{ attributes }}}
>
    {{#if title}}
        {{ render '@heading' title }}
    {{/if}}

    {{ render '@select' select merge=true }}

    {{#if qty }}
        {{ render '@input' qty merge=true }}
    {{/if}}
</div>
{
  "title": {
    "tag": "h4",
    "class": "bundle-option__title",
    "text": "Sprite Foam Roller",
    "attributes": ""
  },
  "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": "qty2",
      "name": "qty2",
      "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"
      }
    ]
  },
  "select": {
    "class": "bundle-option__select margin-bottom-m",
    "label": {
      "class": "label--hidden"
    },
    "field": {
      "class": "bundle-option__select"
    },
    "options": [
      {
        "text": "Sprite Foam Roller"
      },
      {
        "text": "Sprite Foam Roller S"
      },
      {
        "text": "Sprite Foam Roller XL",
        "attributes": false
      }
    ]
  }
}
  • 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.