Vechtsport Online Components for Magento 2

Checkbox: Long Label 

<div class="checkbox ">
    <input type="checkbox" id="checkbox-long-label" name="checkbox-name" class="checkbox__field ">
    <svg class="checkbox__icon ">
        <use xlink:href="/images/icons-sprite.svg#checked"></use>
    </svg>
    <label for="checkbox-long-label" class="checkbox__label ">
        I hereby agree for processing my personal data, included in my job offer, for the purpose of recruitment (as defined in the Act of August 29, 1997 on the Protection of Personal Data (Journal of Laws No. 133, item 883).
    </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-long-label",
  "name": "checkbox-name",
  "label": {
    "text": "I hereby agree for processing my personal data, included in my job offer, for the purpose of recruitment (as defined in the Act of August 29, 1997 on the Protection of Personal Data (Journal of Laws No. 133, item 883).",
    "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.