From 897056c0e31facc03820b45305962cb2c65d8d0f Mon Sep 17 00:00:00 2001
From: OZGCloud <ozgcloud@mgm-tp.com>
Date: Thu, 31 Mar 2022 12:10:11 +0200
Subject: [PATCH] OZG-449 OZG-2312 Styling der Menu Items ohne ::ng-deep
---
...l-vorgaenge-navigation-item.component.scss | 1 +
...y-vorgaenge-navigation-item.component.scss | 1 +
.../lib/navigation/navigation-item.theme.scss | 72 ++++++++++++++++++
.../lib/navigation/navigation.component.scss | 73 -------------------
4 files changed, 74 insertions(+), 73 deletions(-)
create mode 100644 goofy-client/libs/navigation/src/lib/navigation/navigation-item.theme.scss
diff --git a/goofy-client/libs/navigation/src/lib/navigation/all-vorgaenge-navigation-item/all-vorgaenge-navigation-item.component.scss b/goofy-client/libs/navigation/src/lib/navigation/all-vorgaenge-navigation-item/all-vorgaenge-navigation-item.component.scss
index e69de29bb2..2e49ee65e1 100644
--- a/goofy-client/libs/navigation/src/lib/navigation/all-vorgaenge-navigation-item/all-vorgaenge-navigation-item.component.scss
+++ b/goofy-client/libs/navigation/src/lib/navigation/all-vorgaenge-navigation-item/all-vorgaenge-navigation-item.component.scss
@@ -0,0 +1 @@
+@import '../navigation-item.theme.scss';
\ No newline at end of file
diff --git a/goofy-client/libs/navigation/src/lib/navigation/my-vorgaenge-navigation-item/my-vorgaenge-navigation-item.component.scss b/goofy-client/libs/navigation/src/lib/navigation/my-vorgaenge-navigation-item/my-vorgaenge-navigation-item.component.scss
index e69de29bb2..2e49ee65e1 100644
--- a/goofy-client/libs/navigation/src/lib/navigation/my-vorgaenge-navigation-item/my-vorgaenge-navigation-item.component.scss
+++ b/goofy-client/libs/navigation/src/lib/navigation/my-vorgaenge-navigation-item/my-vorgaenge-navigation-item.component.scss
@@ -0,0 +1 @@
+@import '../navigation-item.theme.scss';
\ No newline at end of file
diff --git a/goofy-client/libs/navigation/src/lib/navigation/navigation-item.theme.scss b/goofy-client/libs/navigation/src/lib/navigation/navigation-item.theme.scss
new file mode 100644
index 0000000000..8528fc1847
--- /dev/null
+++ b/goofy-client/libs/navigation/src/lib/navigation/navigation-item.theme.scss
@@ -0,0 +1,72 @@
+@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;
+ }
+}
diff --git a/goofy-client/libs/navigation/src/lib/navigation/navigation.component.scss b/goofy-client/libs/navigation/src/lib/navigation/navigation.component.scss
index 063bd9ed1b..4102faaa98 100644
--- a/goofy-client/libs/navigation/src/lib/navigation/navigation.component.scss
+++ b/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;
- }
- }
}
--
GitLab