// /** // * Copyright © Magento, Inc. All rights reserved. // * See COPYING.txt for license details. // */ // # Tables // // Table cells padding, width and bottom margin customization options. // // ```html //
Name | //Username | //Phone | //Site | //Age | //Job | //Status | //
---|---|---|---|---|---|---|
Name | //Username | //Phone | //Site | //Age | //Job | //Status | //
Mark | //@mdo | //+1 123 456 432 | //www.google.com | //23 | //qa | //offline | //
Alex | //@alex | //+1 333 222 111 | //magento.com | //32 | //manager | //online | //
Daniel | //@danik | //+1 334 328 975 | //www.yahoo.com | //18 | //developer | //offline | //
Kate | //@kateUA | //+1 888 777 888 | //www.twitter.com | //18 | //developer | //HR | //
//
Mixin variable | //Global variable | //Default value | //Allowed values | //Comment | //
---|---|---|---|---|
@_table-width | //@table__width | //100% | //'' | false | value | //Table width | //
@_cell-padding-horizontal | //@table-cell__padding-horizontal | //@indent__s | //'' | false | value | //Table cell horizontal padding | //
@_cell-padding-vertical | //@table-cell__padding-vertical | //8px | //'' | false | value | //Table cell vertical padding | //
@_table-margin-bottom | //@table__margin-bottom | //false | //'' | false | value | //Table margin bottom | //
.lib-table-typography()
mixin provides table typography customization options.
//
// ```html
// Name | //Username | //Phone | //Site | //Age | //Job | //Status | //
---|---|---|---|---|---|---|
Name | //Username | //Phone | //Site | //Age | //Job | //Status | //
Mark | //@mdo | //+1 123 456 432 | //www.google.com | //23 | //qa | //offline | //
Alex | //@alex | //+1 333 222 111 | //magento.com | //32 | //manager | //online | //
Daniel | //@danik | //+1 334 328 975 | //www.yahoo.com | //18 | //developer | //offline | //
Kate | //@kateUA | //+1 888 777 888 | //www.twitter.com | //18 | //developer | //HR | //
//
Mixin variable | //Global variable | //Default value | //Allowed values | //Comment | //
---|---|---|---|---|
@_table-td-font-size | //@table-td__font-size | //false | //'' | false | value | //Table cell font size | //
@_table-td-color | //@table-td__color | //false | //'' | false | value | //Table cell font color | //
@_table-td-font-family | //@table-td__font-family | //false | //'' | false | value | //Table cell font family | //
@_table-td-font-weight | //@table-td__font-weight | //false | //'' | false | value | //Table cell font weight | //
@_table-td-line-height | //@table-td__line-height | //false | //'' | false | value | //Table cell line height | //
@_table-td-font-style | //@table-td__font-style | //false | //'' | false | value | //Table cell font style | //
@_table-th-font-size | //@table-th__font-size | //false | //'' | false | value | //Table header cell font size | //
@_table-th-color | //@table-th__color | //@text__color__intense | //'' | false | value | //Table header cell font color | //
@_table-th-font-family | //@table-th__font-family | //false | //'' | false | value | //Table header cell font family | //
@_table-th-font-weight | //@table-th__font-weight | //@font-weight__bold | //'' | false | value | //Table header cell font weight | //
@_table-th-line-height | //@table-th__line-height | //false | //'' | false | value | //Table header cell line height | //
@_table-th-font-style | //@table-th__font-style | //false | //'' | false | value | //Table header cell font style | //
.lib-table-caption()
mixin is used to customize table caption.
//
// ```html
// Name | //Username | //Phone | //Site | //Age | //Job | //Status | //
---|---|---|---|---|---|---|
Name | //Username | //Phone | //Site | //Age | //Job | //Status | //
Mark | //@mdo | //+1 123 456 432 | //www.google.com | //23 | //qa | //offline | //
Alex | //@alex | //+1 333 222 111 | //magento.com | //32 | //manager | //online | //
Daniel | //@danik | //+1 334 328 975 | //www.yahoo.com | //18 | //developer | //offline | //
Kate | //@kateUA | //+1 888 777 888 | //www.twitter.com | //18 | //developer | //HR | //
//
Mixin variable | //Global variable | //Default value | //Allowed values | //Comment | //
---|---|---|---|---|
@_table-caption-hide | //@table-caption__hide | //true | //'' | false | value | //Table caption is visible | //
@_table-caption-font-size | //@table-caption__font-size | //false | //'' | false | value | //Table caption font size | //
@_table-caption-color | //@table-caption__color | //false | //'' | false | value | //Table caption text color | //
@_table-caption-font-family | //@table-caption__font-family | //false | //'' | false | value | //Table caption font family | //
@_table-caption-font-weight | //@table-caption__font-weight | //false | //'' | false | value | //Table caption font weight | //
@_table-caption-font-style | //@table-caption__font-style | //false | //'' | false | value | //Table caption font style | //
@_table-caption-line-height | //@table-caption__line-height | //false | //'' | false | value | //Table caption line height | //
@_table-caption-alignment | //@table-caption__alignment | //false | //'' | false | value | //Table caption alignment | //
@_table-caption-margin-top | //@table-caption__margin-top | //false | //'' | false | value | //Table caption top margin | //
@_table-caption-margin-bottom | //@table-caption__margin-bottom | //false | //'' | false | value | //Table caption bottom margin | //
.lib-table-resize()
mixin provides table header cells and table cells paddings reset.
//
// ```html
// Name | //Username | //Phone | //Site | //Age | //Job | //Status | //
---|---|---|---|---|---|---|
Name | //Username | //Phone | //Site | //Age | //Job | //Status | //
Mark | //@mdo | //+1 123 456 432 | //www.google.com | //23 | //qa | //offline | //
Alex | //@alex | //+1 333 222 111 | //magento.com | //32 | //manager | //online | //
Daniel | //@danik | //+1 334 328 975 | //www.yahoo.com | //18 | //developer | //offline | //
Kate | //@kateUA | //+1 888 777 888 | //www.twitter.com | //18 | //developer | //HR | //
//
Mixin variable | //Global variable | //Default value | //Allowed values | //Comment | //
---|---|---|---|---|
@_th-padding-top | //@table-cell__padding-vertical / 2 | //@_td-padding-top | //'' | false | value | //Table header cell top padding | //
@_th-padding-right | //@table-cell__padding-horizontal / 2 | //@_td-padding-right | //'' | false | value | //Table header cell right padding | //
@_th-padding-bottom | //@table-cell__padding-vertical / 2 | //@_td-padding-top | //'' | false | value | //Table header cell bottom padding | //
@_th-padding-left | //@table-cell__padding-horizontal / 2 | //@_td-padding-right | //'' | false | value | //Table header cell left padding | //
@_td-padding-top | //@table-cell__padding-vertical / 2 | //@table-cell__padding-vertical / 2 | //'' | false | value | //Table cell top padding | //
@_td-padding-right | //@table-cell__padding-horizontal / 2 | //@table-cell__padding-horizontal / 2 | //'' | false | value | //Table cell right padding | //
@_td-padding-bottom | //@table-cell__padding-vertical / 2 | //@_td-padding-top | //'' | false | value | //Table cell bottom padding | //
@_td-padding-left | //@table-cell__padding-horizontal / 2 | //@_td-padding-right | //'' | false | value | //Table cell left padding | //
.lib-table-background-color()
mixin provides table cells background customization options.
//
// ```html
// Name | //Username | //Phone | //Site | //Age | //Job | //Status | //
---|---|---|---|---|---|---|
Name | //Username | //Phone | //Site | //Age | //Job | //Status | //
Mark | //@mdo | //+1 123 456 432 | //www.google.com | //23 | //qa | //offline | //
Alex | //@alex | //+1 333 222 111 | //magento.com | //32 | //manager | //online | //
Daniel | //@danik | //+1 334 328 975 | //www.yahoo.com | //18 | //developer | //offline | //
Kate | //@kateUA | //+1 888 777 888 | //www.twitter.com | //18 | //developer | //HR | //
//
Mixin variable | //Global variable | //Default value | //Allowed values | //Comment | //
---|---|---|---|---|
@_table-background-color | //@table__background-color | //false | //'' | false | value | //Table background | //
@_table-head-background-color | //@table-head__background-color | //@table__background-color | //'' | false | value | //Table thead background | //
@_table-foot-background-color | //@table-foot__background-color | //@table__background-color | //'' | false | value | //Table tfoot background | //
@_table-body-th-background-color | //@table-body-th__background-color | //@table__background-color | //'' | false | value | //Table header cells background | //
@_table-td-background-color | //@table-td__background-color | //@table__background-color | //'' | false | value | //Table cells background | //
.lib-table-bordered()
mixin provides table borders customization options. To setup table borders use the following allowed values for the @_type
variable:
//
// ```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
// ```
//
// ```html
// Name | //Username | //Phone | //Site | //Age | //Job | //Status | //
---|---|---|---|---|---|---|
Name | //Username | //Phone | //Site | //Age | //Job | //Status | //
Mark | //@mdo | //+1 123 456 432 | //www.google.com | //23 | //qa | //offline | //
Alex | //@alex | //+1 333 222 111 | //magento.com | //32 | //manager | //online | //
Daniel | //@danik | //+1 334 328 975 | //www.yahoo.com | //18 | //developer | //offline | //
Kate | //@kateUA | //+1 888 777 888 | //www.twitter.com | //18 | //developer | //HR | //
//
Mixin variable | //Global variable | //Default value | //Allowed values | //Comment | //
---|---|---|---|---|
@_table_type | //- | //normal | //normal | horizontal | vertical | light | clear | horizontal_body | //Table border settings. When is set to "horizontal_body", the table border settings are applied only for tbody | //
@_table_border-width | //@table__border-width | //@border-width__base | //'' | false | value | //Table border width | //
@_table_border-style | //@table__border-style | //solid | //'' | false | value | //Table border style | //
@_table_border-color | //@table__border-color | //@border-color__base | //'' | false | value | //Table border color | //
Name | //Username | //Phone | //Site | //Age | //Job | //Status | //
---|---|---|---|---|---|---|
Name | //Username | //Phone | //Site | //Age | //Job | //Status | //
Mark | //@mdo | //+1 123 456 432 | //www.google.com | //23 | //qa | //offline | //
Alex | //@alex | //+1 333 222 111 | //magento.com | //32 | //manager | //online | //
Daniel | //@danik | //+1 334 328 975 | //www.yahoo.com | //18 | //developer | //offline | //
Kate | //@kateUA | //+1 888 777 888 | //www.twitter.com | //18 | //developer | //HR | //
Name | //Username | //Phone | //Site | //Age | //Job | //Status | //
---|---|---|---|---|---|---|
Name | //Username | //Phone | //Site | //Age | //Job | //Status | //
Mark | //@mdo | //+1 123 456 432 | //www.google.com | //23 | //qa | //offline | //
Alex | //@alex | //+1 333 222 111 | //magento.com | //32 | //manager | //online | //
Daniel | //@danik | //+1 334 328 975 | //www.yahoo.com | //18 | //developer | //offline | //
Kate | //@kateUA | //+1 888 777 888 | //www.twitter.com | //18 | //developer | //HR | //
Name | //Username | //Phone | //Site | //Age | //Job | //Status | //
---|---|---|---|---|---|---|
Name | //Username | //Phone | //Site | //Age | //Job | //Status | //
Mark | //@mdo | //+1 123 456 432 | //www.google.com | //23 | //qa | //offline | //
Alex | //@alex | //+1 333 222 111 | //magento.com | //32 | //manager | //online | //
Daniel | //@danik | //+1 334 328 975 | //www.yahoo.com | //18 | //developer | //offline | //
Kate | //@kateUA | //+1 888 777 888 | //www.twitter.com | //18 | //developer | //HR | //
Name | //Username | //Phone | //Site | //Age | //Job | //Status | //
---|---|---|---|---|---|---|
Name | //Username | //Phone | //Site | //Age | //Job | //Status | //
Mark | //@mdo | //+1 123 456 432 | //www.google.com | //23 | //qa | //offline | //
Alex | //@alex | //+1 333 222 111 | //magento.com | //32 | //manager | //online | //
Daniel | //@danik | //+1 334 328 975 | //www.yahoo.com | //18 | //developer | //offline | //
Kate | //@kateUA | //+1 888 777 888 | //www.twitter.com | //18 | //developer | //HR | //
.lib-table-striped()
mixin sets color backgrounds to table rows.
//
// ```html
// Name | //Username | //Phone | //Site | //Age | //Job | //Status | //
---|---|---|---|---|---|---|
Name | //Username | //Phone | //Site | //Age | //Job | //Status | //
Mark | //@mdo | //+1 123 456 432 | //www.google.com | //23 | //qa | //offline | //
Alex | //@alex | //+1 333 222 111 | //magento.com | //32 | //manager | //online | //
Daniel | //@danik | //+1 334 328 975 | //www.yahoo.com | //18 | //developer | //offline | //
Kate | //@kateUA | //+1 888 777 888 | //www.twitter.com | //18 | //developer | //HR | //
//
Mixin variable | //Global variable | //Default value | //Allowed values | //Comment | //
---|---|---|---|---|
@_stripped-background-color | //@table-cell-stripped__background-color | //lighten(@table-cell__hover__background-color, 15%) | //'' | false | value | //Striped cells background color | //
@_stripped-color | //@table-cell-stripped__color | //@text__color | //'' | false | value | //Striped cells text color | //
@_stripped-direction | //- | //horizontal | //horizontal | vertical | //Stripes direction | //
@_stripped-highlight | //- | //odd | //odd | even | //Rows stripes are applied to | //
.lib-table-hover()
mixin sets color backgrounds to hovered table rows.
//
// ```html
// Name | //Username | //Phone | //Site | //Age | //Job | //Status | //
---|---|---|---|---|---|---|
Name | //Username | //Phone | //Site | //Age | //Job | //Status | //
Mark | //@mdo | //+1 123 456 432 | //www.google.com | //23 | //qa | //offline | //
Alex | //@alex | //+1 333 222 111 | //magento.com | //32 | //manager | //online | //
Daniel | //@danik | //+1 334 328 975 | //www.yahoo.com | //18 | //developer | //offline | //
Kate | //@kateUA | //+1 888 777 888 | //www.twitter.com | //18 | //developer | //HR | //
//
Mixin variable | //Global variable | //Default value | //Allowed values | //Comment | //
---|---|---|---|---|
@_table_cell-background-color-hover | //@table-cell__hover__background-color | //@panel__background-color | //'' | false | value | //Hovered table row background | //
@_table_cell-odd-background-color-hover | //@table-cell__hover__background-color | //@_table_cell-background-color-hover | //'' | false | value | //Hovered table odd row background | //
.lib-table-overflow()
mixin adds a horizontal scrollbar for a table. This mixin accepts no variables.
//
// ```html
// Name | //Username | //Phone | //Site | //Age | //Job | //Status | //
---|---|---|---|---|---|---|
Name | //Username | //Phone | //Site | //Age | //Job | //Status | //
Mark | //@mdo | //+1 123 456 432 | //www.google.com | //23 | //qa | //offline | //
Alex | //@alex | //+1 333 222 111 | //magento.com | //32 | //manager | //online | //
Daniel | //@danik | //+1 334 328 975 | //www.yahoo.com | //18 | //developer | //offline | //
Kate | //@kateUA | //+1 888 777 888 | //www.twitter.com | //18 | //developer | //offline | //
.lib-table-responsive()
mixin rearranges table cells for mobile version.
//
// ```html
// Name | //Username | //Phone | //Site | //Age | //Job | //Status | //
---|---|---|---|---|---|---|
Table summary | //Table footer text | //|||||
Mark | //@mdo | //+1 123 456 432 | //www.google.com | //23 | //qa | //offline | //
Alex | //@alex | //+1 333 222 111 | //magento.com | //32 | //manager | //online | //
Daniel | //@danik | //+1 334 328 975 | //www.yahoo.com | //18 | //developer | //offline | //
Kate | //@kateUA | //+1 888 777 888 | //www.twitter.com | //18 | //HR | //online | //
//
Mixin variable | //Global variable | //Default value | //Allowed values | //Comment | //
---|---|---|---|---|
@_table-background-color-responsive | //@table-responsive__background-color | //@table__background-color | //'' | false | value | //Responsive table background | //
@_table-th-background-color-responsive | //@table-responsive-th__background-color | //false | //'' | false | value | //Responsive table header cells background | //
@_reset-table-striped | //false | //- | //true | false | //Responsive table striped cells | //
@_reset-table-hover | //false | //- | //true | false | //Responsive table hovered table row background | //
@_table-responsive-cell-padding | //@table-responsive-cell__padding | //@indent__xs 0 | //true | false | //Responsive table cells padding | //