You are here

Home » API reference » Drupal 10

tables.css in Drupal 10

Same filename in this branch
  1. 10 core/themes/claro/css/components/tables.css
  2. 10 core/themes/seven/css/components/tables.css
Same filename and directory in other branches
  1. 8 core/themes/claro/css/components/tables.css
  2. 9 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: var(--space-l);

  16.   margin-bottom: var(--space-l);

  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: var(--space-xl);

  36.   padding: var(--space-xs) var(--space-m);

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

  38.   color: var(--color-text);

  39.   background: var(--color-gray-050);

  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 var(--space-m);

  55. }

  56. 

  57. /* The actual sort link. */

  58. 

  59. .sortable-heading > a {

  60.   display: block;

  61.   padding: var(--space-xs) 1.5rem var(--space-xs) 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: var(--color-absolutezero);

  169. }

  170. 

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

  172.   border-bottom: 0.1875rem solid var(--color-absolutezero);

  173. }

  174. 

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

  176.   content: none;

  177. }

  178. 

  179. tr {

  180.   border-bottom: 0.0625rem solid var(--color-gray-200);

  181. }

  182. 

  183. tr,

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

  185.   color: var(--color-text);

  186.   background: var(--color-white);

  187. }

  188. 

  189. thead tr {

  190.   border: 0;

  191. }

  192. 

  193. tr:hover,

  194. tr:focus {

  195.   color: var(--color-text);

  196.   background: var(--color-bgblue-hover);

  197. }

  198. 

  199. tr.color-warning:hover,

  200. tr.color-warning:focus {

  201.   color: var(--color-text);

  202.   background: #fdf8ed;

  203. }

  204. 

  205. tr.color-error:hover,

  206. tr.color-error:focus {

  207.   color: var(--color-text);

  208.   background: #fcf4f2;

  209. }

  210. 

  211. td {

  212.   box-sizing: border-box;

  213.   height: 4rem;

  214.   padding: var(--space-xs) var(--space-m);

  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. /* Win over table-file-multiple-widget. */

  247. 

  248. th.is-disabled.is-disabled {

  249.   color: var(--input--disabled-fg-color);

  250. }

  251. 

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

  253. 

  254. th.select-all {

  255.   width: 1px;

  256. }

  257. 

  258. /**

  259.  * Captions.

  260.  */

  261. 

  262. .caption {

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

  264. }

  265. 

  266. tfoot {

  267.   font-weight: bold;

  268. }

  269. 

  270. tfoot tr:last-child {

  271.   border-bottom: 0;

  272. }

  273. 

  274. tfoot tr:first-child td {

  275.   border-top: 0.0625rem solid var(--color-gray-500);

  276. }

  277. 

  278. /**

  279.  * Responsive table cells.

  280.  */

  281. 

  282. th.priority-low,

  283. th.priority-medium,

  284. td.priority-low,

  285. td.priority-medium {

  286.   display: none;

  287. }

  288. 

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

  290.   th.priority-medium,

  291.   td.priority-medium {

  292.     display: table-cell;

  293.   }

  294. }

  295. 

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

  297.   th.priority-low,

  298.   td.priority-low {

  299.     display: table-cell;

  300.   }

  301. }

  302. 

  303. .tabledrag-toggle-weight-wrapper {

  304.   margin-top: var(--space-l);

  305.   line-height: calc(28rem / 16);

  306. }

  307. 

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

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

  310.   margin-top: 0;

  311. }