react-switcher-rc
Version:
React switcher component
72 lines (71 loc) • 1.41 kB
CSS
.custom-switch {
position: relative;
height: 33px;
overflow: hidden;
user-select: none;
}
.custom-switch__shape {
position: relative;
width: 62px;
height: 31px;
margin: 0;
padding: 0;
background: #fff;
border: solid 1px #787878;
border-radius: 30px;
}
.custom-switch__shape:before {
position: absolute;
top: 4px;
left: 5px;
width: 20px;
height: 20px;
background-color: #dbdbdb;
border: solid 1px #c8c8c8;
border-radius: 100%;
transition: linear 0.12s;
content: "";
}
.custom-switch__checkbox {
position: absolute;
z-index: 1;
width: 100%;
height: 100%;
margin: 0;
background-color: transparent;
border: none;
cursor: pointer;
-webkit-appearance: none;
appearance: none;
}
.custom-switch__checkbox:focus {
border: 0;
outline: 0;
}
.custom-switch__checkbox:checked + .custom-switch__shape {
background: #03a9f4;
border: 1px solid #03a9f4;
box-shadow: none;
}
.custom-switch__checkbox:checked + .custom-switch__shape:before {
left: 34px;
color: #03a9f4;
font-weight: 700;
font-size: 12px;
line-height: 22px;
text-align: center;
background: #fff;
border: 1px solid transparent;
}
.custom-switch__icon-text {
display: flex;
justify-content: flex-end;
margin-top: 9px;
margin-right: 15px;
font-size: 12px;
}
.custom-switch__icon-text--checked {
justify-content: flex-start;
margin-left: 13px;
color: #fff;
}