Merge pull request #3480 from ProgrammeVitam/bug_15614

Bug #15614 - [PASTIS] Navigation menu display issue.

Author: Salimdev

ui/ui-frontend/projects/pastis/src/app/profile/edit-profile/edit-profile.component.scss

@@ -40,7 +40,7 @@
 }
 
 // The tabs containers
-::ng-deep .mat-mdc-tab-header {
+:host ::ng-deep .mat-mdc-tab-header {
   left: 40px;
   right: 40px;
   bottom: 48px;
@@ -51,7 +51,7 @@
 
 // The tab
 /* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version.*/
-::ng-deep.mat-tab-label {
+:host ::ng-deep .mat-tab-label {
   @extend .pastis-font-label-historique !optional;
   margin-right: 3px !important;
   height: 37px !important;
@@ -62,26 +62,26 @@
 
 //The tab hover
 /* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version.*/
-::ng-deep.mat-tab-label:hover {
+:host ::ng-deep .mat-tab-label:hover {
   background: var(--vitamui-white) !important;
 }
 
 // Tab hover and tab text hover
 /* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version.*/
-::ng-deep.mat-tab-label:hover .mat-tab-label-content {
+:host ::ng-deep .mat-tab-label:hover .mat-tab-label-content {
   color: var(--vitamui-grey-800) !important;
 }
 
 // The active tab (Black and bold)
 /* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version.*/
-::ng-deep .mat-tab-label-active {
+:host ::ng-deep .mat-tab-label-active {
   background: var(--vitamui-white) !important;
   border-bottom: solid var(--vitamui-primary) 3px;
 }
 
 // The tab content
 /* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version.*/
-::ng-deep .mat-tab-label-content {
+:host ::ng-deep .mat-tab-label-content {
   margin: 8px;
   display: flex;
   align-items: center;
@@ -90,19 +90,19 @@
 
 // The content of the active tab
 /* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version.*/
-::ng-deep .mat-tab-label-active .mat-tab-label-content {
+:host ::ng-deep .mat-tab-label-active .mat-tab-label-content {
   color: var(--vitamui-primary) !important;
   padding-top: 3px !important;
 }
 
 // The automatic tab pagination chevron
 /* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version.*/
-::ng-deep .mat-tab-header-pagination-controls-enabled .mat-tab-header-pagination {
+:host ::ng-deep .mat-tab-header-pagination-controls-enabled .mat-tab-header-pagination {
   display: none !important;
 }
 
-::ng-deep .mat-mdc-tab-group.mat-primary .mat-ink-bar,
-.mat-mdc-tab-nav-bar.mat-primary .mat-ink-bar .pastis-ink-bar {
+:host ::ng-deep .mat-mdc-tab-group.mat-primary .mat-ink-bar,
+:host ::ng-deep .mat-mdc-tab-nav-bar.mat-primary .mat-ink-bar .pastis-ink-bar {
   height: 0;
 }
 
@@ -111,13 +111,13 @@
 }
 
 /* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version.*/
-.mat-mdc-tab-body .mat-tab-body-active {
+:host ::ng-deep .mat-mdc-tab-body .mat-tab-body-active {
   overflow-x: auto !important;
   overflow-y: auto !important;
 }
 
 /* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version.*/
-.mat-tab-body-content {
+:host ::ng-deep .mat-tab-body-content {
   overflow-x: auto !important;
   overflow-y: auto !important;
 }