snurky components for Magento 2

Filter: Color 

<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="color" aria-expanded="true">
            <h3 class="filter__heading">
                Color
            </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="color" class="dropdown-list__content filter__content " aria-hidden="false">
        <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 filter__list">
            <li class="filter__color-item">
                <a href='#' class="filter__color-option filter__color-option--active">
                    <div class="filter__color-sample" style="background: #000"></div>
                    <span class="filter__color-label">
                        Black
                    </span>
                </a>
            </li>
            <li class="filter__color-item">
                <a href='#' class="filter__color-option filter__color-option">
                    <div class="filter__color-sample" style="background: red"></div>
                    <span class="filter__color-label">
                        Red
                    </span>
                </a>
            </li>
            <li class="filter__color-item">
                <a href='#' class="filter__color-option filter__color-option">
                    <div class="filter__color-sample" style="background: #5cb85c"></div>
                    <span class="filter__color-label">
                        Green
                    </span>
                </a>
            </li>
            <li class="filter__color-item">
                <a href='#' class="filter__color-option filter__color-option">
                    <div class="filter__color-sample" style="background: #0275d8"></div>
                    <span class="filter__color-label">
                        Blue
                    </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="true"
        >
            {{ render '@heading' title }}
            {{ render '@icon' collapseIcon }}
        </button>
    </div>
    <div
        id="{{ id }}"
        class="dropdown-list__content filter__content {{ contentClass }}"
        aria-hidden="false"
    >
        {{ render '@more-info' }}
        <ul class="list filter__list">
            {{#each options }}
                <li class="filter__color-item">
                    <a
                        href='{{ href }}'
                        class="filter__color-option {{ class }}"
                    >
                        <div
                            class="filter__color-sample"
                            {{{ attributes }}}
                        ></div>
                        <span class="filter__color-label">
                            {{ label }}
                        </span>
                    </a>
                </li>
            {{/each }}
        </ul>
    </div>
</li>
 
{
  "id": "color",
  "collapseIcon": {
    "class": "dropdown-list__icon",
    "id": "angle-down",
    "title": "Arrow down",
    "hidden": true
  },
  "contentClass": "",
  "title": {
    "tag": "h3",
    "class": "filter__heading",
    "text": "Color"
  },
  "checkboxes": [
    {
      "class": "",
      "href": "#",
      "label": {
        "text": "Value 1"
      }
    },
    {
      "class": "checkbox--link-checked",
      "href": "#",
      "label": {
        "text": "Value 2"
      }
    },
    {
      "class": "",
      "href": "#",
      "label": {
        "text": "Value 3"
      }
    }
  ],
  "options": [
    {
      "href": "#",
      "class": "filter__color-option--active",
      "attributes": "style=\"background: #000\"",
      "label": "Black"
    },
    {
      "href": "#",
      "class": "filter__color-option",
      "attributes": "style=\"background: red\"",
      "label": "Red"
    },
    {
      "href": "#",
      "class": "filter__color-option",
      "attributes": "style=\"background: #5cb85c\"",
      "label": "Green"
    },
    {
      "href": "#",
      "class": "filter__color-option",
      "attributes": "style=\"background: #0275d8\"",
      "label": "Blue"
    }
  ]
}
  • 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-selected-border-color: $color-primary !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;
        }

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

    &__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.3 KB

There are no notes for this item.