Alpaca components for Magento 2

Radio 

<div class="radio ">
    <fieldset class="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__text">
                    Option one
                </span>
            </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__text">
                    Option two
                </span>
            </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__text">
                    Options three Long label text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eu elementum dui, eget volutpat purus. Aliquam ullamcorper tortor non massa rhoncus, in faucibus ligula lacinia.
                </span>
            </label>
        </div>
    </fieldset>
</div>
 
<div class="radio {{ class }}">
    <fieldset class="fieldset {{ fieldsetClass }}" aria-labelledby="{{ legendId }}">
        {{#if legend }}
            <legend class="radio__legend {{ legendClass }}" 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__text">
                        {{ label }}
                    </span>
                </label>
            </div>
        {{/each}}
    </fieldset>
</div>
 
{
  "name": "radio1",
  "fieldsetClass": "",
  "legend": "Choose option",
  "legendId": "legend-id",
  "options": [
    {
      "id": "id1",
      "label": "Option one"
    },
    {
      "id": "id2",
      "label": "Option two"
    },
    {
      "id": "id3",
      "label": "Options three Long label text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eu elementum dui, eget volutpat purus. Aliquam ullamcorper tortor non massa rhoncus, in faucibus ligula lacinia. "
    }
  ]
}
  • Content: 
    $radio__size                    : 24px !default;
$radio__dot-size                : 12px !default;
$radio__margin                  : 0 0 $spacer--medium 0 !default;
$radio__label-font-size         : $font-size-base !default;
$radio__label-color             : $color-secondary !default;
$radio__label-color-active      : $color-primary !default;
$radio__label-font-weight-active: $font-weight-normal !default;
$radio__label-line-height       : $font-line-height !default;
$radio__label-margin            : $spacer--small 0 !default;
$radio__icon-margin-right       : $spacer !default;
$radio__icon-border             : 2px solid $color-primary !default;
$radio__icon-background         : $color-primary !default;
$radio__icon-transition         : $transition-base !default;
$radio__legend-margin           : $radio__margin !default;
$radio__text-width              : calc(100% - #{$radio__icon-margin-right + $radio__size}) !default;
  • URL: /components/raw/radio/_radio-variables.scss
  • Filesystem Path: build/components/Molecules/form/radio/_radio-variables.scss
  • Size: 932 Bytes
  • Content: 
    @import 'radio-variables';

.radio {
    position: relative;
    margin: $radio__margin;

    &__legend {
        margin: $radio__legend-margin;

        &--hidden {
            @include visually-hidden();
        }
    }

    &__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;
            font-weight: $radio__label-font-weight-active;

            &:before {
                border-color: $radio__icon-background;
            }

            &:after {
                opacity: 1;
                transform: scale(1);
            }
        }

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

    &__label {
        position: relative;
        display: flex;
        flex-flow: row nowrap;
        height: auto;
        width: 100%;
        margin: $radio__label-margin;
        line-height: $radio__label-line-height;
        font-size: $radio__label-font-size;
        color: $radio__label-color;
        cursor: pointer;

        &:before {
            content: '';
            position: relative;
            display: inline-block;
            border: $radio__icon-border;
            border-radius: $radio__size;
            width: $radio__size;
            min-width: $radio__size;
            height: $radio__size;
            margin-right: $radio__icon-margin-right;
        }

        &:after {
            position: absolute;
            top: 6px;
            left: 6px;
            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;
        }
    }

    &__text {
        width: $radio__text-width;
    }
}
  • URL: /components/raw/radio/_radio.scss
  • Filesystem Path: build/components/Molecules/form/radio/_radio.scss
  • Size: 2.1 KB

No notes defined.