Skip to content
Snippets Groups Projects
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
No related branches found
No related tags found
20 merge requests!11131[10.4.x-only-DO-NOT-MERGE]: Issue ##2842525 Ajax attached to Views exposed filter form does not trigger callbacks,!9470[10.3.x-only-DO-NOT-MERGE]: #3331771 Fix file_get_contents(): Passing null to parameter,!8736Update the Documention As per the Function uses.,!8513Issue #3453786: DefaultSelection should document why values for target_bundles NULL and [] behave as they do,!3878Removed unused condition head title for views,!3818Issue #2140179: $entity->original gets stale between updates,!3742Issue #3328429: Create item list field formatter for displaying ordered and unordered lists,!3731Claro: role=button on status report items,!3154Fixes #2987987 - CSRF token validation broken on routes with optional parameters.,!3133core/modules/system/css/components/hidden.module.css,!2964Issue #2865710 : Dependencies from only one instance of a widget are used in display modes,!2812Issue #3312049: [Followup] Fix Drupal.Commenting.FunctionComment.MissingReturnType returns for NULL,!2378Issue #2875033: Optimize joins and table selection in SQL entity query implementation,!2062Issue #3246454: Add weekly granularity to views date sort,!10223132456: Fix issue where views instances are emptied before an ajax request is complete,!877Issue #2708101: Default value for link text is not saved,!617Issue #3043725: Provide a Entity Handler for user cancelation,!579Issue #2230909: Simple decimals fail to pass validation,!560Move callback classRemove outside of the loop,!555Issue #3202493
Pipeline #232275 canceled
Stage: 🏗️ Build
Stage: 🪄 Lint
Stage: 🗜️ Test
Pipeline: drupal

#232276

    Hide whitespace changes
    Inline Side-by-side
    core/themes/claro/css/base/variables.css
    + 0
    − 4
    View file @ f1769fae
    ......@@ -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
    View file @ f1769fae
    ......@@ -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
    View file @ f1769fae
    ......@@ -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,15 +205,11 @@ body.drag-y {
    */
    .tabledrag-toggle-weight-wrapper {
    text-align: right; /* LTR */
    }
    text-align: end;
    [dir="rtl"] .tabledrag-toggle-weight-wrapper {
    text-align: left;
    /* Hide nested weight toggles as they are redundant. */
    }
    /* 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 */
    .tabledrag-cell-content .tabledrag-handle::after {
    vertical-align: middle;
    }
    @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;
    .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
    View file @ f1769fae
    ......@@ -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. */
    display: none;
    }
    }
    /* 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,22 +50,22 @@ body.drag-y {
    .tabledrag-changed.tabledrag-changed {
    border-bottom: none;
    }
    /* Don't display the abbreviation of 'add-new' table rows. */
    .add-new .tabledrag-changed {
    display: none;
    }
    .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;
    }
    .tabledrag-cell--only-drag .tabledrag-changed {
    width: var(--space-l);
    min-width: var(--space-l);
    .tabledrag-changed {
    /* Don't display the abbreviation of 'add-new' table rows. */
    @nest .add-new & {
    display: none;
    }
    @nest .draggable & {
    position: relative;
    inset-inline-start: calc(var(--space-xs) * -1);
    }
    @nest .tabledrag-cell--only-drag & {
    width: var(--space-l);
    min-width: var(--space-l);
    }
    }
    /**
    ......@@ -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 {
    display: inline-block;
    width: var(--tabledrag-handle-icon-size);
    height: var(--tabledrag-handle-icon-size);
    margin-left: calc(var(--space-m) * -1); /* LTR */
    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;
    }
    [dir="rtl"] .tabledrag-handle::after {
    margin-right: calc(var(--space-m) * -1);
    margin-left: 0;
    &::after {
    display: inline-block;
    width: var(--tabledrag-handle-icon-size);
    height: var(--tabledrag-handle-icon-size);
    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;
    }
    }
    }
    /* 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,27 +140,29 @@ body.drag-y {
    .tabledrag-handle:focus {
    outline: none !important;
    box-shadow: none !important;
    }
    .tabledrag-handle:focus::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 */
    margin: 0 calc(var(--space-xs) * -1) calc((var(--space-m) + (var(--space-xs) * 2)) * -1); /* Bottom: handle height as negative value. */
    content: "";
    border-radius: var(--base-border-radius);
    outline: var(--outline-size) dotted transparent;
    box-shadow: 0 0 0 var(--focus-border-size) var(--color-focus);
    &::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 */
    margin: 0 calc(var(--space-xs) * -1) calc((var(--space-m) + (var(--space-xs) * 2)) * -1); /* Bottom: handle height as negative value. */
    content: "";
    border-radius: var(--base-border-radius);
    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 {
    cursor: default;
    opacity: 0.4;
    }
    .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 {
    display: none;
    /* Hide nested weight toggles as they are redundant. */
    @nest .draggable-table & {
    display: none;
    }
    }
    /**
    * Keep crowded tabledrag cells vertically centered.
    */
    .tabledrag-cell {
    padding-top: 0;
    padding-bottom: 0;
    padding-block: 0;
    }
    /**
    ......@@ -219,80 +209,61 @@ 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;
    }
    & > * {
    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%;
    }
    .tabledrag-cell-content__item {
    padding-inline-end: var(--space-xs);
    /**
    * 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;
    }
    &:empty {
    display: none;
    }
    }
    .tabledrag-cell-content .tabledrag-handle::after {
    vertical-align: middle;
    }
    /**
    * Indentation.
    */
    .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;
    }
    [dir="rtl"] .indentation {
    right: calc(var(--space-xs) * -0.5);
    left: auto;
    float: right;
    @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%;
    }
    @nest [dir="rtl"] & {
    float: right;
    }
    }
    /**
    ......@@ -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) {
    display: none;
    }
    .tree-child path.tree__item-child-ltr {
    display: block;
    .tree-child path {
    &:not(.tree__item-child-ltr) {
    display: none;
    }
    &.tree__item-child-ltr {
    display: block;
    }
    }
    /* RTL tree child. */
    [dir="rtl"] .tree-child path:not(.tree__item-child-rtl) {
    display: none;
    }
    [dir="rtl"] .tree-child path.tree__item-child-rtl {
    display: block;
    }
    [dir="rtl"] {
    & .tree-child path {
    &:not(.tree__item-child-rtl) {
    display: none;
    }
    &.tree__item-child-rtl {
    display: block;
    }
    }
    /* Last LTR tree child. */
    .tree-child-last path:not(.tree__item-child-last-ltr) {
    display: none;
    }
    .tree-child-last path.tree__item-child-last-ltr {
    display: block;
    /* Last RTL tree child. */
    & .tree-child-last path {
    &:not(.tree__item-child-last-rtl) {
    display: none;
    }
    &.tree__item-child-last-rtl {
    display: block;
    }
    }
    }
    /* Last RTL tree child. */
    [dir="rtl"] .tree-child-last path:not(.tree__item-child-last-rtl) {
    display: none;
    }
    [dir="rtl"] .tree-child-last path.tree__item-child-last-rtl {
    display: block;
    /* Last LTR tree child. */
    .tree-child-last path {
    &:not(.tree__item-child-last-ltr) {
    display: none;
    }
    &.tree__item-child-last-ltr {
    display: block;
    }
    }
    /* Horizontal line. */
    .tree-child-horizontal path:not(.tree__item-horizontal) {
    display: none;
    }
    .tree-child-horizontal path.tree__item-horizontal {
    display: block;
    .tree-child-horizontal path {
    &:not(.tree__item-horizontal) {
    display: none;
    }
    &.tree__item-horizontal {
    display: block;
    }
    }
    0% or .
    You are about to add 0 people to the discussion. Proceed with caution.
    Finish editing this message first!
    Please register or to comment