Skip to content

Menu Action Buttons

Styles for menu action buttons in main_navigation module.

Structurally .menu-action-button element contains following element:

  • .menu-action-button__icon

LESS

You can modify any menu action button less variable in your User Less section to change menu action button styles.

Variables used to style menu action button.

@menuActionButtonFontColorPrimary: @menuLinkColorPrimary;
@menuActionButtonFontColorSecondary: @menuLinkColorSecondary;
@menuGoBackActionButtonColor: @menuLinkColorSecondary;

@menuGoBackActionButtonFontSizeInPx: @fontSizeInPxXS;
@menuGoBackActionButtonMobileFontSizeInPx: @fontSizeInPxS;

Standard menu action button mixins.

.decorate-menu-action-button-icon(@color: @menuActionButtonFontColorPrimary) {
  color: @color;
  stroke: @color;
}

Standard menu action button styles.

.menu-action-button {
    cursor: pointer;
    display: flex;
    align-items: center;

    &_icon-spread {
        justify-content: space-between;
    }

    &_close {
        .menu-action-button__icon {
            .decorate-menu-action-button-icon(@menuActionButtonFontColorPrimary);
        }

        .pixel-to-rem(padding, 28);

        cursor: pointer;
    }

    &__icon {
        .icon();
        .decorate-menu-action-button-icon();

        &_left {
            .pixel-to-rem(margin-right, 8);
        }

        &_right {
            .pixel-to-rem(margin-left, 4);
        }
    }

    &_go-back {
        .menu-action-button__icon {
            .decorate-menu-action-button-icon(@menuGoBackActionButtonColor);
        }

        .link();
        .font-size(@menuGoBackActionButtonFontSizeInPx);
    }
}

@media screen and (max-width: (@breakPointXs - 1)) {
    .menu-action-button {
        justify-content: space-between;

        &_close,
        &_go-back {
            text-decoration: none;

            padding: @globalSpacing;

            .font-size(@menuGoBackActionButtonMobileFontSizeInPx);

            .menu-action-button__icon {
                .icon-l();
            }
        }

        &__icon {
            .icon-m();
        }
    }
}