.example-table-1 {
.lib-table();
}
.example-table-1 {
.lib-table();
}
Mixin variable | Default value | Allowable values | Comment |
---|---|---|---|
@_table-width | 100% | '' | false | value | Table width |
@_cell-padding-horizontal | @indent__s | '' | false | value | Table cell horizontal padding |
@_cell-padding-vertical | 8px | '' | false | value | Table cell vertical padding |
@_table-margin-bottom | false | '' | false | value | Table margin bottom |
.example-table-2 {
.lib-table-typography();
}
Mixin variable | Default value | Allowable values | Comment |
---|---|---|---|
@_table-td-font-size | false | '' | false | value | Table cell font size |
@_table-td-color | false | '' | false | value | Table cell font color |
@_table-td-font-family | false | '' | false | value | Table cell font family |
@_table-td-font-weight | false | '' | false | value | Table cell font weight |
@_table-td-line-height | false | '' | false | value | Table cell line height |
@_table-td-font-style | false | '' | false | value | Table cell font style |
@_table-th-font-size | false | '' | false | value | Table header cell font size |
@_table-th-color | @text__color__intense | '' | false | value | Table header cell font color |
@_table-th-font-family | false | '' | false | value | Table header cell font family |
@_table-th-font-weight | @font-weight__bold | '' | false | value | Table header cell font weight |
@_table-th-line-height | false | '' | false | value | Table header cell line height |
@_table-th-font-style | false | '' | false | value | Table header cell font style |
.example-table-3 {
.lib-table();
.lib-table-caption(@_table-caption-color: #f00);
}
Mixin variable | Default value | Allowable values | Comment |
---|---|---|---|
@_table-caption-hide | true | '' | false | value | Table caption is visible |
@_table-caption-font-size | false | '' | false | value | Table caption font size |
@_table-caption-color | false | '' | false | value | Table caption text color |
@_table-caption-font-family | false | '' | false | value | Table caption font family |
@_table-caption-font-weight | false | '' | false | value | Table caption font weight |
@_table-caption-font-style | false | '' | false | value | Table caption font style |
@_table-caption-line-height | false | '' | false | value | Table caption line height |
@_table-caption-alignment | false | '' | false | value | Table caption alignment |
@_table-caption-margin-top | false | '' | false | value | Table caption top margin |
@_table-caption-margin-bottom | false | '' | false | value | Table caption bottom margin |
The .lib-table-resize()
mixin provides table header cells and table cells paddings reset.
.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
);
}
Mixin variable | Default value | Allowable values | Comment |
---|---|---|---|
@_th-padding-top | @_td-padding-top | '' | false | value | Table header cell top padding |
@_th-padding-right | @_td-padding-right | '' | false | value | Table header cell right padding |
@_th-padding-bottom | @_td-padding-top | '' | false | value | Table header cell bottom padding |
@_th-padding-left | @_td-padding-right | '' | false | value | Table header cell left padding |
@_td-padding-top | @table-cell__padding-vertical / 2 | '' | false | value | Table cell top padding |
@_td-padding-right | @table-cell__padding-horizontal / 2 | '' | false | value | Table cell right padding |
@_td-padding-bottom | @_td-padding-top | '' | false | value | Table cell bottom padding |
@_td-padding-left | @_td-padding-right | '' | false | value | Table cell left padding |
The .lib-table-background-color()
mixin provides table cells background customization options.
.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
);
}
Mixin variable | Allowable values | Variables list names | Comment |
---|---|---|---|
@_table-background-color | false | '' | false | value | Table background |
@_table-head-background-color | @table__background-color | '' | false | value | Table thead background |
@_table-foot-background-color | @table__background-color | '' | false | value | Table tfoot background |
@_table-body-th-background-color | @table__background-color | '' | false | value | Table header cells background |
@_table-td-background-color | @table__background-color | '' | false | value | Table cells background |
The .lib-table-bordered()
mixin provides table borders customization options. To setup table borders use the following allowed values for the @_type
variable:
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
.example-table-6 {
.lib-table();
.lib-table-bordered();
}
Mixin 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 applyed only for tbody |
@_table_border-width | @border-width__base | '' | false | value | Table border width |
@_table_border-style | solid | '' | false | value | Table border style |
@_table_border-color | @border-color__base | '' | false | value | Table border color |
To set only horizontal borders for a table use:
.lib-table-bordered(@_table_type: horizontal)
.example-table-7 {
.lib-table();
.lib-table-bordered(
@_table_type: horizontal
);
}
To set only horizontal borders for a table use:
.lib-table-bordered(@_table_type: vertical)
.example-table-8 {
.lib-table();
.lib-table-bordered(
@_table_type: vertical
);
}
To set bottom borders only for a table caption use:
.lib-table-bordered(@_table_type: light)
.example-table-9 {
.lib-table();
.lib-table-bordered(
@_table_type: light
);
}
.example-table-10 {
.lib-table();
.lib-table-bordered(
@_table_type: clear
);
}
.example-table-11 {
.lib-table();
.lib-table-striped(
@_stripped-background-color: #ffc,
@_stripped-color: #000,
@_stripped-direction: horizontal,
@_stripped-highlight: even
);
}
Mixin variable | Variables list names | 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-td__color | @text__color | '' | false | value | Striped cells text color |
@_stripped-direction | - | horizontal | horizontal | vertical | Stripes direction |
@_stripped-highlight | - | odd | odd | even | Rows stripes are applyed to |
.example-table-12 {
.lib-table();
.lib-table-hover();
}
Mixin variable | Default value | Allowed values | Comment |
---|---|---|---|
@_table_cell-background-color-hover | @panel__background-color | '' | false | value | Hovered table row background |
@_table_cell-odd-background-color-hover | @_table_cell-background-color-hover | '' | false | value | Hovered table odd row background |
Magento UI library employs two responsive tables technics which are applyed by calling an appropriate mixin.
The .lib-table-overflow()
mixin adds a horizontal scrollbar for a table. This mixin accepts no variables.
.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();
}
}
The .lib-table-responsive()
mixin rearranges table cells for mobile version.
.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
);
}
}
Mixin variable | Variables list names | 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 | @indent__xs 0 | - | true | false | Responsive table cells padding |