feat: Changes to flex and display

- Remove unused flex classes
- Nav module no longer dependend on common flex classes
- Add important to common display and opacity

elements/_grouping.scss

@@ -299,39 +299,6 @@ div {}
 	}
 }
 
-.flex_wrap {
-	@extend .flex;
-	flex-wrap: wrap;
-}
-
-.flex_row {
-	@extend .flex;
-	flex-direction: column;
-	// align-items: flex-start;
-	justify-content: flex-start;
-}
-
-.flex_child {
-	flex: 0 1 auto;
-}
-
-.flex_child_one {
-	flex: 1;
-}
-
-.flex_child_end {
-	align-self: flex-end;
-}
-
-.flex_column_wrap {
-	@extend .flex_wrap;
-
-	.flex_column {
-		@extend .flex_child;
-		flex-grow: 1;
-	}
-}
-
 // Grid
 .grid {
 	display: grid;

global/_common.scss

@@ -21,15 +21,15 @@
 }
 
 .di_none {
-	display: none;
+	display: none !important;
 }
 
 .op_hide {
-	opacity: 0;
+	opacity: 0 !important;
 }
 
 .op_show {
-	opacity: 1;
+	opacity: 1 !important;
 }
 
 .space_even_auto {
@@ -178,11 +178,27 @@
 %flex-inline {
 	display: flex;
 	flex-direction: row;
+	flex-wrap: wrap;
 	align-items: flex-start;
 	justify-content: flex-start;
 	gap: $space_half $space_basic;
 }
 
+%flex-column,
+%flex-row {
+	display: flex;
+	flex-wrap: nowrap;
+	gap: $space_basic;
+}
+
+%flex-column {
+	flex-direction: column;
+}
+
+%flex-row {
+	flex-direction: row;
+}
+
 
 
 // Positioned elements

modules/navigation/_nav_module.scss

@@ -99,12 +99,11 @@ nav {
 	margin: $space_basic 0;
 
 	ul {
-		@extend .flex;
+		display: flex;
 		margin: 0 $space_large;
 
 		li {
-			@extend .flex_child;
-			flex-grow: 1;
+			flex: auto;
 			margin: 0;
 			text-align: center;
 

modules/tables/_tables_module.scss

@@ -11,13 +11,15 @@
 		}
 	}
 
-	th, td {
+	th,
+	td {
 		border: 0;
 	}
 
 	.cell_icon {
 		width: 48px;
 		text-align: center;
+
 		img {
 			vertical-align: text-top;
 		}
@@ -29,9 +31,11 @@
 
 		&:hover {
 			background-color: $foxtrot_color;
+
 			a:first-child {
 				display: none;
 			}
+
 			a:last-child {
 				display: block;
 				color: $color_highlight_basic;
@@ -47,7 +51,8 @@
 		}
 	}
 
-	th:last-child, .cell_date {
+	th:last-child,
+	.cell_date {
 		width: 16%;
 		text-align: center;
 	}