/
githubmirror
/
magento2
Обзор
Документация
Войти
/
githubmirror
/
magento2
Код
Запросы
0
Пакеты
0
Релизы
0
Аналитика
Безопасность
2.4-develop
lib/web/css/docs/messages.html
714 строк
248 KB
Alexandra Zota
ACP2E-4019: CE copyright updates for 2.4.9-beta1
22 окт 2025, 10:58
22 окт 2025, 10:58
3d4f486
Код
Авторство
О чём код?
<!-- /** * Copyright 2014 Adobe * All Rights Reserved. */ --> <!DOCTYPE html><html><head><title>messages | Magento UI Library </title><meta charset="utf-8"><style>*{-moz-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0;border:0}body{padding:60px 0 40px;background-color:hsl(207,10%,90%);color:hsl(207,5%,30%)}.co … [Строка слишком длинная. Вы можете скачать файл] <p> Magento UI library provides mixins for styling messages. There are 4 types of messages:</p> <pre><code class="lang-css"> info warning error success</code></pre> <p> To configure styles of each type of message, global variables from variables.less are used. To apply the <code>.lib-message()</code> mixin you need to specify the type of message you want to apply styles to.</p> </div></article><article id="information-message" class="section"><div class="docs"><a href="#information-message" class="permalink"><svg viewBox="0 0 512 512" height="32" width="32" class="icon"><path d="M156.2,199.7c7.5-7.5,15.9-13.8,24.8-18.7c49.6-27.3,113.1-12.8,145,35.5l-38.5,38.5c-11.1-25.2-38.5-39.6-65.8-33.5c-10.3,2.3-20.1,7.4-28,15.4l-73.9,73.9c-22.4,22.4-22.4,58.9,0,81.4c22.4,22.4,58.9,22.4,81.4,0l22.8-22.8c20.7,8.2,42.9,11.5,64.9,9.9l-50.3,50.3c-43.1,43.1-113,43.1-156.1,0c-43.1-43.1-43.1-113-0-156.1L156.2,199.7z M273.6,82.3l-50.3,50.3c21.9-1.6,44.2,1.6,64.9,9.9l22.8-22.8c22.4-22.4,58.9-22.4,81.4,0c22.4,22.4,22.4,58.9,0,81.4l-73.9,73.9c-22.5,22.5-59.1,22.3-81.4,0c-5.2-5.2-9.7-11.7-12.5-18l-38.5,38.5c4,6.1,8.3,11.5,13.7,16.9c13.9,13.9,31.7,24.3,52.1,29.3c26.5,6.4,54.8,2.8,79.2-10.6c8.9-4.9,17.3-11.1,24.8-18.7l73.9-73.9c43.1-43.1,43.1-113,0-156.1C386.6,39.2,316.7,39.2,273.6,82.3z"></path></svg></a><h1 id="information-message">Information message</h1> <p> This is an informational message. To apply appropriate style you need to specify the <code>info</code> type to the <code>.lib-message()</code> mixin.</p> <p> If there is no content on the page, for example on a category page with no products, a special system information message with <code>class=”message info empty”</code> is used. It inherits styles from information message by default. It can be styled to get unique appearance using <code>.message.info.empty</code> class.</p> <textarea class="preview-code" spellcheck="false"> <div class="example-message-info"> <div> Lorem ipsum dolor sit <a href="#">amet</a>, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. </div> </div></textarea> </div><div class="code"><pre><code>.example-message-info { .lib-message(info); }</code></pre></div></article><article id="warning-message" class="section"><div class="docs"><a href="#warning-message" class="permalink"><svg viewBox="0 0 512 512" height="32" width="32" class="icon"><path d="M156.2,199.7c7.5-7.5,15.9-13.8,24.8-18.7c49.6-27.3,113.1-12.8,145,35.5l-38.5,38.5c-11.1-25.2-38.5-39.6-65.8-33.5c-10.3,2.3-20.1,7.4-28,15.4l-73.9,73.9c-22.4,22.4-22.4,58.9,0,81.4c22.4,22.4,58.9,22.4,81.4,0l22.8-22.8c20.7,8.2,42.9,11.5,64.9,9.9l-50.3,50.3c-43.1,43.1-113,43.1-156.1,0c-43.1-43.1-43.1-113-0-156.1L156.2,199.7z M273.6,82.3l-50.3,50.3c21.9-1.6,44.2,1.6,64.9,9.9l22.8-22.8c22.4-22.4,58.9-22.4,81.4,0c22.4,22.4,22.4,58.9,0,81.4l-73.9,73.9c-22.5,22.5-59.1,22.3-81.4,0c-5.2-5.2-9.7-11.7-12.5-18l-38.5,38.5c4,6.1,8.3,11.5,13.7,16.9c13.9,13.9,31.7,24.3,52.1,29.3c26.5,6.4,54.8,2.8,79.2-10.6c8.9-4.9,17.3-11.1,24.8-18.7l73.9-73.9c43.1-43.1,43.1-113,0-156.1C386.6,39.2,316.7,39.2,273.6,82.3z"></path></svg></a><h1 id="warning-message">Warning message</h1> <p> This is a warning message. To apply appropriate style you need to specify <code>warning</code> type to the <code>.warning()</code> mixin.</p> <textarea class="preview-code" spellcheck="false"> <div class="example-message-warning"> <div> Lorem ipsum dolor sit <a href="#">amet</a>, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. </div> </div></textarea> </div><div class="code"><pre><code>.example-message-warning { .lib-message(warning); }</code></pre></div></article><article id="error-message" class="section"><div class="docs"><a href="#error-message" class="permalink"><svg viewBox="0 0 512 512" height="32" width="32" class="icon"><path d="M156.2,199.7c7.5-7.5,15.9-13.8,24.8-18.7c49.6-27.3,113.1-12.8,145,35.5l-38.5,38.5c-11.1-25.2-38.5-39.6-65.8-33.5c-10.3,2.3-20.1,7.4-28,15.4l-73.9,73.9c-22.4,22.4-22.4,58.9,0,81.4c22.4,22.4,58.9,22.4,81.4,0l22.8-22.8c20.7,8.2,42.9,11.5,64.9,9.9l-50.3,50.3c-43.1,43.1-113,43.1-156.1,0c-43.1-43.1-43.1-113-0-156.1L156.2,199.7z M273.6,82.3l-50.3,50.3c21.9-1.6,44.2,1.6,64.9,9.9l22.8-22.8c22.4-22.4,58.9-22.4,81.4,0c22.4,22.4,22.4,58.9,0,81.4l-73.9,73.9c-22.5,22.5-59.1,22.3-81.4,0c-5.2-5.2-9.7-11.7-12.5-18l-38.5,38.5c4,6.1,8.3,11.5,13.7,16.9c13.9,13.9,31.7,24.3,52.1,29.3c26.5,6.4,54.8,2.8,79.2-10.6c8.9-4.9,17.3-11.1,24.8-18.7l73.9-73.9c43.1-43.1,43.1-113,0-156.1C386.6,39.2,316.7,39.2,273.6,82.3z"></path></svg></a><h1 id="error-message">Error message</h1> <p> This is an error message. To apply appropriate style you need to specify <code>error</code> type to the <code>.warning()</code> mixin.</p> <textarea class="preview-code" spellcheck="false"> <div class="example-message-error"> <div> Lorem ipsum dolor sit <a href="#">amet</a>, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. </div> </div></textarea> </div><div class="code"><pre><code>.example-message-error { .lib-message(error); }</code></pre></div></article><article id="success-message" class="section"><div class="docs"><a href="#success-message" class="permalink"><svg viewBox="0 0 512 512" height="32" width="32" class="icon"><path d="M156.2,199.7c7.5-7.5,15.9-13.8,24.8-18.7c49.6-27.3,113.1-12.8,145,35.5l-38.5,38.5c-11.1-25.2-38.5-39.6-65.8-33.5c-10.3,2.3-20.1,7.4-28,15.4l-73.9,73.9c-22.4,22.4-22.4,58.9,0,81.4c22.4,22.4,58.9,22.4,81.4,0l22.8-22.8c20.7,8.2,42.9,11.5,64.9,9.9l-50.3,50.3c-43.1,43.1-113,43.1-156.1,0c-43.1-43.1-43.1-113-0-156.1L156.2,199.7z M273.6,82.3l-50.3,50.3c21.9-1.6,44.2,1.6,64.9,9.9l22.8-22.8c22.4-22.4,58.9-22.4,81.4,0c22.4,22.4,22.4,58.9,0,81.4l-73.9,73.9c-22.5,22.5-59.1,22.3-81.4,0c-5.2-5.2-9.7-11.7-12.5-18l-38.5,38.5c4,6.1,8.3,11.5,13.7,16.9c13.9,13.9,31.7,24.3,52.1,29.3c26.5,6.4,54.8,2.8,79.2-10.6c8.9-4.9,17.3-11.1,24.8-18.7l73.9-73.9c43.1-43.1,43.1-113,0-156.1C386.6,39.2,316.7,39.2,273.6,82.3z"></path></svg></a><h1 id="success-message">Success message</h1> <p> This is a success message. To apply appropriate style you need to specify <code>success</code> type to the <code>.warning()</code> mixin.</p> <textarea class="preview-code" spellcheck="false"> <div class="example-message-success"> <div> Lorem ipsum dolor sit <a href="#">amet</a>, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. </div> </div></textarea> </div><div class="code"><pre><code>.example-message-success { .lib-message(success); }</code></pre></div></article><article id="notice-message" class="section"><div class="docs"><a href="#notice-message" class="permalink"><svg viewBox="0 0 512 512" height="32" width="32" class="icon"><path d="M156.2,199.7c7.5-7.5,15.9-13.8,24.8-18.7c49.6-27.3,113.1-12.8,145,35.5l-38.5,38.5c-11.1-25.2-38.5-39.6-65.8-33.5c-10.3,2.3-20.1,7.4-28,15.4l-73.9,73.9c-22.4,22.4-22.4,58.9,0,81.4c22.4,22.4,58.9,22.4,81.4,0l22.8-22.8c20.7,8.2,42.9,11.5,64.9,9.9l-50.3,50.3c-43.1,43.1-113,43.1-156.1,0c-43.1-43.1-43.1-113-0-156.1L156.2,199.7z M273.6,82.3l-50.3,50.3c21.9-1.6,44.2,1.6,64.9,9.9l22.8-22.8c22.4-22.4,58.9-22.4,81.4,0c22.4,22.4,22.4,58.9,0,81.4l-73.9,73.9c-22.5,22.5-59.1,22.3-81.4,0c-5.2-5.2-9.7-11.7-12.5-18l-38.5,38.5c4,6.1,8.3,11.5,13.7,16.9c13.9,13.9,31.7,24.3,52.1,29.3c26.5,6.4,54.8,2.8,79.2-10.6c8.9-4.9,17.3-11.1,24.8-18.7l73.9-73.9c43.1-43.1,43.1-113,0-156.1C386.6,39.2,316.7,39.2,273.6,82.3z"></path></svg></a><h1 id="notice-message">Notice message</h1> <p> This is a notice message. To apply appropriate style you need to specify <code>notice</code> type to the <code>.warning()</code> mixin.</p> <textarea class="preview-code" spellcheck="false"> <div class="example-message-notice"> <div> Lorem ipsum dolor sit <a href="#">amet</a>, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. </div> </div></textarea> </div><div class="code"><pre><code>.example-message-notice { .lib-message(notice); }</code></pre></div></article><article id="message-with-inner-icon" class="section"><div class="docs"><a href="#message-with-inner-icon" class="permalink"><svg viewBox="0 0 512 512" height="32" width="32" class="icon"><path d="M156.2,199.7c7.5-7.5,15.9-13.8,24.8-18.7c49.6-27.3,113.1-12.8,145,35.5l-38.5,38.5c-11.1-25.2-38.5-39.6-65.8-33.5c-10.3,2.3-20.1,7.4-28,15.4l-73.9,73.9c-22.4,22.4-22.4,58.9,0,81.4c22.4,22.4,58.9,22.4,81.4,0l22.8-22.8c20.7,8.2,42.9,11.5,64.9,9.9l-50.3,50.3c-43.1,43.1-113,43.1-156.1,0c-43.1-43.1-43.1-113-0-156.1L156.2,199.7z M273.6,82.3l-50.3,50.3c21.9-1.6,44.2,1.6,64.9,9.9l22.8-22.8c22.4-22.4,58.9-22.4,81.4,0c22.4,22.4,22.4,58.9,0,81.4l-73.9,73.9c-22.5,22.5-59.1,22.3-81.4,0c-5.2-5.2-9.7-11.7-12.5-18l-38.5,38.5c4,6.1,8.3,11.5,13.7,16.9c13.9,13.9,31.7,24.3,52.1,29.3c26.5,6.4,54.8,2.8,79.2-10.6c8.9-4.9,17.3-11.1,24.8-18.7l73.9-73.9c43.1-43.1,43.1-113,0-156.1C386.6,39.2,316.7,39.2,273.6,82.3z"></path></svg></a><h1 id="message-with-inner-icon">Message with inner icon</h1> <p> To add an inner icon use <code>.lib-message-icon-inner</code> mixin. To apply the <code>.message-icon-inner</code> mixin, you need to specify the type of a message that you want to apply styles to.</p> <textarea class="preview-code" spellcheck="false"> <div class="example-message-1"> <div> Lorem ipsum dolor sit <a href="#">amet</a>, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. </div> </div></textarea> </div><div class="code"><pre><code>.example-message-1 { .lib-message-icon-inner(notice); }</code></pre></div></article><article id="message-with-lateral-icon" class="section"><div class="docs"><a href="#message-with-lateral-icon" class="permalink"><svg viewBox="0 0 512 512" height="32" width="32" class="icon"><path d="M156.2,199.7c7.5-7.5,15.9-13.8,24.8-18.7c49.6-27.3,113.1-12.8,145,35.5l-38.5,38.5c-11.1-25.2-38.5-39.6-65.8-33.5c-10.3,2.3-20.1,7.4-28,15.4l-73.9,73.9c-22.4,22.4-22.4,58.9,0,81.4c22.4,22.4,58.9,22.4,81.4,0l22.8-22.8c20.7,8.2,42.9,11.5,64.9,9.9l-50.3,50.3c-43.1,43.1-113,43.1-156.1,0c-43.1-43.1-43.1-113-0-156.1L156.2,199.7z M273.6,82.3l-50.3,50.3c21.9-1.6,44.2,1.6,64.9,9.9l22.8-22.8c22.4-22.4,58.9-22.4,81.4,0c22.4,22.4,22.4,58.9,0,81.4l-73.9,73.9c-22.5,22.5-59.1,22.3-81.4,0c-5.2-5.2-9.7-11.7-12.5-18l-38.5,38.5c4,6.1,8.3,11.5,13.7,16.9c13.9,13.9,31.7,24.3,52.1,29.3c26.5,6.4,54.8,2.8,79.2-10.6c8.9-4.9,17.3-11.1,24.8-18.7l73.9-73.9c43.1-43.1,43.1-113,0-156.1C386.6,39.2,316.7,39.2,273.6,82.3z"></path></svg></a><h1 id="message-with-lateral-icon">Message with lateral icon</h1> <p> To add a lateral icon to a message, you need to use the <code>.lib-message-icon-lateral</code> mixin. This mixin is configured by the following variables:</p> <pre><code class="lang-css"> @_message-type: error; // info | warning | error | success | notice @_message-position: right; // left | right</code></pre> <textarea class="preview-code" spellcheck="false"> <div class="example-message-2"> <div> Lorem ipsum dolor sit <a href="#">amet</a>, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. </div> </div></textarea><textarea class="preview-code" spellcheck="false"> <div class="example-message-3"> <div> Lorem ipsum dolor sit <a href="#">amet</a>, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. </div> </div></textarea> </div><div class="code"><pre><code>.example-message-2 { .lib-message-icon-lateral(error, right); } .example-message-3 { .lib-message-icon-lateral(success, left); }</code></pre></div></article><article id="custom-message-style" class="section"><div class="docs"><a href="#custom-message-style" class="permalink"><svg viewBox="0 0 512 512" height="32" width="32" class="icon"><path d="M156.2,199.7c7.5-7.5,15.9-13.8,24.8-18.7c49.6-27.3,113.1-12.8,145,35.5l-38.5,38.5c-11.1-25.2-38.5-39.6-65.8-33.5c-10.3,2.3-20.1,7.4-28,15.4l-73.9,73.9c-22.4,22.4-22.4,58.9,0,81.4c22.4,22.4,58.9,22.4,81.4,0l22.8-22.8c20.7,8.2,42.9,11.5,64.9,9.9l-50.3,50.3c-43.1,43.1-113,43.1-156.1,0c-43.1-43.1-43.1-113-0-156.1L156.2,199.7z M273.6,82.3l-50.3,50.3c21.9-1.6,44.2,1.6,64.9,9.9l22.8-22.8c22.4-22.4,58.9-22.4,81.4,0c22.4,22.4,22.4,58.9,0,81.4l-73.9,73.9c-22.5,22.5-59.1,22.3-81.4,0c-5.2-5.2-9.7-11.7-12.5-18l-38.5,38.5c4,6.1,8.3,11.5,13.7,16.9c13.9,13.9,31.7,24.3,52.1,29.3c26.5,6.4,54.8,2.8,79.2-10.6c8.9-4.9,17.3-11.1,24.8-18.7l73.9-73.9c43.1-43.1,43.1-113,0-156.1C386.6,39.2,316.7,39.2,273.6,82.3z"></path></svg></a><h1 id="custom-message-style">Custom message style</h1> <p> 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:</p> <pre><code class="lang-css"> @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;</code></pre> <p> And then call message mixin with your new message type</p> <pre><code class="lang-css"> .lib-message-icon-lateral(custom, left);</code></pre> <p> </p> <textarea class="preview-code" spellcheck="false"> <div class="example-message-4"> <div> Lorem ipsum dolor sit <a href="#">amet</a>, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. </div> </div></textarea> </div><div class="code"><pre><code>@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; }</code></pre></div></article><article id="messages-global-variables" class="section"><div class="docs"><a href="#messages-global-variables" class="permalink"><svg viewBox="0 0 512 512" height="32" width="32" class="icon"><path d="M156.2,199.7c7.5-7.5,15.9-13.8,24.8-18.7c49.6-27.3,113.1-12.8,145,35.5l-38.5,38.5c-11.1-25.2-38.5-39.6-65.8-33.5c-10.3,2.3-20.1,7.4-28,15.4l-73.9,73.9c-22.4,22.4-22.4,58.9,0,81.4c22.4,22.4,58.9,22.4,81.4,0l22.8-22.8c20.7,8.2,42.9,11.5,64.9,9.9l-50.3,50.3c-43.1,43.1-113,43.1-156.1,0c-43.1-43.1-43.1-113-0-156.1L156.2,199.7z M273.6,82.3l-50.3,50.3c21.9-1.6,44.2,1.6,64.9,9.9l22.8-22.8c22.4-22.4,58.9-22.4,81.4,0c22.4,22.4,22.4,58.9,0,81.4l-73.9,73.9c-22.5,22.5-59.1,22.3-81.4,0c-5.2-5.2-9.7-11.7-12.5-18l-38.5,38.5c4,6.1,8.3,11.5,13.7,16.9c13.9,13.9,31.7,24.3,52.1,29.3c26.5,6.4,54.8,2.8,79.2-10.6c8.9-4.9,17.3-11.1,24.8-18.7l73.9-73.9c43.1-43.1,43.1-113,0-156.1C386.6,39.2,316.7,39.2,273.6,82.3z"></path></svg></a><h1 id="messages-global-variables">Messages global variables</h1> <pre> <table> <tr> <th class="vars_head">Mixin variable</th> <th class="vars_head">Default value</th> <th class="vars_head">Allowed values</th> <th class="vars_head">Comment</th> </tr> <tr> <th>@message__padding</th> <td class="vars_value">@indent__s @indent__base</td> <td class="vars_value">'' | value</td> <td>Message padding</td> </tr> <tr> <th>@message__margin</th> <td class="vars_value">@indent__xs 0</td> <td class="vars_value">'' | value</td> <td>Message margin</td> </tr> <tr> <th>@message__color</th> <td class="vars_value">false</td> <td class="vars_value">true | false</td> <td>Each message type has its own message color</td> </tr> <tr> <th colspan="4" class="vars_section">Messages font style</th> </tr> <tr> <th>@message__font-size</th> <td class="vars_value">13px</td> <td class="vars_value">'' | false | value</td> <td>Message font size</td> </tr> <tr> <th>@message__font-family</th> <td class="vars_value">false</td> <td class="vars_value">'' | false | value</td> <td>Message font family</td> </tr> <tr> <th>@message__font-style</th> <td class="vars_value">false</td> <td class="vars_value">'' | false | value</td> <td>Message font style</td> </tr> <tr> <th>@message__font-weight</th> <td class="vars_value">false</td> <td class="vars_value">'' | false | value</td> <td>Message font weight</td> </tr> <tr> <th>@message__line-height</th> <td class="vars_value">1.2em</td> <td class="vars_value">'' | false | value</td> <td>Message line height</td> </tr> <tr> <th colspan="4" class="vars_section">Message icon setup</th> </tr> <tr> <th>@message-icon__font-size</th> <td class="vars_value">ceil(@message__font-size * 2 + 2)</td> <td class="vars_value">'' | false | value</td> <td>Message icon font size</td> </tr> <tr> <th>@message-icon__font-line-height</th> <td class="vars_value">@message-icon__font-size</td> <td class="vars_value">'' | false | value</td> <td>Message icon line height</td> </tr> <tr> <th>@message-icon__inner-padding-left</th> <td class="vars_value">40px</td> <td class="vars_value">'' | false | value</td> <td>Message icon padding left</td> </tr> <tr> <th>@message-icon__lateral-width</th> <td class="vars_value">30px</td> <td class="vars_value">'' | false | value</td> <td>Message icon lateral width</td> </tr> <tr> <th>@message-icon__lateral-arrow-size</th> <td class="vars_value">5px</td> <td class="vars_value">'' | false | value</td> <td>Message icon arrow size</td> </tr> <tr> <th>@message-icon__top</th> <td class="vars_value">18px</td> <td class="vars_value">'' | false | value</td> <td>Message icon top position</td> </tr> <tr> <th>@message-icon__right</th> <td class="vars_value">false</td> <td class="vars_value">'' | false | value</td> <td>Message icon right position</td> </tr> <tr> <th>@message-icon__bottom</th> <td class="vars_value">false</td> <td class="vars_value">'' | false | value</td> <td>Message icon bottom position</td> </tr> <tr> <th>@message-icon__left</th> <td class="vars_value">0</td> <td class="vars_value">'' | false | value</td> <td>Message icon left position</td> </tr> <tr> <th colspan="4" class="vars_section">Message border</th> </tr> <tr> <th>@message__border-width</th> <td class="vars_value">false</td> <td class="vars_value">'' | false | value</td> <td>Message border width</td> </tr> <tr> <th>@message__border-color</th> <td class="vars_value">false</td> <td class="vars_value">'' | false | value</td> <td>Message border color</td> </tr> <tr> <th>@message__border-style</th> <td class="vars_value">false</td> <td class="vars_value">'' | false | value</td> <td>Message border style</td> </tr> <tr> <th>@message__border-radius</th> <td class="vars_value">false</td> <td class="vars_value">'' | false | value</td> <td>Message border radius</td> </tr> <tr> <th colspan="4" class="vars_section">Information message</th> </tr> <tr> <th>@message-info__color</th> <td class="vars_value">#6f4400</td> <td class="vars_value">'' | false | value</td> <td>Information message text color</td> </tr> <tr> <th>@message-info__background</th> <td class="vars_value">#fdf0d5</td> <td class="vars_value">'' | false | value</td> <td>Information message background</td> </tr> <tr> <th>@message-info-link__color</th> <td class="vars_value">@link__color</td> <td class="vars_value">'' | false | value</td> <td>Information message link color</td> </tr> <tr> <th>@message-info-link__color-hover</th> <td class="vars_value">@link__hover__color</td> <td class="vars_value">'' | false | value</td> <td>Information message hovered link color</td> </tr> <tr> <th>@message-info-link__color-active</th> <td class="vars_value">@link__hover__color</td> <td class="vars_value">'' | false | value</td> <td>Information message active link color </td> </tr> <tr> <th>@message-info__border-color</th> <td class="vars_value">@message__border-color</td> <td class="vars_value">'' | false | value</td> <td>Information message border color</td> </tr> <tr> <th>@message-info-icon</th> <td class="vars_value">@icon-warning</td> <td class="vars_value">'' | false | value</td> <td>Information message icon symbol code</td> </tr> <tr> <th>@message-info-icon__color-inner</th> <td class="vars_value">#c07600</td> <td class="vars_value">'' | false | value</td> <td>Information message icon symbol color </td> </tr> <tr> <th>@message-info-icon__color-lateral</th> <td class="vars_value">@color-white</td> <td class="vars_value">'' | false | value</td> <td>Information message lateral icon symbol color</td> </tr> <tr> <th>@message-info-icon__background</th> <td class="vars_value">#6f4400</td> <td class="vars_value">'' | false | value</td> <td>Information message icon background</td> </tr> <tr> <th>@message-info-icon__top</th> <td class="vars_value">@message-icon__top</td> <td class="vars_value">'' | false | value</td> <td>Message icon top position</td> </tr> <tr> <th>@message-info-icon__right</th> <td class="vars_value">@message-icon__right</td> <td class="vars_value">'' | false | value</td> <td>Message icon right position</td> </tr> <tr> <th>@message-info-icon__bottom</th> <td class="vars_value">@message-icon__bottom</td> <td class="vars_value">'' | false | value</td> <td>Message icon bottom position</td> </tr> <tr> <th>@message-info-icon__left</th> <td class="vars_value">@message-icon__left</td> <td class="vars_value">'' | false | value</td> <td>Message icon left position</td> </tr> <tr> <th colspan="4" class="vars_section">Warning message</th> </tr> <tr> <th>@message-warning__color</th> <td class="vars_value">@message-info__color</td> <td class="vars_value">'' | false | value</td> <td>Warning message text color</td> </tr> <tr> <th>@message-warning__background</th> <td class="vars_value">@message-info__background</td> <td class="vars_value">'' | false | value</td> <td>Warning message background</td> </tr> <tr> <th>@message-warning-link__color</th> <td class="vars_value">@message-info-link__color</td> <td class="vars_value">'' | false | value</td> <td>Warning message link color</td> </tr> <tr> <th>@message-warning-link__color-hover</th> <td class="vars_value">@message-info-link__color-hover</td> <td class="vars_value">'' | false | value</td> <td>Warning message hovered link color</td> </tr> <tr> <th>@message-warning-link__color-active</th> <td class="vars_value">@message-info-link__color-active</td> <td class="vars_value">'' | false | value</td> <td>Warning message active link color </td> </tr> <tr> <th>@message-info__border-color</th> <td class="vars_value">@message-info__border-color</td> <td class="vars_value">'' | false | value</td> <td>Warning message border color</td> </tr> <tr> <th>@message-warning-icon</th> <td class="vars_value">@message-info-icon</td> <td class="vars_value">'' | false | value</td> <td>Warning message icon symbol code</td> </tr> <tr> <th>@message-warning-icon__color-inner</th> <td class="vars_value">@message-info-icon__color-inner</td> <td class="vars_value">'' | false | value</td> <td>Warning message icon symbol color </td> </tr> <tr> <th nowrap="nowrap">@message-warning-icon__color-lateral</th> <td class="vars_value" nowrap="nowrap">@message-info-icon__color-lateral</td> <td class="vars_value">'' | false | value</td> <td>Warning message lateral icon symbol color</td> </tr> <tr> <th>@message-warning-icon__background</th> <td class="vars_value">@message-info-icon__background</td> <td class="vars_value">'' | false | value</td> <td>Warning message icon background</td> </tr> <tr> <th>@message-warning-icon__top</th> <td class="vars_value">@message-icon__top</td> <td class="vars_value">'' | false | value</td> <td>Message icon top position</td> </tr> <tr> <th>@message-warning-icon__right</th> <td class="vars_value">@message-icon__right</td> <td class="vars_value">'' | false | value</td> <td>Message icon right position</td> </tr> <tr> <th>@message-warning-icon__bottom</th> <td class="vars_value">@message-icon__bottom</td> <td class="vars_value">'' | false | value</td> <td>Message icon bottom position</td> </tr> <tr> <th>@message-warning-icon__left</th> <td class="vars_value">@message-icon__left</td> <td class="vars_value">'' | false | value</td> <td>Message icon left position</td> </tr> <tr> <th colspan="4" class="vars_section">Error message</th> </tr> <tr> <th>@message-error__color</th> <td class="vars_value">@error__color</td> <td class="vars_value">'' | false | value</td> <td>Error message text color</td> </tr> <tr> <th>@message-error__background</th> <td class="vars_value">#fae5e5</td> <td class="vars_value">'' | false | value</td> <td>Error message background</td> </tr> <tr> <th>@message-error-link__color</th> <td class="vars_value">@link__color</td> <td class="vars_value">'' | false | value</td> <td>Error message link color</td> </tr> <tr> <th>@message-error-link__color-hover</th> <td class="vars_value">@link__hover__color</td> <td class="vars_value">'' | false | value</td> <td>Error message hovered link color</td> </tr> <tr> <th>@message-error-link__color-active</th> <td class="vars_value">@link__hover__color</td> <td class="vars_value">'' | false | value</td> <td>Error message active link color </td> </tr> <tr> <th>@message-error__border-color</th> <td class="vars_value">@message__border-color</td> <td class="vars_value">'' | false | value</td> <td>Error message border color</td> </tr> <tr> <th>@message-error-icon</th> <td class="vars_value">@icon-warning</td> <td class="vars_value">'' | false | value</td> <td>Error message icon symbol code</td> </tr> <tr> <th>@message-error-icon__color-inner</th> <td class="vars_value">#b30000</td> <td class="vars_value">'' | false | value</td> <td>Error message icon symbol color </td> </tr> <tr> <th>@message-error-icon__color-lateral</th> <td class="vars_value">@color-white</td> <td class="vars_value">'' | false | value</td> <td>Error message lateral icon symbol color</td> </tr> <tr> <th>@message-error-icon__background</th> <td class="vars_value">#b30000</td> <td class="vars_value">'' | false | value</td> <td>Error message icon background</td> </tr> <tr> <th>@message-error-icon__top</th> <td class="vars_value">@message-icon__top</td> <td class="vars_value">'' | false | value</td> <td>Message icon top position</td> </tr> <tr> <th>@message-error-icon__right</th> <td class="vars_value">@message-icon__right</td> <td class="vars_value">'' | false | value</td> <td>Message icon right position</td> </tr> <tr> <th>@message-error-icon__bottom</th> <td class="vars_value">@message-icon__bottom</td> <td class="vars_value">'' | false | value</td> <td>Message icon bottom position</td> </tr> <tr> <th>@message-error-icon__left</th> <td class="vars_value">@message-icon__left</td> <td class="vars_value">'' | false | value</td> <td>Message icon left position</td> </tr> <tr> <th colspan="4" class="vars_section">Success message</th> </tr> <tr> <th>@message-success__color</th> <td class="vars_value">#006400</td> <td class="vars_value">'' | false | value</td> <td>Success message text color</td> </tr> <tr> <th>@message-success__background</th> <td class="vars_value">#e5efe5</td> <td class="vars_value">'' | false | value</td> <td>Success message background</td> </tr> <tr> <th>@message-success-link__color</th> <td class="vars_value">@link__color</td> <td class="vars_value">'' | false | value</td> <td>Success message link color</td> </tr> <tr> <th>@message-success-link__color-hover</th> <td class="vars_value">@link__hover__color</td> <td class="vars_value">'' | false | value</td> <td>Success message hovered link color</td> </tr> <tr> <th>@message-success-link__color-active</th> <td class="vars_value">@link__hover__color</td> <td class="vars_value">'' | false | value</td> <td>Success message active link color </td> </tr> <tr> <th>@message-success__border-color</th> <td class="vars_value">@message__border-color</td> <td class="vars_value">'' | false | value</td> <td>Success message border color</td> </tr> <tr> <th>@message-success-icon</th> <td class="vars_value">@icon-checkmark</td> <td class="vars_value">'' | false | value</td> <td>Success message icon symbol code</td> </tr> <tr> <th>@message-success-icon__color-inner</th> <td class="vars_value">#006400</td> <td class="vars_value">'' | false | value</td> <td>Success message icon symbol color </td> </tr> <tr> <th>@message-success-icon__color-lateral</th> <td class="vars_value">@color-white</td> <td class="vars_value">'' | false | value</td> <td>Success message lateral icon symbol color</td> </tr> <tr> <th>@message-success-icon__background</th> <td class="vars_value">#006400</td> <td class="vars_value">'' | false | value</td> <td>Success message icon background</td> </tr> <tr> <th>@message-success-icon__top</th> <td class="vars_value">@message-icon__top</td> <td class="vars_value">'' | false | value</td> <td>Message icon top position</td> </tr> <tr> <th>@message-success-icon__right</th> <td class="vars_value">@message-icon__right</td> <td class="vars_value">'' | false | value</td> <td>Message icon right position</td> </tr> <tr> <th>@message-success-icon__bottom</th> <td class="vars_value">@message-icon__bottom</td> <td class="vars_value">'' | false | value</td> <td>Message icon bottom position</td> </tr> <tr> <th>@message-success-icon__left</th> <td class="vars_value">@message-icon__left</td> <td class="vars_value">'' | false | value</td> <td>Message icon left position</td> </tr> <tr> <th colspan="4" class="vars_section">Notice message</th> </tr> <tr> <th>@message-notice__color</th> <td class="vars_value">@message-info__color</td> <td class="vars_value">'' | false | value</td> <td>Notice message text color</td> </tr> <tr> <th>@message-notice__background</th> <td class="vars_value">@message-info__background</td> <td class="vars_value">'' | false | value</td> <td>Notice message background</td> </tr> <tr> <th>@message-notice-link__color</th> <td class="vars_value">@message-info-link__color</td> <td class="vars_value">'' | false | value</td> <td>Notice message link color</td> </tr> <tr> <th>@message-notice-link__color-hover</th> <td class="vars_value">@message-info-link__color-hover</td> <td class="vars_value">'' | false | value</td> <td>Notice message hovered link color</td> </tr> <tr> <th>@message-notice-link__color-active</th> <td class="vars_value">@message-info-link__color-active</td> <td class="vars_value">'' | false | value</td> <td>Notice message active link color </td> </tr> <tr> <th>@message-notice__border-color</th> <td class="vars_value">@message-info__border-color</td> <td class="vars_value">'' | false | value</td> <td>Notice message border color</td> </tr> <tr> <th>@message-notice-icon</th> <td class="vars_value">@message-info-icon</td> <td class="vars_value">'' | false | value</td> <td>Notice message icon symbol code</td> </tr> <tr> <th>@message-notice-icon__color-inner</th> <td class="vars_value">@message-info-icon__color-inner</td> <td class="vars_value">'' | false | value</td> <td>Notice message icon symbol color </td> </tr> <tr> <th>@message-notice-icon__color-lateral</th> <td class="vars_value">@message-info-icon__color-lateral</td> <td class="vars_value">'' | false | value</td> <td>Notice message lateral icon symbol color</td> </tr> <tr> <th>@message-notice-icon__background</th> <td class="vars_value">@message-info-icon__background</td> <td class="vars_value">'' | false | value</td> <td>Notice message icon background</td> </tr> <tr> <th>@message-notice-icon__top</th> <td class="vars_value">@message-icon__top</td> <td class="vars_value">'' | false | value</td> <td>Message icon top position</td> </tr> <tr> <th>@message-notice-icon__right</th> <td class="vars_value">@message-icon__right</td> <td class="vars_value">'' | false | value</td> <td>Message icon right position</td> </tr> <tr> <th>@message-notice-icon__bottom</th> <td class="vars_value">@message-icon__bottom</td> <td class="vars_value">'' | false | value</td> <td>Message icon bottom position</td> </tr> <tr> <th>@message-notice-icon__left</th> <td class="vars_value">@message-icon__left</td> <td class="vars_value">'' | false | value</td> <td>Message icon left position</td> </tr> </table> </pre> </div></article></section><div class="bar bottom"><div hidden class="settings container"><!-- Icons from http://iconmonstr.com--><button title="Desktop (1280)" data-width='1280'><svg viewBox="0 0 412 … [Строка слишком длинная. Вы можете скачать файл]