73 lines
1.4 KiB
SCSS
73 lines
1.4 KiB
SCSS
.ct-option-switch {
|
|
display: flex;
|
|
align-items: center;
|
|
// position: relative;
|
|
width: 32px;
|
|
height: 20px;
|
|
padding-inline: 2px;
|
|
margin-inline-start: auto;
|
|
cursor: pointer;
|
|
border-radius: 100px;
|
|
box-sizing: border-box;
|
|
border: 2px solid #555d66;
|
|
transition: background 0.15s cubic-bezier(0.4, 0, 0.2, 1),
|
|
border-color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
|
|
|
|
// &:before, &:after {
|
|
// position: absolute;
|
|
// content: '';
|
|
// // display: block;
|
|
// transition: opacity 0.05s cubic-bezier(0.4, 0, 0.2, 1);
|
|
// }
|
|
|
|
// &:before {
|
|
// opacity: 0;
|
|
// // top: 5px;
|
|
// inset-inline-start: 7px;
|
|
// width: 2px;
|
|
// height: 6px;
|
|
// background: #fff;
|
|
// }
|
|
|
|
// &:after {
|
|
// opacity: 1;
|
|
// // top: 4px;
|
|
// inset-inline-end: 4px;
|
|
// width: 6px;
|
|
// height: 6px;
|
|
// border-radius: 100%;
|
|
// box-sizing: border-box;
|
|
// border: 2px solid #555d66;
|
|
// // transform: scale3d(0.8, 0.8, 1);
|
|
// }
|
|
|
|
> span {
|
|
// display: flex;
|
|
width: 12px;
|
|
height: 12px;
|
|
background: #555d66;
|
|
border-radius: inherit;
|
|
transform: translate3d(0, 0, 0);
|
|
transition: background 0.15s cubic-bezier(0.4, 0, 0.2, 1),
|
|
transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
&.ct-active {
|
|
background: var(--ui-accent-color);
|
|
border-color: var(--ui-accent-color);
|
|
|
|
// &:before {
|
|
// opacity: 1;
|
|
// }
|
|
|
|
// &:after {
|
|
// opacity: 0;
|
|
// }
|
|
|
|
span {
|
|
background: #fff;
|
|
transform: translate3d(12px, 0, 0);
|
|
}
|
|
}
|
|
}
|