File: /var/www/vhost/disk-apps/magento.bikenow.co/lib/web/css/source/lib/_tables.less
// /**
// * Copyright © Magento, Inc. All rights reserved.
// * See COPYING.txt for license details.
// */
//
// Tables
// _____________________________________________
.lib-table(
@_table-width: @table__width,
@_cell-padding-vertical: @table-cell__padding-vertical,
@_cell-padding-horizontal: @table-cell__padding-horizontal,
@_table-margin-bottom: @table__margin-bottom
) {
.lib-css(margin-bottom, @_table-margin-bottom);
.lib-css(width, @_table-width);
border-collapse: collapse;
border-spacing: 0;
max-width: 100%;
th {
text-align: left;
}
> tbody,
> tfoot {
> tr {
> th,
> td {
vertical-align: top;
}
}
}
> thead > tr {
> th,
> td {
vertical-align: bottom;
}
}
> thead,
> tbody,
> tfoot {
> tr {
> th,
> td {
.lib-css(padding, @_cell-padding-vertical @_cell-padding-horizontal);
}
}
}
}
.lib-table-typography(
@_table-td-font-size: @table-td__font-size,
@_table-td-color: @table-td__color,
@_table-td-font-family: @table-td__font-family,
@_table-td-font-weight: @table-td__font-weight,
@_table-td-line-height: @table-td__line-height,
@_table-td-font-style: @table-td__font-style,
@_table-th-font-size: @table-th__font-size,
@_table-th-color: @table-th__color,
@_table-th-font-family: @table-th__font-family,
@_table-th-font-weight: @table-th__font-weight,
@_table-th-line-height: @table-th__line-height,
@_table-th-font-style: @table-th__font-style
) {
> thead,
> tbody,
> tfoot {
> tr {
> td {
.lib-typography(
@_font-size: @_table-td-font-size,
@_color: @_table-td-color,
@_font-family: @_table-td-font-family,
@_font-weight: @_table-td-font-weight,
@_line-height: @_table-td-line-height,
@_font-style: @_table-td-font-style
);
}
> th {
.lib-typography(
@_font-size: @_table-th-font-size,
@_color: @_table-th-color,
@_font-family: @_table-th-font-family,
@_font-weight: @_table-th-font-weight,
@_line-height: @_table-th-line-height,
@_font-style: @_table-th-font-style
);
}
}
}
}
.lib-table-background-color(
@_table-background-color: @table__background-color,
@_table-head-background-color: @table-head__background-color,
@_table-foot-background-color: @table-foot__background-color,
@_table-td-background-color: @table-td__background-color,
@_table-body-th-background-color: @table-body-th__background-color
) {
.lib-css(background, @_table-background-color);
> thead {
.lib-css(background, @_table-head-background-color);
}
> tfoot {
.lib-css(background, @_table-foot-background-color);
}
> tbody > tr > td {
.lib-css(background, @_table-td-background-color);
}
> tbody > tr >th {
.lib-css(background, @_table-body-th-background-color);
}
}
.lib-table-resize(
@_td-padding-top: @table-cell__padding-vertical / 2,
@_td-padding-right: @table-cell__padding-horizontal / 2,
@_td-padding-bottom: @_td-padding-top,
@_td-padding-left: @_td-padding-right,
@_th-padding-top: @_td-padding-top,
@_th-padding-right: @_td-padding-right,
@_th-padding-bottom: @_td-padding-top,
@_th-padding-left: @_td-padding-right
) {
> thead,
> tbody,
> tfoot {
> tr {
> td {
.lib-css(padding, @_td-padding-top @_td-padding-right @_td-padding-bottom @_td-padding-left);
}
> th {
.lib-css(padding, @_th-padding-top @_th-padding-right @_th-padding-bottom @_th-padding-left);
}
}
}
}
.lib-table-bordered(
@_table_type: normal,
@_table_border-width: @table__border-width,
@_table_border-style: @table__border-style,
@_table_border-color: @table__border-color
) when (@_table_type = normal){
.lib-css(border, @_table_border-width @_table_border-style @_table_border-color);
> thead,
> tbody,
> tfoot {
> tr {
> th,
> td {
.lib-css(border, @_table_border-width @_table_border-style @_table_border-color);
}
}
}
}
.lib-table-bordered(
@_table_type: normal,
@_table_border-width: @table__border-width,
@_table_border-style: @table__border-style,
@_table_border-color: @table__border-color
) when (@_table_type = horizontal){
> thead,
> tbody,
> tfoot {
> tr {
> th,
> td {
.lib-css(border-top, @_table_border-width @_table_border-style @_table_border-color);
}
}
}
> caption + thead,
> colgroup + thead,
> thead:first-child {
> tr:first-child {
> th,
> td {
border-top: 0;
}
}
}
> tbody + tbody {
.lib-css(border-top, @_table_border-width @_table_border-style @_table_border-color);
}
}
.lib-table-bordered(
@_table_type: normal,
@_table_border-width: @table__border-width,
@_table_border-style: @table__border-style,
@_table_border-color: @table__border-color
) when (@_table_type = horizontal_body){
> tbody {
> tr {
> th,
> td {
.lib-css(border-top, @_table_border-width @_table_border-style @_table_border-color);
}
}
}
> tbody + tbody {
.lib-css(border-top, @_table_border-width @_table_border-style @_table_border-color);
}
}
.lib-table-bordered(
@_table_type: normal,
@_table_border-width: @table__border-width,
@_table_border-style: @table__border-style,
@_table_border-color: @table__border-color
) when (@_table_type = vertical){
> thead,
> tbody,
> tfoot {
> tr {
> th,
> td {
.lib-css(border-left, @_table_border-width @_table_border-style @_table_border-color);
&:first-child {
border-left: none;
}
}
}
}
}
.lib-table-bordered(
@_table_type: normal,
@_table_border-width: @table__border-width,
@_table_border-style: @table__border-style,
@_table_border-color: @table__border-color
) when (@_table_type = light){
border: none;
> thead,
> tbody,
> tfoot {
> tr {
> th,
> td {
border: none;
}
}
}
> thead {
> tr {
> th,
> td {
.lib-css(border-bottom, @_table_border-width @_table_border-style @_table_border-color);
}
}
}
}
.lib-table-bordered(
@_table_type: normal,
@_table_border-width: @table__border-width,
@_table_border-style: @table__border-style,
@_table_border-color: @table__border-color
) when (@_table_type = clear){
border: none;
> thead,
> tbody,
> tfoot {
> tr {
> th,
> td {
border: none;
}
}
}
}
.lib-table-striped(
@_stripped-background-color: @table-cell-stripped__background-color,
@_stripped-color: @table-cell-stripped__color,
@_stripped-direction: horizontal,
@_stripped-highlight: odd
) when (@_stripped-highlight = odd) and (@_stripped-direction = horizontal){
> tbody > tr:nth-child(odd) {
> td,
> th {
.lib-css(background, @_stripped-background-color);
.lib-css(color, @_stripped-color);
}
}
}
.lib-table-striped(
@_stripped-background-color: @table-cell-stripped__background-color,
@_stripped-color: @table-cell-stripped__color,
@_stripped-direction: horizontal,
@_stripped-highlight: odd
) when (@_stripped-highlight = even) and (@_stripped-direction = horizontal) {
> tbody > tr:nth-child(even) {
> td,
> th {
.lib-css(background, @_stripped-background-color);
.lib-css(color, @_stripped-color);
}
}
}
.lib-table-striped(
@_stripped-background-color: @table-cell-stripped__background-color,
@_stripped-color: @table-cell-stripped__color,
@_stripped-direction: horizontal,
@_stripped-highlight: odd
) when (@_stripped-highlight = odd) and (@_stripped-direction = vertical) {
> thead,
> tbody,
> tfoot {
> tr {
> th:nth-child(odd),
> td:nth-child(odd) {
.lib-css(background, @_stripped-background-color);
.lib-css(color, @_stripped-color);
}
}
}
}
.lib-table-striped(
@_stripped-background-color: @table-cell-stripped__background-color,
@_stripped-color: @table-cell-stripped__color,
@_stripped-direction: horizontal,
@_stripped-highlight: odd
) when (@_stripped-highlight = even) and (@_stripped-direction = vertical) {
> thead,
> tbody,
> tfoot {
> tr {
> th:nth-child(even),
> td:nth-child(even) {
.lib-css(background, @_stripped-background-color);
.lib-css(color, @_stripped-color);
}
}
}
}
.lib-table-hover(
@_table_cell-background-color-hover: @table-cell__hover__background-color,
@_table_cell-odd-background-color-hover: @_table_cell-background-color-hover
) {
> tbody > tr:nth-child(even):hover {
> td,
> th {
.lib-css(background, @_table_cell-background-color-hover);
}
}
> tbody > tr:nth-child(odd):hover {
> td,
> th {
.lib-css(background, @_table_cell-odd-background-color-hover);
}
}
}
.lib-table-overflow() {
.lib-css(margin-bottom, @table__margin-bottom);
overflow-x: auto;
overflow-y: hidden;
width: 100%;
-ms-overflow-style: -ms-autohiding-scrollbar;
-webkit-overflow-scrolling: touch;
}
.lib-table-responsive(
@_table-background-color-responsive: @table-responsive__background-color,
@_table-th-background-color-responsive: @table-responsive-th__background-color,
@_reset-table-striped: false,
@_reset-table-hover: false,
@_table-responsive-cell-padding: @table-responsive-cell__padding
) when (@_reset-table-striped = false) and (@_reset-table-hover = false){
._lib-responsive-table(
@_table-background-color-responsive: @_table-background-color-responsive,
@_table-responsive-cell-padding: @_table-responsive-cell-padding
);
> tbody > tr > th {
.lib-css(background-color, @_table-th-background-color-responsive);
}
}
.lib-table-responsive(
@_table-background-color-responsive: @table-responsive__background-color,
@_table-th-background-color-responsive: @table-responsive-th__background-color,
@_reset-table-striped: false,
@_reset-table-hover: false,
@_table-responsive-cell-padding: @table-responsive-cell__padding
) when (@_reset-table-striped = true) and (@_reset-table-hover = true){
.lib-table-striped(@_stripped-background-color: @_table-background-color-responsive);
.lib-table-hover(
@_table_cell-background-color-hover: @_table-background-color-responsive,
@_table_cell-odd-background-color-hover: @_table-background-color-responsive
);
._lib-responsive-table(
@_table-background-color-responsive: @_table-background-color-responsive,
@_table-responsive-cell-padding: @_table-responsive-cell-padding
);
> tbody > tr > th {
.lib-css(background-color, @_table-th-background-color-responsive ~'!important');
}
}
.lib-table-responsive(
@_table-background-color-responsive: @table-responsive__background-color,
@_table-th-background-color-responsive: @table-responsive-th__background-color,
@_reset-table-striped: false,
@_reset-table-hover: false,
@_table-responsive-cell-padding: @table-responsive-cell__padding
) when (@_reset-table-striped = true) and (@_reset-table-hover = false){
.lib-table-striped(@_stripped-background-color: @_table-background-color-responsive);
._lib-responsive-table(
@_table-background-color-responsive: @_table-background-color-responsive,
@_table-responsive-cell-padding: @_table-responsive-cell-padding
);
.lib-css(background-color, @_table-th-background-color-responsive);
}
.lib-table-responsive(
@_table-background-color-responsive: @table-responsive__background-color,
@_table-th-background-color-responsive: @table-responsive-th__background-color,
@_reset-table-striped: false,
@_reset-table-hover: false,
@_table-responsive-cell-padding: @table-responsive-cell__padding
) when (@_reset-table-striped = false) and (@_reset-table-hover = true){
.lib-table-hover(
@_table_cell-background-color-hover: @_table-background-color-responsive,
@_table_cell-odd-background-color-hover: @_table-background-color-responsive
);
._lib-responsive-table(
@_table-background-color-responsive: @_table-background-color-responsive,
@_table-responsive-cell-padding: @_table-responsive-cell-padding
);
> tbody > tr > th {
.lib-css(background-color, @_table-th-background-color-responsive ~'!important');
}
}
.lib-table-caption(
@_table-caption-hide: @table-caption__hide,
@_table-caption-font-size: @table-caption__font-size,
@_table-caption-color: @table-caption__color,
@_table-caption-font-family: @table-caption__font-family,
@_table-caption-font-weight: @table-caption__font-weight,
@_table-caption-font-style: @table-caption__font-style,
@_table-caption-line-height: @table-caption__line-height,
@_table-caption-alignment: @table-caption__alignment,
@_table-caption-margin-top: @table-caption__margin-top,
@_table-caption-margin-bottom: @table-caption__margin-bottom
) when (@_table-caption-hide = false){
> caption {
.lib-typography(
@_table-caption-font-size,
@_table-caption-color,
@_table-caption-font-family,
@_table-caption-font-weight,
@_table-caption-line-height,
@_table-caption-font-style
);
.lib-css(margin-bottom, @_table-caption-margin-bottom);
.lib-css(margin-top, @_table-caption-margin-top);
.lib-css(text-align, @_table-caption-alignment);
}
}
.lib-table-caption(
@_table-caption-hide: @table-caption__hide,
@_table-caption-font-size: @table-caption__font-size,
@_table-caption-color: @table-caption__color,
@_table-caption-font-family: @table-caption__font-family,
@_table-caption-font-weight: @table-caption__font-weight,
@_table-caption-line-height: @table-caption__line-height,
@_table-caption-font-style: @table-caption__font-style,
@_table-caption-alignment: @table-caption__alignment,
@_table-caption-margin-top: @table-caption__margin-top,
@_table-caption-margin-bottom: @table-caption__margin-bottom
) when (@_table-caption-hide = true) {
> caption {
.lib-visually-hidden();
}
}
._lib-responsive-table(
@_table-background-color-responsive: @_table-background-color-responsive,
@_table-responsive-cell-padding: @_table-responsive-cell-padding
) {
.lib-css(background, @_table-background-color-responsive);
border: none;
display: block;
> thead > tr > th {
display: none;
}
> tbody {
display: block;
> tr {
display: block;
td,
th {
border-bottom: none;
display: block;
.lib-css(padding, @_table-responsive-cell-padding);
&[data-th]:before {
.lib-css(padding-right, @table-cell__padding-horizontal);
content: attr(data-th)': ';
display: inline-block;
.lib-typography(
@_font-size: @table-th__font-size,
@_color: @table-th__color,
@_font-family: @table-th__font-family,
@_font-weight: @table-th__font-weight,
@_line-height: @table-th__line-height,
@_font-style: @table-th__font-style
);
}
}
td {
.lib-css(background, @_table-background-color-responsive);
}
}
}
}