List Items Aggregator¶

Styles for list items aggregator that are used in list-items-aggregator webcomponent.

Structurally .list-items-aggregator contains following elements:

.list-items-aggregator__content
.list-items-aggregator__aggregated-item
.list-items-aggregator__list-item
.list-items-aggregator__icon

There is also a seperate element called .list-items-aggregator-content that contains following modifiers:

.list-items-aggregator-content_aggregated

Example¶

Here is an example of list items aggregator element usage. We also used JS aggregator classes. More informations about hem can be found in the webcomponent documentation.

HTML

<nav class="js__list-to-aggregate list-items-aggregator-content_aggregated">
    <ul class="js__list">
        <li>
            <div class="js__item-to-aggregate">Item 1</div>
        </li>

        <li>
            <div class="js__item-to-aggregate">Item 2</div>
        </li>

        <li>
            <div class="js__item-to-aggregate">Item 3</div>
        </li>

        <li>
            <div class="js__item-to-aggregate">Item 4</div>
        </li>

        <li class="js__list-items-aggregator-container">
            <list-items-aggregator
                name="main-nagivation-aggregator"
                list-selector=".js__menu-bar-list"
                class="list-items-aggregator"
            >
                <span slot="toggler">
                    More
                    <svg>
                        <use xlink:href="/assets/img/icons/symbol-defs.svg#icon-chevron-down"></use>
                    </svg>
                </span>
            </list-items-aggregator>
        </li>
    </ul>
</nav>

List items aggregator tags¶

The .list-items-aggregator classes were designed to be used with block elements like <nav>. However, you can use them with any other element and customize it to your own needs.

LESS¶

You can modify any list items aggregator less variable in your User Less section to change list items aggregator styles.

List items aggregator variables¶

Variables used to style list items aggregator.

@listItemsAggregatorBorderBottomWidth: 2px;
@listItemsAggregatorBorderColor: @primaryColors500;

@listItemsAggregatorContentBgColor: @neutralColors0;
@listItemsAggregatorContentBorderColor: @primaryColors500;
@listItemsAggregatorContentBorder: 1px solid @listItemsAggregatorContentBorderColor;

@listItemsAggregatorAggregatedItemPaddingVertical: 8;
@listItemsAggregatorAggregatedItemPaddingHorizontal: 16;
@listItemsAggregatorAggregatedItemFontSizeInPx: @fontSizeInPxS;
@listItemsAggregatorAggregatedItemLineHeightInPx: @lineHeightInPxS;

@listItemsAggregatorListItemHoverBgColor: @primaryColors500;
@listItemsAggregatorListItemHoverHoverAggregatedItemColor: @neutralColors0;

If you want to change list items aggregator styles, you can just change the variables. To change a default font-size of the aggregated items just modify @listItemsAggregatorAggregatedItemFontSizeInPx variable.

@listItemsAggregatorAggregatedItemFontSizeInPx: 40;

List items aggregator styles¶

Here are standard list items aggregator styles.

.list-items-aggregator {
    .dropdown__toggler {
        border-bottom: @listItemsAggregatorBorderBottomWidth solid transparent;
    }

    &_opened {
        .weight-semibold();

        .dropdown__toggler {
            border-color: @listItemsAggregatorBorderColor;
        }
    }

    &__content {
        background-color: @listItemsAggregatorContentBgColor;

        &.dropdown__content {
            border: @listItemsAggregatorContentBorder;
            border-radius: 0;

            padding: 0;
        }
    }

    &__aggregated-item {
        .pixel-to-rem(padding-top, @listItemsAggregatorAggregatedItemPaddingVertical);
        .pixel-to-rem(padding-right, @listItemsAggregatorAggregatedItemPaddingHorizontal);
        .pixel-to-rem(padding-bottom, @listItemsAggregatorAggregatedItemPaddingVertical);
        .pixel-to-rem(padding-left, @listItemsAggregatorAggregatedItemPaddingHorizontal);

        .font-size(@listItemsAggregatorAggregatedItemFontSizeInPx);
        .line-height(@listItemsAggregatorAggregatedItemLineHeightInPx);
    }

    &__list-item {
        &:hover {
            background-color: @listItemsAggregatorListItemHoverBgColor;

            .list-items-aggregator__aggregated-item {
                color: @listItemsAggregatorListItemHoverHoverAggregatedItemColor;
            }

            .list-items-aggregator__icon {
                stroke: @listItemsAggregatorListItemHoverHoverAggregatedItemColor;
            }
        }
    }

    &-content {
        &_aggregated {
            overflow-x: unset;
        }
    }
}

Webcomponents reference¶

list-items-aggregator