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

Add variables for custom form-group and label spacings

Author: Nikolaev Tomov

package-lock.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",

package.json

@@ -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;
     }
   }
 }

src/less/inputs.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;

src/less/variables.less

@@ -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;