gin-tabledrag.css

/*
 * DO NOT EDIT THIS FILE.
 * See the following change record for more information,
 * https://www.drupal.org/node/3084859
 * @preserve
 */
/* cspell:ignore smartdate */
.draggable {
  a.tabledrag-handle {
    float: none;
    vertical-align: middle;

    &:focus::before {
      box-shadow:
        0 0 0 1px var(--gin-color-focus-border),
        0 0 0 4px var(--gin-color-focus);
    }
  }

  &.drag-previous {
    background-color: #ffffe9;
  }

  &.drag,
  &.drag:focus {
    background-color: #f0f1f9;
  }
}
.tabledrag-toggle-weight-wrapper {
  margin-block-start: 0;

  .action-link {
    margin-block-end: var(--gin-spacing-xs);

    .action-link {
      margin-block-end: 0;
    }
  }
}
#field-display-overview,
#field-display-overview-wrapper,
.field--widget-entity-reference-paragraphs,
.field--type-link,
.field--type-smartdate {
  .gin-layer-wrapper > .tabledrag-toggle-weight-wrapper {
    .action-link {
      pointer-events: all;
      background-color: var(--gin-bg-layer);
    }
    @media (min-width: 61em) {
      position: relative;
      z-index: 1;
      margin-block-end: calc(var(--gin-spacing-xxl) * -1);
      pointer-events: none;
    }
  }
}
.tabledrag-handle,
.tabledrag-handle.tabledrag-handle-y {
  &::after {
    background-image: none;
    mask-image: var(--admin-icon-drag);
    mask-repeat: no-repeat;
    mask-position: center center;
    mask-size: 1rem 1rem;

    @media (forced-colors: none) {
      background-color: var(--gin-color-text-light);
    }

    @supports (-webkit-mask-image: url()) and (mask-composite: source-over) {
      background-color: var(--gin-color-text-light);
    }
  }

  &:hover {
    &::after {
      transform: scale(1);

      @media (forced-colors: none) {
        background-color: var(--gin-color-primary);
      }
    }
  }
}
.tabledrag-handle.tabledrag-handle-y::after {
  mask-image: var(--admin-icon-drag-y);
}
.draggable.drag,
.draggable.drag:focus {
  background-color: var(--gin-bg-layer2);

  .gin--dark-mode & {
    background-color: var(--gin-color-primary-light-hover);
  }
}
.draggable.drag-previous {
  background-color: var(--gin-bg-layer2);
  box-shadow: inset 6px 0 0 0 var(--gin-color-warning);

  &:dir(rtl) {
    box-shadow: inset -6px 0 0 0 var(--gin-color-warning);
  }

  &::after {
    position: absolute;
    width: 0.375rem;
    height: 100%;
    content: "";
  }

  @media (forced-colors: active) {
    position: relative;
    &::after {
      border-inline-start: 0.375rem solid linktext;
      inset-inline-start: 0;
    }
  }
}
.tabledrag-cell {
  padding-block: var(--gin-spacing-density-m);
}
.tabledrag-cell-content {
  margin-block: var(--gin-spacing-xs);
}
.field-plugin-settings-edit-wrapper,
.field-plugin-settings-edit-wrapper + a {
  margin-block: var(--gin-spacing-m);
}
.field-plugin-settings-edit-wrapper + a {
  margin-block-start: var(--gin-spacing-s);
}
.table-file-multiple-widget .tabledrag-cell-content {
  display: flex;
}

File

View on git.drupalcode.org

core/themes/default_admin/migration/css/base/gin-tabledrag.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. /* cspell:ignore smartdate */

  8. .draggable {

  9.   a.tabledrag-handle {

  10.     float: none;

  11.     vertical-align: middle;

  12. 

  13.     &:focus::before {

  14.       box-shadow:

  15.         0 0 0 1px var(--gin-color-focus-border),

  16.         0 0 0 4px var(--gin-color-focus);

  17.     }

  18.   }

  19. 

  20.   &.drag-previous {

  21.     background-color: #ffffe9;

  22.   }

  23. 

  24.   &.drag,

  25.   &.drag:focus {

  26.     background-color: #f0f1f9;

  27.   }

  28. }

  29. .tabledrag-toggle-weight-wrapper {

  30.   margin-block-start: 0;

  31. 

  32.   .action-link {

  33.     margin-block-end: var(--gin-spacing-xs);

  34. 

  35.     .action-link {

  36.       margin-block-end: 0;

  37.     }

  38.   }

  39. }

  40. #field-display-overview,

  41. #field-display-overview-wrapper,

  42. .field--widget-entity-reference-paragraphs,

  43. .field--type-link,

  44. .field--type-smartdate {

  45.   .gin-layer-wrapper > .tabledrag-toggle-weight-wrapper {

  46.     .action-link {

  47.       pointer-events: all;

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

  49.     }

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

  51.       position: relative;

  52.       z-index: 1;

  53.       margin-block-end: calc(var(--gin-spacing-xxl) * -1);

  54.       pointer-events: none;

  55.     }

  56.   }

  57. }

  58. .tabledrag-handle,

  59. .tabledrag-handle.tabledrag-handle-y {

  60.   &::after {

  61.     background-image: none;

  62.     mask-image: var(--admin-icon-drag);

  63.     mask-repeat: no-repeat;

  64.     mask-position: center center;

  65.     mask-size: 1rem 1rem;

  66. 

  67.     @media (forced-colors: none) {

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

  69.     }

  70. 

  71.     @supports (-webkit-mask-image: url()) and (mask-composite: source-over) {

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

  73.     }

  74.   }

  75. 

  76.   &:hover {

  77.     &::after {

  78.       transform: scale(1);

  79. 

  80.       @media (forced-colors: none) {

  81.         background-color: var(--gin-color-primary);

  82.       }

  83.     }

  84.   }

  85. }

  86. .tabledrag-handle.tabledrag-handle-y::after {

  87.   mask-image: var(--admin-icon-drag-y);

  88. }

  89. .draggable.drag,

  90. .draggable.drag:focus {

  91.   background-color: var(--gin-bg-layer2);

  92. 

  93.   .gin--dark-mode 
  94. }

  95. .draggable.drag-previous {

  96.   background-color: var(--gin-bg-layer2);

  97.   box-shadow: inset 6px 0 0 0 var(--gin-color-warning);

  98. 

  99.   &:dir(rtl) {

  100.     box-shadow: inset -6px 0 0 0 var(--gin-color-warning);

  101.   }

  102. 

  103.   &::after {

  104.     position: absolute;

  105.     width: 0.375rem;

  106.     height: 100%;

  107.     content: "";

  108.   }

  109. 

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

  111.     position: relative;

  112.     &::after {

  113.       border-inline-start: 0.375rem solid linktext;

  114.       inset-inline-start: 0;

  115.     }

  116.   }

  117. }

  118. .tabledrag-cell {

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

  120. }

  121. .tabledrag-cell-content {

  122.   margin-block: var(--gin-spacing-xs);

  123. }

  124. .field-plugin-settings-edit-wrapper,

  125. .field-plugin-settings-edit-wrapper + a {

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

  127. }

  128. .field-plugin-settings-edit-wrapper + a {

  129.   margin-block-start: var(--gin-spacing-s);

  130. }

  131. .table-file-multiple-widget .tabledrag-cell-content {

  132.   display: flex;

  133. }

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