Magento UI library provides mixins for styling messages. There are 4 types of messages:
info
warning
error
success To configure styles of each type of message, global variables from variables.less are used. To apply the .lib-message() mixin you need to specify the type of message you want to apply styles to.
This is an informational message. To apply appropriate style you need to specify the info type to the .lib-message() mixin.
If there is no content on the page, for example on a category page with no products, a special system information message with class=”message info empty” is used. It inherits styles from information message by default. It can be styled to get unique appearance using .message.info.empty class.
.example-message-info {
.lib-message(info);
} This is a warning message. To apply appropriate style you need to specify warning type to the .warning() mixin.
.example-message-warning {
.lib-message(warning);
} This is an error message. To apply appropriate style you need to specify error type to the .warning() mixin.
.example-message-error {
.lib-message(error);
} This is a success message. To apply appropriate style you need to specify success type to the .warning() mixin.
.example-message-success {
.lib-message(success);
} This is a notice message. To apply appropriate style you need to specify notice type to the .warning() mixin.
.example-message-notice {
.lib-message(notice);
} To add an inner icon use .lib-message-icon-inner mixin. To apply the .message-icon-inner mixin, you need to specify the type of a message that you want to apply styles to.
.example-message-1 {
.lib-message-icon-inner(notice);
} To add a lateral icon to a message, you need to use the .lib-message-icon-lateral mixin. This mixin is configured by the following variables:
@_message-type: error; // info | warning | error | success | notice
@_message-position: right; // left | right.example-message-2 {
.lib-message-icon-lateral(error, right);
}
.example-message-3 {
.lib-message-icon-lateral(success, left);
}You can specify your own message type, for example “custom”. To use message mixin for this new type you need to add new variables to _variables.less:
@message__<b>custom</b>-color: #000;
@message__<b>custom</b>-background: #fc0;
@message__<b>custom</b>-link-color: blue;
@message__<b>custom</b>-link-color-hover: darken(@message-custom-link__color, 20%);
@message__<b>custom</b>-link-color-active: darken(@message-custom-link__color, 30%);
@message__<b>custom</b>-border-color: orange;
@message__<b>custom</b>-icon: @icon-settings;
@message__<b>custom</b>-icon-color: #000;
@message__<b>custom</b>-icon-background: #green;
@message__<b>custom</b>-icon-top: 15px;
@message__<b>custom</b>-icon-right: false;
@message__<b>custom</b>-icon-bottom: false;
@message__<b>custom</b>-icon-left: 0;And then call message mixin with your new message type
.lib-message-icon-lateral(custom, left);
@message-custom__color: #000;
@message-custom__background: #fc0;
@message-custom__border-color: orange;
@message-custom-link__color: blue;
@message-custom-link__color-hover: darken(@message-custom-link__color, 20%);
@message-custom-link__color-active: darken(@message-custom-link__color, 30%);
@message-custom-icon: @icon-settings;
@message-custom-icon__color-lateral: #000;
@message-custom-icon__background: #green;
@message-custom-icon__top: 15px;
@message-custom-icon__right: false;
@message-custom-icon__bottom: false;
@message-custom-icon__left: 0;
.example-message-4 {
.lib-message-icon-lateral(custom, left);
border-width: 4px;
border-radius: 10px;
}
| Mixin variable | Default value | Allowed values | Comment |
|---|---|---|---|
| @message__padding | @indent__s @indent__base | '' | value | Message padding |
| @message__margin | @indent__xs 0 | '' | value | Message margin |
| @message__color | false | true | false | Each message type has its own message color |
| Messages font style | |||
| @message__font-size | 13px | '' | false | value | Message font size |
| @message__font-family | false | '' | false | value | Message font family |
| @message__font-style | false | '' | false | value | Message font style |
| @message__font-weight | false | '' | false | value | Message font weight |
| @message__line-height | 1.2em | '' | false | value | Message line height |
| Message icon setup | |||
| @message-icon__font-size | ceil(@message__font-size * 2 + 2) | '' | false | value | Message icon font size |
| @message-icon__font-line-height | @message-icon__font-size | '' | false | value | Message icon line height |
| @message-icon__inner-padding-left | 40px | '' | false | value | Message icon padding left |
| @message-icon__lateral-width | 30px | '' | false | value | Message icon lateral width |
| @message-icon__lateral-arrow-size | 5px | '' | false | value | Message icon arrow size |
| @message-icon__top | 18px | '' | false | value | Message icon top position |
| @message-icon__right | false | '' | false | value | Message icon right position |
| @message-icon__bottom | false | '' | false | value | Message icon bottom position |
| @message-icon__left | 0 | '' | false | value | Message icon left position |
| Message border | |||
| @message__border-width | false | '' | false | value | Message border width |
| @message__border-color | false | '' | false | value | Message border color |
| @message__border-style | false | '' | false | value | Message border style |
| @message__border-radius | false | '' | false | value | Message border radius |
| Information message | |||
| @message-info__color | #6f4400 | '' | false | value | Information message text color |
| @message-info__background | #fdf0d5 | '' | false | value | Information message background |
| @message-info-link__color | @link__color | '' | false | value | Information message link color |
| @message-info-link__color-hover | @link__hover__color | '' | false | value | Information message hovered link color |
| @message-info-link__color-active | @link__hover__color | '' | false | value | Information message active link color |
| @message-info__border-color | @message__border-color | '' | false | value | Information message border color |
| @message-info-icon | @icon-warning | '' | false | value | Information message icon symbol code |
| @message-info-icon__color-inner | #c07600 | '' | false | value | Information message icon symbol color |
| @message-info-icon__color-lateral | @color-white | '' | false | value | Information message lateral icon symbol color |
| @message-info-icon__background | #6f4400 | '' | false | value | Information message icon background |
| @message-info-icon__top | @message-icon__top | '' | false | value | Message icon top position |
| @message-info-icon__right | @message-icon__right | '' | false | value | Message icon right position |
| @message-info-icon__bottom | @message-icon__bottom | '' | false | value | Message icon bottom position |
| @message-info-icon__left | @message-icon__left | '' | false | value | Message icon left position |
| Warning message | |||
| @message-warning__color | @message-info__color | '' | false | value | Warning message text color |
| @message-warning__background | @message-info__background | '' | false | value | Warning message background |
| @message-warning-link__color | @message-info-link__color | '' | false | value | Warning message link color |
| @message-warning-link__color-hover | @message-info-link__color-hover | '' | false | value | Warning message hovered link color |
| @message-warning-link__color-active | @message-info-link__color-active | '' | false | value | Warning message active link color |
| @message-info__border-color | @message-info__border-color | '' | false | value | Warning message border color |
| @message-warning-icon | @message-info-icon | '' | false | value | Warning message icon symbol code |
| @message-warning-icon__color-inner | @message-info-icon__color-inner | '' | false | value | Warning message icon symbol color |
| @message-warning-icon__color-lateral | @message-info-icon__color-lateral | '' | false | value | Warning message lateral icon symbol color |
| @message-warning-icon__background | @message-info-icon__background | '' | false | value | Warning message icon background |
| @message-warning-icon__top | @message-icon__top | '' | false | value | Message icon top position |
| @message-warning-icon__right | @message-icon__right | '' | false | value | Message icon right position |
| @message-warning-icon__bottom | @message-icon__bottom | '' | false | value | Message icon bottom position |
| @message-warning-icon__left | @message-icon__left | '' | false | value | Message icon left position |
| Error message | |||
| @message-error__color | @error__color | '' | false | value | Error message text color |
| @message-error__background | #fae5e5 | '' | false | value | Error message background |
| @message-error-link__color | @link__color | '' | false | value | Error message link color |
| @message-error-link__color-hover | @link__hover__color | '' | false | value | Error message hovered link color |
| @message-error-link__color-active | @link__hover__color | '' | false | value | Error message active link color |
| @message-error__border-color | @message__border-color | '' | false | value | Error message border color |
| @message-error-icon | @icon-warning | '' | false | value | Error message icon symbol code |
| @message-error-icon__color-inner | #b30000 | '' | false | value | Error message icon symbol color |
| @message-error-icon__color-lateral | @color-white | '' | false | value | Error message lateral icon symbol color |
| @message-error-icon__background | #b30000 | '' | false | value | Error message icon background |
| @message-error-icon__top | @message-icon__top | '' | false | value | Message icon top position |
| @message-error-icon__right | @message-icon__right | '' | false | value | Message icon right position |
| @message-error-icon__bottom | @message-icon__bottom | '' | false | value | Message icon bottom position |
| @message-error-icon__left | @message-icon__left | '' | false | value | Message icon left position |
| Success message | |||
| @message-success__color | #006400 | '' | false | value | Success message text color |
| @message-success__background | #e5efe5 | '' | false | value | Success message background |
| @message-success-link__color | @link__color | '' | false | value | Success message link color |
| @message-success-link__color-hover | @link__hover__color | '' | false | value | Success message hovered link color |
| @message-success-link__color-active | @link__hover__color | '' | false | value | Success message active link color |
| @message-success__border-color | @message__border-color | '' | false | value | Success message border color |
| @message-success-icon | @icon-checkmark | '' | false | value | Success message icon symbol code |
| @message-success-icon__color-inner | #006400 | '' | false | value | Success message icon symbol color |
| @message-success-icon__color-lateral | @color-white | '' | false | value | Success message lateral icon symbol color |
| @message-success-icon__background | #006400 | '' | false | value | Success message icon background |
| @message-success-icon__top | @message-icon__top | '' | false | value | Message icon top position |
| @message-success-icon__right | @message-icon__right | '' | false | value | Message icon right position |
| @message-success-icon__bottom | @message-icon__bottom | '' | false | value | Message icon bottom position |
| @message-success-icon__left | @message-icon__left | '' | false | value | Message icon left position |
| Notice message | |||
| @message-notice__color | @message-info__color | '' | false | value | Notice message text color |
| @message-notice__background | @message-info__background | '' | false | value | Notice message background |
| @message-notice-link__color | @message-info-link__color | '' | false | value | Notice message link color |
| @message-notice-link__color-hover | @message-info-link__color-hover | '' | false | value | Notice message hovered link color |
| @message-notice-link__color-active | @message-info-link__color-active | '' | false | value | Notice message active link color |
| @message-notice__border-color | @message-info__border-color | '' | false | value | Notice message border color |
| @message-notice-icon | @message-info-icon | '' | false | value | Notice message icon symbol code |
| @message-notice-icon__color-inner | @message-info-icon__color-inner | '' | false | value | Notice message icon symbol color |
| @message-notice-icon__color-lateral | @message-info-icon__color-lateral | '' | false | value | Notice message lateral icon symbol color |
| @message-notice-icon__background | @message-info-icon__background | '' | false | value | Notice message icon background |
| @message-notice-icon__top | @message-icon__top | '' | false | value | Message icon top position |
| @message-notice-icon__right | @message-icon__right | '' | false | value | Message icon right position |
| @message-notice-icon__bottom | @message-icon__bottom | '' | false | value | Message icon bottom position |
| @message-notice-icon__left | @message-icon__left | '' | false | value | Message icon left position |