rebuild - form fixes

FundingCircle · Jun 11, 2015 · ba74ca4 · ba74ca4
1 parent 80c38b4
commit ba74ca4
Show file tree

Hide file tree

Showing 7 changed files with 39 additions and 23 deletions.
diff --git a/dist/fonts/fc-icons.eot b/dist/fonts/fc-icons.eot
diff --git a/dist/fonts/fc-icons.ttf b/dist/fonts/fc-icons.ttf
diff --git a/dist/fonts/fc-icons.woff b/dist/fonts/fc-icons.woff
diff --git a/dist/sass/_variables/misc.scss b/dist/sass/_variables/misc.scss
@@ -81,6 +81,9 @@ $selectArrowWidth: .5;
 $selectArrowHeight: .7;
 $selectArrowPosRight: $selectIconWidth / (2 + $selectArrowWidth);
 
+$mobileFormGutterSize: 1.5 * $fontSizeBase * 1px;
+$desktopFormGutterSize: 2 * $fontSizeBase * 1px;
+
 $errorMessageArrowHeight: 10px;
 
 $tooltipArrowHeight: 10px;

diff --git a/dist/sass/general/forms-v2.scss b/dist/sass/general/forms-v2.scss
@@ -13,11 +13,11 @@
 }
 
 .wrap--form {
-  @include wrapThis(true, $formBreakpoint false);
+  @include wrapThis($mobileFormGutterSize, $formBreakpoint false);
   @include breakPoints(false, $formBreakpoint) {
     & > *:not([class*="form-default"]) {
-      padding-left: $defaultColsPadding;
-      padding-right: $defaultColsPadding;
+      padding-left: $mobileFormGutterSize;
+      padding-right: $mobileFormGutterSize;
     }
   }
 
@@ -57,7 +57,7 @@
 .form-default {
   @include font(0);
   @extend .cl--a;
-  padding: rem(2);
+  padding: $mobileFormGutterSize;
   margin: 0;
   border: 0;
   color: $colorFontDarkSoft;
@@ -67,6 +67,8 @@
   @include breakPoints($formBreakpoint, false) {
     @include cols($formColsRatio);
 
+    padding: $desktopFormGutterSize;
+
     .wrap--form & {
       float: left;
     }
@@ -108,14 +110,15 @@
 
   &_info-box {
     background: rgb(255,255,255);
-    padding: rem(1.5);
+    padding: $mobileFormGutterSize;
 
     @include breakPoints(0, $formBreakpoint) {
       border-bottom: 4px solid $ColorBrand1;
     }
 
     @include breakPoints($formBreakpoint, false) {
       border-left: 4px solid $ColorBrand1;
+      padding: $desktopFormGutterSize;
     }
 
     h5 {

diff --git a/dist/sass/general/structure.scss b/dist/sass/general/structure.scss
@@ -72,3 +72,7 @@ h5,
 h6 {
   margin: 0 0 1em;
 }
+
+:last-child {
+  margin-bottom: 0;
+}
diff --git a/dist/style.css b/dist/style.css
@@ -795,6 +795,9 @@ p, .tooltip_text {
 h1, h2, h3, h4, h5, h6 {
   margin: 0 0 1em; }
 
+:last-child {
+  margin-bottom: 0; }
+
 /* ---------------------------------------------------------------------- *\
   HELPFUL CLASSES & MIXINS
 \* ---------------------------------------------------------------------- */
@@ -1381,12 +1384,12 @@ form h3 {
 
 @media only screen and (min-width: 640px) {
   .wrap--form {
-    padding-left: 16px;
-    padding-right: 16px; } }
+    padding-left: 24px;
+    padding-right: 24px; } }
 @media only screen and (max-width: 639px) {
   .wrap--form > *:not([class*="form-default"]) {
-    padding-left: 16px;
-    padding-right: 16px; } }
+    padding-left: 24px;
+    padding-right: 24px; } }
 .wrap--form > h1 {
   /* CALCULATE THE FONT SIZE */
   font-size: 42px;
@@ -1450,24 +1453,26 @@ form h3 {
   /* FONT STYLE */
   /* FONT VARIANT */
   /* FONT Family */
-  padding: 32px;
+  padding: 24px;
   margin: 0;
   border: 0;
   color: #383838;
   background: #e8e8e8; }
   @media only screen and (min-width: 640px) {
-    .form-default-col--small {
-      width: 38.1971%; }
-    .form-default-col--medium {
-      width: 61.8029%; }
-    .form-default-col--large, .wrap--form > h2, .wrap--form > h2 + p, .wrap--form > h2 + .tooltip_text, .wrap--form .form-default {
-      width: 61.8029%; }
-    .wrap--form .form-default {
-      float: left; }
-    .form-default-col--small {
-      float: right;
-      padding-left: 32px;
-      margin-bottom: 32px; } }
+    .form-default {
+      padding: 32px; }
+      .form-default-col--small {
+        width: 38.1971%; }
+      .form-default-col--medium {
+        width: 61.8029%; }
+      .form-default-col--large, .wrap--form > h2, .wrap--form > h2 + p, .wrap--form > h2 + .tooltip_text, .wrap--form .form-default {
+        width: 61.8029%; }
+      .wrap--form .form-default {
+        float: left; }
+      .form-default-col--small {
+        float: right;
+        padding-left: 32px;
+        margin-bottom: 32px; } }
   @media only screen and (min-width: 480px) {
     .form-default_dob-wrap {
       width: 100%;
@@ -1507,7 +1512,8 @@ form h3 {
         border-bottom: 4px solid #ab3383; } }
     @media only screen and (min-width: 640px) {
       .form-default_info-box {
-        border-left: 4px solid #ab3383; } }
+        border-left: 4px solid #ab3383;
+        padding: 32px; } }
     .form-default_info-box h5 {
       color: #ab3383;
       /* CALCULATE THE FONT SIZE */