cruc 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 xlink:href="/images/icons-sprite.svg#checked"></use>
    </svg>
    <svg class="
            checkbox__icon
            checkbox__icon--unchecked
            
        " role="presentation">
        <use xlink:href="/images/icons-sprite.svg#unchecked"></use>
    </svg>
    <label for="checkbox" class="checkbox__label ">
        <span class="checkbox__text">
            1 x Sprite Yoga Strap 8 foot
        </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 xlink:href="/images/icons-sprite.svg#checked"></use>
    </svg>
    <svg class="
            checkbox__icon
            checkbox__icon--unchecked
            
        " role="presentation">
        <use xlink: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 xlink:href="/images/icons-sprite.svg#checked"></use>
    </svg>
    <svg
        class="
            checkbox__icon
            checkbox__icon--unchecked
            
        "
        role="presentation"
    >
        <use xlink:href="/images/icons-sprite.svg#unchecked"></use>
    </svg>
    <span class="checkbox__label" >
        Checkbox link
    </span>
</a>


<!-- 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 xlink:href="{{ svg 'checked' }}"></use>
    </svg>
    <svg
        class="
            checkbox__icon
            checkbox__icon--unchecked
            {{ iconUnchecked.class }}
        "
        role="presentation"
    >
        <use xlink: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 xlink:href="{{ svg 'checked' }}"></use>
    </svg>
    <svg
        class="
            checkbox__icon
            checkbox__icon--unchecked
            {{ iconUnchecked.class }}
        "
        role="presentation"
    >
        <use xlink: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 xlink:href="{{ svg 'checked' }}"></use>
    </svg>
    <svg
        class="
            checkbox__icon
            checkbox__icon--unchecked
            {{ iconUnchecked.class }}
        "
        role="presentation"
    >
        <use xlink:href="{{ svg 'unchecked' }}"></use>
    </svg>
    <span class="checkbox__label" {{{ labelAttributes }}}>
        {{ label.text }}
    </span>
</a>
 
/* 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": "#"
}
  • 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__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--larger}) !default;
// active
$checkbox__transition                        : all 0.5s ease-in-out !default;

// before used in active state
$checkbox__before-display                    : block !default;
$checkbox__before-content                    : '' !default;
$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;
  • URL: /components/raw/checkbox/_checkbox-variables.scss
  • Filesystem Path: build/components/Molecules/form/checkbox/_checkbox-variables.scss
  • Size: 2 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;
        }

        .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;
        align-items: center;
        justify-content: space-between;

        &: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;
        }
    }

    &__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__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;
    }
}
  • URL: /components/raw/checkbox/_checkbox.scss
  • Filesystem Path: build/components/Molecules/form/checkbox/_checkbox.scss
  • Size: 3 KB

There are no notes for this item.