diff --git a/dist/ratchet.css b/dist/ratchet.css
index 9c8e135..370ee09 100644
--- a/dist/ratchet.css
+++ b/dist/ratchet.css
@@ -8,8 +8,6 @@
 * =====================================================
 */
 
-/* Hard reset
--------------------------------------------------- */
 html,
 body,
 div,
@@ -143,8 +141,6 @@ a {
 .bar-header-secondary ~ .content {
   padding-top: 88px; }
 
-/* General bar styles
--------------------------------------------------- */
 [class*="bar-"] {
   position: fixed;
   right: 0;
@@ -166,8 +162,6 @@ a {
 .bar-footer-secondary.bar-standard {
   box-shadow: 0 0px 1px rgba(0, 0, 0, 0.85); }
 
-/* Title bar
--------------------------------------------------- */
 .bar-title {
   top: 0;
   display: -webkit-box;
@@ -196,8 +190,6 @@ a {
 .bar-title .title a {
   color: inherit; }
 
-/* Tab bar
--------------------------------------------------- */
 .bar-tab {
   bottom: 0;
   height: 50px;
@@ -234,8 +226,6 @@ a {
 .tab-item.active .tab-label {
   color: #007aff; }
 
-/* Buttons in title bars
--------------------------------------------------- */
 .bar-title [class*="button"] {
   position: relative;
   z-index: 10;
@@ -264,8 +254,6 @@ a {
   background-color: transparent;
   opacity: .3; }
 
-/* Directional buttons in title bars
--------------------------------------------------- */
 .bar-title .button-prev:before,
 .bar-title .button-prev:after,
 .bar-title .button-next:before,
@@ -315,8 +303,6 @@ a {
   -webkit-transform: rotate(-45deg);
   transform: rotate(-45deg); }
 
-/* Block buttons in any bar
--------------------------------------------------- */
 [class*="bar"] .button-block {
   padding: 7px 0;
   margin-bottom: 0; }
@@ -324,8 +310,6 @@ a {
 [class*="bar"] .button-block:active {
   padding: 7px 0; }
 
-/* Segmented controller in any bar
--------------------------------------------------- */
 [class*="bar-"] .segmented-controller {
   margin-bottom: 0; }
 
@@ -333,15 +317,11 @@ a {
 [class*="bar-"] [class*="button"] + .segmented-controller {
   margin-left: 5px; }
 
-/* Segmented controller in a title bar
--------------------------------------------------- */
 .bar-title .segmented-controller {
   line-height: 18px;
   -webkit-box-flex: 1;
   box-flex: 1; }
 
-/* Search forms in standard bar
--------------------------------------------------- */
 .bar-standard input[type=search] {
   height: 32px;
   margin: 0; }
@@ -354,16 +334,16 @@ a {
     padding: 11px 60px 11px 0;
     margin-left: 15px;
     border-bottom: 1px solid rgba(0, 0, 0, 0.1); }
-  .table-view li:first-child {
-    border-top: 1px solid rgba(0, 0, 0, 0.1); }
-  .table-view li:last-child {
-    border-bottom: 0; }
-  .table-view li > a:not([class*="button"]) {
-    position: relative;
-    display: block;
-    padding: inherit;
-    margin: -11px -60px -11px 0;
-    color: inherit; }
+    .table-view li:first-child {
+      border-top: 1px solid rgba(0, 0, 0, 0.1); }
+    .table-view li:last-child {
+      border-bottom: 0; }
+    .table-view li > a:not([class*="button"]) {
+      position: relative;
+      display: block;
+      padding: inherit;
+      margin: -11px -60px -11px 0;
+      color: inherit; }
   .table-view.inset {
     width: auto;
     margin-right: 10px;
@@ -389,11 +369,11 @@ a {
     border-bottom: 1px solid rgba(0, 0, 0, 0.1);
     /* Rounding first divider on inset lists and remove border on the top */
     /* Rounding last divider on inset table views */ }
-    .table-view .table-view-divider :first-child {
+    .table-view .table-view-divider:first-child {
       top: 0;
       border-top-width: 0;
       border-radius: 6px 6px 0 0; }
-    .table-view .table-view-divider :last-child {
+    .table-view .table-view-divider:last-child {
       border-radius: 0 0 6px 6px; }
   .table-view .chevron,
   .table-view [class*="button"],
@@ -413,8 +393,6 @@ a {
   .table-view .toggle {
     margin-top: -15px; }
 
-/* Forms
--------------------------------------------------- */
 input,
 textarea,
 button,
@@ -468,8 +446,6 @@ select {
   background-image: linear-gradient(to bottom, #f8f8f8 0%, #d4d4d4 100%);
   box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1); }
 
-/* Input groups (cluster multiple inputs together into a single group)
----------------------------------------------------------------------- */
 .input-group {
   width: auto;
   height: auto;
@@ -486,8 +462,6 @@ select {
 .input-group input:last-child {
   border-bottom-width: 0; }
 
-/* Input groups with labels
--------------------------------------------------- */
 .input-row {
   overflow: hidden;
   border-bottom: 1px solid rgba(0, 0, 0, 0.2); }
@@ -508,8 +482,6 @@ select {
   margin-bottom: 0;
   border-bottom: 0; }
 
-/* General button styles
--------------------------------------------------- */
 [class*="button"] {
   position: relative;
   display: inline-block;
@@ -524,13 +496,10 @@ select {
   background-color: transparent;
   border: 1px solid rgba(0, 0, 0, 0.5);
   border-radius: 4px; }
+  [class*="button"]:active {
+    background-color: #333;
+    transition: background-color .1s linear; }
 
-[class*="button"]:active {
-  background-color: #333;
-  transition: background-color .1s linear; }
-
-/* Button modifiers
--------------------------------------------------- */
 .button-main,
 .button-positive,
 .button-negative {
@@ -590,33 +559,25 @@ button.button-block {
   padding-bottom: 4px;
   margin-right: 10px; }
 
-/* Chevrons
--------------------------------------------------- */
 .chevron {
   display: block;
   height: 20px; }
+  .chevron:before, .chevron:after {
+    position: relative;
+    display: block;
+    width: 10px;
+    height: 3px;
+    background-color: #c7c7cc;
+    content: ''; }
+  .chevron:before {
+    top: 6px;
+    -webkit-transform: rotate(45deg);
+    transform: rotate(45deg); }
+  .chevron:after {
+    top: 8px;
+    -webkit-transform: rotate(-45deg);
+    transform: rotate(-45deg); }
 
-.chevron:before,
-.chevron:after {
-  position: relative;
-  display: block;
-  width: 10px;
-  height: 3px;
-  background-color: #c7c7cc;
-  content: ''; }
-
-.chevron:before {
-  top: 6px;
-  -webkit-transform: rotate(45deg);
-  transform: rotate(45deg); }
-
-.chevron:after {
-  top: 8px;
-  -webkit-transform: rotate(-45deg);
-  transform: rotate(-45deg); }
-
-/* General count styles
--------------------------------------------------- */
 [class*="count"] {
   display: inline-block;
   padding: 4px 9px;
@@ -627,13 +588,6 @@ button.button-block {
   background-color: rgba(0, 0, 0, 0.3);
   border-radius: 100px; }
 
-/* Count modifiers
--------------------------------------------------- */
-.count-main,
-.count-positive,
-.count-negative {
-  color: #fff; }
-
 .count-main {
   background-color: #1eafe7; }
 
@@ -643,8 +597,6 @@ button.button-block {
 .count-negative {
   background-color: #e71e1e; }
 
-/* Segmented controllers
--------------------------------------------------- */
 .segmented-controller {
   display: -webkit-box;
   display: box;
@@ -658,41 +610,32 @@ button.button-block {
   border-radius: 4px;
   -webkit-box-orient: horizontal;
   box-orient: horizontal; }
+  .segmented-controller li {
+    overflow: hidden;
+    text-align: center;
+    white-space: nowrap;
+    border-left: 1px solid #007aff;
+    -webkit-box-flex: 1;
+    box-flex: 1; }
+    .segmented-controller li > a {
+      display: block;
+      padding: 8px 16px;
+      overflow: hidden;
+      line-height: 15px;
+      color: #007aff;
+      text-overflow: ellipsis; }
+    .segmented-controller li:first-child {
+      border-left-width: 0; }
+    .segmented-controller li.active {
+      background-color: #007aff;
+      transition: background-color .2s linear; }
+      .segmented-controller li.active > a {
+        color: #fff; }
+  .segmented-controller .segmented-controller-item {
+    display: none; }
+    .segmented-controller .segmented-controller-item.active {
+      display: block; }
 
-.segmented-controller li {
-  overflow: hidden;
-  text-align: center;
-  white-space: nowrap;
-  border-left: 1px solid #007aff;
-  -webkit-box-flex: 1;
-  box-flex: 1; }
-
-.segmented-controller li > a {
-  display: block;
-  padding: 8px 16px;
-  overflow: hidden;
-  line-height: 15px;
-  color: #007aff;
-  text-overflow: ellipsis; }
-
-.segmented-controller li:first-child {
-  border-left-width: 0; }
-
-.segmented-controller li.active {
-  background-color: #007aff;
-  transition: background-color .2s linear; }
-
-.segmented-controller li.active > a {
-  color: #fff; }
-
-.segmented-controller-item {
-  display: none; }
-
-.segmented-controller-item.active {
-  display: block; }
-
-/* Popovers (to be used with popovers.js)
--------------------------------------------------- */
 .popover {
   position: fixed;
   top: 55px;
@@ -779,15 +722,11 @@ button.button-block {
   color: #fff;
   background-color: #0876b1; }
 
-/* Popover animation
--------------------------------------------------- */
 .popover.visible {
   opacity: 1;
   -webkit-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0); }
 
-/* Backdrop (used as invisible touch escape)
--------------------------------------------------- */
 .backdrop {
   position: fixed;
   top: 0;
@@ -796,8 +735,6 @@ button.button-block {
   left: 0;
   z-index: 10; }
 
-/* Block level buttons in popovers
--------------------------------------------------- */
 .popover .button-block {
   margin-bottom: 5px;
   border: 1px solid #111; }
@@ -805,8 +742,6 @@ button.button-block {
 .popover .button-block:last-child {
   margin-bottom: 0; }
 
-/* Lists in popovers
--------------------------------------------------- */
 .popover .table-view {
   width: auto;
   max-height: 250px;
@@ -819,8 +754,6 @@ button.button-block {
   border-radius: 3px;
   -webkit-overflow-scrolling: touch; }
 
-/* Modals
--------------------------------------------------- */
 .modal {
   position: fixed;
   top: 0;
@@ -834,16 +767,13 @@ button.button-block {
   transform: translate3d(0, 100%, 0);
   -webkit-transition: -webkit-transform .25s ease-in-out, opacity 1ms .25s;
   transition: transform .25s ease-in-out, opacity 1ms .25s; }
-
-/* Modal - When active
--------------------------------------------------- */
-.modal.active {
-  opacity: 1;
-  height: 100%;
-  -webkit-transition: -webkit-transform .25s ease-in-out;
-  transition: transform .25 ease-in-out;
-  -webkit-transform: translate3d(0, 0, 0);
-  transform: translate3d(0, 0, 0); }
+  .modal.active {
+    opacity: 1;
+    height: 100%;
+    -webkit-transition: -webkit-transform .25s ease-in-out;
+    transition: transform .25 ease-in-out;
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0); }
 
 .slider,
 .slider > li {
@@ -895,28 +825,22 @@ button.button-block {
     -webkit-transform: translate3d(17px, 0, 0);
     transform: translate3d(17px, 0, 0); }
 
-/* Push styles (to be used with push.js)
--------------------------------------------------- */
 .content.fade {
   left: 0;
   opacity: 0;
   -webkit-transition: opacity .2s ease-in-out;
   transition: opacity .2s ease-in-out; }
-
-.content.fade.in {
-  opacity: 1; }
-
+  .content.fade.in {
+    opacity: 1; }
 .content.slide {
   -webkit-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);
   -webkit-transition: -webkit-transform .25s ease-in-out;
   transition: transform .25s ease-in-out;
   -webkit-transition-timing-function: cubic-bezier(0.1, 0.7, 0.1, 1); }
-
-.content.slide.left {
-  -webkit-transform: translate3d(-100%, 0, 0);
-  transform: translate3d(-100%, 0, 0); }
-
-.content.slide.right {
-  -webkit-transform: translate3d(100%, 0, 0);
-  transform: translate3d(100%, 0, 0); }
+  .content.slide.left {
+    -webkit-transform: translate3d(-100%, 0, 0);
+    transform: translate3d(-100%, 0, 0); }
+  .content.slide.right {
+    -webkit-transform: translate3d(100%, 0, 0);
+    transform: translate3d(100%, 0, 0); }
diff --git a/lib/sass/bars.scss b/lib/sass/bars.scss
index f96c7fb..33e396f 100644
--- a/lib/sass/bars.scss
+++ b/lib/sass/bars.scss
@@ -1,5 +1,6 @@
-/* General bar styles
--------------------------------------------------- */
+//
+// Bars
+// --------------------------------------------------
 
 [class*="bar-"] {
   position: fixed;
@@ -29,8 +30,8 @@
   box-shadow: 0 0px 1px rgba(0,0,0,.85);
 }
 
-/* Title bar
--------------------------------------------------- */
+// Nav bar
+// --------------------------------------------------
 
 // Bar docked to top of viewport for showing page title and actions
 .bar-title {
@@ -67,8 +68,8 @@
   color: inherit;
 }
 
-/* Tab bar
--------------------------------------------------- */
+// Tab bar
+// --------------------------------------------------
 
 // Bar docked to bottom used for primary app navigation
 .bar-tab {
@@ -116,8 +117,8 @@
  color: $app-color;
 }
 
-/* Buttons in title bars
--------------------------------------------------- */
+// Buttons in nav bars
+// --------------------------------------------------
 
 // Generic style for all buttons in .bar-title
 .bar-title [class*="button"] {
@@ -155,8 +156,8 @@
   opacity: .3;
 }
 
-/* Directional buttons in title bars
--------------------------------------------------- */
+// Directional buttons in nav bars
+// --------------------------------------------------
 
 .bar-title .button-prev:before,
 .bar-title .button-prev:after,
@@ -216,8 +217,8 @@
           transform: rotate(-45deg);
 }
 
-/* Block buttons in any bar
--------------------------------------------------- */
+// Block buttons in all bars
+// --------------------------------------------------
 
 // Add proper padding and replace buttons normal dropshadow with a shine from bar
 [class*="bar"] .button-block {
@@ -230,8 +231,8 @@
   padding: 7px 0;
 }
 
-/* Segmented controller in any bar
--------------------------------------------------- */
+// Segmented controller in all bars
+// --------------------------------------------------
 
 // Remove standard segmented bottom margin
 [class*="bar-"] .segmented-controller {
@@ -244,8 +245,8 @@
   margin-left: 5px;
 }
 
-/* Segmented controller in a title bar
--------------------------------------------------- */
+// Segmented controller in a nav bars
+// --------------------------------------------------
 
 .bar-title .segmented-controller {
   line-height: 18px;
@@ -254,8 +255,8 @@
 }
 
 
-/* Search forms in standard bar
--------------------------------------------------- */
+// Search forms in standard bar
+// --------------------------------------------------
 
 // Position/size search bar within the bar
 .bar-standard input[type=search] {
diff --git a/lib/sass/base.scss b/lib/sass/base.scss
index 5b54df4..0ad7e6a 100644
--- a/lib/sass/base.scss
+++ b/lib/sass/base.scss
@@ -1,5 +1,6 @@
-/* Hard reset
--------------------------------------------------- */
+//
+// Hard reset
+// --------------------------------------------------
 
 html,
 body,
diff --git a/lib/sass/buttons.scss b/lib/sass/buttons.scss
index 4651844..cc16807 100644
--- a/lib/sass/buttons.scss
+++ b/lib/sass/buttons.scss
@@ -1,5 +1,6 @@
-/* General button styles
--------------------------------------------------- */
+//
+// Buttons
+// --------------------------------------------------
 
 [class*="button"] {
   position: relative;
@@ -15,16 +16,16 @@
   background-color: transparent;
   border: 1px solid rgba(0, 0, 0, .5);
   border-radius: 4px;
-}
 
-// Active
-[class*="button"]:active {
-  background-color: #333;
-  transition: background-color .1s linear;
+  // Active
+  &:active {
+    background-color: #333;
+    transition: background-color .1s linear;
+  }
 }
 
-/* Button modifiers
--------------------------------------------------- */
+// Buttons modifiers
+// --------------------------------------------------
 
 // Overriding styles for buttons with modifiers
 .button-main,
diff --git a/lib/sass/chevrons.scss b/lib/sass/chevrons.scss
index bf1c1cd..53b4c00 100644
--- a/lib/sass/chevrons.scss
+++ b/lib/sass/chevrons.scss
@@ -1,30 +1,31 @@
-/* Chevrons
--------------------------------------------------- */
+//
+// Chevrons
+// --------------------------------------------------
 
 .chevron {
   display: block;
   height: 20px;
-}
 
-// Base styles for both 1/2's of the chevron
-.chevron:before,
-.chevron:after {
-  position: relative;
-  display: block;
-  width: 10px;
-  height: 3px;
-  background-color: #c7c7cc;
-  content: '';
-}
+  // Base styles for both halves of the chevron
+  &:before,
+  &:after {
+    position: relative;
+    display: block;
+    width: 10px;
+    height: 3px;
+    background-color: #c7c7cc;
+    content: '';
+  }
 
-// Position and rotate respective 1/2's of the chevron
-.chevron:before {
-  top: 6px;
-  -webkit-transform: rotate(45deg);
-          transform: rotate(45deg);
-}
-.chevron:after {
-  top: 8px;
-  -webkit-transform: rotate(-45deg);
-          transform: rotate(-45deg);
+  // Position and rotate respective halves of the chevron
+  &:before {
+    top: 6px;
+    -webkit-transform: rotate(45deg);
+            transform: rotate(45deg);
+  }
+  &:after {
+    top: 8px;
+    -webkit-transform: rotate(-45deg);
+            transform: rotate(-45deg);
+  }
 }
\ No newline at end of file
diff --git a/lib/sass/counts.scss b/lib/sass/counts.scss
index a8e1616..1903d4c 100644
--- a/lib/sass/counts.scss
+++ b/lib/sass/counts.scss
@@ -1,5 +1,6 @@
-/* General count styles
--------------------------------------------------- */
+//
+// Counts
+// --------------------------------------------------
 
 [class*="count"] {
   display: inline-block;
@@ -12,15 +13,8 @@
   border-radius: 100px;
 }
 
-/* Count modifiers
--------------------------------------------------- */
-
-// Overriding styles for counts with modifiers
-.count-main,
-.count-positive,
-.count-negative {
-  color: #fff;
-}
+// Count modifiers
+// --------------------------------------------------
 
 // Main count
 .count-main {
diff --git a/lib/sass/forms.scss b/lib/sass/forms.scss
index 3255ae5..a954ccf 100644
--- a/lib/sass/forms.scss
+++ b/lib/sass/forms.scss
@@ -1,5 +1,6 @@
-/* Forms
--------------------------------------------------- */
+//
+// Forms
+// --------------------------------------------------
 
 // Force form elements to inherit font styles
 input,
@@ -65,8 +66,8 @@ select {
 }
 
 
-/* Input groups (cluster multiple inputs together into a single group)
----------------------------------------------------------------------- */
+// Input groups (cluster multiple inputs together into a single group)
+// -------------------------------------------------------------------
 
 // Reset from initial form setup styles
 .input-group {
@@ -90,8 +91,9 @@ select {
   border-bottom-width: 0;
 }
 
-/* Input groups with labels
--------------------------------------------------- */
+// Input groups with labels
+// --------------------------------------------------
+
 
 // To use labels with input groups, wrap a label and an input in an .input-row
 .input-row {
diff --git a/lib/sass/modals.scss b/lib/sass/modals.scss
index 1a7c1a2..b865714 100644
--- a/lib/sass/modals.scss
+++ b/lib/sass/modals.scss
@@ -1,5 +1,7 @@
-/* Modals
--------------------------------------------------- */
+//
+// Modals
+// --------------------------------------------------
+
 .modal {
   position: fixed; 
   top: 0;
@@ -13,15 +15,14 @@
           transform: translate3d(0, 100%, 0);
   -webkit-transition: -webkit-transform .25s ease-in-out, opacity 1ms .25s;
           transition:         transform .25s ease-in-out, opacity 1ms .25s;
-}
 
-/* Modal - When active
--------------------------------------------------- */
-.modal.active {
-  opacity: 1;
-  height: 100%;
-  -webkit-transition: -webkit-transform .25s ease-in-out;
-          transition:         transform .25 ease-in-out;
-  -webkit-transform: translate3d(0, 0, 0);
-          transform: translate3d(0, 0, 0);
+  // Active modal
+  &.active {
+    opacity: 1;
+    height: 100%;
+    -webkit-transition: -webkit-transform .25s ease-in-out;
+            transition:         transform .25 ease-in-out;
+    -webkit-transform: translate3d(0, 0, 0);
+            transform: translate3d(0, 0, 0);
+  }
 }
\ No newline at end of file
diff --git a/lib/sass/popovers.scss b/lib/sass/popovers.scss
index f4f3b9a..024f01a 100644
--- a/lib/sass/popovers.scss
+++ b/lib/sass/popovers.scss
@@ -1,5 +1,6 @@
-/* Popovers (to be used with popovers.js)
--------------------------------------------------- */
+//
+// Popovers (to be used with popovers.js)
+// --------------------------------------------------
 
 .popover {
   position: fixed;
@@ -101,8 +102,8 @@
   background-color: #0876b1;
 }
 
-/* Popover animation
--------------------------------------------------- */
+// Popover animation
+// --------------------------------------------------
 
 .popover.visible {
   opacity: 1;
@@ -110,8 +111,8 @@
           transform: translate3d(0, 0, 0);
 }
 
-/* Backdrop (used as invisible touch escape)
--------------------------------------------------- */
+// Backdrop (used as invisible touch escape)
+// --------------------------------------------------
 
 .backdrop {
   position: fixed;
@@ -122,8 +123,8 @@
   z-index: 10;
 }
 
-/* Block level buttons in popovers
--------------------------------------------------- */
+// Block level buttons in popovers
+// --------------------------------------------------
 
 // Positioning and giving darker border to look sharp against dark popover
 .popover .button-block {
@@ -136,8 +137,8 @@
   margin-bottom: 0;
 }
 
-/* Lists in popovers
--------------------------------------------------- */
+// Table views in popovers
+// --------------------------------------------------
 
 .popover .table-view {
   width: auto;
diff --git a/lib/sass/push.scss b/lib/sass/push.scss
index d35793c..863d02d 100644
--- a/lib/sass/push.scss
+++ b/lib/sass/push.scss
@@ -1,29 +1,37 @@
-/* Push styles (to be used with push.js)
--------------------------------------------------- */
+//
+// Push styles (to be used with push.js)
+// --------------------------------------------------
 
-// Fade animation 
-.content.fade {
-  left: 0;
-  opacity: 0;
-  -webkit-transition: opacity .2s ease-in-out;
-          transition: opacity .2s ease-in-out;
-}
-.content.fade.in {
-  opacity: 1;
-}
-// Slide animation iOS7
-.content.slide {
-  -webkit-transform: translate3d(0, 0, 0);
-          transform: translate3d(0, 0, 0);
-  -webkit-transition: -webkit-transform .25s ease-in-out;
-          transition:         transform .25s ease-in-out;
-  -webkit-transition-timing-function: cubic-bezier(.1, .7, .1, 1); //Thanks to @c2prods
-}
-.content.slide.left {
-  -webkit-transform: translate3d(-100%, 0, 0);
-          transform: translate3d(-100%, 0, 0);
-}
-.content.slide.right {
-  -webkit-transform: translate3d(100%, 0, 0);
-          transform: translate3d(100%, 0, 0);
+.content {
+  
+  // Fade animation 
+  &.fade {
+    left: 0;
+    opacity: 0;
+    -webkit-transition: opacity .2s ease-in-out;
+            transition: opacity .2s ease-in-out;
+
+    &.in {
+      opacity: 1;
+    }
+  }
+
+  // Slide animation iOS7
+  &.slide {
+    -webkit-transform: translate3d(0, 0, 0);
+            transform: translate3d(0, 0, 0);
+    -webkit-transition: -webkit-transform .25s ease-in-out;
+            transition:         transform .25s ease-in-out;
+    -webkit-transition-timing-function: cubic-bezier(.1, .7, .1, 1); //Thanks to @c2prods
+
+    &.left {
+      -webkit-transform: translate3d(-100%, 0, 0);
+              transform: translate3d(-100%, 0, 0);
+    }
+
+    &.right {
+      -webkit-transform: translate3d(100%, 0, 0);
+              transform: translate3d(100%, 0, 0);
+    }
+  }
 }
\ No newline at end of file
diff --git a/lib/sass/segmented-controllers.scss b/lib/sass/segmented-controllers.scss
index dc900c7..629f085 100644
--- a/lib/sass/segmented-controllers.scss
+++ b/lib/sass/segmented-controllers.scss
@@ -1,5 +1,6 @@
-/* Segmented controllers
--------------------------------------------------- */
+//
+// Segmented controllers
+// --------------------------------------------------
 
 .segmented-controller {
   display: -webkit-box;
@@ -14,47 +15,47 @@
   border-radius: 4px;
   -webkit-box-orient: horizontal;
           box-orient: horizontal;
-}
 
-// Section within controller
-.segmented-controller li {
-  overflow: hidden;
-  text-align: center;
-  white-space: nowrap;
-  border-left: 1px solid $app-color;
-  -webkit-box-flex: 1;
-          box-flex: 1;
-}
-
-// Link that fills each section
-.segmented-controller li > a {
-  display: block;
-  padding: 8px 16px;
-  overflow: hidden;
-  line-height: 15px;
-  color: $app-color;
-  text-overflow: ellipsis;
-}
+  // Section within controller
+  li {
+    overflow: hidden;
+    text-align: center;
+    white-space: nowrap;
+    border-left: 1px solid $app-color;
+    -webkit-box-flex: 1;
+            box-flex: 1;
+    
+    // Link that fills each section
+    > a {
+      display: block;
+      padding: 8px 16px;
+      overflow: hidden;
+      line-height: 15px;
+      color: $app-color;
+      text-overflow: ellipsis;
+    }
 
-// Remove border-left and shadow from first section
-.segmented-controller li:first-child {
-  border-left-width: 0;
-}
+    // Remove border-left and shadow from first section
+    &:first-child {
+      border-left-width: 0;
+    }
 
-// Active segment of controller
-.segmented-controller li.active {
-  background-color: $app-color;
-  transition: background-color .2s linear;
-}
-// Set color of links to white
-.segmented-controller li.active > a {
-  color: #fff;
-}
+    // Active segment of controller
+    &.active {
+      background-color: $app-color;
+      transition: background-color .2s linear;
 
-.segmented-controller-item {
-  display: none;
-}
+      // Set color of links to white
+      > a {
+        color: #fff;
+      }
+    }
+  }
+  .segmented-controller-item {
+    display: none;
 
-.segmented-controller-item.active {
-  display: block;
+    &.active {
+      display: block;
+    }
+  }
 }
\ No newline at end of file
diff --git a/lib/sass/table-views.scss b/lib/sass/table-views.scss
index 762befe..0750981 100644
--- a/lib/sass/table-views.scss
+++ b/lib/sass/table-views.scss
@@ -12,25 +12,25 @@
     padding: 11px 60px 11px 0; // Given extra right padding to accomodate counts, chevrons or buttons
     margin-left: 15px;
     border-bottom: 1px solid rgba(0, 0, 0, .1);
-  }
-
-  // Give top border to first list items
-  li:first-child {
-    border-top: 1px solid rgba(0, 0, 0, .1);
-  }
+    
+    // Give top border to first list items
+    &:first-child {
+      border-top: 1px solid rgba(0, 0, 0, .1);
+    }
 
-  // Remove the border from the last list item
-  li:last-child {
-    border-bottom: 0;
-  }
+    // Remove the border from the last list item
+    &:last-child {
+      border-bottom: 0;
+    }
 
-  // If a table view of links, make sure the child <a> takes up full table view item tap area (want to avoid selecting child buttons though)
-  li > a:not([class*="button"]) {
-    position: relative;
-    display: block;
-    padding: inherit;
-    margin: -11px -60px -11px 0;
-    color: inherit;
+    // If a it's a table view of links, make sure the child <a> takes up full table view item tap area (want to avoid selecting child buttons though)
+    > a:not([class*="button"]) {
+      position: relative;
+      display: block;
+      padding: inherit;
+      margin: -11px -60px -11px 0;
+      color: inherit;
+    }
   }
 
 
@@ -72,14 +72,14 @@
     border-bottom: 1px solid rgba(0, 0, 0, .1);
 
     /* Rounding first divider on inset lists and remove border on the top */
-    :first-child {
+    &:first-child {
       top: 0;
       border-top-width: 0;
       border-radius: 6px 6px 0 0;
     }
 
     /* Rounding last divider on inset table views */
-    :last-child {
+    &:last-child {
       border-radius: 0 0 6px 6px;
     }
   }
@@ -105,7 +105,7 @@
 
   // Push count over if there's a sibling chevron
   .chevron + [class*="count"] {
-  right: 30px;
+    right: 30px;
   }
 
   // Position buttons vertically centered on the right in table view items