tabledrag.module.css

Same filename in this branch
  1. 11.x core/themes/stable9/css/system/components/tabledrag.module.css
  2. 11.x core/modules/system/css/components/tabledrag.module.css
  3. 11.x core/themes/stable9/css/core/components/tabledrag.module.css
Same filename in other branches
  1. 9 core/themes/stable9/css/system/components/tabledrag.module.css
  2. 9 core/themes/stable/css/system/components/tabledrag.module.css
  3. 9 core/modules/system/css/components/tabledrag.module.css
  4. 8.9.x core/themes/stable/css/system/components/tabledrag.module.css
  5. 8.9.x core/modules/system/css/components/tabledrag.module.css
  6. 10 core/themes/stable9/css/system/components/tabledrag.module.css
  7. 10 core/modules/system/css/components/tabledrag.module.css
  8. 10 core/misc/components/tabledrag.module.css
  9. 10 core/themes/stable9/css/core/components/tabledrag.module.css

Table drag behavior.

See also

tabledrag.js

File

core/misc/components/tabledrag.module.css

View source
  1. /**
  2. * @file
  3. * Table drag behavior.
  4. *
  5. * @see tabledrag.js
  6. */
  7. body.drag {
  8. cursor: move;
  9. }
  10. tr.region-title {
  11. font-weight: bold;
  12. }
  13. tr.region-message {
  14. color: #999;
  15. }
  16. tr.region-populated {
  17. display: none;
  18. }
  19. tr.add-new .tabledrag-changed {
  20. display: none;
  21. }
  22. .draggable a.tabledrag-handle {
  23. float: left; /* LTR */
  24. overflow: hidden;
  25. height: 1.7em;
  26. margin-left: -1em; /* LTR */
  27. cursor: move;
  28. text-decoration: none;
  29. }
  30. [dir="rtl"] .draggable a.tabledrag-handle {
  31. float: right;
  32. margin-right: -1em;
  33. margin-left: 0;
  34. }
  35. a.tabledrag-handle:hover {
  36. text-decoration: none;
  37. }
  38. a.tabledrag-handle .handle {
  39. width: 14px;
  40. height: 14px;
  41. margin: -0.4em 0.5em 0;
  42. padding: 0.42em 0.5em;
  43. background: url(../icons/787878/move.svg) no-repeat 6px 7px;
  44. }
  45. a.tabledrag-handle:hover .handle,
  46. a.tabledrag-handle:focus .handle {
  47. background-image: url(../icons/000000/move.svg);
  48. }
  49. @media (forced-colors: active) {
  50. a.tabledrag-handle .handle,
  51. a.tabledrag-handle:hover .handle,
  52. a.tabledrag-handle:focus .handle {
  53. background: linktext;
  54. -webkit-mask: url(../icons/787878/move.svg) no-repeat 6px 7px;
  55. mask: url(../icons/787878/move.svg) no-repeat 6px 7px;
  56. }
  57. a.tabledrag-handle:focus {
  58. outline: solid 1px transparent;
  59. }
  60. }
  61. .touchevents .draggable td {
  62. padding: 0 10px;
  63. }
  64. .touchevents .draggable .menu-item__link {
  65. display: inline-block;
  66. padding: 10px 0;
  67. }
  68. .touchevents a.tabledrag-handle {
  69. width: 40px;
  70. height: 44px;
  71. }
  72. .touchevents a.tabledrag-handle .handle {
  73. height: 21px;
  74. background-position: 40% 19px; /* LTR */
  75. }
  76. [dir="rtl"] .touch a.tabledrag-handle .handle {
  77. background-position: right 40% top 19px;
  78. }
  79. .touchevents .draggable.drag a.tabledrag-handle .handle {
  80. background-position: 50% -32px;
  81. }
  82. .tabledrag-toggle-weight-wrapper {
  83. text-align: right; /* LTR */
  84. }
  85. [dir="rtl"] .tabledrag-toggle-weight-wrapper {
  86. text-align: left;
  87. }
  88. .indentation {
  89. float: left; /* LTR */
  90. width: 20px;
  91. height: 1.7em;
  92. margin: -0.4em 0.2em -0.4em -0.4em; /* LTR */
  93. padding: 0.42em 0 0.42em 0.6em; /* LTR */
  94. }
  95. [dir="rtl"] .indentation {
  96. float: right;
  97. margin: -0.4em -0.4em -0.4em 0.2em;
  98. padding: 0.42em 0.6em 0.42em 0;
  99. }

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