/
githubmirror
/
magento2
Обзор
Документация
Войти
/
githubmirror
/
magento2
Код
Запросы
0
Пакеты
0
Релизы
0
Аналитика
Безопасность
2.4-develop
lib/web/css/docs/tables.html
1 501 строка
292 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>tables | 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> Table cells padding, width and bottom margin customization options.</p> <textarea class="preview-code" spellcheck="false"> <table class="example-table-1"> <caption>Table caption</caption> <thead> <tr> <th scope="col">Name</th> <th scope="col">Username</th> <th scope="col">Phone</th> <th scope="col">Site</th> <th scope="col">Age</th> <th scope="col">Job</th> <th scope="col">Status</th> </tr> </thead> <tfoot> <tr> <th>Name</th> <th>Username</th> <th>Phone</th> <th>Site</th> <th>Age</th> <th>Job</th> <th>Status</th> </tr> </tfoot> <tbody> <tr> <th scope="row">Mark</th> <td>@mdo</td> <td>+1 123 456 432</td> <td><a href="https://www.google.com">www.google.com</a></td> <td>23</td> <td>qa</td> <td>offline</td> </tr> <tr> <th scope="row">Alex</th> <td>@alex</td> <td>+1 333 222 111</td> <td><a href="http://magento.com/">magento.com</a></td> <td>32</td> <td>manager</td> <td>online</td> </tr> <tr> <th scope="row">Daniel</th> <td>@danik</td> <td>+1 334 328 975</td> <td><a href="https://www.yahoo.com">www.yahoo.com</a></td> <td>18</td> <td>developer</td> <td>offline</td> </tr> <tr> <th scope="row">Kate</th> <td>@kateUA</td> <td>+1 888 777 888</td> <td><a href="https://www.twitter.com">www.twitter.com</a></td> <td>18</td> <td>developer</td> <td>HR</td> </tr> </tbody> </table></textarea> </div><div class="code"><pre><code>.example-table-1 { .lib-table(); }</code></pre></div></article><article id="table-mixin-variables" class="section"><div class="docs"><a href="#table-mixin-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="table-mixin-variables">Table mixin variables</h1> <pre> <table> <tr> <th class="vars_head">Mixin variable</th> <th class="vars_head">Global 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>@_table-width</th> <td>@table__width</td> <td class="vars_value">100%</td> <td class="vars_value">'' | false | value</td> <td>Table width</td> </tr> <tr> <th>@_cell-padding-horizontal</th> <td>@table-cell__padding-horizontal</td> <td class="vars_value">@indent__s</td> <td class="vars_value">'' | false | value</td> <td>Table cell horizontal padding</td> </tr> <tr> <th>@_cell-padding-vertical</th> <td>@table-cell__padding-vertical</td> <td class="vars_value">8px</td> <td class="vars_value">'' | false | value</td> <td>Table cell vertical padding</td> </tr> <tr> <th>@_table-margin-bottom</th> <td>@table__margin-bottom</td> <td class="vars_value">false</td> <td class="vars_value">'' | false | value</td> <td>Table margin bottom</td> </tr> </table> </pre> </div></article><article id="table-typography" class="section"><div class="docs"><a href="#table-typography" 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="table-typography">Table typography</h1> <p> The <code>.lib-table-typography()</code> mixin provides table typography customization options.</p> <textarea class="preview-code" spellcheck="false"> <table class="example-table-2"> <caption>Table caption</caption> <thead> <tr> <th scope="col">Name</th> <th scope="col">Username</th> <th scope="col">Phone</th> <th scope="col">Site</th> <th scope="col">Age</th> <th scope="col">Job</th> <th scope="col">Status</th> </tr> </thead> <tfoot> <tr> <th>Name</th> <th>Username</th> <th>Phone</th> <th>Site</th> <th>Age</th> <th>Job</th> <th>Status</th> </tr> </tfoot> <tbody> <tr> <th scope="row">Mark</th> <td>@mdo</td> <td>+1 123 456 432</td> <td><a href="https://www.google.com">www.google.com</a></td> <td>23</td> <td>qa</td> <td>offline</td> </tr> <tr> <th scope="row">Alex</th> <td>@alex</td> <td>+1 333 222 111</td> <td><a href="http://magento.com/">magento.com</a></td> <td>32</td> <td>manager</td> <td>online</td> </tr> <tr> <th scope="row">Daniel</th> <td>@danik</td> <td>+1 334 328 975</td> <td><a href="https://www.yahoo.com">www.yahoo.com</a></td> <td>18</td> <td>developer</td> <td>offline</td> </tr> <tr> <th scope="row">Kate</th> <td>@kateUA</td> <td>+1 888 777 888</td> <td><a href="https://www.twitter.com">www.twitter.com</a></td> <td>18</td> <td>developer</td> <td>HR</td> </tr> </tbody> </table></textarea> </div><div class="code"><pre><code>.example-table-2 { .lib-table-typography(); }</code></pre></div></article><article id="table-typography-mixin-variables" class="section"><div class="docs"><a href="#table-typography-mixin-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="table-typography-mixin-variables">Table typography mixin variables</h1> <pre> <table> <tr> <th class="vars_head">Mixin variable</th> <th class="vars_head">Global 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>@_table-td-font-size</th> <td>@table-td__font-size</td> <td class="vars_value">false</td> <td class="vars_value">'' | false | value</td> <td>Table cell font size</td> </tr> <tr> <th>@_table-td-color</th> <td>@table-td__color</td> <td class="vars_value">false</td> <td class="vars_value">'' | false | value</td> <td>Table cell font color</td> </tr> <tr> <th>@_table-td-font-family</th> <td>@table-td__font-family</td> <td class="vars_value">false</td> <td class="vars_value">'' | false | value</td> <td>Table cell font family</td> </tr> <tr> <th nowrap="nowrap">@_table-td-font-weight</th> <td>@table-td__font-weight</td> <td class="vars_value">false</td> <td class="vars_value">'' | false | value</td> <td>Table cell font weight</td> </tr> <tr> <th>@_table-td-line-height</th> <td>@table-td__line-height</td> <td class="vars_value">false</td> <td class="vars_value">'' | false | value</td> <td>Table cell line height</td> </tr> <tr> <th>@_table-td-font-style</th> <td>@table-td__font-style</td> <td class="vars_value">false</td> <td class="vars_value">'' | false | value</td> <td>Table cell font style</td> </tr> <tr> <th>@_table-th-font-size</th> <td>@table-th__font-size</td> <td class="vars_value">false</td> <td class="vars_value">'' | false | value</td> <td>Table header cell font size</td> </tr> <tr> <th>@_table-th-color</th> <td>@table-th__color</td> <td class="vars_value">@text__color__intense</td> <td class="vars_value">'' | false | value</td> <td>Table header cell font color</td> </tr> <tr> <th>@_table-th-font-family</th> <td>@table-th__font-family</td> <td class="vars_value">false</td> <td class="vars_value">'' | false | value</td> <td>Table header cell font family</td> </tr> <tr> <th>@_table-th-font-weight</th> <td>@table-th__font-weight</td> <td class="vars_value">@font-weight__bold</td> <td class="vars_value">'' | false | value</td> <td>Table header cell font weight</td> </tr> <tr> <th>@_table-th-line-height</th> <td>@table-th__line-height</td> <td class="vars_value">false</td> <td class="vars_value">'' | false | value</td> <td>Table header cell line height</td> </tr> <tr> <th>@_table-th-font-style</th> <td>@table-th__font-style</td> <td class="vars_value">false</td> <td class="vars_value">'' | false | value</td> <td>Table header cell font style</td> </tr> </table> </pre> </div></article><article id="table-caption" class="section"><div class="docs"><a href="#table-caption" 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="table-caption">Table caption</h1> <p> The <code>.lib-table-caption()</code> mixin is used to customize table caption.</p> <textarea class="preview-code" spellcheck="false"> <table class="example-table-3"> <caption>Table caption</caption> <thead> <tr> <th scope="col">Name</th> <th scope="col">Username</th> <th scope="col">Phone</th> <th scope="col">Site</th> <th scope="col">Age</th> <th scope="col">Job</th> <th scope="col">Status</th> </tr> </thead> <tfoot> <tr> <th>Name</th> <th>Username</th> <th>Phone</th> <th>Site</th> <th>Age</th> <th>Job</th> <th>Status</th> </tr> </tfoot> <tbody> <tr> <th scope="row">Mark</th> <td>@mdo</td> <td>+1 123 456 432</td> <td><a href="https://www.google.com">www.google.com</a></td> <td>23</td> <td>qa</td> <td>offline</td> </tr> <tr> <th scope="row">Alex</th> <td>@alex</td> <td>+1 333 222 111</td> <td><a href="http://magento.com/">magento.com</a></td> <td>32</td> <td>manager</td> <td>online</td> </tr> <tr> <th scope="row">Daniel</th> <td>@danik</td> <td>+1 334 328 975</td> <td><a href="https://www.yahoo.com">www.yahoo.com</a></td> <td>18</td> <td>developer</td> <td>offline</td> </tr> <tr> <th scope="row">Kate</th> <td>@kateUA</td> <td>+1 888 777 888</td> <td><a href="https://www.twitter.com">www.twitter.com</a></td> <td>18</td> <td>developer</td> <td>HR</td> </tr> </tbody> </table></textarea> </div><div class="code"><pre><code>.example-table-3 { .lib-table(); .lib-table-caption(@_table-caption-color: #f00); }</code></pre></div></article><article id="table-caption-mixin-variables" class="section"><div class="docs"><a href="#table-caption-mixin-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="table-caption-mixin-variables">Table caption mixin variables</h1> <pre> <table> <tr> <th class="vars_head">Mixin variable</th> <th class="vars_head">Global 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>@_table-caption-hide</th> <td>@table-caption__hide</td> <td class="vars_value">true</td> <td class="vars_value">'' | false | value</td> <td>Table caption is visible</td> </tr> <tr> <th>@_table-caption-font-size</th> <td>@table-caption__font-size</td> <td class="vars_value">false</td> <td class="vars_value">'' | false | value</td> <td>Table caption font size</td> </tr> <tr> <th>@_table-caption-color</th> <td>@table-caption__color</td> <td class="vars_value">false</td> <td class="vars_value">'' | false | value</td> <td>Table caption text color</td> </tr> <tr> <th nowrap="nowrap">@_table-caption-font-family</th> <td>@table-caption__font-family</td> <td class="vars_value">false</td> <td class="vars_value">'' | false | value</td> <td>Table caption font family</td> </tr> <tr> <th>@_table-caption-font-weight</th> <td>@table-caption__font-weight</td> <td class="vars_value">false</td> <td class="vars_value">'' | false | value</td> <td>Table caption font weight</td> </tr> <tr> <th>@_table-caption-font-style</th> <td>@table-caption__font-style</td> <td class="vars_value">false</td> <td class="vars_value">'' | false | value</td> <td>Table caption font style</td> </tr> <tr> <th>@_table-caption-line-height</th> <td>@table-caption__line-height</td> <td class="vars_value">false</td> <td class="vars_value">'' | false | value</td> <td>Table caption line height</td> </tr> <tr> <th>@_table-caption-alignment</th> <td>@table-caption__alignment</td> <td class="vars_value">false</td> <td class="vars_value">'' | false | value</td> <td>Table caption alignment</td> </tr> <tr> <th>@_table-caption-margin-top</th> <td>@table-caption__margin-top</td> <td class="vars_value">false</td> <td class="vars_value">'' | false | value</td> <td>Table caption top margin</td> </tr> <tr> <th nowrap="nowrap">@_table-caption-margin-bottom</th> <td>@table-caption__margin-bottom</td> <td class="vars_value">false</td> <td class="vars_value">'' | false | value</td> <td>Table caption bottom margin</td> </tr> </table> </pre> </div></article><article id="table-cells-resize" class="section"><div class="docs"><a href="#table-cells-resize" 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="table-cells-resize">Table cells resize</h1> <p> The <code>.lib-table-resize()</code> mixin provides table header cells and table cells paddings reset.</p> <textarea class="preview-code" spellcheck="false"> <table class="example-table-4"> <caption>Table caption</caption> <thead> <tr> <th scope="col">Name</th> <th scope="col">Username</th> <th scope="col">Phone</th> <th scope="col">Site</th> <th scope="col">Age</th> <th scope="col">Job</th> <th scope="col">Status</th> </tr> </thead> <tfoot> <tr> <th>Name</th> <th>Username</th> <th>Phone</th> <th>Site</th> <th>Age</th> <th>Job</th> <th>Status</th> </tr> </tfoot> <tbody> <tr> <th scope="row">Mark</th> <td>@mdo</td> <td>+1 123 456 432</td> <td><a href="https://www.google.com">www.google.com</a></td> <td>23</td> <td>qa</td> <td>offline</td> </tr> <tr> <th scope="row">Alex</th> <td>@alex</td> <td>+1 333 222 111</td> <td><a href="http://magento.com/">magento.com</a></td> <td>32</td> <td>manager</td> <td>online</td> </tr> <tr> <th scope="row">Daniel</th> <td>@danik</td> <td>+1 334 328 975</td> <td><a href="https://www.yahoo.com">www.yahoo.com</a></td> <td>18</td> <td>developer</td> <td>offline</td> </tr> <tr> <th scope="row">Kate</th> <td>@kateUA</td> <td>+1 888 777 888</td> <td><a href="https://www.twitter.com">www.twitter.com</a></td> <td>18</td> <td>developer</td> <td>HR</td> </tr> </tbody> </table></textarea> </div><div class="code"><pre><code>.example-table-4 { .lib-table(); .lib-table-resize( @_td-padding-top: 15px, @_td-padding-right: 25px, @_td-padding-bottom: 5px, @_td-padding-left: 0, @_th-padding-top: 15px, @_th-padding-right: 25px, @_th-padding-bottom: 10px, @_th-padding-left: 0 ); }</code></pre></div></article><article id="table-cells-resize-variables" class="section"><div class="docs"><a href="#table-cells-resize-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="table-cells-resize-variables">Table cells resize variables</h1> <pre> <table> <tr> <th class="vars_head">Mixin variable</th> <th class="vars_head">Global 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>@_th-padding-top</th> <td>@table-cell__padding-vertical / 2</td> <td class="vars_value">@_td-padding-top</td> <td class="vars_value">'' | false | value</td> <td>Table header cell top padding</td> </tr> <tr> <th>@_th-padding-right</th> <td>@table-cell__padding-horizontal / 2</td> <td class="vars_value">@_td-padding-right</td> <td class="vars_value">'' | false | value</td> <td>Table header cell right padding</td> </tr> <tr> <th>@_th-padding-bottom</th> <td>@table-cell__padding-vertical / 2</td> <td class="vars_value">@_td-padding-top</td> <td class="vars_value">'' | false | value</td> <td>Table header cell bottom padding</td> </tr> <tr> <th>@_th-padding-left</th> <td>@table-cell__padding-horizontal / 2</td> <td class="vars_value">@_td-padding-right</td> <td class="vars_value">'' | false | value</td> <td>Table header cell left padding</td> </tr> <tr> <th>@_td-padding-top</th> <td>@table-cell__padding-vertical / 2</td> <td class="vars_value">@table-cell__padding-vertical / 2</td> <td class="vars_value">'' | false | value</td> <td>Table cell top padding</td> </tr> <tr> <th>@_td-padding-right</th> <td>@table-cell__padding-horizontal / 2</td> <td class="vars_value">@table-cell__padding-horizontal / 2</td> <td class="vars_value">'' | false | value</td> <td>Table cell right padding</td> </tr> <tr> <th>@_td-padding-bottom</th> <td>@table-cell__padding-vertical / 2</td> <td class="vars_value">@_td-padding-top</td> <td class="vars_value">'' | false | value</td> <td>Table cell bottom padding</td> </tr> <tr> <th nowrap="nowrap">@_td-padding-left</th> <td>@table-cell__padding-horizontal / 2</td> <td class="vars_value" nowrap="nowrap">@_td-padding-right</td> <td class="vars_value">'' | false | value</td> <td>Table cell left padding</td> </tr> </table> </pre> </div></article><article id="table-background-customization" class="section"><div class="docs"><a href="#table-background-customization" 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="table-background-customization">Table background customization</h1> <p> The <code>.lib-table-background-color()</code> mixin provides table cells background customization options.</p> <textarea class="preview-code" spellcheck="false"> <table class="example-table-5"> <caption>Table caption</caption> <thead> <tr> <th scope="col">Name</th> <th scope="col">Username</th> <th scope="col">Phone</th> <th scope="col">Site</th> <th scope="col">Age</th> <th scope="col">Job</th> <th scope="col">Status</th> </tr> </thead> <tfoot> <tr> <th>Name</th> <th>Username</th> <th>Phone</th> <th>Site</th> <th>Age</th> <th>Job</th> <th>Status</th> </tr> </tfoot> <tbody> <tr> <th scope="row">Mark</th> <td>@mdo</td> <td>+1 123 456 432</td> <td><a href="https://www.google.com">www.google.com</a></td> <td>23</td> <td>qa</td> <td>offline</td> </tr> <tr> <th scope="row">Alex</th> <td>@alex</td> <td>+1 333 222 111</td> <td><a href="http://magento.com/">magento.com</a></td> <td>32</td> <td>manager</td> <td>online</td> </tr> <tr> <th scope="row">Daniel</th> <td>@danik</td> <td>+1 334 328 975</td> <td><a href="https://www.yahoo.com">www.yahoo.com</a></td> <td>18</td> <td>developer</td> <td>offline</td> </tr> <tr> <th scope="row">Kate</th> <td>@kateUA</td> <td>+1 888 777 888</td> <td><a href="https://www.twitter.com">www.twitter.com</a></td> <td>18</td> <td>developer</td> <td>HR</td> </tr> </tbody> </table></textarea> </div><div class="code"><pre><code>.example-table-5 { .lib-table(); .lib-table-background-color( @_table-background-color: #fff, @_table-head-background-color: #ccf, @_table-foot-background-color: #cff, @_table-td-background-color: #fcc, @_table-body-th-background-color: #ffc ); }</code></pre></div></article><article id="table-background-mixin-variables" class="section"><div class="docs"><a href="#table-background-mixin-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="table-background-mixin-variables">Table background mixin variables</h1> <pre> <table> <tr> <th class="vars_head">Mixin variable</th> <th class="vars_head">Global 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>@_table-background-color</th> <td>@table__background-color</td> <td class="vars_value">false</td> <td class="vars_value">'' | false | value</td> <td>Table background</td> </tr> <tr> <th>@_table-head-background-color</th> <td>@table-head__background-color</td> <td class="vars_value">@table__background-color</td> <td class="vars_value">'' | false | value</td> <td>Table thead background</td> </tr> <tr> <th>@_table-foot-background-color</th> <td>@table-foot__background-color</td> <td class="vars_value">@table__background-color</td> <td class="vars_value">'' | false | value</td> <td>Table tfoot background</td> </tr> <tr> <th>@_table-body-th-background-color</th> <td>@table-body-th__background-color</td> <td class="vars_value">@table__background-color</td> <td class="vars_value">'' | false | value</td> <td>Table header cells background</td> </tr> <tr> <th nowrap="nowrap">@_table-td-background-color</th> <td>@table-td__background-color</td> <td class="vars_value">@table__background-color</td> <td class="vars_value">'' | false | value</td> <td>Table cells background</td> </tr> </table> </pre> </div></article><article id="table-borders-customization" class="section"><div class="docs"><a href="#table-borders-customization" 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="table-borders-customization">Table borders customization</h1> <p> The <code>.lib-table-bordered()</code> mixin provides table borders customization options. To setup table borders use the following allowed values for the <code>@_type</code> variable:</p> <pre><code class="lang-css"> normal - all borders are set up horizontal - table head and table cells have only horizontal borders vertical - table head and table cells have only vertical borders light - only table head cells have bottom border clear - table does not have borders</code></pre> <textarea class="preview-code" spellcheck="false"> <table class="example-table-6"> <caption>Table caption</caption> <thead> <tr> <th scope="col">Name</th> <th scope="col">Username</th> <th scope="col">Phone</th> <th scope="col">Site</th> <th scope="col">Age</th> <th scope="col">Job</th> <th scope="col">Status</th> </tr> </thead> <tfoot> <tr> <th>Name</th> <th>Username</th> <th>Phone</th> <th>Site</th> <th>Age</th> <th>Job</th> <th>Status</th> </tr> </tfoot> <tbody> <tr> <th scope="row">Mark</th> <td>@mdo</td> <td>+1 123 456 432</td> <td><a href="https://www.google.com">www.google.com</a></td> <td>23</td> <td>qa</td> <td>offline</td> </tr> <tr> <th scope="row">Alex</th> <td>@alex</td> <td>+1 333 222 111</td> <td><a href="http://magento.com/">magento.com</a></td> <td>32</td> <td>manager</td> <td>online</td> </tr> <tr> <th scope="row">Daniel</th> <td>@danik</td> <td>+1 334 328 975</td> <td><a href="https://www.yahoo.com">www.yahoo.com</a></td> <td>18</td> <td>developer</td> <td>offline</td> </tr> <tr> <th scope="row">Kate</th> <td>@kateUA</td> <td>+1 888 777 888</td> <td><a href="https://www.twitter.com">www.twitter.com</a></td> <td>18</td> <td>developer</td> <td>HR</td> </tr> </tbody> </table></textarea> </div><div class="code"><pre><code>.example-table-6 { .lib-table(); .lib-table-bordered(); }</code></pre></div></article><article id="table-borders-mixin-variables" class="section"><div class="docs"><a href="#table-borders-mixin-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="table-borders-mixin-variables">Table borders mixin variables</h1> <pre> <table> <tr> <th class="vars_head">Mixin variable</th> <th class="vars_head">Global 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>@_table_type</th> <td>-</td> <td class="vars_value">normal</td> <td class="vars_value">normal | horizontal | vertical | light | clear | horizontal_body</td> <td>Table border settings. When is set to "horizontal_body", the table border settings are applied only for tbody</td> </tr> <tr> <th>@_table_border-width</th> <td>@table__border-width</td> <td class="vars_value" nowrap="nowrap">@border-width__base</td> <td class="vars_value">'' | false | value</td> <td>Table border width</td> </tr> <tr> <th>@_table_border-style</th> <td>@table__border-style</td> <td class="vars_value">solid</td> <td class="vars_value">'' | false | value</td> <td>Table border style</td> </tr> <tr> <th nowrap="nowrap">@_table_border-color</th> <td>@table__border-color</td> <td class="vars_value">@border-color__base</td> <td class="vars_value">'' | false | value</td> <td>Table border color</td> </tr> </table> </pre> </div></article><article id="table-with-horizontal-borders" class="section"><div class="docs"><a href="#table-with-horizontal-borders" 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="table-with-horizontal-borders">Table with horizontal borders</h1> <p> To set only horizontal borders for a table use:</p> <pre><code class="lang-css"> .lib-table-bordered(@_table_type: horizontal)</code></pre> <textarea class="preview-code" spellcheck="false"> <table class="example-table-7"> <caption>Table caption</caption> <thead> <tr> <th scope="col">Name</th> <th scope="col">Username</th> <th scope="col">Phone</th> <th scope="col">Site</th> <th scope="col">Age</th> <th scope="col">Job</th> <th scope="col">Status</th> </tr> </thead> <tfoot> <tr> <th>Name</th> <th>Username</th> <th>Phone</th> <th>Site</th> <th>Age</th> <th>Job</th> <th>Status</th> </tr> </tfoot> <tbody> <tr> <th scope="row">Mark</th> <td>@mdo</td> <td>+1 123 456 432</td> <td><a href="https://www.google.com">www.google.com</a></td> <td>23</td> <td>qa</td> <td>offline</td> </tr> <tr> <th scope="row">Alex</th> <td>@alex</td> <td>+1 333 222 111</td> <td><a href="http://magento.com/">magento.com</a></td> <td>32</td> <td>manager</td> <td>online</td> </tr> <tr> <th scope="row">Daniel</th> <td>@danik</td> <td>+1 334 328 975</td> <td><a href="https://www.yahoo.com">www.yahoo.com</a></td> <td>18</td> <td>developer</td> <td>offline</td> </tr> <tr> <th scope="row">Kate</th> <td>@kateUA</td> <td>+1 888 777 888</td> <td><a href="https://www.twitter.com">www.twitter.com</a></td> <td>18</td> <td>developer</td> <td>HR</td> </tr> </tbody> </table></textarea> </div><div class="code"><pre><code>.example-table-7 { .lib-table(); .lib-table-bordered( @_table_type: horizontal ); }</code></pre></div></article><article id="table-with-vertical-borders" class="section"><div class="docs"><a href="#table-with-vertical-borders" 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="table-with-vertical-borders">Table with vertical borders</h1> <p> To set only horizontal borders for a table use:</p> <pre><code class="lang-css"> .lib-table-bordered(@_table_type: vertical)</code></pre> <textarea class="preview-code" spellcheck="false"> <table class="example-table-8"> <caption>Table caption</caption> <thead> <tr> <th scope="col">Name</th> <th scope="col">Username</th> <th scope="col">Phone</th> <th scope="col">Site</th> <th scope="col">Age</th> <th scope="col">Job</th> <th scope="col">Status</th> </tr> </thead> <tfoot> <tr> <th>Name</th> <th>Username</th> <th>Phone</th> <th>Site</th> <th>Age</th> <th>Job</th> <th>Status</th> </tr> </tfoot> <tbody> <tr> <th scope="row">Mark</th> <td>@mdo</td> <td>+1 123 456 432</td> <td><a href="https://www.google.com">www.google.com</a></td> <td>23</td> <td>qa</td> <td>offline</td> </tr> <tr> <th scope="row">Alex</th> <td>@alex</td> <td>+1 333 222 111</td> <td><a href="http://magento.com/">magento.com</a></td> <td>32</td> <td>manager</td> <td>online</td> </tr> <tr> <th scope="row">Daniel</th> <td>@danik</td> <td>+1 334 328 975</td> <td><a href="https://www.yahoo.com">www.yahoo.com</a></td> <td>18</td> <td>developer</td> <td>offline</td> </tr> <tr> <th scope="row">Kate</th> <td>@kateUA</td> <td>+1 888 777 888</td> <td><a href="https://www.twitter.com">www.twitter.com</a></td> <td>18</td> <td>developer</td> <td>HR</td> </tr> </tbody> </table></textarea> </div><div class="code"><pre><code>.example-table-8 { .lib-table(); .lib-table-bordered( @_table_type: vertical ); }</code></pre></div></article><article id="table-with-light-borders" class="section"><div class="docs"><a href="#table-with-light-borders" 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="table-with-light-borders">Table with light borders</h1> <p> To set bottom borders only for a table caption use:</p> <pre><code class="lang-css"> .lib-table-bordered(@_table_type: light)</code></pre> <textarea class="preview-code" spellcheck="false"> <table class="example-table-9"> <caption>Table caption</caption> <thead> <tr> <th scope="col">Name</th> <th scope="col">Username</th> <th scope="col">Phone</th> <th scope="col">Site</th> <th scope="col">Age</th> <th scope="col">Job</th> <th scope="col">Status</th> </tr> </thead> <tfoot> <tr> <th>Name</th> <th>Username</th> <th>Phone</th> <th>Site</th> <th>Age</th> <th>Job</th> <th>Status</th> </tr> </tfoot> <tbody> <tr> <th scope="row">Mark</th> <td>@mdo</td> <td>+1 123 456 432</td> <td><a href="https://www.google.com">www.google.com</a></td> <td>23</td> <td>qa</td> <td>offline</td> </tr> <tr> <th scope="row">Alex</th> <td>@alex</td> <td>+1 333 222 111</td> <td><a href="http://magento.com/">magento.com</a></td> <td>32</td> <td>manager</td> <td>online</td> </tr> <tr> <th scope="row">Daniel</th> <td>@danik</td> <td>+1 334 328 975</td> <td><a href="https://www.yahoo.com">www.yahoo.com</a></td> <td>18</td> <td>developer</td> <td>offline</td> </tr> <tr> <th scope="row">Kate</th> <td>@kateUA</td> <td>+1 888 777 888</td> <td><a href="https://www.twitter.com">www.twitter.com</a></td> <td>18</td> <td>developer</td> <td>HR</td> </tr> </tbody> </table></textarea> </div><div class="code"><pre><code>.example-table-9 { .lib-table(); .lib-table-bordered( @_table_type: light ); }</code></pre></div></article><article id="table-without-borders" class="section"><div class="docs"><a href="#table-without-borders" 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="table-without-borders">Table without borders</h1> <p> To clear all table borders use:</p> <pre><code class="lang-css"> .lib-table-bordered(@_table_type: clear)</code></pre> <textarea class="preview-code" spellcheck="false"> <table class="example-table-10"> <caption>Table caption</caption> <thead> <tr> <th scope="col">Name</th> <th scope="col">Username</th> <th scope="col">Phone</th> <th scope="col">Site</th> <th scope="col">Age</th> <th scope="col">Job</th> <th scope="col">Status</th> </tr> </thead> <tfoot> <tr> <th>Name</th> <th>Username</th> <th>Phone</th> <th>Site</th> <th>Age</th> <th>Job</th> <th>Status</th> </tr> </tfoot> <tbody> <tr> <th scope="row">Mark</th> <td>@mdo</td> <td>+1 123 456 432</td> <td><a href="https://www.google.com">www.google.com</a></td> <td>23</td> <td>qa</td> <td>offline</td> </tr> <tr> <th scope="row">Alex</th> <td>@alex</td> <td>+1 333 222 111</td> <td><a href="http://magento.com/">magento.com</a></td> <td>32</td> <td>manager</td> <td>online</td> </tr> <tr> <th scope="row">Daniel</th> <td>@danik</td> <td>+1 334 328 975</td> <td><a href="https://www.yahoo.com">www.yahoo.com</a></td> <td>18</td> <td>developer</td> <td>offline</td> </tr> <tr> <th scope="row">Kate</th> <td>@kateUA</td> <td>+1 888 777 888</td> <td><a href="https://www.twitter.com">www.twitter.com</a></td> <td>18</td> <td>developer</td> <td>HR</td> </tr> </tbody> </table></textarea> </div><div class="code"><pre><code>.example-table-10 { .lib-table(); .lib-table-bordered( @_table_type: clear ); }</code></pre></div></article><article id="striped-table" class="section"><div class="docs"><a href="#striped-table" 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="striped-table">Striped table</h1> <p> The <code>.lib-table-striped()</code> mixin sets color backgrounds to table rows.</p> <textarea class="preview-code" spellcheck="false"> <table class="example-table-11"> <caption>Table caption</caption> <thead> <tr> <th scope="col">Name</th> <th scope="col">Username</th> <th scope="col">Phone</th> <th scope="col">Site</th> <th scope="col">Age</th> <th scope="col">Job</th> <th scope="col">Status</th> </tr> </thead> <tfoot> <tr> <th>Name</th> <th>Username</th> <th>Phone</th> <th>Site</th> <th>Age</th> <th>Job</th> <th>Status</th> </tr> </tfoot> <tbody> <tr> <th scope="row">Mark</th> <td>@mdo</td> <td>+1 123 456 432</td> <td><a href="https://www.google.com">www.google.com</a></td> <td>23</td> <td>qa</td> <td>offline</td> </tr> <tr> <th scope="row">Alex</th> <td>@alex</td> <td>+1 333 222 111</td> <td><a href="http://magento.com/">magento.com</a></td> <td>32</td> <td>manager</td> <td>online</td> </tr> <tr> <th scope="row">Daniel</th> <td>@danik</td> <td>+1 334 328 975</td> <td><a href="https://www.yahoo.com">www.yahoo.com</a></td> <td>18</td> <td>developer</td> <td>offline</td> </tr> <tr> <th scope="row">Kate</th> <td>@kateUA</td> <td>+1 888 777 888</td> <td><a href="https://www.twitter.com">www.twitter.com</a></td> <td>18</td> <td>developer</td> <td>HR</td> </tr> </tbody> </table></textarea> </div><div class="code"><pre><code>.example-table-11 { .lib-table(); .lib-table-striped( @_stripped-background-color: #ffc, @_stripped-color: #000, @_stripped-direction: horizontal, @_stripped-highlight: even ); }</code></pre></div></article><article id="striped-table-mixin-variables" class="section"><div class="docs"><a href="#striped-table-mixin-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="striped-table-mixin-variables">Striped table mixin variables</h1> <pre> <table> <tr> <th class="vars_head">Mixin variable</th> <th class="vars_head">Global 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>@_stripped-background-color</th> <td class="vars_value">@table-cell-stripped__background-color</td> <td class="vars_value">lighten(@table-cell__hover__background-color, 15%)</td> <td class="vars_value">'' | false | value</td> <td>Striped cells background color</td> </tr> <tr> <th>@_stripped-color</th> <td class="vars_value">@table-cell-stripped__color</td> <td class="vars_value">@text__color</td> <td class="vars_value">'' | false | value</td> <td>Striped cells text color</td> </tr> <tr> <th>@_stripped-direction</th> <td class="vars_value">-</td> <td class="vars_value">horizontal</td> <td class="vars_value">horizontal | vertical</td> <td>Stripes direction</td> </tr> <tr> <th>@_stripped-highlight</th> <td class="vars_value">-</td> <td class="vars_value">odd</td> <td class="vars_value">odd | even</td> <td>Rows stripes are applied to</td> </tr> </table> </pre> </div></article><article id="table-with-rows-hover" class="section"><div class="docs"><a href="#table-with-rows-hover" 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="table-with-rows-hover">Table with rows hover</h1> <p> The <code>.lib-table-hover()</code> mixin sets color backgrounds to hovered table rows.</p> <textarea class="preview-code" spellcheck="false"> <table class="example-table-12"> <caption>Table caption</caption> <thead> <tr> <th scope="col">Name</th> <th scope="col">Username</th> <th scope="col">Phone</th> <th scope="col">Site</th> <th scope="col">Age</th> <th scope="col">Job</th> <th scope="col">Status</th> </tr> </thead> <tfoot> <tr> <th>Name</th> <th>Username</th> <th>Phone</th> <th>Site</th> <th>Age</th> <th>Job</th> <th>Status</th> </tr> </tfoot> <tbody> <tr> <th scope="row">Mark</th> <td>@mdo</td> <td>+1 123 456 432</td> <td><a href="https://www.google.com">www.google.com</a></td> <td>23</td> <td>qa</td> <td>offline</td> </tr> <tr> <th scope="row">Alex</th> <td>@alex</td> <td>+1 333 222 111</td> <td><a href="http://magento.com/">magento.com</a></td> <td>32</td> <td>manager</td> <td>online</td> </tr> <tr> <th scope="row">Daniel</th> <td>@danik</td> <td>+1 334 328 975</td> <td><a href="https://www.yahoo.com">www.yahoo.com</a></td> <td>18</td> <td>developer</td> <td>offline</td> </tr> <tr> <th scope="row">Kate</th> <td>@kateUA</td> <td>+1 888 777 888</td> <td><a href="https://www.twitter.com">www.twitter.com</a></td> <td>18</td> <td>developer</td> <td>HR</td> </tr> </tbody> </table></textarea> </div><div class="code"><pre><code>.example-table-12 { .lib-table(); .lib-table-hover(); }</code></pre></div></article><article id="table-with-rows-hover-mixin-variables" class="section"><div class="docs"><a href="#table-with-rows-hover-mixin-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="table-with-rows-hover-mixin-variables">Table with rows hover mixin variables</h1> <pre> <table> <tr> <th class="vars_head">Mixin variable</th> <th class="vars_head">Global 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>@_table_cell-background-color-hover</th> <td>@table-cell__hover__background-color</td> <td class="vars_value">@panel__background-color</td> <td class="vars_value">'' | false | value</td> <td>Hovered table row background</td> </tr> <tr> <th>@_table_cell-odd-background-color-hover</th> <td>@table-cell__hover__background-color</td> <td class="vars_value">@_table_cell-background-color-hover</td> <td class="vars_value">'' | false | value</td> <td>Hovered table odd row background</td> </tr> </table> </pre> </div></article><article id="responsive-table-technics-1" class="section"><div class="docs"><a href="#responsive-table-technics-1" 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="responsive-table-technics-1">Responsive table technics #1</h1> <p> Magento UI library employs two responsive tables technics which are applied by calling an appropriate mixin.</p> <p> The <code>.lib-table-overflow()</code> mixin adds a horizontal scrollbar for a table. This mixin accepts no variables.</p> <textarea class="preview-code" spellcheck="false"> <div class="example-table-14"> <table class="example-table-13"> <caption>Table caption</caption> <thead> <tr> <th scope="col">Name</th> <th scope="col">Username</th> <th scope="col">Phone</th> <th scope="col">Site</th> <th scope="col">Age</th> <th scope="col">Job</th> <th scope="col">Status</th> </tr> </thead> <tfoot> <tr> <th>Name</th> <th>Username</th> <th>Phone</th> <th>Site</th> <th>Age</th> <th>Job</th> <th>Status</th> </tr> </tfoot> <tbody> <tr> <th scope="row">Mark</th> <td>@mdo</td> <td>+1 123 456 432</td> <td><a href="https://www.google.com">www.google.com</a></td> <td>23</td> <td>qa</td> <td>offline</td> </tr> <tr> <th scope="row">Alex</th> <td>@alex</td> <td>+1 333 222 111</td> <td><a href="http://magento.com/">magento.com</a></td> <td>32</td> <td>manager</td> <td>online</td> </tr> <tr> <th scope="row">Daniel</th> <td>@danik</td> <td>+1 334 328 975</td> <td><a href="https://www.yahoo.com">www.yahoo.com</a></td> <td>18</td> <td>developer</td> <td>offline</td> </tr> <tr> <th scope="row">Kate</th> <td>@kateUA</td> <td>+1 888 777 888</td> <td><a href="https://www.twitter.com">www.twitter.com</a></td> <td>18</td> <td>developer</td> <td>offline</td> </tr> </tbody> </table> </div></textarea> </div><div class="code"><pre><code>.example-table-13 { .lib-table(); .lib-table-bordered(); .lib-table-striped(); .lib-table-hover(); } @media only screen and (max-width: @screen__m) { .example-table-14 { .lib-table-overflow(); } }</code></pre></div></article><article id="responsive-table-technics-2" class="section"><div class="docs"><a href="#responsive-table-technics-2" 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="responsive-table-technics-2">Responsive table technics #2</h1> <p> The <code>.lib-table-responsive()</code> mixin rearranges table cells for mobile version.</p> <textarea class="preview-code" spellcheck="false"> <table class="example-table-15"> <caption>Table caption</caption> <thead> <tr> <th scope="col">Name</th> <th scope="col">Username</th> <th scope="col">Phone</th> <th scope="col">Site</th> <th scope="col">Age</th> <th scope="col">Job</th> <th scope="col">Status</th> </tr> </thead> <tfoot> <tr> <th colspan="6">Table summary</th> <td data-th="Table summary">Table footer text</td> </tr> </tfoot> <tbody> <tr> <th data-th="Name" scope="row">Mark</th> <td data-th="Username">@mdo</td> <td data-th="Phone">+1 123 456 432</td> <td data-th="Site"><a href="https://www.google.com">www.google.com</a></td> <td data-th="Age">23</td> <td data-th="Job">qa</td> <td data-th="Status">offline</td> </tr> <tr> <th data-th="Name" scope="row">Alex</th> <td data-th="Username">@alex</td> <td data-th="Phone">+1 333 222 111</td> <td data-th="Site"><a href="http://magento.com/">magento.com</a></td> <td data-th="Age">32</td> <td data-th="Job">manager</td> <td data-th="Status">online</td> </tr> <tr> <th data-th="Name" scope="row">Daniel</th> <td data-th="Username">@danik</td> <td data-th="Phone">+1 334 328 975</td> <td data-th="Site"><a href="https://www.yahoo.com">www.yahoo.com</a></td> <td data-th="Age">18</td> <td data-th="Job">developer</td> <td data-th="Status">offline</td> </tr> <tr> <th data-th="Name" scope="row">Kate</th> <td data-th="Username">@kateUA</td> <td data-th="Phone">+1 888 777 888</td> <td data-th="Site"><a href="https://www.twitter.com">www.twitter.com</a></td> <td data-th="Age">18</td> <td data-th="Job">HR</td> <td data-th="Status">online</td> </tr> </tbody> </table></textarea> </div><div class="code"><pre><code>.example-table-15 { .lib-table(); .lib-table-bordered(); .lib-table-striped(); .lib-table-hover(); } @media only screen and (max-width: @screen__m) { .example-table-15 { .lib-table-responsive( @_table-background-color-responsive: #cff, @_table-th-background-color-responsive: #ffc, @_reset-table-striped: true, @_reset-table-hover: true ); } }</code></pre></div></article><article id="responsive-table-technics-2-mixin-variables" class="section"><div class="docs"><a href="#responsive-table-technics-2-mixin-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="responsive-table-technics-2-mixin-variables">Responsive table technics #2 mixin variables</h1> <pre> <table> <tr> <th class="vars_head">Mixin variable</th> <th class="vars_head">Global 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>@_table-background-color-responsive</th> <td class="vars_value">@table-responsive__background-color</td> <td class="vars_value">@table__background-color</td> <td class="vars_value">'' | false | value</td> <td>Responsive table background</td> </tr> <tr> <th>@_table-th-background-color-responsive</th> <td class="vars_value">@table-responsive-th__background-color</td> <td class="vars_value">false</td> <td class="vars_value">'' | false | value</td> <td>Responsive table header cells background</td> </tr> <tr> <th>@_reset-table-striped</th> <td class="vars_value">false</td> <td class="vars_value">-</td> <td class="vars_value">true | false</td> <td>Responsive table striped cells</td> </tr> <tr> <th>@_reset-table-hover</th> <td class="vars_value">false</td> <td class="vars_value">-</td> <td class="vars_value">true | false</td> <td>Responsive table hovered table row background</td> </tr> <tr> <th>@_table-responsive-cell-padding</th> <td class="vars_value">@table-responsive-cell__padding</td> <td class="vars_value">@indent__xs 0</td> <td class="vars_value">true | false</td> <td>Responsive table cells padding</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 … [Строка слишком длинная. Вы можете скачать файл]