tables.pcss.css

Same filename in other branches
  1. 9 core/themes/claro/css/components/tables.pcss.css
  2. 10 core/themes/claro/css/components/tables.pcss.css
  3. 11.x core/themes/claro/css/components/tables.pcss.css

Claro styles for Tables.

File

core/themes/claro/css/components/tables.pcss.css

View source
  1. /**
  2. * @file
  3. * Claro styles for Tables.
  4. */
  5. @import "../base/variables.pcss.css";
  6. table {
  7. width: 100%;
  8. margin-top: var(--space-l);
  9. margin-bottom: var(--space-l);
  10. }
  11. .sticky-header {
  12. min-width: 0;
  13. }
  14. caption {
  15. text-align: left; /* LTR */
  16. }
  17. [dir="rtl"] caption {
  18. text-align: right;
  19. }
  20. th {
  21. position: relative;
  22. box-sizing: border-box;
  23. height: var(--space-xl);
  24. padding: var(--space-xs) var(--space-m);
  25. text-align: left; /* LTR */
  26. color: var(--color-text);
  27. background: var(--color-whitesmoke);
  28. line-height: 1.25rem; /* 20px */
  29. }
  30. [dir="rtl"] th {
  31. text-align: right;
  32. }
  33. /**
  34. * Table sort.
  35. */
  36. /* Table head cell containing sort link. */
  37. .sortable-heading {
  38. padding: 0 var(--space-m);
  39. }
  40. /* The actual sort link. */
  41. .sortable-heading > a {
  42. display: block;
  43. padding: var(--space-xs) 1.5rem var(--space-xs) 0; /* LTR */
  44. text-decoration: none;
  45. color: inherit;
  46. }
  47. [dir="rtl"] .sortable-heading > a {
  48. padding-right: 0;
  49. padding-left: 1.5rem;
  50. }
  51. .sortable-heading > a::before {
  52. position: absolute;
  53. z-index: 0;
  54. top: 0;
  55. right: 1rem;
  56. bottom: 0;
  57. left: 1rem;
  58. display: block;
  59. content: "";
  60. border-bottom: 0.125rem solid transparent;
  61. }
  62. /* stylelint-disable-next-line selector-type-no-unknown */
  63. _:-ms-fullscreen, /* Only IE 11 */
  64. .sortable-heading > a::before {
  65. top: auto;
  66. height: 100%;
  67. }
  68. .sortable-heading > a::after {
  69. position: absolute;
  70. top: 50%;
  71. right: 1rem;
  72. width: 0.875rem;
  73. height: 1rem;
  74. margin-top: -0.5rem;
  75. content: "";
  76. opacity: 0.5;
  77. background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8'%3E%3Cpath d='m1.75,0.25v1.5h10.5v-1.5z m0,3v1.5h7.5v-1.5z m0,3v1.5h4.5v-1.5z' fill='%23222330'/%3E%3C/svg%3E") no-repeat 50% 50%;
  78. background-size: contain;
  79. }
  80. /* stylelint-disable-next-line selector-type-no-unknown */
  81. _:-ms-fullscreen, /* Only IE 11 */
  82. .sortable-heading > a::after {
  83. position: static;
  84. float: right;
  85. margin-top: 0.125rem; /* 2px */
  86. margin-right: -1.5rem; /* -24px */
  87. }
  88. [dir="rtl"] .sortable-heading > a::after {
  89. right: auto;
  90. left: 1rem;
  91. background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8'%3E%3Cpath d='m12.25,0.25v1.5H1.75v-1.5z m0,3v1.5h-7.5v-1.5z m0,3v1.5h-4.5v-1.5z' fill='%23222330'/%3E%3C/svg%3E");
  92. }
  93. /* stylelint-disable-next-line selector-type-no-unknown */
  94. _:-ms-fullscreen, /* Only IE 11 */
  95. [dir="rtl"] .sortable-heading > a::after {
  96. float: left;
  97. margin-right: 0;
  98. margin-left: -1.5rem; /* -24px */
  99. }
  100. /* Sortable cell's link focus/hover state. */
  101. .sortable-heading > a:focus,
  102. .sortable-heading > a:hover {
  103. text-decoration: none;
  104. }
  105. .sortable-heading > a:focus::before,
  106. .sortable-heading > a:hover::before {
  107. border-color: inherit;
  108. }
  109. .sortable-heading > a:focus::after,
  110. .sortable-heading > a:hover::after {
  111. opacity: 1;
  112. }
  113. /* Sortable cell's active state. */
  114. .sortable-heading.is-active > a {
  115. color: var(--color-absolutezero);
  116. }
  117. .sortable-heading.is-active > a::before {
  118. border-bottom: 0.1875rem solid var(--color-absolutezero);
  119. }
  120. .sortable-heading.is-active > a::after {
  121. content: none;
  122. }
  123. tr {
  124. border-bottom: 0.0625rem solid var(--color-lightgray);
  125. }
  126. tr,
  127. .draggable-table.tabledrag-disabled tr {
  128. color: var(--color-text);
  129. background: var(--color-white);
  130. }
  131. thead tr {
  132. border: 0;
  133. }
  134. tr:hover,
  135. tr:focus {
  136. color: var(--color-text);
  137. background: var(--color-bgblue-hover);
  138. }
  139. tr.color-warning:hover,
  140. tr.color-warning:focus {
  141. color: var(--color-text);
  142. background: #fdf8ed;
  143. }
  144. tr.color-error:hover,
  145. tr.color-error:focus {
  146. color: var(--color-text);
  147. background: #fcf4f2;
  148. }
  149. td {
  150. box-sizing: border-box;
  151. height: 4rem;
  152. padding: var(--space-xs) var(--space-m);
  153. text-align: left; /* LTR */
  154. }
  155. [dir="rtl"] td {
  156. text-align: right;
  157. }
  158. td .item-list ul {
  159. margin: 0;
  160. }
  161. /* This is required to win over specificity of [dir="rtl"] .item-list ul */
  162. [dir="rtl"] td .item-list ul {
  163. margin: 0;
  164. }
  165. td.is-active {
  166. background: none;
  167. }
  168. /**
  169. * Target every .form-element input that parent is a form-item of a table cell.
  170. * This ignores the filter format select of the textarea editor.
  171. */
  172. td > .form-item > .form-element,
  173. td > .ajax-new-content > .form-item > .form-element {
  174. width: 100%;
  175. }
  176. /* Win over table-file-multiple-widget. */
  177. th.is-disabled.is-disabled {
  178. color: var(--input--disabled-fg-color);
  179. }
  180. /* Force browsers to calculate the width of a 'select all' element. */
  181. th.select-all {
  182. width: 1px;
  183. }
  184. /**
  185. * Captions.
  186. */
  187. .caption {
  188. margin-bottom: 1.25rem; /* 20px */
  189. }
  190. tfoot {
  191. font-weight: bold;
  192. }
  193. tfoot tr:last-child {
  194. border-bottom: 0;
  195. }
  196. tfoot tr:first-child td {
  197. border-top: 0.0625rem solid var(--color-grayblue);
  198. }
  199. /**
  200. * Responsive table cells.
  201. */
  202. th.priority-low,
  203. th.priority-medium,
  204. td.priority-low,
  205. td.priority-medium {
  206. display: none;
  207. }
  208. @media screen and (min-width: 38em) {
  209. th.priority-medium,
  210. td.priority-medium {
  211. display: table-cell;
  212. }
  213. }
  214. @media screen and (min-width: 60em) {
  215. th.priority-low,
  216. td.priority-low {
  217. display: table-cell;
  218. }
  219. }
  220. .tabledrag-toggle-weight-wrapper {
  221. margin-top: var(--space-l);
  222. line-height: calc(28rem / 16);
  223. }
  224. .tabledrag-toggle-weight-wrapper + table,
  225. .tabledrag-toggle-weight-wrapper + .tableresponsive-toggle-columns + table {
  226. margin-top: 0;
  227. }

Buggy or inaccurate documentation? Please file an issue. Need support? Need help programming? Connect with the Drupal community.