tables.css

Same filename in this branch
  1. main core/themes/claro/css/components/tables.css
  2. main core/themes/admin/css/components/tables.css
Same filename and directory in other branches
  1. 10 core/themes/claro/css/components/tables.css
  2. 11.x core/themes/claro/css/components/tables.css
  3. 9 core/themes/seven/css/components/tables.css
  4. 9 core/themes/claro/css/components/tables.css
  5. 8.9.x core/themes/seven/css/components/tables.css
  6. 8.9.x core/themes/claro/css/components/tables.css
  7. 11.x core/themes/admin/css/components/tables.css
  8. 11.x core/themes/default_admin/css/components/tables.css

Claro styles for Tables.

File

View on git.drupalcode.org

core/themes/default_admin/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.   --cell-padding-y: var(--admin-space-density-m);

  15.   --cell-padding-x: var(--admin-space-m);

  16. 

  17.   width: 100%;

  18.   margin-block: var(--admin-space-l);

  19.   border-collapse: collapse;

  20. 

  21.   thead {

  22.     border-radius: var(--admin-radius-m);

  23.     background: transparent;

  24. 

  25.     tr {

  26.       border-block-end: 2px solid var(--admin-color-border-loud);

  27. 

  28.       &:hover {

  29.         background: transparent;

  30.       }

  31.     }

  32.   }

  33. 

  34.   th {

  35.     background: var(--admin-color-bg-surface);

  36.     font-size: var(--admin-font-size-s);

  37.     font-weight: var(--admin-font-weight-bold);

  38. 

  39.     &,

  40.     .form-item__label {

  41.       color: var(--admin-color-text-loud);

  42.     }

  43.   }

  44. 

  45.   tbody {

  46.     tr {

  47.       border-block-end: 1px solid var(--admin-color-border-table);

  48.     }

  49. 

  50.     td {

  51.       height: auto;

  52.       padding: var(--cell-padding-y) var(--cell-padding-x);

  53.     }

  54.   }

  55. 

  56.   tr,

  57.   tr:focus-within,

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

  59.     color: var(--admin-color-text);

  60.     background-color: transparent;

  61. 

  62.     &:hover {

  63.       color: var(--admin-color-text);

  64.       background: var(--admin-color-bg-item);

  65.     }

  66. 

  67.     &.selected:hover {

  68.       background: transparent;

  69.     }

  70.   }

  71. 

  72.   tr.selected {

  73.     .gin--dark-mode 
  74. 

  75.     td {

  76.       background-color: var(--admin-color-bg-item-hover);

  77.     }

  78.   }

  79. 

  80.   td {

  81.     a {

  82.       -webkit-text-decoration: none;

  83.       text-decoration: none;

  84. 

  85.       &:hover {

  86.         -webkit-text-decoration: underline;

  87.         text-decoration: underline;

  88.         text-decoration-style: var(--admin-link-decoration-style);

  89.       }

  90.     }

  91. 

  92.     .group-label {

  93.       color: var(--admin-color-text-loud);

  94.     }

  95.   }

  96. 

  97.   &.gin--sticky-table-header {

  98.     position: sticky;

  99.     z-index: 97;

  100.     visibility: hidden;

  101.     overflow: hidden;

  102.     width: auto !important;

  103.     margin-block-start: calc(var(--admin-space-xs) * -1);

  104.     inset-block-start: calc(var(--admin-theme-toolbar-y-offset) + var(--admin-theme-height-sticky) - 1px);

  105. 

  106.     tr {

  107.       display: block;

  108.       width: max-content;

  109.     }

  110.   }

  111. }

  112. 

  113. table.sticky-header {

  114.   inset-inline-start: auto !important;

  115.   min-width: 100%;

  116.   max-width: fit-content;

  117.   background: transparent;

  118. }

  119. 

  120. table.position-sticky,

  121. table.sticky-header {

  122.   thead {

  123.     position: static;

  124.   }

  125. 

  126.   &.--is-processed thead {

  127.     pointer-events: none;

  128. 

  129.     tr {

  130.       border-color: transparent;

  131. 

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

  133.         display: none;

  134.       }

  135.     }

  136.   }

  137. }

  138. 

  139. caption {

  140.   text-align: start;

  141. }

  142. 

  143. th {

  144.   position: relative;

  145.   box-sizing: border-box;

  146.   height: var(--admin-space-2xl);

  147.   padding: var(--admin-space-xs) var(--admin-space-m);

  148.   text-align: start;

  149.   color: var(--admin-color-text);

  150.   background: var(--admin-color-bg-surface-nested);

  151.   line-height: 1.25rem;

  152.   /* 20px */

  153. }

  154. 

  155. table th {

  156.   @media (min-width: 61em) {

  157.     height: auto;

  158.     padding: var(--admin-space-m);

  159.   }

  160. }

  161. 

  162. /* The actual sort link. */

  163. 

  164. .sortable-heading {

  165.   padding: var(--admin-space-xs) var(--admin-space-m);

  166. 

  167.   & > a {

  168.     display: block;

  169.     padding-block: var(--admin-space-xs);

  170.     padding-inline: 0 1.5rem;

  171.     -webkit-text-decoration: none;

  172.     text-decoration: none;

  173.     color: inherit;

  174. 

  175.     &:focus,

  176.     &:hover {

  177.       -webkit-text-decoration: none;

  178.       text-decoration: none;

  179. 

  180.       &::before {

  181.         border-color: inherit;

  182.         border-block-end-width: 0.1875rem;

  183.       }

  184. 

  185.       &::after {

  186.         opacity: 1;

  187.       }

  188.     }

  189. 

  190.     &::before {

  191.       position: absolute;

  192.       z-index: 0;

  193.       inset-block-start: 0;

  194.       inset-inline-end: 1rem;

  195.       inset-block-end: -2px;

  196.       inset-inline-start: 1rem;

  197.       display: block;

  198.       content: "";

  199.       border-bottom: 0.125rem solid transparent;

  200.     }

  201. 

  202.     &::after {

  203.       position: absolute;

  204.       inset-block-start: 50%;

  205.       inset-inline-end: 1rem;

  206.       width: 0.875rem;

  207.       height: 1rem;

  208.       margin-block-start: -0.5rem;

  209.       content: "";

  210.       opacity: 0.5;

  211.       background: var(--admin-color-text-soft);

  212.       background-size: contain;

  213.       mask-image: var(--admin-icon-sort);

  214.       mask-repeat: no-repeat;

  215.       mask-position: center center;

  216. 

  217.       [dir="rtl"] 
  218.       }

  219. 

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

  221.         opacity: 1;

  222.         background: linktext;

  223.         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%;

  224.       }

  225.     }

  226.   }

  227. 

  228.   &.is-active > a {

  229.     color: var(--admin-color-link);

  230. 

  231.     &::before {

  232.       /* border-bottom: 0.1875rem solid var(--admin-color-link); */

  233.       border-block-end: 0.1875rem solid var(--admin-color-primary-active);

  234.       background-color: var(--admin-color-bg-item);

  235.       border-start-start-radius: var(--admin-radius-s);

  236.       border-start-end-radius: var(--admin-radius-s);

  237.     }

  238. 

  239.     &::after {

  240.       content: none;

  241.     }

  242. 

  243.     &,

  244.     &:hover,

  245.     &:active {

  246.       color: var(--admin-color-primary-active);

  247.     }

  248.   }

  249. 

  250.   &.is-active > a::before,

  251.   > a:hover::before {

  252.     width: 100%;

  253.     inset-inline-start: 0;

  254.   }

  255. }

  256. 

  257. tr {

  258.   border-bottom: 0.0625rem solid var(--admin-color-border);

  259. 

  260.   &:hover,

  261.   &:focus-within {

  262.     color: var(--admin-color-text);

  263.     background: var(--admin-color-bg-item-hover);

  264.   }

  265. 

  266.   &.color-warning:hover,

  267.   &.color-warning:focus {

  268.     color: var(--admin-color-text);

  269.     background: #fdf8ed;

  270.   }

  271. 

  272.   &.color-error:hover,

  273.   &.color-error:focus {

  274.     color: var(--admin-color-text);

  275.     background: #fcf4f2;

  276.   }

  277. }

  278. 

  279. tr,

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

  281.   color: var(--admin-color-text);

  282.   background: var(--admin-color-bg-disabled);

  283. }

  284. 

  285. thead tr {

  286.   border: 0;

  287. }

  288. 

  289. td {

  290.   box-sizing: border-box;

  291.   height: 4rem;

  292.   padding: var(--admin-space-xs) var(--admin-space-m);

  293.   text-align: start;

  294. 

  295.   & .item-list ul {

  296.     margin: 0;

  297.   }

  298. 

  299.   &.is-active {

  300.     background: none;

  301.   }

  302. }

  303. 

  304. /**

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

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

  307.  */

  308. 

  309. td {

  310.   & > .form-item {

  311.     display: flex;

  312.     align-items: center;

  313.   }

  314. 

  315.   & > .form-item > .form-item__prefix {

  316.     margin-inline-end: var(--admin-space-xs);

  317.     white-space: nowrap;

  318.   }

  319. 

  320.   & > .form-item > .form-item__suffix {

  321.     margin-inline-start: var(--admin-space-xs);

  322.     white-space: nowrap;

  323.   }

  324. 

  325.   & > .form-item > .form-element,

  326.   & > .ajax-new-content > .form-item > .form-element,

  327.   & > .form-item > .claro-autocomplete,

  328.   & > .form-item > .claro-autocomplete > .form-element,

  329.   & > .ajax-new-content > .form-item > .claro-autocomplete,

  330.   & > .ajax-new-content > .form-item > .claro-autocomplete > .form-element {

  331.     width: 100%;

  332.   }

  333. 

  334.   & > .form-item > .form-element--type-select,

  335.   & > .ajax-new-content > .form-item > .form-element--type-select {

  336.     width: max-content;

  337.     min-width: 100%;

  338.   }

  339. }

  340. 

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

  342. 

  343. th.is-disabled.is-disabled {

  344.   color: var(--admin-color-text-disabled);

  345. }

  346. 

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

  348. 

  349. th.select-all {

  350.   width: 1px;

  351. }

  352. 

  353. /**

  354.  * Captions.

  355.  */

  356. 

  357. .caption {

  358.   margin-block-end: 1.25rem;

  359.   /* 20px */

  360. }

  361. 

  362. tfoot {

  363.   font-weight: bold;

  364. 

  365.   & tr {

  366.     &:last-child {

  367.       border-bottom: 0;

  368.     }

  369. 

  370.     &:first-child td {

  371.       /* Intentionally a stronger divider than --admin-color-border; kept on the

  372.          gray ramp so it isn't lightened to the default border tint. */

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

  374.     }

  375.   }

  376. }

  377. 

  378. /**

  379.  * Responsive table cells.

  380.  */

  381. 

  382. th.priority-low,

  383. th.priority-medium,

  384. td.priority-low,

  385. td.priority-medium {

  386.   display: none;

  387. }

  388. 

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

  390.   th.priority-medium,

  391.   td.priority-medium {

  392.     display: table-cell;

  393.   }

  394. }

  395. 

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

  397.   th.priority-low,

  398.   td.priority-low {

  399.     display: table-cell;

  400.   }

  401. }

  402. 

  403. .gin-table-scroll-wrapper {

  404.   clear: both;

  405.   overflow-x: auto;

  406.   overflow-y: hidden;

  407.   overscroll-behavior-x: contain;

  408.   margin-block-start: calc(var(--admin-space-xs) * -1);

  409. }

  410. 

  411. .gin-horizontal-scroll-shadow {

  412.   background-color: var(--admin-color-bg-surface);

  413.   background-image: linear-gradient(to right, var(--admin-color-bg-surface), var(--admin-color-bg-surface)), linear-gradient(to right, var(--admin-color-bg-surface), var(--admin-color-bg-surface)), linear-gradient(to right, rgb(0, 0, 0, 0.125), rgb(255, 255, 255, 0)), linear-gradient(to left, rgb(0, 0, 0, 0.125), rgb(255, 255, 255, 0));

  414.   background-repeat: no-repeat;

  415.   background-attachment: local, local, scroll, scroll;

  416.   background-position:

  417.     left center,

  418.     right center,

  419.     left center,

  420.     right center;

  421.   background-size:

  422.     1.5rem 100%,

  423.     1.5rem 100%,

  424.     0.75rem 100%,

  425.     0.75rem 100%;

  426. 

  427.   &:dir(rtl) {

  428.     background-image: linear-gradient(to left, var(--admin-color-bg-surface), var(--admin-color-bg-surface)), linear-gradient(to left, var(--admin-color-bg-surface), var(--admin-color-bg-surface)), linear-gradient(to left, rgb(0, 0, 0, 0.125), rgb(255, 255, 255, 0)), linear-gradient(to right, rgb(0, 0, 0, 0.125), rgb(255, 255, 255, 0));

  429.     background-position:

  430.       right center,

  431.       left center,

  432.       right center,

  433.       left center;

  434.   }

  435. }

  436. 

  437. .tablesort {

  438.   background-color: var(--admin-color-primary-active);

  439.   background-image: none;

  440.   mask-image: var(--admin-icon-sort);

  441.   mask-repeat: no-repeat;

  442.   mask-position: 0 50%;

  443. }

  444. 

  445. .tablesort--asc {

  446.   mask-image: var(--admin-icon-sort-asc);

  447. 

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

  449.     background: linktext;

  450.   }

  451. }

  452. 

  453. .tablesort--desc {

  454.   mask-image: var(--admin-icon-sort-desc);

  455. 

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

  457.     background: linktext;

  458.   }

  459. }

  460. 

  461. .field-plugin-settings-edit-wrapper {

  462.   float: inline-end;

  463. 

  464.   + a {

  465.     float: inline-start;

  466.   }

  467. }

  468. 

  469. .region-title {

  470.   border-block-end: 2px solid var(--admin-color-text);

  471. }

  472. 

  473. .field-multiple-table {

  474.   th {

  475.     padding-block: var(--admin-space-xs);

  476.     padding-inline: var(--admin-space-l) var(--admin-space-m);

  477.     border-block-end: 0;

  478.     background: transparent;

  479. 

  480.     &.th__order {

  481.       padding: 0;

  482.       font-size: 0;

  483.     }

  484.   }

  485. 

  486.   thead {

  487.     th {

  488.       background: var(--admin-color-bg-header);

  489. 

  490.       &:first-of-type {

  491.         border-start-start-radius: var(--admin-radius-m);

  492.         border-end-start-radius: var(--admin-radius-m);

  493.       }

  494.     }

  495. 

  496.     &:not(:has(th:last-of-type:not([style*="display: none"]))) th:nth-last-of-type(2),

  497.     th:last-of-type:not([style*="display: none"]) {

  498.       border-start-end-radius: var(--admin-radius-m);

  499.       border-end-end-radius: var(--admin-radius-m);

  500.     }

  501. 

  502.     tr {

  503.       border-block-end: 0;

  504.     }

  505. 

  506.     .field-label .label,

  507.     .form-item__label--multiple-value-form {

  508.       display: inline-block;

  509.       margin: 0;

  510.       padding: var(--admin-space-xs) 0;

  511.       letter-spacing: -0.025em;

  512.       color: var(--admin-color-primary-active);

  513.       font-size: var(--admin-font-size-l);

  514.       font-weight: var(--admin-font-weight-bold);

  515.       line-height: 1.33333em;

  516.     }

  517.   }

  518. 

  519.   tr .form-item:not(:last-of-type) {

  520.     margin-block-end: var(--admin-space-m);

  521.   }

  522. 

  523.   /* Fixes paragraphs extending beyond layout */

  524.   .ck.ck-toolbar.ck-toolbar_grouping > .ck-toolbar__items {

  525.     flex-wrap: wrap;

  526.   }

  527. }

  528. 

  529. .gin-layer-wrapper .views-table {

  530.   margin-block-start: 0;

  531. }

  532. 

  533. table td.field-plugin-summary-cell {

  534.   vertical-align: middle;

  535. }

  536. 

  537. table .views-field.views-field-operations {

  538.   text-align: end;

  539. }

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