You are here

Home » API reference » Drupal 10

tabledrag.css in Drupal 10

Same filename in this branch
  1. 10 core/themes/starterkit_theme/css/components/tabledrag.css
  2. 10 core/themes/classy/css/components/tabledrag.css
  3. 10 core/themes/claro/css/components/tabledrag.css
  4. 10 core/themes/olivero/css/components/tabledrag.css
  5. 10 core/themes/seven/css/classy/components/tabledrag.css
  6. 10 core/themes/bartik/css/classy/components/tabledrag.css
  7. 10 core/profiles/demo_umami/themes/umami/css/classy/components/tabledrag.css
Same filename and directory in other branches
  1. 8 core/themes/claro/css/components/tabledrag.css
  2. 9 core/themes/claro/css/components/tabledrag.css

Replacement styles for table drag.

Replaces core's tabledrag.module.css.

See also

tabledrag.js

File

core/themes/claro/css/components/tabledrag.css
View source 
  1. /*

  2.  * DO NOT EDIT THIS FILE.

  3.  * See the following change record for more information,

  4.  * https://www.drupal.org/node/3084859

  5.  * @preserve

  6.  */

  7. 

  8. /**

  9.  * @file

  10.  * Replacement styles for table drag.

  11.  *

  12.  * Replaces core's tabledrag.module.css.

  13.  *

  14.  * @see tabledrag.js

  15.  */

  16. 

  17. :root {

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

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

  20. }

  21. 

  22. body.drag {

  23.   cursor: move;

  24. }

  25. 

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

  27. 

  28. .region-title {

  29.   font-weight: bold;

  30. }

  31. 

  32. /* Empty region message row in table. */

  33. 

  34. .region-message {

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

  36. }

  37. 

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

  39. 

  40. .region-message.region-populated {

  41.   display: none;

  42. }

  43. 

  44. /**

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

  46.  * to increase weight to be able to win normalize.css selectors.

  47.  */

  48. 

  49. .tabledrag-changed.tabledrag-changed {

  50.   border-bottom: none;

  51. }

  52. 

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

  54. 

  55. .add-new .tabledrag-changed {

  56.   display: none;

  57. }

  58. 

  59. .draggable .tabledrag-changed {

  60.   position: relative;

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

  62. }

  63. 

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

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

  66.   left: auto;

  67. }

  68. 

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

  70.   width: var(--space-l);

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

  72. }

  73. 

  74. /**

  75.  * Draggable row state colors.

  76.  */

  77. 

  78. .draggable.drag,

  79. .draggable.drag:focus {

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

  81. }

  82. 

  83. .draggable.drag-previous {

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

  85. }

  86. 

  87. /**

  88.  * Reduce the spacing of draggable table cells.

  89.  */

  90. 

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

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

  93.   padding-left: 0 /* LTR */;

  94. }

  95. 

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

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

  98.   padding-right: 0;

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

  100. }

  101. 

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

  103. 

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

  105. .draggable td .term-weight, /* Taxonomy term list */

  106. .draggable td .field-weight /* Field UI table */ {

  107.   width: auto;

  108. }

  109. 

  110. /**

  111.  * Handle styles.

  112.  */

  113. 

  114. .tabledrag-handle {

  115.   position: relative;

  116.   z-index: 1;

  117.   overflow: visible;

  118.   cursor: move;

  119.   text-align: center;

  120.   vertical-align: text-top;

  121. }

  122. 

  123. .tabledrag-handle::after {

  124.   display: inline-block;

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

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

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

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

  129.   content: "";

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

  131.   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;

  132. }

  133. 

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

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

  136.   margin-left: 0;

  137. }

  138. 

  139. @media screen and (-ms-high-contrast: active) {

  140.   .tabledrag-handle::after {

  141.     content: 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='currentColor' 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");

  142.     background: none;

  143.   }

  144. }

  145. 

  146. @media (forced-colors: active) {

  147.   .tabledrag-handle::after {

  148.     content: "";

  149.     background: linktext;

  150.     -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");

  151.     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");

  152.     -webkit-mask-repeat: no-repeat;

  153.     mask-repeat: no-repeat;

  154.     -webkit-mask-position: center;

  155.     mask-position: center;

  156.   }

  157. }

  158. 

  159. .tabledrag-handle::after,

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

  161.   transform: scale(1);

  162. }

  163. 

  164. .tabledrag-handle:hover::after,

  165. .tabledrag-handle:focus::after,

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

  167.   transform: scale(1.25);

  168. }

  169. 

  170. .tabledrag-handle:focus {

  171.   outline: none !important;

  172.   box-shadow: none !important;

  173. }

  174. 

  175. .tabledrag-handle:focus::before {

  176.   display: block;

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

  178.   height: calc(var(--space-m) + (var(--space-xs) * 2)); /* Hande svg height + its vertical padding */

  179.   margin: 0 calc(var(--space-xs) * -1) calc((var(--space-m) + (var(--space-xs) * 2)) * -1); /* Bottom: handle height as negative value. */

  180.   content: "";

  181.   border-radius: var(--base-border-radius);

  182.   outline: var(--outline-size) dotted transparent;

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

  184. }

  185. 

  186. /* Disabled tabledrag handle. */

  187. 

  188. .tabledrag-disabled .tabledrag-handle {

  189.   cursor: default;

  190.   opacity: 0.4;

  191. }

  192. 

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

  194.   content: normal;

  195. }

  196. 

  197. /**

  198.  * Enhancements for touch-capable screens.

  199.  */

  200. 

  201. /**

  202.  * Increase handle size.

  203.  */

  204. 

  205. .touchevents .tabledrag-handle::after {

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

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

  208. }

  209. 

  210. .touchevents .draggable .menu-item__link {

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

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

  213. }

  214. 

  215. /**

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

  217.  */

  218. 

  219. .tabledrag-toggle-weight-wrapper {

  220.   text-align: right; /* LTR */

  221. }

  222. 

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

  224.   text-align: left;

  225. }

  226. 

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

  228. 

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

  230.   display: none;

  231. }

  232. 

  233. /**

  234.  * Keep crowded tabledrag cells vertically centered.

  235.  */

  236. 

  237. .tabledrag-cell {

  238.   padding-top: 0;

  239.   padding-bottom: 0;

  240. }

  241. 

  242. /**

  243.  * If the first table cell is empty (like in a multiple field widget table),

  244.  * we can save some space for the following cells.

  245.  * If it isn't empty (Field UI table, taxonomy term overview page), this CSS

  246.  * class won't be added.

  247.  */

  248. 

  249. .tabledrag-cell--only-drag {

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

  251.   padding-right: 0; /* LTR */

  252. }

  253. 

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

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

  256.   padding-left: 0;

  257. }

  258. 

  259. .tabledrag-cell-content {

  260.   display: table;

  261.   height: 100%;

  262. }

  263. 

  264. .tabledrag-cell-content > * {

  265.   display: table-cell;

  266.   vertical-align: middle;

  267. }

  268. 

  269. .tabledrag-cell-content__item {

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

  271. }

  272. 

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

  274.   padding-right: 0;

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

  276. }

  277. 

  278. .tabledrag-cell-content__item:empty {

  279.   display: none;

  280. }

  281. 

  282. .tabledrag-cell-content .indentation,

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

  284.   float: none;

  285.   overflow: hidden;

  286.   height: 100%;

  287. }

  288. 

  289. .tabledrag-cell-content .tree {

  290.   min-height: 100%; /* Using simply 'height: 100%' would make IE11 rendering ugly. */

  291. }

  292. 

  293. /**

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

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

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

  297.  */

  298. 

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

  300. 

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

  302.   @supports (-webkit-appearance: none) {

  303.     .tabledrag-cell-content .tree {

  304.       overflow: visible;

  305.       min-height: 0;

  306.     }

  307.   }

  308. }

  309. 

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

  311.   vertical-align: middle;

  312. }

  313. 

  314. /**

  315.  * Indentation.

  316.  */

  317. 

  318. .indentation {

  319.   position: relative;

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

  321.   float: left; /* LTR */

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

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

  324.   background: none !important;

  325.   line-height: 0;

  326. }

  327. 

  328. [dir="rtl"] .indentation {

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

  330.   left: auto;

  331.   float: right;

  332. }

  333. 

  334. /**

  335.  * Tree is the visual representation for the simultaneously moved draggable

  336.  * rows.

  337.  *

  338.  * These rules are styling the inline SVG that is placed inside the .indentation

  339.  * element.

  340.  */

  341. 

  342. .tree {

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

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

  345. }

  346. 

  347. .tree__item {

  348.   display: none;

  349. }

  350. 

  351. /* LTR tree child. */

  352. 

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

  354.   display: none;

  355. }

  356. 

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

  358.   display: block;

  359. }

  360. 

  361. /* RTL tree child. */

  362. 

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

  364.   display: none;

  365. }

  366. 

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

  368.   display: block;

  369. }

  370. 

  371. /* Last LTR tree child. */

  372. 

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

  374.   display: none;

  375. }

  376. 

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

  378.   display: block;

  379. }

  380. 

  381. /* Last RTL tree child. */

  382. 

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

  384.   display: none;

  385. }

  386. 

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

  388.   display: block;

  389. }

  390. 

  391. /* Horizontal line. */

  392. 

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

  394.   display: none;

  395. }

  396. 

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

  398.   display: block;

  399. }