Sorting

Use .sorting element to style elements related to the sorting module.

Structurally .sorting contains following elements:

• .sorting-list
• .sorting-list__option
• .sorting-list__link
• .sorting__sheet-opener
• .sorting__sheet
• .sorting__sheet__close
• .sorting__sheet-header
• .sorting__sheet-body

It also contains following class modifiers:

• .sorting-list__link_active

Example

Here is an example of sorting element usage.

HTML

<sorting-control
    class="sorting"
    id="sorting-123456"
>
    <!-- Sort select for larger breakpoints -->
    <div class="sort-select hidden-xs-only">
        <!-- sort_select macro output -->
    </div>

    <!-- Sheet opener button for responsive design -->
    <h-sheet-opener
        class="btn btn_outline btn_xs sorting__sheet-opener"
    >
        Sorting
    </h-sheet-opener>

    <!-- Sorting sidebar sheet -->
    <h-sheet id="sorting-sheet-123456" class="sorting__sheet" hidden>
        <h-sheet-header class="sorting__sheet-header">
            <h2 class="font_semibold">Sorting</h2>
            <h-sheet-close class="sorting__sheet__close btn btn_icon">
                <span class="sr-only">Close sorting</span>
            </h-sheet-close>
        </h-sheet-header>

        <h-sheet-body class="sorting__sheet-body">
            <ul class="sorting-list" aria-label="Sorting options">
                <li class="sorting-list__option">
                    <a class="sorting-list__link sorting-list__link_active" href="/products?sort=1">
                        Price: lowest first
                    </a>
                </li>
                <li class="sorting-list__option">
                    <a class="sorting-list__option__link" href="/products?sort=2">
                        Price: highest first
                    </a>
                </li>
            </ul>
        </h-sheet-body>
    </h-sheet>
</sorting-control>

LESS

You can modify any sorting less variable in your User Less section to change sorting styles.

Sorting variables

Variables used to style sorting.

@sortingSheetOpenerIconMarginRight: 0.625rem;
@sortingSheetOpenerColor: inherit;

@sortingListLinkPaddingVertical: @globalSpacing * 0.5;
@sortingListLinkPaddingHorizontal: @globalSpacing;
@sortingListOptionFontSize: 14;

@sortingOptionColor: @globalFontColor;
@sortingOptionColorHover: @primaryColor;
@sortingOptionColorActive: @primaryColor;
@sortingOptionBgColorHover: @neutralColors50;
@sortingOptionIconMarginHorizontal: 0.5625rem;

@sortingSheetHeaderBorderColor: @neutralColors100;
@sortingSheetBodyPaddingVertical: @globalSpacing;
@sortingSheetBodyPaddingHorizontal: 0;

If you want to change sorting styles, you can just change the variables. To change a default font-size of sorting options just modify @sortingListOptionFontSize variable.

@sortingListOptionFontSize: 16;

Sorting standard styles

Here are standard sorting styles.

.sorting {
    &-list {
        display: flex;
        flex-direction: column;

        &__option {
            display: flex;
            justify-content: space-between;
            flex-wrap: nowrap;
            width: 100%;

            &:has(a:hover, a:focus-visible) {
                background-color: @sortingOptionBgColorHover;
            }
        }

        &__link {
            display: flex;
            justify-content: space-between;
            width: 100%;
            text-decoration: none;
            color: @sortingOptionColor;
            padding: @sortingListLinkPaddingVertical @sortingListLinkPaddingHorizontal;
            .font-size(@sortingListOptionFontSize);
            line-height: 1.4;

            &_active {
                color: @sortingOptionColorActive;
                .weight-semibold();

                .icon {
                    margin-inline: @sortingOptionIconMarginHorizontal;
                    stroke: @sortingOptionColorActive;
                }
            }
        }
    }

    &__sheet-opener {
        &:focus-visible {
            outline: 2px solid @sortingOptionColorActive;
            outline-offset: 2px;
        }
        .icon {
            stroke: @sortingSheetOpenerColor;
            margin-right: @sortingSheetOpenerIconMarginRight;
        }

        .labeled-icon__signature {
            color: @sortingSheetOpenerColor;
        }
    }

    &__sheet {
        .sheet__header {
            padding: 1rem;
            border-bottom: 1px solid @sortingSheetHeaderBorderColor;
        }

        &__close {
            background-color: transparent;
        }

        .sheet__body {
            padding: @sortingSheetBodyPaddingVertical @sortingSheetBodyPaddingHorizontal;
        }
    }
}

Modules reference

• sorting