// /** // * Copyright © 2016 Magento. All rights reserved. // * See COPYING.txt for license details. // */ // // Common // _____________________________________________ & when (@media-common = true) { .table-wrapper { margin-bottom: @indent__base; } table { .lib-table-caption(); } .table { tfoot { .lib-css(background, @sidebar__background-color); > tr { &:first-child { th, td { border-top: @table__border-width @table__border-style @table__border-color; padding-top: @indent__base; } } } th, td { border: 0; } .mark { font-weight: @font-weight__regular; text-align: right; } } } } // // Mobile // _____________________________________________ .media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__s) { .table-wrapper { border-top: @table__border-width @table__border-style @table__border-color; .lib-table-overflow(); position: relative; // To hide unnecessary horizontal scrollbar in Safari .table:not(.totals):not(.cart):not(.table-comparison) { .lib-table-responsive(); tbody { > tr { > td:first-child { padding-top: 15px; } > td:last-child { border-bottom: @table__border-width @table__border-style @table__border-color; padding-bottom: 15px; } > td.col.qty { text-align: left; } } } &.additional-attributes { tbody { th { &:extend(.abs-no-display-s all); } td { &:last-child { border: none; padding: 0 0 @indent__xs; } } } } } .table:not(.totals):not(.table-comparison) { tfoot { display: block; tr { display: block; &:extend(.abs-add-clearfix-mobile all); &:first-child { th, td { padding-top: @indent__base; } } } .mark { box-sizing: border-box; float: left; text-align: left; width: 70%; } .amount { box-sizing: border-box; float: left; text-align: right; width: 30%; } .grand.totals { .lib-font-size(16); .amount { padding-bottom: @indent__s; } } } } } .data-table-definition-list { thead { display: none; } tbody th { padding-bottom: 0; } tbody { th, td { display: block; padding-left: 0; padding-right: 0; } } } } // // Desktop // _____________________________________________ .media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__s) { .table { .lib-table-bordered( @_table_type: horizontal_body ); } }