cruc components for Magento 2

Active Filters 

<div class="active-filters ">
    <h2 class="active-filters__heading">
        Now Shopping by
    </h2>

    <ul class="list">
        <li class="active-filters__item list__item ">
            <a href="#" class="active-filters__remove button button--icon" aria-label="Disable filter: Label - Value" title="Disable filter: Label - Value">
                    <svg
    class="icon "
    
        role="presentation"
        focusable="false"
>
        <title>Close</title>
    <use xlink:href="/images/icons-sprite.svg#close"></use>
</svg>

                </a>
            <div class="active-filters__description">
                <span class="active-filters__label">
                        label name:&nbsp;
                    </span>
                <span class="active-filters__value">
                        some value
                    </span>
            </div>
        </li>
        <li class="active-filters__item list__item ">
            <a href="#" class="active-filters__remove button button--icon" aria-label="Disable filter: Label - Value" title="Disable filter: Label - Value">
                    <svg
    class="icon "
    
        role="presentation"
        focusable="false"
>
        <title>Close</title>
    <use xlink:href="/images/icons-sprite.svg#close"></use>
</svg>

                </a>
            <div class="active-filters__description">
                <span class="active-filters__label">
                        label text which is long:&nbsp;
                    </span>
                <span class="active-filters__value">
                        another value little bit longer
                    </span>
            </div>
        </li>
        <li class="active-filters__item list__item ">
            <a href="#" class="active-filters__remove button button--icon" aria-label="Disable filter: Label - Value" title="Disable filter: Label - Value">
                    <svg
    class="icon "
    
        role="presentation"
        focusable="false"
>
        <title>Close</title>
    <use xlink:href="/images/icons-sprite.svg#close"></use>
</svg>

                </a>
            <div class="active-filters__description">
                <span class="active-filters__label">
                        short label:&nbsp;
                    </span>
                <span class="active-filters__value">
                        Not so short value text with some numbers 123123
                    </span>
            </div>
        </li>
    </ul>
    <a href="#" class="active-filters__clear-all button button--fluid button--secondary margin-top-l" title="Clear all filters">
        Clear All
    </a>
</div>
 
<div class="active-filters {{ class }}">
    {{ render '@heading' heading }}
    <ul class="list">
        {{# each filters }}
            <li class="active-filters__item list__item {{ class }}">
                <a
                    href="#"
                    class="active-filters__remove {{ buttonClass }}"
                    aria-label="{{ ariaLabel }}"
                    title="{{ ariaLabel }}"
                >
                    {{ render '@icon' ../removeIcon }}
                </a>
                <div class="active-filters__description">
                    <span class="active-filters__label">
                        {{ label }}:&nbsp;
                    </span>
                    <span class="active-filters__value">
                        {{ value }}
                    </span>
                </div>
            </li>
        {{/each}}
    </ul>
    <a
        href="{{ clear.href }}"
        class="active-filters__clear-all {{ clear.class }}"
        title="{{ clear.title }}"
    >
        {{ clear.text }}
    </a>
</div>
 
{
  "heading": {
    "tag": "h2",
    "class": "active-filters__heading",
    "text": "Now Shopping by"
  },
  "clear": {
    "href": "#",
    "text": "Clear All",
    "title": "Clear all filters",
    "class": "button button--fluid button--secondary margin-top-l"
  },
  "removeIcon": {
    "id": "close",
    "title": "Close",
    "hidden": true
  },
  "filters": [
    {
      "buttonClass": "button button--icon",
      "label": "label name",
      "value": "some value",
      "ariaLabel": "Disable filter: Label - Value"
    },
    {
      "buttonClass": "button button--icon",
      "label": "label text which is long",
      "value": "another value little bit longer",
      "ariaLabel": "Disable filter: Label - Value"
    },
    {
      "buttonClass": "button button--icon",
      "label": "short label",
      "value": "Not so short value text with some numbers 123123",
      "ariaLabel": "Disable filter: Label - Value"
    }
  ]
}
  • Content: 
    $active-filters__padding                    : 0 0 $spacer--semi-medium 0 !default;
$active-filters__padding\@large             : 0 0 64px 0 !default;
$active-filters__border                     : $border-base !default;
$active-filters__border-width               : 0 0 1px 0 !default;
$active-filters__border-width\@large        : 0 !default;

$active-filters__heading-font-family        : $font-family-base !default;
$active-filters__heading-font-weight        : $font-weight-bold !default;
$active-filters__headin-margin              : $spacer 0 $spacer--small !default;

$active-filters__remove-size                : 48px !default;
$active-filters__remove-margin              : 0 $spacer 0 0 !default;

$active-filters__item-padding               : 0 0 $spacer 0 !default;
$active-filters__description-width          : calc(100% - #{$active-filters__remove-size}) !default;

$active-filters__icon-fill                  : $red !default;
$active-filters__icon-fill--hover           : $gray-light !default;

$active-filters__label-color                : $color-primary !default;
$active-filters__label-font-weight          : $font-weight-bold !default;
$active-filters__label-text-transform       : none !default;
$active-filters__label-margin               : 0 $spacer--extra-small 0 0 !default;

$active-filters__value-color                : $color-primary !default;
$active-filters__value-font-weight          : $font-weight-normal !default;
$active-filters__value-text-transform       : none !default;

$active-filters__clear-all-max-width\@medium: 300px !default;
  • URL: /components/raw/active-filters/_active-filters-variables.scss
  • Filesystem Path: build/components/Organisms/active-filters/_active-filters-variables.scss
  • Size: 1.6 KB
  • Content: 
    @import 'active-filters-variables';

.active-filters {
    border: $active-filters__border;
    border-width: $active-filters__border-width;
    padding: $active-filters__padding;

    @include mq($screen-l) {
        padding: $active-filters__padding\@large;
        border-width: $active-filters__border-width\@large;
    }

    &__heading {
        font-family: $active-filters__heading-font-family;
        font-weight: $active-filters__heading-font-weight;
        margin: $active-filters__headin-margin;
    }
    &__item {
        display: flex;
        align-items: center;
        padding: $active-filters__item-padding;
    }

    &__description {
        display: flex;
        flex-flow: row wrap;
        width: $active-filters__description-width;
    }

    &__remove {
        margin: $active-filters__remove-margin;
        background-color: transparent;

        &:hover {
            .icon {
                fill: $active-filters__icon-fill--hover;
            }
        }

        .icon {
            fill: $active-filters__icon-fill;
        }
    }

    &__label {
        color: $active-filters__label-color;
        font-weight: $active-filters__label-font-weight;
        text-transform: $active-filters__label-text-transform;
        margin: $active-filters__label-margin;
    }

    &__value {
        color: $active-filters__value-color;
        font-weight: $active-filters__value-font-weight;
        text-transform: $active-filters__value-text-transform;
    }

    &__clear-all {
        @include mq($screen-m) {
            max-width: $active-filters__clear-all-max-width\@medium;
        }
    }
}
  • URL: /components/raw/active-filters/_active-filters.scss
  • Filesystem Path: build/components/Organisms/active-filters/_active-filters.scss
  • Size: 1.6 KB

There are no notes for this item.