Alpaca components for Magento 2

Filter: Category 

<div class="filter filter--category ">
    <ul class="list categories-list">
        <li class="list__item categories-list__item">
            <a href="#" class="
                        link
                        categories-list__link
                    " aria-current="true">
                New In
            </a>
        </li>
        <li class="list__item categories-list__item">
            <a href="#" class="
                        link
                        categories-list__link
                    ">
                Boots
            </a>
        </li>
        <li class="list__item categories-list__item">
            <a href="#" class="
                        link
                        categories-list__link
                    ">
                Flat sandals
            </a>
        </li>
        <li class="list__item categories-list__item">
            <a href="#" class="
                        link
                        categories-list__link
                    ">
                Flat shoes
            </a>
        </li>
        <li class="list__item categories-list__item">
            <a href="#" class="
                        link
                        categories-list__link
                    ">
                Heels
            </a>
        </li>
        <li class="list__item categories-list__item">
            <a href="#" class="
                        link
                        categories-list__link
                    ">
                Loafers
            </a>
        </li>
        <li class="list__item categories-list__item">
            <a href="#" class="
                        link
                        categories-list__link
                    ">
                Sandals
            </a>
        </li>
        <li class="list__item categories-list__item">
            <a href="#" class="
                        link
                        categories-list__link
                    ">
                Sliders &amp; Flip Flops
            </a>
        </li>
        <li class="list__item categories-list__item">
            <a href="#" class="
                        link
                        categories-list__link
                    ">
                Socks &amp; Tights
            </a>
        </li>
        <li class="list__item categories-list__item">
            <a href="#" class="
                        link
                        categories-list__link
                    ">
                Trainers
            </a>
        </li>
    </ul>

</div>
 
<div class="filter filter--category {{ class }}">
    {{ render '@categories-list' }}
</div>
 
{
  "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"
      }
    }
  ],
  "class": ""
}
  • 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

No notes defined.