_tables.less 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154
  1. // /**
  2. // * Copyright © Magento, Inc. All rights reserved.
  3. // * See COPYING.txt for license details.
  4. // */
  5. //
  6. // Variables
  7. // _____________________________________________
  8. @table__color: @color-very-dark-gray-black;
  9. @table__border-color: @color-gray89;
  10. @table-th__border-color: @table__border-color;
  11. @table-td__border-color: @table__border-color;
  12. @table-tfoot__background-color: @color-white-fog;
  13. @admin__table-primary__font-size: 1.3rem;
  14. @admin__table-primary__padding-vertical: 1rem;
  15. @admin__table-primary__padding-horizontal: 1.5rem;
  16. @admin__table-secondary__padding-vertical: @admin__table-primary__padding-vertical;
  17. @admin__table-secondary__padding-horizontal: 1rem;
  18. @admin__table-secondary-caption__font-size: 1.8rem;
  19. @admin__table-secondary-cell__odd__color: @color-white-fog2;
  20. @admin__table-secondary-th__color: @color-brownie-light;
  21. //
  22. // Tables
  23. // _____________________________________________
  24. table {
  25. background-color: transparent;
  26. color: @table__color;
  27. > caption {
  28. margin-bottom: .5em;
  29. }
  30. }
  31. .admin__table-wrapper {
  32. .lib-table-overflow();
  33. }
  34. .admin__table-primary,
  35. .admin__table-secondary {
  36. width: 100%;
  37. }
  38. .admin__table-primary {
  39. font-size: @admin__table-primary__font-size;
  40. th,
  41. td {
  42. padding: @admin__table-primary__padding-vertical @admin__table-primary__padding-horizontal;
  43. text-align: left;
  44. &:first-child {
  45. padding-left: 0;
  46. }
  47. }
  48. th {
  49. border-bottom: 1px solid @table-th__border-color;
  50. border-top: 1px solid @table-th__border-color;
  51. font-weight: @font-weight__bold;
  52. vertical-align: bottom;
  53. }
  54. td {
  55. border-bottom: 1px solid @table-td__border-color;
  56. vertical-align: top;
  57. }
  58. tbody {
  59. tr {
  60. &:last-child {
  61. td {
  62. border-bottom-color: transparent;
  63. }
  64. }
  65. }
  66. }
  67. tfoot {
  68. background: @table-tfoot__background-color;
  69. font-weight: @font-weight__semibold;
  70. th,
  71. td {
  72. &:first-child {
  73. padding-left: @admin__table-primary__padding-horizontal;
  74. }
  75. }
  76. }
  77. }
  78. .admin__table-secondary {
  79. caption {
  80. font-size: @admin__table-secondary-caption__font-size;
  81. font-weight: @font-weight__bold;
  82. margin-bottom: .75em;
  83. text-align: left;
  84. }
  85. thead {
  86. th {
  87. background-color: transparent;
  88. font-weight: @font-weight__semibold;
  89. }
  90. }
  91. tbody {
  92. th {
  93. vertical-align: top;
  94. }
  95. tr {
  96. &:nth-child(odd) {
  97. th,
  98. td {
  99. background-color: @admin__table-secondary-cell__odd__color;
  100. }
  101. }
  102. }
  103. }
  104. tfoot {
  105. tr {
  106. &:nth-child(odd) {
  107. th,
  108. td {
  109. background-color: @color-white;
  110. }
  111. }
  112. &:first-child {
  113. border-top: 1px solid @table-td__border-color;
  114. }
  115. }
  116. }
  117. th,
  118. td {
  119. padding: @admin__table-secondary__padding-horizontal @admin__table-secondary__padding-vertical;
  120. text-align: left;
  121. }
  122. th {
  123. color: @admin__table-secondary-th__color;
  124. font-weight: @font-weight__regular;
  125. }
  126. }