From edfa250d00cce7838dc1acef8ca28aff953b9bfe Mon Sep 17 00:00:00 2001
From: connors <connor.sears@github.com>
Date: Sun, 15 Sep 2013 19:08:43 -0700
Subject: [PATCH] Adding normalize and box-sizing broke a lot of things. Fixing
 those things. Forms and docs still broken.

---
 dist/ratchet.css                    | 271 +++++++++++++---------------
 lib/sass/bars.scss                  | 199 +++-----------------
 lib/sass/base.scss                  |   2 +-
 lib/sass/buttons.scss               | 130 ++++++++++++-
 lib/sass/forms.scss                 |  10 +
 lib/sass/popovers.scss              |   4 +-
 lib/sass/ratchet.scss               |   6 +-
 lib/sass/segmented-controllers.scss |  33 +++-
 lib/sass/sliders.scss               |   1 +
 lib/sass/table-views.scss           |   2 +
 lib/sass/variables.scss             |  36 ++++
 11 files changed, 357 insertions(+), 337 deletions(-)
 create mode 100644 lib/sass/variables.scss

diff --git a/dist/ratchet.css b/dist/ratchet.css
index 6371a77..63ce2ed 100644
--- a/dist/ratchet.css
+++ b/dist/ratchet.css
@@ -284,22 +284,18 @@ a {
   left: 0;
   z-index: 10;
   height: 44px;
-  padding: 5px;
+  padding: 0 10px;
   background-color: rgba(247, 247, 247, 0.98);
-  box-shadow: 0 0px 1px rgba(0, 0, 0, 0.85);
+  box-shadow: 0 0 1px rgba(0, 0, 0, 0.85);
 }
-
-.bar-header-secondary {
+[class*="bar-"].bar-header-secondary {
   top: 44px;
 }
-
-.bar-footer {
+[class*="bar-"].bar-footer {
   bottom: 0;
 }
-
-.bar-footer.bar-standard,
-.bar-footer-secondary.bar-standard {
-  box-shadow: 0 0px 1px rgba(0, 0, 0, 0.85);
+[class*="bar-"].bar-footer.bar-standard, [class*="bar-"].bar-footer-secondary.bar-standard {
+  box-shadow: 0 0 1px rgba(0, 0, 0, 0.85);
 }
 
 .bar-title {
@@ -310,12 +306,14 @@ a {
   box-orient: horizontal;
 }
 
-.bar-title .title {
+.title {
   position: absolute;
   top: 0;
   left: 0;
   display: block;
   width: 100%;
+  padding: 0;
+  margin: 0;
   font-size: 18px;
   font-weight: 500;
   line-height: 44px;
@@ -324,13 +322,13 @@ a {
   white-space: nowrap;
 }
 
-.bar-title > a:not([class*="button"]) {
+> a:not([class*="button"]) {
   display: block;
   width: 100%;
   height: 100%;
 }
 
-.bar-title .title a {
+.title a {
   color: inherit;
 }
 
@@ -345,6 +343,8 @@ a {
   display: -webkit-box;
   display: box;
   height: 100%;
+  padding: 0;
+  margin: 0;
   list-style: none;
   -webkit-box-orient: horizontal;
   box-orient: horizontal;
@@ -375,127 +375,9 @@ a {
   color: #007aff;
 }
 
-.bar-title [class*="button"] {
-  position: relative;
-  z-index: 10;
-  padding-left: 5px;
-  padding-right: 5px;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 29px;
-  color: #007aff;
-  border: 0;
-  transition: opacity .2s linear;
-  -webkit-box-flex: 0;
-  box-flex: 0;
-}
-
-.bar-title .title + [class*="button"]:last-child,
-.bar-title .button + [class*="button"]:last-child,
-.bar-title [class*="button"].pull-right {
-  position: absolute;
-  top: 5px;
-  right: 5px;
-}
-
-.bar-title .button:active,
-.bar-title .button-prev:active,
-.bar-title .button-next:active {
-  color: #007aff;
-  background-color: transparent;
-  opacity: .3;
-}
-
-.bar-title .button-prev:before,
-.bar-title .button-prev:after,
-.bar-title .button-next:before,
-.bar-title .button-next:after {
-  position: absolute;
-  display: block;
-  width: 15px;
-  height: 3px;
-  background-color: #007aff;
-  content: '';
-}
-
-.bar-title .button-prev {
-  padding-left: 22px;
-}
-
-.bar-title .button-next {
-  padding-right: 22px;
-}
-
-.bar-title .button-prev:before,
-.bar-title .button-prev:after {
-  left: 0;
-}
-
-.bar-title .button-next:before,
-.bar-title .button-next:after {
-  right: 0;
-}
-
-.bar-title .button-prev:before,
-.bar-title .button-next:before {
-  top: 12px;
-}
-
-.bar-title .button-prev:after,
-.bar-title .button-next:after {
-  top: 21px;
-}
-
-.bar-title .button-prev:before {
-  -webkit-transform: rotate(-45deg);
-  transform: rotate(-45deg);
-}
-
-.bar-title .button-prev:after {
-  -webkit-transform: rotate(45deg);
-  transform: rotate(45deg);
-}
-
-.bar-title .button-next:before {
-  -webkit-transform: rotate(45deg);
-  transform: rotate(45deg);
-}
-
-.bar-title .button-next:after {
-  -webkit-transform: rotate(-45deg);
-  transform: rotate(-45deg);
-}
-
-[class*="bar"] .button-block {
-  padding: 7px 0;
-  margin-bottom: 0;
-}
-
-[class*="bar"] .button-block:active {
-  padding: 7px 0;
-}
-
-[class*="bar-"] .segmented-controller {
-  margin-bottom: 0;
-}
-
-[class*="bar-"] .segmented-controller + [class*="button"],
-[class*="bar-"] [class*="button"] + .segmented-controller {
-  margin-left: 5px;
-}
-
-.bar-title .segmented-controller {
-  line-height: 18px;
-  -webkit-box-flex: 1;
-  box-flex: 1;
-}
-
-.bar-standard input[type=search] {
-  height: 32px;
-  margin: 0;
-}
-
 .table-view {
+  padding: 0;
+  margin: 0;
   list-style: none;
   background-color: #fff;
 }
@@ -672,26 +554,31 @@ select {
   border-bottom: 0;
 }
 
+.bar-standard input[type=search] {
+  height: 32px;
+  margin: 0;
+}
+
 [class*="button"] {
   position: relative;
   display: inline-block;
   padding: 4px 12px;
   margin: 0;
-  font-weight: 500;
+  font-weight: 400;
   line-height: 1;
-  color: #333;
+  color: #929292;
   text-align: center;
   vertical-align: top;
   cursor: pointer;
   background-color: transparent;
-  border: 1px solid rgba(0, 0, 0, 0.2);
+  border: 1px solid #929292;
   border-radius: 4px;
 }
 [class*="button"]:active, [class*="button"].active, [class*="button"].button-filled {
   color: #fff;
-  background-color: #333;
-  -webkit-transition: background-color .1s linear;
-  transition: background-color .1s linear;
+  background-color: #929292;
+  -webkit-transition: background-color .1s linear, opacity .1s linear;
+  transition: background-color .1s linear, opacity .1s linear;
 }
 [class*="button"]:disabled, [class*="button"].disabled, [class*="button"].button-filled:active {
   opacity: .6;
@@ -728,10 +615,92 @@ select {
   font-size: 16px;
 }
 
+.bar-title [class*="button"] {
+  position: relative;
+  z-index: 10;
+  padding: 0;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 44px;
+  color: #007aff;
+  border: 0;
+  -webkit-transition: opacity .2s linear;
+  transition: opacity .2s linear;
+  -webkit-box-flex: 0;
+  box-flex: 0;
+}
+.bar-title .title + [class*="button"]:last-child,
+.bar-title .button + [class*="button"]:last-child,
+.bar-title [class*="button"].pull-right {
+  position: absolute;
+  top: 0;
+  right: 10px;
+}
+.bar-title .button:active,
+.bar-title .button-prev:active,
+.bar-title .button-next:active {
+  color: #007aff;
+  background-color: transparent;
+  opacity: .3;
+}
+.bar-title .button-prev:before,
+.bar-title .button-prev:after,
+.bar-title .button-next:before,
+.bar-title .button-next:after {
+  position: absolute;
+  display: block;
+  width: 15px;
+  height: 3px;
+  background-color: #007aff;
+  content: '';
+}
+.bar-title .button-prev {
+  padding-left: 20px;
+  margin-left: -5px;
+}
+.bar-title .button-next {
+  padding-right: 20px;
+  margin-right: -5px;
+}
+.bar-title .button-prev:before,
+.bar-title .button-prev:after {
+  left: 0;
+}
+.bar-title .button-next:before,
+.bar-title .button-next:after {
+  right: 0;
+}
+.bar-title .button-prev:before,
+.bar-title .button-next:before {
+  top: 16px;
+}
+.bar-title .button-prev:after,
+.bar-title .button-next:after {
+  top: 25px;
+}
+.bar-title .button-prev:before,
+.bar-title .button-next:after {
+  -webkit-transform: rotate(-45deg);
+  transform: rotate(-45deg);
+}
+.bar-title .button-prev:after,
+.bar-title .button-next:before {
+  -webkit-transform: rotate(45deg);
+  transform: rotate(45deg);
+}
+
+[class*="bar"] .button-block {
+  padding: 7px 0;
+  margin-top: 6px;
+  margin-bottom: 0;
+}
+[class*="bar"] .button-block:active {
+  padding: 7px 0;
+}
+
 input[type="submit"],
 input[type="reset"],
-input[type="button"],
-.button-block {
+input[type="button"] {
   width: 100%;
 }
 
@@ -800,10 +769,11 @@ input[type="button"],
 .segmented-controller {
   display: -webkit-box;
   display: box;
+  padding: 0;
   margin-bottom: 10px;
   overflow: hidden;
   font-size: 12px;
-  font-weight: bold;
+  font-weight: 400;
   list-style: none;
   background-color: transparent;
   border: 1px solid #007aff;
@@ -821,9 +791,9 @@ input[type="button"],
 }
 .segmented-controller li > a {
   display: block;
-  padding: 8px 16px;
+  padding: 7px 16px;
   overflow: hidden;
-  line-height: 15px;
+  line-height: 1;
   color: #007aff;
   text-overflow: ellipsis;
 }
@@ -845,6 +815,18 @@ input[type="button"],
   display: block;
 }
 
+[class*="bar-"] .segmented-controller {
+  margin-top: 9px;
+  margin-bottom: 8px;
+  -webkit-box-flex: 1;
+  box-flex: 1;
+}
+
+[class*="bar-"] .segmented-controller + [class*="button"],
+[class*="bar-"] [class*="button"] + .segmented-controller {
+  margin-left: 10px;
+}
+
 .popover {
   position: fixed;
   top: 55px;
@@ -994,6 +976,7 @@ input[type="button"],
 }
 .slider > ul {
   position: relative;
+  padding: 0;
   font-size: 0;
   white-space: nowrap;
   -webkit-transition: all 0 linear;
diff --git a/lib/sass/bars.scss b/lib/sass/bars.scss
index c15a1d8..f6d92b1 100644
--- a/lib/sass/bars.scss
+++ b/lib/sass/bars.scss
@@ -7,28 +7,29 @@
   right: 0;
   left: 0;
   z-index: 10;
-  height: 44px;
-  padding: 5px;
+  height: $bar-base-height;
+  padding: 0 $bar-side-spacing;
   background-color: $chrome-color;
-  box-shadow: 0 0px 1px rgba(0,0,0,.85);
-}
+  box-shadow: 0 0 1px rgba(0,0,0,.85);
 
-// Modifier class to dock any bar below .bar-title
-.bar-header-secondary {
-  top: 44px;
-}
+  // Modifier class to dock any bar below .bar-title
+  &.bar-header-secondary {
+    top: $bar-base-height;
+  }
 
-// Modifier class to dock any bar to bottom of viewport
-.bar-footer {
-  bottom: 0;
-}
+  // Modifier class to dock any bar to bottom of viewport
+  &.bar-footer {
+    bottom: 0;
+  }
 
-// Flip border position to top for footer bars
-.bar-footer.bar-standard,
-.bar-footer-secondary.bar-standard {
-  box-shadow: 0 0px 1px rgba(0,0,0,.85);
+  // Flip border position to top for footer bars
+  &.bar-footer.bar-standard,
+  &.bar-footer-secondary.bar-standard {
+    box-shadow: 0 0 1px rgba(0,0,0,.85);
+  }
 }
 
+
 // Nav bar
 // --------------------------------------------------
 
@@ -42,38 +43,41 @@
 }
 
 // Centered text in the .bar-title 
-.bar-title .title {
+.title {
   position: absolute;
   top: 0;
   left: 0;
   display: block;
   width: 100%;
+  padding: 0;
+  margin: 0;
   font-size: 18px;
   font-weight: 500;
-  line-height: 44px;
+  line-height: $bar-base-height;
   color: #000;
   text-align: center;
   white-space: nowrap;
 }
 
-.bar-title > a:not([class*="button"]) {
+> a:not([class*="button"]) {
   display: block;
   width: 100%;
   height: 100%;
 }
 
 //Retain specified title color
-.bar-title .title a {
+.title a {
   color: inherit;
 }
 
+
 // Tab bar
 // --------------------------------------------------
 
 // Bar docked to bottom used for primary app navigation
 .bar-tab {
   bottom: 0;
-  height: 50px;
+  height: $bar-tab-height;
   padding: 0;
   box-shadow: 0 0px 1px rgba(0,0,0,.85);
 }
@@ -83,6 +87,8 @@
   display: -webkit-box;
   display: box;
   height: 100%;
+  padding: 0;
+  margin: 0;
   list-style: none;
   -webkit-box-orient: horizontal;
           box-orient: horizontal;
@@ -109,155 +115,8 @@
   margin-top: 1px;
   font-size: 11px;
   font-weight: 400;
-  color: #929292;
+  color: $default-color;
 }
 .tab-item.active .tab-label {
- color: $app-color;
-}
-
-// Buttons in nav bars
-// --------------------------------------------------
-
-// Generic style for all buttons in .bar-title
-.bar-title [class*="button"] {
-  position: relative;
-  z-index: 10; // Places buttons over full width title
-  padding-left: 5px;
-  padding-right: 5px;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 29px;
-  color: $app-color;
-  border: 0;
-  transition: opacity .2s linear;
-  -webkit-box-flex: 0;
-          box-flex: 0;
-}
-
-
-// Hacky way to right align buttons outside of flex-box system
-// Note: is only absolutely positioned button, would be better if flex-box had an "align right" option
-.bar-title .title + [class*="button"]:last-child,
-.bar-title .button + [class*="button"]:last-child,
-.bar-title [class*="button"].pull-right {
-  position: absolute;
-  top: 5px;
-  right: 5px;
-}
-
-// Override standard button active states
-.bar-title .button:active,
-.bar-title .button-prev:active,
-.bar-title .button-next:active {
-  color: $app-color;
-  background-color: transparent;
-  opacity: .3;
-}
-
-// Directional buttons in nav bars
-// --------------------------------------------------
-
-.bar-title .button-prev:before,
-.bar-title .button-prev:after,
-.bar-title .button-next:before,
-.bar-title .button-next:after {
-  position: absolute;
-  display: block;
-  width: 15px;
-  height: 3px;
-  background-color: $app-color;
-  content: '';
-}
-
-// Prev/next button base styles
-.bar-title .button-prev {
-  padding-left: 22px; // Push over to make room for chevrons
-}
-.bar-title .button-next {
-  padding-right: 22px; // Push over to make room for chevrons
-}
-
-// Position the chevrons horizontally
-.bar-title .button-prev:before,
-.bar-title .button-prev:after {
-  left: 0;
-}
-.bar-title .button-next:before,
-.bar-title .button-next:after {
-  right: 0;
-}
-
-// Position the chevrons vertically
-.bar-title .button-prev:before, 
-.bar-title .button-next:before {
-  top: 12px;
-}
-.bar-title .button-prev:after, 
-.bar-title .button-next:after {
-  top: 21px;
-}
-
-// Rotate the chevrons
-.bar-title .button-prev:before {
-  -webkit-transform: rotate(-45deg);
-          transform: rotate(-45deg);
-}
-.bar-title .button-prev:after {
-  -webkit-transform: rotate(45deg);
-          transform: rotate(45deg);
-}
-.bar-title .button-next:before {
-  -webkit-transform: rotate(45deg);
-          transform: rotate(45deg);
-}
-.bar-title .button-next:after {
-  -webkit-transform: rotate(-45deg);
-          transform: rotate(-45deg);
-}
-
-// Block buttons in all bars
-// --------------------------------------------------
-
-// Add proper padding and replace buttons normal dropshadow with a shine from bar
-[class*="bar"] .button-block {
-  padding: 7px 0;
-  margin-bottom: 0;
-}
-
-// Override standard padding changes for .button-blocks
-[class*="bar"] .button-block:active {
-  padding: 7px 0;
-}
-
-// Segmented controller in all bars
-// --------------------------------------------------
-
-// Remove standard segmented bottom margin
-[class*="bar-"] .segmented-controller {
-  margin-bottom: 0;
-}
-
-// Add margins between segmented controllers and buttons
-[class*="bar-"] .segmented-controller + [class*="button"],
-[class*="bar-"] [class*="button"] + .segmented-controller {
-  margin-left: 5px;
-}
-
-// Segmented controller in a nav bars
-// --------------------------------------------------
-
-.bar-title .segmented-controller {
-  line-height: 18px;
-  -webkit-box-flex: 1;
-          box-flex: 1;
-}
-
-
-// Search forms in standard bar
-// --------------------------------------------------
-
-// Position/size search bar within the bar
-.bar-standard input[type=search] {
-  height: 32px;
-  margin: 0;
+  color: $primary-color;
 }
\ No newline at end of file
diff --git a/lib/sass/base.scss b/lib/sass/base.scss
index b0fba80..0264f26 100644
--- a/lib/sass/base.scss
+++ b/lib/sass/base.scss
@@ -18,7 +18,7 @@ body {
 
 // Universal link styling
 a {
-  color: #007aff;
+  color: $primary-color;
   text-decoration: none;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0); // Removes the dark touch outlines on links
 }
diff --git a/lib/sass/buttons.scss b/lib/sass/buttons.scss
index fe08098..495ada1 100644
--- a/lib/sass/buttons.scss
+++ b/lib/sass/buttons.scss
@@ -7,14 +7,14 @@
   display: inline-block;
   padding: 4px 12px;
   margin: 0;
-  font-weight: 500;
+  font-weight: $font-weight-light;
   line-height: 1;
-  color: #333;
+  color: $default-color;
   text-align: center;
   vertical-align: top;
   cursor: pointer;
   background-color: transparent;
-  border: 1px solid rgba(0, 0, 0, .2);
+  border: 1px solid $default-color;
   border-radius: 4px;
 
   // Active & filled button styles
@@ -22,7 +22,7 @@
   &.active,
   &.button-filled {
     color: #fff;
-    background-color: #333;
+    background-color: $default-color;
     -webkit-transition: background-color .1s linear, opacity .1s linear;
             transition: background-color .1s linear, opacity .1s linear;
   }
@@ -41,13 +41,13 @@
 
 // Primary button (Default color is blue)
 .button-primary {
-  color: $app-color;
-  border: 1px solid $app-color;
+  color: $primary-color;
+  border: 1px solid $primary-color;
 
   &:active,
   &.active,
   &.button-filled {
-    background-color: $app-color;
+    background-color: $primary-color;
   }
 }
 
@@ -83,11 +83,123 @@
   font-size: 16px;
 }
 
+// Buttons in nav bars
+// --------------------------------------------------
+
+.bar-title {
+
+  // Generic style for all buttons in .bar-title
+  [class*="button"] {
+    position: relative;
+    z-index: 10; // Places buttons over full width title
+    padding: 0;
+    font-size: 16px;
+    font-weight: 400;
+    line-height: $bar-base-height;
+    color: $primary-color;
+    border: 0;
+    -webkit-transition: opacity .2s linear;
+            transition: opacity .2s linear;
+    -webkit-box-flex: 0;
+            box-flex: 0;
+  }
+
+  // Hacky way to right align buttons outside of flex-box system
+  // Note: is only absolutely positioned button, would be better if flex-box had an "align right" option
+  .title + [class*="button"]:last-child,
+  .button + [class*="button"]:last-child,
+  [class*="button"].pull-right {
+    position: absolute;
+    top: 0;
+    right: $bar-side-spacing;
+  }
+
+  // Override standard button active states
+  .button:active,
+  .button-prev:active,
+  .button-next:active {
+    color: $primary-color;
+    background-color: transparent;
+    opacity: .3;
+  }
+
+
+  // Directional buttons in nav bars
+  // --------------------------------------------------
+
+  .button-prev:before,
+  .button-prev:after,
+  .button-next:before,
+  .button-next:after {
+    position: absolute;
+    display: block;
+    width: 15px;
+    height: 3px;
+    background-color: $primary-color;
+    content: '';
+  }
+
+  // Prev/next button base styles
+  .button-prev {
+    padding-left: $button-directional-padding;
+    margin-left: $button-directional-margin;
+  }
+  .button-next {
+    padding-right: $button-directional-padding;
+    margin-right: $button-directional-margin;
+  }
+
+  // Position the chevrons horizontally
+  .button-prev:before,
+  .button-prev:after {
+    left: 0;
+  }
+  .button-next:before,
+  .button-next:after {
+    right: 0;
+  }
+
+  // Position the chevrons vertically
+  .button-prev:before, 
+  .button-next:before {
+    top: 16px;
+  }
+  .button-prev:after, 
+  .button-next:after {
+    top: 25px;
+  }
+
+  // Rotate the chevrons
+  .button-prev:before,
+  .button-next:after {
+    -webkit-transform: rotate(-45deg);
+            transform: rotate(-45deg);
+  } 
+  .button-prev:after,
+  .button-next:before {
+    -webkit-transform: rotate(45deg);
+            transform: rotate(45deg);
+  }
+}
+
+// Block buttons in all bars
+// --------------------------------------------------
+
+// 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;
+  }
+}
+
 // Button overrides
 // --------------------------------------------------
 input[type="submit"],
 input[type="reset"],
-input[type="button"],
-.button-block {
+input[type="button"] {
   width: 100%;
 }
diff --git a/lib/sass/forms.scss b/lib/sass/forms.scss
index c51e475..4107b4f 100644
--- a/lib/sass/forms.scss
+++ b/lib/sass/forms.scss
@@ -120,4 +120,14 @@ select {
   padding-left: 0;
   margin-bottom: 0;
   border-bottom: 0;
+}
+
+
+// Search forms in standard bar
+// --------------------------------------------------
+
+// Position/size search bar within the bar
+.bar-standard input[type=search] {
+  height: 32px;
+  margin: 0;
 }
\ No newline at end of file
diff --git a/lib/sass/popovers.scss b/lib/sass/popovers.scss
index 7151262..18060a5 100644
--- a/lib/sass/popovers.scss
+++ b/lib/sass/popovers.scss
@@ -63,7 +63,7 @@
   font-size: 16px;
   font-weight: 400;
   line-height: 29px;
-  color: $app-color;
+  color: $primary-color;
   border: 0;
   transition: opacity .2s linear;
   -webkit-box-flex: 0;
@@ -82,7 +82,7 @@
 
 // Active state for popover header buttons
 .popover-header .button:active {
-  color: $app-color;
+  color: $primary-color;
   background-color: transparent;
   opacity: .3;
 }
diff --git a/lib/sass/ratchet.scss b/lib/sass/ratchet.scss
index a300bdd..c756858 100644
--- a/lib/sass/ratchet.scss
+++ b/lib/sass/ratchet.scss
@@ -1,8 +1,6 @@
 // Variables
-$app-color: #007aff;
-$chrome-color: rgba(247,247,247,.98);
-$positive-color: #4cd964;
-$negative-color: #dd524d;
+@import "variables.scss";
+
 
 // Normalize & Base CSS
 @import "normalize.scss";
diff --git a/lib/sass/segmented-controllers.scss b/lib/sass/segmented-controllers.scss
index b62e0a7..9a5e7e0 100644
--- a/lib/sass/segmented-controllers.scss
+++ b/lib/sass/segmented-controllers.scss
@@ -5,13 +5,14 @@
 .segmented-controller {
   display: -webkit-box;
   display: box;
+  padding: 0;
   margin-bottom: 10px;
   overflow: hidden;
   font-size: 12px;
-  font-weight: bold;
+  font-weight: $font-weight-light;
   list-style: none;
   background-color: transparent;
-  border: 1px solid $app-color;
+  border: 1px solid $primary-color;
   border-radius: 4px;
   -webkit-box-orient: horizontal;
           box-orient: horizontal;
@@ -21,17 +22,17 @@
     overflow: hidden;
     text-align: center;
     white-space: nowrap;
-    border-left: 1px solid $app-color;
+    border-left: 1px solid $primary-color;
     -webkit-box-flex: 1;
             box-flex: 1;
     
     // Link that fills each section
     > a {
       display: block;
-      padding: 8px 16px;
+      padding: 7px 16px;
       overflow: hidden;
-      line-height: 15px;
-      color: $app-color;
+      line-height: 1;
+      color: $primary-color;
       text-overflow: ellipsis;
     }
 
@@ -42,7 +43,7 @@
 
     // Active segment of controller
     &.active {
-      background-color: $app-color;
+      background-color: $primary-color;
       transition: background-color .2s linear;
 
       // Set color of links to white
@@ -59,4 +60,22 @@
   &.active {
     display: block;
   }
+}
+
+
+// Segmented controller in all bars
+// --------------------------------------------------
+
+// Remove standard segmented bottom margin
+[class*="bar-"] .segmented-controller {
+  margin-top: 9px; // Optically center the controller
+  margin-bottom: 8px;
+  -webkit-box-flex: 1;
+          box-flex: 1;
+}
+
+// Add margins between segmented controllers and buttons
+[class*="bar-"] .segmented-controller + [class*="button"],
+[class*="bar-"] [class*="button"] + .segmented-controller {
+  margin-left: $bar-side-spacing; // Equal to the right and left padding on buttons & icons
 }
\ No newline at end of file
diff --git a/lib/sass/sliders.scss b/lib/sass/sliders.scss
index 90e9835..6c6b207 100644
--- a/lib/sass/sliders.scss
+++ b/lib/sass/sliders.scss
@@ -17,6 +17,7 @@
   // Inner wrapper for slider (width of all slides together)
   > ul {
     position: relative;
+    padding: 0;
     font-size: 0; // Remove spaces from inline-block children
     white-space: nowrap;
     -webkit-transition: all 0 linear;
diff --git a/lib/sass/table-views.scss b/lib/sass/table-views.scss
index 1ed0bb2..2bdf2f2 100644
--- a/lib/sass/table-views.scss
+++ b/lib/sass/table-views.scss
@@ -3,6 +3,8 @@
 // --------------------------------------------------
 
 .table-view {
+  padding: 0;
+  margin: 0;
   list-style: none; // Remove usual bullet styles from table view
   background-color: #fff;
 
diff --git a/lib/sass/variables.scss b/lib/sass/variables.scss
new file mode 100644
index 0000000..ceed4cd
--- /dev/null
+++ b/lib/sass/variables.scss
@@ -0,0 +1,36 @@
+//
+// Variables
+// --------------------------------------------------
+
+
+// Type
+// --------------------------------------------------
+$font-weight: 500;
+$font-weight-bold: 600;
+$font-weight-light: 400;
+
+
+// Colors
+// --------------------------------------------------
+
+// Main theme colors
+$primary-color: #007aff;
+$chrome-color: rgba(247,247,247,.98);
+
+// Action colors
+$default-color:  #929292;
+$positive-color: #4cd964;
+$negative-color: #dd524d;
+
+
+// Bars
+// --------------------------------------------------
+$bar-base-height:  44px;
+$bar-tab-height:   50px;
+$bar-side-spacing: 10px;
+
+
+// Buttons
+// --------------------------------------------------
+$button-directional-padding: 20px;
+$button-directional-margin: -($bar-side-spacing/2);
\ No newline at end of file