@reown/appkit-ui
Version:
#### 🔗 [Website](https://reown.com/appkit)
66 lines (59 loc) • 1.45 kB
JavaScript
import { css } from 'lit';
export default css `
:host {
display: flex;
align-items: center;
justify-content: center;
}
label {
position: relative;
display: inline-block;
width: 32px;
height: 22px;
}
input {
width: 0;
height: 0;
opacity: 0;
}
span {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: var(--wui-color-blue-100);
border-width: 1px;
border-style: solid;
border-color: var(--wui-color-gray-glass-002);
border-radius: 999px;
transition:
background-color var(--wui-ease-inout-power-1) var(--wui-duration-md),
border-color var(--wui-ease-inout-power-1) var(--wui-duration-md);
will-change: background-color, border-color;
}
span:before {
position: absolute;
content: '';
height: 16px;
width: 16px;
left: 3px;
top: 2px;
background-color: var(--wui-color-inverse-100);
transition: transform var(--wui-ease-inout-power-1) var(--wui-duration-lg);
will-change: transform;
border-radius: 50%;
}
input:checked + span {
border-color: var(--wui-color-gray-glass-005);
background-color: var(--wui-color-blue-100);
}
input:not(:checked) + span {
background-color: var(--wui-color-gray-glass-010);
}
input:checked + span:before {
transform: translateX(calc(100% - 7px));
}
`;
//# sourceMappingURL=styles.js.map