Make form grid gutter width configurable (#27766)

diff --git a/scss/_forms.scss b/scss/_forms.scss
index a83e04d6577a458ac92bae25444464f9a134b103..3622db4c404efc86a1c2a6fe9c7b8427a3baa3d9 100644 (file)
--- a/scss/_forms.scss
+++ b/scss/_forms.scss
@@ -190,13 +190,13 @@ textarea.form-control {
 .form-row {
   display: flex;
   flex-wrap: wrap;
-  margin-right: -5px;
-  margin-left: -5px;
+  margin-right: -$form-grid-gutter-width / 2;
+  margin-left: -$form-grid-gutter-width / 2;
 
   > .col,
   > [class*="col-"] {
-    padding-right: 5px;
-    padding-left: 5px;
+    padding-right: $form-grid-gutter-width / 2;
+    padding-left: $form-grid-gutter-width / 2;
   }
 }
 

diff --git a/scss/_variables.scss b/scss/_variables.scss
index 947b3548818a7d9e53f4f43987f03d307583ece2..057a149ea8f7f9011627ea4ae95f85e704567e96 100644 (file)
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -506,6 +506,7 @@ $form-check-input-margin-x:             .25rem !default;
 $form-check-inline-margin-x:            .75rem !default;
 $form-check-inline-input-margin-x:      .3125rem !default;
 
+$form-grid-gutter-width:                10px !default;
 $form-group-margin-bottom:              1rem !default;
 
 $input-group-addon-color:               $input-color !default;