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

@@ -37,5 +37,4 @@
 // in dependency to other styles
 // -----------------------------------------------------------------------------
 @forward "modules/breakpoint/breakpoint_module";
-@forward "modules/tables/tables_module";
 @forward "modules/maintenance/maintenance_module";

elements/_tables.scss

@@ -4,6 +4,7 @@
 @use "../global/common";
 @use "../global/typography";
 @use "../elements/grouping";
+@use "../functions/color" as *;
 
 // Tabular data
 // -----------------------------------------------------------------------------
@@ -25,21 +26,20 @@ table {
 	margin: config.$margin_double;
 	border: config.$border_basic;
 	border-collapse: collapse;
-}
 
-.table_blank {
+	&.blank {
 		border: config.$width_border_basic solid transparent;
 
 		th, td {
 			border: config.$width_border_basic solid transparent;
 		}
-}
+	}
 
-.table_free {
+	&.free {
 		border: config.$width_border_basic solid transparent;
-}
+	}
 
-.table_stripe {
+	&.stripe {
 		td {
 			border-top: 0;
 			border-bottom: 0;
@@ -48,14 +48,55 @@ table {
 		tr:nth-child(even) td {
 			background-color: color.scale(config.$color_back_basic, $lightness: config.$color_diff_tiny);
 		}
-}
+	}
 
-.table_fix {
+	&.fix {
 		table-layout: fixed;
-}
+	}
 
-.table_file_simple {
+	&.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 {

global/_common.scss

@@ -338,3 +338,9 @@
 // Focus
 // -----------------------------------------------------------------------------
 @include overrideUserAgent(config.$no_agent_focus, config.$io_focus_list);
+
+// Data attributes
+// -----------------------------------------------------------------------------
+[data-action="drag"] {
+	cursor: move;
+}

modules/tables/_tables_module.scss

@@ -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;
-		}
-	}
-}