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>
 
<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>
 
{
  "id": "checkbox",
  "name": "checkbox-name",
  "attributes": "",
  "label": {
    "text": "Checkbox field",
    "class": ""
  },
  "iconChecked": {
    "class": ""
  },
  "iconUnchecked": {
    "class": ""
  },
  "input": {
    "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.