input.jtoggler {
display: none !important;
}
.jtoggler:disabled + .jtoggler-control,
.jtoggler:checked:disabled + .jtoggler-control {
background-color: rgba(0,0,0,0.05);
}
.jtoggler:disabled + .jtoggler-control .jtoggler-handle {
background-color: #ccc;
}
.jtoggler:disabled + .jtoggler-control:hover {
cursor: default;
}
.jtoggler-wrapper {
display: inline-flex;
align-items: center;
margin-left: 7px;
margin-right:7px;
margin-top: 7px;
margin-bottom: 7px;
}
.jtoggler-control {
position: relative;
width: 70px;
height: 34px; border-radius: 34px;
box-shadow: inset 0 0 1px rgba(0,0,0,0.25); opacity:0.8;
}
.jtoggler-control:hover {
cursor: pointer;
}
.jtoggler-control .jtoggler-handle {
display: block;
position: absolute;
width: 28px;
height: 28px;
top: calc(50% - 14px);
left: 0;
background: #fff;
border-radius: 50%;
box-shadow: 0 1px 1px rgba(0,0,0,0.25);
transition: left 0.4s 0.1s;
}
.jtoggler:checked + .jtoggler-control { }
.jtoggler:checked + .jtoggler-control .jtoggler-handle {
left: 42px;
}
.jtoggler-label {
padding-left: 5px;
}
.jtoggler-radio {
display: none;
}
.jtoggler-btn-wrapper {
display: flex;
width: 33.33%;
}
.jtoggler-btn-wrapper:hover {
cursor: pointer;
}
.jtoggler-wrapper-multistate .jtoggler-control {
display: flex;
width: 90px; }
.jtoggler-wrapper-multistate .jtoggler-control.is-fully-active { }
.jtoggler-wrapper-multistate .jtoggler:disabled + .jtoggler-control:hover .jtoggler-btn-wrapper {
cursor: default;
}
.jtoggler-btn-wrapper:nth-child(1).is-active ~ .jtoggler-handle {
left: 4px;
background:white;
}
.jtoggler-btn-wrapper:nth-child(2).is-active ~ .jtoggler-handle {
left: 30px;
background: white;
}
.jtoggler-btn-wrapper:nth-child(3).is-active ~ .jtoggler-handle {
left: 58px;
background: white;
}