tabledrag.pcss.css

Same filename in this branch
  1. 10 core/themes/olivero/css/components/tabledrag.pcss.css
  2. 10 core/themes/claro/css/components/tabledrag.pcss.css
Same filename in other branches
  1. 9 core/themes/olivero/css/components/tabledrag.pcss.css
  2. 9 core/themes/claro/css/components/tabledrag.pcss.css
  3. 8.9.x core/themes/claro/css/components/tabledrag.pcss.css
  4. 11.x core/misc/dialog/off-canvas/css/tabledrag.pcss.css
  5. 11.x core/themes/olivero/css/components/tabledrag.pcss.css
  6. 11.x core/themes/claro/css/components/tabledrag.pcss.css

Table drag styling for off-canvas dialog.

@internal

See also

tabledrag.js

File

core/misc/dialog/off-canvas/css/tabledrag.pcss.css

View source
  1. /**
  2. * @file
  3. * Table drag styling for off-canvas dialog.
  4. *
  5. * @see tabledrag.js
  6. *
  7. * @internal
  8. */
  9. #drupal-off-canvas-wrapper {
  10. /* The draggable element. */
  11. & .draggable {
  12. &:hover,
  13. &:focus-within {
  14. background-color: var(--off-canvas-background-color-light);
  15. }
  16. /* Appears when the row is being dragged. */
  17. &.drag {
  18. cursor: move;
  19. background-color: var(--off-canvas-background-color-dark);
  20. }
  21. }
  22. & td {
  23. transition: background-color 0.3s ease;
  24. /* We have to horizontally align all descendent nodes including text nodes
  25. * that do not have wrapper elements. Since we use flex to do this, we need
  26. * try to keep it vertically centered, so we have to give it a minimum height
  27. * to match the rest of the table cells. */
  28. &:first-child {
  29. display: flex;
  30. align-items: center;
  31. min-height: 50px;
  32. gap: var(--off-canvas-table-cell-padding);
  33. }
  34. & abbr {
  35. margin-inline: 0 5px;
  36. text-decoration: none;
  37. }
  38. }
  39. & .tabledrag-handle {
  40. flex-shrink: 0;
  41. &::after {
  42. display: block;
  43. width: 20px;
  44. height: 20px;
  45. margin: 0;
  46. padding: 0;
  47. content: "";
  48. cursor: move;
  49. background-color: transparent;
  50. background-image: url(../../../icons/bebebe/move.svg);
  51. background-repeat: no-repeat;
  52. background-position: center;
  53. @media (forced-colors: active) {
  54. background: linktext;
  55. mask-image: url(../../../icons/bebebe/move.svg);
  56. mask-repeat: no-repeat;
  57. mask-position: center;
  58. }
  59. }
  60. }
  61. /* Make the "row weight" as small as possible. */
  62. & .tabledrag-hide select {
  63. all: revert;
  64. }
  65. & .tabledrag-changed-warning {
  66. margin-bottom: var(--off-canvas-vertical-spacing-unit);
  67. font-size: 14px;
  68. }
  69. & .tabledrag-toggle-weight-wrapper {
  70. padding-top: 10px;
  71. text-align: end;
  72. }
  73. & .indentation {
  74. width: 5px;
  75. }
  76. @nest .touchevents & .draggable td {
  77. padding: 0 10px;
  78. }
  79. @nest .touchevents & .draggable .menu-item__link {
  80. display: inline-block;
  81. padding: 10px 0;
  82. }
  83. @nest .touchevents & a.tabledrag-handle {
  84. width: 40px;
  85. height: 44px;
  86. }
  87. }

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