feat(layouts): add @mixin for responsive support for rows

Create @mixin that allows different layout breakpoints

Fixes #9112

Closes #9115

Author: clshortfuse

src/components/divider/divider-theme.scss

@@ -1,14 +1,3 @@
 md-divider.md-THEME_NAME-theme {
-  border-top-color: '{{foreground-4}}';
-}
-
-.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.md-THEME_NAME-theme {
-    border-right-color: '{{foreground-4}}';
-  }
+  border-color: '{{foreground-4}}';
 }

src/components/divider/divider.scss

@@ -9,15 +9,8 @@ md-divider {
   }
 }
 
-.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;
-  }
+@include when-layout-row(md-divider) {
+  border-top-width: 0;
+  border-right-width: 1px;
+  border-right-style: solid;
 }

src/components/radioButton/radio-button.scss

@@ -113,36 +113,12 @@ md-radio-button {
   }
 }
 
-md-radio-group {
-  /** Layout adjustments for the radio group. */
-  &.layout-column,
-  &.layout-xs-column, &.layout-gt-xs-column,
-  &.layout-sm-column, &.layout-gt-sm-column,
-  &.layout-md-column, &.layout-gt-md-column,
-  &.layout-lg-column, &.layout-gt-lg-column,
-  &.layout-xl-column {
-    md-radio-button {
-      margin-bottom: $radio-margin;
-    }
-  }
 
-  &.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-radio-button {
-      margin-top: 0;
-      margin-bottom: 0;
-      @include rtl(margin-left, 0, $radio-margin);
-      @include rtl(margin-right, $radio-margin, 0);
 
-      &:last-of-type {
-        margin-left: 0;
-        margin-right: 0;
-      }
-    }
+md-radio-group {
+  /** Layout adjustments for the radio group. */
+  md-radio-button {
+    margin-bottom: $radio-margin;
   }
 
   &:focus {
@@ -163,6 +139,18 @@ md-radio-group {
   }
 }
 
+@include when-layout-row(md-radio-button, md-radio-group) {
+  margin-top: 0;
+  margin-bottom: 0;
+  @include rtl(margin-left, 0, $radio-margin);
+  @include rtl(margin-right, $radio-margin, 0);
+
+  &:last-of-type {
+    margin-left: 0;
+    margin-right: 0;
+  }
+}
+
 .md-inline-form {
   md-radio-group {
     margin: 18px 0 19px;

src/core/style/mixins.scss

@@ -326,3 +326,47 @@
     }
   }
 }
+
+// Only use when in row layout
+@mixin when-layout-row($element, $parent: '') {
+  @media (max-width: 599px) {
+    #{$parent}.layout-row:not(.layout-xs-column),
+    #{$parent}.layout-xs-row {
+      & > #{$element} { @content; }
+    }
+  }
+  @media (min-width: 600px) and (max-width: 959px) {
+    #{$parent}.layout-row:not(.layout-gt-xs-column),
+    #{$parent}.layout-gt-xs-row,
+    #{$parent}.layout-sm-row {
+      &:not(.layout-sm-column) > #{$element} { @content; }
+    }
+  }
+  @media (min-width: 960px) and (max-width: 1279px) {
+    #{$parent}.layout-row:not(.layout-gt-xs-column):not(.layout-gt-sm-column),
+    #{$parent}.layout-gt-xs-row:not(.layout-gt-sm-column),
+    #{$parent}.layout-gt-sm-row,
+    #{$parent}.layout-md-row {
+      &:not(.layout-md-column) > #{$element} { @content; }
+    }
+  }
+  @media (min-width: 1280px) and (max-width: 1919px) {
+    #{$parent}.layout-row:not(.layout-gt-xs-column):not(.layout-gt-sm-column):not(.layout-gt-md-column),
+    #{$parent}.layout-gt-xs-row:not(.layout-gt-sm-column):not(.layout-gt-md-column),
+    #{$parent}.layout-gt-sm-row:not(.layout-gt-md-column),
+    #{$parent}.layout-gt-md-row,
+    #{$parent}.layout-lg-row {
+      &:not(.layout-lg-column) > #{$element} { @content; }
+    }
+  }
+  @media (min-width: 1920px) {
+    #{$parent}.layout-row:not(.layout-gt-xs-column):not(.layout-gt-sm-column):not(.layout-gt-md-column),
+    #{$parent}.layout-gt-xs-row:not(.layout-gt-sm-column):not(.layout-gt-md-column),
+    #{$parent}.layout-gt-sm-row:not(.layout-gt-md-column),
+    #{$parent}.layout-gt-md-row,
+    #{$parent}.layout-gt-lg-row,
+    #{$parent}.layout-xl-row {
+      &:not(.layout-gt-lg-column):not(.layout-xl-column) > #{$element} { @content; }
+    }
+  }
+}