Vechtsport Online Components for Magento 2

Checkbox: Default 

<div class="checkbox ">
    <input type="checkbox" id="checkbox" name="checkbox-name" class="checkbox__field ">
    <svg class="checkbox__icon ">
        <use xlink:href="/images/icons-sprite.svg#checked"></use>
    </svg>
    <label for="checkbox" class="checkbox__label ">
        1 x Sprite Yoga Strap 8 foot
    </label>
</div>
 
<div class="checkbox {{ class }}">
    <input type="checkbox"
           id="{{ id }}"
           name="{{ name }}"
           class="checkbox__field {{ input.class }}"
   >
    <svg class="checkbox__icon {{ icon.class }}">
        <use xlink:href="{{ svg 'checked' }}"></use>
    </svg>
    <label for="{{ id }}" class="checkbox__label {{ label.class }}">
        {{{ label.text }}}
    </label>
</div>
 
{
  "id": "checkbox",
  "name": "checkbox-name",
  "label": {
    "text": "Checkbox field",
    "class": ""
  },
  "icon": {
    "class": ""
  },
  "input": {
    "class": ""
  }
}
  • Content: 
    .checkbox {
    position: relative;

    &--link {
        display: flex;
        text-decoration: none;
        margin: 5px;
        color: $gray-dark;

        &:hover,
        &:focus {
            text-decoration: none;
        }
    }

    &--link-checked {
        display: block;

        .checkbox__icon {
            opacity: 1;
        }

        .checkbox__label:before {
            background-color: transparent;
            border: none;
        }
    }

    &__field {
        position: absolute;
        top: 8px;
        left: 0;
        opacity: 0;

        &:checked + .checkbox__icon {
            opacity: 1;
        }

        &:checked ~ .checkbox__label:before {
            background-color: transparent;
            border: none;
        }

        &:focus ~ .checkbox__label {
            @include focus();
        }
    }
    &_input {
        width: 17px;
        height: 17px;
    }
    & span {
        display: inline-block;
        margin-left: 5px;
        line-height: $font-line-height;
        cursor: pointer;
        font-family: $font-family-saira;
    }
    &__label {
        display: block;
        margin: 0;
        padding: $spacer 26px;
        line-height: $font-line-height;
        cursor: pointer;
        font-family: $font-family-saira;

        &:before {
            content: '';
            position: absolute;
            top: 8px;
            left: 0;
            width: 18px;
            height: 18px;
            background-color: $form-checkbox-background-color;
            border: $form-checkbox-border;
            border-radius: $border-radius;
        }
    }

    &__icon {
        position: absolute;
        top: 8px;
        left: 0;
        width: 18px;
        height: 18px;
        fill: $color-primary;
        background: $white;
        cursor: pointer;
        opacity: 0;
        transition: $transition-base;
    }
}
  • URL: /components/raw/checkbox/_checkbox.scss
  • Filesystem Path: build/components/02-elements/form/checkbox/_checkbox.scss
  • Size: 1.9 KB

There are no notes for this item.