Alpaca components for Magento 2

Checkbox 

<!-- Default -->
<div class="checkbox ">
    <input type="checkbox" id="checkbox" name="checkbox-name" class="checkbox__field ">
    <svg class="
            checkbox__icon
            checkbox__icon--checked
            
        " role="presentation">
        <use href="/images/icons-sprite.svg#checked"></use>
    </svg>
    <svg class="
            checkbox__icon
            checkbox__icon--unchecked
            
        " role="presentation">
        <use href="/images/icons-sprite.svg#unchecked"></use>
    </svg>
    <label for="checkbox" class="checkbox__label ">
        <span class="checkbox__text">
            Checkbox field
        </span>
    </label>
</div>


<!-- Long Label -->
<div class="checkbox ">
    <input type="checkbox" id="checkbox-long-label" name="checkbox-long-label-name" class="checkbox__field ">
    <svg class="
            checkbox__icon
            checkbox__icon--checked
            
        " role="presentation">
        <use href="/images/icons-sprite.svg#checked"></use>
    </svg>
    <svg class="
            checkbox__icon
            checkbox__icon--unchecked
            
        " role="presentation">
        <use href="/images/icons-sprite.svg#unchecked"></use>
    </svg>
    <label for="checkbox-long-label" class="checkbox__label ">
        <span class="checkbox__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).
        </span>
    </label>
</div>


<!-- Link -->
<a href="#" class="checkbox checkbox--link ">
    <svg class="
            checkbox__icon
            checkbox__icon--checked
            
        " role="presentation">
        <use href="/images/icons-sprite.svg#checked"></use>
    </svg>
    <svg class="
            checkbox__icon
            checkbox__icon--unchecked
            
        " role="presentation">
        <use href="/images/icons-sprite.svg#unchecked"></use>
    </svg>
    <span class="checkbox__label">
        Checkbox link
    </span>
</a>


<!-- Link Checked -->
<a href="#" class="checkbox checkbox--link checkbox--link-checked">
    <svg class="
            checkbox__icon
            checkbox__icon--checked
            
        " role="presentation">
        <use href="/images/icons-sprite.svg#checked"></use>
    </svg>
    <svg class="
            checkbox__icon
            checkbox__icon--unchecked
            
        " role="presentation">
        <use href="/images/icons-sprite.svg#unchecked"></use>
    </svg>
    <span class="checkbox__label">
        Checkbox link
    </span>
</a>


<!-- No Icon -->
<div class="checkbox ">
    <input type="checkbox" id="checkbox-no-icon" name="checkbox-name" class="checkbox__field ">
    <label for="checkbox-no-icon" class="
            checkbox__label
            checkbox__label--no-icon
            
        ">
        <span class="checkbox__text">
            Checkbox no icon
        </span>
    </label>
</div>


<!-- Default -->
<div class="checkbox {{ class }}">
    <input
        type="checkbox"
        id="{{ id }}"
        name="{{ name }}"
        class="checkbox__field {{ input.class }}"
        {{{ attributes }}}
   >
    <svg
        class="
            checkbox__icon
            checkbox__icon--checked
            {{ iconChecked.class }}
        "
        role="presentation"
    >
        <use href="{{ svg 'checked' }}"></use>
    </svg>
    <svg
        class="
            checkbox__icon
            checkbox__icon--unchecked
            {{ iconUnchecked.class }}
        "
        role="presentation"
    >
        <use href="{{ svg 'unchecked' }}"></use>
    </svg>
    <label
        for="{{ id }}"
        class="checkbox__label {{ label.class }}"
    >
        <span class="checkbox__text">
            {{{ label.text }}}
        </span>
    </label>
</div>

<!-- Long Label -->
<div class="checkbox {{ class }}">
    <input
        type="checkbox"
        id="{{ id }}"
        name="{{ name }}"
        class="checkbox__field {{ input.class }}"
        {{{ attributes }}}
   >
    <svg
        class="
            checkbox__icon
            checkbox__icon--checked
            {{ iconChecked.class }}
        "
        role="presentation"
    >
        <use href="{{ svg 'checked' }}"></use>
    </svg>
    <svg
        class="
            checkbox__icon
            checkbox__icon--unchecked
            {{ iconUnchecked.class }}
        "
        role="presentation"
    >
        <use href="{{ svg 'unchecked' }}"></use>
    </svg>
    <label
        for="{{ id }}"
        class="checkbox__label {{ label.class }}"
    >
        <span class="checkbox__text">
            {{{ label.text }}}
        </span>
    </label>
</div>

<!-- Link -->
<a
    href="{{href}}"
    class="checkbox checkbox--link {{class}}"
>
    <svg
        class="
            checkbox__icon
            checkbox__icon--checked
            {{ iconChecked.class }}
        "
        role="presentation"
    >
        <use href="{{ svg 'checked' }}"></use>
    </svg>
    <svg
        class="
            checkbox__icon
            checkbox__icon--unchecked
            {{ iconUnchecked.class }}
        "
        role="presentation"
    >
        <use href="{{ svg 'unchecked' }}"></use>
    </svg>
    <span class="checkbox__label" {{{ labelAttributes }}}>
        {{ label.text }}
    </span>
</a>

<!-- Link Checked -->
<a
    href="{{href}}"
    class="checkbox checkbox--link {{class}}"
>
    <svg
        class="
            checkbox__icon
            checkbox__icon--checked
            {{ iconChecked.class }}
        "
        role="presentation"
    >
        <use href="{{ svg 'checked' }}"></use>
    </svg>
    <svg
        class="
            checkbox__icon
            checkbox__icon--unchecked
            {{ iconUnchecked.class }}
        "
        role="presentation"
    >
        <use href="{{ svg 'unchecked' }}"></use>
    </svg>
    <span class="checkbox__label" {{{ labelAttributes }}}>
        {{ label.text }}
    </span>
</a>

<!-- No Icon -->
<div class="checkbox {{ class }}">
    <input
        type="checkbox"
        id="{{ id }}"
        name="{{ name }}"
        class="checkbox__field {{ input.class }}"
        {{{ attributes }}}
   >
    <label
        for="{{ id }}"
        class="
            checkbox__label
            checkbox__label--no-icon
            {{ label.class }}
        "
    >
        <span class="checkbox__text">
            {{{ label.text }}}
        </span>
    </label>
</div>
 
/* Default */
{
  "id": "checkbox",
  "name": "checkbox-name",
  "attributes": "",
  "label": {
    "text": "Checkbox field",
    "class": ""
  },
  "iconChecked": {
    "class": ""
  },
  "iconUnchecked": {
    "class": ""
  },
  "input": {
    "class": ""
  }
}


/* Long Label */
{
  "id": "checkbox-long-label",
  "name": "checkbox-long-label-name",
  "attributes": "",
  "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": ""
  },
  "iconChecked": {
    "class": ""
  },
  "iconUnchecked": {
    "class": ""
  },
  "input": {
    "class": ""
  }
}


/* Link */
{
  "id": "checkbox",
  "name": "checkbox-name",
  "attributes": "",
  "label": {
    "text": "Checkbox link",
    "class": ""
  },
  "iconChecked": {
    "class": ""
  },
  "iconUnchecked": {
    "class": ""
  },
  "input": {
    "class": ""
  },
  "class": "",
  "href": "#"
}


/* Link Checked */
{
  "id": "checkbox",
  "name": "checkbox-name",
  "attributes": "",
  "label": {
    "text": "Checkbox link",
    "class": ""
  },
  "iconChecked": {
    "class": ""
  },
  "iconUnchecked": {
    "class": ""
  },
  "input": {
    "class": ""
  },
  "class": "checkbox--link-checked",
  "href": "#"
}


/* No Icon */
{
  "id": "checkbox-no-icon",
  "name": "checkbox-name",
  "attributes": "",
  "label": {
    "text": "Checkbox no icon",
    "class": ""
  },
  "iconChecked": {
    "class": ""
  },
  "iconUnchecked": {
    "class": ""
  },
  "input": {
    "class": ""
  },
  "class": ""
}
  • Content: 
    $checkbox__line-height                       : $font-line-height !default;
$checkbox__top                               : 50% !default;
$checkbox__left                              : 0 !default;
$checkbox__transform                         : translateY(-$checkbox__top) !default;

$checkbox__label-margin                      : 0 !default;
$checkbox__label-padding                     : $spacer--small 0 $spacer--small $spacer--large !default;
$checkbox__label-color                       : $color-secondary !default;
$checkbox__label-color--active               : $color-primary !default;
$checkbox__label-font-size                   : $font-size-base !default;
$checkbox__label-text-decoration--no-icon    : underline !default;
$checkbox__label-padding-left--no-icon       : 0 !default;

$checkbox__icon-transition                   : $transition-base !default;
$checkbox__icon-size                         : 24px !default;
$checkbox__icon-fill                         : $white !default;

$checkbox__label-text-decoration-active--link: none !default;
$checkbox__color--link                       : $color-secondary !default;

$checkbox__text-width                        : calc(100% - #{$spacer--large}) !default;

// active
$checkbox__transition                        : all 0.5s ease-in-out !default;

// before used in active state
$checkbox__before-size                       : 20px !default;
$checkbox__before-position-left              : 2px !default;
$checkbox__before-position-top               : $checkbox__top !default;
$checkbox__before-border-radius              : 2px !default;
$checkbox__before-background                 : $color-primary !default;
$checkbox__before-transform                  : scaleX(0) translateY(-$checkbox__top) !default;
$checkbox__before-transform-origin           : 0 50% !default;
$checkbox__before-transform-hover            : scaleX(1) translateY(-$checkbox__top) !default;

// error
$checkbox__error-bottom                      : -#{$spacer} !default;

$checkbox__link-inner-text-decoration        : underline !default;

// disabled
$checkbox__field-background--disabled        : $gray !default;
  • URL: /components/raw/checkbox/_checkbox-variables.scss
  • Filesystem Path: build/components/Molecules/form/checkbox/_checkbox-variables.scss
  • Size: 2.1 KB
  • Content: 
    @import 'checkbox-variables';

.checkbox {
    position: relative;

    &--link {
        display: block;
        text-decoration: none;
        color: $checkbox__color--link;

        &:hover {
            text-decoration: $checkbox__label-text-decoration-active--link;
        }

        &.focus-visible {
            @include focus();
            background-color: transparent;
            text-decoration: $checkbox__label-text-decoration-active--link;
        }
    }

    &--link-checked {
        display: block;

        .checkbox__label {
            color: $checkbox__label-color--active;

            &:after {
                transform: $checkbox__before-transform-hover;
            }
        }

        .checkbox__icon--checked {
            opacity: 1;
        }
    }

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

        &:after {
            content: '';
            display: block;
            position: absolute;
            top: $checkbox__before-position-top;
            left: $checkbox__before-position-left;
            width: $checkbox__before-size;
            height: $checkbox__before-size;
            border-radius: $checkbox__before-border-radius;
            background-color: $checkbox__before-background;
            transform: $checkbox__before-transform;
            transform-origin: $checkbox__before-transform-origin;
            transition: $checkbox__transition;
        }

        &--no-icon {
            padding-left: $checkbox__label-padding-left--no-icon;
            text-decoration: $checkbox__label-text-decoration--no-icon;

            &:after {
                display: none;
            }
        }

        a {
            text-decoration: $checkbox__link-inner-text-decoration;
        }
    }

    &__icon {
        position: absolute;
        top: $checkbox__top;
        left: $checkbox__left;
        transform: $checkbox__transform;
        width: $checkbox__icon-size;
        height: $checkbox__icon-size;
        opacity: 1;
        transition: $checkbox__icon-transition;
        fill: $checkbox__icon-fill;
        cursor: pointer;

        &--checked {
            opacity: 0;
            z-index: 1;
        }
    }

    &__field {
        position: absolute;
        top: $checkbox__top;
        left: $checkbox__left;
        transform: $checkbox__transform;
        width: $checkbox__icon-size;
        height: $checkbox__icon-size;
        z-index: $z-index-normal;
        opacity: 0;
        cursor: pointer;

        &:checked {
            &.checkbox__field--disabled {
                & ~ .checkbox__label {
                    &:after {
                        background-color: $checkbox__field-background--disabled;
                    }
                }
            }
        }

        &:checked ~ .checkbox__icon--checked {
            opacity: 1;
        }

        &:checked ~ .checkbox__label {
            color: $checkbox__label-color--active;
            &:after {
                transform: $checkbox__before-transform-hover;
            }
        }

        &.focus-visible ~ .checkbox__label {
            @include focus();
        }
    }

    &__text {
        width: $checkbox__text-width;
    }

    .mage-error {
        position: absolute;
        bottom: $checkbox__error-bottom;
    }

    &.amgdpr-checkbox {
        margin-bottom: $spacer;
    }
}
  • URL: /components/raw/checkbox/_checkbox.scss
  • Filesystem Path: build/components/Molecules/form/checkbox/_checkbox.scss
  • Size: 3.7 KB

No notes defined.