fix(gutter): update mobile gutter spacing in layouts that have gutters (

#1829)

* fix(gutter): update mobile gutter spacing in layouts that have gutters

src/patternfly/_variables.scss

@@ -86,6 +86,7 @@
 
   // Gutter
   --pf-global--gutter: #{$pf-global--gutter};
+  --pf-global--gutter--md: #{$pf-global--gutter--md};
 
   // Ratio
   --pf-global--golden-ratio: #{$pf-global--golden-ratio};

src/patternfly/layouts/Gallery/docs/code.md

@@ -8,4 +8,4 @@ A Gallery layout makes all of the children a uniform size, the children are disp
 | -- | -- | -- |
 | `.pf-l-gallery` |  `<div>` |  Initializes a Gallery layout |
 | `.pf-l-gallery__item` | `<div>` |  Explicitly sets the child for the gallery. This class isn't necessary, but it is included to keep inline with BEM convention, and to provide an entity that will later be used for applying modifiers. |
-| `.pf-m-gutter` | `.pf-l-gallery` | Adds space between children |
+| `.pf-m-gutter` | `.pf-l-gallery` | Adds space between children by using the globally defined gutter value. |

src/patternfly/layouts/Gallery/gallery.scss

@@ -1,8 +1,13 @@
 .pf-l-gallery {
   --pf-l-gallery--m-gutter--GridGap: var(--pf-global--gutter);
+  --pf-l-gallery--m-gutter--md--GridGap: var(--pf-global--gutter--md);
   --pf-l-gallery--GridTemplateColumns: repeat(auto-fill, minmax(250px, 1fr)); // The 250px value is here just so that the grid has a width to use in the minmax() for laying out the gallery columns.
   --pf-l-gallery--GridTemplateRows: auto;
 
+  @media screen and (max-width: $pf-global--breakpoint--md) {
+    --pf-l-gallery--m-gutter--GridGap: var(--pf-l-gallery--m-gutter--md--GridGap);
+  }
+
   display: grid;
   grid-template-columns: var(--pf-l-gallery--GridTemplateColumns);
   grid-template-rows: var(--pf-l-gallery--GridTemplateRows);

src/patternfly/layouts/Grid/docs/code.md

@@ -8,7 +8,7 @@ A Grid layout framework including responsive columns, row spans and gutters. Bre
 | -- | -- | -- |
 | `.pf-l-grid` | `<div>` | Initializes the grid layout. |
 | `.pf-l-grid__item` | `<div>` | Explicitly sets a child of the grid. This class isn't necessary, but it is included to keep inline with BEM convention, and to provide an entity that will later be used for applying modifiers. |
-| `.pf-m-gutter` | `.pf-l-grid` | Adds grid gutters. |
+| `.pf-m-gutter` | `.pf-l-grid` | Adds space between children by using the globally defined gutter value. |
 | `.pf-m-all-{1-12}-col{-on-[breakpoint]}` | `.pf-l-grid` | Defines grid item size on grid container. |
 | `.pf-m-{1-12}-col{-on-[breakpoint]}` | `.pf-l-grid__item` | Defines grid item size.  Although not required, they are strongly suggested. If not used, grid item will default to 12 col. |
 | `.pf-m-{2-x}-row{-on-[breakpoint]}` | `.pf-l-grid__item` | Defines grid item row span.  For row spans to function correctly, the value of of the current row plus the grid items to span must be equal to or less than 12. Example: .pf-m-8-col.pf-m-2-row + .pf-m-4-col + .pf-m-4-col. There is no limit to number of spanned rows. |

src/patternfly/layouts/Grid/grid.scss

@@ -40,9 +40,14 @@
 // Grid base
 .pf-l-grid {
   --pf-l-grid--m-gutter--GridGap: var(--pf-global--gutter);
+  --pf-l-grid--m-gutter--md--GridGap: var(--pf-global--gutter--md);
   --pf-l-grid__item--GridColumnStart: auto;
   --pf-l-grid__item--GridColumnEnd: span 12;
 
+  @media screen and (max-width: $pf-global--breakpoint--md) {
+    --pf-l-grid--m-gutter--GridGap: var(--pf-l-grid--m-gutter--md--GridGap);
+  }
+
   display: grid;
   grid-template-columns: repeat(12, [col-start] 1fr);
 

src/patternfly/layouts/Level/docs/code.md

@@ -7,5 +7,5 @@ A level is a layout that distributes the space between children evenly and it ce
 | Class | Applied to | Outcome |
 | -- | -- | -- |
 | `.pf-l-level` | `<div>`, `<section>`, or `<article>` | Initializes the level layout |
-| `.pf-l-level__item` | `<div>` | Explicitly sets a child of the level. This class isn't necessary, but it is included to keep inline with BEM convention, and to provide an entity that will later be used for applying modifiers.
-| `.pf-m-gutter` | `.pf-l-level` |  Adds space between children |
+| `.pf-l-level__item` | `<div>` | Explicitly sets a child of the level. This class isn't necessary, but it is included to keep inline with BEM convention, and to provide an entity that will later be used for applying modifiers. |
+| `.pf-m-gutter` | `.pf-l-level` | Adds space between children by using the globally defined gutter value. |

src/patternfly/layouts/Level/level.scss

@@ -1,5 +1,10 @@
 .pf-l-level {
   --pf-l-level--m-gutter--MarginRight: var(--pf-global--gutter);
+  --pf-l-level--m-gutter--md--MarginRight: var(--pf-global--gutter--md);
+
+  @media screen and (max-width: $pf-global--breakpoint--md) {
+    --pf-l-level--m-gutter--MarginRight: var(--pf-l-level--m-gutter--md--MarginRight);
+  }
 
   display: flex;
   flex-wrap: wrap;

src/patternfly/layouts/Split/docs/code.md

@@ -8,5 +8,5 @@ Split layouts are meant for use in positioning items horizontally, with one of t
 | -- | -- | -- |
 | `.pf-l-split` | `<div>`, `<section>`, or `<article>` | Initiates the split layout. |
 | `.pf-l-split__item` | `<div>` | Initiates a split item. **Required** |
-| `.pf-m-gutter` | `.pf-l-split` | Adds space between items. |
+| `.pf-m-gutter` | `.pf-l-split` | Adds space between children by using the globally defined gutter value. |
 | `.pf-m-fill` | `.pf-l-split__item` | Specifies which item(s) should fill the avaiable horizontal space. |

src/patternfly/layouts/Split/split.scss

@@ -1,5 +1,10 @@
 .pf-l-split {
   --pf-l-split--m-gutter--MarginRight: var(--pf-global--gutter);
+  --pf-l-split--m-gutter--md--MarginRight: var(--pf-global--gutter--md);
+
+  @media screen and (max-width: $pf-global--breakpoint--md) {
+    --pf-l-split--m-gutter--MarginRight: var(--pf-l-split--m-gutter--md--MarginRight);
+  }
 
   display: flex;
   flex-wrap: nowrap;

src/patternfly/layouts/Stack/docs/code.md

@@ -8,5 +8,5 @@ A stack layout is a layout that positions its items vertically. In a stack layou
 | -- | -- | -- |
 | `.pf-l-stack` | `<div>`, `<section>`, or `<article>` | Initiates the stack layout. |
 | `.pf-l-stack__item` | `<div>` | Initiates a stack item. **Required**  |
-| `.pf-m-gutter` | `.pf-l-stack` | Adds space between items. |
+| `.pf-m-gutter` | `.pf-l-stack` | Adds space between children by using the globally defined gutter value. |
 | `.pf-m-fill` | `.pf-l-stack__item` | Specifies which item(s) should fill the avaiable vertical space. |

src/patternfly/layouts/Stack/stack.scss

@@ -1,5 +1,10 @@
 .pf-l-stack {
   --pf-l-stack--m-gutter--MarginBottom: var(--pf-global--gutter);
+  --pf-l-stack--m-gutter--md--MarginBottom: var(--pf-global--gutter--md);
+
+  @media screen and (max-width: $pf-global--breakpoint--md) {
+    --pf-l-stack--m-gutter--MarginBottom: var(--pf-l-stack--m-gutter--md--MarginBottom);
+  }
 
   display: flex;
   flex-direction: column;

src/patternfly/sass-utilities/scss-variables.scss

@@ -134,6 +134,7 @@ $pf-global--spacer--form-element: pf-size-prem(6px) !default;
 
 // Gutter
 $pf-global--gutter: $pf-global--spacer--lg !default;
+$pf-global--gutter--md: $pf-global--spacer--md !default;
 
 // Ratio
 $pf-global--golden-ratio: 1.681 !default;