fix toggles js up. broke ios toggles
This commit is contained in:
Родитель
3e4942936f
Коммит
4718619bb7
|
@ -335,16 +335,42 @@ textarea,
|
|||
display: none;
|
||||
}
|
||||
|
||||
.toggle .toggle-handle {
|
||||
border: 1px solid #b1b1b1;
|
||||
.toggle {
|
||||
width: 104px;
|
||||
height: 28px;
|
||||
border: 2px solid #d7d7d7;
|
||||
border-radius: 0;
|
||||
background-color: #d7d7d7;
|
||||
}
|
||||
.toggle:active .toggle-handle {
|
||||
width: 35px;
|
||||
.toggle .toggle-handle {
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 50px;
|
||||
height: 24px;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
background-color: #bebebe;
|
||||
}
|
||||
.toggle:before {
|
||||
top: 1px;
|
||||
right: auto;
|
||||
left: 11px;
|
||||
z-index: 3;
|
||||
color: #fff;
|
||||
}
|
||||
.toggle.active {
|
||||
border: 2px solid #99cc00;
|
||||
background-color: #99cc00;
|
||||
background-color: #d7d7d7;
|
||||
}
|
||||
.toggle.active .toggle-handle {
|
||||
border-color: #99cc00;
|
||||
margin-right: 2px;
|
||||
background-color: #33b5e5;
|
||||
border-color: #33b5e5;
|
||||
-webkit-transform: translate3d(50px, 0, 0);
|
||||
transform: translate3d(50px, 0, 0);
|
||||
}
|
||||
.toggle.active:before {
|
||||
left: auto;
|
||||
right: 15px;
|
||||
color: #fff;
|
||||
content: "On";
|
||||
}
|
||||
|
|
|
@ -720,9 +720,9 @@
|
|||
if (!toggle) return;
|
||||
|
||||
var handle = toggle.querySelector('.toggle-handle');
|
||||
var toggleWidth = toggle.offsetWidth;
|
||||
var handleWidth = handle.offsetWidth;
|
||||
var offset = toggle.classList.contains('active') ? (toggleWidth - handleWidth) - 2 : 0;
|
||||
var toggleWidth = toggle.clientWidth;
|
||||
var handleWidth = handle.clientWidth;
|
||||
var offset = toggle.classList.contains('active') ? (toggleWidth - handleWidth) : 0;
|
||||
|
||||
start = { pageX : e.touches[0].pageX - offset, pageY : e.touches[0].pageY };
|
||||
touchMove = false;
|
||||
|
@ -737,9 +737,9 @@
|
|||
|
||||
var handle = toggle.querySelector('.toggle-handle');
|
||||
var current = e.touches[0];
|
||||
var toggleWidth = toggle.offsetWidth;
|
||||
var handleWidth = 28;
|
||||
var offset = (toggleWidth - handleWidth) - 2;
|
||||
var toggleWidth = toggle.clientWidth;
|
||||
var handleWidth = handle.clientWidth;
|
||||
var offset = toggleWidth - handleWidth;
|
||||
|
||||
touchMove = true;
|
||||
distanceX = current.pageX - start.pageX;
|
||||
|
@ -760,9 +760,9 @@
|
|||
if (!toggle) return;
|
||||
|
||||
var handle = toggle.querySelector('.toggle-handle');
|
||||
var toggleWidth = toggle.offsetWidth;
|
||||
var handleWidth = 28;
|
||||
var offset = (toggleWidth - handleWidth) - 2;
|
||||
var toggleWidth = toggle.clientWidth;
|
||||
var handleWidth = handle.clientWidth;
|
||||
var offset = (toggleWidth - handleWidth);
|
||||
var slideOn = (!touchMove && !toggle.classList.contains('active')) || (touchMove && (distanceX > (toggleWidth/2 - handleWidth/2)));
|
||||
|
||||
if (slideOn) handle.style.webkitTransform = 'translate3d(' + offset + 'px,0,0)';
|
||||
|
|
|
@ -1489,18 +1489,44 @@ hr {
|
|||
.platform-android .popover:before {
|
||||
display: none;
|
||||
}
|
||||
.platform-android .toggle .toggle-handle {
|
||||
border: 1px solid #b1b1b1;
|
||||
.platform-android .toggle {
|
||||
width: 104px;
|
||||
height: 28px;
|
||||
border: 2px solid #d7d7d7;
|
||||
border-radius: 0;
|
||||
background-color: #d7d7d7;
|
||||
}
|
||||
.platform-android .toggle:active .toggle-handle {
|
||||
width: 35px;
|
||||
.platform-android .toggle .toggle-handle {
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 50px;
|
||||
height: 24px;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
background-color: #bebebe;
|
||||
}
|
||||
.platform-android .toggle:before {
|
||||
top: 1px;
|
||||
right: auto;
|
||||
left: 11px;
|
||||
z-index: 3;
|
||||
color: #fff;
|
||||
}
|
||||
.platform-android .toggle.active {
|
||||
border: 2px solid #99cc00;
|
||||
background-color: #99cc00;
|
||||
background-color: #d7d7d7;
|
||||
}
|
||||
.platform-android .toggle.active .toggle-handle {
|
||||
border-color: #99cc00;
|
||||
margin-right: 2px;
|
||||
background-color: #33b5e5;
|
||||
border-color: #33b5e5;
|
||||
-webkit-transform: translate3d(50px, 0, 0);
|
||||
transform: translate3d(50px, 0, 0);
|
||||
}
|
||||
.platform-android .toggle.active:before {
|
||||
left: auto;
|
||||
right: 15px;
|
||||
color: #fff;
|
||||
content: "On";
|
||||
}
|
||||
.platform-android .device {
|
||||
font-family: 'Roboto', sans-serif;
|
||||
|
|
|
@ -26,9 +26,9 @@
|
|||
if (!toggle) return;
|
||||
|
||||
var handle = toggle.querySelector('.toggle-handle');
|
||||
var toggleWidth = toggle.offsetWidth;
|
||||
var handleWidth = handle.offsetWidth;
|
||||
var offset = toggle.classList.contains('active') ? (toggleWidth - handleWidth) - 2 : 0;
|
||||
var toggleWidth = toggle.clientWidth;
|
||||
var handleWidth = handle.clientWidth;
|
||||
var offset = toggle.classList.contains('active') ? (toggleWidth - handleWidth) : 0;
|
||||
|
||||
start = { pageX : e.touches[0].pageX - offset, pageY : e.touches[0].pageY };
|
||||
touchMove = false;
|
||||
|
@ -43,9 +43,9 @@
|
|||
|
||||
var handle = toggle.querySelector('.toggle-handle');
|
||||
var current = e.touches[0];
|
||||
var toggleWidth = toggle.offsetWidth;
|
||||
var handleWidth = 28;
|
||||
var offset = (toggleWidth - handleWidth) - 2;
|
||||
var toggleWidth = toggle.clientWidth;
|
||||
var handleWidth = handle.clientWidth;
|
||||
var offset = toggleWidth - handleWidth;
|
||||
|
||||
touchMove = true;
|
||||
distanceX = current.pageX - start.pageX;
|
||||
|
@ -66,9 +66,9 @@
|
|||
if (!toggle) return;
|
||||
|
||||
var handle = toggle.querySelector('.toggle-handle');
|
||||
var toggleWidth = toggle.offsetWidth;
|
||||
var handleWidth = 28;
|
||||
var offset = (toggleWidth - handleWidth) - 2;
|
||||
var toggleWidth = toggle.clientWidth;
|
||||
var handleWidth = handle.clientWidth;
|
||||
var offset = (toggleWidth - handleWidth);
|
||||
var slideOn = (!touchMove && !toggle.classList.contains('active')) || (touchMove && (distanceX > (toggleWidth/2 - handleWidth/2)));
|
||||
|
||||
if (slideOn) handle.style.webkitTransform = 'translate3d(' + offset + 'px,0,0)';
|
||||
|
|
|
@ -479,20 +479,45 @@ textarea,
|
|||
// Toggles styles
|
||||
// --------------------------------------------------
|
||||
.toggle {
|
||||
width: 104px;
|
||||
height: 28px;
|
||||
border: 2px solid #d7d7d7;
|
||||
border-radius: 0;
|
||||
background-color: #d7d7d7;
|
||||
|
||||
// Sliding handle
|
||||
.toggle-handle {
|
||||
border: $border-default;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 50px;
|
||||
height: 24px;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
background-color: #bebebe;
|
||||
}
|
||||
&:active .toggle-handle {
|
||||
width: 35px;
|
||||
&:before {
|
||||
top: 1px;
|
||||
right: auto;
|
||||
left: 11px;
|
||||
z-index: 3;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
// Active state for toggle
|
||||
&.active {
|
||||
border: 2px solid $positive-color;
|
||||
background-color: $positive-color;
|
||||
background-color: #d7d7d7;
|
||||
|
||||
.toggle-handle {
|
||||
border-color: $positive-color;
|
||||
margin-right: 2px;
|
||||
background-color: $primary-color;
|
||||
border-color: $primary-color;
|
||||
@include transform(translate3d(50px,0,0));
|
||||
}
|
||||
&:before {
|
||||
left: auto;
|
||||
right: 15px;
|
||||
color: #fff;
|
||||
content: "On";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
Загрузка…
Ссылка в новой задаче