diff --git a/core/includes/theme.inc b/core/includes/theme.inc
index 24c9d7e..1af8911 100644
--- a/core/includes/theme.inc
+++ b/core/includes/theme.inc
@@ -1045,23 +1045,6 @@ function template_preprocess_item_list(&$variables) {
}
/**
- * Returns HTML for an indentation div; used for drag and drop tables.
- *
- * @param $variables
- * An associative array containing:
- * - size: Optional. The number of indentations to create.
- *
- * @ingroup themeable
- */
-function theme_indentation($variables) {
- $output = '';
- for ($n = 0; $n < $variables['size']; $n++) {
- $output .= '
';
- }
- return $output;
-}
-
-/**
* Prepares variables for container templates.
*
* Default template: container.html.twig.
@@ -1714,7 +1697,7 @@ function drupal_common_theme() {
),
'indentation' => array(
'variables' => array('size' => 1),
- 'function' => 'theme_indentation',
+ 'template' => 'indentation',
),
// From theme.maintenance.inc.
'maintenance_page' => array(
diff --git a/core/modules/system/css/components/tabledrag.module.css b/core/modules/system/css/components/tabledrag.module.css
index 39d7fb1..f99f251 100644
--- a/core/modules/system/css/components/tabledrag.module.css
+++ b/core/modules/system/css/components/tabledrag.module.css
@@ -72,14 +72,27 @@ a.tabledrag-handle:focus .handle {
text-align: left;
}
.indentation {
- float: left; /* LTR */
- height: 1.7em;
- margin: -0.4em 0.2em -0.4em -0.4em; /* LTR */
- padding: 0.42em 0 0.42em 0.6em; /* LTR */
- width: 20px;
+ float: left;
+ width: 0em;
}
[dir="rtl"] .indentation {
float: right;
- margin: -0.4em -0.4em -0.4em 0.2em;
- padding: 0.42em 0.6em 0.42em 0;
}
+.indentation[data-indent="1"] { padding-left: 20px; }
+.indentation[data-indent="2"] { padding-left: 40px; }
+.indentation[data-indent="3"] { padding-left: 60px; }
+.indentation[data-indent="4"] { padding-left: 80px; }
+.indentation[data-indent="5"] { padding-left: 100px; }
+.indentation[data-indent="6"] { padding-left: 120px; }
+.indentation[data-indent="7"] { padding-left: 140px; }
+.indentation[data-indent="8"] { padding-left: 160px; }
+.indentation[data-indent="9"] { padding-left: 180px; }
+[dir="rtl"] .indentation[data-indent="1"] { padding-right: 20px; }
+[dir="rtl"] .indentation[data-indent="2"] { padding-right: 40px; }
+[dir="rtl"] .indentation[data-indent="3"] { padding-right: 60px; }
+[dir="rtl"] .indentation[data-indent="4"] { padding-right: 80px; }
+[dir="rtl"] .indentation[data-indent="5"] { padding-right: 100px; }
+[dir="rtl"] .indentation[data-indent="6"] { padding-right: 120px; }
+[dir="rtl"] .indentation[data-indent="7"] { padding-right: 140px; }
+[dir="rtl"] .indentation[data-indent="8"] { padding-right: 160px; }
+[dir="rtl"] .indentation[data-indent="9"] { padding-right: 180px; }
diff --git a/core/modules/system/templates/indentation.html.twig b/core/modules/system/templates/indentation.html.twig
index e07e3c1..d102929 100644
--- a/core/modules/system/templates/indentation.html.twig
+++ b/core/modules/system/templates/indentation.html.twig
@@ -3,18 +3,12 @@
* @file
* Default theme implementation for a set of indentation divs.
*
- * These tags are used for drag and drop tables.
+ * This
tag is used for drag and drop tables.
*
* Available variables:
- * - size: Optional. The number of indentations to create.
+ * - size: Optional. The width of indentation.
*
* @ingroup themeable
*/
#}
-
-{% for i in 1..size if size > 0 %}
{% endfor %}
+