tabledrag.module.css

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

Table drag behavior.

See also

tabledrag.js

File

core/modules/system/css/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: #787878;
  44. -webkit-mask: url(../../../../misc/icons/787878/move.svg) no-repeat 6px 7px;
  45. mask: url(../../../../misc/icons/787878/move.svg) no-repeat 6px 7px;
  46. }
  47. a.tabledrag-handle:hover .handle,
  48. a.tabledrag-handle:focus .handle {
  49. background: #000;
  50. }
  51. @media (forced-colors: active) {
  52. a.tabledrag-handle .handle,
  53. a.tabledrag-handle:hover .handle,
  54. a.tabledrag-handle:focus .handle {
  55. background: canvastext;
  56. }
  57. }
  58. .touchevents .draggable td {
  59. padding: 0 10px;
  60. }
  61. .touchevents .draggable .menu-item__link {
  62. display: inline-block;
  63. padding: 10px 0;
  64. }
  65. .touchevents a.tabledrag-handle {
  66. width: 40px;
  67. height: 44px;
  68. }
  69. .touchevents a.tabledrag-handle .handle {
  70. height: 21px;
  71. background-position: 40% 19px; /* LTR */
  72. }
  73. [dir="rtl"] .touch a.tabledrag-handle .handle {
  74. background-position: right 40% top 19px;
  75. }
  76. .touchevents .draggable.drag a.tabledrag-handle .handle {
  77. background-position: 50% -32px;
  78. }
  79. .tabledrag-toggle-weight-wrapper {
  80. text-align: right; /* LTR */
  81. }
  82. [dir="rtl"] .tabledrag-toggle-weight-wrapper {
  83. text-align: left;
  84. }
  85. .indentation {
  86. float: left; /* LTR */
  87. width: 20px;
  88. height: 1.7em;
  89. margin: -0.4em 0.2em -0.4em -0.4em; /* LTR */
  90. padding: 0.42em 0 0.42em 0.6em; /* LTR */
  91. }
  92. [dir="rtl"] .indentation {
  93. float: right;
  94. margin: -0.4em -0.4em -0.4em 0.2em;
  95. padding: 0.42em 0.6em 0.42em 0;
  96. }

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