adding the platform toggle back in

docs/assets/css/docs.css

@@ -376,41 +376,37 @@ body {
 }
 
 .platform-toggle {
-  display: none;
+  padding-top: 12px;
-  padding-top: 15px;
+  padding-bottom: 12px;
-  padding-bottom: 90px;
-}
-.platform-toggle.fixed {
   position: fixed;
   top: 0;
   bottom: auto;
   left: 0;
   right: 0;
   z-index: 20;
-  padding-top: 8px;
+  background-color: #fff;
-  padding-bottom: 8px;
+  border-bottom: 1px solid #ddd;
-  background-image: linear-gradient(45deg, #317ca6 0%, #254456 100%);
+  -webkit-transform: translate3d(0, -55px, 0);
-  -webkit-transition: padding-top 0.2s linear, padding-bottom 0.2s linear;
+  -ms-transform: translate3d(0, -55px, 0);
-  -moz-transition: padding-top 0.2s linear, padding-bottom 0.2s linear;
+  transform: translate3d(0, -55px, 0);
-  transition: padding-top 0.2s linear, padding-bottom 0.2s linear;
+  -webkit-transition: -webkit-transform 0.5s;
+  -moz-transition: -webkit-transform 0.5s;
+  transition: -webkit-transform 0.5s;
+}
+.platform-toggle.visible {
+  -webkit-transform: translateY(0);
+  -ms-transform: translateY(0);
+  transform: translateY(0);
+  -webkit-transform: translate3d(0, 0, 0);
+  -ms-transform: translate3d(0, 0, 0);
+  transform: translate3d(0, 0, 0);
 }
 .platform-toggle .segmented-control {
   max-width: 300px;
   margin: 0 auto;
-  border-color: #00d1fe;
-  background-color: transparent;
 }
 .platform-toggle .segmented-control .control-item {
   cursor: pointer;
-  color: #00d1fe;
-  border-color: #00d1fe;
-}
-.platform-toggle .segmented-control .control-item:active {
-  background-color: rgba(0, 209, 254, 0.3);
-}
-.platform-toggle .segmented-control .control-item.active {
-  color: #fff;
-  background-color: #00d1fe;
 }
 
 .component {

docs/assets/js/docs.js

@@ -14,6 +14,10 @@ $(function() {
   var currentActive;
   var topCache;
   var eventListeners;
+  var platformToggle;
+  var toggleTop;
+  var toggleHeight;
+
 
   var initialize = function () {
     currentActive        = 0;
@@ -32,8 +36,9 @@ $(function() {
     pageHeight           = $(document).height();
     contentPadding       = parseInt($('.docs-content').css('padding-bottom'));
     footerHeight         = $('.docs-footer').outerHeight(false);
+    platformToggle       = $('.js-platform-toggle');
 
-    // Device placment
+    // Device placement
     if (windowWidth >= 768) {
       device.initialLeft   = device.offset().left;
       device.initialTop    = device.initialTop || device.offset().top;
@@ -42,6 +47,7 @@ $(function() {
 
     checkDesktopContent();
     calculateScroll();
+    calculateToggle();
 
     if (!eventListeners) addEventListeners();
   }
@@ -94,6 +100,7 @@ $(function() {
     });
 
     win.on('scroll', calculateScroll);
+    win.on('scroll', calculateToggle);
   }
 
   var checkDesktopContent = function () {
@@ -147,6 +154,18 @@ $(function() {
     }
   }
 
+  // Platform toggle
+  var calculateToggle = function () {
+    var currentTop   = win.scrollTop();
+    var headerHeight = $('.docs-sub-header').outerHeight();
+
+    if(currentTop >= headerHeight) {
+      platformToggle.addClass('visible');
+    } else if (currentTop <= headerHeight) {
+      platformToggle.removeClass('visible');
+    }
+  }
+
   $(window).on('load resize', initialize);
   $(window).on('load', function () { new FingerBlast('.device-content'); });
 });

docs/components.html

@@ -18,7 +18,7 @@ title: Components · Ratchet
     <div id="carbonads-container"><div class="carbonad"><div id="azcarbon"></div><script type="text/javascript">var z = document.createElement("script"); z.type = "text/javascript"; z.async = true; z.src = "http://engine.carbonads.com/z/58147/azcarbon_2_1_0_HORIZ"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(z, s);</script></div></div>
   </div>
 
-  <div class="platform-toggle">
+  <div class="platform-toggle js-platform-toggle">
     <div class="segmented-control">
       <a  class="platform-switch control-item active" data-platform="">
         Base

sass/docs.scss

@@ -386,41 +386,30 @@ body {
 // --------------------------------------------------
 
 .platform-toggle {
-  display: none;
+  padding-top: 12px;
-  padding-top: 15px;
+  padding-bottom: 12px;
-  padding-bottom: 90px;
-
-  &.fixed {
   position: fixed;
   top: 0;
   bottom: auto;
   left: 0;
   right: 0;
   z-index: 20;
-    padding-top: 8px;
+  background-color: #fff;
-    padding-bottom: 8px;
+  border-bottom: 1px solid #ddd;
-    background-image: linear-gradient(45deg, #317ca6 0%, #254456 100%);
+  @include transform(translate3d(0, -55px, 0));
-    @include transition(padding-top .2s linear, padding-bottom .2s linear);
+  @include transition(-webkit-transform .5s);
+
+  &.visible {
+    @include transform(translateY(0));
+    @include transform(translate3d(0, 0, 0));
   }
 
   .segmented-control {
     max-width: 300px;
     margin: 0 auto;
-    border-color: #00d1fe;
-    background-color: transparent;
 
     .control-item {
       cursor: pointer;
-      color: #00d1fe;
-      border-color: #00d1fe;
-      
-      &:active {
-        background-color: rgba(0,209,254,.3);
-      }
-      &.active {
-        color: #fff;
-        background-color: #00d1fe;
-      }
     }
   }
 }