Derpin on bars

dist/ratchet.css

@@ -284,7 +284,7 @@ a {
   left: 0;
   z-index: 10;
   height: 44px;
-  padding: 0 10px;
+  padding: 5px 10px;
   background-color: rgba(247, 247, 247, 0.98);
   box-shadow: 0 0 1px rgba(0, 0, 0, 0.85);
 }
@@ -397,6 +397,9 @@ a {
   margin: -11px -60px -11px 0;
   color: inherit;
 }
+.table-view li p {
+  margin: 0;
+}
 .table-view.inset {
   width: auto;
   margin-right: 10px;
@@ -560,14 +563,14 @@ select {
 }
 
 [class*="bar-"] input[type=search] {
-  height: 32px;
-  margin: 0;
+  height: 29px;
+  margin: 2px 0;
 }
 
 [class*="button"] {
   position: relative;
   display: inline-block;
-  padding: 4px 12px;
+  padding: 5px 10px 6px;
   margin: 0;
   font-weight: 400;
   line-height: 1;
@@ -624,6 +627,7 @@ select {
   position: relative;
   z-index: 10;
   padding: 0;
+  margin-top: -5px;
   font-size: 16px;
   font-weight: 400;
   line-height: 44px;
@@ -638,7 +642,7 @@ select {
 .bar-title .button + [class*="button"]:last-child,
 .bar-title [class*="button"].pull-right {
   position: absolute;
-  top: 0;
+  top: 5px;
   right: 10px;
 }
 .bar-title .button:active,
@@ -696,11 +700,7 @@ select {
 
 [class*="bar"] .button-block {
   padding: 7px 0;
-  margin-top: 6px;
-  margin-bottom: 0;
-}
-[class*="bar"] .button-block:active {
-  padding: 7px 0;
+  margin-top: 1px;
 }
 
 input[type="submit"],
@@ -775,7 +775,7 @@ input[type="button"] {
   display: -webkit-box;
   display: box;
   padding: 0;
-  margin-bottom: 10px;
+  margin: 0 0 10px 0;
   overflow: hidden;
   font-size: 12px;
   font-weight: 400;
@@ -796,7 +796,7 @@ input[type="button"] {
 }
 .segmented-controller li > a {
   display: block;
-  padding: 7px 16px;
+  padding: 6px 16px 7px;
   overflow: hidden;
   line-height: 1;
   color: #007aff;
@@ -821,12 +821,15 @@ input[type="button"] {
 }
 
 [class*="bar-"] .segmented-controller {
-  margin-top: 9px;
-  margin-bottom: 8px;
+  margin: 3px 0;
   -webkit-box-flex: 1;
   box-flex: 1;
 }
 
+.bar-title .segmented-controller {
+  margin-bottom: 4px;
+}
+
 [class*="bar-"] .segmented-controller + [class*="button"],
 [class*="bar-"] [class*="button"] + .segmented-controller {
   margin-left: 10px;

lib/sass/bars.scss

@@ -8,7 +8,7 @@
   left: 0;
   z-index: 10;
   height: $bar-base-height;
-  padding: 0 $bar-side-spacing;
+  padding: 5px $bar-side-spacing;
   background-color: $chrome-color;
   box-shadow: 0 0 1px rgba(0,0,0,.85);
 

lib/sass/buttons.scss

@@ -5,7 +5,7 @@
 [class*="button"] {
   position: relative;
   display: inline-block;
-  padding: 4px 12px;
+  padding: 5px 10px 6px;
   margin: 0;
   font-weight: $font-weight-light;
   line-height: 1;
@@ -93,6 +93,7 @@
     position: relative;
     z-index: 10; // Places buttons over full width title
     padding: 0;
+    margin-top: -5px; // Offsets the bar's vertical padding
     font-size: 16px;
     font-weight: 400;
     line-height: $bar-base-height;
@@ -110,7 +111,7 @@
   .button + [class*="button"]:last-child,
   [class*="button"].pull-right {
     position: absolute;
-    top: 0;
+    top: 5px; // Offsets the bar's vertical padding
     right: $bar-side-spacing;
   }
 
@@ -188,12 +189,7 @@
 // Add proper padding and replace buttons normal dropshadow with a shine from bar
 [class*="bar"] .button-block {
   padding: 7px 0;
-  margin-top: 6px;
-  margin-bottom: 0;
-
-  &:active {
-    padding: 7px 0;
-  }
+  margin-top: 1px;
 }
 
 // Button overrides

lib/sass/forms.scss

@@ -133,6 +133,6 @@ select {
 
 // Position/size search bar within the bar
 [class*="bar-"] input[type=search] {
-  height: 32px;
-  margin: 0;
+  height: 29px;
+  margin: 2px 0;
 }

lib/sass/segmented-controllers.scss

@@ -6,7 +6,7 @@
   display: -webkit-box;
   display: box;
   padding: 0;
-  margin-bottom: 10px;
+  margin: 0 0 10px 0;
   overflow: hidden;
   font-size: 12px;
   font-weight: $font-weight-light;
@@ -29,7 +29,7 @@
     // Link that fills each section
     > a {
       display: block;
-      padding: 7px 16px;
+      padding: 6px 16px 7px;
       overflow: hidden;
       line-height: 1;
       color: $primary-color;
@@ -68,11 +68,13 @@
 
 // Remove standard segmented bottom margin
 [class*="bar-"] .segmented-controller {
-  margin-top: 9px; // Optically center the controller
-  margin-bottom: 8px;
+  margin: 3px 0;
   -webkit-box-flex: 1;
           box-flex: 1;
 }
+.bar-title .segmented-controller {
+  margin-bottom: 4px;
+}
 
 // Add margins between segmented controllers and buttons
 [class*="bar-"] .segmented-controller + [class*="button"],

lib/sass/table-views.scss

@@ -28,6 +28,10 @@
       margin: -11px -60px -11px 0;
       color: inherit;
     }
+
+    p {
+      margin: 0;
+    }
   }