element-call/src/input/Toggle.module.css

47 lines
680 B
CSS
Raw Normal View History

2022-04-29 00:44:50 +00:00
.toggle {
align-items: center;
margin-bottom: 20px;
}
.button {
position: relative;
padding: 0;
2022-05-04 10:24:25 +00:00
transition: background-color 0.2s ease-out 0.1s;
2022-04-29 00:44:50 +00:00
width: 44px;
height: 24px;
border: none;
border-radius: 21px;
2022-05-04 10:24:25 +00:00
background-color: #6f7882;
2022-04-29 00:44:50 +00:00
cursor: pointer;
margin-right: 8px;
}
.ball {
transition: left 0.15s ease-out 0.1s;
position: absolute;
width: 20px;
height: 20px;
border-radius: 21px;
2022-05-04 10:24:25 +00:00
background-color: #15191e;
2022-04-29 00:44:50 +00:00
left: 2px;
top: 2px;
}
.label {
padding: 10px 8px;
line-height: 24px;
2022-05-04 10:24:25 +00:00
color: #6f7882;
2022-04-29 00:44:50 +00:00
}
.toggle.on .button {
2022-05-04 10:24:25 +00:00
background-color: #0dbd8b;
2022-04-29 00:44:50 +00:00
}
.toggle.on .ball {
left: 22px;
}
.toggle.on .label {
color: #ffffff;
2022-05-04 10:24:25 +00:00
}