@primeuix/styles
Version:
115 lines (101 loc) • 4.48 kB
JavaScript
import{css}from"@primeuix/styled";var style=css`
.p-toggleswitch {
display: inline-block;
width: dt('toggleswitch.width');
height: dt('toggleswitch.height');
}
.p-toggleswitch-input {
cursor: pointer;
appearance: none;
position: absolute;
top: 0;
inset-inline-start: 0;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
opacity: 0;
z-index: 1;
outline: 0 none;
border-radius: dt('toggleswitch.border.radius');
}
.p-toggleswitch-slider {
cursor: pointer;
width: 100%;
height: 100%;
border-width: dt('toggleswitch.border.width');
border-style: solid;
border-color: dt('toggleswitch.border.color');
background: dt('toggleswitch.background');
transition:
background dt('toggleswitch.transition.duration'),
color dt('toggleswitch.transition.duration'),
border-color dt('toggleswitch.transition.duration'),
outline-color dt('toggleswitch.transition.duration'),
box-shadow dt('toggleswitch.transition.duration');
border-radius: dt('toggleswitch.border.radius');
outline-color: transparent;
box-shadow: dt('toggleswitch.shadow');
}
.p-toggleswitch-handle {
position: absolute;
top: 50%;
display: flex;
justify-content: center;
align-items: center;
background: dt('toggleswitch.handle.background');
color: dt('toggleswitch.handle.color');
width: dt('toggleswitch.handle.size');
height: dt('toggleswitch.handle.size');
inset-inline-start: dt('toggleswitch.gap');
margin-block-start: calc(-1 * calc(dt('toggleswitch.handle.size') / 2));
border-radius: dt('toggleswitch.handle.border.radius');
transition:
background dt('toggleswitch.transition.duration'),
color dt('toggleswitch.transition.duration'),
inset-inline-start dt('toggleswitch.slide.duration'),
box-shadow dt('toggleswitch.slide.duration');
}
.p-toggleswitch.p-toggleswitch-checked .p-toggleswitch-slider {
background: dt('toggleswitch.checked.background');
border-color: dt('toggleswitch.checked.border.color');
}
.p-toggleswitch.p-toggleswitch-checked .p-toggleswitch-handle {
background: dt('toggleswitch.handle.checked.background');
color: dt('toggleswitch.handle.checked.color');
inset-inline-start: calc(dt('toggleswitch.width') - calc(dt('toggleswitch.handle.size') + dt('toggleswitch.gap')));
}
.p-toggleswitch:not(.p-disabled):has(.p-toggleswitch-input:hover) .p-toggleswitch-slider {
background: dt('toggleswitch.hover.background');
border-color: dt('toggleswitch.hover.border.color');
}
.p-toggleswitch:not(.p-disabled):has(.p-toggleswitch-input:hover) .p-toggleswitch-handle {
background: dt('toggleswitch.handle.hover.background');
color: dt('toggleswitch.handle.hover.color');
}
.p-toggleswitch:not(.p-disabled):has(.p-toggleswitch-input:hover).p-toggleswitch-checked .p-toggleswitch-slider {
background: dt('toggleswitch.checked.hover.background');
border-color: dt('toggleswitch.checked.hover.border.color');
}
.p-toggleswitch:not(.p-disabled):has(.p-toggleswitch-input:hover).p-toggleswitch-checked .p-toggleswitch-handle {
background: dt('toggleswitch.handle.checked.hover.background');
color: dt('toggleswitch.handle.checked.hover.color');
}
.p-toggleswitch:not(.p-disabled):has(.p-toggleswitch-input:focus-visible) .p-toggleswitch-slider {
box-shadow: dt('toggleswitch.focus.ring.shadow');
outline: dt('toggleswitch.focus.ring.width') dt('toggleswitch.focus.ring.style') dt('toggleswitch.focus.ring.color');
outline-offset: dt('toggleswitch.focus.ring.offset');
}
.p-toggleswitch.p-invalid > .p-toggleswitch-slider {
border-color: dt('toggleswitch.invalid.border.color');
}
.p-toggleswitch.p-disabled {
opacity: 1;
}
.p-toggleswitch.p-disabled .p-toggleswitch-slider {
background: dt('toggleswitch.disabled.background');
}
.p-toggleswitch.p-disabled .p-toggleswitch-handle {
background: dt('toggleswitch.handle.disabled.background');
}
`;export{style};//# sourceMappingURL=index.mjs.map