divider: enhance responsiveness for layout row

[michaelvalette]

Actual Behavior

When a layout is row, the direct child md-divider is going to right.

This is the code found in material/src/components/divider/divider.scss :

.layout-row,
.layout-xs-row, .layout-gt-xs-row,
.layout-sm-row, .layout-gt-sm-row,
.layout-md-row, .layout-gt-md-row,
.layout-lg-row, .layout-gt-lg-row,
.layout-xl-row {
  & > md-divider {
    border-top-width: 0;
    border-right-width: 1px;
    border-right-style: solid;
  }
}

Problem

The screen sensitive classes (-xs-, -gt-sm-, -md-,...) always have that behavior, no matter the screen size.

Expected

The divider should go on the right only on the right screen size.

Solution

Here a code sample that should make the job :

@mixin row-orientation {
  & > md-divider {
    border-top-width: 0;
    border-right-width: 1px;
    border-right-style: solid;
  }
}

.layout-row { @include row-orientation; }

@media (max-width: $layout-breakpoint-xs - 1) { .layout-xs-row { @include row-orientation; } }
@media (min-width: $layout-breakpoint-xs) and (max-width: $layout-breakpoint-sm - 1) { .layout-sm-row { @include row-orientation; } }
@media (min-width: $layout-breakpoint-sm) and (max-width: $layout-breakpoint-md - 1) { .layout-md-row { @include row-orientation; } }
@media (min-width: $layout-breakpoint-md) and (max-width: $layout-breakpoint-lg - 1) { .layout-lg-row { @include row-orientation; } }
@media (min-width: $layout-breakpoint-lg) { .layout-xl-row { @include row-orientation; } }

@media (min-width: $layout-breakpoint-xs) { .layout-gt-xs-row { @include row-orientation; } }
@media (min-width: $layout-breakpoint-sm) { .layout-gt-sm-row { @include row-orientation; } }
@media (min-width: $layout-breakpoint-md) { .layout-gt-md-row { @include row-orientation; } }
@media (min-width: $layout-breakpoint-lg) { .layout-gt-lg-row { @include row-orientation; } }

[Splaktar]

I believe that this was fixed in 1.2.0 in PR #11981. But I can't verify that since there was no CodePen demo supplied with this issue.