<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>
<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>
{
  "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__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.