reworking the toggle

components.html

@@ -21,7 +21,6 @@ base_url: "../"
     </div>
   </div>
 </header>
-
 <div class="platform-toggle">
   <ul class="segmented-controller">
     <li  class="platform-switch selected" data-platform="">

docs-assets/js/docs.js

@@ -37,7 +37,7 @@ $(function() {
 
     device.initialLeft   = device.offset().left;
     device.initialTop    = device.initialTop || device.offset().top;
-    device.dockingOffset = ($(window).height() + platformToggle.outerHeight() - device.height())/2;
+    device.dockingOffset = ($(window).height() - device.height())/2;
     checkDesktopContent();
     calculateScroll();
 
@@ -107,7 +107,7 @@ $(function() {
     var contentSectionItem;
     var currentTop = win.scrollTop();
 
-    if((device.initialTop - currentTop) <= device.dockingOffset + 41) {
+    if((device.initialTop - currentTop) <= device.dockingOffset + 113) {
       device[0].className = "device device-fixed";
       device.css({top: device.dockingOffset})
     } else {

lib/sass/docs.scss

@@ -1,5 +1,12 @@
 @import "variables.scss";
 @import "mixins.scss";
+// Devices
+.platform-ios {
+  @import "theme-ios.scss";
+}
+.platform-android {
+  @import "theme-android.scss";
+}
 
 //
 // Documentation
@@ -85,8 +92,7 @@ body {
 // --------------------------------------------------
 
 .docs-masthead {
-  padding-top: 100px;
+  padding-top: 60px;
-  padding-bottom: 130px;
   text-align: center;
   background-color: #1eb0e9;
 
@@ -153,28 +159,44 @@ body {
 // --------------------------------------------------
 
 .platform-toggle {
-  z-index: 3;
+  padding-top: 20px;
-  border-bottom: 1px solid #ddd;
+  padding-bottom: 70px;
-  background-color: #fff;
+  background-color: #1eb0e9;
+  @include transition(padding-top .2s linear, padding-bottom .2s linear);
 
   &.fixed {
     position: fixed;
     top: 0;
+    bottom: auto;
     left: 0;
     right: 0;
+    z-index: 3;
+    padding-top: 8px;
+    padding-bottom: 8px;
   }
 
   .segmented-controller {
     max-width: 300px;
-    margin: 8px auto;
+    margin: 0 auto;
-    border-color: #ccc;
+    border-color: #fff;
+    background-color: #1eb0e9;
 
     li {
       cursor: pointer;
-      border-color: #ccc;
+      border-color: #fff;
 
+      a { 
+        color: #fff;
+      }
+      &:active {
+        background-color: rgba(255,255,255,.3);
+      }
       &.selected {
-        background-color: #ccc;
+        background-color: #fff;
+
+        a {
+          color: #1eb0e9;
+        }
       }
     }
   }
@@ -316,7 +338,7 @@ hr {
     top: 117px;
     left: 37px;
     width: 320px;
-    height: 568px;
+    height: 569px;
     overflow: hidden;
     font-size: $font-size-default;
     line-height: $line-height-default;
@@ -517,13 +539,3 @@ hr {
     opacity: 1;
   }
 }
-
-// Devices
-// --------------------------------------------------
-
-.platform-ios {
-  @import "theme-ios.scss";
-}
-.platform-android {
-  @import "theme-android.scss";
-}