implement vertical rhythm

src/styles/_base.scss

@@ -6,19 +6,19 @@ html, body {
   @include font-pfdin(regular);
   -webkit-font-smoothing: antialiased;
   font-size: $em-base;
-  line-height: 1.15;
+  line-height: $base-line-height;
   height:100%;
   color: $color-white;
 
-  //&.platform-ios {
+  &.platform-ios {
-  //  font-size: 13px;
+    font-size: 16px;
-  //}
+  }
 
 }
 
 body {
   background-color: $color-gray-2;
-  padding: 0.75rem;
+  padding: $item-spacing-v $item-spacing-h;
 }
 
 h1, h2, h3, h4 {
@@ -28,46 +28,40 @@ h1, h2, h3, h4 {
 }
 
 h1 {
-  font-size: 2rem;
+  @include font-size(2);
 }
 
 h2 {
-  font-size: 1.8rem;
+  @include font-size(1.8);
 }
 
 h3 {
-  font-size: 1.5rem;
+  @include font-size(1.5);
 }
 
 h4 {
-  font-size: 1.3rem;
+  @include font-size(1.2);
 }
 
 h5 {
-  font-size: 1rem;
+  @include font-size(1);
 }
 
 h6 {
-  font-size: 0.8rem;
+  @include font-size(0.8);
-}
-
-.section {
-  background: $color-gray-4;
-  border-radius: 0.25rem;
-  margin-bottom: 1rem;
-  box-shadow: $color-gray-1 0 0.15rem 0.25rem;
 }
 
 .item {
   display: flex;
   justify-content: space-between;
-  align-items: baseline;
+  align-items: center;
-  padding-bottom: $item-spacing-v / 2;
+  padding-bottom: $item-spacing-v;
 
   .input {
     white-space: nowrap;
     display: flex;
     max-width: 50%;
+    margin-left: $item-spacing-h;
   }
 
   &.invalid .input:after {
@@ -89,31 +83,48 @@ h6 {
     flex: 0 0 $size;
     margin-left: 0.3rem;
   }
+}
 
-    //.input input {
-    //  color: $color-orange;
-    //  padding-right: 1em;
-    //
-    //  @include placeholder {
-    //    color: $color-orange;
-    //  }
-    //
-    //}
 
-  
+.section {
-  .section & {
+  background: $color-gray-4;
-    padding-top: $item-spacing-v / 2;
+  border-radius: 0.25rem;
+  margin-bottom: 1rem;
+  box-shadow: $color-gray-1 0 0.15rem 0.25rem;
+
+  .item {
+    padding-top: $item-spacing-v;
     padding-right: $item-spacing-h;
     padding-left: $item-spacing-h;
+    position: relative;
 
-    &:last-child {
+    &:last-child,
-      padding-bottom: $item-spacing-v /2 ;
+    &:first-child {
+      padding-bottom: $item-spacing-v;
+      
+      &:after {
+        display: none;
+      }
     }
 
-    &:first-child {
+    &:after {
-      padding-bottom: $item-spacing-v / 2;
+      content: "";
+      background: $color-gray-6;
+      display: block;
+      position: absolute;
+      bottom: 0;
+      left: $item-spacing-h / 2;
+      right: $item-spacing-h / 2;
+      height: 1px;
+      pointer-events: none;
     }
   }
+
+  .item-heading:first-child {
+    background: $color-gray-3;
+    border-radius: $border-radius $border-radius 0 0;
+  }
+
 }
 
 label.item{
@@ -124,15 +135,6 @@ label.item{
   }
 }
 
-
-.section {
-  .item-heading:first-child {
-    background: $color-gray-3;
-    border-radius: $border-radius $border-radius 0 0;
-  }
-}
-
-
 strong {
   @include font-pfdin(medium);
   color: $color-orange;

src/styles/items/_color.scss

@@ -3,9 +3,9 @@
 .item-color {
 
   .value {
-    width: 1.8rem;
+    width: $small-component-width;
-    height: 1rem;
+    height: $base-height;
-    border-radius: 1rem;
+    border-radius: $base-height / 2;
     box-shadow: $box-shadow-small-components;
   }
 

src/styles/items/_input.scss

@@ -4,34 +4,30 @@
 
 .item-input {
 
-  .input {
+  display: block;
-    margin-left: 1rem;
-    position: relative;
-    min-width: 50%;
 
-    &:before {
+  .label {
-      content: "";
+    padding-bottom: $item-spacing-v;
-      position: absolute;
+  }
-      display: block;
+
-      left: 0;
+  .input {
-      right: 0;
+    position: relative;
-      bottom: -0.4rem;
+    min-width: 100%;
-      height: 0;
+    margin-top: $item-spacing-v;
-      border-bottom: 1px solid $color-gray-5;
+    margin-left: 0;
-    }
   }
 
   input {
-    display:inline-block;
+    display:block;
     width: 100%;
-    background: transparent;
+    background: $color-gray-2;
+    border-radius: $border-radius;
+    padding: $item-spacing-v / 2 $item-spacing-h / 2;
     border: none;
-    padding: 0;
     vertical-align: baseline;
     color: $color-white;
     font-size: inherit;
 
-    
     @include placeholder {
       color: $color-gray-8;
     }

src/styles/items/_toggle.scss

@@ -2,9 +2,9 @@
 
 .item-toggle {
 
-  $slide-height: 0.75rem;
+  $slide-height: $base-height * 0.75;
-  $slide-width: $slide-height * 2.4;
+  $slide-width: $small-component-width;
-  $marker-diameter: 1rem;
+  $marker-diameter: $base-height;
 
   input {
     display: none; // @todo make sure this doesnt mess up interactivity on iOS
@@ -27,7 +27,7 @@
       background: $color-gray-10;
       width: $marker-diameter;
       height: $marker-diameter;
-      border-radius: 50%;
+      border-radius: $marker-diameter;
       position: absolute;
       left: 0;
       display: block;

src/styles/partials/_mixins.scss

@@ -1,3 +1,5 @@
+@import "vars";
+
 @mixin font-pfdin($weight: normal) {
 
   font-weight: normal;
@@ -25,3 +27,9 @@
   top: 0.05rem;
   line-height: 0.9;
 }
+
+@mixin font-size($size: 1) {
+  $font-size:  $size * 1rem;
+  font-size:$font-size;
+  line-height: $base-line-height * ceil($font-size / $base-line-height);
+}

src/styles/partials/_vars.scss

@@ -1,7 +1,17 @@
 @import "../vendor/bourbon/bourbon";
 
 // Bourbon settings
-$em-base: 18px;
+$em-base: 17px;
+
+// custom vars
+$base-line-height: 1.4;
+$base-height: rem($base-line-height * $em-base);
+$border-radius: 0.25rem;
+$item-spacing-v: $base-height / 2;
+$item-spacing-h: 0.75rem;
+$small-component-width: $base-height * $golden;
+
+
 
 // ---- Colors ------
 $color-orange: #ff4700;
@@ -24,10 +34,7 @@ $color-gray-9: #a4a4a4 ;
 $color-gray-10: #ececec;
 $color-gray-11: #f2f2f2;
 
-// custom vars
+
-$border-radius: 0.25rem;
-$item-spacing-v: 1.5rem;
-$item-spacing-h: 0.75rem;
 
 
 $global-margin: 55px;