OZG-449 OZG-2312 Styling der Menu Items ohne ::ng-deep

goofy-client/libs/navigation/src/lib/navigation/all-vorgaenge-navigation-item/all-vorgaenge-navigation-item.component.scss

+@import '../navigation-item.theme.scss';
\ No newline at end of file

goofy-client/libs/navigation/src/lib/navigation/my-vorgaenge-navigation-item/my-vorgaenge-navigation-item.component.scss

+@import '../navigation-item.theme.scss';
\ No newline at end of file

goofy-client/libs/navigation/src/lib/navigation/navigation-item.theme.scss

+@use '~@angular/material' as mat;
+@import "variables";
+@import "~include-media/dist/include-media";
+
+a {
+	display: flex;
+	justify-content: flex-start;
+	align-items: center;
+	text-decoration: none;
+	height: 32px;
+	width: 240px;
+	padding: 0 24px;
+	margin: 2px 0;
+	border-radius: 0 16px 16px 0;
+	transition:
+		margin-left 0.3s ease-in-out,
+		padding-left 0.3s ease-in-out,
+		border-radius 0.3s ease-in-out,
+		width 0.3s ease-in-out;
+	transition-delay: 0.2s;
+	outline: 0;
+	white-space: nowrap;
+
+	h1,
+	span {
+		margin: 0 0 0 20px;
+		transition: opacity 0.5s;
+		transition-delay: 0.3s;
+		font-size: inherit;
+		color: inherit;
+		font-weight: inherit;
+		padding: 0;
+	}
+}
+
+:host-context(.small) {
+	a {
+		border-radius: 16px;
+		margin-left: 20px;
+		padding-left: 4px;
+		transition-delay: 0s;
+		width: 32px;
+
+		&.active {
+			background-color: mat.get-color-from-palette($primaryPalette, 50);
+		}
+	}
+
+	span {
+		opacity: 0;
+		transition-delay: 0s;
+	}
+}
+
+@include media('<desktop') {
+	a {
+		border-radius: 16px;
+		margin-left: 20px;
+		padding-left: 4px;
+		transition-delay: 0s;
+		width: 32px;
+
+		&.active {
+			background-color: mat.get-color-from-palette($primaryPalette, 50);
+		}
+	}
+
+	span {
+		opacity: 0;
+		transition-delay: 0s;
+	}
+}

goofy-client/libs/navigation/src/lib/navigation/navigation.component.scss

@@ -33,77 +33,4 @@ ul {
 	margin: 24px 0;
 	padding: 0;
 	align-items: flex-start;
-
-	a {
-		display: flex;
-		justify-content: flex-start;
-		align-items: center;
-		text-decoration: none;
-		height: 32px;
-		width: 240px;
-		padding: 0 24px;
-		margin: 2px 0;
-		border-radius: 0 16px 16px 0;
-		transition:
-			margin-left 0.3s ease-in-out,
-			padding-left 0.3s ease-in-out,
-			border-radius 0.3s ease-in-out,
-			width 0.3s ease-in-out;
-		transition-delay: 0.2s;
-		outline: 0;
-		white-space: nowrap;
-
-		h1,
-		span {
-			margin: 0 0 0 20px;
-			transition: opacity 0.5s;
-			transition-delay: 0.3s;
-			font-size: inherit;
-			color: inherit;
-			font-weight: inherit;
-			padding: 0;
-		}
-	}
-}
-
-.small {
-	ul {
-		a {
-			border-radius: 16px;
-			margin-left: 20px;
-			padding-left: 4px;
-			transition-delay: 0s;
-			width: 32px;
-
-			&.active {
-				background-color: mat.get-color-from-palette($primaryPalette, 50);
-			}
-		}
-
-		span {
-			opacity: 0;
-			transition-delay: 0s;
-		}
-	}
-}
-
-@include media('<desktop') {
-	ul {
-		a {
-			border-radius: 16px;
-			margin-left: 20px;
-			padding-left: 4px;
-			transition-delay: 0s;
-			width: 32px;
-
-			&.active {
-				background-color: mat.get-color-from-palette($primaryPalette, 50);
-			}
-		}
-
-		span {
-			opacity: 0;
-			transition-delay: 0s;
-		}
-	}
 }