Skip to content

Side Menu Categories

Styles for a side menu categories used in side_menu_categories module.

Structurally .side-menu-categories__list contains following elements:

  • .side-menu-categories__list-go-back-link
  • .side-menu-categories__list-item
  • .side-menu-categories__list-item_secondary
  • .side-menu-categories__list-item-link
  • .side-menu-categories__list-item-link_secondary
  • .side-menu-categories__list-item-link_active
  • .side-menu-categories__list-level-1

LESS

You can modify any side menu categories LESS variable in your User Less section to change the styles.

Side menu categories variables

Variables used to style the side menu categories.

@sideMenuCategoriesListGoBackLinkFontSize: @fontSizeInPxXS;
@sideMenuCategoriesListGoBackLinkLineHeight: @lineHeightInPxXS;
@sideMenuCategoriesListGoBackLinkMarginBottom: @globalSpacing * 0.5;

@sideMenuCategoriesListItemFontSize: @fontSizeInPxS;
@sideMenuCategoriesListItemLineHeight: @lineHeightInPxS;
@sideMenuCategoriesListItemMarginTop: @globalSpacing * 0.25;
@sideMenuCategoriesListItemMarginBottom: @globalSpacing * 0.25;

@sideMenuCategoriesListItemSecondaryColor: @primaryColor;
@sideMenuCategoriesListItemSecondaryFontWeight: @fontWeightBold; 

@sideMenuCategoriesListItemLinkFontWeight: @fontWeightNormal;
@sideMenuCategoriesListItemLinkColor: @globalFontColor;
@sideMenuCategoriesListItemLinkTextDecoration: none;

@sideMenuCategoriesListItemLinkColorHover: @globalFontColorSecondary;

@sideMenuCategoriesListItemLinkSecondaryColor: @linkColorPrimary;
@sideMenuCategoriesListItemLinkSecondaryColorHover: @linkColorPrimaryHover;

@sideMenuCategoriesListItemLinkActiveFontWeight: @fontWeightBold;
@sideMenuCategoriesListItemLinkActiveColor: @primaryColor;

@sideMenuCategoriesListItemLinkActiveListBorderLeft: 1px solid @neutralColors100;

@sideMenuCategoriesListLevelPaddingLeft: @globalSpacing * 0.25;

For example, to change the default font-size of the side menu categories, modify the @sideMenuCategoriesListItemFontSize variable:

@sideMenuCategoriesListItemFontSize: 18px;

Side menu categories styles

Here are standard side menu categories styles.

.side-menu-categories {
    &__list {
        .side-menu-categories__list-item-link_active > ul {
            border-left: @sideMenuCategoriesListItemLinkActiveListBorderLeft;
        }

        &-go-back-link {
            .font-size(@sideMenuCategoriesListGoBackLinkFontSize);
            .line-height(@sideMenuCategoriesListGoBackLinkLineHeight);

            display: block;
            margin-bottom: @sideMenuCategoriesListGoBackLinkMarginBottom;
        }

        &-item {
            .font-size(@sideMenuCategoriesListItemFontSize);
            .line-height(@sideMenuCategoriesListItemLineHeight);

            margin-top: @sideMenuCategoriesListItemMarginTop;
            margin-bottom: @sideMenuCategoriesListItemMarginBottom;

            &_secondary {
                color: @sideMenuCategoriesListItemSecondaryColor;
                font-weight: @sideMenuCategoriesListItemSecondaryFontWeight;
            }

            &-link {
                font-weight: @sideMenuCategoriesListItemLinkFontWeight;
                color: @sideMenuCategoriesListItemLinkColor;
                text-decoration: @sideMenuCategoriesListItemLinkTextDecoration;

                &:hover {
                    color: @sideMenuCategoriesListItemLinkColorHover;
                }

                &_secondary {
                    color: @sideMenuCategoriesListItemLinkSecondaryColor;

                    &:hover {
                        color: @sideMenuCategoriesListItemLinkSecondaryColorHover;
                    }
                }

                &_active {
                    font-weight: @sideMenuCategoriesListItemLinkActiveFontWeight;
                    color: @sideMenuCategoriesListItemLinkActiveColor;

                    &:hover {
                        color: @sideMenuCategoriesListItemLinkActiveColor;
                    }
                }
            }

            .side-menu-categories__list-level(@i) when (@i > 1) {
                padding-left: (@i - 1) * @sideMenuCategoriesListLevelPaddingLeft;
            }

            .side-menu-categories__list-level(2);
            .side-menu-categories__list-level(3);
            .side-menu-categories__list-level(4);
            .side-menu-categories__list-level(5);
            .side-menu-categories__list-level(6);
        }

        .side-menu-categories__list-level-1 {
            padding-left: 0;
        }
    }
}

Modules reference