From 69535d87ac38cbe210ed40f6c2b9952b67b8ce5f Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sat, 21 Feb 2026 14:08:30 +0100
Subject: [PATCH] feat: Change table styles

- Add styles from module to tables file
- Remove tables module
- Assign styles as depended classes instead of repeating element names
- Add draggable style for table
---
 _basic.scss                        |   1 -
 elements/_tables.scss              | 132 ++++++++++++++++++++++++-----
 global/_common.scss                |   8 +-
 modules/tables/_tables_module.scss |  77 -----------------
 4 files changed, 119 insertions(+), 99 deletions(-)
 delete mode 100644 modules/tables/_tables_module.scss

diff --git a/_basic.scss b/_basic.scss
index 32a35e8..ff08766 100644
--- a/_basic.scss
+++ b/_basic.scss
@@ -37,5 +37,4 @@
 // in dependency to other styles
 // -----------------------------------------------------------------------------
 @forward "modules/breakpoint/breakpoint_module";
-@forward "modules/tables/tables_module";
 @forward "modules/maintenance/maintenance_module";
diff --git a/elements/_tables.scss b/elements/_tables.scss
index ace7378..fd160ad 100644
--- a/elements/_tables.scss
+++ b/elements/_tables.scss
@@ -4,6 +4,7 @@
 @use "../global/common";
 @use "../global/typography";
 @use "../elements/grouping";
+@use "../functions/color" as *;
 
 // Tabular data
 // -----------------------------------------------------------------------------
@@ -25,37 +26,77 @@ table {
 	margin: config.$margin_double;
 	border: config.$border_basic;
 	border-collapse: collapse;
-}
 
-.table_blank {
-	border: config.$width_border_basic solid transparent;
+	&.blank {
+		border: config.$width_border_basic solid transparent;
 
-	th, td {
+		th, td {
+			border: config.$width_border_basic solid transparent;
+		}
+	}
+
+	&.free {
 		border: config.$width_border_basic solid transparent;
 	}
-}
 
-.table_free {
-	border: config.$width_border_basic solid transparent;
-}
+	&.stripe {
+		td {
+			border-top: 0;
+			border-bottom: 0;
+		}
 
-.table_stripe {
-	td {
-		border-top: 0;
-		border-bottom: 0;
+		tr:nth-child(even) td {
+			background-color: color.scale(config.$color_back_basic, $lightness: config.$color_diff_tiny);
+		}
 	}
 
-	tr:nth-child(even) td {
-		background-color: color.scale(config.$color_back_basic, $lightness: config.$color_diff_tiny);
+	&.fix {
+		table-layout: fixed;
 	}
-}
 
-.table_fix {
-	table-layout: fixed;
-}
+	&.table_file_simple {
+		@extend .width_full;
+	}
 
-.table_file_simple {
-	@extend .width_full;
+	&.draggable tbody tr {
+		transition: opacity 0.2s;
+
+		&.dragging {
+			opacity: 0.5;
+		}
+	}
+
+	&.link {
+		width: 100%;
+		border: 0;
+		table-layout: auto;
+
+		tbody {
+			border-bottom: config.$border_basic;
+
+			&:hover {
+				background-color: config.$color_bright;
+			}
+
+			td:nth-child(2) {
+				width: 100%;
+			}
+		}
+
+		th,
+		td {
+			border: 0;
+		}
+
+		thead th,
+		tbody tr:nth-child(1) td {
+			&:last-child {
+				@extend .rigid;
+				width: 1%;
+				text-align: center;
+			}
+		}
+	}
 }
 
 // Caption
@@ -116,6 +157,41 @@ th, td {
 	&.rigid {
 		white-space: nowrap;
 	}
+
+	&.icon {
+		width: 48px;
+		text-align: center;
+
+		img {
+			vertical-align: text-top;
+		}
+	}
+
+	&.link {
+		padding-right: config.$space_basic;
+		padding-left: config.$space_basic;
+
+		&:hover {
+			background-color: basic_color(foxtrot);
+
+			span {
+				display: none;
+			}
+
+			a {
+				display: block;
+				color: config.$color_highlight_basic;
+			}
+		}
+
+		span {
+			display: block;
+		}
+
+		a {
+			display: none;
+		}
+	}
 }
 
 th {
@@ -139,6 +215,22 @@ td {
 		text-overflow: ellipsis;
 		white-space: nowrap;
 	}
+
+	&.text {
+		padding-right: config.$space_basic;
+		padding-left: config.$space_basic;
+		text-align: left;
+
+		div {
+			width: 100%;
+		}
+
+		.shorten {
+			@extend %short;
+			max-height: 44px;
+		}
+	}
+
 }
 
 td:last-child {
diff --git a/global/_common.scss b/global/_common.scss
index 7c5a559..8199c44 100644
--- a/global/_common.scss
+++ b/global/_common.scss
@@ -337,4 +337,10 @@
 
 // Focus
 // -----------------------------------------------------------------------------
-@include overrideUserAgent(config.$no_agent_focus, config.$io_focus_list);
\ No newline at end of file
+@include overrideUserAgent(config.$no_agent_focus, config.$io_focus_list);
+
+// Data attributes
+// -----------------------------------------------------------------------------
+[data-action="drag"] {
+	cursor: move;
+}
diff --git a/modules/tables/_tables_module.scss b/modules/tables/_tables_module.scss
deleted file mode 100644
index 74e1dc6..0000000
--- a/modules/tables/_tables_module.scss
+++ /dev/null
@@ -1,77 +0,0 @@
-@use "../../global/config";
-@use "../../global/typography";
-@use "../../functions/color" as *;
-
-.table_link {
-	width: 100%;
-	border: 0;
-	table-layout: auto;
-
-	tbody {
-		border-bottom: config.$border_basic;
-
-		&:hover {
-			background-color: config.$color_bright;
-		}
-	}
-
-	th,
-	td {
-		border: 0;
-	}
-
-	.cell_icon {
-		width: 48px;
-		text-align: center;
-
-		img {
-			vertical-align: text-top;
-		}
-	}
-
-	.cell_link {
-		padding-right: config.$space_basic;
-		padding-left: config.$space_basic;
-
-		&:hover {
-			background-color: basic_color(foxtrot);
-
-			a:first-child {
-				display: none;
-			}
-
-			a:last-child {
-				display: block;
-				color: config.$color_highlight_basic;
-			}
-		}
-
-		a {
-			display: block;
-		}
-
-		a:last-child {
-			display: none;
-		}
-	}
-
-	th:last-child,
-	.cell_date {
-		width: 16%;
-		text-align: center;
-	}
-
-	.cell_text {
-		padding-right: config.$space_basic;
-		padding-left: config.$space_basic;
-
-		div {
-			width: 100%;
-		}
-
-		.shorten {
-			@extend %short;
-			max-height: 44px;
-		}
-	}
-}
\ No newline at end of file