Alpaca components for Magento 2

Bundle Option: Checkbox 

<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
            checkbox__icon--checked
            
        " role="presentation">
            <use href="/images/icons-sprite.svg#checked"></use>
        </svg>
        <svg class="
            checkbox__icon
            checkbox__icon--unchecked
            
        " role="presentation">
            <use href="/images/icons-sprite.svg#unchecked"></use>
        </svg>
        <label for="checkbox-1" class="checkbox__label ">
            <span class="checkbox__text">
                1 x Sprite Yoga Strap 6 foot
            </span>
        </label>
    </div>

    <div class="checkbox ">
        <input type="checkbox" id="checkbox-2" name="checkbox-name-2" class="checkbox__field ">
        <svg class="
            checkbox__icon
            checkbox__icon--checked
            
        " role="presentation">
            <use href="/images/icons-sprite.svg#checked"></use>
        </svg>
        <svg class="
            checkbox__icon
            checkbox__icon--unchecked
            
        " role="presentation">
            <use href="/images/icons-sprite.svg#unchecked"></use>
        </svg>
        <label for="checkbox-2" class="checkbox__label ">
            <span class="checkbox__text">
                1 x Sprite Yoga Strap 8 foot
            </span>
        </label>
    </div>

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

    {{#each checkboxes }}
        {{ render '@checkbox' this merge=true }}
    {{/each}}

    {{#if qty }}
        {{ render '@input' qty merge=true }}
    {{/if}}
</div>
 
{
  "title": {
    "tag": "h4",
    "class": "bundle-option__title",
    "text": "Sprite Yoga Strap",
    "attributes": ""
  },
  "qty": false,
  "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"
      }
    ]
  },
  "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"
      }
    }
  ]
}
  • 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.