Vechtsport Online Components for Magento 2

Radio 

<div class="radio ">
    <fieldset class="radio__fieldset" aria-labelledby="legend-id">
        <legend class="radio__legend" id="legend-id">
            Choose option
        </legend>
        <div class="radio__handler">
            <input type="radio" id="id1" name="radio1" class="radio__field">
            <label for="id1" class="radio__label">
                <span class="radio__icon"></span>
                Option one
            </label>
        </div>
        <div class="radio__handler">
            <input type="radio" id="id2" name="radio1" class="radio__field">
            <label for="id2" class="radio__label">
                <span class="radio__icon"></span>
                Option two
            </label>
        </div>
        <div class="radio__handler">
            <input type="radio" id="id3" name="radio1" class="radio__field">
            <label for="id3" class="radio__label">
                <span class="radio__icon"></span>
                Options three
            </label>
        </div>
    </fieldset>
</div>
 
<div class="radio {{ class }}">
    <fieldset class="radio__fieldset" aria-labelledby="{{ legendId }}">
        {{#if legend }}
            <legend class="radio__legend" id="{{ legendId }}">
                {{ legend }}
            </legend>
        {{/if }}
        {{#each options}}
            <div class="radio__handler">
                <input
                    type="radio"
                    id="{{ id }}"
                    name="{{ ../name }}"
                    class="radio__field"
               >
                <label
                    for="{{ id }}"
                    class="radio__label"
                >
                    <span class="radio__icon"></span>
                    {{ label }}
                </label>
            </div>
        {{/each}}
    </fieldset>
</div>
 
{
  "name": "radio1",
  "legend": "Choose option",
  "legendId": "legend-id",
  "options": [
    {
      "id": "id1",
      "label": "Option one"
    },
    {
      "id": "id2",
      "label": "Option two"
    },
    {
      "id": "id3",
      "label": "Options three"
    }
  ]
}
  • Content: 
    $radio__size              : $spacer--medium !default;
$radio__dot-size          : 6px !default;
$radio__label-font-size   : $font-size-small !default;
$radio__label-color       : $black !default;
$radio__label-color-active: $color-primary !default;
$radio__icon-border       : 1px solid $black !default;
$radio__icon-background   : $color-primary !default;
$radio__icon-transition   : $transition-base !default;

.radio {
    position: relative;
    margin-bottom: $spacer--medium;

    &__fieldset {
        border: 0;
        padding: 0;
        margin: 0;
    }

    &__legend {
        padding-bottom: $spacer--medium;
    }

    &__handler {
        position: relative;
    }

    &__field {
        position: absolute;
        left: 0;
        height: $radio__size;
        width: $radio__size;
        opacity: 0;
        z-index: -1;

        &:checked + .radio__label {
            color: $radio__label-color-active;
            .radio__icon {
                &:before {
                    opacity: 1;
                    transform: scale(1);
                }
            }
        }

        &:focus + .radio__label {
            @include focus();
        }
    }

    &__label {
        position: relative;
        height: $radio__size;
        width: 100%;
        vertical-align: top;
        line-height: $radio__size;
        cursor: pointer;
        font-size: $radio__label-font-size;
        color: $radio__label-color;
    }

    &__icon {
        position: relative;
        display: inline-block;
        border: $radio__icon-border;
        border-radius: $radio__size;
        width: $radio__size;
        height: $radio__size;
        margin-right: $spacer;
        vertical-align: top;

        &::before {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            content: '';
            width: $radio__dot-size;
            height: $radio__dot-size;
            border-radius: $radio__dot-size;
            margin: auto;
            opacity: 0;
            transform: scale(0);
            background-color: $radio__icon-background;
            transition: $radio__icon-transition;
        }
    }
}
  • URL: /components/raw/radio/_radio.scss
  • Filesystem Path: build/components/02-elements/form/radio/_radio.scss
  • Size: 2.2 KB

There are no notes for this item.