gin-table.pcss.css

Same filename and directory in other branches
  1. main core/themes/default_admin/migration/css/base/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;
  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.   margin-block-start: calc(var(--gin-spacing-xs) * -1);

  9. }

  10. 

  11. table.gin--sticky-table-header {

  12.   position: sticky;

  13.   z-index: 97;

  14.   visibility: hidden;

  15.   overflow: hidden;

  16.   width: auto !important;

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

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

  19. 

  20.   tr {

  21.     display: block;

  22.     width: max-content;

  23.   }

  24. }

  25. 

  26. .gin-horizontal-scroll-shadow {

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

  28.   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));

  29.   background-repeat: no-repeat;

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

  31.   background-position:

  32.     left center,

  33.     right center,

  34.     left center,

  35.     right center;

  36.   background-size:

  37.     24px 100%,

  38.     24px 100%,

  39.     12px 100%,

  40.     12px 100%;

  41. 

  42.   &:dir(rtl) {

  43.     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));

  44.     background-position:

  45.       right center,

  46.       left center,

  47.       right center,

  48.       left center;

  49.   }

  50. }

  51. 

  52. table.sticky-header {

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

  54.   min-width: 100%;

  55.   max-width: fit-content;

  56.   background: transparent;

  57. }

  58. 

  59. table.position-sticky,

  60. table.sticky-header {

  61.   thead {

  62.     position: static;

  63.   }

  64. 

  65.   &.--is-processed thead {

  66.     pointer-events: none;

  67. 

  68.     tr {

  69.       border-color: transparent;

  70. 

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

  72.         display: none;

  73.       }

  74.     }

  75.   }

  76. }

  77. 

  78. table {

  79.   thead {

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

  81.     background: transparent;

  82. 

  83.     tr {

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

  85. 

  86.       &:hover {

  87.         background: transparent;

  88.       }

  89.     }

  90.   }

  91. 

  92.   th {

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

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

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

  96. 

  97.     &,

  98.     .form-item__label {

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

  100.     }

  101. 

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

  103.       height: auto;

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

  105.     }

  106.   }

  107. 

  108.   tbody {

  109.     tr {

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

  111.     }

  112. 

  113.     td {

  114.       height: auto;

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

  116.     }

  117.   }

  118. 

  119.   tr,

  120.   tr:focus-within,

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

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

  123.     background-color: transparent;

  124. 

  125.     &:hover {

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

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

  128.     }

  129. 

  130.     &.selected:hover {

  131.       background: transparent;

  132.     }

  133.   }

  134. 

  135.   tr.selected {

  136.     .gin--dark-mode 
  137. 

  138.     td {

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

  140.     }

  141.   }

  142. 

  143.   td {

  144.     a {

  145.       text-decoration: none;

  146. 

  147.       &:hover {

  148.         text-decoration: underline;

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

  150.       }

  151.     }

  152. 

  153.     .group-label {

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

  155.     }

  156.   }

  157. }

  158. 

  159. .sortable-heading {

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

  161. 

  162.   > a::before {

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

  164.   }

  165. 

  166.   > a::after {

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

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

  169.     mask-repeat: no-repeat;

  170.     mask-position: center center;

  171. 

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

  173.       background: linktext;

  174.     }

  175.   }

  176. 

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

  178.   > a:hover::before {

  179.     width: 100%;

  180.     inset-inline-start: 0;

  181.   }

  182. 

  183.   > a:hover::before {

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

  185.   }

  186. 

  187.   &.is-active > a {

  188.     &,

  189.     &:hover,

  190.     &:active {

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

  192.     }

  193. 

  194.     &::before {

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

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

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

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

  199.     }

  200.   }

  201. }

  202. 

  203. .tablesort {

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

  205.   background-image: none;

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

  207.   mask-repeat: no-repeat;

  208.   mask-position: 0 50%;

  209. }

  210. 

  211. .tablesort--asc {

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

  213. 

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

  215.     background: linktext;

  216.   }

  217. }

  218. 

  219. .tablesort--desc {

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

  221. 

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

  223.     background: linktext;

  224.   }

  225. }

  226. 

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

  228.   float: inline-end;

  229. 

  230.   + a {

  231.     float: inline-start;

  232.   }

  233. }

  234. 

  235. .region-title {

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

  237. }

  238. 

  239. .field-multiple-table {

  240.   th {

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

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

  243.     border-block-end: 0;

  244.     background: transparent;

  245. 

  246.     &.th__order {

  247.       padding: 0;

  248.       font-size: 0;

  249.     }

  250.   }

  251. 

  252.   thead {

  253.     th {

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

  255. 

  256.       &:first-of-type {

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

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

  259.       }

  260.     }

  261. 

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

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

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

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

  266.     }

  267. 

  268.     tr {

  269.       border-block-end: 0;

  270.     }

  271. 

  272.     .field-label .label,

  273.     .form-item__label--multiple-value-form {

  274.       display: inline-block;

  275.       margin: 0;

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

  277.       letter-spacing: -0.025em;

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

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

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

  281.       line-height: 1.33333em;

  282.     }

  283.   }

  284. 

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

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

  287.   }

  288. 

  289.   /* Fixes paragraphs extending beyond layout */

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

  291.     flex-wrap: wrap;

  292.   }

  293. }

  294. 

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

  296.   margin-block-start: 0;

  297. }

  298. 

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

  300.   vertical-align: middle;

  301. }

  302. 

  303. table .views-field.views-field-operations {

  304.   text-align: end;

  305. }

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