bug(stepper) labelPosition wrong GUI if 'dir' attribute is missing

[IlCallo]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

GUI display correctly even without dir attribute defined

What is the current behavior?

A piece of GUI does not display

What are the steps to reproduce?

Open docs on Stepper "Label Position" paragraph

What is the use-case or motivation for changing an existing behavior?

Not working as intended

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular: 7.0.0
Material: 7.0.0

Is there anything else we should know?

#12674

On this PR I added the ability to change position to the label, expecially to put it on the bottom of the stepper header.

While doing so, I fixed it to work with both reading direction.

https://github.com/angular/material2/blob/efeefd14086f3d807305e22a9a679a2cfec996b7/src/lib/stepper/stepper.scss#L79-L89

This worked well for the demo page where "dir" attribute is always defined, but in normal Angular apps (included Angular Material docs) I noticed it is not, so a piece of GUI does not display.

The problem is that LTR and RTL rules must be exclusive, but if I leave the ones for LTR as default (aka without [dir='ltr']) they will apply to RTL version too.
Ideas on how to solve this?

[IlCallo]

Something like this using :not maybe?

:not([dir='rtl']) &:not(:last-child)::after, 
[dir='rtl'] &:not(:first-child)::after { 
 @extend %mat-header-horizontal-line-label-position-bottom; 
 right: 0; 
 }

:not([dir='rtl']) &:not(:first-child)::before, 
[dir='rtl'] &:not(:last-child)::before { 
 @extend %mat-header-horizontal-line-label-position-bottom; 
 left: 0; 
 } 

[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.}