cruc components for Magento 2

Filters 

<div class="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="filters__item">
        <button class="button button--icon button--icon-light modal-trigger filters__trigger" type="button" aria-label="Open categories filter" data-modal-trigger="filters-category" aria-expanded="true">

        <span class="button__text ">
            Category
        </span>

            <svg
    class="icon "
    
        role="presentation"
        focusable="false"
>
    <use xlink:href="/images/icons-sprite.svg#angle-right"></use>
</svg>

</button>

        <div role="dialog" aria-hidden="true" id="filters-category" data-modal="filters-category" class="modal filters__modal modal--tertiary" aria-labelledby="filters-categories-title">
            <div role="document" class="modal__container filters__container" tabindex="0">
                <div class="modal__content filters__content">
                    <div class="modal__top filters__content-top">
                        <h2 class="modal__heading filters__heading" id="filters-categories-title">
                            Category
                        </h2>

                    </div>

                    <div class="modal__middle filters__content-middle">

                        <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>

                </div>

                <button class="button button--icon button--rotate-icon filters__close-button modal__close-button" type="button" aria-label="Close filters modal">
        <svg
    class="icon button__icon modal__close-button-icon"
    
        role="presentation"
        focusable="false"
>
        <title>Close</title>
    <use xlink:href="/images/icons-sprite.svg#close"></use>
</svg>

</button>

            </div>
        </div>
        <script type="text/javascript">
            new Modal(document.querySelector('[data-modal-trigger="filters-category"]'));
        </script>

    </div>
    <div class="filters__item">
        <button class="button button--icon button--icon-light modal-trigger filters__trigger filters__trigger--open" type="button" aria-label="Open shopping options" data-modal-trigger="filters-options" aria-expanded="true">

        <span class="button__text ">
            Shopping Options
        </span>

            <svg
    class="icon "
    
        role="presentation"
        focusable="false"
>
    <use xlink:href="/images/icons-sprite.svg#angle-right"></use>
</svg>

</button>

        <div role="dialog" aria-hidden="true" id="filters-options" data-modal="filters-options" class="modal filters__modal modal--tertiary" aria-labelledby="filters-option-title">
            <div role="document" class="modal__container filters__container" tabindex="0">
                <div class="modal__content filters__content">
                    <div class="modal__top filters__content-top">
                        <h2 class="modal__heading filters__heading" id="filters-option-title">
                            Shopping options
                        </h2>

                    </div>

                    <div class="modal__middle filters__content-middle">

                        <div class="dropdown-list filters__dropdown" id="test-id">
                            <ul class="dropdown-list__list">
                                <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
        
    ">
                                    <div class="dropdown-list__label-wrapper filter__label-wrapper">
                                        <button type="button" class="dropdown-list__label filter__label" aria-controls="swatch" aria-expanded="true">
            <h3 class="filter__heading" >
    Swatch
</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="swatch" 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__swatch-item">
                                                <a href="#" class="filter__swatch-option ">
                        XS
                    </a>
                                            </li>
                                            <li class="filter__swatch-item">
                                                <a href="#" class="filter__swatch-option filter__swatch-option--active">
                        S
                    </a>
                                            </li>
                                            <li class="filter__swatch-item">
                                                <a href="#" class="filter__swatch-option ">
                        M
                    </a>
                                            </li>
                                            <li class="filter__swatch-item">
                                                <a href="#" class="filter__swatch-option ">
                        L
                    </a>
                                            </li>
                                            <li class="filter__swatch-item">
                                                <a href="#" class="filter__swatch-option ">
                        XL
                    </a>
                                            </li>
                                        </ul>
                                    </div>
                                </li>

                                <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--range
        
    ">
                                    <div class="dropdown-list__label-wrapper filter__label-wrapper">
                                        <button type="button" class="dropdown-list__label" aria-controls="range" aria-expanded="false">
            <h3 class="filter__heading" >
    Range
</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="range" 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>

                                        <div class="range-filter ">
                                            <div class="range-filter__slider " data-min="0" data-max="1000" data-show-float="0"></div>
                                            <div class="range-filter__inputs-wrapper ">
                                                <div class="input range-filter__input range-filter__input--lower">
                                                    <label class="
            label
            input__label
            range-filter__label
        " for="range-filter-min">
        Minimum value
    </label>
                                                    <input class="input__field range-filter__field range-filter__field--lower" id="range-filter-min" name="range-filter-min" type="" placeholder="">
                                                </div>

                                                <span class="range-filter__suffix ">
            $
        </span>
                                                <span class="range-filter__dash">-</span>
                                                <div class="input range-filter__input range-filter__input--upper">
                                                    <label class="
            label
            input__label
            range-filter__label
        " for="range-filter-max">
        Maximum value
    </label>
                                                    <input class="input__field range-filter__field range-filter__field--upper" id="range-filter-max" name="range-filter-max" type="" placeholder="">
                                                </div>

                                                <span class="range-filter__suffix ">
            $
        </span>
                                            </div>
                                        </div>
                                        <button class="button range-filter__button button--fluid margin-vc-sm" type="button" data-min="0" data-max="1000" data-attribute="price" href="#" data-filter-url="#">
    Apply
</button>

                                        <script src="/components/raw/range/range.js"></script>

                                    </div>
                                </li>

                            </ul>
                        </div>
                        <script type="text/javascript">
                            new DropdownList(document.getElementById('test-id'));
                        </script>

                    </div>

                </div>

                <button class="button button--icon button--rotate-icon modal__close-button filters__close-button" type="button" aria-label="Close filters modal">
        <svg
    class="icon button__icon modal__close-button-icon"
    
        role="presentation"
        focusable="false"
>
        <title>Close</title>
    <use xlink:href="/images/icons-sprite.svg#close"></use>
</svg>

</button>

            </div>
        </div>
        <script type="text/javascript">
            new Modal(document.querySelector('[data-modal-trigger="filters-options"]'));
        </script>

    </div>
</div>
 
<div class="filters">
    {{ render '@active-filters' }}
    {{#if filterCategoryModal}}
        <div class="filters__item">
            {{ render '@button--icon' openButton }}
            {{ render '@modal--tertiary' filterCategoryModal }}
        </div>
    {{/if}}
    {{#if filterOptionsModal}}
        <div class="filters__item">
            {{ render '@button--icon' openButtonFilters }}
            {{ render '@modal--tertiary' filterOptionsModal }}
        </div>
    {{/if}}
</div>
 
{
  "dropdownListId": "test-id",
  "categoryHeading": "Category",
  "filtersHeading": "Shopping options",
  "filterCategoryModal": {
    "modal": {
      "class": "filters__modal modal--tertiary",
      "id": "filters-category",
      "attributes": "aria-labelledby=\"filters-categories-title\""
    },
    "modalContainer": {
      "class": "filters__container"
    },
    "modalContent": {
      "class": "filters__content"
    },
    "trigger": false,
    "buttonClose": {
      "class": "button--rotate-icon filters__close-button modal__close-button",
      "tag": "button",
      "attributes": "type=\"button\" aria-label=\"Close filters modal\"",
      "icon": {
        "id": "close",
        "class": "button__icon modal__close-button-icon",
        "hidden": true
      }
    },
    "modalTop": true,
    "modalTopClass": "filters__content-top",
    "heading": {
      "attributes": "id=\"filters-categories-title\"",
      "tag": "h2",
      "class": "filters__heading",
      "text": "Category"
    },
    "modalMiddle": true,
    "modalMiddleClass": "filters__content-middle",
    "modalComponent": {
      "content": "filter--category"
    },
    "modalBottom": false
  },
  "filterOptionsModal": {
    "script": true,
    "modal": {
      "class": "filters__modal modal--tertiary",
      "id": "filters-options",
      "attributes": "aria-labelledby=\"filters-option-title\""
    },
    "modalContainer": {
      "class": "filters__container"
    },
    "modalContent": {
      "class": "filters__content"
    },
    "trigger": false,
    "buttonClose": {
      "class": "button--rotate-icon modal__close-button filters__close-button",
      "tag": "button",
      "attributes": "type=\"button\" aria-label=\"Close filters modal\"",
      "icon": {
        "id": "close",
        "class": "button__icon modal__close-button-icon",
        "hidden": true
      }
    },
    "modalTop": true,
    "modalTopClass": "filters__content-top",
    "heading": {
      "attributes": "id=\"filters-option-title\"",
      "tag": "h2",
      "class": "filters__heading",
      "text": "Shopping options"
    },
    "modalMiddle": true,
    "modalMiddleClass": "filters__content-middle",
    "modalComponent": {
      "content": "filters-content"
    },
    "modalBottom": false
  },
  "openButton": {
    "class": "button--icon-light modal-trigger filters__trigger",
    "tag": "button",
    "attributes": "type=\"button\" aria-label=\"Open categories filter\" data-modal-trigger=\"filters-category\" aria-expanded=\"true\"",
    "text": "Category",
    "iconAfter": {
      "id": "angle-right",
      "hidden": true
    }
  },
  "openButtonFilters": {
    "class": "button--icon-light modal-trigger filters__trigger filters__trigger--open",
    "tag": "button",
    "attributes": "type=\"button\" aria-label=\"Open shopping options\" data-modal-trigger=\"filters-options\" aria-expanded=\"true\"",
    "text": "Shopping Options",
    "iconAfter": {
      "id": "angle-right",
      "hidden": true
    }
  },
  "filterDropdown": {
    "script": true,
    "dropdowns": [
      {
        "itemTag": "div",
        "itemAttributes": "aria-expanded=\"false\" role=\"button\"",
        "contentElement": "filter--checkbox"
      },
      {
        "itemTag": "div",
        "itemAttributes": "aria-expanded=\"false\" role=\"button\"",
        "contentElement": "filter--checkbox"
      },
      {
        "itemTag": "div",
        "itemAttributes": "aria-expanded=\"false\" role=\"button\"",
        "contentElement": "filter--checkbox"
      },
      {
        "itemTag": "div",
        "itemAttributes": "aria-expanded=\"false\" role=\"button\"",
        "contentElement": "filter--range"
      }
    ]
  }
}
  • Content: 
    $filters__item-margin                : 0 !default;
$filters__item-margin\@large         : 0 0 64px 0 !default;

$filters__content-width\@medium      : 67% !default;
$filters__content-width\@large       : 100% !default;
$filters__content-margin\@medium     : $spacer--medium auto !default;
$filters__content-margin\@large      : 0 !default;

$filters__container-padding\@large   : 0 !default;

$filters__trigger-bg-color           : transparent !default;
$filters__trigger-padding            : $spacer--small $spacer--medium $spacer--small 0 !default;
$filters__trigger-padding\@medium    : $spacer--small $spacer--medium !default;
$filters__trigger-text-padding       : 0 !default;
$filters__trigger-text-color         : $color-primary !default;
$filters__trigger-icon-size--open    : 24px !default;
$filters__trigger-icon-fill--open    : $color-secondary !default;
$filters__trigger-border             : $border-base !default;
$filters__trigger-border-width       : 0 0 1px 0 !default;
$filters__trigger-text-transform     : none !default;
$filters__trigger-font-weight        : $font-weight-bold !default;

$filters__heading-font-family        : $font-family-base !default;
$filters__heading-font-size          : $font-size-large !default;
$filters__heading-font-size\@medium  : $font-size-extra-large !default;
$filters__heading-font-weight        : $font-weight-bold !default;
$filters__heading-margin             : 0 !default;
$filters__heading-padding\@large     : $spacer $spacer $spacer 0 !default;
$filters__heading-padding\@xl        : $spacer $spacer--medium $spacer !default;

$filters__modal-top-padding          : 0 0 $spacer 0 !default;
$filters__modal-middle-padding       : $spacer--extra-large 0 !default;
$filters__modal-middle-padding\@large: 0 !default;
$filters__modal-top-padding\@large   : $filters__modal-top-padding !default;
$filters__border-width\@large        : 0 !default;
  • URL: /components/raw/filters/_filters-variables.scss
  • Filesystem Path: build/components/Organisms/filters/_filters-variables.scss
  • Size: 1.9 KB
  • Content: 
    @import 'filters-variables';

.filters {
    &__item {
        margin: $filters__item-margin;

        @include mq($screen-l) {
            margin: $filters__item-margin\@large;
        }
    }

    &__container {
        .modal & {
            @include mq($screen-l) {
                height: auto;
                animation: none;
                padding: $filters__container-padding\@large;
                max-height: 100%;
            }
        }
    }

    &__modal {
        @include mq($screen-l) {
            display: block;
            position: static;
            visibility: visible;
            opacity: 1;
            height: auto;
            padding: 0;
            background-color: $white;
        }
    }

    &__content {
        position: relative;

        @include mq($screen-m) {
            width: $filters__content-width\@medium;
            margin: $filters__content-margin\@medium;
        }

        @include mq($screen-l) {
            width: $filters__content-width\@large;
            margin: $filters__content-margin\@large;
        }
    }

    &__trigger {
        width: 100%;
        justify-content: space-between;
        padding: $filters__trigger-padding;
        border: $filters__trigger-border;
        border-width: $filters__trigger-border-width;
        background-color: $filters__trigger-bg-color;

        @include mq($screen-m) {
            padding: $filters__trigger-padding\@medium;
        }

        @include mq($screen-l) {
            display: none;
        }

        > * {
            pointer-events: none;
        }

        .icon {
            width: $filters__trigger-icon-size--open;
            height: $filters__trigger-icon-size--open;
            fill: $filters__trigger-icon-fill--open;
        }

        .button__text {
            color: $filters__trigger-text-color;
            padding: $filters__trigger-text-padding;
            text-transform: $filters__trigger-text-transform;
            font-weight: $filters__trigger-font-weight;
        }
    }

    &__heading,
    &__trigger {
        font-family: $filters__heading-font-family;
        font-size: $filters__heading-font-size;
        font-weight: $filters__heading-font-weight;
        margin: $filters__heading-margin;

        @include mq($screen-m) {
            font-size: $filters__heading-font-size\@medium;
        }

        @include mq($screen-l) {
            padding: $filters__heading-padding\@large;
        }
    }

    &__content-top {
        padding: $filters__modal-top-padding;

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

    &__content-middle {
        padding: $filters__modal-middle-padding;
        @include mq($screen-l) {
            padding: $filters__modal-middle-padding\@large;
            overflow: initial;
        }
    }

    &__close-button {
        @include mq($screen-l) {
            display: none;
        }
    }
}
  • URL: /components/raw/filters/_filters.scss
  • Filesystem Path: build/components/Organisms/filters/_filters.scss
  • Size: 3 KB

There are no notes for this item.