tables.css

Same filename in this branch
  1. 9 core/themes/seven/css/components/tables.css
Same filename in other branches
  1. 8.9.x core/themes/seven/css/components/tables.css
  2. 8.9.x core/themes/claro/css/components/tables.css
  3. 10 core/themes/claro/css/components/tables.css
  4. 11.x core/themes/claro/css/components/tables.css

Claro styles for Tables.

File

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

View source 
  1. /*

  2.  * DO NOT EDIT THIS FILE.

  3.  * See the following change record for more information,

  4.  * https://www.drupal.org/node/3084859

  5.  * @preserve

  6.  */

  7. 

  8. /**

  9.  * @file

  10.  * Claro styles for Tables.

  11.  */

  12. 

  13. table {

  14.   width: 100%;

  15.   margin-top: 1.5rem;

  16.   margin-bottom: 1.5rem;

  17.   border-collapse: collapse;

  18. }

  19. 

  20. .sticky-header {

  21.   min-width: 0;

  22. }

  23. 

  24. caption {

  25.   text-align: left; /* LTR */

  26. }

  27. 

  28. [dir="rtl"] caption {

  29.   text-align: right;

  30. }

  31. 

  32. th {

  33.   position: relative;

  34.   box-sizing: border-box;

  35.   height: 3rem;

  36.   padding: 0.5rem 1rem;

  37.   text-align: left; /* LTR */

  38.   color: #232429;

  39.   background: #f3f4f9;

  40.   line-height: 1.25rem; /* 20px */

  41. }

  42. 

  43. [dir="rtl"] th {

  44.   text-align: right;

  45. }

  46. 

  47. /**

  48.  * Table sort.

  49.  */

  50. 

  51. /* Table head cell containing sort link. */

  52. 

  53. .sortable-heading {

  54.   padding: 0 1rem;

  55. }

  56. 

  57. /* The actual sort link. */

  58. 

  59. .sortable-heading > a {

  60.   display: block;

  61.   padding: 0.5rem 1.5rem 0.5rem 0; /* LTR */

  62.   text-decoration: none;

  63.   color: inherit;

  64. }

  65. 

  66. [dir="rtl"] .sortable-heading > a {

  67.   padding-right: 0;

  68.   padding-left: 1.5rem;

  69. }

  70. 

  71. .sortable-heading > a::before {

  72.   position: absolute;

  73.   z-index: 0;

  74.   top: 0;

  75.   right: 1rem;

  76.   bottom: 0;

  77.   left: 1rem;

  78.   display: block;

  79.   content: "";

  80.   border-bottom: 0.125rem solid transparent;

  81. }

  82. 

  83. /* stylelint-disable-next-line selector-type-no-unknown */

  84. 

  85. _:-ms-fullscreen, /* Only IE 11 */

  86. .sortable-heading > a::before {

  87.   top: auto;

  88.   height: 100%;

  89. }

  90. 

  91. .sortable-heading > a::after {

  92.   position: absolute;

  93.   top: 50%;

  94.   right: 1rem;

  95.   width: 0.875rem;

  96.   height: 1rem;

  97.   margin-top: -0.5rem;

  98.   content: "";

  99.   opacity: 0.5;

  100.   background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8'%3e%3cpath d='M1.75.25v1.5h10.5V.25zm0 3v1.5h7.5v-1.5zm0 3v1.5h4.5v-1.5z' fill='%23000f33'/%3e%3c/svg%3e") no-repeat 50% 50%;

  101.   background-size: contain;

  102. }

  103. 

  104. @media (forced-colors: active) {

  105. 

  106.   .sortable-heading > a::after {

  107.     opacity: 1;

  108.     background: linktext;

  109.     -webkit-mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8'%3e%3cpath d='M1.75.25v1.5h10.5V.25zm0 3v1.5h7.5v-1.5zm0 3v1.5h4.5v-1.5z' fill='%23000f33'/%3e%3c/svg%3e") no-repeat 50% 50%;

  110.     mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8'%3e%3cpath d='M1.75.25v1.5h10.5V.25zm0 3v1.5h7.5v-1.5zm0 3v1.5h4.5v-1.5z' fill='%23000f33'/%3e%3c/svg%3e") no-repeat 50% 50%;

  111.   }

  112. }

  113. 

  114. /* stylelint-disable-next-line selector-type-no-unknown */

  115. 

  116. _:-ms-fullscreen, /* Only IE 11 */

  117. .sortable-heading > a::after {

  118.   position: static;

  119.   float: right;

  120.   margin-top: 0.125rem; /* 2px */

  121.   margin-right: -1.5rem; /* -24px */

  122. }

  123. 

  124. [dir="rtl"] .sortable-heading > a::after {

  125.   right: auto;

  126.   left: 1rem;

  127.   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8'%3e%3cpath d='M12.25.25v1.5H1.75V.25zm0 3v1.5h-7.5v-1.5zm0 3v1.5h-4.5v-1.5z' fill='%23000f33'/%3e%3c/svg%3e");

  128. }

  129. 

  130. @media (forced-colors: active) {

  131. 

  132.   [dir="rtl"] .sortable-heading > a::after {

  133.     background: linktext;

  134.     -webkit-mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8'%3e%3cpath d='M12.25.25v1.5H1.75V.25zm0 3v1.5h-7.5v-1.5zm0 3v1.5h-4.5v-1.5z' fill='%23000f33'/%3e%3c/svg%3e") no-repeat 50% 50%;

  135.     mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8'%3e%3cpath d='M12.25.25v1.5H1.75V.25zm0 3v1.5h-7.5v-1.5zm0 3v1.5h-4.5v-1.5z' fill='%23000f33'/%3e%3c/svg%3e") no-repeat 50% 50%;

  136.   }

  137. }

  138. 

  139. /* stylelint-disable-next-line selector-type-no-unknown */

  140. 

  141. _:-ms-fullscreen, /* Only IE 11 */

  142. [dir="rtl"] .sortable-heading > a::after {

  143.   float: left;

  144.   margin-right: 0;

  145.   margin-left: -1.5rem; /* -24px */

  146. }

  147. 

  148. /* Sortable cell's link focus/hover state. */

  149. 

  150. .sortable-heading > a:focus,

  151. .sortable-heading > a:hover {

  152.   text-decoration: none;

  153. }

  154. 

  155. .sortable-heading > a:focus::before,

  156. .sortable-heading > a:hover::before {

  157.   border-color: inherit;

  158. }

  159. 

  160. .sortable-heading > a:focus::after,

  161. .sortable-heading > a:hover::after {

  162.   opacity: 1;

  163. }

  164. 

  165. /* Sortable cell's active state. */

  166. 

  167. .sortable-heading.is-active > a {

  168.   color: #003ecc;

  169. }

  170. 

  171. .sortable-heading.is-active > a::before {

  172.   border-bottom: 0.1875rem solid #003ecc;

  173. }

  174. 

  175. .sortable-heading.is-active > a::after {

  176.   content: none;

  177. }

  178. 

  179. tr {

  180.   border-bottom: 0.0625rem solid #d3d4d9;

  181. }

  182. 

  183. tr,

  184. .draggable-table.tabledrag-disabled tr {

  185.   color: #232429;

  186.   background: #fff;

  187. }

  188. 

  189. thead tr {

  190.   border: 0;

  191. }

  192. 

  193. tr:hover,

  194. tr:focus {

  195.   color: #232429;

  196.   background: #f5f8ff;

  197. }

  198. 

  199. tr.color-warning:hover,

  200. tr.color-warning:focus {

  201.   color: #232429;

  202.   background: #fdf8ed;

  203. }

  204. 

  205. tr.color-error:hover,

  206. tr.color-error:focus {

  207.   color: #232429;

  208.   background: #fcf4f2;

  209. }

  210. 

  211. td {

  212.   box-sizing: border-box;

  213.   height: 4rem;

  214.   padding: 0.5rem 1rem;

  215.   text-align: left; /* LTR */

  216. }

  217. 

  218. [dir="rtl"] td {

  219.   text-align: right;

  220. }

  221. 

  222. td .item-list ul {

  223.   margin: 0;

  224. }

  225. 

  226. /* This is required to win over specificity of [dir="rtl"] .item-list ul */

  227. 

  228. [dir="rtl"] td .item-list ul {

  229.   margin: 0;

  230. }

  231. 

  232. td.is-active {

  233.   background: none;

  234. }

  235. 

  236. /**

  237.  * Target every .form-element input that parent is a form-item of a table cell.

  238.  * This ignores the filter format select of the textarea editor.

  239.  */

  240. 

  241. td > .form-item > .form-element,

  242. td > .ajax-new-content > .form-item > .form-element {

  243.   width: 100%;

  244. }

  245. 

  246. td > .form-item > .form-element--type-select,

  247. td > .ajax-new-content > .form-item > .form-element--type-select {

  248.   width: auto;

  249. }

  250. 

  251. @supports (min-width: max-content) {

  252.   td > .form-item > .form-element--type-select,

  253.   td > .ajax-new-content > .form-item > .form-element--type-select {

  254.     width: max-content;

  255.     min-width: 100%;

  256.   }

  257. }

  258. 

  259. /* Win over table-file-multiple-widget. */

  260. 

  261. th.is-disabled.is-disabled {

  262.   color: #828388;

  263. }

  264. 

  265. /* Force browsers to calculate the width of a 'select all'  element. */

  266. 

  267. th.select-all {

  268.   width: 1px;

  269. }

  270. 

  271. /**

  272.  * Captions.

  273.  */

  274. 

  275. .caption {

  276.   margin-bottom: 1.25rem; /* 20px */

  277. }

  278. 

  279. tfoot {

  280.   font-weight: bold;

  281. }

  282. 

  283. tfoot tr:last-child {

  284.   border-bottom: 0;

  285. }

  286. 

  287. tfoot tr:first-child td {

  288.   border-top: 0.0625rem solid #919297;

  289. }

  290. 

  291. /**

  292.  * Responsive table cells.

  293.  */

  294. 

  295. th.priority-low,

  296. th.priority-medium,

  297. td.priority-low,

  298. td.priority-medium {

  299.   display: none;

  300. }

  301. 

  302. @media screen and (min-width: 38em) {

  303.   th.priority-medium,

  304.   td.priority-medium {

  305.     display: table-cell;

  306.   }

  307. }

  308. 

  309. @media screen and (min-width: 60em) {

  310.   th.priority-low,

  311.   td.priority-low {

  312.     display: table-cell;

  313.   }

  314. }

  315. 

  316. .tabledrag-toggle-weight-wrapper {

  317.   margin-top: 1.5rem;

  318.   line-height: 1.75rem;

  319. }

  320. 

  321. .tabledrag-toggle-weight-wrapper + table,

  322. .tabledrag-toggle-weight-wrapper + .tableresponsive-toggle-columns + table {

  323.   margin-top: 0;

  324. }

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