gin-table.pcss.css

@import "media-queries.pcss.css";

.gin-table-scroll-wrapper {
  clear: both;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  margin-block-start: calc(var(--gin-spacing-xs) * -1);
}

table.gin--sticky-table-header {
  position: sticky;
  z-index: 97;
  visibility: hidden;
  overflow: hidden;
  width: auto !important;
  margin-block-start: calc(var(--gin-spacing-xs) * -1);
  inset-block-start: calc(var(--gin-toolbar-y-offset) + var(--gin-height-sticky) - 1px);

  tr {
    display: block;
    width: max-content;
  }
}

.gin-horizontal-scroll-shadow {
  background-color: var(--gin-bg-layer);
  background-image: linear-gradient(to right, var(--gin-bg-layer), var(--gin-bg-layer)), linear-gradient(to right, var(--gin-bg-layer), var(--gin-bg-layer)), 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));
  background-repeat: no-repeat;
  background-attachment: local, local, scroll, scroll;
  background-position:
    left center,
    right center,
    left center,
    right center;
  background-size:
    24px 100%,
    24px 100%,
    12px 100%,
    12px 100%;

  &:dir(rtl) {
    background-image: linear-gradient(to left, var(--gin-bg-layer), var(--gin-bg-layer)), linear-gradient(to left, var(--gin-bg-layer), var(--gin-bg-layer)), 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));
    background-position:
      right center,
      left center,
      right center,
      left center;
  }
}

table.sticky-header {
  inset-inline-start: auto !important;
  min-width: 100%;
  max-width: fit-content;
  background: transparent;
}

table.position-sticky,
table.sticky-header {
  thead {
    position: static;
  }

  &.--is-processed thead {
    pointer-events: none;

    tr {
      border-color: transparent;

      .sortable-heading.is-active > a::before {
        display: none;
      }
    }
  }
}

table {
  thead {
    border-radius: var(--gin-border-m);
    background: transparent;

    tr {
      border-block-end: 2px solid var(--gin-border-color-table-header);

      &:hover {
        background: transparent;
      }
    }
  }

  th {
    background: var(--gin-bg-layer);
    font-size: var(--gin-font-size-s);
    font-weight: var(--gin-font-weight-bold);

    &,
    .form-item__label {
      color: var(--gin-color-title);
    }

    @media (--admin-medium) {
      height: auto;
      padding: var(--gin-spacing-m);
    }
  }

  tbody {
    tr {
      border-block-end: 1px solid var(--gin-border-color-table);
    }

    td {
      height: auto;
      padding: var(--gin-spacing-density-m) var(--gin-spacing-m);
    }
  }

  tr,
  tr:focus-within,
  .draggable-table.tabledrag-disabled tr {
    color: var(--gin-color-text);
    background-color: transparent;

    &:hover {
      color: var(--gin-color-text);
      background: var(--gin-bg-item);
    }

    &.selected:hover {
      background: transparent;
    }
  }

  tr.selected {
    .gin--dark-mode & {
      border-color: rgb(255, 255, 255, 0.2);
    }

    td {
      background-color: var(--gin-bg-item-hover);
    }
  }

  td {
    a {
      text-decoration: none;

      &:hover {
        text-decoration: underline;
        text-decoration-style: var(--gin-link-decoration-style);
      }
    }

    .group-label {
      color: var(--gin-color-title);
    }
  }
}

.sortable-heading {
  padding: var(--gin-spacing-xs) var(--gin-spacing-m);

  > a::before {
    inset-block-end: -2px;
  }

  > a::after {
    background: var(--gin-color-text-light);
    mask-image: var(--admin-icon-sort);
    mask-repeat: no-repeat;
    mask-position: center center;

    @media (forced-colors: active) {
      background: linktext;
    }
  }

  &.is-active > a::before,
  > a:hover::before {
    width: 100%;
    inset-inline-start: 0;
  }

  > a:hover::before {
    border-block-end-width: 3px;
  }

  &.is-active > a {
    &,
    &:hover,
    &:active {
      color: var(--gin-color-primary-active);
    }

    &::before {
      border-block-end: 0.1875rem solid var(--gin-color-primary-active);
      background-color: var(--gin-bg-item);
      border-start-start-radius: var(--gin-border-s);
      border-start-end-radius: var(--gin-border-s);
    }
  }
}

.tablesort {
  background-color: var(--gin-color-primary-active);
  background-image: none;
  mask-image: var(--admin-icon-sort);
  mask-repeat: no-repeat;
  mask-position: 0 50%;
}

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

  @media (forced-colors: active) {
    background: linktext;
  }
}

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

  @media (forced-colors: active) {
    background: linktext;
  }
}

.field-plugin-settings-edit-wrapper {
  float: inline-end;

  + a {
    float: inline-start;
  }
}

.region-title {
  border-block-end: 2px solid var(--gin-color-text);
}

.field-multiple-table {
  th {
    padding-block: var(--gin-spacing-xs);
    padding-inline: var(--gin-spacing-l) var(--gin-spacing-m);
    border-block-end: 0;
    background: transparent;

    &.th__order {
      padding: 0;
      font-size: 0;
    }
  }

  thead {
    th {
      background: var(--gin-bg-header);

      &:first-of-type {
        border-start-start-radius: var(--gin-border-m);
        border-end-start-radius: var(--gin-border-m);
      }
    }

    &:not(:has(th:last-of-type:not([style*="display: none"]))) th:nth-last-of-type(2),
    th:last-of-type:not([style*="display: none"]) {
      border-start-end-radius: var(--gin-border-m);
      border-end-end-radius: var(--gin-border-m);
    }

    tr {
      border-block-end: 0;
    }

    .field-label .label,
    .form-item__label--multiple-value-form {
      display: inline-block;
      margin: 0;
      padding: var(--gin-spacing-xs) 0;
      letter-spacing: -0.025em;
      color: var(--gin-color-primary-active);
      font-size: var(--gin-font-size-l);
      font-weight: var(--gin-font-weight-bold);
      line-height: 1.33333em;
    }
  }

  tr .form-item:not(:last-of-type) {
    margin-block-end: var(--gin-spacing-m);
  }

  /* Fixes paragraphs extending beyond layout */
  .ck.ck-toolbar.ck-toolbar_grouping > .ck-toolbar__items {
    flex-wrap: wrap;
  }
}

.gin-layer-wrapper .views-table {
  margin-block-start: 0;
}

table td.field-plugin-summary-cell {
  vertical-align: middle;
}

table .views-field.views-field-operations {
  text-align: end;
}

File

View on git.drupalcode.org

core/themes/default_admin/migration/css/base/gin-table.pcss.css

View source 
  1. @import "media-queries.pcss.css";

  2. 

  3. .gin-table-scroll-wrapper {

  4.   clear: both;

  5.   overflow-x: auto;

  6.   overflow-y: hidden;

  7.   overscroll-behavior-x: contain;

  8.   -webkit-overflow-scrolling: touch;

  9.   margin-block-start: calc(var(--gin-spacing-xs) * -1);

  10. }

  11. 

  12. table.gin--sticky-table-header {

  13.   position: sticky;

  14.   z-index: 97;

  15.   visibility: hidden;

  16.   overflow: hidden;

  17.   width: auto !important;

  18.   margin-block-start: calc(var(--gin-spacing-xs) * -1);

  19.   inset-block-start: calc(var(--gin-toolbar-y-offset) + var(--gin-height-sticky) - 1px);

  20. 

  21.   tr {

  22.     display: block;

  23.     width: max-content;

  24.   }

  25. }

  26. 

  27. .gin-horizontal-scroll-shadow {

  28.   background-color: var(--gin-bg-layer);

  29.   background-image: linear-gradient(to right, var(--gin-bg-layer), var(--gin-bg-layer)), linear-gradient(to right, var(--gin-bg-layer), var(--gin-bg-layer)), 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));

  30.   background-repeat: no-repeat;

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

  32.   background-position:

  33.     left center,

  34.     right center,

  35.     left center,

  36.     right center;

  37.   background-size:

  38.     24px 100%,

  39.     24px 100%,

  40.     12px 100%,

  41.     12px 100%;

  42. 

  43.   &:dir(rtl) {

  44.     background-image: linear-gradient(to left, var(--gin-bg-layer), var(--gin-bg-layer)), linear-gradient(to left, var(--gin-bg-layer), var(--gin-bg-layer)), 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));

  45.     background-position:

  46.       right center,

  47.       left center,

  48.       right center,

  49.       left center;

  50.   }

  51. }

  52. 

  53. table.sticky-header {

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

  55.   min-width: 100%;

  56.   max-width: fit-content;

  57.   background: transparent;

  58. }

  59. 

  60. table.position-sticky,

  61. table.sticky-header {

  62.   thead {

  63.     position: static;

  64.   }

  65. 

  66.   &.--is-processed thead {

  67.     pointer-events: none;

  68. 

  69.     tr {

  70.       border-color: transparent;

  71. 

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

  73.         display: none;

  74.       }

  75.     }

  76.   }

  77. }

  78. 

  79. table {

  80.   thead {

  81.     border-radius: var(--gin-border-m);

  82.     background: transparent;

  83. 

  84.     tr {

  85.       border-block-end: 2px solid var(--gin-border-color-table-header);

  86. 

  87.       &:hover {

  88.         background: transparent;

  89.       }

  90.     }

  91.   }

  92. 

  93.   th {

  94.     background: var(--gin-bg-layer);

  95.     font-size: var(--gin-font-size-s);

  96.     font-weight: var(--gin-font-weight-bold);

  97. 

  98.     &,

  99.     .form-item__label {

  100.       color: var(--gin-color-title);

  101.     }

  102. 

  103.     @media (--admin-medium) {

  104.       height: auto;

  105.       padding: var(--gin-spacing-m);

  106.     }

  107.   }

  108. 

  109.   tbody {

  110.     tr {

  111.       border-block-end: 1px solid var(--gin-border-color-table);

  112.     }

  113. 

  114.     td {

  115.       height: auto;

  116.       padding: var(--gin-spacing-density-m) var(--gin-spacing-m);

  117.     }

  118.   }

  119. 

  120.   tr,

  121.   tr:focus-within,

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

  123.     color: var(--gin-color-text);

  124.     background-color: transparent;

  125. 

  126.     &:hover {

  127.       color: var(--gin-color-text);

  128.       background: var(--gin-bg-item);

  129.     }

  130. 

  131.     &.selected:hover {

  132.       background: transparent;

  133.     }

  134.   }

  135. 

  136.   tr.selected {

  137.     .gin--dark-mode 
  138. 

  139.     td {

  140.       background-color: var(--gin-bg-item-hover);

  141.     }

  142.   }

  143. 

  144.   td {

  145.     a {

  146.       text-decoration: none;

  147. 

  148.       &:hover {

  149.         text-decoration: underline;

  150.         text-decoration-style: var(--gin-link-decoration-style);

  151.       }

  152.     }

  153. 

  154.     .group-label {

  155.       color: var(--gin-color-title);

  156.     }

  157.   }

  158. }

  159. 

  160. .sortable-heading {

  161.   padding: var(--gin-spacing-xs) var(--gin-spacing-m);

  162. 

  163.   > a::before {

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

  165.   }

  166. 

  167.   > a::after {

  168.     background: var(--gin-color-text-light);

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

  170.     mask-repeat: no-repeat;

  171.     mask-position: center center;

  172. 

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

  174.       background: linktext;

  175.     }

  176.   }

  177. 

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

  179.   > a:hover::before {

  180.     width: 100%;

  181.     inset-inline-start: 0;

  182.   }

  183. 

  184.   > a:hover::before {

  185.     border-block-end-width: 3px;

  186.   }

  187. 

  188.   &.is-active > a {

  189.     &,

  190.     &:hover,

  191.     &:active {

  192.       color: var(--gin-color-primary-active);

  193.     }

  194. 

  195.     &::before {

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

  197.       background-color: var(--gin-bg-item);

  198.       border-start-start-radius: var(--gin-border-s);

  199.       border-start-end-radius: var(--gin-border-s);

  200.     }

  201.   }

  202. }

  203. 

  204. .tablesort {

  205.   background-color: var(--gin-color-primary-active);

  206.   background-image: none;

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

  208.   mask-repeat: no-repeat;

  209.   mask-position: 0 50%;

  210. }

  211. 

  212. .tablesort--asc {

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

  214. 

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

  216.     background: linktext;

  217.   }

  218. }

  219. 

  220. .tablesort--desc {

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

  222. 

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

  224.     background: linktext;

  225.   }

  226. }

  227. 

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

  229.   float: inline-end;

  230. 

  231.   + a {

  232.     float: inline-start;

  233.   }

  234. }

  235. 

  236. .region-title {

  237.   border-block-end: 2px solid var(--gin-color-text);

  238. }

  239. 

  240. .field-multiple-table {

  241.   th {

  242.     padding-block: var(--gin-spacing-xs);

  243.     padding-inline: var(--gin-spacing-l) var(--gin-spacing-m);

  244.     border-block-end: 0;

  245.     background: transparent;

  246. 

  247.     &.th__order {

  248.       padding: 0;

  249.       font-size: 0;

  250.     }

  251.   }

  252. 

  253.   thead {

  254.     th {

  255.       background: var(--gin-bg-header);

  256. 

  257.       &:first-of-type {

  258.         border-start-start-radius: var(--gin-border-m);

  259.         border-end-start-radius: var(--gin-border-m);

  260.       }

  261.     }

  262. 

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

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

  265.       border-start-end-radius: var(--gin-border-m);

  266.       border-end-end-radius: var(--gin-border-m);

  267.     }

  268. 

  269.     tr {

  270.       border-block-end: 0;

  271.     }

  272. 

  273.     .field-label .label,

  274.     .form-item__label--multiple-value-form {

  275.       display: inline-block;

  276.       margin: 0;

  277.       padding: var(--gin-spacing-xs) 0;

  278.       letter-spacing: -0.025em;

  279.       color: var(--gin-color-primary-active);

  280.       font-size: var(--gin-font-size-l);

  281.       font-weight: var(--gin-font-weight-bold);

  282.       line-height: 1.33333em;

  283.     }

  284.   }

  285. 

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

  287.     margin-block-end: var(--gin-spacing-m);

  288.   }

  289. 

  290.   /* Fixes paragraphs extending beyond layout */

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

  292.     flex-wrap: wrap;

  293.   }

  294. }

  295. 

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

  297.   margin-block-start: 0;

  298. }

  299. 

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

  301.   vertical-align: middle;

  302. }

  303. 

  304. table .views-field.views-field-operations {

  305.   text-align: end;

  306. }

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