Vechtsport Online 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">
        <label class="label label--hidden" for="expiration_year">
            Expiration Year
        </label>
        <select id="expiration_year" class="select__field bundle-option__select " name="expiration_year">
            <option value="">
                Sprite Foam Roller
            </option>
            <option value="">
                Sprite Foam Roller S
            </option>
            <option value="" false>
                Sprite Foam Roller XL
            </option>
        </select>
    </div>

    <div class="input bundle-option__qty">
        <span class="form-check" aria-label="form-check-qty1">
            <svg class="icon brief-info__icon" role="img">
                <title>USP Check</title>
                <use xlink:href="/images/icons-sprite.svg#usp-check"></use>
            </svg>

        </span>
        <label class="
            label
            bundle-option__label
        " for="qty1">
            Qty:
        </label>
        <input class="input__field bundle-option__qty-input" id="qty1" name="qty1" type="number" placeholder="" min="0">
    </div>

</div>
 
<div class="bundle-option {{ class }}" {{{ attributes }}}>
    {{#if title}}
        <{{{title.tag}}} class="bundle-option__title">
            {{ title.message }}
        </{{{title.tag}}}>
    {{/if}}

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

    {{#if qty }}
        {{ render '@input' qty merge=true }}
    {{/if}}
</div>
 
{
  "title": {
    "tag": "h4",
    "message": "Sprite Foam Roller"
  },
  "qty": {
    "class": "bundle-option__qty",
    "label": {
      "class": "bundle-option__label",
      "text": "Qty:"
    },
    "field": {
      "type": "number",
      "class": "bundle-option__qty-input",
      "id": "qty1",
      "name": "qty1",
      "placeholder": "",
      "attributes": "min=\"0\""
    }
  },
  "radio": {
    "legend": false,
    "class": "bundle-option__radio",
    "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",
    "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: 
    $bundle-option__title-margin               : 24px 0 $spacer !default;
$bundle-option__title-color--required      : $red !default;
$bundle-option__title-font-weight--required: $font-weight-normal !default;
$bundle-option__label-margin               : 0 !default;
$bundle-option__radio-margin-bottom        : $spacer !default;
$bundle-option__select-max-width           : 100% !default;
$bundle-option__select-margin-bottom       : $spacer--medium !default;
$bundle-option__select-background          : $form-select-background--gray !default;
$bundle-option__select-z-index             : 50 !default;
$bundle-option__qty-margin-bottom          : 16px !default;
$bundle-option__qty-input-max-width        : 100px !default;
$bundle-option__qty-input-margin-left      : $spacer !default;
$bundle-option__qty-input-color--disabled  : $gray !default;
$bundle-option__qty-input-cursor--disabled : default !default;

.bundle-option {
    &__title {
        margin: $bundle-option__title-margin;

        &--required {
            &:after {
                content: '*';
                color: $bundle-option__title-color--required;
                font-weight: $bundle-option__title-font-weight--required;
            }
        }
    }

    &__radio {
        margin-bottom: $spacer;
    }

    &__select {
        max-width: $bundle-option__select-max-width;
        margin-bottom: $bundle-option__select-margin-bottom;
        .select__field {
            height: 40px;
            padding: 0 2rem 0 0.5rem;
            &-list--single {
                border: none;
            }
            &-item {
                overflow: hidden;
            }
        }
        .choices__list--dropdown {
            display: none;
            &.is-active {
                display: block;
                position: absolute;
                width: $bundle-option__select-max-width;
                background: $bundle-option__select-background;
                z-index: $bundle-option__select-z-index;
            }
        }
    }

    &__qty {
        display: flex;
        align-items: center;
        margin-bottom: $bundle-option__qty-margin-bottom;
        justify-content: space-between;
    }

    &__label {
        margin: $bundle-option__label-margin;
    }

    &__qty-input {
        max-width: $bundle-option__qty-input-max-width;
        margin-left: $bundle-option__qty-input-margin-left;

        &:disabled {
            color: $bundle-option__qty-input-color--disabled;

            &:hover,
            &:focus {
                cursor: $bundle-option__qty-input-cursor--disabled;
            }
        }
    }
}
  • URL: /components/raw/bundle-option/_bundle-option.scss
  • Filesystem Path: build/components/03-modules/bundle-option/_bundle-option.scss
  • Size: 2.6 KB

There are no notes for this item.