cruc components for Magento 2

Bundle Option: Select 

<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="size">
        Size
    </label>
        <select id="size" class="select__field bundle-option__select" name="size" required>
            <option 
                class=""
                value="" 
                
            >
                Sprite Foam Roller
            </option>
            <option 
                class=""
                value="" 
                
            >
                Sprite Foam Roller S
            </option>
            <option 
                class=""
                value="" 
                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       : normal !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: 845 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.