iobroker.schedule-switcher
Version:
Switch states over scheduler
68 lines (65 loc) • 1.51 kB
CSS
/*
Material Design Radio Button CSS only
A PEN BY Hannes Kamecke
https://codepen.io/hansmaad/pen/zBdzxp
Modified for dark theme and compiled to pure css.
*/
@keyframes ripple {
0% {
box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0);
}
50% {
box-shadow: 0px 0px 0px 13px rgba(255, 255, 255, 0.1);
}
100% {
box-shadow: 0px 0px 0px 13px rgba(255, 255, 255, 0);
}
}
.md-radio {
margin: 16px 0;
}
.md-radio.md-radio-inline {
display: inline-block;
}
.md-radio input[type="radio"] {
display: none;
}
.md-radio input[type="radio"]:checked + label:before {
border-color: var(--ts-widget-primary-color, #337ab7);
animation: ripple 0.2s linear forwards;
}
.md-radio input[type="radio"]:checked + label:after {
transform: scale(1);
}
.md-radio label {
display: inline-block;
height: 20px;
position: relative;
padding: 0 30px;
margin-bottom: 0;
cursor: pointer;
vertical-align: bottom;
}
.md-radio label:before,
.md-radio label:after {
position: absolute;
content: "";
border-radius: 50%;
transition: all 0.3s ease;
transition-property: transform, border-color;
}
.md-radio label:before {
left: -1.5px;
top: -1.5px;
width: 20px;
height: 20px;
border: 2px solid rgba(255, 255, 255, 0.54);
}
.md-radio label:after {
top: 5.5px;
left: 5.5px;
width: 10px;
height: 10px;
transform: scale(0);
background: var(--ts-widget-primary-color, #337ab7);
}