Message

Use message styles to add additional styles to your message class elements: tooltip and hint. It does not have it's own class but mixins that are used within message class elements' stylesheets.

LESS

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

Message variables

Variables used for message mixins.

@messageContentMaxWidth: 308px;
@messageContentBorderRadius: 4;
@messageContentMargin: 0;
@messageContentAnimationDuration: 0.15s;
@messageContentTransition: 0.15s opacity;
@messageZIndex: 3;

If you want to change message styles, you can just change the variables. To change default border-radius just modify @messageContentBorderRadius variable.

@messageContentBorderRadius: 100%;

Message mixins

Here are tall the message mixins.

.message-decorate
    (
    @borderRadius: @messageContentBorderRadius,
    @margin: @messageContentMargin,
    @messageContentAnimationDuration: @messageContentAnimationDuration,
    @messageContentTransition: @messageContentTransition
    ) {
    &__content {
        .pixel-to-rem(border-radius, @messageContentBorderRadius);
        .pixel-to-rem(margin, @messageContentMargin);

        z-index: @messageZIndex;

        animation: revealMessage @messageContentAnimationDuration;
        transition: @messageContentTransition;
    }

    &_removed {
        opacity: 0;
    }
}

@keyframes revealMessage {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

Used style references

• tooltips
• hints