_tables.less 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149
  1. // /**
  2. // * Copyright © Magento, Inc. All rights reserved.
  3. // * See COPYING.txt for license details.
  4. // */
  5. //
  6. // Common
  7. // _____________________________________________
  8. & when (@media-common = true) {
  9. .table-wrapper {
  10. margin-bottom: @indent__base;
  11. }
  12. table {
  13. .lib-table-caption();
  14. }
  15. .table {
  16. &:not(.cart) {
  17. &:not(.totals) {
  18. .lib-table-bordered(
  19. @_table_type: light,
  20. @_table_border-width: @table__border-width
  21. );
  22. tfoot {
  23. > tr {
  24. &:first-child {
  25. th,
  26. td {
  27. border-top: @table__border-width @table__border-style @table__border-color;
  28. padding-top: @indent__base;
  29. }
  30. }
  31. }
  32. .mark {
  33. font-weight: @font-weight__regular;
  34. text-align: right;
  35. }
  36. }
  37. }
  38. }
  39. }
  40. }
  41. //
  42. // Mobile
  43. // _____________________________________________
  44. .media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__s) {
  45. .table-wrapper {
  46. .lib-table-overflow();
  47. position: relative; // To hide unnecessary horizontal scrollbar in Safari
  48. .table {
  49. &:not(.cart) {
  50. &:not(.totals) {
  51. &:not(.table-comparison) {
  52. .lib-table-responsive();
  53. tbody > tr {
  54. > td:first-child {
  55. padding-top: @indent__base;
  56. }
  57. > td:last-child {
  58. padding-bottom: @indent__base;
  59. }
  60. }
  61. &.additional-attributes {
  62. tbody {
  63. th {
  64. &:extend(.abs-no-display-s all);
  65. }
  66. td {
  67. &:last-child {
  68. border: none;
  69. padding: 0 0 @indent__xs;
  70. }
  71. }
  72. }
  73. }
  74. }
  75. }
  76. }
  77. }
  78. .table {
  79. &:not(.totals) {
  80. &:not(.table-comparison) {
  81. tfoot {
  82. display: block;
  83. tr {
  84. display: block;
  85. &:extend(.abs-add-clearfix-mobile all);
  86. &:first-child {
  87. th,
  88. td {
  89. padding-top: @indent__base;
  90. }
  91. }
  92. }
  93. th {
  94. box-sizing: border-box;
  95. float: left;
  96. padding-left: 0;
  97. padding-right: 0;
  98. text-align: left;
  99. width: 70%;
  100. }
  101. td {
  102. box-sizing: border-box;
  103. float: left;
  104. padding-left: 0;
  105. padding-right: 0;
  106. text-align: right;
  107. width: 30%;
  108. }
  109. }
  110. }
  111. }
  112. }
  113. }
  114. .data-table-definition-list {
  115. thead {
  116. display: none;
  117. }
  118. tbody th {
  119. padding-bottom: 0;
  120. }
  121. tbody th,
  122. tbody td {
  123. display: block;
  124. padding-left: 0;
  125. padding-right: 0;
  126. }
  127. }
  128. }