bug(Tabs): Nested tabs lose bottom border when parent tabs have background color

[philmayfield]

Reproduction

https://stackblitz.com/edit/angular-zumj5j?file=src/app/tab-group-basic-example.html

Steps to reproduce:

1. View example stackblitz

Expected Behavior

A mat tab group without a background color defined should always have a bottom border.

Actual Behavior

When a mat tab group is nested within another mat tab group which has the background color defined, its bottom border gets clobbered due to descendant css.

Remediation

I believe changing this rule:

// Remove header border when there is a background color
.mat-tab-group[class*='mat-background-'] .mat-tab-header,
.mat-tab-nav-bar[class*='mat-background-'] {
...

to

// Remove header border when there is a background color
.mat-tab-group[class*='mat-background-'] > .mat-tab-header,
.mat-tab-nav-bar[class*='mat-background-'] {
...

will resolve the issue, but I didn't fully test it.

Environment

Angular CLI: 12.1.3
Node: 14.16.0
Package Manager: yarn 1.22.10
OS: darwin x64

Angular: 12.1.3
... animations, cdk, cli, common, compiler, compiler-cli, core
... forms, language-service, localize, material
... material-moment-adapter, platform-browser
... platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1201.3
@angular-devkit/build-angular   12.1.3
@angular-devkit/core            12.1.3
@angular-devkit/schematics      12.1.3
@angular/flex-layout            12.0.0-beta.34
@schematics/angular             12.1.3
rxjs                            6.6.7
typescript                      4.3.5

[crisbeto]

EDIT: ah, I see what you mean. The grey bottom border is removed. I thought that you were referring to the little bar that indicates the selected tab.

Your example looks correct to me. The parent group has a white border, because it has a background and the inner group has a blue border.

[philmayfield]

Edit is correct, the 1px grey bar is what I'm referring to, sorry that wasn't clear 👍

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}