Alpaca components for Magento 2

Bundle Option 

<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

No notes defined.