1
0
mirror of https://github.com/s00500/ESPUI.git synced 2024-12-23 00:40:49 +00:00

Fixing Switch style in up to date firefox

This commit is contained in:
Lukas Bachschwell 2018-05-26 23:18:05 +02:00
parent 27a33e55e7
commit d9648152ef
4 changed files with 28 additions and 36 deletions

View File

@ -496,24 +496,31 @@
}
.switch input[type="checkbox"] {
display: none;
cursor: pointer;
height: 10px;
left: 12px;
height: 10px;
left: 12px;
position: absolute;
top: 8px;
width: 10px;
}
.in {
position: absolute;
top: 8px;
-webkit-transition: left 0.05s ease-in-out;
-moz-transition: left 0.05s ease-in-out;
-o-transition: left 0.05s ease-in-out;
-ms-transition: left 0.05s ease-in-out;
transition: left 0.05s ease-in-out;
width: 10px;
left: 12px;
-webkit-transition: left 0.08s ease-in-out;
-moz-transition: left 0.08s ease-in-out;
-o-transition: left 0.08s ease-in-out;
-ms-transition: left 0.08s ease-in-out;
transition: left 0.08s ease-in-out;
}
.switch.checked input[type="checkbox"] {
left: 38px;
.switch.checked div {
left: 38px;
}
.switch input:before {
.switch .in:before {
background: #fff;
background: -moz-linear-gradient(top, #fff 0%, #f0f0f0 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fff), color-stop(100%, #f0f0f0));
@ -532,7 +539,7 @@
width: 26px;
}
.switch input:after {
.switch .in:after {
background: #f0f0f0;
background: -moz-linear-gradient(top, #f0f0f0 0%, #fff 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f0f0f0), color-stop(100%, #fff));
@ -548,20 +555,6 @@
width: 12px;
}
.switch .icon-ok, .switch .icon-remove {
line-height: 28px;
text-shadow: 0 -2px 0 rgba(0, 0, 0, 0.2);
margin: 0 9px;
}
.switch .icon-ok {
float: left;
}
.switch .icon-remove {
float: right;
}
/* ----------------------------------------------------------------------
Material Design Range Slider - by Ravikumar Chauhan
------------------------------------------------------------------------- */

File diff suppressed because one or more lines are too long

View File

@ -116,15 +116,14 @@ function start() {
break;
case UI_SWITCHER:
var label = "<label id='sl" + data.id + "' class='switch checked'>";
var input = "<input type='checkbox' id='s" + data.id + "' onClick='switcher(" + data.id + ",null)' checked>";
var input = "<div class='in'><input type='checkbox' id='s" + data.id + "' onClick='switcher(" + data.id + ",null)' checked></div>";
if (data.value == "0") {
label = "<label id='sl" + data.id + "' class='switch'>";
input = "<input type='checkbox' id='s" + data.id + "' onClick='switcher(" + data.id + ",null)' >";
input = "<div class='in'><input type='checkbox' id='s" + data.id + "' onClick='switcher(" + data.id + ",null)' ></div>";
}
$('#row').append(
"<div id='" + data.id + "' class='one columns card tcenter " + colorClass(data.color) + "'><h5>" + data.label + "</h5><hr/>" +
label + "<i class='icon-ok'></i>" +
"<i class='icon-remove'></i>" + input +
label + input +
"</label>" +
"</div>");
break;
@ -226,14 +225,14 @@ function start() {
"</div>"
);
$('#row').append(
"<script>" +
"rkmd_rangeSlider('#sl" + data.id + "');" +
"</script>"
"<script>" +
"rkmd_rangeSlider('#sl" + data.id + "');" +
"</script>"
);
break;
case UPDATE_SLIDER:
slider_move($('#sl'+data.id), data.value ,'100', false);
slider_move($('#sl' + data.id), data.value, '100', false);
break;
default:
console.error('Unknown type or event');

File diff suppressed because one or more lines are too long