tables.css 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229
  1. /**
  2. * @file
  3. * Mediteran styles for Tables.
  4. */
  5. table {
  6. width: 100%;
  7. margin: 20px 0;
  8. }
  9. .responsive-enabled,
  10. .preview-section table,
  11. .views-table {
  12. display: flow-root;
  13. overflow-x: scroll;
  14. }
  15. @media screen and (min-width: 1025px) {
  16. form table,
  17. .responsive-enabled,
  18. .preview-section table,
  19. .views-table {
  20. display: table;
  21. overflow-x: auto;
  22. }
  23. }
  24. caption {
  25. text-align: left;
  26. /* LTR */
  27. }
  28. [dir="rtl"] caption {
  29. text-align: right;
  30. }
  31. th {
  32. text-align: left;
  33. /* LTR */
  34. padding: 10px 15px;
  35. }
  36. [dir="rtl"] th {
  37. text-align: right;
  38. }
  39. thead th {
  40. background: #f5f5f5;
  41. border: none;
  42. color: #909090;
  43. font-weight: 400;
  44. }
  45. thead th a {
  46. font-weight: 400;
  47. color: #0678be;
  48. }
  49. thead th a:hover {
  50. text-decoration: underline;
  51. }
  52. thead tr {
  53. border: none;
  54. }
  55. tr {
  56. border-bottom: 1px solid #e6e4df;
  57. }
  58. tbody tr:first-child {
  59. border-top: 1px solid #e6e4df;
  60. }
  61. tbody tr:hover,
  62. tbody tr:focus {
  63. background: #f7fcff;
  64. }
  65. tbody tr.color-warning:hover,
  66. tbody tr.color-warning:focus,
  67. .drag tbody tr:hover,
  68. .drag tbody tr:focus {
  69. background: #fdf8ed;
  70. }
  71. tbody tr.color-error:hover,
  72. tbody tr.color-error:focus {
  73. background: #fcf4f2;
  74. }
  75. table.no-highlight tr.selected td {
  76. background: transparent;
  77. }
  78. td,
  79. th {
  80. vertical-align: middle;
  81. }
  82. td {
  83. padding: 20px 15px;
  84. line-height: 1.6;
  85. text-align: left;
  86. /* LTR */
  87. }
  88. [dir="rtl"] td {
  89. text-align: right;
  90. }
  91. th>a {
  92. position: relative;
  93. display: block;
  94. }
  95. th.is-active>a {
  96. color: #004875;
  97. }
  98. thead th.is-active {
  99. background: #fff;
  100. border-bottom: 1px solid white;
  101. border-top: 1px solid #e6e4df;
  102. border-left: 1px solid #e6e4df;
  103. border-right: 1px solid #e6e4df;
  104. }
  105. th.is-active>a {
  106. color: #333;
  107. }
  108. th>a:hover,
  109. th>a:focus,
  110. th.is-active>a:hover,
  111. th.is-active>a:focus {
  112. color: #0678be;
  113. text-decoration: none;
  114. }
  115. td .item-list ul {
  116. margin: 0;
  117. }
  118. /* This is required to win over specificity of [dir="rtl"] .item-list ul */
  119. [dir="rtl"] td .item-list ul {
  120. margin: 0;
  121. }
  122. td.is-active {
  123. background: none;
  124. }
  125. td.views-field-node-bulk-form {
  126. width: 1px;
  127. min-width: 1px;
  128. }
  129. /* Force browsers to calculate the width of a 'select all' <th> element. */
  130. th.select-all {
  131. width: 1px;
  132. min-width: 1px;
  133. }
  134. @media screen and (min-width: 1024px) {
  135. th,
  136. td {
  137. width: auto;
  138. }
  139. table {
  140. display: table;
  141. overflow-x: auto;
  142. }
  143. }
  144. @media screen and (max-width: 768px) {
  145. th,
  146. td {
  147. min-width: 150px;
  148. }
  149. }
  150. /**
  151. * Captions.
  152. */
  153. .caption {
  154. margin-bottom: 1.2em;
  155. }
  156. /**
  157. * Responsive tables.
  158. */
  159. @media screen and (max-width: 640px) {
  160. th.priority-low,
  161. td.priority-low,
  162. th.priority-medium,
  163. td.priority-medium {
  164. display: none;
  165. }
  166. }
  167. @media screen and (max-width: 920px) {
  168. th.priority-low,
  169. td.priority-low {
  170. display: none;
  171. }
  172. }
  173. td.menu-label {
  174. font-weight: 700;
  175. }
  176. .tableresponsive-toggle {
  177. margin: 20px 0;
  178. font-size: 12px;
  179. }
  180. /* webform element plugin */
  181. .webform-element-plugin th,
  182. .webform-element-plugin td {
  183. min-width: 150px;
  184. vertical-align: top;
  185. }