Alpaca components for Magento 2

Gift Options 

<div class="gift-options ">
    <div class="gift-options__content">
        <p class="gift-options__subtitle">
            Pick a paper of your choice (optional)
        </p>
        <ul class="gift-options__list padding-0 margin-0">
            <li class="gift-options__item padding-right-xs margin-bottom-xs">
                <div class="lazyload-wrapper ">
                    <img class="
            image
            lazyload
            
        " src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII&#x3D;" data-src="/images/banner/banner-480_480.png" alt="image alt text">
                </div>

            </li>
            <li class="gift-options__item padding-right-xs margin-bottom-xs">
                <div class="lazyload-wrapper ">
                    <img class="
            image
            lazyload
            
        " src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII&#x3D;" data-src="/images/banner/banner-480_480.png" alt="image alt text">
                </div>

            </li>
        </ul>
        <div class="gift-options__preview">
            <div class="lazyload-wrapper ">
                <img class="
            image
            lazyload
            
        " src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII&#x3D;" data-src="/images/banner/banner-480_480.png" alt="image alt text">
            </div>

        </div>
        <div class="gift-options__details padding-bottom-sm margin-bottom-xs">
            <span class="gift-options__item-name">
                Dotted
            </span>
            <div class="price ">
                <span class="price__value ">
                    $
                    159.95

                </span>
            </div>

            <button class="button button--secondary">
                Remove
            </button>

        </div>
        <fieldset class="
                fieldset
                gift-options__additional padding-bottom-xs margin-bottom-m
            ">
            <legend class="
                    fieldset__legend
                    fieldset__legend--hidden
                ">
                Pick a paper of your choice
            </legend>
            <div class="checkbox ">
                <input type="checkbox" id="checkbox" name="checkbox-name" 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" class="checkbox__label ">
                    <span class="checkbox__text">
                        Checkbox field
                    </span>
                </label>
            </div>

            <div class="checkbox ">
                <input type="checkbox" id="checkbox" name="checkbox-name" 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" class="checkbox__label ">
                    <span class="checkbox__text">
                        Checkbox field
                    </span>
                </label>
            </div>

        </fieldset>
    </div>

    <div class="gift-options__message">
        <p class="gift-options__subtitle">
            Gift Message (optional)
        </p>
        <fieldset class="
                fieldset
                
            ">
            <legend class="
                    fieldset__legend
                    fieldset__legend--hidden
                ">
                Add message to gift
            </legend>

            <div class="input ">
                <label class="
            label
            input__label
            
        " for="field-id">
                    Label text
                </label>
                <input class="input__field " id="field-id" name="field-name" type="text" placeholder="First and last name">
            </div>

            <div class="input ">
                <label class="
            label
            input__label
            
        " for="field-id">
                    Label text
                </label>
                <input class="input__field " id="field-id" name="field-name" type="text" placeholder="First and last name">
            </div>

            <div class="input ">
                <label class="
            label
            input__label
            
        " for="">

                </label>

                <textarea class="input__field input__field--textarea " id="" name="" placeholder=""></textarea>
            </div>

        </fieldset>
        <div class="actions-group margin-vc-m">
            <div class="actions-group__handler">
                <button class="button actions-group__button" type="button" aria-label="button">
                    Update
                </button>

                <button class="button actions-group__button button--secondary" type="button" aria-label="button">
                    Cancel
                </button>

            </div>
        </div>

    </div>
</div>
 
<div class="gift-options {{ class }}" {{{ attributes }}}>
    <div class="gift-options__content">
        <p class="gift-options__subtitle">
            {{ content.subtitle }}
        </p>
        <ul class="gift-options__list {{ list.class }}">
            <li class="gift-options__item {{ item.class }}">
                {{ render '@image' }}
            </li>
            <li class="gift-options__item {{ item.class }}">
                {{ render '@image' }}
            </li>
        </ul>
        <div class="gift-options__preview">
            {{ render '@image' }}
        </div>
        <div class="gift-options__details {{ details.class }}">
            <span class="gift-options__item-name">
                {{ details.name }}
            </span>
            {{ render '@price' }}
            {{ render '@button' details.removeItem }}
        </div>
        <fieldset
            class="
                fieldset
                {{ additional.fieldset.class }}
            "
            {{{ additional.fieldset.attributes }}}
        >
            <legend
                class="
                    fieldset__legend
                    {{ additional.legend.class }}
                "
                {{{ additional.legend.attributes }}}
            >
                {{ additional.legend.text }}
            </legend>
            {{ render '@checkbox' }}
            {{ render '@checkbox' }}
        </fieldset>
    </div>

    <div class="gift-options__message">
        <p class="gift-options__subtitle">
            {{ message.subtitle }}
        </p>
        <fieldset
            class="
                fieldset
                {{ message.fieldset.class }}
            "
            {{{ message.fieldset.attributes }}}
        >
            <legend
                class="
                    fieldset__legend
                    {{ message.legend.class }}
                "
                {{{ message.legend.attributes }}}
            >
                {{ message.legend.text }}
            </legend>

            {{ render '@input' to }}
            {{ render '@input' from }}
            {{ render '@input--textarea' message }}
        </fieldset>
        {{ render '@actions-group' actions }}
    </div>
</div>
 
{
  "content": {
    "subtitle": "Pick a paper of your choice (optional)"
  },
  "details": {
    "name": "Dotted",
    "class": "padding-bottom-sm margin-bottom-xs",
    "removeItem": {
      "tag": "button",
      "text": "Remove",
      "class": "button--secondary"
    }
  },
  "list": {
    "class": "padding-0 margin-0"
  },
  "item": {
    "class": "padding-right-xs margin-bottom-xs"
  },
  "additional": {
    "legend": {
      "text": "Pick a paper of your choice",
      "class": "fieldset__legend--hidden"
    },
    "fieldset": {
      "class": "gift-options__additional padding-bottom-xs margin-bottom-m"
    }
  },
  "message": {
    "subtitle": "Gift Message (optional)",
    "legend": {
      "text": "Add message to gift",
      "class": "fieldset__legend--hidden"
    }
  },
  "actions": {
    "class": "margin-vc-m",
    "sides": [
      {
        "action": [
          {
            "button": {
              "text": "Update",
              "class": "actions-group__button"
            }
          },
          {
            "button": {
              "text": "Cancel",
              "class": "actions-group__button button--secondary"
            }
          }
        ]
      }
    ]
  }
}
  • Content: 
    $gift-options__list-max-width       : 480px !default;

$gift-options__item-max-width       : 150px !default;
$gift-options__item-width           : 50% !default;

$gift-options__preview-max-width    : 300px !default;

$gift-options__item-active-transform: scale(1.03) !default;
$gift-options__item-name-font-size  : $font-size-medium !default;
$gift-options__item-name-margin     : $spacer--medium 0 $spacer !default;

$gift-options__details-border       : 1px solid $gray !default;
  • URL: /components/raw/gift-options/_gift-options-variables.scss
  • Filesystem Path: build/components/Organisms/gift-options/_gift-options-variables.scss
  • Size: 482 Bytes
  • Content: 
    @import 'gift-options-variables';

.gift-options {
    &__list {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        max-width: $gift-options__list-max-width;
        list-style: none;
    }

    &__item {
        max-width: $gift-options__item-max-width;
        width: $gift-options__item-width;

        &.active {
            transform: $gift-options__item-active-transform;
        }
    }

    &__preview {
        max-width: $gift-options__preview-max-width;
    }

    &__details {
        border-bottom: $gift-options__details-border;
    }

    &__item-name {
        display: block;
        font-size: $gift-options__item-name-font-size;
        margin: $gift-options__item-name-margin;
    }

    .gift-wrapping {
        img {
            max-width: $gift-options__item-max-width;
        }
    }
}
  • URL: /components/raw/gift-options/_gift-options.scss
  • Filesystem Path: build/components/Organisms/gift-options/_gift-options.scss
  • Size: 845 Bytes

No notes defined.