Verified Commit f1769fae authored by Théodore Biadala's avatar Théodore Biadala
Browse files

Issue #3332683 by VladimirAus, psebborn, Gauravvvv, mherchel, lauriii, nod_,... 

Issue #3332683 by VladimirAus, psebborn, Gauravvvv, mherchel, lauriii, nod_, pradipmodh13, smustgrave, quietone, Stockfoot: Refactor Claro's tabledrag stylesheet
parent d9a1ec2d

core/themes/claro/css/base/variables.css

+0 −4
Original line number Diff line number Diff line
@@ -236,10 +236,6 @@ 
  --progress-bar-description-font-size: var(--font-size-xs);

  --progress-track-border-color: var(--color-gray-500);

  --progress-track-bg-color: var(--color-gray-200);

  /**

   * Tabledrag icon size.

   */

  --tabledrag-handle-icon-size: calc(17rem / 16); /* 17px */

  /**

   * Ajax progress.

   */

core/themes/claro/css/base/variables.pcss.css

+0 −4
Original line number Diff line number Diff line
@@ -230,10 +230,6 @@ 
  --progress-bar-description-font-size: var(--font-size-xs);

  --progress-track-border-color: var(--color-gray-500);

  --progress-track-bg-color: var(--color-gray-200);

  /**

   * Tabledrag icon size.

   */

  --tabledrag-handle-icon-size: calc(17rem / 16); /* 17px */

  /**

   * Ajax progress.

   */

core/themes/claro/css/components/tabledrag.css

+67 −117
Original line number Diff line number Diff line
@@ -14,11 +14,6 @@ 
 * @see tabledrag.js

 */



:root {

  --table-row--dragging-bg-color: #fe7;

  --table-row--last-dragged-bg-color: #ffb;

}



body.drag {

  cursor: move;

}
@@ -27,6 +22,21 @@ body.drag-y { 
  cursor: row-resize;

}



.draggable-table {

  --table-row--dragging-bg-color: #fe7;

  --table-row--last-dragged-bg-color: #ffb;

  --tabledrag-handle-icon-size: 1.0625rem;



  /**

  * Reduce the spacing of draggable table cells.

  */

}



.draggable-table td:first-child ~ td,

.draggable-table th:first-child ~ th {

  padding-inline-start: 0;

}



/* The block region's title row in table. */



.region-title {
@@ -39,9 +49,8 @@ body.drag-y { 
  color: var(--color-gray-600);

}



/* If the region is populated, we shouldn't display the empty message. */



.region-message.region-populated {

  /* If the region is populated, we shouldn't display the empty message. */

  display: none;

}
@@ -62,12 +71,7 @@ body.drag-y { 


.draggable .tabledrag-changed {

  position: relative;

  left: calc(var(--space-xs) * -1); /* LTR */

}



[dir="rtl"] .draggable .tabledrag-changed {

  right: calc(var(--space-xs) * -1); /* LTR */

  left: auto;

  inset-inline-start: calc(var(--space-xs) * -1);

}



.tabledrag-cell--only-drag .tabledrag-changed {
@@ -88,21 +92,6 @@ body.drag-y { 
  background-color: var(--table-row--last-dragged-bg-color);

}



/**

 * Reduce the spacing of draggable table cells.

 */



.draggable-table td:first-child ~ td,

.draggable-table th:first-child ~ th {

  padding-left: 0 /* LTR */;

}



[dir="rtl"] .draggable-table td:first-child ~ td,

[dir="rtl"] .draggable-table th:first-child ~ th {

  padding-right: 0;

  padding-left: var(--space-m);

}



/* Auto width for weight selects and number inputs. */



.draggable td .form-element--type-select[name$="][_weight]"], /* Multiple field */
@@ -128,16 +117,23 @@ body.drag-y { 
  display: inline-block;

  width: var(--tabledrag-handle-icon-size);

  height: var(--tabledrag-handle-icon-size);

  margin-left: calc(var(--space-m) * -1); /* LTR */

  margin-inline-start: calc(var(--space-m) * -1);

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

  content: "";

  transition: transform 0.1s ease-in-out 0s;

  background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 16 16'%3e%3cpath fill='%23000f33' d='M14.103 5.476a.5.5 0 00-.701-.053.526.526 0 00-.082.713l1.1 1.346H8.512V1.62l1.32 1.113a.501.501 0 00.732-.054.528.528 0 00-.085-.744L8.328.119a.5.5 0 00-.647 0L5.529 1.935a.527.527 0 00-.085.744.504.504 0 00.732.054l1.32-1.113v5.862H1.588L2.68 6.136a.526.526 0 00-.1-.68.5.5 0 00-.675.02L.117 7.67a.525.525 0 000 .66l1.788 2.194a.5.5 0 00.702.053.526.526 0 00.081-.713l-1.1-1.346h5.908v5.862l-1.32-1.113a.501.501 0 00-.698.082.526.526 0 00.051.716l2.152 1.817v-.001a.5.5 0 00.647 0l2.151-1.816a.526.526 0 00.052-.716.501.501 0 00-.699-.082l-1.32 1.113V8.518h5.908l-1.091 1.346a.527.527 0 00.022.776.504.504 0 00.752-.116l1.78-2.194a.527.527 0 000-.66z'/%3e%3c/svg%3e") no-repeat center;

}



[dir="rtl"] .tabledrag-handle::after {

  margin-right: calc(var(--space-m) * -1);

  margin-left: 0;

@media (forced-colors: active) {

  .tabledrag-handle::after {

    background: linktext;

    -webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 16 16'%3e%3cpath fill='%23000f33' d='M14.103 5.476a.5.5 0 00-.701-.053.526.526 0 00-.082.713l1.1 1.346H8.512V1.62l1.32 1.113a.501.501 0 00.732-.054.528.528 0 00-.085-.744L8.328.119a.5.5 0 00-.647 0L5.529 1.935a.527.527 0 00-.085.744.504.504 0 00.732.054l1.32-1.113v5.862H1.588L2.68 6.136a.526.526 0 00-.1-.68.5.5 0 00-.675.02L.117 7.67a.525.525 0 000 .66l1.788 2.194a.5.5 0 00.702.053.526.526 0 00.081-.713l-1.1-1.346h5.908v5.862l-1.32-1.113a.501.501 0 00-.698.082.526.526 0 00.051.716l2.152 1.817v-.001a.5.5 0 00.647 0l2.151-1.816a.526.526 0 00.052-.716.501.501 0 00-.699-.082l-1.32 1.113V8.518h5.908l-1.091 1.346a.527.527 0 00.022.776.504.504 0 00.752-.116l1.78-2.194a.527.527 0 000-.66z'/%3e%3c/svg%3e");

    mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 16 16'%3e%3cpath fill='%23000f33' d='M14.103 5.476a.5.5 0 00-.701-.053.526.526 0 00-.082.713l1.1 1.346H8.512V1.62l1.32 1.113a.501.501 0 00.732-.054.528.528 0 00-.085-.744L8.328.119a.5.5 0 00-.647 0L5.529 1.935a.527.527 0 00-.085.744.504.504 0 00.732.054l1.32-1.113v5.862H1.588L2.68 6.136a.526.526 0 00-.1-.68.5.5 0 00-.675.02L.117 7.67a.525.525 0 000 .66l1.788 2.194a.5.5 0 00.702.053.526.526 0 00.081-.713l-1.1-1.346h5.908v5.862l-1.32-1.113a.501.501 0 00-.698.082.526.526 0 00.051.716l2.152 1.817v-.001a.5.5 0 00.647 0l2.151-1.816a.526.526 0 00.052-.716.501.501 0 00-.699-.082l-1.32 1.113V8.518h5.908l-1.091 1.346a.527.527 0 00.022.776.504.504 0 00.752-.116l1.78-2.194a.527.527 0 000-.66z'/%3e%3c/svg%3e");

    -webkit-mask-repeat: no-repeat;

    mask-repeat: no-repeat;

    -webkit-mask-position: center;

    mask-position: center;

  }

}



/* Change icon and cursor if only vertical drag is allowed. */
@@ -151,26 +147,12 @@ body.drag-y { 
  background-size: 1rem 1rem;

}



@media (forced-colors: active) {

  .tabledrag-handle::after {

    content: "";

    background: linktext;

    -webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 16 16'%3e%3cpath fill='%23000f33' d='M14.103 5.476a.5.5 0 00-.701-.053.526.526 0 00-.082.713l1.1 1.346H8.512V1.62l1.32 1.113a.501.501 0 00.732-.054.528.528 0 00-.085-.744L8.328.119a.5.5 0 00-.647 0L5.529 1.935a.527.527 0 00-.085.744.504.504 0 00.732.054l1.32-1.113v5.862H1.588L2.68 6.136a.526.526 0 00-.1-.68.5.5 0 00-.675.02L.117 7.67a.525.525 0 000 .66l1.788 2.194a.5.5 0 00.702.053.526.526 0 00.081-.713l-1.1-1.346h5.908v5.862l-1.32-1.113a.501.501 0 00-.698.082.526.526 0 00.051.716l2.152 1.817v-.001a.5.5 0 00.647 0l2.151-1.816a.526.526 0 00.052-.716.501.501 0 00-.699-.082l-1.32 1.113V8.518h5.908l-1.091 1.346a.527.527 0 00.022.776.504.504 0 00.752-.116l1.78-2.194a.527.527 0 000-.66z'/%3e%3c/svg%3e");

    mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 16 16'%3e%3cpath fill='%23000f33' d='M14.103 5.476a.5.5 0 00-.701-.053.526.526 0 00-.082.713l1.1 1.346H8.512V1.62l1.32 1.113a.501.501 0 00.732-.054.528.528 0 00-.085-.744L8.328.119a.5.5 0 00-.647 0L5.529 1.935a.527.527 0 00-.085.744.504.504 0 00.732.054l1.32-1.113v5.862H1.588L2.68 6.136a.526.526 0 00-.1-.68.5.5 0 00-.675.02L.117 7.67a.525.525 0 000 .66l1.788 2.194a.5.5 0 00.702.053.526.526 0 00.081-.713l-1.1-1.346h5.908v5.862l-1.32-1.113a.501.501 0 00-.698.082.526.526 0 00.051.716l2.152 1.817v-.001a.5.5 0 00.647 0l2.151-1.816a.526.526 0 00.052-.716.501.501 0 00-.699-.082l-1.32 1.113V8.518h5.908l-1.091 1.346a.527.527 0 00.022.776.504.504 0 00.752-.116l1.78-2.194a.527.527 0 000-.66z'/%3e%3c/svg%3e");

    -webkit-mask-repeat: no-repeat;

    mask-repeat: no-repeat;

    -webkit-mask-position: center;

    mask-position: center;

  }

}



.tabledrag-handle::after,

.tabledrag-disabled .tabledrag-handle.tabledrag-handle.tabledrag-handle::after {

  transform: scale(1);

}



.tabledrag-handle:hover::after,

.tabledrag-handle:focus::after,

.tabledrag-handle:is(:hover, :focus)::after,

.draggable.drag .tabledrag-handle::after {

  transform: scale(1.25);

}
@@ -199,7 +181,7 @@ body.drag-y { 
}



.tabledrag-disabled .tabledrag-handle.tabledrag-handle::before {

  content: normal;

  content: none;

}



/**
@@ -211,13 +193,11 @@ body.drag-y { 
 */



.touchevents .tabledrag-handle::after {

  padding-top: var(--space-s);

  padding-bottom: var(--space-s);

  padding-block: var(--space-s);

}



.touchevents .draggable .menu-item__link {

  padding-top: var(--space-xs);

  padding-bottom: var(--space-xs);

  padding-block: var(--space-xs);

}



/**
@@ -225,14 +205,10 @@ body.drag-y { 
 */



.tabledrag-toggle-weight-wrapper {

  text-align: right; /* LTR */

}



[dir="rtl"] .tabledrag-toggle-weight-wrapper {

  text-align: left;

}

  text-align: end;



  /* Hide nested weight toggles as they are redundant. */

}



.draggable-table .tabledrag-toggle-weight-wrapper {

  display: none;
@@ -243,8 +219,7 @@ body.drag-y { 
 */



.tabledrag-cell {

  padding-top: 0;

  padding-bottom: 0;

  padding-block: 0;

}



/**
@@ -256,16 +231,12 @@ body.drag-y { 


.tabledrag-cell--only-drag {

  width: 1px; /* This forces this cell to use the smallest possible width. */

  padding-right: 0; /* LTR */

}



[dir="rtl"] .tabledrag-cell--only-drag {

  padding-right: var(--space-m);

  padding-left: 0;

  padding-inline-end: 0;

}



.tabledrag-cell-content {

  display: table;

  display: flex;

  align-items: center;

  height: 100%;

}
@@ -274,49 +245,20 @@ body.drag-y { 
  vertical-align: middle;

}



.tabledrag-cell-content__item {

  padding-right: var(--space-xs); /* LTR */

}



[dir="rtl"] .tabledrag-cell-content__item {

  padding-right: 0;

  padding-left: var(--space-xs);

}



.tabledrag-cell-content__item:empty {

  display: none;

}



.tabledrag-cell-content .indentation,

[dir="rtl"] .tabledrag-cell-content .indentation {

  float: none;

  overflow: hidden;

  height: 100%;

}



.tabledrag-cell-content .tree {

  min-height: 100%;

  flex-grow: 1;

}



/**

 * Safari (at least version 13.0) thinks that if we define a width or height for

 * and SVG, then we refer to the elements total size inside the SVG.

 * We only want to inherit the height of the parent element.

 */



/* stylelint-disable-next-line unit-allowed-list */



@media not all and (min-resolution: 0.001dpcm) {

  @supports (-webkit-appearance: none) {

    .tabledrag-cell-content .tree {

      overflow: visible;

      min-height: 0;

    }

.tabledrag-cell-content .tabledrag-handle::after {

  vertical-align: middle;

}



.tabledrag-cell-content__item {

  padding-inline-end: var(--space-xs);

}



.tabledrag-cell-content .tabledrag-handle::after {

  vertical-align: middle;

.tabledrag-cell-content__item:empty {

  display: none;

}



/**
@@ -325,17 +267,25 @@ body.drag-y { 


.indentation {

  position: relative;

  left: calc(var(--space-xs) * -0.5); /* LTR */

  inset-inline-start: calc(var(--space-xs) * -0.5);

  float: left; /* LTR */

  width: calc(25rem / 16); /* 25px */

  height: calc(25rem / 16); /* 25px */

  width: 1.5625rem;

  height: 1.5625rem;

  background: none !important;

  line-height: 0;

}



.tabledrag-cell-content .indentation {

  /* Fixes Safari bug (16.1 at least) where table rows are overly large when

      using indentation (e.g. re-ordering menu items. */

  display: inline-flex;

  float: none;

  overflow: hidden;

  flex-direction: column;

  height: 100%;

}



[dir="rtl"] .indentation {

  right: calc(var(--space-xs) * -0.5);

  left: auto;

  float: right;

}
@@ -348,8 +298,8 @@ body.drag-y { 
 */



.tree {

  width: calc(25rem / 16); /* 25px */

  height: calc(25rem / 16); /* 25px */

  width: 1.5625rem;

  height: 1.5625rem;

}



.tree__item {
@@ -376,23 +326,23 @@ body.drag-y { 
  display: block;

}



/* Last LTR tree child. */

/* Last RTL tree child. */



.tree-child-last path:not(.tree__item-child-last-ltr) {

[dir="rtl"] .tree-child-last path:not(.tree__item-child-last-rtl) {

  display: none;

}



.tree-child-last path.tree__item-child-last-ltr {

[dir="rtl"] .tree-child-last path.tree__item-child-last-rtl {

  display: block;

}



/* Last RTL tree child. */

/* Last LTR tree child. */



[dir="rtl"] .tree-child-last path:not(.tree__item-child-last-rtl) {

.tree-child-last path:not(.tree__item-child-last-ltr) {

  display: none;

}



[dir="rtl"] .tree-child-last path.tree__item-child-last-rtl {

.tree-child-last path.tree__item-child-last-ltr {

  display: block;

}

core/themes/claro/css/components/tabledrag.pcss.css

+164 −179
Original line number Diff line number Diff line
@@ -7,11 +7,6 @@ 
 * @see tabledrag.js

 */



:root {

  --table-row--dragging-bg-color: #fe7;

  --table-row--last-dragged-bg-color: #ffb;

}



body.drag {

  cursor: move;

}
@@ -19,18 +14,35 @@ body.drag-y { 
  cursor: row-resize;

}



.draggable-table {

  --table-row--dragging-bg-color: #fe7;

  --table-row--last-dragged-bg-color: #ffb;

  --tabledrag-handle-icon-size: 17px;



  /**

  * Reduce the spacing of draggable table cells.

  */

  & td:first-child ~ td,

  & th:first-child ~ th {

    padding-inline-start: 0;

  }

}



/* The block region's title row in table. */

.region-title {

  font-weight: bold;

}



/* Empty region message row in table. */

.region-message {

  color: var(--color-gray-600);

}



  &.region-populated {

    /* If the region is populated, we shouldn't display the empty message. */

.region-message.region-populated {

    display: none;

  }

}



/**

 * Remove border-bottom from abbr element. Class is duplicated in the selector

 * to increase weight to be able to win normalize.css selectors.
@@ -38,23 +50,23 @@ body.drag-y { 
.tabledrag-changed.tabledrag-changed {

  border-bottom: none;

}



.tabledrag-changed {

  /* Don't display the abbreviation of 'add-new' table rows. */

.add-new .tabledrag-changed {

  @nest .add-new & {

    display: none;

  }



.draggable .tabledrag-changed {

  @nest .draggable & {

    position: relative;

  left: calc(var(--space-xs) * -1); /* LTR */

}

[dir="rtl"] .draggable .tabledrag-changed {

  right: calc(var(--space-xs) * -1); /* LTR */

  left: auto;

    inset-inline-start: calc(var(--space-xs) * -1);

  }

.tabledrag-cell--only-drag .tabledrag-changed {



  @nest .tabledrag-cell--only-drag & {

    width: var(--space-l);

    min-width: var(--space-l);

  }

}



/**

 * Draggable row state colors.
@@ -63,23 +75,11 @@ body.drag-y { 
.draggable.drag:focus {

  background-color: var(--table-row--dragging-bg-color);

}



.draggable.drag-previous {

  background-color: var(--table-row--last-dragged-bg-color);

}



/**

 * Reduce the spacing of draggable table cells.

 */

.draggable-table td:first-child ~ td,

.draggable-table th:first-child ~ th {

  padding-left: 0 /* LTR */;

}

[dir="rtl"] .draggable-table td:first-child ~ td,

[dir="rtl"] .draggable-table th:first-child ~ th {

  padding-right: 0;

  padding-left: var(--space-m);

}



/* Auto width for weight selects and number inputs. */

.draggable td .form-element--type-select[name$="][_weight]"], /* Multiple field */

.draggable td .term-weight, /* Taxonomy term list */
@@ -97,21 +97,24 @@ body.drag-y { 
  cursor: move;

  text-align: center;

  vertical-align: text-top;

}



.tabledrag-handle::after {

  &::after {

    display: inline-block;

    width: var(--tabledrag-handle-icon-size);

    height: var(--tabledrag-handle-icon-size);

  margin-left: calc(var(--space-m) * -1); /* LTR */

    margin-inline-start: calc(var(--space-m) * -1);

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

    content: "";

    transition: transform 0.1s ease-in-out 0s;

    background: url(../../images/icons/000f33/tabledrag-handle.svg) no-repeat center;



    @media (forced-colors: active) {

      background: linktext;

      mask-image: url(../../images/icons/000f33/tabledrag-handle.svg);

      mask-repeat: no-repeat;

      mask-position: center;

    }

  }

[dir="rtl"] .tabledrag-handle::after {

  margin-right: calc(var(--space-m) * -1);

  margin-left: 0;

}



/* Change icon and cursor if only vertical drag is allowed. */
@@ -124,23 +127,12 @@ body.drag-y { 
  background-size: 16px 16px;

}



@media (forced-colors: active) {

  .tabledrag-handle::after {

    content: "";

    background: linktext;

    mask-image: url(../../images/icons/000f33/tabledrag-handle.svg);

    mask-repeat: no-repeat;

    mask-position: center;

  }

}



.tabledrag-handle::after,

.tabledrag-disabled .tabledrag-handle.tabledrag-handle.tabledrag-handle::after {

  transform: scale(1);

}



.tabledrag-handle:hover::after,

.tabledrag-handle:focus::after,

.tabledrag-handle:is(:hover, :focus)::after,

.draggable.drag .tabledrag-handle::after {

  transform: scale(1.25);

}
@@ -148,9 +140,8 @@ body.drag-y { 
.tabledrag-handle:focus {

  outline: none !important;

  box-shadow: none !important;

}



.tabledrag-handle:focus::before {

  &::before {

    display: block;

    width: calc(var(--space-m) + (var(--space-xs) * 2)); /* Same as height. */

    height: calc(var(--space-m) + (var(--space-xs) * 2)); /* Hande svg height + its vertical padding */
@@ -160,15 +151,18 @@ body.drag-y { 
    outline: var(--outline-size) dotted transparent;

    box-shadow: 0 0 0 var(--focus-border-size) var(--color-focus);

  }

}



/* Disabled tabledrag handle. */

.tabledrag-disabled .tabledrag-handle {

.tabledrag-disabled {

  & .tabledrag-handle {

    cursor: default;

    opacity: 0.4;

}



.tabledrag-disabled .tabledrag-handle.tabledrag-handle::before {

  content: normal;

    &.tabledrag-handle::before {

      content: none;

    }

  }

}



/**
@@ -178,37 +172,33 @@ body.drag-y { 
/**

 * Increase handle size.

 */

.touchevents .tabledrag-handle::after {

  padding-top: var(--space-s);

  padding-bottom: var(--space-s);

.touchevents {

  & .tabledrag-handle::after {

    padding-block: var(--space-s);

  }



.touchevents .draggable .menu-item__link {

  padding-top: var(--space-xs);

  padding-bottom: var(--space-xs);

  & .draggable .menu-item__link {

    padding-block: var(--space-xs);

  }

}



/**

 * Wrapper of the toggle weight button (styled as a link).

 */

.tabledrag-toggle-weight-wrapper {

  text-align: right; /* LTR */

}

[dir="rtl"] .tabledrag-toggle-weight-wrapper {

  text-align: left;

}

  text-align: end;



  /* Hide nested weight toggles as they are redundant. */

.draggable-table .tabledrag-toggle-weight-wrapper {

  @nest .draggable-table & {

    display: none;

  }

}



/**

 * Keep crowded tabledrag cells vertically centered.

 */

.tabledrag-cell {

  padding-top: 0;

  padding-bottom: 0;

  padding-block: 0;

}



/**
@@ -219,62 +209,34 @@ body.drag-y { 
 */

.tabledrag-cell--only-drag {

  width: 1px; /* This forces this cell to use the smallest possible width. */

  padding-right: 0; /* LTR */

}

[dir="rtl"] .tabledrag-cell--only-drag {

  padding-right: var(--space-m);

  padding-left: 0;

  padding-inline-end: 0;

}



.tabledrag-cell-content {

  display: table;

  display: flex;

  align-items: center;

  height: 100%;

}



.tabledrag-cell-content > * {

  & > * {

    display: table-cell;

    vertical-align: middle;

  }



.tabledrag-cell-content__item {

  padding-right: var(--space-xs); /* LTR */

}

[dir="rtl"] .tabledrag-cell-content__item {

  padding-right: 0;

  padding-left: var(--space-xs);

}

.tabledrag-cell-content__item:empty {

  display: none;

  & .tree {

    flex-grow: 1;

  }



.tabledrag-cell-content .indentation,

[dir="rtl"] .tabledrag-cell-content .indentation {

  float: none;

  overflow: hidden;

  height: 100%;

  & .tabledrag-handle::after {

    vertical-align: middle;

  }



.tabledrag-cell-content .tree {

  min-height: 100%;

}



/**

 * Safari (at least version 13.0) thinks that if we define a width or height for

 * and SVG, then we refer to the elements total size inside the SVG.

 * We only want to inherit the height of the parent element.

 */

/* stylelint-disable-next-line unit-allowed-list */

@media not all and (min-resolution: 0.001dpcm) {

  @supports (-webkit-appearance: none) {

    .tabledrag-cell-content .tree {

      overflow: visible;

      min-height: 0;

    }

  }

}

.tabledrag-cell-content__item {

  padding-inline-end: var(--space-xs);



.tabledrag-cell-content .tabledrag-handle::after {

  vertical-align: middle;

  &:empty {

    display: none;

  }

}



/**
@@ -282,18 +244,27 @@ body.drag-y { 
 */

.indentation {

  position: relative;

  left: calc(var(--space-xs) * -0.5); /* LTR */

  inset-inline-start: calc(var(--space-xs) * -0.5);

  float: left; /* LTR */

  width: calc(25rem / 16); /* 25px */

  height: calc(25rem / 16); /* 25px */

  width: 25px;

  height: 25px;

  background: none !important;

  line-height: 0;



  @nest .tabledrag-cell-content & {

    /* Fixes Safari bug (16.1 at least) where table rows are overly large when

      using indentation (e.g. re-ordering menu items. */

    display: inline-flex;

    float: none;

    overflow: hidden;

    flex-direction: column;

    height: 100%;

  }

[dir="rtl"] .indentation {

  right: calc(var(--space-xs) * -0.5);

  left: auto;



  @nest [dir="rtl"] & {

    float: right;

  }

}



/**

 * Tree is the visual representation for the simultaneously moved draggable
@@ -303,8 +274,8 @@ body.drag-y { 
 * element.

 */

.tree {

  width: calc(25rem / 16); /* 25px */

  height: calc(25rem / 16); /* 25px */

  width: 25px;

  height: 25px;

}



.tree__item {
@@ -312,41 +283,55 @@ body.drag-y { 
}



/* LTR tree child. */

.tree-child path:not(.tree__item-child-ltr) {

.tree-child path {

  &:not(.tree__item-child-ltr) {

    display: none;

  }

.tree-child path.tree__item-child-ltr {



  &.tree__item-child-ltr {

    display: block;

  }

}



/* RTL tree child. */

[dir="rtl"] .tree-child path:not(.tree__item-child-rtl) {

[dir="rtl"] {

  & .tree-child path {

    &:not(.tree__item-child-rtl) {

      display: none;

    }

[dir="rtl"] .tree-child path.tree__item-child-rtl {

    &.tree__item-child-rtl {

      display: block;

    }

  }



/* Last LTR tree child. */

.tree-child-last path:not(.tree__item-child-last-ltr) {

  /* Last RTL tree child. */

  & .tree-child-last path {

    &:not(.tree__item-child-last-rtl) {

      display: none;

    }

.tree-child-last path.tree__item-child-last-ltr {

    &.tree__item-child-last-rtl {

      display: block;

    }

  }

}



/* Last RTL tree child. */

[dir="rtl"] .tree-child-last path:not(.tree__item-child-last-rtl) {

/* Last LTR tree child. */

.tree-child-last path {

  &:not(.tree__item-child-last-ltr) {

    display: none;

  }

[dir="rtl"] .tree-child-last path.tree__item-child-last-rtl {

  &.tree__item-child-last-ltr {

    display: block;

  }

}



/* Horizontal line. */

.tree-child-horizontal path:not(.tree__item-horizontal) {

.tree-child-horizontal path {

  &:not(.tree__item-horizontal) {

    display: none;

  }

.tree-child-horizontal path.tree__item-horizontal {



  &.tree__item-horizontal {

    display: block;

  }

}