Kistenkoning components for Magento 2

Filter: Checkbox 

<li class="
        dropdown-list__item
        dropdown-list__item--collapse
        filter
        filter--checkbox
        
    ">
    <div class="dropdown-list__label-wrapper filter__label-wrapper">
        <button type="button" class="dropdown-list__label" aria-controls="checkbox" aria-expanded="false">
            <h3 class="filter__heading">
                Filters
            </h3>

            <svg class="icon dropdown-list__icon" role="presentation" focusable="false">
                <title>Arrow down</title>
                <use xlink:href="/images/icons-sprite.svg#angle-down"></use>
            </svg>

        </button>
    </div>

    <div id="checkbox" class="dropdown-list__content filter__content " aria-hidden="true">
        <div class="more-info">
            <button class="button button--icon button--fluid more-info__trigger" type="button" aria-expanded="false">

                <span class="button__text ">
                    More information
                </span>

                <svg class="icon button__icon" role="presentation" focusable="false">
                    <title>Show tooltip</title>
                    <use xlink:href="/images/icons-sprite.svg#info"></use>
                </svg>

            </button>

            <div class="more-info__content-wrapper" aria-hidden="true">

                <div class="more-info__content">
                    <h3 class="more-info__heading">
                        Example title
                    </h3>

                    <div class="more-info__data">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam venenatis nisl quis imperdiet tincidunt. Nulla massa diam, aliquet vitae laoreet a, fermentum eu velit. Quisque ornare erat in orci hendrerit feugiat at sit amet neque. Fusce elementum semper feugiat. Curabitur egestas neque in leo finibus ultricies.
                    </div>

                    <button class="button button--icon button--rotate-icon more-info__close" type="button" aria-label="Close more info">
                        <svg class="icon " role="presentation" focusable="false">
                            <title>Close more information</title>
                            <use xlink:href="/images/icons-sprite.svg#close"></use>
                        </svg>

                    </button>

                </div>

            </div>
        </div>

        <ul class="list">
            <li>
                <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">
                        Value 1
                    </span>
                </a>

            </li>
            <li>
                <a href="#" class="checkbox checkbox--link checkbox--link-checked">
                    <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">
                        Value 2
                    </span>
                </a>

            </li>
            <li>
                <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">
                        Value 3
                    </span>
                </a>

            </li>
        </ul>
    </div>
</li>
 
<li
    class="
        dropdown-list__item
        dropdown-list__item--collapse
        filter
        filter--checkbox
        {{ class }}
    "
>
    <div class="dropdown-list__label-wrapper filter__label-wrapper">
        <button
            type="button"
            class="dropdown-list__label"
            aria-controls="{{ id }}"
            aria-expanded="false"
        >
            {{ render '@heading' title }}
            {{ render '@icon' collapseIcon }}
        </button>
    </div>

    <div
        id="{{ id }}"
        class="dropdown-list__content filter__content {{ contentClass }}"
        aria-hidden="true"
    >
        {{ render '@more-info' }}
        <ul class="list">
            {{#each checkboxes }}
                <li>
                    {{ render '@checkbox--link' this }}
                </li>
            {{/each }}
        </ul>
    </div>
</li>
 
{
  "id": "checkbox",
  "collapseIcon": {
    "class": "dropdown-list__icon",
    "id": "angle-down",
    "title": "Arrow down",
    "hidden": true
  },
  "contentClass": "",
  "title": {
    "tag": "h3",
    "class": "filter__heading",
    "text": "Filters"
  },
  "checkboxes": [
    {
      "class": "",
      "href": "#",
      "label": {
        "text": "Value 1"
      }
    },
    {
      "class": "checkbox--link-checked",
      "href": "#",
      "label": {
        "text": "Value 2"
      }
    },
    {
      "class": "",
      "href": "#",
      "label": {
        "text": "Value 3"
      }
    }
  ]
}
  • Content: 
    $filter__padding\@xl                        : 0 $spacer--medium !default;
$filter__transition                         : $transition-base !default;
$filter__heading-font-family                : $font-family-base !default;
$filter__heading-font-size                  : $font-size-large !default;
$filter__heading-text-transform             : none !default;
$filter__heading-margin                     : 0 !default;
$filter__content-padding                    : 0 0 $spacer--medium !default;
$filter__content-padding\@medium            : 0 0 $spacer--medium $spacer--medium !default;
$filter__content-padding\@large             : 0 0 $spacer--medium 0 !default;
$filter__content-overflow-y                 : auto !default;
$filter__label-wrapper-padding\@medium      : 0 0 0 $spacer--medium !default;
$filter__label-wrapper-padding\@large       : 0 !default;

// checkbox
$filter__content-max-height--checkbox       : 195px !default;
$filter__label-font-size--checkbox          : $font-size-medium !default;
$filter__label-text-transform--checkbox     : uppercase !default;
$filter__margin--checkbox-link              : 0 0 0 $spacer--extra-small !default;
$filter__margin--checkbox-link\@medium      : 0 !default;
$filter__label-font-wieght-checked--checkbox: $font-weight-bold !default;

// Swatch
$filter__swatch-size\@large                 : 25% !default;
$filter__swatch-margin                      : 0 $spacer $spacer--medium 0 !default;
$filter__swatch-margin\@large               : 0 0 $spacer--medium 0 !default;
$filter__swatch-option-size                 : 48px !default;
$filter__swatch-option-background           : $white !default;
$filter__swatch-option-color                : $color-primary !default;
$filter__swatch-option-border               : $border-base !default;
$filter__swatch-option-border-color-hover   : $color-primary !default;
$filter__swatch-option-border-color--active : $color-primary !default;

// Color
$filter__color-padding                      : 0 !default;
$filter__color-size\@large                  : auto !default;
$filter__color-option-width                 : 48px !default;
$filter__color-option-height                : auto !default;
$filter__color-option-margin                : 0 $spacer $spacer 0 !default;
$filter__color-option-border                : $border-base !default;
$filter__color-option-after-top             : 0 !default;
$filter__color-option-after-left            : 0 !default;
$filter__color-option-after-size            : 48px !default;
$filter__color-option-after-border-radius   : 0 !default;
$filter__color-option-after-border-color    : $color-primary !default;
$filter__color-sample-size                  : 32px !default;
$filter__color-sample-margin                : $spacer !default;
$filter__color-sample-border                : $border-base !default;
$filter__color-sample-border-radius         : 0 !default;
$filter__color-label-font-size              : $font-size-small !default;
$filter__color-label-color                  : $gray-darkest !default;

// category variant
$filter__padding--category\@large           : 0 !default;
$filter__border--category\@large            : $border-base !default;
$filter__border-width--category\@large      : 0 0 $border-width-base 0 !default;
  • URL: /components/raw/filter/_filter-variables.scss
  • Filesystem Path: build/components/Organisms/filter/_filter-variables.scss
  • Size: 3.3 KB
  • Content: 
    @import 'filter-variables';

.filter {
    &--checkbox {
        .filter__content {
            max-height: $filter__content-max-height--checkbox;
        }

        .checkbox__label {
            color: $color-primary;
            font-size: $filter__label-font-size--checkbox;
            text-transform: $filter__label-text-transform--checkbox;
        }
        .checkbox--link {
            margin: $filter__margin--checkbox-link;
            @include mq($screen-m) {
                margin: $filter__margin--checkbox-link\@medium;
            }
        }
        .checkbox--link-checked {
            .checkbox__label {
                font-weight: $filter__label-font-wieght-checked--checkbox;
            }
        }
    }

    &--category {
        @include mq($screen-l) {
            padding: $filter__padding--category\@large;
            border: $filter__border--category\@large;
            border-width: $filter__border-width--category\@large;
        }
    }

    &__heading {
        margin: $filter__heading-margin;
        font-family: $filter__heading-font-family;
        font-size: $filter__heading-font-size;
        text-transform: $filter__heading-text-transform;
    }

    &__content {
        position: relative;
        overflow-y: $filter__content-overflow-y;
        padding: $filter__content-padding;
        @include mq($screen-m) {
            padding: $filter__content-padding\@medium;
        }
        @include mq($screen-l) {
            padding: $filter__content-padding\@large;
        }
    }

    &__label-wrapper {
        display: flex;
        @include mq($screen-m) {
            padding: $filter__label-wrapper-padding\@medium;
        }
        @include mq($screen-l) {
            padding: $filter__label-wrapper-padding\@large;
        }
    }

    &__list {
        display: flex;
        flex-wrap: wrap;
    }

    &__swatch-item {
        margin: $filter__swatch-margin;

        @include mq($screen-l) {
            display: flex;
            justify-content: flex-start;
            flex-basis: $filter__swatch-size\@large;
            margin: $filter__swatch-margin\@large;
        }
    }

    &__swatch-option {
        display: flex;
        justify-content: center;
        align-items: center;
        min-width: $filter__swatch-option-size;
        min-height: $filter__swatch-option-size;
        border: $filter__swatch-option-border;
        background-color: $filter__swatch-option-background;
        color: $filter__swatch-option-color;
        transition: $filter__transition;
        cursor: pointer;
        text-decoration: none;

        &:hover,
        &.focus-visible {
            text-decoration: none;
            border-color: $filter__swatch-option-border-color-hover;
            font-weight: $font-weight-bold;
            color: $color-primary;
        }

        &--active {
            font-weight: $font-weight-bold;
            border-color: $filter__swatch-option-border-color--active;
        }
    }

    &__color-item {
        padding: $filter__color-padding;

        @include mq($screen-l) {
            display: flex;
            justify-content: flex-start;
            flex-basis: $filter__color-size\@large;
        }

        &.selected {
            .filter__color-option {
                &:after {
                    border-color: $filter__color-option-after-border-color;
                }
            }
        }
    }

    &__color-option {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        max-width: $filter__color-option-width;
        width: $filter__color-option-width;
        height: $filter__color-option-height;
        max-height: $filter__color-option-height;
        text-decoration: none;
        margin: $filter__color-option-margin;

        &:after {
            content: '';
            position: absolute;
            top: $filter__color-option-after-top;
            left: $filter__color-option-after-left;
            width: $filter__color-option-after-size;
            height: $filter__color-option-after-size;
            background-color: transparent;
            border: $filter__color-option-border;
            border-radius: $filter__color-option-after-border-radius;
            transition: $filter__transition;
        }

        &--active,
        &:hover,
        &.focus-visible {
            text-decoration: none;

            &:after {
                border-color: $filter__color-option-after-border-color;
            }
        }
    }

    &__color-sample {
        width: $filter__color-sample-size;
        height: $filter__color-sample-size;
        margin: $filter__color-sample-margin;
        border: $filter__color-sample-border;
        border-radius: $filter__color-sample-border-radius;
    }

    &__color-label {
        max-width: 100%;
        font-size: $filter__color-label-font-size;
        color: $filter__color-label-color;
        word-break: break-all;
        text-align: center;

        @include visually-hidden();
    }
}
  • URL: /components/raw/filter/_filter.scss
  • Filesystem Path: build/components/Organisms/filter/_filter.scss
  • Size: 5.1 KB

There are no notes for this item.