diff options
author | connors <connor.sears@github.com> | 2014-02-24 08:41:42 +0400 |
---|---|---|
committer | connors <connor.sears@github.com> | 2014-02-24 08:41:42 +0400 |
commit | 4366221784497b8d48eb626b3b7139d76f117260 (patch) | |
tree | 946cccb802cccf1635d9042d73c3ebd30337f356 | |
parent | 7b792baf61dcceaa015e3b46a141d6ce03ced2b6 (diff) |
adding the platform toggle back in
-rw-r--r-- | docs/assets/css/docs.css | 40 | ||||
-rw-r--r-- | docs/assets/js/docs.js | 21 | ||||
-rw-r--r-- | docs/components.html | 4 | ||||
-rw-r--r-- | sass/docs.scss | 41 |
4 files changed, 55 insertions, 51 deletions
diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index 994a275..137ada9 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -376,41 +376,37 @@ body { } .platform-toggle { - display: none; - padding-top: 15px; - padding-bottom: 90px; -} -.platform-toggle.fixed { + padding-top: 12px; + padding-bottom: 12px; position: fixed; top: 0; bottom: auto; left: 0; right: 0; z-index: 20; - padding-top: 8px; - padding-bottom: 8px; - background-image: linear-gradient(45deg, #317ca6 0%, #254456 100%); - -webkit-transition: padding-top 0.2s linear, padding-bottom 0.2s linear; - -moz-transition: padding-top 0.2s linear, padding-bottom 0.2s linear; - transition: padding-top 0.2s linear, padding-bottom 0.2s linear; + background-color: #fff; + border-bottom: 1px solid #ddd; + -webkit-transform: translate3d(0, -55px, 0); + -ms-transform: translate3d(0, -55px, 0); + transform: translate3d(0, -55px, 0); + -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 { diff --git a/docs/assets/js/docs.js b/docs/assets/js/docs.js index 38cfb92..f29dfee 100644 --- a/docs/assets/js/docs.js +++ b/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'); }); }); diff --git a/docs/components.html b/docs/components.html index 1358c88..c4d360b 100644 --- a/docs/components.html +++ b/docs/components.html @@ -14,11 +14,11 @@ title: Components · Ratchet </div> </div> </div> - + <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 diff --git a/sass/docs.scss b/sass/docs.scss index a58e6c1..b779b04 100644 --- a/sass/docs.scss +++ b/sass/docs.scss @@ -386,41 +386,30 @@ body { // -------------------------------------------------- .platform-toggle { - display: none; - padding-top: 15px; - padding-bottom: 90px; + padding-top: 12px; + padding-bottom: 12px; + position: fixed; + top: 0; + bottom: auto; + left: 0; + right: 0; + z-index: 20; + background-color: #fff; + border-bottom: 1px solid #ddd; + @include transform(translate3d(0, -55px, 0)); + @include transition(-webkit-transform .5s); - &.fixed { - position: fixed; - top: 0; - bottom: auto; - left: 0; - right: 0; - z-index: 20; - padding-top: 8px; - padding-bottom: 8px; - background-image: linear-gradient(45deg, #317ca6 0%, #254456 100%); - @include transition(padding-top .2s linear, padding-bottom .2s linear); + &.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; - } } } } |