Merge pull request #341 from dabapps/fields-spacing-variables

Add variables for custom form-group and label spacings
dabapps · Oct 7, 2020 · f7c0930 · f7c0930
2 parents 5053049 + b2eb875
commit f7c0930
Show file tree

Hide file tree

Showing 5 changed files with 11 additions and 5 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@dabapps/roe",
-  "version": "0.11.2",
+  "version": "0.11.3",
   "description": "A collection of React components, styles, mixins, and atomic CSS classes to aid with the development of web applications.",
   "main": "dist/js/index.js",
   "types": "dist/js/index.d.ts",

diff --git a/src/less/inputs.less b/src/less/inputs.less
@@ -9,8 +9,8 @@ textarea {
 
 .form-group {
   position: relative;
-  margin-top: @margin-large;
-  margin-bottom: @margin-large;
+  margin-top: @form-group-margin;
+  margin-bottom: @form-group-margin;
   min-height: @checkbox-size;
 
   & > label,
@@ -125,7 +125,7 @@ textarea {
 
     & > label:first-child,
     & > .label:first-child {
-      margin-bottom: @margin-base;
+      margin-bottom: @form-group-label-margin;
     }
   }
 }

diff --git a/src/less/variables.less b/src/less/variables.less
@@ -165,6 +165,9 @@
 @code-block-name-background: contrast(@code-block-background, darken(@code-block-background, 5%), lighten(@code-block-background, 5%)); // lesshint maxCharPerLine: false
 @code-block-border: @border-base;
 
+@form-group-margin: @margin-large;
+@form-group-label-margin: @margin-base;
+
 @input-group-addon-background: @grey-lightest;
 
 @input-border: @border-dark;

diff --git a/src/ts/components/forms/form-group.examples.md b/src/ts/components/forms/form-group.examples.md
@@ -56,6 +56,9 @@
 #### Less variables
 
 ```less
+@form-group-margin: @margin-large;
+@form-group-label-margin: @margin-base;
+
 @input-border: @border-dark;
 @input-width: 200px;
 @input-height: 32px;