adding the platform toggle back in
This commit is contained in:
Родитель
7b792baf61
Коммит
4366221784
|
@ -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 {
|
||||
|
|
|
@ -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'); });
|
||||
});
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
Загрузка…
Ссылка в новой задаче