maz-ui
Version:
A standalone components library for Vue.Js 3 & Nuxt.Js 3
2 lines (1 loc) • 2.72 kB
CSS
.m-switch{cursor:pointer;vertical-align:top;align-items:center;gap:.5rem;display:inline-flex;position:relative}.m-switch:has(input:disabled){cursor:not-allowed}.m-switch__input{position:absolute;left:-9999px}.m-switch__toggle{width:3rem;height:1.5rem;position:relative}.m-switch__toggle:before{content:"";border-width:var(--maz-border-width);--maz-tw-border-opacity:1;border-style:solid;border-color:hsl(var(--maz-border)/var(--maz-tw-border-opacity,1));--maz-tw-bg-opacity:1;background-color:hsl(var(--maz-background-600)/var(--maz-tw-bg-opacity,1));border-radius:9999px;width:3rem;height:1.5rem;transition:all .2s ease-in-out;display:block;position:relative;top:.125rem;left:0}.m-switch__toggle:is([class~=dark] *):before{--maz-tw-bg-opacity:1;background-color:hsl(var(--maz-background-400)/var(--maz-tw-bg-opacity,1))}.m-switch__toggle:after{content:"";--maz-tw-bg-opacity:1;background-color:hsl(var(--maz-background)/var(--maz-tw-bg-opacity,1));border-radius:9999px;width:1.25rem;height:1.25rem;transition:all .2s ease-in-out;display:block;position:absolute;top:.25rem;left:.125rem;box-shadow:0 0 4px #0003}.m-switch__input:checked+.m-switch__toggle:after{--maz-tw-translate-x:1.5rem;transform:translate(var(--maz-tw-translate-x),var(--maz-tw-translate-y))rotate(var(--maz-tw-rotate))skewX(var(--maz-tw-skew-x))skewY(var(--maz-tw-skew-y))scaleX(var(--maz-tw-scale-x))scaleY(var(--maz-tw-scale-y))}.m-switch__input:checked+.m-switch__toggle:before{background-color:var(--switch-color)}.m-switch__input:disabled+.m-switch__toggle:before{--maz-tw-bg-opacity:1;background-color:hsl(var(--maz-background-600)/var(--maz-tw-bg-opacity,1))}.m-switch__input:disabled+.m-switch__toggle:is([class~=dark] *):before{--maz-tw-bg-opacity:1;background-color:hsl(var(--maz-background-400)/var(--maz-tw-bg-opacity,1))}.m-switch__input:disabled+.m-switch__toggle:after{--maz-tw-bg-opacity:1;background-color:hsl(var(--maz-background-700)/var(--maz-tw-bg-opacity,1))}.m-switch__input:disabled+.m-switch__toggle:is([class~=dark] *):after{--maz-tw-bg-opacity:1;background-color:hsl(var(--maz-background-300)/var(--maz-tw-bg-opacity,1))}.m-switch__input:disabled+.m-switch__toggle:after{box-shadow:none}.m-switch__text{flex-direction:column;gap:0;display:flex}.m-switch__hint{--maz-tw-text-opacity:1;color:hsl(var(--maz-muted)/var(--maz-tw-text-opacity,1));font-size:.875rem;line-height:1.25rem}.m-switch__hint.--error{--maz-tw-text-opacity:1;color:hsl(var(--maz-destructive-600)/var(--maz-tw-text-opacity,1))}.m-switch__hint.--success{--maz-tw-text-opacity:1;color:hsl(var(--maz-success-600)/var(--maz-tw-text-opacity,1))}.m-switch__hint.--warning{--maz-tw-text-opacity:1;color:hsl(var(--maz-warning-600)/var(--maz-tw-text-opacity,1))}